/* ===== Tokens ===== */ :root{ --kdc-accent:#e2e2e2; --kdc-text:#2c2c2c; --kdc-muted:#6e6a64; --kdc-g1:#f5f3f0; --kdc-g2:#ebe8e3; --kdc-g3:#e4e2de; /* MENU icon */ --kdc-thick:1.8px; --kdc-long:78px; /* 上下ライン（閉じ） */ --kdc-short:46px; /* 中央ライン（閉じ） */ --kdc-gap:12px; /* 開いた時 */ --kdc-x-angle:38deg; --kdc-x-shift:5px; --kdc-x-shrink:.70; } /* ===== Header ===== */ .kdc-header{ position: relative; } .kdc-header__inner{ position: fixed; /* ← stickyやめる */ top: 0; left: 0; width: 100%; height: 100px; /* ←追加 */ display:flex; align-items:center; padding: clamp(12px,2vw,20px) clamp(16px,3vw,24px); box-sizing:border-box; z-index:999; background: transparent; } .kdc-logo img{ width:400px; height:auto; display:block; } .kdc-menu-btn{ margin-left:auto; /* ← PCで右端へ押し出す */ display:flex; align-items:center; gap:12px; border:0; background:transparent; padding:6px; cursor:pointer; } .kdc-menu-btn__label{ color:var(--kdc-accent); font-size:12.5px; letter-spacing:.18em; writing-mode:vertical-rl; text-orientation:mixed; user-select:none; line-height:1; } .kdc-menu-btn__lines{ display:grid; gap:var(--kdc-gap); } .kdc-line{ height:var(--kdc-thick); background:var(--kdc-accent); border-radius:999px; transition:transform .25s ease, width .25s ease, opacity .2s ease; } .kdc-line--1,.kdc-line--3{ width:var(--kdc-long); } .kdc-line--2{ width:var(--kdc-short); } /* 開いた時：小ぶりのX */ .kdc-menu-btn[aria-expanded="true"] .kdc-line--1{ transform-origin:center; transform: translateY(var(--kdc-x-shift)) rotate(var(--kdc-x-angle)); width: calc(var(--kdc-long) * var(--kdc-x-shrink)); } .kdc-menu-btn[aria-expanded="true"] .kdc-line--2{ opacity:0; width:0; } .kdc-menu-btn[aria-expanded="true"] .kdc-line--3{ transform-origin:center; transform: translateY(calc(var(--kdc-x-shift) * -1)) rotate(calc(var(--kdc-x-angle) * -1)); width: calc(var(--kdc-long) * var(--kdc-x-shrink)); } /* ===== Overlay ===== */ .kdc-overlay{ position: fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; transition:.35s; z-index: 80; } .kdc-overlay.is-active{ opacity:1; visibility:visible; } /* ===== Drawer ===== */ .kdc-drawer{ position: fixed; inset:0 0 0 auto; z-index: 90; transform: translateX(100%); transition: transform .5s ease; background: linear-gradient(90deg,var(--kdc-g1) 0%, var(--kdc-g2) 45%, var(--kdc-g3) 100%); overflow-y:auto; overflow-x:hidden; } .kdc-drawer.is-active{ transform: translateX(0); } .kdc-drawer__inner{ max-width:1280px; margin-left:auto; padding:134px 28px; color:var(--kdc-text); } /* 3 columns */ .kdc-cols{ display:grid; grid-template-columns: minmax(380px,1fr) /* 左：診療 */ minmax(120px,.9fr) /* 中央：当院 */ minmax(410px,420px); /* 右：情報 */ gap: clamp(12px,1vw,64px); align-items:start; font-size: 16px; } .kdc-col__title{ font-size:22px; font-weight:900; margin:0 0 20px; color:#3a3836; letter-spacing:.03em; } /* lists */ .kdc-list{ list-style:none; padding:0; margin:0; } .kdc-list li + li{ margin-top: 8px; } .kdc-list a{ color:var(--kdc-text); text-decoration:none; line-height:1.6; } .kdc-list a:hover{ text-decoration:underline; } .kdc-list--two{ display:grid; grid-template-columns: repeat(2, minmax(200px,1fr)); gap:10px 40px; } /* right panel */ .kdc-info__panel{ background:#eeece7; border-radius:12px; padding:26px 18px; box-shadow:0 1px 0 rgba(255,255,255,.6) inset; text-align:left; } .kdc-info__logo{ width:180px; max-width:75%; display:block; margin:4px auto 18px; } .kdc-info__ttl{ margin:6px 0 10px; font-size:14px; letter-spacing:.2em; color:var(--kdc-muted); } /* time matrix */ .kdc-time{ background:#f4f2ef; border:1px solid #d7d3ca; border-radius:8px; padding:10px 12px; margin-bottom:10px; } .kdc-time__row{ display:grid; grid-template-columns:80px repeat(7, minmax(28px,1fr)); align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid #ddd6; } .kdc-time__row:last-child{ border-bottom:none; } .kdc-time__row--head span{ font-size:12px; color:#857f78; text-align:left; white-space:nowrap; } .kdc-time__label{ font-size:12px; color:#6b675f; white-space:nowrap; } .kdc-nowrap{ white-space:nowrap; } .kdc-dot{ width:9px; height:9px; border-radius:50%; background:#c9c4bc; display:inline-block; } .kdc-dot.is-on{ background:#6f6b63; } .kdc-dash{ height:1px; background:#bdb7ae; width:80%; display:block; } .kdc-time__caption{ margin:8px 0 0; font-size:11px; color:var(--kdc-muted); } /* buttons */ .kdc-btn{ display:block; text-align:center; text-decoration:none; margin:18px auto 0; padding:14px 18px; width:min(280px, 92%); font-size:14px; letter-spacing:.1em; border-radius:8px; transition:.25s; border:1px solid #bfb6a3; color:#504b44; background:#f8f7f4; } .kdc-btn--ghost{ background:transparent; } .kdc-btn--primary:hover{ background:#b9af9a; color:#fff; } .kdc-btn--ghost:hover{ background:#e7e4de; } 
/* ========================================
   TABLET
======================================== */ @media (max-width: 768px){ .kdc-logo img{ width:240px; } .kdc-header__inner{ justify-content:center; } .kdc-menu-btn{ position:absolute; right: clamp(10px,3vw,16px); top: 50%; transform: translateY(-50%); margin-left:0; } .kdc-drawer__inner{ padding:56px 20px; } .kdc-cols{ grid-template-columns:1fr; gap:36px; } .kdc-time__row{ grid-template-columns:100px repeat(7, minmax(26px,1fr)); } } 
/* ========================================
   MOBILE
======================================== */ @media (max-width: 600px){ /* 1) ドロワーのはみ出しを絶対に起こさない */ .kdc-drawer{ inset: 0; /* 左右とも0に */ width: 100vw; /* ビューポート幅に固定 */ transform: translateX(100%); /* 右から出す（既存と同じだが明示） */ overflow-x: hidden; /* 念のため */ } .kdc-drawer__inner{ max-width: none; /* 右寄せの最大幅を解除 */ margin: 0; /* 右寄せを解除 */ padding: 106px 16px; /* 余白を縮める（84→56 / 48→16） */ font-size: 15px; /* 全体の基準文字を少し小さく */ } /* 2) レイアウトは1カラム＋ギャップ縮小 */ .kdc-cols{ grid-template-columns: 1fr; gap: 24px; } /* 3) リスト文字サイズ・行間を控えめに */ .kdc-list a{ font-size: 0.95em; line-height: 1.5; } .kdc-about .kdc-list a{ font-size: 0.96em; line-height: 1.6; } /* 4) 右パネルの表（曜日はみ出し対策＋圧縮） */ .kdc-time{ padding: 8px 10px; } .kdc-time__row{ grid-template-columns: 86px repeat(7, minmax(22px, 1fr)); /* ラベルを細く、曜日列にmin幅 */ gap: 8px; padding: 6px 0; } .kdc-time__row--head span{ font-size: 11px; } .kdc-time__label{ font-size: 11px; } .kdc-dot{ width: 8px; height: 8px; } /* 5) ボタンもモバイルサイズに */ .kdc-btn{ width: 90%; padding: 12px 14px; font-size: 13px; margin-top: 14px; } /* 6) ヘッダー（ロゴ中央／ボタン右上）を確実に */ .kdc-header__inner{ justify-content: left; padding: 12px 12px; } .kdc-logo img{ width: 220px; } /* 240→少しだけ小さめに */ .kdc-menu-btn{ position: absolute; right: 12px; top: 50%; transform: translateY(-50%); margin-left: 0; } /* 7) MENUアイコン（三本線）も少し小さく＆控えめクロス */ :root{ --kdc-long: 68px; --kdc-short: 40px; --kdc-gap: 10px; --kdc-x-shift: 4px; --kdc-x-shrink: .68; } } /* 1列リスト専用の縦マージン */ .kdc-list:not(.kdc-list--two) li + li { margin-top: 8px; } /* 2列リストは margin で段差を作らず、row-gap で行間を作る */ .kdc-drawer .kdc-list--two { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); column-gap: 0px; row-gap: 8px; /* ← 行間はここで管理 */ } /* 2列では各 li の上マージンを無効化（競合対策で詳細度UP） */ .kdc-drawer .kdc-list--two > li { margin-top: 0 !important; } /* 1列リストだけ “li+li” の縦マージンを使いたい場合はこちらを併用 */ .kdc-drawer .kdc-list:not(.kdc-list--two) > li + li { margin-top: 8px; } /* ===== SP時：当院についてだけ2列 ===== */ /* 画面が狭すぎる端末は1列のままにするため、最小幅も見ます */ @media (max-width: 600px) and (min-width: 380px){ .kdc-drawer .kdc-about .kdc-list{ display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr)); /* 2列 */ column-gap: 20px; row-gap: 10px; } /* liに付いている縦マージンは無効化（段差防止） */ .kdc-drawer .kdc-about .kdc-list > li{ margin-top: 0; } .kdc-drawer .kdc-about .kdc-list > li > a{ display:block; /* 全面クリックできるように */ line-height: 1.6; } } /* もう少し小さい端末（～379px）は1列に戻す（任意） */ @media (max-width: 379px){ .kdc-drawer .kdc-about .kdc-list{ display:block; /* デフォルト1列 */ } } 
/* ========================================
   MENU ICON CENTER FIX
======================================== */ /* 1) ラインの親に基準幅を持たせる（ここがセンター基準） */ .kdc-menu-btn__lines{ width: var(--kdc-long); /* ← 閉じ時の長い線の長さ */ display: grid; gap: var(--kdc-gap); } /* 2) 各ラインは親幅に対して配置。中央線は左右中央寄せ */ .kdc-line{ width: 100%; margin-left: 0; } .kdc-line--2{ width: var(--kdc-short); } /* 3) 開いた時は左右の線を “同じ長さ” に短縮し、中央に寄せてから回転 */ :root{ /* 好みで微調整：✕の見た目サイズ（親幅の約0.7推奨） */ --kdc-x-width: calc(var(--kdc-long) * .70); /* 角度・上下移動もここで一括調整 */ --kdc-x-angle: 42deg; --kdc-x-shift: 14px; } @media (max-width: 640px){ :root{ /* 好みで微調整：✕の見た目サイズ（親幅の約0.7推奨） */ --kdc-x-width: calc(var(--kdc-long) * .70); /* 角度・上下移動もここで一括調整 */ --kdc-x-angle: 42deg; --kdc-x-shift: 11px; } .kdc-info { width: fit-content; } } .kdc-menu-btn[aria-expanded="true"] .kdc-line--1, .kdc-menu-btn[aria-expanded="true"] .kdc-line--3{ width: var(--kdc-x-width); margin-left: calc((var(--kdc-long) - var(--kdc-x-width)) / 2); transform-origin: center; } .kdc-menu-btn[aria-expanded="true"] .kdc-line--1{ transform: translateY(var(--kdc-x-shift)) rotate(var(--kdc-x-angle)); } .kdc-menu-btn[aria-expanded="true"] .kdc-line--3{ transform: translateY(calc(var(--kdc-x-shift) * -1)) rotate(calc(var(--kdc-x-angle) * -1)); } /* 4) 中央線は消す */ .kdc-menu-btn[aria-expanded="true"] .kdc-line--2{ opacity: 0; width: 0; margin-left: 0; } /* 仕上げ：細線が滲む時は 1.8→2px に、または translateY を 4–6px で微調整 */ .kdc-header__fixed { }

/* スクロール後のヘッダー */

.kdc-header__inner.is-scrolled{
	background: rgba(255,255,255,.82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 2px 20px rgba(0,0,0,.08);
}

/* MENU文字 */

.kdc-header__inner.is-scrolled .kdc-menu-btn__label{
	color:#233752;
}

/* ハンバーガー */

.kdc-header__inner.is-scrolled .kdc-line{
	background:#233752;
}

/* ロゴ */

.kdc-header__inner.is-scrolled .kdc-logo img{
	filter: brightness(.2);
}

.kdc-header__inner{
	transition: all .3s ease;
}

/* ========================================
   下層ページ用ヘッダー
======================================== */

.subpage .kdc-header__inner{
	background: rgba(255,255,255,.82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 2px 20px rgba(0,0,0,.08);
}

.subpage .kdc-menu-btn__label{
	color:#233752;
}

.subpage .kdc-line{
	background:#233752;
}

.subpage .kdc-logo img{
	filter: brightness(.2);
}

.subpage .page_wrap{
	padding-top:100px;
}