@charset "UTF-8";
/*
 * ======================================
 * おやかわ眼科 サイト固有CSS（site.css）
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * 【ヘッダー】
 * .oyk-header / __top / __logo / __actions   - 2段ヘッダー（sticky）
 * .oyk-abtn / --access / --tel / --line       - ヘッダー3大アクションピルボタン
 * .oyk-gnav / __inner / __item / __link / __label / __caret / __dd / __dd-more
 *                                             - アイコン付きグローバルナビ＋ドロップダウン
 * 【共通】
 * .oyk-sec-head / __en / __ja                 - 英日中央寄せセクション見出し（小EN＋大JA）
 * .oyk-hero / __en / __ja / __crumb           - 下層ページヒーロー（ブラウングラデ）
 * .oyk-lead                                   - セクション導入リード文（中央）
 * 【フッター・アクセス】
 * .oyk-access / __grid / __map / __info / __card / __icon / __label / __text
 * .oyk-footer / __map / __body / __logo / __addr / __tel / __sns / __sns-line
 *   / __hours / __hours-h / __note / __nav / __copy
 * .oyk-pagetop                                - 右下トップ戻りボタン
 *
 * 【TOP】
 * .oyk-mv / __slides / __slide / __shade / __inner / __brand / __en / __catch / __badges / __badge / __dots / __dot
 * .oyk-hours-wrap / .oyk-hours（診療時間テーブル）/ .oyk-hours-note
 * .oyk-news-box / __row / __date / __tag / __title / .oyk-morebtn
 * .oyk-reasons / .oyk-reason / __label / __img / __lead / __btn / __detail / __feature
 * .oyk-renewal / __badge / __title / __text / __sign
 * 【about】.oyk-greeting / .oyk-career-* / .oyk-info-table / .oyk-gallery
 * 【services】.oyk-symptom-nav / .oyk-symptom-card / .oyk-tag / .oyk-notebox
 * 【surgery】.oyk-surgery-row / .oyk-badge-* / .oyk-ext-grid / .oyk-ext-card
 * 【blog】.oyk-blogwrap / .oyk-side / .oyk-side-box / .oyk-filter / .oyk-pager / .oyk-article
 *
 * ======================================
 * 共通SCSSに不足していたもの（5分類での整理）
 * ======================================
 * ・構造不足：2段ヘッダー＋アイコン縦積みナビ＋hoverドロップダウンは共通headerに無く新規。
 * ・装飾パターン不足：円形バッジ3連MV／Featureナンバー重ね／症状円形アイコングリッドは新規。
 * ・値の粒度不足：デザインのradius(18〜24px)・brown系shadow・clamp可変余白は共通utilityの刻みで
 *   一致しないため、セクション固有クラスで直接指定。
 * ・配色：ブラウン基調＋青アクセントは _vars.scss の変数上書きで main.css 全体に反映済み。
 */

/* ============ ヘッダー ============ */
.oyk-header{ position:sticky; top:0; z-index:50; background:#fff; box-shadow:0 2px 16px rgba(139,90,43,.10); }
.oyk-header__top{ max-width:1200px; margin:0 auto; padding:10px clamp(14px,3vw,28px); display:flex; align-items:center; gap:16px; justify-content:space-between; flex-wrap:wrap; }
.oyk-header__logo{ display:flex; align-items:center; flex-shrink:0; }
.oyk-header__logo img{ height:clamp(54px,6.5vw,76px); width:auto; display:block; }
.oyk-header__actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.oyk-abtn{ display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:999px; text-decoration:none; font-size:14px; font-weight:700; transition:.25s ease; }
.oyk-abtn--access{ background:#fff; color:#8B5A2B; border:2px solid #8B5A2B; }
.oyk-abtn--access:hover{ background:#8B5A2B; color:#fff; }
.oyk-abtn--tel{ background:#1f4583; color:#fff; box-shadow:0 3px 10px rgba(139,90,43,.30); }
.oyk-abtn--tel:hover{ background:#173461; }
.oyk-abtn--line{ background:#06C755; color:#fff; box-shadow:0 3px 10px rgba(6,199,85,.28); }
.oyk-abtn--line:hover{ background:#05b04c; }
.oyk-abtn--line .fa-line{ font-size:19px; line-height:1; }

.oyk-gnav{ border-top:1px solid #eef3f9; background:#fff; }
.oyk-gnav__inner{ max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center; }
.oyk-gnav__link{ flex:1 1 90px; min-width:90px; display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 6px 9px; text-decoration:none; color:#8B5A2B; border-bottom:3px solid transparent; transition:.25s ease; }
.oyk-gnav__item{ flex:1 1 90px; min-width:90px; position:relative; }
.oyk-gnav__item > .oyk-gnav__link{ width:100%; }
.oyk-gnav__link:hover{ color:#1f4583; background:#FDFBF7; }
.oyk-gnav__link.is-current{ border-bottom-color:#1f4583; }
.oyk-gnav__label{ display:flex; align-items:center; gap:3px; font-size:16px; font-weight:700; }
.oyk-gnav__caret{ transition:.25s ease; }
.oyk-gnav__item:hover .oyk-gnav__caret{ transform:rotate(180deg); }

.oyk-gnav__dd{ display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); min-width:220px; background:#fff; border-radius:14px; box-shadow:0 14px 34px rgba(139,90,43,.20); padding:8px; z-index:60; }
.oyk-gnav__item:hover .oyk-gnav__dd{ display:block; }
.oyk-gnav__dd a{ display:block; padding:11px 16px; border-radius:9px; text-decoration:none; color:#22364a; font-size:14px; font-weight:500; white-space:nowrap; }
.oyk-gnav__dd a:hover{ background:#F3EBDE; }
.oyk-gnav__dd-more{ color:#8B5A2B; font-size:13.5px; font-weight:700; border-top:1px solid #eef3f9; margin-top:4px; }

/* ハンバーガー（スマホ用・PCでは非表示） */
.oyk-hamburger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:46px; height:46px; padding:0; border:none; background:transparent; cursor:pointer; flex-shrink:0; }
.oyk-hamburger span{ display:block; width:26px; height:3px; margin:0 auto; border-radius:3px; background:#8B5A2B; transition:transform .3s ease, opacity .2s ease; }
.oyk-header.is-menu-open .oyk-hamburger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.oyk-header.is-menu-open .oyk-hamburger span:nth-child(2){ opacity:0; }
.oyk-header.is-menu-open .oyk-hamburger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
.oyk-nav-backdrop{ display:none; }

/* ============ スマホ：ヘッダーをドロワー化 ============ */
@media (max-width:900px){
  .oyk-header__top{ flex-wrap:nowrap; }
  .oyk-hamburger{ display:flex; position:relative; z-index:80; }
  .oyk-nav-backdrop{ position:fixed; inset:0; background:rgba(31,30,20,.5); z-index:65; border:none; }
  .oyk-header.is-menu-open .oyk-nav-backdrop{ display:block; }

  .oyk-gnav{ position:fixed; top:0; right:0; width:min(86vw,340px); height:100dvh; background:#fff; border-top:none; box-shadow:-8px 0 30px rgba(139,90,43,.20); transform:translateX(100%); transition:transform .32s ease; overflow-y:auto; z-index:70; overscroll-behavior:contain; }
  .oyk-header.is-menu-open .oyk-gnav{ transform:none; }
  .oyk-gnav__inner{ flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start; max-width:none; padding:20px 0 40px; }

  /* アクションボタンはドロワーに表示しない */
  .oyk-header__actions{ display:none; }

  .oyk-gnav__link{ flex:none; min-width:0; flex-direction:row; justify-content:flex-start; gap:12px; padding:15px 22px; border-bottom:1px solid #f2f6fb; }
  .oyk-gnav__link.is-current{ border-bottom-color:#f2f6fb; background:#FDFBF7; }
  .oyk-gnav__item{ flex:none; min-width:0; }
  .oyk-gnav__label{ flex:1; font-size:16px; justify-content:space-between; }
  .oyk-gnav__caret{ display:inline-block; width:16px; height:16px; margin-left:8px; transition:transform .3s ease; }
  .oyk-gnav__item.is-open .oyk-gnav__caret{ transform:rotate(180deg); }
  /* アコーディオン：初期は閉、is-openで開く（PCホバー挙動は無効化） */
  .oyk-gnav__item:hover .oyk-gnav__dd{ display:none; }
  .oyk-gnav__dd{ display:none; position:static; transform:none; min-width:0; box-shadow:none; border-radius:0; padding:0 22px 12px 46px; }
  .oyk-gnav__item.is-open .oyk-gnav__dd{ display:block; }
  .oyk-gnav__dd a{ padding:9px 4px; font-size:13.5px; }
  .oyk-gnav__dd-more{ border-top:none; }
}
body.is-nav-lock{ overflow:hidden; }

/* ============ 共通見出し・リード・ヒーロー ============ */
.oyk-sec-head{ text-align:center; margin-bottom:32px; }
.oyk-sec-head__en{ display:block; font-family:"Jost",sans-serif; font-size:13px; font-weight:600; letter-spacing:.28em; color:#1f4583; }
.oyk-sec-head__ja{ margin:8px 0 0; font-size:clamp(24px,3.4vw,34px); font-weight:900; color:#8B5A2B; line-height:1.4; }

.oyk-lead{ text-align:center; margin:0 auto; max-width:36em; font-size:clamp(15px,1.8vw,17px); line-height:1.9; color:#45566a; }

.oyk-hero{ background:linear-gradient(160deg,rgba(139,90,43,.82),rgba(166,116,63,.72)),url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/27896/page-hero.jpg") center/cover no-repeat; padding:clamp(34px,5vw,58px) clamp(16px,4vw,32px); text-align:center; }
.oyk-hero__en{ display:block; font-family:"Jost",sans-serif; font-size:12px; font-weight:600; letter-spacing:.3em; color:#1f4583; }
.oyk-hero__ja{ margin:8px 0 0; font-size:clamp(24px,3.6vw,36px); font-weight:900; color:#fff; }
.oyk-hero__crumb{ margin:12px 0 0; font-family:"Jost",sans-serif; font-size:12px; letter-spacing:.08em; color:#E6D6C0; }

/* ============ アクセス ============ */
.oyk-access{ padding:clamp(44px,6vw,76px) 0; }
.oyk-access__grid{ display:flex; flex-direction:column; gap:clamp(20px,3vw,40px); }
.oyk-access__map{ width:100%; max-width:782px; margin:0 auto; background:#fff; border-radius:20px; padding:16px; box-shadow:0 8px 24px rgba(139,90,43,.10); }
.oyk-access__map img{ width:100%; max-width:750px; height:auto; margin:0 auto; border-radius:12px; display:block; }
.oyk-access__info{ width:100%; max-width:785px; margin:0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.4vw,24px); }
.oyk-access__card{ background:#fff; border-radius:18px; padding:24px 22px; box-shadow:0 8px 24px rgba(139,90,43,.08); }
.oyk-access__icon{ font-size:28px; margin-bottom:6px; color:#1f4583; line-height:1; }
.oyk-access__label{ font-size:15px; font-weight:700; color:#8B5A2B; margin:0 0 6px; }
.oyk-access__text{ margin:0; font-size:13.5px; color:#5a6b7e; line-height:1.8; }
@media (max-width:575px){ .oyk-access__info{ grid-template-columns:1fr; } }

/* ============ フッター ============ */
.oyk-footer{ display:flex; flex-wrap:wrap; }
.oyk-footer__map{ flex:1 1 440px; min-height:clamp(360px,46vw,540px); background:#ECE1D3; }
.oyk-footer__map iframe{ width:100%; height:100%; min-height:clamp(360px,46vw,540px); border:0; display:block; }
.oyk-footer__body{ flex:1 1 440px; background:#8B5A2B; color:#F2E8DA; padding:clamp(36px,4vw,56px) clamp(24px,4vw,48px); display:flex; flex-direction:column; align-items:center; text-align:center; }
.oyk-footer__logo{ background:#fff; border-radius:14px; padding:12px 20px; }
.oyk-footer__logo img{ height:clamp(38px,4vw,50px); width:auto; display:block; }
.oyk-footer__addr{ margin:22px 0 0; font-size:clamp(15px,1.7vw,17px); font-weight:500; color:#fff; }
.oyk-footer__tel{ margin:8px 0 0; font-size:14.5px; color:#E6D6C0; }
.oyk-footer__sns{ display:flex; gap:16px; margin-top:24px; }
.oyk-footer__sns a{ display:inline-flex; width:52px; height:52px; border-radius:50%; background:#A6743F; align-items:center; justify-content:center; color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.3); font-size:13px; font-weight:700; transition:.25s ease; }
.oyk-footer__sns a:hover{ background:#946235; }
.oyk-footer__sns-line .fa-line{ font-size:24px; line-height:1; }
.oyk-footer__hours{ border-collapse:collapse; margin-top:30px; width:100%; max-width:520px; font-size:clamp(16px,1.8vw,18px); color:#F4ECDF; }
.oyk-footer__hours thead tr{ border-bottom:1px solid rgba(255,255,255,.2); }
.oyk-footer__hours tbody tr{ border-bottom:1px solid rgba(255,255,255,.12); }
.oyk-footer__hours tbody tr:last-child{ border-bottom:none; }
.oyk-footer__hours th,.oyk-footer__hours td{ padding:10px 4px; text-align:center; font-weight:700; }
.oyk-footer__hours tbody td{ padding:14px 4px; font-weight:400; }
.oyk-footer__hours .oyk-footer__hours-h{ text-align:left; white-space:nowrap; padding-left:6px; padding-right:6px; }
.oyk-footer__hours .is-off{ color:#D8C3A8; }
.oyk-footer__hours .is-star{ color:#fff; }
.oyk-footer__note{ margin:12px 0 0; font-size:11.5px; color:#D8C3A8; }
.oyk-footer__nav{ margin-top:28px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 0; }
.oyk-footer__nav a{ color:#F2E8DA; text-decoration:none; font-size:14px; font-weight:500; padding:0 14px; transition:.25s ease; }
.oyk-footer__nav a:hover{ color:#fff; text-decoration:underline; }
.oyk-footer__nav span{ color:rgba(255,255,255,.3); }
.oyk-footer__copy{ margin:26px 0 0; font-family:"Jost",sans-serif; font-size:12px; letter-spacing:.08em; color:#D8C3A8; }

.oyk-pagetop{ position:fixed; right:22px; bottom:22px; z-index:60; width:52px; height:52px; border-radius:50%; background:#8B5A2B; border:none; cursor:pointer; color:#fff; box-shadow:0 6px 18px rgba(139,90,43,.4); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transform:translateY(10px); transition:.3s ease; }
.oyk-pagetop.is-visible{ opacity:1; visibility:visible; transform:none; }

/* ============ スマホ用 固定ボタン ============ */
.oyk-fixedbar{ display:none; }
@media (max-width:767px){
  /* ヘッダー（sticky・高さ約74px）の直下に固定表示する */
  .oyk-fixedbar{ position:fixed; left:0; right:0; top:74px; z-index:150; display:flex; background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.12); }
  /* メニュー展開中は上部固定バーを隠し、ドロワー上部と重ならないようにする */
  body.is-nav-lock .oyk-fixedbar{ display:none; }
  .oyk-fixedbar__btn{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:9px 4px; min-height:58px; text-decoration:none; font-size:12px; font-weight:700; letter-spacing:.02em; line-height:1.2; transition:opacity .2s ease; }
  .oyk-fixedbar__btn:active{ opacity:.75; }
  .oyk-fixedbar__btn i{ font-size:19px; line-height:1; }
  .oyk-fixedbar__btn--tel{ background:#8B5A2B; color:#fff; }
  .oyk-fixedbar__btn--access{ background:#fff; color:#8B5A2B; border-left:1px solid #EADFCE; border-right:1px solid #EADFCE; }
  .oyk-fixedbar__btn--line{ background:#06C755; color:#fff; }
  .oyk-fixedbar__btn--line .fa-line{ font-size:22px; }
  /* 固定バー（ヘッダー直下）の分だけ、本文先頭に余白を確保 */
  main{ padding-top:66px; }
  /* スマホではフッターナビを非表示 */
  .oyk-footer__nav{ display:none; }
}

/* ============ 共通セクション／幅ヘルパー ============ */
.oyk-sec{ padding:clamp(48px,6vw,84px) clamp(16px,4vw,32px); }
.oyk-sec--sm{ padding:clamp(40px,5vw,64px) clamp(16px,4vw,32px); }
.oyk-sec--white{ background:#fff; }
.oyk-sec--cream{ background:#FDFBF7; }
.oyk-w-1500{ max-width:1500px; margin:0 auto; }
.oyk-w-1200{ max-width:1200px; margin:0 auto; }
.oyk-w-1080{ max-width:1080px; margin:0 auto; }
.oyk-w-1040{ max-width:1040px; margin:0 auto; }
.oyk-w-960{ max-width:960px; margin:0 auto; }
.oyk-w-900{ max-width:900px; margin:0 auto; }
.oyk-w-820{ max-width:820px; margin:0 auto; }
/* 左寄せ版セクション見出し（EN小＋JA大） */
.oyk-sec-head--left{ text-align:left; margin-bottom:0; }
/* アンカー着地位置（sticky ヘッダー分のオフセット） */
section[id],div[id].oyk-anchor{ scroll-margin-top:140px; }

/* 共通チップ（タグ） */
.oyk-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.oyk-chip{ font-size:13px; color:#8B5A2B; background:#F3EBDE; border-radius:16px; padding:6px 14px; line-height:1.5; }

/* カテゴリタグ（お知らせ） */
.oyk-tag{ font-size:12px; font-weight:700; color:#fff; border-radius:20px; padding:3px 12px; }
.oyk-tag--notice{ background:#7892bb; }
.oyk-tag--care{ background:#2e8b57; }
.oyk-tag--closed{ background:#c25b5b; }

/* もっと見る／一覧へボタン */
.oyk-morewrap{ text-align:center; margin-top:26px; }
.oyk-morebtn{ display:inline-flex; align-items:center; gap:8px; background:#8B5A2B; color:#fff; text-decoration:none; font-weight:700; font-size:15px; padding:13px 32px; border-radius:30px; box-shadow:0 6px 16px rgba(139,90,43,.22); transition:.25s ease; }
.oyk-morebtn:hover{ background:#734825; transform:translateY(-2px); }

/* ============ スクロールふんわりフェードイン（控えめ） ============ */
.oyk-fade{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
.oyk-fade.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .oyk-fade{ opacity:1; transform:none; transition:none; } }