@charset "UTF-8";
/* =========================================================
   共栄接骨院 本川越院 — 下層ページ用スタイル
   style.css（トップ）のカラー変数・タイポグラフィをそのまま継承し、
   本文コンテンツ（見出し・段落・表・画像・フォーム）だけを定義する。
   マークアップ・クラス名はすべて自前。
   ========================================================= */

/* ---------- 下層のメイン枠 ---------- */
.is-sub .main{
  padding: clamp(20px,3vw,34px) 0 clamp(48px,6vw,76px);
}
.is-sub .cols{
  width:min(100% - 40px, var(--wrap));
  margin-inline:auto;
  display:grid; grid-template-columns:288px minmax(0,1fr);
  gap:clamp(24px,3vw,44px); align-items:start;
}
@media(max-width:840px){
  .is-sub .cols{grid-template-columns:1fr}
  .is-sub .side{display:none}
}

/* ---------- パンくず ---------- */
.crumbs{
  font-size:12.5px; color:var(--brown-soft);
  display:flex; flex-wrap:wrap; align-items:center; gap:.4em;
  margin-bottom:clamp(14px,2vw,22px);
}
.crumbs a{color:var(--brown-soft); text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs a::after{content:"›"; margin-left:.5em; color:var(--line)}
.crumbs span{color:var(--brown); font-weight:700}

/* ---------- ページ見出し ---------- */
.page-h1{
  font-family:var(--serif);
  font-size:clamp(21px,3.1vw,30px); line-height:1.5;
  color:var(--brown); position:relative;
  padding:0 0 .55em; margin:0 0 clamp(20px,2.6vw,32px);
}
.page-h1::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--orange) 0 96px,var(--line) 96px);
}
.page-sub{
  margin:-14px 0 26px; font-size:14px; color:var(--brown-soft); font-weight:700;
}

/* ---------- 本文 ---------- */
.content{font-size:16px; line-height:1.95}
.content > *:first-child{margin-top:0}

.c-h2{
  font-family:var(--serif);
  font-size:clamp(18.5px,2.4vw,24px); line-height:1.55; color:#fff;
  background:linear-gradient(180deg,var(--orange-light),var(--orange-deep));
  padding:.62em .9em; border-radius:var(--r) var(--r) 4px 4px;
  margin:clamp(38px,4.6vw,58px) 0 clamp(16px,2vw,22px);
  box-shadow:var(--shadow-card); position:relative;
}
.c-h2::after{  /* 元サイトの帯にある下向きノッチ */
  content:""; position:absolute; left:34px; bottom:-9px;
  border:9px solid transparent; border-top-color:var(--orange-deep); border-bottom:0;
}
.c-h3{
  font-size:clamp(17px,2.1vw,20px); color:var(--brown);
  border-left:6px solid var(--orange); padding:.15em 0 .15em .7em;
  margin:clamp(30px,3.4vw,42px) 0 clamp(12px,1.6vw,18px);
}
.c-h4{
  font-size:clamp(15.5px,1.9vw,17.5px); color:var(--brown);
  margin:clamp(24px,2.8vw,32px) 0 .6em;
}
.c-h4::before{content:"◆"; color:var(--orange); margin-right:.45em; font-size:.85em}

.c-p{margin:0 0 1.25em}
.c-cap{font-size:13px; color:var(--brown-soft); text-align:center; margin:.5em 0 1.4em}

.c-list{margin:0 0 1.5em; padding:0; list-style:none}
.c-list li{position:relative; padding-left:1.45em; margin-bottom:.55em}
.c-list li::before{
  content:""; position:absolute; left:.15em; top:.72em;
  width:9px; height:9px; border-radius:50%; background:var(--orange);
}
ol.c-list{counter-reset:n}
ol.c-list li{counter-increment:n; padding-left:1.9em}
ol.c-list li::before{
  content:counter(n); top:.28em; left:0;
  width:1.4em; height:1.4em; border-radius:50%;
  background:var(--orange); color:#fff;
  font-size:12.5px; font-weight:700; line-height:1.4em; text-align:center;
}

.c-fig{margin:0 0 1.6em; text-align:center}
.c-fig img{
  margin-inline:auto; border-radius:var(--r);
  box-shadow:var(--shadow-photo);
}

.c-tablewrap{overflow-x:auto; margin:0 0 1.7em; -webkit-overflow-scrolling:touch}
.c-table{
  width:100%; border-collapse:collapse; font-size:15px;
  background:#fff; border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow-card);
}
.c-table th,.c-table td{
  border:1px solid var(--line); padding:.7em .9em; text-align:left; vertical-align:middle;
}
.c-table th{background:var(--cream); font-weight:700; color:var(--brown); white-space:nowrap}
.c-table tr:nth-child(even) td{background:#fffdf8}

.c-quote{
  margin:0 0 1.6em; padding:1.1em 1.3em;
  background:var(--cream); border-left:5px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;
}
.c-hr{border:0; border-top:1px dashed var(--line); margin:2.2em 0}

.c-embed{position:relative; padding-top:56.25%; margin:0 0 1.7em;
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-photo)}
.c-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

.content a{color:#0a63b8; text-underline-offset:2px}
.content a:hover{color:var(--orange-deep)}

/* ---------- お問い合わせフォーム ---------- */
/* 全セッション共通ルール: お名前・院名・メールアドレス・携帯電話番号は必須 */
.c-form{
  background:var(--cream); border:1px solid var(--line);
  border-radius:var(--r); padding:clamp(18px,2.6vw,30px); margin:0 0 1.8em;
}
.c-form__note{font-size:14px; margin:0 0 1.3em; color:var(--brown-soft)}
.c-form__row{margin-bottom:1.05em}
.c-form__row label{display:block; font-weight:700; font-size:14.5px; margin-bottom:.35em}
.c-form .req{color:var(--red); margin-left:.3em}
.c-form input,.c-form textarea{
  width:100%; font:inherit; font-size:16px; color:var(--brown);
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:.65em .8em;
}
.c-form input:focus,.c-form textarea:focus{
  outline:2px solid var(--orange); outline-offset:1px; border-color:var(--orange);
}
.c-form__submit{margin-top:1.5em; text-align:center}

/* ---------- 印刷 ---------- */
@media print{
  .topbar,.gnav,.side,.fixcta,.foot{display:none}
  .is-sub .cols{grid-template-columns:1fr}
}

/* =========================================================
   焼き込み画像をHTML化したパーツ
   （元サイトが画像に文字を焼き込んでいた枠を同じ文言で再現）
   ========================================================= */
.campaign__lead{
  font-family:var(--serif); font-size:clamp(15px,2vw,18.5px);
  line-height:1.7; margin:.6em 0 .2em; color:var(--brown);
}
.campaign__note{
  font-size:11.5px; line-height:1.75; color:var(--brown-soft);
  margin:.9em 0 0; text-align:left;
}

/* ---- 当日予約も承っています ---- */
.p-info,.p-contact{
  background:var(--cream); border:1px solid var(--line);
  border-radius:var(--r); padding:clamp(20px,3vw,34px);
  margin:0 0 1.8em; text-align:center; box-shadow:var(--shadow-card);
}
.p-info__h{
  font-family:var(--serif); font-size:clamp(19px,2.6vw,26px);
  margin:0 0 .5em; padding-bottom:.5em; position:relative;
}
.p-info__h::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:0; width:min(100%,420px); height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.p-info__lead{font-size:clamp(15px,2vw,18px); font-weight:700; line-height:1.75; margin:0 0 .9em}
.p-info__tel{margin:.4em 0 .6em}
.p-info__tel a{
  font-family:var(--sans); font-weight:700; text-decoration:none;
  font-size:clamp(28px,5.2vw,46px); letter-spacing:.01em; color:var(--brown);
}
.p-info__tel a::before{content:"📞"; font-size:.62em; margin-right:.18em}
.p-info__tel small{font-size:14px; font-weight:700; margin-left:.3em}
.p-info__name{font-size:clamp(18px,2.4vw,24px); font-weight:700; margin:.3em 0 .25em}
.p-info__addr{font-size:14px; color:var(--brown-soft); margin:0 0 1em}

.p-hours{
  display:flex; flex-wrap:wrap; gap:14px 34px; justify-content:center;
  border-top:1px dashed var(--line); padding-top:1em; text-align:left;
}
.p-hours b{
  display:block; font-size:14px; margin-bottom:.35em;
}
.p-hours b::before{content:"▼"; color:var(--orange); font-size:.8em; margin-right:.3em}
.p-hours table{border-collapse:collapse; font-size:13.5px}
.p-hours th{text-align:left; font-weight:700; padding:.12em .9em .12em 0; white-space:nowrap}
.p-hours td{padding:.12em 0}
.p-hours small{display:block; font-size:12px; color:var(--brown-soft); margin-top:.3em}
.p-hours p{font-size:13.5px; margin:0}

/* ---- お問い合わせはこちら ---- */
.p-contact{text-align:left}
.p-contact__h{
  font-family:var(--serif); font-size:clamp(20px,2.8vw,28px);
  text-align:center; margin:0 0 .7em; padding-bottom:.5em;
  border-bottom:2px dashed var(--line);
}
.p-contact__h::before{content:"📱"; margin-right:.25em; font-size:.85em}
.p-contact__items{
  display:flex; flex-wrap:wrap; gap:.3em 1.6em; list-style:none;
  padding:0; margin:.8em 0 1.2em; font-weight:700;
}
.p-contact__items li::before{content:"・"; color:var(--orange)}
.p-contact .p-info__tel{text-align:center}