.section--pale{background:var(--paper-soft);}

.section--navy-soft{background:var(--navy); color:rgba(255,255,255,0.92); position:relative;}

.section--navy-soft::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  opacity:.7;
}

.section--navy-soft h2, .section--navy-soft h3{color:#fff;}

.section--navy-soft .head-row p{color:rgba(255,255,255,0.72);}

.head-row{max-width:680px; margin-bottom:56px;}

.head-row h2{font-size:clamp(30px,3.8vw,42px); margin-bottom:16px;}

.head-row p{color:var(--ink-soft); font-size:17.5px;}

.hero-ring{position:absolute; top:-60px; right:-60px; width:340px; height:340px; opacity:.5; z-index:1;}

.hero-badge{
  display:flex; width:fit-content; align-items:center; gap:9px;
  padding:9px 20px; border-radius:999px; margin-bottom:24px;
  background:rgba(255,255,255,0.14); border:1.5px solid rgba(228,210,164,0.85);
  color:#fff; font-size:16px; font-weight:700; letter-spacing:.01em;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}

.hero-badge svg{width:16px; height:16px; color:var(--gold-light); flex:none;}

.hero-badge-row{display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:0;}
/* スマホ：トップ画面の文字・ラベルを1画面に収めるため余白を詰める（2026/09/27） */
@media (max-width:600px){
  .hero-content .hero-badge{margin-bottom:0; padding:7px 16px; font-size:14.5px;}
  .hero-content .hero-badge-row{gap:10px;}
  .hero-content .u-flex-col-14-mb28{gap:10px; margin-bottom:22px;}
}


/* 予約不要・受付順バッジ：紺の半透明塗りつぶし＋ゴールド枠＋白文字（控えめに） */
.hero-badge--inverse{
  background:rgba(var(--navy-deep-rgb), 0.55); border:1.5px solid var(--gold-light); color:#fff;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}

.hero-badge--inverse svg{color:#fff;}

/* 予約不要・受付順バッジ：白内障バッジと近いが、紺を少し控えめに */
.hero-badge--soft{
  background:rgba(var(--navy-deep-rgb), 0.2); border:1.5px solid var(--gold-light); color:#fff;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}

.hero-badge--soft svg{color:#fff;}

.btn-row{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px;}

.btn-outline{border:1px solid rgba(255,255,255,0.5); color:#fff;}

.btn-outline:hover{background:rgba(255,255,255,0.1);}

/* quick info strip — hours / parking / barrier-free info */
.info-strip{
  position:relative; z-index:2;
  width:100%;
  border-top:1px solid rgba(255,255,255,0.18);
  padding:14px 0;
}

/* ---- info item card (駐車場・院内バリアフリー) ---- */
.info-item{
  padding:8px 26px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  border-right:1px solid rgba(255,255,255,0.16);
  opacity:0.92;
}

.info-item:last-child{border-right:none; padding-right:0;}

.info-item svg{width:20px; height:20px; flex:none; color:var(--gold-light); margin-top:2px;}

.info-item .label{font-size:16px; letter-spacing:.08em; color:var(--blue-light); margin-bottom:4px; white-space:nowrap;}

.info-item .val{font-size:16px; color:#fff; font-weight:500; line-height:1.5;}

/* ---- responsive ---- */
@media (max-width:1080px){
}

/* ===== NOTICES ===== */
.notice-wrap{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; align-items:stretch;}
@media (max-width:900px){.notice-wrap{grid-template-columns:repeat(2, 1fr);}}
@media (max-width:560px){.notice-wrap{grid-template-columns:1fr;}}

/* 追加のお知らせ（スプレッドシート連携）: 横長の帯として下に表示 */
#noticeExtraWrap:empty{display:none;}
#noticeExtraWrap{margin-top:22px;}
#noticeExtraWrap .notice-card{
  width:100%; padding:28px 30px;
}
#noticeExtraWrap .notice-card h4{margin-bottom:10px;}
/* 追加のお知らせカードを目立たせる（2026/09/27） */
#noticeExtraWrap .notice-card--extra{
  border-left:6px solid #E8B526;
  background:linear-gradient(90deg, #FDF4D6 0%, var(--white) 55%);
}
#noticeExtraWrap .notice-card--extra .tag--extra{
  display:inline-block; align-self:flex-start;
  background:#E8B526; color:var(--navy-deep);
  font-size:14px; letter-spacing:.08em; font-weight:700;
  padding:4px 14px; border-radius:999px; margin-bottom:12px;
}
#noticeExtraWrap .notice-card--extra h3{margin-bottom:10px;}
#noticeExtraWrap .notice-card--extra{scroll-margin-top:110px;}
/* トップ画像内の「スタッフ募集中」ラベル（求人があるときだけJSで表示） */
.hero-badge--recruit[hidden]{display:none !important;}
a.hero-badge--recruit{
  background:#E8B526; border-color:#E8B526; color:var(--navy-deep);
  text-decoration:none; transition:background .2s var(--ease), transform .2s var(--ease);
}
a.hero-badge--recruit svg{color:var(--navy-deep);}
a.hero-badge--recruit:hover, a.hero-badge--recruit:focus-visible{background:#F2C542; border-color:#F2C542; transform:translateY(-1px);}
#noticeExtraWrap .notice-card p{
  white-space:pre-line; line-height:1.85;
}

.quick-info-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media (max-width:680px){.quick-info-grid{grid-template-columns:1fr;}}

.quick-info-card{
  background:var(--white); border-radius:var(--r-md); padding:30px 30px 26px;
  box-shadow:var(--shadow-sm); border-top:3px solid var(--gold); position:relative;
  display:flex; flex-direction:column;
}

.quick-info-card .qi-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}

.quick-info-card .qi-eyebrow{display:flex; align-items:center; gap:8px; font-size:16px; letter-spacing:.04em; color:var(--navy-deep); font-weight:700; font-family:inherit; line-height:1.3; margin:0;}

.quick-info-card .qi-eyebrow svg{width:18px; height:18px; color: var(--gold-text); flex:none;}

#hoursChangeText{font-size:16px; color:var(--ink-soft); line-height:1.85; white-space:pre-line;}

.mini-hours{list-style:none; margin:32px 0 0; padding:0 17px; background:var(--blue-pale); border-radius:var(--r-md);}
.mini-hours li{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid rgba(var(--navy-rgb), .12); font-size:12.5px;}
.mini-hours li:last-child{border-bottom:none;}
.mini-hours .mh-day{flex:0 0 auto; color:var(--navy-deep); font-weight:700; white-space:nowrap;}
.mini-hours .mh-time{flex:0 0 auto; color:var(--ink); text-align:right;}
.mini-hours .mh-time--tue{margin-right:12px;}
.mini-hours .mh-off-wrap{position:relative; white-space:nowrap;}
.mini-hours .mh-off-ghost{visibility:hidden;}
.mini-hours .mh-off-wrap .mh-off{position:absolute; left:75.6px; top:0;}
.mini-hours .mh-time .mh-off{color:var(--gold-text); font-weight:700;}
#news .quick-info-card .card-link{margin-top:auto; display:inline-flex;}

#contactHoursText{font-size:16px; color:var(--ink-soft); line-height:1.85; white-space:pre-line;}

.qi-time-row{display:block; font-variant-numeric:tabular-nums; margin-bottom:0;}

.qi-time-label{display:inline-block; width:64px; font-weight:600;}

.qi-time-start{display:inline-block; width:44px; text-align:right; white-space:nowrap;}

.qi-contact-text{margin:0; padding:0; line-height:1.7;}

/* ===== SERVICES ===== */
.srv-group{margin-bottom:64px;}
.srv-group:last-child{margin-bottom:0;}

.srv-group-head{
  display:flex; align-items:center; gap:20px;
  margin-bottom:30px; padding-bottom:22px;
  border-bottom:1px solid rgba(var(--navy-rgb), .12);
}

.srv-group-icon{
  flex:none; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--white); color:var(--gold-text);
  box-shadow:var(--shadow-sm);
}
.srv-group-icon svg{width:24px; height:24px;}

.srv-group-heading{flex:1; min-width:0;}
.srv-group-heading .eyebrow{margin-bottom:4px;}
.srv-group-heading h3{font-size:clamp(20px,2.4vw,24px);}

@media (max-width:640px){
  .srv-group-head{flex-wrap:wrap; row-gap:12px;}
}

.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:980px){.services-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.services-grid{grid-template-columns:1fr;}}

.services-grid.services-grid--compact{grid-template-columns:repeat(auto-fit,minmax(240px,300px)); justify-content:flex-start;}
@media (max-width:980px){.services-grid.services-grid--compact{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.services-grid.services-grid--compact{grid-template-columns:1fr;}}

.service-card{
  position:relative; background:var(--white); border-radius:var(--r-md); padding:34px 26px 28px;
  box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  border:1px solid rgba(var(--navy-rgb), .06);
  display:flex; flex-direction:column;
}

.service-card:hover{transform:translateY(-7px); box-shadow:var(--shadow);}

.service-ring{
  width:64px; height:64px; margin-bottom:20px; color:var(--navy); position:relative;
  border-radius:50%; background:rgba(var(--gold-rgb), 0.045);
  display:flex; align-items:center; justify-content:center;
}

.service-ring svg{width:78%; height:78%;}

.service-ring .icon-shape{color: var(--gold-text);}

.service-ring--illust{width:64px; height:64px; margin-bottom:20px; border-radius:50%; overflow:hidden; background:rgba(var(--gold-rgb), 0.045); display:flex; align-items:center; justify-content:center;}
.service-ring--illust img{width:82%; height:82%; object-fit:cover;}

.service-card h3{font-size:23px; margin-bottom:10px; font-weight:700; color:var(--navy);}

.service-card p{font-size:16px; color:var(--ink-soft); line-height:1.75; margin-bottom:12px;}

.service-card .card-link{margin-top:auto;}

.srv-symptoms-label{
  display:block; font-size:13px; font-weight:700; letter-spacing:.02em;
  color:var(--navy-soft); margin-bottom:10px;
}

.srv-symptoms{list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:8px;}

.srv-symptoms li{
  position:relative; padding-left:22px; font-size:15px;
  color:var(--ink-soft); line-height:1.6;
}

.srv-symptoms li::before{
  content:"✓"; position:absolute; left:0; top:0;
  font-size:13px; font-weight:700; color:var(--gold-text);
}

.service-badge{
  position:absolute; top:20px; right:20px;
  font-size:12px; font-weight:700; letter-spacing:.02em;
  color:#fff; background:var(--navy);
  border:1px solid var(--navy);
  border-radius:999px; padding:4px 12px;
  white-space:nowrap;
}

.card-actions{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px 16px; margin-top:auto;
}
.card-actions .card-link{margin-top:0;}

.card-related{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--sans); font-size:16px; font-weight:700;
  color:var(--navy); padding:7px 2px; border-radius:0;
  border:none; border-bottom:1px solid var(--gold); background:none;
  transition:color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.card-related::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none;}
.card-related svg{width:13px; height:13px; flex:none; transition:transform .3s var(--ease);}
.card-related:hover{
  color:var(--gold-text);
  border-color:var(--gold-text);
  transform:translateY(-1px);
}
.card-related:hover svg{transform:translateX(4px);}

@media (max-width:420px){
  .card-actions{flex-direction:column; align-items:flex-start;}
  .mini-hours li{gap:8px;}
}

/* ===== EQUIPMENT ===== */
.equip-row{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; margin-bottom:96px;}

.equip-row:last-child{margin-bottom:0;}

.equip-row.flip .equip-media{order:2;}

.equip-row.flip .equip-text{order:1;}
@media (max-width:860px){.equip-row{grid-template-columns:1fr; gap:28px; margin-bottom:56px;}.equip-row.flip .equip-media{order:0;}.equip-row.flip .equip-text{order:0;}}

.equip-media{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow);}

.equip-media img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; transition:transform .7s var(--ease);}

.equip-media--top img{object-position:50% 15%;}

.equip-media:hover img{transform:scale(1.05);}

.equip-media .num{
  position:absolute; bottom:18px; left:18px; background:rgba(var(--navy-deep-rgb), 0.78); color:var(--gold-light);
  font-family:var(--accent); font-style:italic; font-size:16px; padding:7px 16px; border-radius:999px; letter-spacing:.06em;
}

.equip-text h3{font-size:24.5px; margin-bottom:16px;}

.equip-text p{color:var(--ink-soft); font-size:17px;}
.equip-text p + p{text-indent:1em;}

/* ===== DIRECTOR ===== */
.director-message{position:relative; overflow:hidden; background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:54px 48px;}
@media (max-width:640px){.director-message{padding:38px 26px;}}

.director-message .ring-deco{top:-40px; left:-40px; width:220px; height:220px;}

.director-message .role{position:relative; z-index:1; font-family:var(--accent); font-style:italic; color:var(--gold-text); font-size:16px; letter-spacing:.1em; margin-bottom:8px;}

.director-message h3{position:relative; z-index:1; color:var(--navy-deep); font-size:27px; margin-bottom:28px;}

.director-title{font-size:16px; font-weight:500; color:var(--navy-deep); letter-spacing:.06em; margin-right:12px; vertical-align:middle;}

.director-message .quote{font-family:var(--serif); font-size:23px; color:var(--navy-deep); line-height:1.7; margin-bottom:22px; font-weight:600;}

.director-message p{color:var(--ink-soft); font-size:17px; margin-bottom:18px;}

.director-subhead{font-size:15px; font-weight:700; letter-spacing:.03em; color:var(--navy); margin:30px 0 14px; padding-top:26px; border-top:1px solid rgba(var(--navy-rgb), .1);}

.tag-pills{display:flex; gap:10px; flex-wrap:wrap; margin-top:24px;}

.tag-pill{font-size:16px; padding:7px 16px; border-radius:999px; background:var(--blue-pale); color:var(--navy); font-weight:500;}

.director-credentials{margin-top:24px; background:var(--white); border-left:5px solid var(--navy); border-radius:0 var(--r-lg) var(--r-lg) 0; box-shadow:var(--shadow-sm); padding:26px 40px;}
@media (max-width:640px){.director-credentials{padding:20px 20px;}}

.director-credentials-head{margin-bottom:16px;}

.director-credentials-head h4{font-size:16px; letter-spacing:.04em; color:var(--navy-deep); font-weight:700; margin:6px 0 0;}

.bio-grid{position:relative; z-index:1; display:grid; grid-template-columns:76px 1fr; column-gap:18px; row-gap:0;}
.bio-grid dt{grid-column:1; font-size:14.5px; letter-spacing:.06em; color:var(--navy-deep); padding:11px 0; border-top:1px solid rgba(var(--navy-rgb), .08); align-self:start;}
.bio-grid dt:first-child{border-top:none;}
.bio-grid dd{grid-column:2; font-size:14.5px; color:var(--ink-soft); line-height:1.6; padding:11px 0; border-top:1px solid rgba(var(--navy-rgb), .08); margin:0;}
.bio-grid dd:first-of-type{border-top:none;}
.bio-grid dt:not(:first-child){border-top:1px solid rgba(var(--navy-rgb), .08);}

.career-card{list-style:none; margin:0; padding:0;}
.career-card li{display:flex; align-items:baseline; gap:12px; padding:3px 0;}
.career-desc{font-size:13.5px; color:var(--ink-soft); line-height:1.5;}
@media (max-width:520px){.bio-grid{grid-template-columns:64px 1fr; column-gap:12px;} .bio-grid dt, .bio-grid dd{font-size:13.5px; padding:9px 0;} .career-desc{font-size:12.5px;}}

/* ===== ACCESS ===== */
.access-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:32px;}
@media (max-width:760px){.access-grid{grid-template-columns:1fr; gap:24px;}}

.map-card{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); min-height:420px; display:flex; flex-direction:column; background:var(--white);}

.map-card iframe{width:100%; flex:1 1 auto; min-height:420px; border:0; display:block;}

.map-card-fallback{margin:0; border-radius:0; justify-content:center; gap:8px; padding:14px 16px; border:none; border-top:1px solid rgba(var(--navy-rgb), .1); background:var(--white); color:var(--navy); font-weight:700;}

.map-card-fallback:hover{background:var(--blue-pale);}

.access-side{display:flex; flex-direction:column; gap:22px;}

.addr-card, .mascot-card{background:var(--white); border-radius:var(--r-md); padding:28px; box-shadow:var(--shadow-sm);}

.addr-card dt{font-size:16px; letter-spacing:.07em; color: var(--gold-text); font-weight:700; margin-top:18px;}

.addr-card dt:first-child{margin-top:0;}

.addr-card dd{font-size:17px; color:var(--navy-deep); margin-top:5px; font-weight:500;}

.access-transit-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px;}

.access-transit-list li{font-size:16px; color:var(--navy-deep); font-weight:500; line-height:1.6; padding-left:14px; position:relative;}

.access-transit-list li::before{content:""; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:var(--gold);}

.mascot-card{display:flex; gap:18px; align-items:center;}
@media (max-width:480px){.mascot-card{flex-direction:column; align-items:flex-start; text-align:left;}.mascot-card img{width:100%; height:auto; max-height:220px;}}

.mascot-card img{width:160px; height:160px; border-radius:18px; object-fit:cover; flex:none; box-shadow:0 10px 22px -10px rgba(0,0,0,.35);}

.mascot-card p{font-size:16px; color:var(--ink-soft);}

/* ===== HOURS TABLE ===== */
.hours-wrap{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:stretch;}
@media (max-width:760px){.hours-wrap{grid-template-columns:1fr; gap:28px;}}

.hours-col{display:flex; flex-direction:column; height:100%;}

table.hours{width:100%; border-collapse:collapse; background:var(--white); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-sm);}

table.hours th, table.hours td{padding:15px 14px; font-size:16px; text-align:center; border-bottom:1px solid rgba(var(--navy-rgb), .07);}

table.hours thead th{background:var(--navy); color:#fff; font-weight:500; font-size:16px;}

table.hours tbody tr:last-child td{border-bottom:none;}

table.hours tbody th{text-align:left; color:var(--navy-deep); font-weight:600; background:var(--blue-pale);}

table.hours td.off{color:var(--gold-text); font-style:italic; font-weight:700;}

.hours-note-card{background:var(--white); border-radius:var(--r-md); padding:20px 24px; box-shadow:var(--shadow-sm); margin-top:18px; flex:1; display:flex; flex-direction:column; justify-content:center;}
.hours-note{font-size:16px; color:var(--ink-soft); margin:0;}
.qi-note{margin:12px 0 0; font-size:14px; line-height:1.6; color:var(--ink-soft);}
.fv-list{display:grid; grid-template-columns:1fr; gap:8px 32px; margin:0; padding:0;}
.fv-list li{position:relative; padding-left:18px; font-size:16px; line-height:1.6; color:var(--ink-soft);}
.fv-list li::before{content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--gold);}

.reserve-cards{display:flex; flex-direction:column; gap:18px; height:100%;}

.reserve-card{background:var(--white); border-radius:var(--r-md); padding:26px; box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:18px;}

.reserve-card .ic{width:46px; height:46px; flex:none; border-radius:50%; background:var(--blue-pale); display:flex; align-items:center; justify-content:center; color:var(--navy);}

.reserve-card .ic svg{width:22px; height:22px;}

.reserve-card h3{font-size:17.5px; margin-bottom:4px;}

.reserve-card p{font-size:16px; color:var(--ink-soft);}

.reserve-card a{color:var(--navy); font-weight:600; text-decoration:underline; text-decoration-color:var(--gold);}

.reserve-card--detail{align-items:flex-start;}

.reserve-card--detail p{margin-top:6px;}

.reserve-card-list + p{margin-top:26px;}

.reserve-card--solo{flex:1; height:100%; padding:32px 34px; align-items:flex-start; gap:22px;}

.reserve-card--solo .ic{margin-bottom:6px;}

.reserve-card--solo h3{font-size:19px; margin-bottom:26px;}

.reserve-card-list{margin:0 0 26px; padding:0; list-style:none;}

.reserve-card-list li{font-size:16px; color:var(--ink); font-weight:600; line-height:1.7; font-variant-numeric:tabular-nums;}

.reserve-card-list .rc-label{display:inline-block; width:64px;}

.reserve-card-list .rc-start{display:inline-block; width:44px; text-align:right; white-space:nowrap;}

/* ===== CARD READ-MORE LINK ===== */
.card-link{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  margin-top:16px; font-size:16px; font-weight:700; color:var(--navy);
  padding:6px 14px; border-radius:999px; border:none;
  background:rgba(var(--navy-rgb), .05);
  width:fit-content; text-align:center;
  text-decoration:none;
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}

.card-link svg{width:13px; height:13px; transition:transform .3s var(--ease);}

.card-link:hover{
  color:var(--gold-text);
  background:var(--blue-pale);
  text-decoration:underline;
  text-underline-offset:3px;
  transform:translateY(-2px);
}

.card-link:hover svg{transform:translateX(5px);}

.service-card:hover .card-link svg{transform:translateX(5px);}

/* ===== NOTICES: head row + admin ===== */
.notice-head{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:14px;}
.notice-greeting{font-size:16px; color:var(--ink-soft); margin-bottom:8px;}
.notice-greeting--sub{font-size:15px; margin-bottom:28px;}
.notice-app-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--navy);
  background:var(--blue-pale);
  border:1px solid var(--blue-light);
  border-radius:999px;
  padding:8px 18px;
  margin-bottom:28px;
}
.notice-app-badge svg{flex:0 0 auto; width:18px; height:18px; color:var(--navy);}
.notice-app-badge{text-decoration:none; transition:background .2s var(--ease), border-color .2s var(--ease);}
.notice-app-badge:hover{background:var(--blue-light); border-color:var(--navy);}
@media (max-width:600px){
  .notice-app-badge{font-size:13px; padding:7px 14px;}
}

/* ===== EYE HEALTH parent wrapper ===== */
#eye-health{
  background:var(--navy-deep);
  padding-bottom:0;
}

#eye-health > .wrap > .head-row p{color:rgba(255,255,255,0.72);}

#daily-care{background:var(--blue-pale); border-radius:0 0 var(--r-lg) var(--r-lg); margin:0; overflow:hidden; padding-bottom:72px;}

/* ---- ef-accordion（目の疲れ詳細内の折りたたみ） ---- */
.ef-accordion{border:1px solid #e0d9cc; border-radius:10px; margin-bottom:14px; overflow:hidden; background:#fff;}

.ef-accordion-summary{
  display:flex; align-items:center; gap:10px; padding:16px 20px; cursor:pointer;
  font-size:17px; font-weight:700; color:var(--navy); list-style:none; user-select:none;
  transition:background .22s var(--ease), color .22s var(--ease), padding-left .22s var(--ease);
}

.ef-accordion-summary::-webkit-details-marker{display:none;}

.ef-accordion-summary:hover{background:var(--blue-pale); padding-left:26px; color:var(--navy-deep);}

.ef-accordion-summary .chev{width:18px; height:18px; flex:none; margin-left:auto; color: var(--gold-text); transition:transform .3s ease;}

.ef-accordion[open] .ef-accordion-summary .chev{transform:rotate(180deg);}

.ef-accordion-icon{font-size:20px; flex:none;}

.ef-accordion-summary h2{font:inherit; margin:0; color:inherit;}


.ef-accordion-qnum{font-family:var(--accent); font-style:italic; font-size:17.5px; font-weight:700; color: var(--gold-text); min-width:30px;}

.ef-accordion-body{padding:20px 22px 24px; border-top:1px solid #e0d9cc;}

.ef-accordion-close-wrap{text-align:center; margin-top:20px;}

.ef-accordion-close{
  display:inline-flex; align-items:center; gap:6px; padding:9px 22px;
  border:1px solid #e0d9cc; border-radius:999px; background:#fff; color:var(--navy);
  font-size:16px; font-weight:700; font-family:inherit; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}

.ef-accordion-close:hover{background:var(--blue-pale); color:var(--navy-deep); border-color:var(--blue-pale);}

.ef-accordion-close svg{width:14px; height:14px; flex:none; color: var(--gold-text);}

/* ---- lightbox trigger (infographic tap-to-zoom) ----
   拡大表示のオーバーレイ自体（.img-lightbox）は common.css に統一。
   ここではこのページの図解画像に付ける「クリックで拡大できます」の見た目だけを定義。 */
.lightbox-img{cursor:zoom-in; transition:opacity .2s ease;}

.lightbox-img:hover{opacity:0.92;}

.ef-accordion, .ef-subsection, h1, h2, h3 {
  scroll-margin-top: 100px;
}

.ef-subsection{padding:22px 0;}

.ef-subsection:first-child{padding-top:2px;}

.ef-subsection + .ef-subsection{border-top:1px dashed #e0d9cc;}

.ef-subsection h3{font-size:20px; margin-bottom:4px;}

.ef-subsection p{margin-bottom:10px;}

.ef-subsection p:last-child{margin-bottom:0;}

.ef-accordion-body p{color:var(--ink-soft); font-size:16.5px; line-height:1.8; margin-bottom:0;}

.ef-accordion-body > h3{font-size:16px; font-weight:700; color:var(--navy); margin:16px 0 8px; letter-spacing:.02em;}
.ef-accordion-body > h3:first-child{margin-top:0;}


.ef-accordion-body .ef-subsection p{margin-bottom:10px;}

.ef-accordion-body .ef-subsection p:last-child{margin-bottom:0;}

.ef-subsection h4{font-size:16px; font-weight:700; color:var(--navy); margin:16px 0 8px; letter-spacing:.02em;}

.ef-subsection h4:first-child{margin-top:0;}

.ef-symptom-list{list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:6px;}

.ef-symptom-list li{font-size:16px; color:var(--ink-soft); line-height:1.7; padding-left:20px; position:relative;}

.ef-symptom-list li::before{content:""; position:absolute; left:2px; top:9px; width:6px; height:6px; border-radius:50%; background:var(--gold);}

.ef-warn{
  display:flex; gap:10px; align-items:flex-start;
  background:#FBF1E6; border:1px solid rgba(var(--gold-rgb), .35); border-radius:10px;
  padding:14px 16px; margin:12px 0 10px; font-size:16px; color:var(--navy-deep); line-height:1.75;
}

.ef-warn-icon{flex:none; font-size:18px; line-height:1.75;}

.ef-warn strong{color:var(--navy-deep);}

.ef-subsection strong{color:var(--navy-deep); font-weight:700;}

/* ---- 日ごろのケアゾーン：折りたたみ（アコーディオン）表示 ---- */
.daily-care-accordion-list{max-width:100%;}

.daily-care-accordion .ef-accordion-body{padding:20px 22px 26px;}

.daily-care-img-wrap{
  width:100%; margin-bottom:18px; border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow-sm); background:var(--white);
}

.daily-care-img{
  width:100%; height:auto; display:block; object-fit:contain;
}

/* ---- 記事内図解の共通ラッパー（日ごろのケアと同じ見え方に統一） ---- */
.ef-img-wrap{
  width:100%; margin:14px 0; border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow-sm); background:var(--white);
}

.ef-img-wrap--lg{margin:0 0 32px;}

.ef-img-wrap img{width:100%; height:auto; display:block; object-fit:contain;}

/* お知らせゾーン：カード種別が異なっても文字サイズを統一 */
#news .quick-info-card p,
#news .notice-card p,
#news .fv-list li{
  font-size:16px; line-height:1.75;
}
#news .notice-card p strong{ font-weight:600; }

/* ===== PICKUP ARTICLES (内部リンククラスター) ===== */
.pickup-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
@media (max-width:900px){
  .pickup-grid{grid-template-columns:1fr;}
}
.pickup-card{
  display:flex;
  flex-direction:column;
  background:var(--paper);
  border-radius:var(--r-md);
  border:1px solid rgba(var(--navy-rgb), .12);
  box-shadow:var(--shadow-sm);
  padding:28px;
  text-decoration:none;
  color:inherit;
  transition:transform .2s ease, box-shadow .2s ease;
}
.pickup-card:hover, .pickup-card:focus-visible{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}
.pickup-tag{
  display:inline-block;
  align-self:flex-start;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--gold-text);
  background:var(--blue-pale);
  border-radius:999px;
  padding:5px 14px;
  margin-bottom:14px;
}
.pickup-card h3{
  font-size:19px;
  margin:0 0 10px;
  color:var(--navy);
}
.pickup-card p{
  font-size:14.5px;
  line-height:1.8;
  color:#4a5a68;
  margin:0 0 18px;
  flex:1 1 auto;
}
.pickup-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:700;
  color:var(--navy);
  text-decoration:none;
  transition:color .25s ease;
}
.pickup-card:hover .pickup-link{
  color:var(--gold-text);
  text-decoration:underline;
  text-underline-offset:3px;
}
.pickup-link svg{width:16px; height:16px; transition:transform .3s ease;}
.pickup-card:hover .pickup-link svg{transform:translateX(4px);}