:root{
  --bg1:#5140a8;
  --bg2:#8a72dd;
  --bg3:#f1c8ff;

  --card:#fff8ff;
  --card2:#ffffffd9;
  --line:#ead8ff;

  --txt:#4a3a73;
  --muted:#7f73a8;

  --main1:#ffd24d;
  --main2:#ffae2b;
  --mainTxt:#7a4200;

  --whiteBtn:#fff7ff;
  --whiteBtnTxt:#67589d;

  --accentPink:#ff8ec0;
  --accentBlue:#88bfff;
  --accentGold:#ffcf58;

  --shadow:0 10px 30px rgba(70,40,120,.18);
  --radius:28px;
}

*{
  box-sizing:border-box;
}

html, body{
  margin:0;
  padding:0;
}

body{
  min-height:100vh;
  min-height:100dvh;
  font-family:"Hiragino Maru Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  color:var(--txt);
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.45) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.35) 0 2px, transparent 3px),
    radial-gradient(circle at 30% 70%, rgba(255,255,255,.25) 0 2px, transparent 3px),
    linear-gradient(180deg,#1f1d5a,#5b3ea8,#ff9ed6);
  background-size:200px 200px,180px 180px,220px 220px,cover;
  background-attachment: fixed;
  transition:background .45s ease, filter .3s ease;
  overflow-x:hidden;

  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);

  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

@keyframes starsMove{
  0%{
    background-position:
      0 0,
      0 0,
      0 0,
      0 0,
      0 0;
  }
  100%{
    background-position:
      -360px 240px,
      240px 320px,
      -280px 180px,
      220px -160px,
      0 0;
  }
}

.bg-stars{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 15%, rgba(255,255,255,.6) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 10%, rgba(255,245,180,.55) 0 3px, transparent 4px),
    radial-gradient(circle at 85% 35%, rgba(255,255,255,.5) 0 2px, transparent 4px),
    radial-gradient(circle at 20% 60%, rgba(255,245,180,.4) 0 2px, transparent 4px),
    radial-gradient(circle at 60% 70%, rgba(255,255,255,.35) 0 2px, transparent 4px);
  opacity:.8;
}

.siteWrap{
  width:min(1120px, calc(100% - 24px));
  margin:0 auto;
  padding:20px 0 36px;
  position:relative;
  z-index:1;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

/* home */
.homeHero{
  min-height:calc(100vh - 40px);
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:24px;
  align-items:center;
}

.homeCard{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  border-radius:32px;
  box-shadow:var(--shadow);
  padding:32px;
  backdrop-filter: blur(10px);
}

.homeLogo{
  max-width:540px;
}

.homeLead{
  color:#ffffff;
  font-size:clamp(18px,2.5vw,24px);
  line-height:1.8;
  margin:24px 0 0;
  text-shadow:0 2px 12px rgba(60,30,120,.25);
}

.homeActions{
  margin-top:28px;
}

.homeCharacter{
  display:flex;
  justify-content:center;
  align-items:center;
}

.homeCharacter img{
  width:min(420px, 100%);
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.18));
}

/* buttons */
.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  border-radius:999px;
  transition:.18s ease;
  font-weight:900;
  box-shadow:0 8px 18px rgba(60,30,120,.15);
}

.btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.02);
}

.btn:active{
  transform:translateY(1px);
}

.btn-main{
  background:linear-gradient(180deg, var(--main1), var(--main2));
  color:var(--mainTxt);
  padding:14px 26px;
  font-size:18px;
}

.btn-xl{
  min-width:280px;
  min-height:66px;
  font-size:30px;
  border:4px solid #fff0bf;
}

/* fortune page */
.topHero{
  text-align:center;
  margin-bottom:18px;
}

.heroLogo{
  width:min(1024px, 100%);
  margin:0 auto 8px;
}

.heroCatch h1{
  margin:8px 0 6px;
  font-size:42px;
  color:#fff9ff;
  text-shadow:0 3px 16px rgba(60,30,120,.2);
}

.heroCatch p{
  margin:0 0 18px;
  font-size:18px;
  line-height:1.8;
  color:#fff7ff;
}

.heroMainButton{
  display:flex;
  justify-content:center;
}

.fortuneMenu{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:12px;
  margin:22px 0;
}

.menuBtn{
  appearance:none;
  border:none;
  background:linear-gradient(180deg, #fff8ff, #f7eefe);
  color:var(--whiteBtnTxt);
  border:3px solid #ecd7ff;
  border-radius:24px;
  padding:16px 14px;
  box-shadow:var(--shadow);
  cursor:pointer;
  font-weight:900;
  transition:.18s ease;
}

.menuBtn:hover{
  transform:translateY(-2px);
  filter:brightness(1.02);
}

.menuIcon{
  display:block;
  font-size:30px;
  margin-bottom:6px;
}

.menuText{
  display:block;
  font-size:18px;
  line-height:1.3;
}

.resultCard,
.pairCard{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,250,255,.9));
  border:4px solid #f0dbff;
  border-radius:34px;
  box-shadow:var(--shadow);
  padding:28px;
  margin-top:20px;
}

.resultCard{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:20px;
  align-items:center;
}

.resultBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 14px;
  border-radius:999px;
  background:#f0e8ff;
  color:var(--muted);
  font-weight:900;
  margin-bottom:8px;
}

.resultRank{
  margin:0 0 8px;
  font-size:58px;
  line-height:1.1;
  color:#dd6d1c;
  text-shadow:0 2px 0 #fff3d0;
}

.resultStars{
  font-size:40px;
  letter-spacing:4px;
  color:var(--accentGold);
  text-shadow:0 2px 0 #fff5cf;
  margin-bottom:14px;
}

.resultText{
  font-size:22px;
  line-height:1.8;
  margin:0 0 18px;
}

.resultInfoGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}

.infoBox{
  background:linear-gradient(180deg, #f7fbff, #eef5ff);
  border:2px solid #d8e8ff;
  border-radius:18px;
  padding:14px;
}

.infoLabel{
  font-size:13px;
  color:#6d87af;
  font-weight:900;
  margin-bottom:6px;
}

.infoValue{
  font-size:20px;
  font-weight:900;
  color:#4e5c90;
  line-height:1.5;
}

.resultRight{
  display:flex;
  justify-content:center;
  align-items:center;
}

.fortuneImage{
  width:min(380px, 100%);
  filter: drop-shadow(0 12px 18px rgba(40,20,100,.12));
}

.pairHeader h2{
  margin:0 0 8px;
  font-size:38px;
  text-align:center;
  color:#7b4ec3;
}

.pairHeader p{
  margin:0 0 20px;
  text-align:center;
  color:var(--muted);
  font-size:17px;
}

.pairBody{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:20px;
  align-items:center;
}

.pairField{
  display:block;
  margin-bottom:12px;
}

.pairField span{
  display:block;
  font-size:14px;
  font-weight:900;
  color:#816ea9;
  margin-bottom:6px;
}

.pairField input{
  width:100%;
  min-height:54px;
  border:none;
  outline:none;
  border-radius:18px;
  padding:0 16px;
  font-size:18px;
  background:#ffffff;
  border:2px solid #eadcff;
  color:var(--txt);
}

.pairField input:focus{
  border-color:#c5a9ff;
  box-shadow:0 0 0 4px rgba(197,169,255,.18);
}

.pairVisual{
  display:flex;
  justify-content:center;
}

.pairImage{
  width:min(260px, 100%);
  filter: drop-shadow(0 10px 18px rgba(40,20,100,.12));
}

.pairResult{
  margin-top:18px;
  border-radius:24px;
  border:3px solid #ffd7ea;
  background:linear-gradient(180deg,#fff7fb,#fff1f8);
  padding:20px;
  text-align:center;
}

.pairScore{
  font-size:44px;
  font-weight:900;
  color:#e66aa1;
  margin-bottom:8px;
}

.pairMessage{
  font-size:20px;
  line-height:1.8;
  color:#765d92;
}

.siteFooter{
  margin-top:24px;
  text-align:center;
  color:#fff8ff;
  opacity:.8;
  font-size:14px;
}

/* result color states */
.state-super .resultRank,
.state-daikichi .resultRank{
  color:#e07b00;
}

.state-love .resultBadge{
  background:#ffe7f1;
  color:#d66c9c;
}

.state-work .resultBadge{
  background:#e7f2ff;
  color:#5f83c0;
}

.state-money .resultBadge{
  background:#fff3d2;
  color:#be8b00;
}

/* responsive */
@media (max-width: 980px){
  .homeHero,
  .resultCard,
  .pairBody{
    grid-template-columns:1fr;
  }

  .fortuneMenu{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .resultRank{
    font-size:44px;
  }
}

@media (max-width: 640px){
  .siteWrap{
    width:min(100% - 16px, 1120px);
    padding:14px 0 24px;
  }

  .homeCard,
  .resultCard,
  .pairCard{
    padding:18px;
  }

  .heroCatch h1{
    font-size:32px;
  }

  .heroCatch p,
  .resultText,
  .pairMessage{
    font-size:16px;
  }

  .btn-xl{
    min-width:100%;
    font-size:24px;
  }

  .fortuneMenu{
    grid-template-columns:1fr;
  }

  .resultInfoGrid{
    grid-template-columns:1fr;
  }

  .resultRank{
    font-size:36px;
  }

  .resultStars{
    font-size:30px;
  }

  .pairHeader h2{
    font-size:30px;
  }

  .pairScore{
    font-size:34px;
  }
}
/* =========================================================
   static pages (about / privacy / terms / contact)
========================================================= */

.pageWrap{
  width:min(980px, calc(100% - 24px));
  margin:0 auto;
  padding:24px 0 44px;
  position:relative;
  z-index:1;
}

.pageHero{
  text-align:center;
  margin-bottom:18px;
}

.pageEyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  color:#fff7c7;
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
  box-shadow:var(--shadow);
  text-decoration:none;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}

.pageEyebrow:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.24);
  border-color:rgba(255,255,255,.36);
}

.pageEyebrow:focus-visible{
  outline:2px solid #fff7c7;
  outline-offset:4px;
}

.pageTitle{
  margin:12px 0 8px;
  font-size:clamp(30px, 5vw, 42px);
  line-height:1.2;
  color:#fff9ff;
  text-shadow:0 3px 16px rgba(60,30,120,.2);
}

.pageLead{
  max-width:760px;
  margin:0 auto;
  font-size:18px;
  line-height:1.85;
  color:#fff7ff;
  text-shadow:0 2px 12px rgba(60,30,120,.2);
}

.pageCard{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,250,255,.90));
  border:4px solid #f0dbff;
  border-radius:34px;
  box-shadow:var(--shadow);
  padding:28px;
  margin-top:20px;
}

.pageCard h2{
  margin:0 0 10px;
  font-size:24px;
  line-height:1.35;
  color:#7b4ec3;
}

.pageCard p{
  margin:10px 0;
  line-height:1.9;
  color:var(--txt);
}

.pageCard ul{
  margin:10px 0 0;
  padding-left:1.2em;
}

.pageCard li{
  margin:6px 0;
  line-height:1.8;
  color:var(--txt);
}

.pageGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}

.pageMiniCard{
  background:linear-gradient(180deg, #fff8ff, #f7eefc);
  border:2px solid #ead8ff;
  border-radius:24px;
  padding:16px;
}

.pageMiniCard h3{
  margin:0 0 6px;
  font-size:18px;
  color:#6f56b3;
}

.pageMiniCard p{
  margin:0;
  font-size:15px;
  line-height:1.8;
}

.pageNote{
  color:var(--muted);
  font-size:14px;
}

.pageBox{
  margin-top:14px;
  padding:16px;
  border-radius:22px;
  background:linear-gradient(180deg, #fff8ff, #f8f1ff);
  border:2px solid #eadcff;
}

.pageBox p{
  margin:0;
}

.pageFormRow{
  margin-bottom:14px;
}

.pageLabel{
  display:block;
  margin-bottom:6px;
  font-size:14px;
  font-weight:900;
  color:#816ea9;
}

.pageInput,
.pageTextarea{
  width:100%;
  border:2px solid #eadcff;
  background:#fff;
  color:var(--txt);
  border-radius:18px;
  padding:14px 16px;
  font-size:16px;
  outline:none;
}

.pageInput:focus,
.pageTextarea:focus{
  border-color:#c5a9ff;
  box-shadow:0 0 0 4px rgba(197,169,255,.18);
}

.pageTextarea{
  min-height:180px;
  resize:vertical;
}

.pageStatus{
  border-radius:18px;
  padding:14px 16px;
  margin-bottom:16px;
  font-weight:700;
}

.pageStatus.success{
  background:#ecfff0;
  border:2px solid #bde8c7;
  color:#2d7a42;
}

.pageStatus.error{
  background:#fff1f1;
  border:2px solid #f0c3c3;
  color:#b24a4a;
}

.pageFooter{
  margin-top:28px;
  text-align:center;
  color:#fff8ff;
  font-size:14px;
}

.pageFooter a{
  color:#fff8ff;
  text-decoration:none;
  opacity:.92;
}

.pageFooter a:hover{
  opacity:1;
  text-decoration:underline;
}

.pageFooterBar{
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.24);
}

/* =========================================================
   column
========================================================= */

.columnWrap{
  width:min(1120px, calc(100% - 24px));
  margin:0 auto;
  padding:24px 0 52px;
  position:relative;
  z-index:1;
}

.columnHero{
  text-align:center;
  margin-bottom:20px;
}

.columnLead{
  max-width:760px;
  margin:0 auto;
}

.columnIntroCard{
  margin-top:20px;
  padding:24px 26px;
  border-radius:30px;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.14));
  border:1px solid rgba(255,255,255,.24);
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
}

.columnIntroCard p{
  margin:0;
  color:#fff8ff;
  line-height:1.9;
  font-size:15px;
}

.columnGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
  margin-top:24px;
}

.columnCard{
  display:block;
  padding:24px 22px 22px;
  border-radius:30px;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,249,253,.93));
  border:2px solid rgba(237,219,255,.96);
  box-shadow:0 16px 34px rgba(30,18,58,.18);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.columnCard:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 42px rgba(22,12,46,.22);
  border-color:#ffd870;
}

.columnCard__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.columnCard__tag{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  background:linear-gradient(135deg,#fff1b6,#ffcfe9);
  color:#7a4600;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
}

.columnCard__icon{
  font-size:24px;
}

.columnCard h2{
  margin:0 0 10px;
  font-size:24px;
  line-height:1.4;
  color:#482770;
}

.columnCard p{
  margin:0;
  color:#5b4b73;
  line-height:1.85;
  font-size:15px;
}

.columnCard__cta{
  display:inline-flex;
  align-items:center;
  margin-top:16px;
  font-size:13px;
  font-weight:900;
  color:#8a56d0;
}

.columnSection{
  margin-top:20px;
}

.columnArticle{
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,249,254,.92));
  border:3px solid #efdfff;
  border-radius:34px;
  box-shadow:var(--shadow);
  padding:28px;
  margin-top:18px;
}

.columnArticle__meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.columnArticle__badge{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(255,216,111,.28), rgba(255,154,213,.24));
  color:#7d4e00;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
}

.columnArticle__name{
  font-size:14px;
  font-weight:900;
  color:#8a64bf;
}

.columnArticle h2{
  margin:0 0 12px;
  font-size:30px;
  line-height:1.35;
  color:#3f235f;
}

.columnArticle p{
  margin:0 0 12px;
  color:var(--txt);
  line-height:1.95;
  font-size:16px;
}

.columnArticle ul{
  margin:0 0 12px;
  padding-left:1.2em;
}

.columnArticle li{
  margin:6px 0;
  color:var(--txt);
  line-height:1.8;
}

.columnBackTop{
  display:flex;
  justify-content:center;
  margin-top:18px;
}

@media (max-width: 980px){
  .pageGrid{
    grid-template-columns:1fr;
  }

  .columnGrid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .pageWrap{
    width:min(100% - 16px, 980px);
    padding:14px 0 24px;
  }

  .pageCard{
    padding:18px;
    border-radius:26px;
  }

  .columnWrap{
    width:min(100% - 16px, 1120px);
    padding:14px 0 28px;
  }

  .columnIntroCard,
  .columnArticle{
    padding:20px 18px;
    border-radius:26px;
  }

  .columnCard{
    padding:20px 18px;
    border-radius:24px;
  }

  .columnCard h2{
    font-size:21px;
  }

  .columnArticle h2{
    font-size:24px;
  }

  .columnArticle p{
    font-size:15px;
  }

  .pageLead{
    font-size:16px;
  }

  .pageTitle{
    font-size:32px;
  }
}
/* =========================================================
   omotedake top page
========================================================= */

.omoteTop{
  width:min(1180px, calc(100% - 24px));
  margin:0 auto;
  padding:28px 0 44px;
  position:relative;
  z-index:1;
}

.omoteHeader{
  text-align:center;
  margin-bottom:14px;
}

.omoteHeader img{
  width:min(820px, 100%);
  margin:0 auto 8px;
}

.omoteHero{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:24px;
  align-items:center;
  margin-bottom:22px;
}

.omoteGlass{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  border-radius:28px;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.omoteHeroText{
  padding:30px 28px;
  text-align:left;
}

.omoteBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.18);
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  margin-bottom:16px;
  color:#fff;
}

.omoteTitle{
  font-size:clamp(28px, 4vw, 42px);
  font-weight:900;
  line-height:1.35;
  margin:0 0 10px;
  color:#fff;
}

.omoteDesc{
  font-size:16px;
  line-height:1.9;
  color:#fff;
  opacity:.95;
  margin:0 0 22px;
}

.omoteActions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.omoteBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 28px;
  border-radius:999px;
  font-weight:900;
  text-decoration:none;
  font-size:17px;
  transition:.2s;
  box-shadow:0 8px 20px rgba(0,0,0,.22);
}

.omoteBtn:hover{
  transform:translateY(-3px);
}

.omoteBtn:active{
  transform:scale(.96);
}

.omoteBtnMain{
  background:linear-gradient(135deg,#ffd86f,#ff9ad5);
  color:#fff;
}

.omoteBtnSub{
  background:rgba(255,255,255,.18);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
}

.omoteHeroVisual{
  position:relative;
  text-align:center;
  padding:24px 20px 20px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}

.omoteHeroVisual::after{
  content:"✨ ⭐ 🌟";
  position:absolute;
  top:120px;
  left:22px;
  font-size:28px;
  animation:omoteSparkle 2s linear infinite;
}

.omoteMainChar{
  width:min(420px, 100%);
  margin:0 auto;
  animation:omoteFloat 3s ease-in-out infinite;
  filter:drop-shadow(0 15px 25px rgba(0,0,0,.35));
}

.omoteHeroMiniGrid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}

.omoteHeroMiniCard{
  text-align:left;
  padding:14px;
  border-radius:20px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  box-shadow:0 10px 18px rgba(30,12,77,.12);
}

.omoteHeroMiniCard__label{
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  color:#fff6b8;
  margin-bottom:6px;
}

.omoteHeroMiniCard__text{
  font-size:13px;
  line-height:1.75;
  opacity:.96;
}

@keyframes omoteFloat{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
  100%{ transform:translateY(0); }
}

.omoteCastSection{
  margin-bottom:28px;
}

.omoteSectionHead{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.omoteSectionEyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}

.omoteSectionTitle{
  text-align:center;
  font-size:28px;
  font-weight:900;
  margin:8px 0 8px;
  color:#fff;
}

.omoteEntryBox{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  border-radius:28px;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:24px;
  margin-bottom:24px;
}

.omoteSectionTitle--left{
  text-align:left;
}

.omoteSectionDesc{
  text-align:center;
  font-size:15px;
  color:#fff;
  opacity:.92;
  margin:0 0 20px;
  line-height:1.8;
}

.omoteMenu{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin:0 0 24px;
}

.omoteMenu span{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:9px 14px;
  border-radius:999px;
  font-size:14px;
  background:rgba(255,255,255,.2);
  color:#fff;
}

.omoteEntryGrid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:12px;
}

.omoteEntryCard{
  display:block;
  padding:18px 16px;
  border-radius:22px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  transition:.2s ease;
}

.omoteEntryCard:hover,
.omoteCastCard:hover{
  transform:translateY(-4px);
}

.omoteEntryCardMain{
  background:linear-gradient(135deg, rgba(255,216,111,.22), rgba(255,154,213,.18));
}

.omoteEntryCard__icon{
  font-size:28px;
  margin-bottom:10px;
}

.omoteEntryCard h3{
  margin:0 0 8px;
  font-size:18px;
}

.omoteEntryCard p{
  margin:0;
  font-size:13px;
  line-height:1.8;
  opacity:.95;
}

.omoteCastGrid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:16px;
}

.omoteCastCard{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  border-radius:24px;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:16px 14px 18px;
  text-align:center;
  transition:.2s;
  color:#fff;
}

.omoteCastImageWrap{
  height:170px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  margin-bottom:12px;
}

.omoteCastImage{
  max-width:100%;
  max-height:165px;
  object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.28));
}

.omoteCastName{
  font-size:21px;
  font-weight:900;
  margin-bottom:6px;
}

.omoteCastRole{
  display:inline-block;
  font-size:12px;
  font-weight:900;
  padding:6px 12px;
  border-radius:999px;
  margin-bottom:10px;
  color:#4f2d4f;
  background:#fff2fb;
}

.omoteCastDesc{
  font-size:13px;
  line-height:1.75;
  opacity:.96;
  min-height:66px;
  margin-bottom:12px;
  text-align:center;
}

.omoteCastMeta{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
}

.omoteCastMeta span{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:#fff;
}

.omoteCardAnata .omoteCastRole{ background:#ffe4f2; color:#9c3d70; }
.omoteCardOsu .omoteCastRole{ background:#f5e7ea; color:#7c3f58; }
.omoteCardKane .omoteCastRole{ background:#e9ebff; color:#4d57a3; }
.omoteCardYake .omoteCastRole{ background:#f0e5f7; color:#6e3e84; }
.omoteCardOmote .omoteCastRole{ background:#fff1d5; color:#8c6230; }

.omoteWorldStrip{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  border-radius:28px;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:22px 24px;
  margin-bottom:24px;
  color:#fff;
}

.omoteWorldLinks,
.omoteCenterActions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin:0;
}

.omoteWorldNote{
  margin-top:12px;
  text-align:center;
  font-size:15px;
  line-height:1.8;
  opacity:.94;
}

.omoteStampStrip{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top right, rgba(255,216,111,.24), transparent 28%),
    radial-gradient(circle at left center, rgba(255,154,213,.20), transparent 24%),
    linear-gradient(135deg, rgba(26,18,43,.96), rgba(49,28,78,.94) 52%, rgba(20,18,32,.96));
  border:1px solid rgba(255,255,255,.14);
  border-radius:30px;
  box-shadow:0 18px 40px rgba(11,8,24,.34);
  padding:28px;
  margin-bottom:24px;
  color:#fff7ff;
}

.omoteStampStrip::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, rgba(255,255,255,.10), transparent 34%),
    radial-gradient(circle at 20% 120%, rgba(255,216,111,.14), transparent 38%);
  pointer-events:none;
}

.omoteStampStrip .omoteSectionTitle{
  position:relative;
  text-align:left;
  color:#fffdf7;
  text-shadow:0 3px 18px rgba(0,0,0,.24);
}

.omoteStampStrip .omoteSectionDesc{
  position:relative;
  color:rgba(255,248,255,.88);
  text-shadow:0 1px 10px rgba(0,0,0,.16);
}

.omoteStampBadge{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(138,255,184,.18), rgba(255,255,255,.12));
  border:1px solid rgba(138,255,184,.24);
  color:#d7ffe8;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.omoteSectionDesc--left{
  text-align:left;
}

.omoteStampGrid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}

.omoteStampCard{
  display:block;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:22px 20px 20px;
  border-radius:26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,248,253,.95));
  border:1px solid rgba(255,255,255,.72);
  color:#2b1d40;
  box-shadow:0 16px 30px rgba(13,10,28,.22);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.omoteStampCard::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,216,111,.18), transparent 40%),
    radial-gradient(circle at top right, rgba(255,154,213,.16), transparent 28%);
  pointer-events:none;
}

.omoteStampCard:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 36px rgba(9,8,20,.28);
  border-color:rgba(255,216,111,.88);
}

.omoteStampCard__meta{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 11px;
  border-radius:999px;
  background:linear-gradient(135deg, #fff1b8, #ffd782);
  color:#714200;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  box-shadow:0 8px 16px rgba(255,181,72,.18);
}

.omoteStampCard h3{
  position:relative;
  margin:12px 0 8px;
  font-size:21px;
  line-height:1.35;
  color:#251437;
}

.omoteStampCard p{
  position:relative;
  margin:0;
  font-size:14px;
  line-height:1.85;
  color:#5b4b73;
}

.omoteStampCard__cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  margin-top:auto;
  padding:0 18px;
  border-radius:999px;
  background:linear-gradient(135deg,#06c755,#14db6c 55%, #6bf39b);
  color:#fff;
  font-size:14px;
  font-weight:900;
  letter-spacing:.01em;
  box-shadow:
    0 14px 26px rgba(6,199,85,.24),
    inset 0 1px 0 rgba(255,255,255,.28);
}

.omoteStampCard p + .omoteStampCard__cta{
  margin-top:18px;
}

.omoteStampCard:hover .omoteStampCard__cta{
  filter:brightness(1.04);
}

.omoteFooter{
  text-align:center;
  margin-top:18px;
  font-size:12px;
  color:#fff;
  opacity:.78;
}

@keyframes omoteSparkle{
  0%{ transform:translateY(0); opacity:0; }
  50%{ opacity:1; }
  100%{ transform:translateY(-30px); opacity:0; }
}

@media (max-width: 1040px){
  .omoteEntryGrid,
  .omoteCastGrid{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
}

@media (max-width: 820px){
  .omoteTop{
    width:min(100%, calc(100% - 24px));
    padding:18px 0 28px;
  }

  .omoteHero{
    grid-template-columns:1fr;
  }

  .omoteHeroText{
    text-align:center;
  }

  .omoteActions{
    justify-content:center;
  }

  .omoteSectionHead{
    justify-content:center;
    text-align:center;
  }

  .omoteSectionDesc{
    text-align:center;
  }

  .omoteEntryGrid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .omoteCastGrid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .omoteHeroVisual::after{
    top:82px;
    left:10px;
    font-size:20px;
  }

  .omoteMainChar{
    width:min(320px, 100%);
  }

  .omoteHeroMiniGrid{
    grid-template-columns:1fr;
  }

  .omoteStampGrid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 640px){
  .omoteStampGrid{
    grid-template-columns:1fr;
  }

  .omoteStampStrip{
    padding:22px 18px;
  }
}

@media (max-width: 520px){
  .omoteBtn{
    width:100%;
  }

  .omoteEntryGrid,
  .omoteCastGrid{
    grid-template-columns:1fr;
  }

  .omoteTitle{
    font-size:24px;
  }

  .omoteDesc{
    font-size:15px;
  }

  .omoteSectionTitle{
    font-size:24px;
  }
}
/* =========================================================
   omotedake world map
========================================================= */

.worldMapWrap{
  width:min(1200px, calc(100% - 24px));
  margin:0 auto;
  padding:20px 0 48px;
  position:relative;
  z-index:1;
}

.worldHero{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.24);
  border-radius:28px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.10) 0, transparent 30%),
    linear-gradient(135deg, rgba(44,25,72,.92) 0%, rgba(27,18,44,.95) 48%, rgba(17,16,25,.96) 100%);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  padding:24px;
}

.worldHero::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle, rgba(255,255,255,.20) 0 1px, transparent 1px 100%);
  background-size:24px 24px;
  opacity:.08;
  pointer-events:none;
}

.worldBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  color:#ffd86b;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
}

.worldHero h1{
  margin:14px 0 10px;
  font-size:clamp(28px, 5vw, 52px);
  line-height:1.05;
  color:#fff;
}

.worldHero p{
  margin:0;
  max-width:820px;
  color:#e5daf6;
  line-height:1.9;
  font-size:15px;
}

.worldHeroActions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}

.worldSection{
  margin-top:22px;
}

.worldSectionTitle{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
  font-size:22px;
  font-weight:900;
  color:#fff8ff;
}

.worldSectionTitle .mini{
  font-size:13px;
  color:#e5daf6;
  font-weight:700;
}

.worldCard{
  border:1px solid rgba(255,255,255,.20);
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.08));
  box-shadow:0 18px 40px rgba(0,0,0,.22);
  padding:18px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.worldMapStage{
  position:relative;
  min-height:980px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), transparent 24%),
    radial-gradient(circle at 50% 55%, rgba(76,138,85,.14), transparent 18%),
    linear-gradient(180deg, #221631 0%, #14111f 100%);
  overflow:hidden;
}

.worldMapNode{
  position:absolute;
  width:280px;
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  box-shadow:0 18px 40px rgba(0,0,0,.20);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#fff;
}

.worldMapNode h3{
  margin:0 0 8px;
  font-size:19px;
  line-height:1.3;
}

.worldMapNode .sub{
  margin:0 0 8px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  color:#ffeeb0;
}

.worldMapNode p{
  margin:0;
  color:#e5daf6;
  font-size:13px;
  line-height:1.8;
  overflow-wrap:anywhere;
}

.worldChipRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.worldChip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:12px;
  font-weight:800;
}

.node-god{
  left:50%;
  top:24px;
  transform:translateX(-50%);
}

.node-money{
  left:32px;
  top:180px;
}

.node-love{
  right:32px;
  top:180px;
}

.node-center{
  left:50%;
  top:390px;
  transform:translateX(-50%);
}

.node-men{
  left:32px;
  top:670px;
}

.node-yake{
  right:32px;
  top:670px;
}

.worldStars .star{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.85);
  box-shadow:0 0 10px rgba(255,255,255,.45);
}

.worldPaths .path{
  position:absolute;
  background:linear-gradient(180deg, rgba(255,216,107,.42), rgba(255,255,255,.14));
  border-radius:999px;
  opacity:.6;
}

.worldPaths .path.v{
  width:4px;
}

.worldPaths .path.h{
  height:4px;
}

.worldLegend{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:16px;
}

.worldLegendItem{
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  padding:14px;
  background:rgba(255,255,255,.10);
}

.worldLegendItem h4{
  margin:0 0 6px;
  font-size:14px;
  color:#fff;
}

.worldLegendItem p{
  margin:0;
  color:#e5daf6;
  font-size:13px;
  line-height:1.7;
}

.worldBottomGrid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:18px;
  margin-top:22px;
}

.worldPanel{
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.08));
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  padding:18px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.worldPanel h3{
  margin:0 0 10px;
  font-size:20px;
  color:#fff;
}

.worldPanel p,
.worldPanel li{
  color:#e5daf6;
  line-height:1.9;
  font-size:14px;
}

.worldPanel ul{
  margin:0;
  padding-left:1.2em;
}

.worldNote{
  margin-top:12px;
  padding:14px;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#e5daf6;
  font-size:13px;
  line-height:1.8;
}

.worldFooterNav{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px;
}

@media (max-width:900px){
  .worldMapStage{
    min-height:auto;
    padding:14px;
  }

  .worldPaths{
    display:none;
  }

  .worldMapNode{
    position:relative;
    width:100%;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    margin-bottom:14px;
  }

  .worldLegend{
    grid-template-columns:1fr;
  }

  .worldBottomGrid{
    grid-template-columns:1fr;
  }
}