/* =============================================================================
 *  KT CLINIC — 共通トークン & フッター
 *  2026-07-26 モック（KTトップ_全体_モック.html）に合わせて刷新
 * ========================================================================== */

:root{
  --gold:#B89A5E; --gold-deep:#9C7E47; --gold-line:#E5D8BB; --gold-soft:#F1E8D6;
  --gyn:#C16A82;  --gyn-bg:#F9EDF1;
  --derm:#6E9450; --derm-bg:#EDF2E6;
  --cos:#5E7BA0;  --cos-bg:#EAEFF6;
  --cream:#FBF6EE; --cream2:#FCFAF6;
  --ink:#3E382F; --sub:#6E665B; --line:#ECE6DA;
  /* 表・メニューの罫線グレー。モックの --tl / --grey-line と同じ値 */
  --tl:#E3E1DC; --grey-line:#E3E1DC;
  /* アクセント。3軸カラーに切り替えたい箇所は、そのセクション側で --ac を上書きする */
  --ac:var(--gold-deep); --ac-bg:var(--gold-soft);
  --serif:'Noto Serif JP',serif; --sans:'Noto Sans JP',sans-serif; --en:'Inter',sans-serif;
}

/* リセットは front-page と footer の内側だけに効かせ、既存ページへは影響させない */
.kt-top,.ft{color:var(--ink);font-family:var(--sans);line-height:1.75;}
.kt-top *,.ft *{box-sizing:border-box;}
.kt-top a,.ft a{color:inherit;text-decoration:none;}
/* --- 横はみ出し防止 --------------------------------------------------
   地図の埋め込み（iframe）は width/height が属性で固定されて入るため、
   指定がないと画面幅を超える。画像とあわせて必ず枠内に収める。 */
html,body{overflow-x:hidden;max-width:100%;}
.ft img,.ft svg,.info-photo img{max-width:100%;height:auto;}
.info-map{overflow:hidden;}
.info-map iframe{width:100%!important;height:100%!important;min-height:16rem;
                 border:0;display:block;}


.info-access{display:grid;grid-template-columns:1fr 1.15fr;gap:2.5rem;align-items:stretch;}
.info-photo{aspect-ratio:16/10;overflow:hidden;margin:0 0 1.75rem;background:var(--gold-soft);}
.info-photo img{width:100%;height:100%;object-fit:cover;display:block;}
/* 2026-08-04 ヘッダーと同じロゴ画像に差し替えた（assets/img/logo.svg）。
   ロゴに「KTクリニック」の文字が入っているので、下に出していた
   .info-name（明朝のクリニック名）は footer.php 側で消している。
   縦積みにしているのは、法人名がロゴの上に乗る形にするため。 */
.info-logo{margin:0 0 1.5rem;}
.info-logo-img{display:block;width:14.5rem;max-width:100%;height:auto;}
.info-corp{font-size:.72rem;letter-spacing:.1em;color:var(--sub);margin:0 0 .55rem;}
.info-tel{display:flex;align-items:center;gap:1rem;margin:1.25rem 0 1.5rem;
            transition:opacity .25s;}
.info-tel:hover{opacity:.7;}
.info-tel-ic{width:2rem;height:2rem;flex:none;color:var(--gold);}
.info-tel-l{display:block;font-size:.74rem;letter-spacing:.12em;color:var(--gold-deep);
              margin-bottom:.15rem;}
.info-tel-n{display:block;font-family:var(--serif);font-size:2.1rem;font-weight:600;
              letter-spacing:.04em;line-height:1.15;color:var(--ink);}
.info-row{display:grid;grid-template-columns:6rem 1fr;gap:1rem;padding:.85rem 0;
            border-top:1px solid var(--line);font-size:.88rem;line-height:1.85;margin:0;}
.info-row:last-of-type{border-bottom:1px solid var(--line);}
.info-row span{line-height:1.85;}
.info-row b{font-weight:600;color:var(--sub);font-size:.82rem;letter-spacing:.06em;}
.info-map{background:#EFEDE8;border:1px solid var(--line);
            display:flex;align-items:center;justify-content:center;
            font-size:.85rem;color:#A39B8E;letter-spacing:.08em;}
.ft{background:#fff;padding:4.5rem 2.5rem 2.5rem;}
.ft-access{margin-bottom:3.5rem;}
.ft-inner{max-width:76rem;margin:0 auto;}
.ft-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem 2rem;
            padding:2rem 0;border-top:1px solid var(--gold-line);
            border-bottom:1px solid var(--gold-line);}
.ft-links a{font-size:.83rem;letter-spacing:.04em;color:var(--sub);transition:color .2s;}
.ft-links a:hover{color:var(--gold-deep);}
.ft-bottom{text-align:center;padding-top:1.75rem;}
.ft-bottom p{font-size:.72rem;letter-spacing:.06em;color:#A39B8E;margin:0;}
@media (max-width:1080px){
  .ft{padding:3rem 1.25rem 2rem;}
  .info-logo-img{width:12rem;}
  .info-tel-n{font-size:1.8rem;}
  .ft-access{margin-bottom:2.25rem;}
  .ft-links{gap:.8rem 1.5rem;padding:1.5rem 0;}
  .info-access{grid-template-columns:1fr;gap:1.75rem;}
  .info-map{aspect-ratio:16/10;}
}

/* =============================================================================
 *  スマホ用 固定CTA（画面下に常時表示）
 *  2026-07-27 追加。ヘッダーからWEB予約を外した代わりの予約導線。
 * ========================================================================== */
.sp-cta{display:none;}

@media (max-width:768px){
  .sp-cta{display:grid;grid-template-columns:1fr 1fr;
          position:fixed;left:0;right:0;bottom:0;z-index:900;
          border-top:1px solid var(--gold-line);
          box-shadow:0 -2px 14px rgba(62,56,47,.08);}
  .sp-cta a{display:flex;align-items:center;justify-content:center;gap:.5rem;
            padding:.8rem .5rem;font-size:.9rem;font-weight:600;letter-spacing:.06em;
            line-height:1.3;text-decoration:none;min-height:3.25rem;}
  .sp-cta svg{width:1.15rem;height:1.15rem;flex:none;}
  .sp-cta-tel{background:#fff;color:var(--gold-deep);}
  .sp-cta-web{background:var(--gold);color:#fff;}
  .sp-cta-tel:active{background:var(--gold-soft);}
  .sp-cta-web:active{background:var(--gold-deep);}

  /* 固定バーぶんの余白。最下部のコピーライトが隠れないようにする */
  body{padding-bottom:3.25rem;}
  /* iPhone のホームバー領域を考慮 */
  @supports (padding:env(safe-area-inset-bottom)){
    .sp-cta a{padding-bottom:calc(.8rem + env(safe-area-inset-bottom));}
    body{padding-bottom:calc(3.25rem + env(safe-area-inset-bottom));}
  }
}