@charset "UTF-8";

/* ===================================================================
   いずたにデンタルクリニック 姫路駅前院
   インプラント動画プレゼント アンケートページ
   配色・書体は implant.izutanidc-himeji.com（本LP）と共通
   =================================================================== */

:root{
  --brown:#886E4E;
  --brown-dark:#6d5739;
  --brown-light:#7f7150;
  --beige:#f3ede3;
  --cream:#faf7f2;
  --blue:#1394d8;
  --blue-pale:#eaf5fc;
  --orange:#ffb259;
  --orange-deep:#FC7617;
  --cta-text:#3a2a12;
  --accent:#a8802a;
  --accent-text:#8a6a1f;
  --label:#786a49;
  --ink:#3a3630;
  --ink-soft:#6a6359;
  --hair:#e3dbcd;
  --shadow:0 4px 20px rgba(136,110,78,.10);
  --shadow-lg:0 10px 34px rgba(136,110,78,.16);
  --line-green:#06C755;
  --wrap:600px;
  --font-sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mincho:"Shippori Mincho B1",serif;
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.9;
  letter-spacing:.02em;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;vertical-align:bottom;}
a{color:inherit;}

.inner{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:22px;
}

.pc-only{display:none;}
.sp-only{display:inline;}
@media (min-width:600px){
  .pc-only{display:inline;}
  .sp-only{display:none;}
}

/* ---------- ヘッダー ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--hair);
}
.site-header__inner{
  max-width:var(--wrap);
  margin-inline:auto;
  padding:10px 22px;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand__mark{flex:none;width:38px;height:auto;}
.brand__text{display:flex;flex-direction:column;line-height:1.35;}
.brand__name{
  font-family:var(--font-mincho);
  font-weight:700;
  font-size:15px;
  color:var(--brown-dark);
  letter-spacing:.02em;
}
.brand__sub{
  font-size:11.5px;
  color:var(--label);
  letter-spacing:.06em;
}

/* ---------- アンケートの導入部 ---------- */
.section--intro{
  padding-top:34px;
  background:
    radial-gradient(120% 70% at 50% 0%, #fffdf9 0%, var(--cream) 55%, var(--beige) 100%);
}

.intro{text-align:center;margin-bottom:26px;}

.intro__title{
  margin:0;
  font-family:var(--font-mincho);
  font-weight:700;
  font-size:clamp(23px,6.3vw,29px);
  line-height:1.62;
  letter-spacing:.02em;
  color:var(--brown-dark);
}
.intro__title em{
  font-style:normal;
  display:inline;
  padding-inline:.08em;
  background-image:linear-gradient(transparent 62%, rgba(255,178,89,.52) 62%, rgba(255,178,89,.52) 94%, transparent 94%);
}

/* ---------- セクション共通 ---------- */
.section{padding:52px 0;}
.section--cream{background:var(--cream);}
.section--beige{background:var(--beige);}

.sec-title{
  margin:0 0 26px;
  font-family:var(--font-mincho);
  font-weight:700;
  font-size:22.5px;
  line-height:1.6;
  letter-spacing:.03em;
  color:var(--brown-dark);
  text-align:center;
}
.sec-title .en{
  display:block;
  margin-bottom:7px;
  font-family:"Noto Sans JP",sans-serif;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.22em;
  color:var(--accent-text);
}

/* ---------- アンケート ---------- */
/* progress の追従は設問群の中だけ。CTAボタンに重ならないようにする */
.qGroup{position:relative;}

.progress{
  position:sticky;
  /* ヘッダーの実高さは script.js が --header-h に入れる（文字サイズが変わっても追従位置がずれない） */
  top:var(--header-h, 60px);
  z-index:40;
  margin:0 0 26px;
  padding:12px 14px 10px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(6px);
  border:1px solid var(--hair);
  border-radius:12px;
  box-shadow:var(--shadow);
}
.progress__bar{
  height:6px;
  border-radius:999px;
  background:var(--beige);
  overflow:hidden;
}
.progress__fill{
  display:block;
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--orange),var(--orange-deep));
  transition:width .35s cubic-bezier(.4,0,.2,1);
}
.progress__text{
  margin:7px 0 0;
  font-size:13px;
  letter-spacing:.06em;
  color:var(--label);
  text-align:right;
}
.progress__text strong{
  font-size:16px;
  color:var(--orange-deep);
}

.q{
  margin:0 0 18px;
  scroll-margin-top:calc(var(--header-h, 60px) + 96px);
  padding:20px 18px 16px;
  border:1px solid var(--hair);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.q.is-answered{border-color:rgba(19,148,216,.35);}
.q.is-missing{
  border-color:var(--orange-deep);
  box-shadow:0 0 0 3px rgba(252,118,23,.14);
}
/* legend は既定だと枠線上に重なって描画されるため、通常フローに戻す */
.q__head{
  float:left;
  display:block;
  width:100%;
  padding:0;
  margin:0 0 14px;
  font-size:17.5px;
  font-weight:700;
  line-height:1.75;
  color:var(--brown-dark);
}
.q__no{
  display:inline-block;
  margin-right:8px;
  padding:3px 10px;
  border-radius:6px;
  background:var(--blue-pale);
  color:var(--blue);
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  vertical-align:2px;
}
.q__options{clear:both;display:grid;gap:9px;}

.opt{display:block;cursor:pointer;}
.opt input{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  pointer-events:none;
}
.opt__box{
  display:flex;
  align-items:center;
  gap:11px;
  padding:15px 15px;
  border:1.5px solid var(--hair);
  border-radius:11px;
  background:#fff;
  font-size:16.5px;
  line-height:1.65;
  color:var(--ink);
  transition:border-color .18s ease, background .18s ease, transform .12s ease;
}
.opt__box::before{
  content:"";
  flex:none;
  width:22px;height:22px;
  border:1.5px solid #c9bda8;
  border-radius:50%;
  background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.opt:hover .opt__box{border-color:#cdbb9d;background:var(--cream);}
.opt input:focus-visible + .opt__box{outline:2px solid var(--blue);outline-offset:2px;}
.opt input:checked + .opt__box{
  border-color:var(--blue);
  background:var(--blue-pale);
  font-weight:700;
  color:var(--brown-dark);
}
.opt input:checked + .opt__box::before{
  border-color:var(--blue);
  border-width:5.5px;
  box-shadow:0 0 0 1.5px var(--blue) inset;
}
.opt input:active + .opt__box{transform:scale(.99);}

/* ---------- 送信 ---------- */
.submit{margin-top:28px;text-align:center;}
.submit__alert{
  margin:0 0 12px;
  padding:10px 14px;
  border-radius:10px;
  background:#fdf0e4;
  border:1px solid rgba(252,118,23,.35);
  color:#9a4a06;
  font-size:14.5px;
  font-weight:700;
  line-height:1.7;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  max-width:420px;
  padding:19px 22px;
  border:0;
  border-radius:999px;
  font-family:inherit;
  font-size:18px;
  font-weight:700;
  letter-spacing:.03em;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn--cta{
  background:linear-gradient(135deg,var(--orange) 0%,var(--orange-deep) 100%);
  color:var(--cta-text);
  box-shadow:0 8px 22px rgba(252,118,23,.30);
}
.btn--cta:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(252,118,23,.38);}
.btn--cta:not(:disabled):active{transform:translateY(0);}

/* LINEへ遷移するボタンはLINEのブランドカラー（押した先が想像できるように） */
.btn--line{
  background:var(--line-green);
  color:#fff;
  box-shadow:0 8px 22px rgba(6,199,85,.32);
}
.btn--line:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(6,199,85,.40);background:#05b34c;}
.btn--line:not(:disabled):active{transform:translateY(0);}
.btn:disabled{
  background:#e6ded1;
  color:#a2977f;
  box-shadow:none;
  cursor:not-allowed;
}
.btn.is-sending{filter:saturate(.75);cursor:progress;}
.btn__line{flex:none;}
.btn--ghostLink{
  max-width:360px;
  font-size:15px;
  padding:15px 22px;
}

.submit__hint{
  margin:13px 0 0;
  font-size:14.5px;
  color:var(--label);
  line-height:1.75;
}
.submit__hint.is-ready{color:var(--brown-dark);font-weight:700;}
.submit__fine{
  margin:14px auto 0;
  max-width:420px;
  font-size:13px;
  line-height:1.9;
  color:var(--ink-soft);
}

/* ---------- 医院情報 ---------- */
.clinicCard{
  padding:22px 20px;
  background:#fff;
  border:1px solid var(--hair);
  border-radius:16px;
  box-shadow:var(--shadow);
}
.doctorRow{
  display:flex;
  gap:15px;
  align-items:center;
  margin:0 0 16px;
  padding-bottom:16px;
  border-bottom:1px solid var(--hair);
}
.doctorRow__photo{flex:none;width:96px;}
.doctorRow__photo img{
  display:block;
  width:96px;
  height:120px;
  object-fit:cover;
  object-position:50% 22%;
  border-radius:12px;
  border:1px solid var(--hair);
}
.doctorRow__text{min-width:0;}
.clinicCard__name{
  margin:0 0 6px;
  font-family:var(--font-mincho);
  font-size:17px;
  font-weight:700;
  color:var(--brown-dark);
  line-height:1.55;
}
.clinicCard__corp{
  margin:0;
  font-size:14px;
  color:var(--ink-soft);
  line-height:1.8;
}

.clinicCard__addr{
  margin:0 0 14px;
  font-size:15px;
  line-height:1.85;
  color:var(--ink);
}
.clinicCard__link{margin:0;}
.clinicCard__link a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:12px 20px;
  border:1px solid rgba(19,148,216,.4);
  border-radius:999px;
  background:var(--blue-pale);
  color:var(--blue);
  font-size:14.5px;
  font-weight:700;
  text-decoration:none;
  transition:background .18s ease;
}
.clinicCard__link a:hover{background:#dcedf9;}

/* 自費診療の費用・リスク（医療広告ガイドラインの限定解除要件）
   注記の枠で囲わず、医院情報の一部として自然に読ませる */
.clinicCard__note{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--hair);
}
.clinicCard__noteTitle{
  margin:0 0 8px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--accent-text);
}
.clinicCard__note p:not(.clinicCard__noteTitle){
  margin:0 0 9px;
  font-size:12.5px;
  line-height:1.9;
  color:var(--ink-soft);
}
.clinicCard__note p:last-child{margin-bottom:0;}

/* ---------- フッター ---------- */
.site-footer{
  padding:38px 0 34px;
  background:var(--brown-dark);
  color:#f0e9dd;
}
.site-footer__name{
  margin:0 0 6px;
  font-family:var(--font-mincho);
  font-size:17px;
  font-weight:700;
  line-height:1.6;
}
.site-footer__addr{
  margin:0 0 12px;
  font-size:13.5px;
  line-height:1.85;
  color:rgba(240,233,221,.82);
}
.site-footer__links{margin:0 0 22px;font-size:12.5px;}
.site-footer__links a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
}


.site-footer__copy{
  margin:22px 0 0;
  font-size:11.5px;
  letter-spacing:.06em;
  text-align:center;
  color:rgba(240,233,221,.6);
}

/* ---------- 動きを減らす設定への配慮 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ---------- 画面が広いとき ---------- */
@media (min-width:600px){
  body{font-size:17.5px;}
  .section--intro{padding-top:44px;}
  .section{padding:64px 0;}
  .sec-title{font-size:25px;}
  .q{padding:24px 24px 20px;}
  .q__head{font-size:18.5px;}
  .opt__box{padding:16px 18px;font-size:17px;}
}