@charset "UTF-8";
/* おやかわ眼科 TOPページ固有CSS（top-custom.css） */

/* ============ メインビュー ============ */
.oyk-mv{ position:relative; overflow:hidden; height:clamp(540px,74vh,780px); background:#8B5A2B; }
/* CMSスライダー差し込み枠：MV全面を覆う背景レイヤーとして絶対配置 */
#cms-slider-1-1-area{ position:absolute; inset:0; z-index:0; overflow:hidden; }
#cms-slider-1-1-area > div,
#cms-slider-1-1-area ul,
#cms-slider-1-1-area li,
#cms-slider-1-1-area a,
#cms-slider-1-1-area figure,
#cms-slider-1-1-area picture{ width:100%; height:100%; margin:0; }
#cms-slider-1-1-area img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 旧・静止画スライド（CMS差し替え前のフォールバック用） */
.oyk-mv__slides{ position:absolute; inset:0; z-index:0; }
.oyk-mv__slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.3s ease; }
.oyk-mv__slide.is-active{ opacity:1; }
.oyk-mv__slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.oyk-mv__shade{ position:absolute; inset:0; z-index:1; background:linear-gradient(100deg,rgba(48,30,14,.74) 0%,rgba(48,30,14,.46) 40%,rgba(48,30,14,.08) 70%,rgba(48,30,14,0) 100%); pointer-events:none; }
.oyk-mv__inner{ position:relative; z-index:2; max-width:none; margin:0; height:100%; padding:0 clamp(18px,4vw,44px) clamp(44px,7vw,76px) clamp(22px,4vw,48px); display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; color:#fff; pointer-events:none; }
.oyk-mv__brand{ font-size:clamp(26px,4vw,44px); font-weight:900; color:#fff; letter-spacing:.03em; text-shadow:0 2px 14px rgba(0,0,0,.35); }
.oyk-mv__en{ margin-top:14px; font-family:"Jost",sans-serif; font-size:clamp(11px,1.4vw,14px); font-weight:500; letter-spacing:.3em; color:rgba(255,255,255,.9); }
.oyk-mv__catch{ margin:22px 0 0; font-size:clamp(28px,5vw,54px); font-weight:900; color:#fff; line-height:1.45; text-shadow:0 2px 18px rgba(0,0,0,.4); }
@media (min-width:768px){ .oyk-mv__catch{ margin-right:50px; } }
.oyk-mv__badges{ position:absolute; z-index:2; left:0; right:0; bottom:clamp(20px,3vw,38px); }
.oyk-mv__badges-inner{ max-width:none; margin:0; padding:0 clamp(12px,2vw,24px) 0 clamp(18px,4vw,44px); display:flex; justify-content:flex-end; gap:clamp(12px,1.8vw,22px); flex-wrap:wrap; }
.oyk-mv__badge{ width:clamp(116px,14vw,168px); height:clamp(116px,14vw,168px); border-radius:50%; border:2px solid rgba(255,255,255,.55); box-shadow:0 8px 22px rgba(0,0,0,.28); display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; font-size:clamp(14px,1.7vw,18px); font-weight:700; line-height:1.5; padding:10px; }
.oyk-mv__badge--1{ background:#8B5A2B; }
.oyk-mv__badge--2{ background:#A6743F; }
.oyk-mv__badge--3{ background:#1f4583; }
.oyk-mv__dots{ position:absolute; z-index:2; bottom:clamp(20px,3vw,38px); left:clamp(18px,4vw,44px); display:flex; gap:8px; }
.oyk-mv__dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.55); transition:.3s ease; }
.oyk-mv__dot.is-active{ background:#1f4583; }
@media (max-width:639px){
  .oyk-mv{ height:clamp(320px,46vh,430px); }
  .oyk-mv__inner{ justify-content:center; align-items:center; text-align:center; padding-left:clamp(16px,4vw,28px); padding-right:clamp(16px,4vw,28px); padding-bottom:clamp(112px,30vw,140px); }
  .oyk-mv__badges{ bottom:clamp(14px,4vw,24px); }
  .oyk-mv__badges-inner{ justify-content:center; gap:clamp(8px,2.6vw,14px); padding:0 clamp(10px,3vw,16px); flex-wrap:nowrap; }
  .oyk-mv__badge{ width:clamp(82px,26vw,112px); height:clamp(82px,26vw,112px); font-size:clamp(11px,3.1vw,14px); border-width:1.5px; padding:6px; line-height:1.4; }
  .oyk-mv__dots{ display:none; }
}

/* ============ 診療時間 ============ */
.oyk-hours-sec{ padding:clamp(48px,6vw,80px) clamp(16px,4vw,32px); background:#fff; }
.oyk-hours-wrap{ max-width:960px; margin:0 auto; }
.oyk-hours-scroll{ overflow-x:auto; border-radius:22px; box-shadow:0 8px 26px rgba(139,90,43,.10); }
.oyk-hours{ border-collapse:collapse; width:100%; min-width:560px; background:#fff; font-size:clamp(16px,2vw,19px); text-align:center; }
.oyk-hours thead tr{ background:#8B5A2B; color:#fff; }
.oyk-hours thead th{ padding:16px 8px; font-weight:700; border:1px solid rgba(255,255,255,.35); }
.oyk-hours thead th.oyk-hours__time-h{ padding:16px 12px; text-align:center; }
.oyk-hours thead th.is-holiday{ background:#1f4583; }
.oyk-hours tbody td{ padding:18px 8px; border:1px solid #e3d8c9; }
.oyk-hours td.oyk-hours__time{ text-align:center; font-weight:700; color:#8B5A2B; padding:18px 12px; }
.oyk-hours td.oyk-hours__time span{ font-weight:400; font-size:14px; color:#6f8299; }
.oyk-hours .is-open{ color:#2e8b57; font-weight:700; }
.oyk-hours .is-star{ color:#1f4583; font-weight:700; }
.oyk-hours .is-closed{ color:#c25b5b; font-weight:700; background:#F4EDE3; }
.oyk-hours-note{ margin:14px 4px 0; font-size:13.5px; color:#6f8299; line-height:1.8; text-align:center; }
.oyk-hours-note__circle{ display:inline-block; margin-right:6px; padding:2px 12px; border:1.5px solid #1f4583; border-radius:999px; color:#1f4583; font-weight:700; }

/* ============ お知らせ ============ */
.oyk-news-sec{ padding:clamp(48px,6vw,80px) clamp(16px,4vw,32px); background:#FDFBF7; }
.oyk-news-wrap{ max-width:900px; margin:0 auto; }
.oyk-news-box{ background:#fff; border-radius:22px; box-shadow:0 8px 26px rgba(139,90,43,.08); overflow:hidden; }
.oyk-news-row{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:20px 24px; text-decoration:none; border-bottom:1px solid #eef3f9; transition:.25s ease; }
.oyk-news-row:last-child{ border-bottom:none; }
.oyk-news-row:hover{ background:#FDFBF7; }
.oyk-news-row__date{ font-family:"Jost",sans-serif; font-size:14px; color:#6f8299; letter-spacing:.04em; }
.oyk-news-row__title{ font-size:15px; font-weight:500; color:#2b3a4a; flex:1; min-width:180px; }
/* .oyk-tag / .oyk-morebtn は site.css に定義（複数ページで共用） */

/* ============ 選ばれる6つの理由 ============ */
.oyk-reasons-sec{ padding:clamp(52px,7vw,88px) clamp(16px,4vw,32px); background:#fff; }
.oyk-reasons-wrap{ max-width:1500px; margin:0 auto; }
.oyk-reasons{ display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); column-gap:clamp(48px,6vw,96px); row-gap:clamp(56px,7vw,90px); }
.oyk-reason{ position:relative; }
.oyk-reason--shift{ transform:translateY(clamp(0px,3vw,46px)); }
.oyk-reason__feature{ position:relative; z-index:3; padding-left:8px; margin-bottom:-6px; line-height:.9; white-space:nowrap; }
.oyk-reason__feature-en{ font-family:"Jost",sans-serif; font-size:clamp(24px,3vw,36px); font-weight:600; color:#7892bb; }
.oyk-reason__feature-num{ font-family:"Jost",sans-serif; font-size:clamp(40px,5.2vw,60px); font-weight:700; color:#1f4583; margin-left:8px; }
.oyk-reason__imgwrap{ position:relative; }
.oyk-reason__imgwrap::before{ content:""; position:absolute; top:16px; left:16px; width:100%; height:100%; background:#ECE1D3; border-radius:24px; z-index:0; }
.oyk-reason__img{ position:relative; z-index:1; aspect-ratio:16/10; border-radius:22px; overflow:hidden; box-shadow:0 16px 34px rgba(139,90,43,.16); }
.oyk-reason__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.oyk-reason__body{ position:relative; z-index:2; margin-top:-40px; margin-left:6px; margin-right:22px; display:flex; flex-direction:column; gap:11px; align-items:flex-start; }
.oyk-reason__lead{ background:#A6743F; color:#fff; font-size:clamp(13px,1.5vw,15px); font-weight:700; border-radius:14px; padding:11px 20px; box-shadow:0 8px 20px rgba(139,90,43,.22); }
.oyk-reason__btn{ background:#8B5A2B; color:#fff; border:none; cursor:pointer; font-family:"Zen Maru Gothic",sans-serif; font-size:clamp(16px,1.9vw,20px); font-weight:900; border-radius:14px; padding:14px 22px; box-shadow:0 8px 22px rgba(139,90,43,.28); display:flex; align-items:center; gap:12px; transition:.25s ease; }
.oyk-reason__btn:hover{ background:#734825; }
.oyk-reason__btn-arrow{ display:inline-flex; width:24px; height:24px; border-radius:50%; align-items:center; justify-content:center; flex-shrink:0; transition:transform .3s ease; }
.oyk-reason__btn.is-open .oyk-reason__btn-arrow{ transform:rotate(90deg); }
.oyk-reason__detail{ display:none; margin:16px 6px 0; font-size:14.5px; line-height:1.95; color:#54687d; background:#FDFBF7; border-radius:16px; padding:16px 18px; }
.oyk-reason__detail.is-open{ display:block; }

/* ============ リブランディング案内 ============ */
.oyk-renewal-sec{ padding:clamp(48px,6vw,80px) clamp(16px,4vw,32px); background:linear-gradient(135deg,#F3EBDE 0%,#F2E8DA 100%); }
.oyk-renewal-wrap{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(28px,4vw,52px); align-items:center; }
.oyk-renewal{ background:#fff; text-align:center; border-radius:26px; padding:clamp(34px,5vw,54px) clamp(24px,4vw,44px); box-shadow:0 12px 34px rgba(139,90,43,.10); }
.oyk-renewal__badge{ display:inline-block; font-size:13px; font-weight:700; color:#1f4583; background:#E9EFF7; border-radius:20px; padding:5px 16px; }
.oyk-renewal__title{ margin:20px 0 0; font-size:clamp(21px,3vw,30px); font-weight:900; color:#8B5A2B; line-height:1.6; }
.oyk-renewal__title-accent{ color:#1f4583; }
.oyk-renewal__text{ margin:22px auto 0; font-size:clamp(15px,1.8vw,16px); line-height:2.05; color:#4a5b6d; max-width:34em; }
.oyk-renewal__sign{ margin:18px 0 0; font-size:14px; color:#7a8699; }
.oyk-renewal__photo{ margin:0; }
.oyk-renewal__photo img{ width:100%; height:100%; max-height:510px; object-fit:cover; border-radius:20px; box-shadow:0 12px 30px rgba(139,90,43,.18); display:block; }
@media (max-width:639px){
  /* スマホ時：診療時間の「HOURS／診療時間」見出しを非表示にし、表を上に詰める */
  .oyk-hours-sec .oyk-sec-head{ display:none; }
  .oyk-hours-sec{ padding:clamp(20px,5vw,28px) clamp(10px,3vw,16px); }

  /* スマホ時：表が見切れないよう画面幅に収める */
  .oyk-hours{ min-width:0; font-size:12px; }
  .oyk-hours thead th{ padding:8px 2px; font-size:12px; }
  .oyk-hours thead th.oyk-hours__time-h{ padding:8px 4px; }
  .oyk-hours tbody td{ padding:11px 2px; }
  .oyk-hours td.oyk-hours__time{ padding:11px 4px; font-size:12px; }
  .oyk-hours td.oyk-hours__time span{ display:block; font-size:10px; }
}

@media (max-width:767px){
  .oyk-renewal-wrap{ grid-template-columns:1fr; }
  .oyk-renewal__photo{ order:-1; }
  .oyk-renewal__photo img{ max-height:340px; }
  .oyk-renewal__text{ text-align:left; }
}