/* マネーアニマルズ 共通スタイル（タイプページ・プライバシー・トップ下層セクション） */
:root{
  --navy:#12233F;
  --teal:#18A999;
  --teal-bright:#4FD1C1;
  --bg:#F7F8FA;
  --card:#FFFFFF;
  --ink:#12233F;
  --sub:#5A6A84;
  --teal-soft:#DFF0EC;
  --line:#E4E8EF;
  --radius:16px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body.page{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic",Meiryo,sans-serif;
  line-height:1.65;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:480px;margin:0 auto;padding:0 22px;}
a{color:inherit;}
img{max-width:100%;}

/* ---------- 共通部品 ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:56px;padding:14px 20px;
  border:none;border-radius:var(--radius);
  font-size:17px;font-weight:700;line-height:1.4;
  cursor:pointer;text-decoration:none;text-align:center;
  touch-action:manipulation;font-family:inherit;
  transition:transform .08s ease,opacity .15s ease;
}
.btn:active{transform:scale(.97);}
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 6px 16px rgba(24,169,153,.28);}
.btn-navy{background:var(--navy);color:#fff;}
.btn-ghost{background:transparent;color:var(--sub);font-size:15px;font-weight:600;min-height:48px;}
.icon-img{display:block;width:100%;height:100%;border-radius:50%;background:#fff;border:2.5px solid var(--navy);box-sizing:border-box;overflow:hidden;}
.icon-img img{display:block;width:86%;height:86%;object-fit:contain;margin:7%;}
.sec-h{
  display:flex;align-items:center;gap:8px;
  margin:0 0 12px;font-size:15px;font-weight:800;color:var(--navy);letter-spacing:.06em;
}
.sec-h::before{content:"";width:5px;height:18px;border-radius:3px;background:var(--teal);flex:0 0 auto;}
.point-card{
  display:flex;gap:12px;align-items:flex-start;
  background:#fff;border-radius:var(--radius);padding:16px;margin-bottom:10px;
  box-shadow:0 2px 10px rgba(18,35,63,.05);
  font-size:14px;line-height:1.85;
}
.point-num{
  flex:0 0 26px;width:26px;height:26px;border-radius:50%;margin-top:2px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;
}
.point-card.strength .point-num{background:var(--teal-soft);color:var(--teal);}
.point-card.blind .point-num{background:#EDEFF4;color:var(--sub);}
.code-row{display:flex;justify-content:center;gap:7px;}
.code-chip{
  width:44px;height:44px;border-radius:10px;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:800;
}

/* ---------- サイトヘッダー／フッター ---------- */
.site-head{background:var(--navy);}
.site-head .wrap{display:flex;align-items:center;min-height:52px;}
.site-head a{
  color:#CFE8E4;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.06em;
}
.site-foot{margin-top:44px;background:var(--navy);color:#8FA2BC;text-align:center;padding:30px 0 calc(30px + env(safe-area-inset-bottom));}
.site-foot a{color:#CFE8E4;text-decoration:none;font-size:13px;font-weight:700;}
.site-foot .foot-note{margin:14px 0 0;font-size:11.5px;line-height:1.8;color:#7E91AB;}
.site-foot .copyright{margin:14px 0 0;font-size:11px;letter-spacing:.08em;}

/* ---------- タイプページ ---------- */
.type-main{padding-top:26px;padding-bottom:8px;}
.type-eyebrow{margin:0 0 12px;text-align:center;font-size:13px;font-weight:800;letter-spacing:.22em;color:var(--teal);}
.type-card{
  background:var(--card);border-radius:var(--radius);
  padding:30px 22px 24px;text-align:center;
  box-shadow:0 10px 30px rgba(18,35,63,.10);
  border-top:5px solid var(--teal);
}
.type-icon{width:116px;height:116px;margin:0 auto 14px;}
.type-name{margin:0 0 6px;font-size:25px;font-weight:800;color:var(--navy);line-height:1.35;}
.type-tagline{margin:0 0 18px;font-size:15px;font-weight:700;color:var(--teal);}
.type-brand{margin:16px 0 0;font-size:10.5px;font-weight:700;letter-spacing:.14em;color:#AEB8C6;}
.chapters{margin-top:26px;}
.chapter{margin-bottom:26px;}
.subcopy{margin:-4px 0 12px;font-size:13.5px;font-weight:700;color:var(--teal);}
.desc-text{margin:0;font-size:14.5px;line-height:2.0;color:var(--ink);}
.compat-card{
  display:flex;gap:14px;align-items:center;
  background:#fff;border-radius:var(--radius);padding:18px 16px;
  box-shadow:0 2px 10px rgba(18,35,63,.05);
  text-decoration:none;color:inherit;
  transition:transform .08s ease;
}
.compat-card:active{transform:scale(.98);}
.compat-icon{flex:0 0 68px;width:68px;height:68px;}
.compat-name{margin:0 0 2px;font-size:16px;font-weight:800;color:var(--navy);}
.compat-code{margin:0 0 6px;font-size:12.5px;font-weight:700;color:var(--teal);letter-spacing:.08em;}
.compat-text{margin:0;font-size:13px;line-height:1.85;color:var(--sub);}
.compat-more{margin:8px 0 0;text-align:right;font-size:12.5px;font-weight:700;color:var(--teal);}
.type-cta{margin-top:34px;text-align:center;}
.type-cta .maneko-row{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:14px;}
.type-cta .maneko-row img{width:76px;height:76px;}
.type-cta .maneko-say{
  background:#fff;border:1.5px solid var(--line);border-radius:12px;
  padding:9px 13px;font-size:13px;font-weight:600;color:var(--navy);text-align:left;
}
.type-cta .cta-meta{margin:12px 0 4px;font-size:12.5px;font-weight:600;color:var(--sub);letter-spacing:.04em;}

/* ---------- プライバシーポリシー ---------- */
.legal-main{padding-top:30px;padding-bottom:8px;}
.legal-main h1{margin:0 0 6px;font-size:22px;font-weight:800;color:var(--navy);}
.legal-date{margin:0 0 26px;font-size:12px;color:var(--sub);}
.legal-main h2{
  display:flex;align-items:center;gap:8px;
  margin:26px 0 10px;font-size:15px;font-weight:800;color:var(--navy);letter-spacing:.04em;
}
.legal-main h2::before{content:"";width:5px;height:18px;border-radius:3px;background:var(--teal);flex:0 0 auto;}
.legal-main p,.legal-main li{font-size:14px;line-height:2.0;color:var(--ink);}
.legal-main ul{margin:0;padding-left:20px;}
.legal-card{background:#fff;border-radius:var(--radius);padding:20px 18px;box-shadow:0 2px 10px rgba(18,35,63,.05);margin-bottom:6px;}

/* ---------- トップ：下層セクション ---------- */
body.on-quiz .below{display:none;}
.below{background:var(--bg);}
.b-inner{max-width:480px;margin:0 auto;padding:8px 22px 0;}
.b-sec{padding:34px 0 0;}
.b-h{margin:0 0 14px;font-size:19px;font-weight:800;color:var(--navy);letter-spacing:.04em;text-align:center;}
.b-lead{margin:-6px 0 16px;font-size:13.5px;line-height:1.9;color:var(--sub);text-align:center;}
.b-badge{
  display:block;width:fit-content;margin:0 auto 12px;
  padding:4px 14px;border:1.5px solid var(--teal);border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--teal);
}

/* ティッカー帯 */
.ticker{background:var(--navy);overflow:hidden;padding:16px 0 30px;}
.ticker-track{display:flex;width:max-content;animation:tickerMove 48s linear infinite;}
@keyframes tickerMove{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.ticker-item{
  display:flex;align-items:center;gap:8px;margin-right:10px;
  background:#fff;border-radius:999px;padding:6px 16px 6px 7px;
  text-decoration:none;box-shadow:0 4px 12px rgba(0,0,0,.22);
}
.ticker-item .icon-img{width:36px;height:36px;flex:0 0 auto;border-width:2px;}
.ticker-item span{font-size:13px;font-weight:700;color:var(--navy);white-space:nowrap;}
@media (prefers-reduced-motion: reduce){
  .ticker{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .ticker-track{animation:none;}
}

/* この診断で分かること */
.chip-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.know-chip{
  display:flex;align-items:center;gap:8px;
  background:#fff;border:1.5px solid var(--line);border-radius:999px;
  padding:11px 14px;font-size:13px;font-weight:700;color:var(--navy);line-height:1.4;
}
.know-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);flex:0 0 auto;}

/* 4つの軸 */
.axis-card{background:#fff;border-radius:var(--radius);padding:16px;margin-bottom:10px;box-shadow:0 2px 10px rgba(18,35,63,.05);}
.axis-title{margin:0 0 10px;font-size:14px;font-weight:800;color:var(--navy);letter-spacing:.04em;}
.axis-pole{display:flex;gap:10px;align-items:flex-start;}
.axis-pole + .axis-pole{margin-top:8px;}
.axis-pole .pole-chip{
  flex:0 0 30px;width:30px;height:30px;border-radius:8px;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;
}
.axis-pole p{margin:1px 0 0;font-size:13px;line-height:1.75;color:var(--ink);}

/* 診断の流れ */
.step-card{
  display:flex;gap:12px;align-items:flex-start;
  background:#fff;border-radius:var(--radius);padding:15px 16px;margin-bottom:10px;
  box-shadow:0 2px 10px rgba(18,35,63,.05);
}
.step-num{
  flex:0 0 26px;width:26px;height:26px;border-radius:50%;margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  background:var(--teal-soft);color:var(--teal);font-size:13px;font-weight:800;
}
.step-card p{margin:2px 0 0;font-size:14px;font-weight:600;line-height:1.7;color:var(--ink);}
.flow-note{margin:16px 0 14px;text-align:center;font-size:14px;font-weight:800;color:var(--navy);}

/* 図鑑グリッド */
.zukan-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.zukan-item{
  background:#fff;border-radius:var(--radius);padding:16px 12px 14px;
  text-align:center;text-decoration:none;
  box-shadow:0 2px 10px rgba(18,35,63,.05);
  transition:transform .08s ease;
}
.zukan-item:active{transform:scale(.97);}
.zukan-item .icon-img{width:64px;height:64px;margin:0 auto 8px;}
.zukan-name{margin:0 0 3px;font-size:13.5px;font-weight:800;color:var(--navy);line-height:1.45;}
.zukan-tagline{margin:0;font-size:11px;line-height:1.6;color:var(--sub);}

/* 相性ペア */
.pair-card{background:#fff;border-radius:var(--radius);padding:16px;margin-bottom:10px;box-shadow:0 2px 10px rgba(18,35,63,.05);}
.pair-icons{display:flex;justify-content:center;margin-bottom:10px;}
.pair-icons .icon-img{width:56px;height:56px;}
.pair-icons .icon-img + .icon-img{margin-left:-10px;}
.pair-names{margin:0 0 6px;text-align:center;font-size:13.5px;font-weight:700;line-height:1.8;color:var(--navy);}
.pair-names a{color:var(--navy);text-decoration:none;border-bottom:1.5px solid var(--teal-soft);}
.pair-names .pair-x{margin:0 6px;color:var(--teal);font-weight:800;}
.pair-caption{margin:0;text-align:center;font-size:12px;font-weight:700;color:var(--teal);}

/* マネコ紹介 */
.maneko-card{background:#fff;border-radius:var(--radius);padding:20px 18px;box-shadow:0 2px 10px rgba(18,35,63,.05);}
.maneko-card .maneko-head{display:flex;align-items:center;gap:14px;margin-bottom:10px;}
.maneko-card .maneko-head img{width:84px;height:84px;flex:0 0 auto;}
.maneko-card .maneko-name{margin:0 0 2px;font-size:16px;font-weight:800;color:var(--navy);}
.maneko-card .maneko-role{margin:0;font-size:12px;font-weight:700;color:var(--teal);letter-spacing:.06em;}
.maneko-card .maneko-desc{margin:0 0 12px;font-size:13.5px;line-height:1.95;color:var(--ink);}
.maneko-quote{
  margin:0;background:var(--bg);border-radius:12px;padding:12px 14px;
  font-size:13px;line-height:1.8;color:var(--navy);font-weight:600;
}

/* アプリ紹介 */
.app-card{background:var(--navy);border-radius:var(--radius);padding:28px 22px;color:#fff;box-shadow:0 10px 30px rgba(18,35,63,.25);}
.app-badge{
  display:block;width:fit-content;margin:0 auto 14px;
  padding:4px 14px;border:1.5px solid var(--teal-bright);border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--teal-bright);
}
.app-name{margin:0 0 4px;text-align:center;font-size:22px;font-weight:800;letter-spacing:.02em;}
.app-sub{margin:0 0 20px;text-align:center;font-size:13px;font-weight:700;color:#C6D0DF;}
.app-feature{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px dashed rgba(255,255,255,.18);}
.app-feature .f-num{
  flex:0 0 26px;width:26px;height:26px;border-radius:50%;margin-top:2px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(79,209,193,.16);color:var(--teal-bright);font-size:13px;font-weight:800;
}
.app-feature p{margin:2px 0 0;font-size:13.5px;font-weight:600;line-height:1.8;color:#EAF0F7;}

/* ==================== PC（デスクトップ）レイアウト ==================== */
@media (hover:hover){
  .btn:hover{opacity:.92;transform:translateY(-1px);}
  .zukan-item:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(18,35,63,.12);}
  .compat-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(18,35,63,.10);}
  .ticker-track:hover{animation-play-state:paused;}
  .pair-names a:hover{border-bottom-color:var(--teal);}
  .site-head a:hover,.site-foot a:hover{color:#fff;}
}

@media (min-width:900px){
  /* 共通の枠 */
  .wrap{max-width:680px;padding:0 32px;}
  .b-inner{max-width:1020px;padding:8px 40px 0;}
  .b-sec{padding:64px 0 0;}
  .b-h{font-size:26px;margin-bottom:18px;}
  .b-lead{font-size:15px;max-width:640px;margin-left:auto;margin-right:auto;}
  .site-head .wrap{min-height:60px;}
  .site-head a{font-size:14px;}
  .site-foot{margin-top:72px;padding:40px 0;}

  /* ティッカー帯 */
  .ticker{padding:22px 0 38px;}
  .ticker-item .icon-img{width:44px;height:44px;}
  .ticker-item span{font-size:14px;}

  /* この診断で分かること：3列 */
  .chip-grid{grid-template-columns:repeat(3,1fr);gap:12px;}
  .know-chip{font-size:14px;padding:13px 18px;justify-content:center;}

  /* 4つの軸：2列 */
  #axes{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  #axes .b-h,#axes .b-lead{grid-column:1/-1;}
  #axes .axis-card{margin-bottom:0;padding:20px;}

  /* 診断の流れ：4列（縦積みカード） */
  #flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
  #flow .b-h,#flow .b-lead,#flow .flow-note{grid-column:1/-1;}
  #flow .btn{grid-column:1/-1;width:100%;max-width:380px;margin:0 auto;}
  #flow .step-card{flex-direction:column;align-items:center;text-align:center;gap:10px;margin-bottom:0;padding:22px 14px;}
  #flow .step-card p{margin:0;}
  #flow .flow-note{margin:20px 0 16px;font-size:16px;}

  /* 図鑑：4列 */
  .zukan-grid{grid-template-columns:repeat(4,1fr);gap:14px;}
  .zukan-item{padding:22px 14px 18px;}
  .zukan-item .icon-img{width:88px;height:88px;margin-bottom:10px;}
  .zukan-name{font-size:14.5px;}
  .zukan-tagline{font-size:12px;}

  /* 相性ペア：2列 */
  #pairs{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  #pairs .b-h,#pairs .b-lead{grid-column:1/-1;}
  #pairs .pair-card{margin-bottom:0;padding:20px 16px;}

  /* マネコ紹介・アプリ紹介：中央寄せの読み幅 */
  #maneko .maneko-card{max-width:720px;margin:0 auto;padding:28px 34px;}
  #app .app-card{max-width:760px;margin:0 auto;padding:40px 48px;}
  .app-name{font-size:26px;}

  /* タイプ別ページ */
  .type-main{padding-top:44px;}
  .type-card{padding:44px 36px 30px;}
  .type-icon{width:144px;height:144px;}
  .type-name{font-size:30px;}
  .type-tagline{font-size:16px;}
  .chapters{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:0 24px;}
  .chapter[data-chapter="ecology"],.chapter[data-chapter="compat"]{grid-column:1/-1;}
  .desc-text{font-size:15px;}
  .type-cta .btn{max-width:420px;margin-left:auto;margin-right:auto;}

  /* プライバシー等の文書ページ */
  .legal-main{padding-top:44px;}
}