/* Production scope: TOP page only. Shared navigation/layout belongs in core.css. */
/* ==========================================================================
   ANIMA MYSTICA TOP PAGE / PAGE-SPECIFIC CSS
   --------------------------------------------------------------------------
   共通の body / header / global navigation / skip-link / footer は
   /assets/css/core.css に一本化。
   このファイルは TOP 固有の Hero / Quick Paths / Content Map / AMATEA /
   latest / AdSense 等だけを .top-page 名前空間内で管理する。
   ========================================================================== */

/* ==========================================================================
   ANIMA MYSTICA TOP PAGE / PRODUCTION CSS
   --------------------------------------------------------------------------
   本番用スタイル。後から修正しやすいよう、機能単位でセクションを分けています。
   基本 → コンポーネント → レスポンシブ → 状態表示、の順で記述します。
   ========================================================================== */

.top-page{
  --bg:#020711;
  --bg-deep:#01040a;
  --ink:#f4f1e9;
  --muted:#a8b1bd;
  --gold:#d7b66b;
  --blue-soft:#a9def6;
  --line-blue:rgba(103,184,225,.14);
  --max:1240px;
}

.top-page *{box-sizing:border-box}
.top-page{scroll-behavior:smooth}
.top-page{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family:"Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  line-height:1.8;
}
.top-page a{color:inherit;text-decoration:none}
.top-page button{font:inherit}
.top-page .container{width:min(var(--max),calc(100% - 48px));margin-inline:auto}


/* ==========================================================================
   ACCESSIBILITY / SKIP LINK
   --------------------------------------------------------------------------
   キーボード操作時に「本文へスキップ」を表示するためのスタイル。
   HTML内に直接書かず、他のスタイルと同様にこのCSSで一元管理します。
   ========================================================================== */





/* ==========================================================================
   HEADER
   ========================================================================== */












/* ==========================================================================
   HERO / FIRST VIEW
   ========================================================================== */

.top-page .hero{
  min-height:560px;
  position:relative;
  overflow:hidden;
  text-align:center;
  background:#000;
}
.top-page .hero-inner{
  min-height:560px;
  padding-top:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.top-page .hero-copy{width:100%;padding:22px 0 28px}
.top-page .hero-image{
  display:block;
  width:min(610px,78vw);
  margin:0 auto 18px;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.72));
  animation:womanFloat 9s ease-in-out infinite;
}
.top-page .hero h1{
  margin:0;
  font:400 clamp(36px,4.7vw,62px)/1 Georgia,serif;
  letter-spacing:.045em;
  background:linear-gradient(120deg,#f7edcf 5%,#e6ca86 52%,#c79d49 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.top-page .tagline{
  margin:18px 0 8px;
  color:#d9bb72;
  font:400 clamp(16px,1.7vw,22px)/1.5 Georgia,serif;
  letter-spacing:.06em;
}
.top-page .hero-copy p{margin:0;color:#bdc5d0;font-size:13px;line-height:1.85}
@keyframes womanFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

/* ==========================================================================
   LATEST ARTICLES / NOTICE
   ========================================================================== */

.top-page .latest-section{
  padding:30px 0 32px;
  background:var(--bg);
  border-top:1px solid rgba(103,184,225,.08);
}
.top-page .latest-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.top-page .news{
  padding:22px 24px;
  border:1px solid rgba(215,182,107,.22);
  border-radius:7px;
  background:rgba(255,255,255,.018);
}
.top-page .news-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:5px;
}
.top-page .section-label{
  display:block;
  margin-bottom:2px;
  color:#7eb8d4;
  font-size:9px;
  letter-spacing:.16em;
}
.top-page .news h3{margin:0;color:#edf6fa;font:400 25px Georgia,serif}
.top-page .news-head a{padding-top:5px;color:#b7d9e8;font-size:9px;letter-spacing:.12em;white-space:nowrap}
.top-page .news-item{
  display:grid;
  grid-template-columns:84px 1fr;
  gap:14px;
  padding:13px 0;
  border-top:1px solid rgba(255,255,255,.075);
  font-size:12px;
  line-height:1.55;
  transition:background .18s ease,padding-left .18s ease;
}
.top-page .news-head + .news-item{margin-top:8px}
.top-page .news-update-link{
  color:#a9d8ee;
  text-decoration:underline;
  text-decoration-color:rgba(169,216,238,.5);
  text-underline-offset:3px;
}
.top-page .news-update-link:hover,
.top-page .news-update-link:focus-visible{
  color:#fff;
  text-decoration-color:currentColor;
}
.top-page .news-item:hover{
  padding-left:7px;
  background:linear-gradient(90deg,rgba(43,139,194,.16),transparent 78%);
}
.top-page .news-item time{color:#79b9d8;font-size:11px}

/* ==========================================================================
   CONTENT MAP
   ========================================================================== */

.top-page .hub-nav{
  position:relative;
  padding:36px 0 40px;
  background:
    radial-gradient(circle at 15% 20%,rgba(31,113,165,.08),transparent 25%),
    #01050a;
  border-top:1px solid var(--line-blue);
  border-bottom:1px solid var(--line-blue);
}
.top-page .hub-intro{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:18px;
  padding:0 2px 13px;
  border-bottom:1px solid rgba(103,184,225,.16);
}
.top-page .hub-intro h2{margin:0;color:#d9eef8;font:400 20px/1.25 Georgia,serif;letter-spacing:.08em}
.top-page .hub-intro p{margin:0;color:#8299a5;font-size:10.5px;letter-spacing:.04em}
.top-page .hub-stack{display:grid;grid-template-columns:1fr;gap:10px}
.top-page .hub-card{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  overflow:hidden;
  border:1px solid rgba(89,167,210,.20);
  border-radius:5px;
  background:#07111a;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.top-page .hub-card:hover{
  transform:translateY(-3px);
  border-color:rgba(111,197,240,.44);
  box-shadow:0 14px 30px rgba(0,22,40,.28);
}
.top-page .hub-side{
  position:relative;
  min-height:88px;
  padding:18px 19px 18px 22px;
  border-right:1px solid rgba(89,167,210,.16);
  background:linear-gradient(145deg,rgba(18,48,69,.92),rgba(8,20,30,.96));
}
.top-page .hub-side::after{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(#6ec6ef,#2f7fa9);
}
.top-page .hub-title{margin:0;color:#f8fcfe;font:600 23px/1.25 Georgia,serif;letter-spacing:.04em}
.top-page #explore .hub-title{
  max-width:100%;
  overflow-wrap:break-word;
  word-break:normal;
  letter-spacing:.025em;
}
.top-page .hub-desc{margin:7px 0 0;color:#bfd0d8;font-size:12px;line-height:1.55}
.top-page .hub-body{
  display:flex;
  align-items:center;
  padding:12px 15px;
  background:linear-gradient(90deg,rgba(255,255,255,.015),transparent 32%);
}
.top-page .hub-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 20px;
  width:100%;
}

/* Entire CONTENT MAP link card is clickable */
.top-page a.hub-link-item{
  display:grid;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}
.top-page a.hub-link-item:focus-visible{
  outline:2px solid rgba(126,216,255,.82);
  outline-offset:2px;
  border-color:rgba(111,197,240,.52);
  background:linear-gradient(90deg,rgba(43,139,194,.15),rgba(7,17,26,.96));
}
.top-page .hub-link-item{
  display:block;
  padding:11px 7px 12px;
  border-bottom:1px solid rgba(255,255,255,.055);
  transition:background .18s ease,padding-left .18s ease;
}
.top-page .hub-link-item:hover{
  padding-left:8px;
  background:linear-gradient(90deg,rgba(43,139,194,.22),rgba(32,104,151,.12));
  box-shadow:inset 0 0 18px rgba(45,146,202,.08);
}
.top-page .hub-link-item .hub-link-title{
  position:relative;
  display:inline-block;
  padding-right:20px;
  color:#e7f0f4;
  font-size:14px;
  font-weight:650;
  line-height:1.35;
}
.top-page .hub-link-item .hub-link-title::after{
  content:"→";
  position:absolute;
  right:0;
  color:#6aa8c7;
  opacity:.82;
}
.top-page .hub-link-item:hover .hub-link-title{color:#f3fbff}
.top-page .hub-link-item:hover .hub-link-title::after{color:#b7e5fa;opacity:1}
.top-page .hub-link-desc{
  display:block;
  margin-top:3px;
  color:#afc1ca;
  font-size:11px;
  line-height:1.5;
}
.top-page .hub-link-item.primary .hub-link-title{color:#e9f8ff;font-weight:700}

/* ==========================================================================
   FOOTER
   ========================================================================== */










/* ==========================================================================
   REVEAL
   ========================================================================== */

.top-page .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .65s ease,transform .65s ease;
}
.top-page .reveal.visible{opacity:1;transform:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:860px){
  
  
  
  .top-page .latest-grid{grid-template-columns:1fr}
}

/* 861–1100px: compact desktop header.
   Android Chromeの「PC版サイト」など、PC風viewportでも横幅が狭い環境向け。 */
@media (min-width:861px) and (max-width:1100px){
  
  
  
  
  
  
}

@media (max-width:900px){
  .top-page .hub-links{grid-template-columns:1fr}
  .top-page .hub-card{grid-template-columns:185px minmax(0,1fr)}
}

@media (max-width:650px){
  .top-page #contentmap{scroll-margin-top:82px}
  .top-page .container{width:calc(100% - 28px)}
  .top-page .hero,
.top-page .hero-inner{min-height:500px}
  .top-page .hero-image{width:min(430px,94vw)}
  .top-page .hero h1{font-size:clamp(32px,10vw,43px)}
  /* ------------------------------------------------------------
     HEROキャッチコピー / スマホ時だけ少し小さくする
     PC・タブレットのサイズには影響しません。
     ------------------------------------------------------------ */
  .top-page .tagline{
    font-size:14px;
  }

  /* ------------------------------------------------------------
     HERO説明文 / スマホ時は </p> の段落改行だけを無効化
     ------------------------------------------------------------
     PC・タブレット：
       <p> は通常の block のままなので、HTMLの </p> ごとに改行します。

     スマホ：
       display:inline; に切り替えることで、3つの<p>を連続した文章として
       表示します。画面端では通常どおり自然に折り返します。

     【重要】
       white-space:nowrap は使用しません。
       したがって文章が画面外へはみ出して途中で切れることはありません。
     ------------------------------------------------------------ */
  .top-page .hero-copy p{
    /*
      display:contents にすると <p> 自体のレイアウト上の箱をなくし、
      3つの<p>内の文章を連続したテキストとして流せます。
      display:inline のようにインラインボックス由来の余計な行間が出ません。
    */
    display:contents;
    white-space:normal;
    word-break:normal;
    overflow-wrap:normal;
    line-break:strict;
  }

  /* display:contents 使用時の文字サイズ・行間は親側で統一 */
  .top-page .hero-copy{
    font-size:11.5px;
    line-height:1.45;
  }

  .top-page .latest-section{padding:20px 0 24px}
  .top-page .news{padding:18px 16px}
  .top-page .news h3{font-size:22px}
  .top-page .news-item{grid-template-columns:1fr;gap:3px;font-size:12px}

  .top-page .hub-nav{padding:28px 0 32px}
  .top-page .hub-intro{display:block}
  .top-page .hub-intro p{margin-top:6px}
  .top-page .hub-card{grid-template-columns:1fr}
  .top-page .hub-side{
    min-height:0;
    border-right:0;
    border-bottom:1px solid rgba(89,167,210,.16);
    padding:13px 15px 14px 19px;
  }
  .top-page .hub-title{font-size:21px}
  .top-page .hub-desc{font-size:11px}
  .top-page .hub-body{padding:8px 10px}
  .top-page .hub-link-item .hub-link-title{font-size:13.5px}
  .top-page .hub-link-desc{font-size:10.5px}

  
  
  
}

@media (prefers-reduced-motion:reduce){
  .top-page *,
.top-page *::before,
.top-page *::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

/* ==========================================================================
   MOBILE CONTENT MAP ACCORDION
   ========================================================================== */

.top-page .hub-toggle{
  width:100%;
  border:0;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:default;
}

.top-page .hub-toggle-icon{display:none}

@media (max-width:650px){

  .top-page .hub-toggle{
    position:relative;
    cursor:pointer;
    padding-right:48px;
  }

  .top-page .hub-toggle-icon{
    display:block;
    position:absolute;
    top:50%;
    right:18px;
    width:15px;
    height:15px;
    transform:translateY(-50%);
  }

  .top-page .hub-toggle-icon::before,
.top-page .hub-toggle-icon::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    background:#86c8e8;
    transform:translate(-50%,-50%);
    transition:transform .22s ease,opacity .22s ease;
  }

  .top-page .hub-toggle-icon::before{
    width:15px;
    height:1px;
  }

  .top-page .hub-toggle-icon::after{
    width:1px;
    height:15px;
  }

  .top-page .hub-card .hub-body{display:none}
  .top-page .hub-card.is-open .hub-body{display:flex}

  .top-page .hub-card.is-open .hub-toggle-icon::after{
    opacity:0;
    transform:translate(-50%,-50%) scaleY(0);
  }

  .top-page .hub-card.is-open{
    border-color:rgba(111,197,240,.34);
    box-shadow:0 10px 24px rgba(0,22,40,.18);
  }
}


/* ==========================================================================
   AMATEA FEATURE / CYBER SPHERE GATE
   既存TOPページの中でAMATEA部分だけを特別表示
   ========================================================================== */

.top-page .amatea-feature-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(74,197,246,.48);
  border-radius:6px;
  background:
    radial-gradient(circle at 72% 48%,rgba(25,118,210,.15),transparent 34%),
    linear-gradient(145deg,#06111a,#02070d 72%);
  box-shadow:
    0 0 0 1px rgba(75,212,255,.035),
    0 0 30px rgba(32,145,229,.10),
    inset 0 0 42px rgba(56,151,219,.045);
}

.top-page .amatea-feature-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.25;
  background:
    linear-gradient(rgba(88,212,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(88,212,255,.035) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.9));
}

.top-page .amatea-feature-card::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,#79eaff 52%,#557dff 72%,transparent);
  box-shadow:0 0 12px rgba(95,226,255,.60);
}

.top-page .amatea-feature-inner{
  position:relative;
  z-index:1;
  min-height:330px;
  display:grid;
  grid-template-columns:minmax(280px,.9fr) minmax(360px,1.1fr);
  align-items:center;
  gap:28px;
  padding:26px 30px;
}

.top-page .amatea-feature-copy{
  min-width:0;
}

.top-page .amatea-feature-kicker{
  display:block;
  margin-bottom:7px;
  color:#72d9f6;
  font:600 9px/1.3 "Courier New",monospace;
  letter-spacing:.18em;
}

.top-page .amatea-feature-title{
  margin:0;
  color:#eefcff;
  font:400 clamp(38px,4vw,58px)/1 Georgia,serif;
  letter-spacing:.13em;
  text-shadow:
    0 0 12px rgba(96,228,255,.48),
    0 0 28px rgba(57,131,255,.18);
}

.top-page .amatea-feature-subtitle{
  margin:13px 0 0;
  color:#dceff6;
  font:400 17px/1.55 Georgia,"Yu Mincho",serif;
}

.top-page .amatea-feature-desc{
  margin:13px 0 0;
  max-width:520px;
  color:#aebfc8;
  font-size:11px;
  line-height:1.85;
}


.top-page .amatea-feature-gate{
  position:relative;
  display:block;
  width:min(100%,620px);
  justify-self:center;
  overflow:hidden;
  border-radius:50%;
  filter:
    drop-shadow(0 0 14px rgba(113,235,255,.70))
    drop-shadow(0 0 38px rgba(48,163,255,.46))
    drop-shadow(0 0 80px rgba(28,83,255,.22));
  transition:transform .28s ease,filter .28s ease;
}

.top-page .amatea-feature-gate::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:7%;
  border-radius:50%;
  border:1px solid rgba(171,246,255,.58);
  box-shadow:
    0 0 18px rgba(133,239,255,.50),
    inset 0 0 32px rgba(79,203,255,.13);
  pointer-events:none;
}

.top-page .amatea-feature-gate::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%,transparent 0 55%,rgba(0,2,8,.06) 68%,rgba(0,0,0,.92) 100%);
}

.top-page .amatea-feature-gate img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  border-radius:50%;
  transform:scale(0.88);
  transition:transform .35s ease,filter .35s ease;
}

.top-page .amatea-feature-gate > span{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:7%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-width:210px;
  padding:10px 18px;
  border:1px solid rgba(128,235,255,.86);
  border-radius:4px;
  color:#edfdff;
  background:rgba(1,14,30,.75);
  backdrop-filter:blur(5px);
  font:17px/1 Georgia,serif;
  letter-spacing:.06em;
  white-space:nowrap;
  text-shadow:0 0 8px rgba(120,235,255,.75);
  box-shadow:
    0 0 12px rgba(103,224,255,.54),
    0 0 28px rgba(44,139,255,.28),
    inset 0 0 14px rgba(87,215,255,.08);
}

.top-page .amatea-feature-gate > span b{
  color:#9ef0ff;
  font-weight:400;
}

.top-page .amatea-feature-gate:hover{
  transform:scale(1.018);
  filter:
    drop-shadow(0 0 20px rgba(160,248,255,.90))
    drop-shadow(0 0 48px rgba(67,186,255,.58))
    drop-shadow(0 0 92px rgba(34,96,255,.30));
}

.top-page .amatea-feature-gate:hover img{
  transform:scale(0.92);
  filter:brightness(1.08) saturate(1.08);
}

@media (max-width:900px){
  .top-page .amatea-feature-inner{
    grid-template-columns:1fr;
    min-height:0;
  }

  .top-page .amatea-feature-copy{
    text-align:center;
  }

  .top-page .amatea-feature-desc{
    margin-inline:auto;
  }

  .top-page .amatea-feature-gate{
    width:min(100%,520px);
  }
}

@media (max-width:650px){
  .top-page .amatea-feature-inner{
    padding:22px 14px 24px;
    gap:20px;
  }

  .top-page .amatea-feature-title{
    font-size:38px;
  }

  .top-page .amatea-feature-subtitle{
    font-size:15px;
  }

  .top-page .amatea-feature-gate > span{
    min-width:185px;
    font-size:15px;
    padding:9px 14px;
  }
}


/* ==========================================================================
   TOP NAV / CATEGORY DROPDOWN
   ========================================================================== */

























/* PC: header navigation layout. */
@media (min-width:861px){
  

  

  
}

/* Tablet/mobile: header navigation becomes an accordion inside the hamburger menu. */
@media (max-width:860px){
  

  

  

  

  

  

  

  

  

  
}


/* ==========================================================================
   DROPDOWN HOVER RANGE FIX
   ナビ項目→吹き出しへの移動中にhoverが切れないようにし、
   吹き出し内の文章行全体をクリック可能範囲にする。
   ========================================================================== */

@media (min-width:861px){

  /* ナビ項目と吹き出しの間の空白をなくす */
  

  /* ナビ項目から吹き出しへ斜めに移動してもhoverを維持する透明な通路 */
  

  /* 吹き出し自体のhover判定を少し広げる */
  

  /* 小項目は「文字」だけでなく行全体をクリック範囲にする */
  

  

  /* 吹き出し上端にも少し余裕を持たせる */
  
}

/* ==========================================================================
   AMATEA COLLAPSIBLE CARD
   通常時はタイトルのみ。クリックで現在のAMATEAカードを展開。
   ========================================================================== */
.top-page .amatea-collapsible{
  overflow:hidden;
  transition:border-color .35s ease,box-shadow .35s ease,background .35s ease;
}

.top-page .amatea-summary{
  position:relative;
  z-index:4;
  width:100%;
  min-height:66px;
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px 20px;
  padding:12px 22px;
  border:0;
  color:inherit;
  background:rgba(2,8,14,.90);
  text-align:left;
  cursor:pointer;
  transition:background .25s ease;
}

.top-page .amatea-summary:hover,
.top-page .amatea-summary:focus-visible{
  background:rgba(5,19,31,.96);
}

.top-page .amatea-summary-kicker{
  color:#72d9f6;
  font:600 9px/1.2 "Courier New",monospace;
  letter-spacing:.15em;
  white-space:nowrap;
}

.top-page .amatea-summary-title{
  color:#effcff;
  font:400 27px/1 Georgia,serif;
  letter-spacing:.13em;
  text-shadow:0 0 12px rgba(96,228,255,.38);
  white-space:nowrap;
}

.top-page .amatea-summary-subtitle{
  color:#9fb5bf;
  font:400 12px/1.35 Georgia,"Yu Mincho",serif;
  letter-spacing:.03em;
  min-width:0;
}

.top-page .amatea-summary-action{
  display:flex;
  align-items:center;
  gap:10px;
  color:#8edff5;
  font:600 9px/1 "Courier New",monospace;
  letter-spacing:.15em;
}

.top-page .amatea-summary-icon{
  position:relative;
  width:22px;
  height:22px;
  flex:0 0 22px;
  border:1px solid rgba(118,223,248,.48);
  border-radius:50%;
}

.top-page .amatea-summary-icon::before,
.top-page .amatea-summary-icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:9px;
  height:1px;
  background:#9beaff;
  transform:translate(-50%,-50%);
  transition:transform .35s ease,opacity .35s ease;
}

.top-page .amatea-summary-icon::after{
  transform:translate(-50%,-50%) rotate(90deg);
}

.top-page .amatea-expandable{
  position:relative;
  z-index:1;
  max-height:0;
  opacity:0;
  visibility:hidden;
  overflow:hidden;
  transform:translateY(-8px);
  transition:max-height .48s ease,opacity .30s ease,transform .42s ease,visibility 0s linear .48s;
}

.top-page .amatea-collapsible.is-open .amatea-expandable{
  max-height:560px;
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:max-height .52s ease,opacity .32s ease .08s,transform .45s ease .04s,visibility 0s linear 0s;
}

.top-page .amatea-collapsible.is-open .amatea-summary{
  border-bottom:1px solid rgba(92,205,240,.16);
}

.top-page .amatea-collapsible.is-open .amatea-summary-icon::after{
  opacity:0;
  transform:translate(-50%,-50%) rotate(0deg);
}

.top-page .amatea-collapsible.is-open .amatea-summary-action-text::after{
  content:"";
}

/* 展開後は直前の1/3高さ版を維持 */
@media (min-width:901px){
  .top-page .amatea-collapsible .amatea-feature-inner{
    min-height:110px;
    padding:8px 22px 12px;
    gap:20px;
  }
  .top-page .amatea-collapsible .amatea-feature-gate{
    width:min(100%,200px);
  }
  .top-page .amatea-collapsible .amatea-feature-gate > span{
    transform:translateX(-40%);
    min-width:170px;
    padding:7px 14px;
    font-size:14px;
  }
}

@media (max-width:900px){
  .top-page .amatea-summary{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:8px 12px;
    min-height:64px;
    padding:11px 15px;
  }
  .top-page .amatea-summary-kicker{display:none}
  .top-page .amatea-summary-title{font-size:24px}
  .top-page .amatea-summary-subtitle{font-size:11px}
  .top-page .amatea-summary-action-text{display:none}
  .top-page .amatea-collapsible.is-open .amatea-expandable{max-height:1100px}
}

@media (max-width:520px){
  .top-page .amatea-summary{
    grid-template-columns:minmax(0,1fr) auto;
    min-height:58px;
  }
  .top-page .amatea-summary-subtitle{display:none}
  .top-page .amatea-summary-title{font-size:23px}
  .top-page .amatea-summary-icon{width:20px;height:20px;flex-basis:20px}
}

@media (prefers-reduced-motion:reduce){
  .top-page .amatea-expandable,
.top-page .amatea-summary-icon::before,
.top-page .amatea-summary-icon::after{
    transition:none !important;
  }
}


/* ==========================================================================\n   QUICK PATHS / HERO直下の4つの入口\n   ========================================================================== */
.top-page .quick-paths{
  position:relative;
  padding:22px 0 24px;
  background:
    radial-gradient(circle at 50% 0,rgba(48,131,181,.08),transparent 48%),
    linear-gradient(180deg,#000 0,#020711 100%);
  border-top:1px solid rgba(103,184,225,.09);
  border-bottom:1px solid rgba(103,184,225,.10);
}

.top-page .quick-paths-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.top-page .quick-path-card{
  position:relative;
  min-height:146px;
  display:flex;
  flex-direction:column;
  padding:19px 20px 17px;
  overflow:hidden;
  border:1px solid rgba(91,177,219,.22);
  border-radius:6px;
  background:
    linear-gradient(145deg,rgba(12,31,44,.92),rgba(4,12,19,.97));
  box-shadow:inset 0 0 26px rgba(55,147,202,.025);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.top-page .quick-path-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg,#72d8ff,rgba(65,133,184,.35),transparent);
  opacity:.78;
}

.top-page .quick-path-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 0 62%,rgba(76,181,234,.035) 100%);
}

.top-page .quick-path-card:hover,
.top-page .quick-path-card:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(112,204,244,.47);
  background:linear-gradient(145deg,rgba(15,40,57,.96),rgba(4,13,21,.99));
  box-shadow:0 13px 30px rgba(0,24,42,.30),inset 0 0 30px rgba(72,169,220,.04);
}

.top-page .quick-path-card:focus-visible{
  outline:2px solid rgba(126,216,255,.82);
  outline-offset:2px;
}

.top-page .quick-path-kicker{
  position:relative;
  z-index:1;
  display:block;
  margin-bottom:7px;
  color:#76bedf;
  font:600 8px/1.3 "Courier New",monospace;
  letter-spacing:.18em;
}

.top-page .quick-path-title{
  position:relative;
  z-index:1;
  display:block;
  color:#edf9fd;
  font:400 clamp(19px,1.7vw,24px)/1.35 Georgia,"Yu Mincho",serif;
  letter-spacing:.025em;
}

.top-page .quick-path-desc{
  position:relative;
  z-index:1;
  display:block;
  margin-top:7px;
  color:#aebfc8;
  font-size:10.5px;
  line-height:1.65;
}

.top-page .quick-path-action{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding-top:13px;
  color:#8bd6f2;
  font:600 8px/1 "Courier New",monospace;
  letter-spacing:.16em;
}

.top-page .quick-path-action b{
  color:#c9f2ff;
  font-size:12px;
  font-weight:400;
  transition:transform .20s ease;
}

.top-page .quick-path-card:hover .quick-path-action b,
.top-page .quick-path-card:focus-visible .quick-path-action b{
  transform:translateX(4px);
}

.top-page .quick-path-card-amatea{
  border-color:rgba(90,202,239,.32);
  background:
    radial-gradient(circle at 82% 20%,rgba(43,132,237,.10),transparent 36%),
    linear-gradient(145deg,rgba(7,28,45,.96),rgba(2,10,19,.99));
}

.top-page .quick-path-card-amatea::before{
  background:linear-gradient(180deg,#7defff,#527cff,transparent);
  box-shadow:0 0 10px rgba(91,218,255,.28);
}

.top-page .quick-path-card-amatea .quick-path-kicker{color:#82e4fa}
.top-page .quick-path-card-amatea .quick-path-action{color:#93e9fb}


/* ========================================================================== 
   INTEGRATED CATEGORY NAV / CONTENT MAP
   Introduction sections are visually grouped inside their parent categories.
   ========================================================================== */


.top-page .hub-links-grouped{align-items:start}
.top-page .hub-group-label{
  grid-column:1/-1;
  position:relative;
  margin:8px 4px 3px;
  padding:9px 10px 8px 13px;
  border-left:3px solid rgba(108,210,248,.76);
  border-bottom:1px solid rgba(111,197,240,.22);
  border-radius:2px;
  color:#a8e3f8;
  background:linear-gradient(90deg,rgba(36,126,173,.16),rgba(15,56,79,.07) 58%,transparent);
  font:700 11px/1.25 "Courier New","Noto Sans JP",monospace;
  letter-spacing:.12em;
  text-shadow:0 0 10px rgba(78,191,235,.20);
}
.top-page .hub-card-featured{
  border-color:rgba(100,190,230,.32);
  box-shadow:0 10px 28px rgba(0,25,43,.15);
}
.top-page .hub-card-featured .hub-side{
  background:linear-gradient(145deg,rgba(20,57,81,.96),rgba(8,20,30,.98));
}


@media (max-width:650px){
  .top-page .hub-group-label{
    margin-top:7px;
    padding-top:9px;
  }
}


/* ========================================================================== 
   2026-08-30 / NAV OFFSET + TIERED NAV + 4 QUICK PATHS + AMATEA GEO BG
   ========================================================================== */

/* Fixed header offset for in-page anchor navigation */
.top-page #information,
.top-page #mysticism,
.top-page #amatea,
.top-page #otaltist-activity,
.top-page #notices,
.top-page #latest,
.top-page #explore-hub,
.top-page #explore{scroll-margin-top:84px}

/* --------------------------------------------------------------------------
   Tiered mysticism navigation: only middle-level groups are initially visible.
   -------------------------------------------------------------------------- */

















/* --------------------------------------------------------------------------
   Four entrance section heading
   -------------------------------------------------------------------------- */
.top-page .quick-paths-intro{
  margin:0 0 14px;
  text-align:left;
}
.top-page .quick-paths-label{
  display:block;
  margin-bottom:4px;
  color:#79c7e8;
  font:700 8px/1.2 "Courier New",monospace;
  letter-spacing:.20em;
}
.top-page .quick-paths-intro h2{
  margin:0;
  color:#e7f6fc;
  font:400 clamp(20px,2vw,27px)/1.35 Georgia,"Yu Mincho",serif;
  letter-spacing:.035em;
}
.top-page .quick-paths-intro p{
  margin:5px 0 0;
  color:#91a7b2;
  font-size:10.5px;
  line-height:1.6;
}


/* --------------------------------------------------------------------------
   Content Map jump link / HERO下の初訪問者向け導線
   --------------------------------------------------------------------------
   「Content Map」の文字だけを、リンクであることが一目で分かるように強調。
   通常時は青白い文字＋細い下線、ホバー時だけ少し発光を強めます。
   -------------------------------------------------------------------------- */
.top-page .content-map-jump{
  display:inline-block;
  padding:0 .22em .02em;
  color:#bcecff;
  font-weight:700;
  letter-spacing:.035em;
  white-space:nowrap;
  border-bottom:1px solid rgba(121,210,248,.72);
  background:linear-gradient(180deg,transparent 58%,rgba(56,163,216,.13) 58%);
  text-shadow:0 0 8px rgba(78,188,239,.22);
  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease,
    text-shadow .18s ease;
}

.top-page .content-map-jump:hover,
.top-page .content-map-jump:focus-visible{
  color:#f0fbff;
  border-bottom-color:#a9edff;
  background:linear-gradient(180deg,transparent 52%,rgba(64,181,235,.24) 52%);
  text-shadow:
    0 0 8px rgba(126,220,255,.58),
    0 0 16px rgba(69,171,225,.25);
}

.top-page .content-map-jump:focus-visible{
  outline:1px solid rgba(145,226,255,.78);
  outline-offset:3px;
  border-radius:2px;
}

/* --------------------------------------------------------------------------
   Content Map anchor position / 固定ヘッダー対策
   --------------------------------------------------------------------------
   TOPヘッダーは70px固定表示なので、#contentmapへの移動時に見出しが
   ヘッダーの裏へ隠れないよう、スクロール位置に余白を確保します。
   -------------------------------------------------------------------------- */
.top-page #contentmap{
  scroll-margin-top:90px;
}

@media (max-width:650px){
  .top-page .quick-paths-intro{margin-bottom:11px}
  .top-page .quick-paths-intro h2{font-size:20px}
  .top-page .quick-paths-intro p{font-size:10px}
}

/* --------------------------------------------------------------------------
   Four entrance cards: all four in one row on desktop.
   Mysticism and AMATEA remain visually higher-priority.
   -------------------------------------------------------------------------- */
.top-page .quick-path-card-primary{
  min-height:172px;
  padding:23px 24px 20px;
  border-color:rgba(105,203,243,.42);
  background:
    radial-gradient(circle at 82% 18%,rgba(54,145,211,.14),transparent 34%),
    linear-gradient(145deg,rgba(10,36,53,.98),rgba(2,11,19,.99));
  box-shadow:0 10px 26px rgba(0,22,39,.25),inset 0 0 34px rgba(65,167,221,.04);
}
.top-page .quick-path-card-primary .quick-path-kicker{
  color:#9ce6fb;
  font-size:9px;
}
.top-page .quick-path-card-primary .quick-path-title{
  color:#f4fcff;
  font-size:clamp(24px,2.15vw,31px);
  text-shadow:0 0 13px rgba(107,211,247,.12);
}
.top-page .quick-path-card-primary .quick-path-desc{
  max-width:94%;
  color:#bdccd4;
  font-size:11px;
}
.top-page .quick-path-card-primary::before{
  width:3px;
  background:linear-gradient(180deg,#9beeff,#4aa3d4,transparent);
  box-shadow:0 0 11px rgba(92,213,255,.22);
}
.top-page .quick-path-card-mysticism{
  border-color:rgba(128,200,233,.45);
  background:
    radial-gradient(circle at 82% 12%,rgba(72,160,204,.12),transparent 35%),
    linear-gradient(145deg,rgba(13,39,54,.98),rgba(3,12,19,.99));
}
.top-page .quick-path-card-amatea{
  border-color:rgba(100,215,251,.52);
  background:
    radial-gradient(circle at 80% 20%,rgba(61,137,255,.17),transparent 36%),
    linear-gradient(145deg,rgba(6,31,52,.98),rgba(2,9,18,.99));
  box-shadow:0 10px 30px rgba(0,28,54,.30),inset 0 0 38px rgba(63,174,255,.05);
}
.top-page .quick-path-card-secondary{
  min-height:116px;
  padding:17px 20px 15px;
  background:linear-gradient(145deg,rgba(9,26,38,.90),rgba(3,11,18,.96));
  border-color:rgba(91,177,219,.20);
}
.top-page .quick-path-card-secondary .quick-path-title{font-size:20px}
.top-page .quick-path-card-secondary .quick-path-desc{font-size:10px}
.top-page .quick-path-card-otaltist::before{
  background:linear-gradient(180deg,#7ab8d3,rgba(73,126,153,.34),transparent);
}

/* --------------------------------------------------------------------------
   AMATEA: centered text. top_image/geo.webp is visible ONLY while the card is closed.
   The 70% dark overlay leaves the image at roughly 30% visual strength.
   -------------------------------------------------------------------------- */
.top-page .amatea-feature-card{
  background:
    radial-gradient(circle at 72% 48%,rgba(25,118,210,.15),transparent 34%),
    linear-gradient(145deg,#06111a,#02070d 72%);
}
.top-page .amatea-feature-card::before{
  opacity:.18;
  background:
    linear-gradient(rgba(88,212,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(88,212,255,.03) 1px,transparent 1px);
  background-size:26px 26px;
}
.top-page .amatea-summary{
  position:relative;
  grid-template-columns:minmax(0,1fr) auto;
  background:rgba(2,8,14,.90);
  text-align:center;
  transition:background .28s ease;
}
.top-page .amatea-collapsible:not(.is-open) .amatea-summary{
  background:
    linear-gradient(rgba(2,8,14,.70),rgba(2,8,14,.70)),
    url("../img/top/geo.webp") center center / cover no-repeat;
}
.top-page .amatea-collapsible.is-open .amatea-summary{
  background:rgba(2,8,14,.90);
}
.top-page .amatea-summary-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.top-page .amatea-summary-kicker,
.top-page .amatea-summary-title,
.top-page .amatea-summary-subtitle{display:block;text-align:center}
.top-page .amatea-summary-action{justify-self:end}
.top-page .amatea-feature-copy{text-align:center}
.top-page .amatea-feature-desc{margin-left:auto;margin-right:auto}
.top-page .amatea-feature-kicker,
.top-page .amatea-feature-title,
.top-page .amatea-feature-subtitle{text-align:center}

/* --------------------------------------------------------------------------
   Important notice: subtly warmer warning treatment while keeping site tone.
   -------------------------------------------------------------------------- */
.top-page .notices{
  position:relative;
  overflow:hidden;
  border-color:rgba(226,174,91,.46);
  background:
    radial-gradient(circle at 8% 8%,rgba(185,112,39,.13),transparent 30%),
    linear-gradient(145deg,rgba(42,27,13,.72),rgba(8,14,21,.97));
  box-shadow:0 8px 24px rgba(0,0,0,.16),inset 0 0 28px rgba(180,115,45,.025);
}
.top-page .notices::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(#e2b45f,#a66d2b,transparent);
  box-shadow:0 0 12px rgba(221,166,81,.26);
}
.top-page .notices .section-label{color:#e0b66c}
.top-page .notices h3{color:#fff2dc}
.top-page .notices .news-item time{color:#d9a958}

@media (max-width:860px){
  
  
  
  
}

@media (max-width:900px){
  .top-page .quick-paths-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .top-page .quick-path-card-primary{min-height:0;padding:19px 20px 17px}
  .top-page .quick-path-card-secondary{min-height:0;padding:16px 18px 14px}
}


/* ========================================================================== 
   2026-08-30 / QUICK PATH DESTINATION FOCUS
   4つの入口から移動した対象を一時的に強調する。
   ========================================================================== */

.top-page #information,
.top-page #mysticism,
.top-page #amatea,
.top-page #otaltist-activity{
  scroll-margin-top:0;
}

.top-page .hub-card,
.top-page .amatea-feature-card{
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

.top-page .hub-card.entrance-target-highlight{
  transform:translateY(-2px);
  border-color:rgba(126,220,255,.82);
  box-shadow:
    0 0 0 1px rgba(118,218,255,.14),
    0 0 24px rgba(57,171,226,.30),
    0 16px 34px rgba(0,21,39,.30),
    inset 0 0 30px rgba(70,178,228,.06);
  animation:entranceTargetPulse 1.6s ease-out 1;
}

.top-page .amatea-feature-card.entrance-target-highlight{
  transform:translateY(-2px);
  border-color:rgba(126,238,255,.92);
  box-shadow:
    0 0 0 1px rgba(121,231,255,.18),
    0 0 30px rgba(73,205,255,.40),
    0 0 54px rgba(65,115,255,.18),
    inset 0 0 36px rgba(81,197,255,.07);
  animation:entranceTargetPulse 1.6s ease-out 1;
}

@keyframes entranceTargetPulse{
  0%{filter:brightness(1)}
  30%{filter:brightness(1.12)}
  100%{filter:brightness(1)}
}

@media (prefers-reduced-motion:reduce){
  .top-page .hub-card.entrance-target-highlight,
.top-page .amatea-feature-card.entrance-target-highlight{
    animation:none;
  }
}


/* ==========================================================================
   ENTRANCE NAV / PERSISTENT SELECTED STATE
   入口カードから選んだカテゴリは、一時発光後も穏やかな選択状態を維持。
   別の入口を選ぶと、選択状態は新しいカードへ移動します。
   ========================================================================== */

.top-page .hub-card.entrance-target-selected{
  border-color:rgba(111,197,240,.52);
  background:
    linear-gradient(90deg,rgba(25,92,135,.45),rgba(7,22,34,.98) 44%);
  box-shadow:
    0 0 0 1px rgba(111,197,240,.07),
    0 10px 28px rgba(0,35,58,.22),
    inset 0 0 32px rgba(65,166,216,.07);
}

.top-page .hub-card.entrance-target-selected .hub-side{
  background:
    linear-gradient(145deg,rgba(20,78,112,.99),rgba(7,27,42,.99));
}

.top-page .hub-card.entrance-target-selected .hub-side::after{
  background:linear-gradient(#9be7ff,#449aca);
  box-shadow:0 0 10px rgba(105,211,250,.30);
}

.top-page .hub-card.entrance-target-selected .hub-title{
  color:#f5fcff;
  text-shadow:0 0 10px rgba(123,213,249,.12);
}

.top-page .amatea-feature-card.entrance-target-selected{
  border-color:rgba(104,220,250,.64);
  box-shadow:
    0 0 0 1px rgba(101,222,255,.09),
    0 0 24px rgba(45,157,225,.18),
    inset 0 0 34px rgba(68,166,228,.045);
}

/* top_image/geo.webpは閉じた状態だけ。選択中は青みを少し足すが画像濃度は大きく変えない。 */
.top-page .amatea-feature-card.entrance-target-selected:not(.is-open) .amatea-summary{
  background:
    linear-gradient(rgba(3,22,40,.58),rgba(2,16,30,.66)),
    url("../img/top/geo.webp") center center / cover no-repeat;
  box-shadow:inset 0 0 42px rgba(72,181,235,.14);
}

.top-page .amatea-feature-card.entrance-target-selected .amatea-summary-title{
  text-shadow:
    0 0 10px rgba(131,237,255,.58),
    0 0 22px rgba(63,145,255,.22);
}

/* 一時発光は選択状態の上に重ねる */
.top-page .hub-card.entrance-target-selected.entrance-target-highlight,
.top-page .amatea-feature-card.entrance-target-selected.entrance-target-highlight{
  filter:brightness(1.04);
}

/* ========================================================================== 
   2026-08-30 / SMARTPHONE QUICK PATHS AS COMPACT SHORTCUTS
   スマホでは4つの入口を詳細カードではなく、短いショートカットUIとして表示。
   下のCONTENT MAPとの重複感を減らす。
   ========================================================================== */
@media (max-width:650px){
  .top-page .quick-paths{
    padding:14px 0 12px;
  }

  .top-page .quick-paths-intro{
    margin-bottom:10px;
  }

  .top-page .quick-paths-intro h2{
    font-size:18px;
  }

  /* ------------------------------------------------------------
     「ANIMA MYSTICAへの4つの入口」説明文
     スマホ時は2つの<p>の </p> による改行を無効化します。

     PC・タブレットでは<p>はblockのため2段落表示。
     スマホではinlineにして、2段落を連続した文章として表示し、
     画面幅に合わせて自然に折り返します。
     ------------------------------------------------------------ */
  .top-page .quick-paths-intro p{
    /*
      スマホ時は<p>の箱だけを消して、2つの文章を連続表示します。
      display:inline は使わないため、余計な行間が出にくくなります。
    */
    display:contents;
    white-space:normal;
    word-break:normal;
    overflow-wrap:normal;
    line-break:strict;
  }

  .top-page .quick-paths-intro{
    color:#8ea3ae;
    font-size:9.5px;
    line-height:1.35;
  }

  .top-page .quick-paths-grid{
    grid-template-columns:1fr;
    gap:8px;
  }

  .top-page .quick-path-card,
.top-page .quick-path-card-primary,
.top-page .quick-path-card-secondary{
    min-height:auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "kicker action"
      "title action";
    align-items:center;
    gap:2px 12px;
    padding:11px 14px 10px 16px;
    border-radius:5px;
    box-shadow:0 5px 14px rgba(0,18,31,.18), inset 0 0 18px rgba(72,169,220,.025);
  }

  .top-page .quick-path-card::before,
.top-page .quick-path-card-primary::before,
.top-page .quick-path-card-secondary::before{
    width:3px;
    opacity:.92;
  }

  .top-page .quick-path-kicker{
    grid-area:kicker;
    margin:0;
    font-size:7px;
    line-height:1.2;
    letter-spacing:.14em;
  }

  .top-page .quick-path-title,
.top-page .quick-path-card-primary .quick-path-title,
.top-page .quick-path-card-secondary .quick-path-title{
    grid-area:title;
    margin:0;
    font-size:17px !important;
    line-height:1.28;
    letter-spacing:.015em;
  }

  .top-page .quick-path-card-primary .quick-path-title{
    font-size:18px !important;
  }

  .top-page .quick-path-desc,
.top-page .quick-path-card-primary .quick-path-desc,
.top-page .quick-path-card-secondary .quick-path-desc{
    display:none;
  }

  .top-page .quick-path-action{
    grid-area:action;
    align-self:center;
    justify-self:end;
    margin-top:0;
    padding-top:0;
    color:#9fe6ff;
    font-size:0;
    letter-spacing:0;
    gap:0;
  }

  .top-page .quick-path-action b{
    font-size:16px;
    line-height:1;
    transform:none !important;
  }

  .top-page .quick-path-card-primary{
    border-color:rgba(111,206,245,.45);
    background:
      radial-gradient(circle at 88% 18%,rgba(57,144,214,.10),transparent 34%),
      linear-gradient(145deg,rgba(10,34,50,.96),rgba(3,11,19,.99));
  }

  .top-page .quick-path-card-secondary{
    border-color:rgba(88,168,205,.23);
    background:linear-gradient(145deg,rgba(8,22,33,.88),rgba(3,10,17,.96));
  }

  .top-page .quick-path-card-amatea{
    background:
      radial-gradient(circle at 88% 20%,rgba(61,137,255,.14),transparent 34%),
      linear-gradient(145deg,rgba(6,29,48,.97),rgba(2,9,18,.99));
  }
}


/* ========================================================================== 
   2026-09-02 / FOUR ENTRANCE CARDS / IMAGE POSITION & HOVER CONTROLS
   --------------------------------------------------------------------------
   4つの入口カードの背景画像を、カードごとに調整しやすくするための設定です。

   【背景位置の指定方法】
   --quick-path-position:              PC / タブレット通常時の背景位置
   --quick-path-hover-position:        PC / タブレットのホバー時の背景位置
   --quick-path-mobile-position:       スマホ通常時の背景位置
   --quick-path-mobile-hover-position: スマホでホバー時の背景位置

   値は「横位置 縦位置」の順です。
   例：50% 50% = 画像の中央
       40% 50% = 少し左側を見せる
       60% 50% = 少し右側を見せる
       50% 35% = 少し上側を見せる
       50% 65% = 少し下側を見せる

   【重要：スマホでホバーした時の位置】
   スマホ通常時とホバー時で同じ場所を見せたい場合は、
   --quick-path-mobile-position と --quick-path-mobile-hover-position を
   同じ数値にしてください。

   【ホバー時の画像の見え方】
   --quick-path-hover-dark / --quick-path-hover-dark-2 の最後の数値が
   オーバーレイの不透明度です。
   数値を小さくするほど画像がはっきり見えます。
   例：.25 = かなりはっきり / .40 = 標準 / .60 = 暗め
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Information / サイトご利用に際してのご案内
   -------------------------------------------------------------------------- */
.top-page .quick-path-card-begin{
  --quick-path-bg:url("../img/top/quick-path-info.webp");

  /* PC / タブレット通常時の背景画像位置 */
  --quick-path-position:50% 50%;

  /* PC / タブレットのホバー時の背景画像位置 */
  --quick-path-hover-position:50% 50%;

  /* スマホ通常時の背景画像位置：ここを数値で調整してください */
  --quick-path-mobile-position:50% 42%;

  /* スマホでホバーした時の背景画像位置：通常時と別に調整できます */
  --quick-path-mobile-hover-position:50% 42%;

  /* 通常時の青黒オーバーレイ */
  --quick-path-dark:rgba(3,13,21,.70);
  --quick-path-dark-2:rgba(3,10,17,.70);
  --quick-path-glow:rgba(81,167,214,.11);

  /* ホバー時：小さい数値ほど背景画像がはっきり見えます */
  --quick-path-hover-dark:rgba(4,15,24,.38);
  --quick-path-hover-dark-2:rgba(2,8,15,.48);
  --quick-path-hover-glow:rgba(100,193,241,.18);
}

/* --------------------------------------------------------------------------
   2. MYSTICISM / 各種神秘行を学ぶ
   -------------------------------------------------------------------------- */
.top-page .quick-path-card-mysticism{
  --quick-path-bg:url("../img/top/quick-path-mysticism.webp");

  /* PC / タブレット通常時の背景画像位置 */
  --quick-path-position:50% 50%;

  /* PC / タブレットのホバー時の背景画像位置 */
  --quick-path-hover-position:50% 50%;

  /*
     スマホ通常時の背景画像位置。
     今回は本や魔術図が見えやすいよう、中央より少し下を初期値にしています。
     ここを 50% 55% / 50% 65% などと変更して微調整してください。
  */
  --quick-path-mobile-position:50% 70%;

  /*
     スマホでホバーした時の背景画像位置。
     通常時と同じ場所を維持したい場合は、上の値と同じ数値にします。
     例：通常時が 50% 60% なら、ここも 50% 60%。
  */
  --quick-path-mobile-hover-position:50% 70%;

  /* 通常時の青黒オーバーレイ */
  --quick-path-dark:rgba(4,14,22,.70);
  --quick-path-dark-2:rgba(3,10,17,.70);
  --quick-path-glow:rgba(95,181,224,.12);

  /* ホバー時のオーバーレイ */
  --quick-path-hover-dark:rgba(4,15,24,.38);
  --quick-path-hover-dark-2:rgba(2,8,15,.48);
  --quick-path-hover-glow:rgba(100,193,241,.18);
}

/* --------------------------------------------------------------------------
   3. AMATEA
   -------------------------------------------------------------------------- */
.top-page .quick-path-card-amatea{
  --quick-path-bg:url("../img/top/quick-path-amatea.webp");

  /* PC / タブレット通常時の背景画像位置 */
  --quick-path-position:50% 50%;

  /* PC / タブレットのホバー時の背景画像位置 */
  --quick-path-hover-position:50% 50%;

  /* スマホ通常時の背景画像位置 */
  --quick-path-mobile-position:50% 50%;

  /* スマホでホバーした時の背景画像位置 */
  --quick-path-mobile-hover-position:50% 50%;

  /* 通常時：元画像が明るいため、他カードより濃いオーバーレイ */
  --quick-path-dark:rgba(3,13,23,.80);
  --quick-path-dark-2:rgba(2,8,16,.80);
  --quick-path-glow:rgba(87,173,255,.14);

  /* ホバー時のオーバーレイ */
  --quick-path-hover-dark:rgba(3,12,22,.40);
  --quick-path-hover-dark-2:rgba(2,8,16,.50);
  --quick-path-hover-glow:rgba(100,193,241,.18);
}

/* --------------------------------------------------------------------------
   4. IT_OTALTIST / IT系オタルティスト活動
   -------------------------------------------------------------------------- */
.top-page .quick-path-card-otaltist{
  --quick-path-bg:url("../img/top/quick-path-otaltist.webp");

  /* PC / タブレット通常時の背景画像位置 */
  --quick-path-position:50% 50%;

  /* PC / タブレットのホバー時の背景画像位置 */
  --quick-path-hover-position:50% 50%;

  /* スマホ通常時の背景画像位置：人物の顔を少し上寄りに見せる初期値 */
  --quick-path-mobile-position:50% 40%;

  /* スマホでホバーした時の背景画像位置 */
  --quick-path-mobile-hover-position:50% 40%;

  /* 通常時の青黒オーバーレイ */
  --quick-path-dark:rgba(4,14,22,.50);
  --quick-path-dark-2:rgba(3,10,17,.58);
  --quick-path-glow:rgba(83,162,209,.10);

  /* ホバー時のオーバーレイ */
  --quick-path-hover-dark:rgba(4,15,24,.28);
  --quick-path-hover-dark-2:rgba(2,8,15,.38);
  --quick-path-hover-glow:rgba(100,193,241,.18);
}

/* --------------------------------------------------------------------------
   共通描画 / 通常時
   -------------------------------------------------------------------------- */
.top-page .quick-path-card,
.top-page .quick-path-card-primary,
.top-page .quick-path-card-secondary{
  background:
    linear-gradient(
      145deg,
      var(--quick-path-dark,rgba(4,14,22,.48)),
      var(--quick-path-dark-2,rgba(3,10,17,.56))
    ),
    radial-gradient(
      circle at 85% 18%,
      var(--quick-path-glow,rgba(80,160,210,.16)),
      transparent 38%
    ),
    var(--quick-path-bg,none)
      var(--quick-path-position,50% 50%) / cover no-repeat !important;
  background-color:#07131d;
  box-shadow:0 8px 24px rgba(0,18,32,.24), inset 0 0 26px rgba(72,169,220,.03);
}

/* 主役2枚は少しだけ印象を強める */
.top-page .quick-path-card-primary{
  box-shadow:0 10px 28px rgba(0,20,36,.28), inset 0 0 34px rgba(75,180,232,.045);
}

/* --------------------------------------------------------------------------
   共通描画 / ホバー時
   各カードの --quick-path-hover-dark などを上で個別調整できます。
   -------------------------------------------------------------------------- */
.top-page .quick-path-card:hover,
.top-page .quick-path-card:focus-visible{
  background:
    linear-gradient(
      145deg,
      var(--quick-path-hover-dark,rgba(4,15,24,.38)),
      var(--quick-path-hover-dark-2,rgba(2,8,15,.48))
    ),
    radial-gradient(
      circle at 85% 18%,
      var(--quick-path-hover-glow,rgba(100,193,241,.18)),
      transparent 38%
    ),
    var(--quick-path-bg,none)
      var(--quick-path-hover-position,var(--quick-path-position,50% 50%)) / cover no-repeat !important;
  border-color:rgba(112,204,244,.50);
  box-shadow:0 14px 32px rgba(0,24,42,.32), inset 0 0 32px rgba(85,191,241,.06);
}

/* 入口カードの見出し・本文の可読性を少しだけ補強 */
.top-page .quick-path-card .quick-path-title,
.top-page .quick-path-card .quick-path-desc,
.top-page .quick-path-card .quick-path-kicker,
.top-page .quick-path-card .quick-path-action{
  text-shadow:0 1px 10px rgba(0,0,0,.28);
}

/* --------------------------------------------------------------------------
   スマホ時の背景画像位置
   --------------------------------------------------------------------------
   スマホはカードが横長かつ低いため、PCと同じ center center では
   見せたい部分が切れやすくなります。

   実際のスマホ画面を見ながら、各カード上部にある
   --quick-path-mobile-position の数値だけを変更してください。

   横方向：0% = 左端 / 50% = 中央 / 100% = 右端
   縦方向：0% = 上端 / 50% = 中央 / 100% = 下端
   -------------------------------------------------------------------------- */
@media (max-width:650px){
  /* ------------------------------------------------------------
     スマホ通常時
     各カードの --quick-path-mobile-position を使用します。
     ------------------------------------------------------------ */
  .top-page .quick-path-card,
.top-page .quick-path-card-primary,
.top-page .quick-path-card-secondary{
    background:
      linear-gradient(145deg,rgba(4,14,22,.58),rgba(2,8,15,.64)),
      radial-gradient(circle at 88% 18%,rgba(82,171,220,.10),transparent 37%),
      var(--quick-path-bg,none)
        var(--quick-path-mobile-position,50% 50%) / cover no-repeat !important;
  }

  /* ------------------------------------------------------------
     スマホのホバー / フォーカス時

     ここでは各カードの
       --quick-path-mobile-hover-position
     を使います。

     例：神秘行で通常時もホバー時も同じ場所を見せたい場合
       --quick-path-mobile-position:50% 60%;
       --quick-path-mobile-hover-position:50% 60%;

     ホバー時だけ少し下を見せたい場合
       --quick-path-mobile-hover-position:50% 70%;

     なお、オーバーレイの濃さは各カード上部の
       --quick-path-hover-dark
       --quick-path-hover-dark-2
       --quick-path-hover-glow
     で個別調整できます。
     ------------------------------------------------------------ */
  .top-page .quick-path-card:hover,
.top-page .quick-path-card:focus-visible,
.top-page .quick-path-card-primary:hover,
.top-page .quick-path-card-primary:focus-visible,
.top-page .quick-path-card-secondary:hover,
.top-page .quick-path-card-secondary:focus-visible{
    background:
      linear-gradient(
        145deg,
        var(--quick-path-hover-dark,rgba(4,15,24,.38)),
        var(--quick-path-hover-dark-2,rgba(2,8,15,.48))
      ),
      radial-gradient(
        circle at 88% 18%,
        var(--quick-path-hover-glow,rgba(100,193,241,.18)),
        transparent 37%
      ),
      var(--quick-path-bg,none)
        var(--quick-path-mobile-hover-position,var(--quick-path-mobile-position,50% 50%)) / cover no-repeat !important;
  }
}


/* ==========================================================================
   GOOGLE ADSENSE / TOP PAGE BOTTOM MANUAL AD
   TOPページでは本文終了後・フッター直前の1枠だけを表示するための専用領域。
   ========================================================================== */
.top-page .bottom-ad{
  padding:34px 0 38px;
  border-top:1px solid rgba(103,184,225,.08);
  background:#01050a;
}

.top-page .bottom-ad-inner{
  width:min(970px,calc(100% - 48px));
  margin-inline:auto;
  text-align:center;
}

.top-page .bottom-ad-label{
  margin:0 0 12px;
  color:#667680;
  font:600 8px/1.2 "Courier New",monospace;
  letter-spacing:.18em;
}

.top-page .bottom-ad-unit{
  display:block; /* HTMLの style="display:block" をCSSへ分離 */
  width:100%;
  min-height:90px;
}

@media (max-width:650px){
  .top-page .bottom-ad{
    padding:26px 0 30px;
  }

  .top-page .bottom-ad-inner{
    width:calc(100% - 28px);
  }
}