/* =========================================================
   KSコンサルティング（デモ）— style.css
   世界観：High-Contrast Minimalism × Precision（紺×ゴールド）
   外部リクエストなし（フォントは自己ホスト／装飾はCSSのみ・SVGファイル不使用）
   フォントは latin の unicode-range 限定 → 和文はシステムゴシックに落ちる
   ========================================================= */

/* ===== Fonts（latin のみ自己ホスト） ===== */
@font-face{
  font-family:"Hanken Grotesk";
  src:url("../fonts/hanken-grotesk-latin-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2192,U+2212,U+25CA;
}
@font-face{
  font-family:"Hanken Grotesk";
  src:url("../fonts/hanken-grotesk-latin-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2192,U+2212,U+25CA;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-latin-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2192,U+2212,U+25CA;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-latin-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2192,U+2212,U+25CA;
}

/* ===== Tokens（design/KS-Consulting-DESIGN.md 準拠） ===== */
:root{
  --navy:#001F3F;          /* 基調・見出し地 */
  --navy-deep:#000613;     /* 最深色 */
  --blue:#007AFF;          /* アクセント（装飾＝アイコン線など。非テキスト用） */
  --blue-ink:#0062cc;      /* テキスト/ボタン用の濃い青（白地で5.8:1・AA合格） */
  --blue-ink-hover:#004a99;
  --gold:#D4AF37;          /* 特別感ワンポイント（暗背景のみ。明背景の小文字には使わない） */
  --silver:#C0C0C0;
  --slate:#1E293B;
  --ink:#111c2d;           /* 本文 */
  --sub:#43474e;           /* サブ文字 */
  --line:#c4c6cf;          /* ボーダー */
  --bg:#f9f9ff;            /* 背景（オフホワイト） */
  --bg-2:#f0f3ff;          /* 一段濃い背景 */
  --white:#ffffff;

  --head:"Hanken Grotesk","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,Meiryo,system-ui,sans-serif;
  --body:"Inter","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,Meiryo,system-ui,sans-serif;

  --shell:1180px;
  --r-btn:4px;             /* ボタン・チップ＝4px（pill禁止） */
  --r-card:8px;            /* カード＝8px */
  --gap:clamp(3.5rem,8vw,5rem);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:74px;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.75;
  font-size:16px;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
em{font-style:normal;color:var(--gold);}

.shell{width:min(100% - 2.6rem,var(--shell));margin-inline:auto;}
.shell--narrow{max-width:760px;}

/* ===== Typography ===== */
.h-head{
  font-family:var(--head);font-weight:700;line-height:1.2;letter-spacing:-.01em;
  font-size:clamp(1.7rem,4.6vw,2.85rem);margin:.2em 0 .5em;color:var(--navy);
}
.h-card{font-family:var(--head);font-weight:700;font-size:1.18rem;letter-spacing:-.01em;line-height:1.35;margin:0 0 .5rem;color:var(--navy);}
.overline{
  font-family:var(--head);font-weight:700;text-transform:uppercase;
  letter-spacing:.22em;font-size:.72rem;color:var(--blue-ink);margin:0 0 1rem;
  display:inline-flex;align-items:center;gap:.6rem;
}
.overline::before{content:"";width:26px;height:2px;background:var(--gold);display:inline-block;}
.overline--light{color:#9fc3ff;}
.lead{font-size:1.02rem;color:var(--sub);max-width:42rem;margin:.2rem 0 0;}
.note{font-size:.82rem;color:var(--sub);letter-spacing:.01em;}
.is-demo-text{color:var(--sub);font-size:.86em;}

.section{position:relative;padding-block:var(--gap);}
.section-head{margin-bottom:2.4rem;max-width:46rem;}
.section-head--light .h-head{color:var(--white);}

a{color:var(--blue-ink);}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:.6rem 1rem;z-index:200;border-radius:var(--r-btn);}
.skip-link:focus{left:.5rem;top:.5rem;}
:where(a,button,summary,[tabindex]):focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:var(--r-btn);}

/* ===== Buttons（pill禁止＝4px） ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.85rem 1.7rem;border-radius:var(--r-btn);font-family:var(--head);
  font-size:.95rem;letter-spacing:.02em;font-weight:700;text-decoration:none;
  border:2px solid transparent;transition:transform .18s ease,background .2s ease,color .2s ease,border-color .2s ease;
}
.btn small{font-weight:400;font-size:.8em;opacity:.85;}
.btn--cta{background:var(--blue-ink);color:#fff;}
.btn--cta:hover{background:var(--blue-ink-hover);transform:translateY(-2px);}
.btn--ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);}
.btn--ghost-light:hover{background:rgba(255,255,255,.12);border-color:#fff;}
.btn--solid-light{background:#fff;color:var(--navy);}
.btn--solid-light:hover{background:#eef2fb;transform:translateY(-2px);}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.header__inner{display:flex;align-items:center;gap:.9rem;min-height:64px;}
.brand{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--navy);}
.brand__logo{width:40px;height:40px;border-radius:var(--r-btn);}
.brand__text{display:flex;flex-direction:column;line-height:1.05;}
.brand__name{font-family:var(--head);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;color:var(--navy);}
.brand__sub{font-family:var(--head);font-weight:600;font-size:.6rem;letter-spacing:.28em;color:var(--sub);}
.demo-badge{font-family:var(--head);font-weight:700;font-size:.62rem;letter-spacing:.16em;color:var(--navy);background:var(--gold);padding:.18rem .5rem;border-radius:var(--r-btn);}
.site-nav{margin-left:auto;}
.nav-list{list-style:none;display:flex;align-items:center;gap:1.4rem;margin:0;padding:0;}
.nav-list a{font-family:var(--head);text-decoration:none;color:var(--ink);font-size:.9rem;font-weight:600;letter-spacing:.01em;padding:.35rem 0;border-bottom:2px solid transparent;transition:border-color .2s,color .2s;}
.nav-list a:hover{color:var(--blue-ink);border-bottom-color:var(--gold);}
.nav-cta{color:#fff !important;background:var(--blue-ink);padding:.5rem 1rem !important;border-radius:var(--r-btn);border-bottom:0 !important;}
.nav-cta:hover{background:var(--blue-ink-hover);}
.nav-toggle{display:none;margin-left:auto;border:0;background:transparent;cursor:pointer;width:46px;height:46px;padding:11px;}
.nav-toggle__bar{display:block;height:2px;background:var(--navy);margin:5px 0;transition:transform .25s,opacity .25s;}

/* ===== Hero ===== */
.hero{position:relative;min-height:min(86vh,680px);display:flex;align-items:center;overflow:hidden;isolation:isolate;background:var(--navy);}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;}
.hero__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,6,19,.86) 0%,rgba(0,31,63,.66) 48%,rgba(0,31,63,.22) 100%);}
.hero__body{color:#fff;padding-block:clamp(3rem,8vw,5rem);max-width:40rem;}
.hero__title{font-family:var(--head);font-weight:700;font-size:clamp(2.6rem,9vw,5rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 1.2rem;text-shadow:0 3px 30px rgba(0,0,0,.25);}
.hero__lead{font-size:clamp(1rem,2.4vw,1.18rem);line-height:1.7;color:rgba(255,255,255,.92);margin:0 0 2rem;}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;}
.hero__note{font-size:.78rem;color:rgba(255,255,255,.72);margin:1.6rem 0 0;}

/* ===== お悩み ===== */
.problems{background:var(--white);}
.problem-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;}
.problem-card{display:flex;align-items:flex-start;gap:.9rem;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:1.3rem 1.4rem;}
.problem-card__no{font-family:var(--head);font-weight:700;color:var(--gold);font-size:1.05rem;letter-spacing:.02em;flex:none;}
.problem-card p{margin:0;font-size:.96rem;color:var(--ink);}

/* ===== サービス ===== */
.services{background:var(--bg-2);}
.service-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;}
.service-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:1.8rem 1.6rem;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.service-card:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(0,31,63,.1);border-color:#9db4d6;}
.service-card p{margin:0;color:var(--sub);font-size:.94rem;}
/* CSS幾何アイコン（SVGファイル不使用・装飾） */
.service-card__icon{display:block;width:48px;height:48px;margin-bottom:1.1rem;border:2px solid var(--navy);border-radius:var(--r-btn);position:relative;}
.service-card__icon::before,.service-card__icon::after{content:"";position:absolute;}
/* アカウント設計：中央の同心 */
.service-card__icon--account::before{inset:9px;border:2px solid var(--blue);border-radius:50%;}
.service-card__icon--account::after{left:50%;top:50%;width:6px;height:6px;margin:-3px;background:var(--gold);border-radius:50%;}
/* リール・投稿：再生三角 */
.service-card__icon--reel::before{left:16px;top:13px;width:0;height:0;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--blue);}
.service-card__icon--reel::after{right:7px;top:7px;width:6px;height:6px;background:var(--gold);border-radius:50%;}
/* コンテンツ制作の仕組み化：3本ライン */
.service-card__icon--content::before{left:11px;top:14px;width:26px;height:2px;background:var(--navy);box-shadow:0 7px 0 var(--navy),0 14px 0 var(--blue);}
.service-card__icon--content::after{left:11px;top:14px;width:6px;height:6px;margin:-2px 0 0 -2px;background:var(--gold);border-radius:50%;}
/* 分析・改善：右肩上がりの棒 */
.service-card__icon--analytics::before{left:12px;bottom:11px;width:5px;height:10px;background:var(--navy);box-shadow:8px -6px 0 0 var(--blue),16px -12px 0 0 var(--navy);}
.service-card__icon--analytics::after{right:9px;top:10px;width:7px;height:7px;border-top:2px solid var(--gold);border-right:2px solid var(--gold);transform:rotate(45deg);}

/* ===== 選ばれる理由 ===== */
.why{background:var(--navy);color:#fff;}
.why-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.4rem;}
.why-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-card);padding:1.8rem 1.6rem;}
.why-card__no{font-family:var(--head);font-weight:700;font-size:1.6rem;color:var(--gold);display:block;margin-bottom:.6rem;}
.why-card .h-card{color:#fff;}
.why-card p{margin:0;color:rgba(255,255,255,.82);font-size:.94rem;}

/* ===== メニュー ===== */
.plans{background:var(--white);}
.plan-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem;}
.plan-card{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:1.9rem 1.7rem;}
.plan-card__tag{display:inline-block;font-family:var(--head);font-weight:700;font-size:.72rem;letter-spacing:.08em;color:var(--navy);background:var(--gold);padding:.2rem .6rem;border-radius:var(--r-btn);margin:0 0 .8rem;}
.plan-card__meta{margin:.1rem 0 .5rem;color:var(--sub);font-size:.86rem;}
.plan-card__price{font-family:var(--head);font-weight:700;font-size:1.7rem;color:var(--navy);margin:0 0 .8rem;line-height:1.1;}
.plan-card__price small{font-family:var(--body);font-weight:400;font-size:.6em;color:var(--sub);margin-left:.3rem;letter-spacing:.01em;}
.plan-card p{margin:0;color:var(--sub);font-size:.94rem;}
.plans__note{display:block;margin-top:1.4rem;}

/* ===== お客様の声 ===== */
.voice{background:var(--bg-2);}
.voice-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem;}
.voice-card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:2.3rem 1.7rem 1.5rem;overflow:hidden;}
.voice-card__quote{position:absolute;top:.1rem;left:.8rem;font-family:var(--head);font-weight:700;font-size:3.4rem;line-height:1;color:var(--gold);opacity:.55;}
.voice-card__text{margin:0 0 1rem;position:relative;color:var(--ink);font-size:.96rem;}
.voice-card__name{margin:0;font-size:.84rem;font-weight:600;color:var(--navy);}

/* ===== ご相談の流れ ===== */
.flow{background:var(--bg-2);}
.flow-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;}
.flow-step{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:1.7rem 1.5rem;}
.flow-step__no{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r-btn);background:var(--navy);color:#fff;font-family:var(--head);font-weight:700;font-size:1.1rem;margin-bottom:.9rem;}
.flow-step p{margin:0;color:var(--sub);font-size:.94rem;}

/* ===== FAQ ===== */
.faq{background:var(--white);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{list-style:none;cursor:pointer;padding:1.2rem 2.6rem 1.2rem 0;font-family:var(--head);font-weight:600;font-size:1.02rem;color:var(--navy);position:relative;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"";position:absolute;right:.4rem;top:1.45rem;width:9px;height:9px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(45deg);transition:transform .25s;}
.faq-item[open] summary::after{transform:rotate(225deg);}
.faq-item__body{padding:0 0 1.3rem;color:var(--sub);}
.faq-item__body p{margin:0;}

/* ===== CTA ===== */
.cta{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;text-align:center;}
.cta__inner{display:flex;flex-direction:column;align-items:center;}
.cta__title{color:#fff;}
.cta__gift{display:inline-block;background:rgba(212,175,55,.14);border:1px solid var(--gold);color:#fff;border-radius:var(--r-card);padding:.7rem 1.1rem;margin:.2rem 0 1rem;font-size:.95rem;}
.cta__gift strong{color:var(--gold);font-weight:700;}
.cta__lead{margin:.2rem 0 1.4rem;color:rgba(255,255,255,.9);}
.cta__themes{list-style:none;padding:0;margin:0 0 2rem;display:inline-flex;flex-direction:column;gap:.5rem;text-align:left;}
.cta__themes li{position:relative;padding-left:1.5rem;color:rgba(255,255,255,.92);}
.cta__themes li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--gold);border-radius:50%;}
.cta__btn{margin:.2rem 0 1.4rem;font-size:1.05rem;padding:1rem 2rem;}
.cta__qr{margin:.2rem 0 1.2rem;display:flex;flex-direction:column;align-items:center;gap:.55rem;}
.cta__qr-img{width:160px;height:160px;background:#fff;padding:10px;border-radius:var(--r-card);}
.cta__qr-cap{font-size:.8rem;color:rgba(255,255,255,.8);margin:0;}
.cta__demo-note{font-size:.82rem;color:rgba(255,255,255,.78);margin:0 0 .8rem;max-width:34rem;}
.cta__sns{font-size:.9rem;color:rgba(255,255,255,.9);margin:0;}
.cta .is-demo-text{color:rgba(255,255,255,.65);display:block;margin-top:.2rem;}

/* ===== Footer ===== */
.site-footer{background:var(--navy-deep);color:#9aa3b2;padding-block:2.4rem;text-align:center;}
.site-footer__inner{display:flex;flex-direction:column;gap:.5rem;}
.site-footer__brand{margin:0;}
.site-footer__brand .brand__name{font-family:var(--head);font-weight:700;color:#fff;}
.site-footer__brand .brand__sub{color:var(--gold);font-size:.8rem;margin-left:.3rem;}
.site-footer__note{font-size:.78rem;color:#8993a3;margin:0;max-width:48rem;margin-inline:auto;}
.site-footer__copy{margin:.3rem 0 0;color:#8993a3;}

/* ===== スマホ用 追従CTA（モバイルのみ表示） ===== */
.sticky-cta{display:none;}

/* ===== Scroll reveal（JS有効時のみ初期非表示。無効/失敗時は常時表示） ===== */
.js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease;}
.js [data-reveal].is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none;}
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:760px){
  .js .nav-toggle{display:block;}
  .js .site-nav{position:fixed;inset:64px 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .3s ease;margin:0;}
  .js .site-nav.is-open{max-height:80vh;}
  .js .nav-list{flex-direction:column;align-items:stretch;gap:0;padding:.4rem 1.3rem 1rem;}
  .js .nav-list li{border-bottom:1px solid var(--line);}
  .js .nav-list a{display:block;padding:.95rem .1rem;}
  .js .nav-cta{text-align:center;margin:.6rem 0 .2rem;}
  /* JS無効時はナビを折返しで全表示（ハンバーガー非依存） */
  .no-js .site-nav{margin-left:0;width:100%;}
  .no-js .nav-list{flex-wrap:wrap;gap:.4rem .9rem;justify-content:flex-start;padding-top:.4rem;}

  /* 追従CTA（スマホのみ） */
  .sticky-cta{
    display:flex;align-items:center;justify-content:center;
    position:fixed;left:.8rem;right:.8rem;bottom:.8rem;z-index:60;
    padding:.95rem 1rem;border-radius:var(--r-btn);
    background:var(--blue-ink);color:#fff;font-family:var(--head);font-weight:700;
    font-size:1rem;text-decoration:none;box-shadow:0 6px 20px rgba(0,6,19,.35);
  }
  .site-footer{padding-bottom:5rem;} /* 追従CTAが文章を隠さないための余白 */
}
@media (max-width:520px){
  .hero{min-height:auto;padding-block:1rem;}
  .cta__themes{font-size:.94rem;}
}