/* =========================================================
   i-grafx 無料ホームページ健診 — style.css
   デザイントークンは親サイト（i-grafx.com）と共通
   ========================================================= */
:root{
  --c-cream:#f6efe3;
  --c-cream2:#efe6d6;
  --c-ink:#3a2e22;
  --c-head:#1f3d34;
  --c-accent:#9c5a2a;
  --c-accent-d:#854f0b;
  --line:rgba(58,46,34,.16);
  --max-w:1120px;
  --font-serif:"Noto Serif JP",serif;
  --font-sans:"Noto Sans JP",sans-serif;
  --font-en:"Cormorant Garamond",serif;
  --header-h:76px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-sans);
  color:var(--c-ink);
  background:var(--c-cream);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
.container{max-width:var(--max-w);margin:0 auto;padding:0 24px;}
strong{font-weight:700;color:var(--c-head);}

/* ===== ボタン ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 30px;border-radius:6px;font-weight:700;font-size:.98rem;
  text-decoration:none;letter-spacing:.02em;transition:transform .2s,background .2s,color .2s,border-color .2s;
  border:1.5px solid transparent;cursor:pointer;
}
.btn--primary{background:var(--c-accent);color:#fff;}
.btn--primary:hover{background:var(--c-accent-d);transform:translateY(-2px);}
.btn--ghost{background:transparent;color:var(--c-head);border-color:var(--line);}
.btn--ghost:hover{border-color:var(--c-head);background:rgba(31,61,52,.05);}
/* Q&Aボタン（導線を目立たせるためテラコッタ寄り） */
.btn--qa{color:var(--c-accent-d);border-color:rgba(156,90,42,.45);}
.btn--qa:hover{background:rgba(156,90,42,.08);border-color:var(--c-accent);transform:translateY(-2px);}

/* ===== ヘッダー ===== */
.site-header{
  position:fixed;top:0;left:0;right:0;height:var(--header-h);z-index:50;
  display:flex;align-items:center;transition:background .3s,box-shadow .3s,backdrop-filter .3s;
}
.site-header::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(246,239,227,.9),rgba(246,239,227,0));
  pointer-events:none;
}
.site-header.scrolled{background:rgba(246,239,227,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line);}
.site-header.scrolled::before{opacity:0;}
.header-inner{position:relative;width:100%;max-width:var(--max-w);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;}
.brand{font-family:var(--font-serif);font-weight:700;font-size:1.4rem;color:var(--c-head);text-decoration:none;letter-spacing:.01em;}
.brand span{color:var(--c-accent);}
.header-nav{display:flex;align-items:center;gap:18px;}
.header-link{
  font-size:.85rem;font-weight:700;color:var(--c-head);text-decoration:none;
  border-bottom:1.5px solid var(--c-accent);padding-bottom:2px;white-space:nowrap;transition:color .2s;
}
.header-link:hover{color:var(--c-accent-d);}
.header-cta{
  font-size:.9rem;font-weight:700;color:#fff;background:var(--c-accent);
  padding:10px 20px;border-radius:6px;text-decoration:none;transition:background .2s;
}
.header-cta:hover{background:var(--c-accent-d);}

/* ===== ヒーロー ===== */
.hero{
  position:relative;overflow:hidden;
  padding:calc(var(--header-h) + clamp(50px,9vw,96px)) 0 clamp(56px,8vw,90px);
  background:
    radial-gradient(120% 80% at 80% 0%,rgba(156,90,42,.07),transparent 60%),
    var(--c-cream);
  text-align:center;
}
.hero__pulse{
  position:absolute;left:0;right:0;bottom:14%;width:100%;height:120px;
  color:rgba(156,90,42,.22);pointer-events:none;
}
.hero__inner{position:relative;z-index:1;}
.eyebrow{
  font-family:var(--font-en);font-style:italic;font-weight:600;color:var(--c-accent);
  font-size:1.15rem;letter-spacing:.06em;margin-bottom:18px;
}
.hero__title{
  font-family:var(--font-serif);font-weight:700;color:var(--c-head);
  font-size:clamp(2rem,5.4vw,3.4rem);line-height:1.4;letter-spacing:.01em;margin-bottom:22px;
}
.hero__lead{
  max-width:34em;margin:0 auto 30px;font-size:1.04rem;line-height:1.95;color:var(--c-ink);
}
.hero__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.hero__note{margin-top:18px;font-size:.82rem;color:var(--c-ink);opacity:.62;}

/* ===== セクション共通 ===== */
.sec{padding:clamp(60px,8vw,104px) 0;}
.sec--alt{background:var(--c-cream2);}
.sec__head{text-align:center;max-width:40em;margin:0 auto 50px;}
.sec__eyebrow{
  font-family:var(--font-en);font-style:italic;font-weight:600;color:var(--c-accent);
  font-size:1.02rem;letter-spacing:.05em;margin-bottom:12px;
}
.sec__title{
  font-family:var(--font-serif);font-weight:700;color:var(--c-head);
  font-size:clamp(1.5rem,3.6vw,2.3rem);line-height:1.5;margin-bottom:16px;
}
.sec__text{font-size:1rem;line-height:1.9;color:var(--c-ink);opacity:.9;}

/* ===== 02 不調 ===== */
.symptoms{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.symptom{
  background:rgba(255,255,255,.5);border:1px solid var(--line);border-radius:10px;padding:30px 28px;
}
.symptom__no{font-family:var(--font-en);font-style:italic;font-size:1.8rem;color:var(--c-accent);opacity:.8;margin-bottom:10px;}
.symptom__title{font-family:var(--font-serif);font-weight:700;color:var(--c-head);font-size:1.12rem;margin-bottom:12px;}
.symptom__text{font-size:.9rem;line-height:1.85;opacity:.9;}

/* ===== 03 健診項目 ===== */
.items{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 24px;}
.item__icon{width:42px;height:42px;color:var(--c-accent);margin-bottom:14px;}
.item__icon svg{width:100%;height:100%;display:block;}
.item__title{font-family:var(--font-serif);font-weight:700;color:var(--c-head);font-size:1.06rem;margin-bottom:8px;}
.item__text{font-size:.88rem;line-height:1.8;opacity:.88;}
.items__note{text-align:center;margin-top:34px;font-size:.82rem;opacity:.6;}

/* ===== 04 流れ ===== */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.flow__step{text-align:center;position:relative;padding:8px;}
.flow__num{
  width:54px;height:54px;margin:0 auto 16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-weight:700;font-size:1.4rem;color:#fff;background:var(--c-head);
}
.flow__title{font-family:var(--font-serif);font-weight:700;color:var(--c-head);font-size:1.04rem;margin-bottom:8px;}
.flow__text{font-size:.88rem;line-height:1.8;opacity:.88;}

/* ===== 05 正直宣言 ===== */
.promise{background:var(--c-head);text-align:center;}
.promise__eyebrow{font-family:var(--font-en);font-style:italic;font-weight:600;color:#e8b888;font-size:1.05rem;letter-spacing:.06em;margin-bottom:14px;}
.promise__title{font-family:var(--font-serif);font-weight:700;color:#fff;font-size:clamp(1.8rem,4.5vw,2.7rem);margin-bottom:18px;letter-spacing:.02em;}
.promise__text{color:rgba(243,237,224,.9);font-size:1.05rem;line-height:2;max-width:38em;margin:0 auto;}

/* ===== 06 結果3パターン ===== */
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.result{background:rgba(255,255,255,.55);border:1px solid var(--line);border-radius:10px;padding:30px 28px;border-top:5px solid;}
.result--green{border-top-color:#5a8f63;}
.result--yellow{border-top-color:#d8a13b;}
.result--red{border-top-color:#b4532a;}
.result__badge{display:inline-block;font-size:.78rem;font-weight:700;padding:5px 13px;border-radius:999px;margin-bottom:14px;color:#fff;}
.result--green .result__badge{background:#5a8f63;}
.result--yellow .result__badge{background:#d8a13b;}
.result--red .result__badge{background:#b4532a;}
.result__title{font-family:var(--font-serif);font-weight:700;color:var(--c-head);font-size:1.3rem;margin-bottom:10px;}
.result__text{font-size:.92rem;line-height:1.85;opacity:.9;}

/* ===== 07 フォーム ===== */
.form{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:20px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field label{font-size:.88rem;font-weight:700;color:var(--c-head);}
.field input,.field textarea{
  font-family:inherit;font-size:1rem;color:var(--c-ink);
  background:rgba(255,255,255,.7);border:1.5px solid var(--line);border-radius:6px;padding:14px 16px;
}
.field input:focus,.field textarea:focus{outline:2px solid var(--c-accent);outline-offset:2px;border-color:transparent;}
.field textarea{min-height:130px;resize:vertical;}
.field__hint{font-size:.78rem;opacity:.62;line-height:1.7;}
.form__submit{text-align:center;margin-top:6px;}
.form__note{font-size:.8rem;opacity:.62;text-align:center;line-height:1.7;}

/* ===== フッター ===== */
.site-footer{background:var(--c-head);color:rgba(243,237,224,.82);padding:54px 0 40px;text-align:center;}
.footer-logo{font-family:var(--font-serif);font-weight:700;font-size:1.5rem;color:#fff;margin-bottom:12px;}
.footer-logo span{color:#e8b888;}
.footer-tag{font-size:.9rem;line-height:1.9;opacity:.85;margin-bottom:22px;}
.footer-links{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-bottom:24px;}
.footer-links a{color:rgba(243,237,224,.9);text-decoration:none;font-size:.9rem;font-weight:500;transition:color .2s;}
.footer-links a:hover{color:#fff;}
.footer-copy{font-size:.78rem;opacity:.6;}

/* ===== 06.5 もうひとつの作り方 ===== */
.approach__cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:28px;}
.approach__col{background:rgba(255,255,255,.5);border:1px solid var(--line);border-radius:10px;padding:28px 26px;}
.approach__col--accent{background:rgba(156,90,42,.06);border-color:rgba(156,90,42,.28);}
.approach__label{font-family:var(--font-serif);font-weight:700;color:var(--c-head);font-size:1.04rem;line-height:1.6;margin-bottom:16px;}
.approach__col--accent .approach__label{color:var(--c-accent-d);}
.approach__list{list-style:none;display:flex;flex-direction:column;gap:11px;}
.approach__list li{position:relative;padding-left:22px;font-size:.92rem;line-height:1.8;}
.approach__list li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:8px;border-radius:50%;background:var(--c-accent);opacity:.55;}
.approach__col--accent .approach__list li::before{opacity:1;}
.approach__note{background:var(--c-head);border-radius:12px;padding:30px 32px;text-align:center;}
.approach__note-title{font-family:var(--font-serif);font-weight:700;color:#e8b888;font-size:1.18rem;margin-bottom:12px;}
.approach__note-text{font-size:.96rem;line-height:1.95;color:rgba(243,237,224,.9);max-width:42em;margin:0 auto;}
.approach__note-text strong{color:#fff;}
.approach__note-sub{display:inline-block;margin-top:8px;font-size:.82rem;color:rgba(243,237,224,.62);}
.approach__more{text-align:center;margin-top:26px;}
.approach__more a{color:var(--c-accent-d);font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--c-accent);padding-bottom:2px;transition:opacity .2s;}
.approach__more a:hover{opacity:.65;}

/* ===== 結果カード内リンク（リニューアルへ） ===== */
.result__link{
  display:inline-block;margin-top:16px;font-size:.88rem;font-weight:700;
  color:#b4532a;text-decoration:none;border-bottom:1.5px solid #b4532a;padding-bottom:2px;transition:opacity .2s;
}
.result__link:hover{opacity:.65;}

/* ===== リニューアル導線バンド ===== */
.renew-band{background:var(--c-cream2);padding:clamp(56px,7vw,88px) 0;text-align:center;
  border-top:1px solid var(--line);}
.renew-band__eyebrow{font-family:var(--font-en);font-style:italic;font-weight:600;color:var(--c-accent);font-size:1.02rem;letter-spacing:.05em;margin-bottom:14px;}
.renew-band__title{font-family:var(--font-serif);font-weight:700;color:var(--c-head);font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.5;margin-bottom:16px;}
.renew-band__text{font-size:1rem;line-height:1.95;color:var(--c-ink);opacity:.9;max-width:36em;margin:0 auto 28px;}

/* ===== reveal ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease;}
.reveal.is-visible{opacity:1;transform:none;}
.symptoms .reveal:nth-child(2),.items .reveal:nth-child(2),.results .reveal:nth-child(2){transition-delay:.1s;}
.symptoms .reveal:nth-child(3),.items .reveal:nth-child(3),.results .reveal:nth-child(3){transition-delay:.2s;}
.flow .reveal:nth-child(2){transition-delay:.08s;}
.flow .reveal:nth-child(3){transition-delay:.16s;}
.flow .reveal:nth-child(4){transition-delay:.24s;}
.items .reveal:nth-child(5){transition-delay:.1s;}
.items .reveal:nth-child(6){transition-delay:.2s;}
.approach__cols .reveal:nth-child(2){transition-delay:.1s;}

/* ===== ヒーロー登場アニメ ===== */
.fade{opacity:0;transform:translateY(16px);animation:fadeUp .9s ease forwards;}
.d1{animation-delay:.1s;}.d2{animation-delay:.28s;}.d3{animation-delay:.46s;}.d4{animation-delay:.64s;}
@keyframes fadeUp{to{opacity:1;transform:none;}}

/* ===== レスポンシブ ===== */
@media (max-width:880px){
  .symptoms,.items{grid-template-columns:1fr 1fr;}
  .flow{grid-template-columns:1fr 1fr;gap:30px 22px;}
  .results{grid-template-columns:1fr;max-width:460px;margin:0 auto;}
  .approach__cols{grid-template-columns:1fr;max-width:520px;margin:0 auto 28px;}
}
@media (max-width:560px){
  .symptoms,.items{grid-template-columns:1fr;max-width:420px;margin:0 auto;}
  .flow{grid-template-columns:1fr;max-width:340px;margin:0 auto;}
  .header-nav{gap:11px;}
  .header-link{font-size:.78rem;}
  .header-cta{padding:9px 14px;font-size:.8rem;}
  .hero__pulse{bottom:18%;height:90px;}
}
@media (max-width:360px){
  .brand{font-size:1.2rem;}
  .header-link{font-size:.74rem;}
}
@media (prefers-reduced-motion:reduce){
  .fade,.reveal{animation:none!important;opacity:1!important;transform:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
}

/* =========================================================
   Q&A ページ（qa.html）— i-grafx.com ハブ用
   ========================================================= */
/* サブヒーロー */
.subhero{
  position:relative;
  padding:calc(var(--header-h) + clamp(40px,7vw,72px)) 0 clamp(34px,5vw,52px);
  text-align:center;
  background:
    radial-gradient(120% 80% at 80% 0%,rgba(156,90,42,.07),transparent 60%),
    var(--c-cream);
}
.subhero__title{font-family:var(--font-serif);font-weight:700;color:var(--c-head);font-size:clamp(1.8rem,4.6vw,2.8rem);line-height:1.45;margin:14px 0 18px;}
.subhero__lead{max-width:36em;margin:0 auto;font-size:1.02rem;line-height:1.95;color:var(--c-ink);}
.subhero__cta{margin-top:24px;}
/* アンカー飛び先が固定ヘッダーに隠れないように */
.approach{scroll-margin-top:calc(var(--header-h) + 8px);}

/* Q&A 本体 */
.qa-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.qa-item{background:rgba(255,255,255,.55);border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:border-color .2s,background .2s;}
.qa-item[open]{border-color:rgba(156,90,42,.34);background:rgba(255,255,255,.82);}
.qa-q{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:13px;
  position:relative;padding:22px 54px 22px 24px;
  font-family:var(--font-serif);font-weight:700;color:var(--c-head);font-size:1.05rem;line-height:1.6;
}
.qa-q::-webkit-details-marker{display:none;}
.qa-q__tag{flex:none;font-family:var(--font-en);font-style:italic;font-weight:600;color:var(--c-accent);font-size:1.2rem;line-height:1.1;}
.qa-q::after{content:"＋";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:1.25rem;color:var(--c-accent);transition:transform .2s;}
.qa-item[open] .qa-q::after{content:"−";}
.qa-q:hover{color:var(--c-accent-d);}
.qa-a{padding:0 24px 24px 51px;}
.qa-a p{font-size:.95rem;line-height:1.95;color:var(--c-ink);}
.qa-a p+p{margin-top:12px;}
.qa-a a{color:var(--c-accent-d);font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--c-accent);}
.qa-a a:hover{opacity:.7;}
.qa-highlight{
  margin-top:14px;background:rgba(156,90,42,.08);
  border-left:3px solid var(--c-accent);border-radius:0 8px 8px 0;
  padding:15px 18px;font-size:.93rem;line-height:1.9;
}
.qa-highlight strong{color:var(--c-accent-d);}

/* 末尾CTAバンド */
.qa-cta{background:var(--c-head);text-align:center;padding:clamp(54px,7vw,82px) 0;}
.qa-cta__eyebrow{font-family:var(--font-en);font-style:italic;font-weight:600;color:#e8b888;font-size:1.02rem;letter-spacing:.05em;margin-bottom:14px;}
.qa-cta__title{font-family:var(--font-serif);font-weight:700;color:#fff;font-size:clamp(1.5rem,3.6vw,2.2rem);line-height:1.5;margin-bottom:16px;}
.qa-cta__text{color:rgba(243,237,224,.9);font-size:1rem;line-height:1.95;max-width:34em;margin:0 auto 28px;}

@media (max-width:560px){
  .qa-a{padding-left:24px;}
}