/* =========================================================================
   診療項目一覧ページ (/menu) 固有スタイル
   参考画像の構成：①施術の種類から探す（アイコングリッド）②カテゴリー別（写真＋リンクリスト）
   ★更新：見出しを含め基本ゴシックに統一。スマホでの文字サイズ・行間を拡大。
   ========================================================================= */

/* ---- ①施術の種類から探す ---- */
.discover-band{background:var(--porcelain-2);padding-block:clamp(40px,6vh,64px);}
.discover-title{text-align:center;font-family:var(--f-disp);font-weight:700;font-size:clamp(1.15rem,4.4vw,1.5rem);letter-spacing:.02em;margin:0 0 clamp(28px,4vh,38px);}
.discover-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(14px,1.8vw,22px);}
.discover-item{display:flex;flex-direction:column;align-items:center;gap:12px;}
.discover-photo{width:100%;aspect-ratio:1/1;border-radius:50%;display:block;object-fit:cover;object-position:center;transition:transform .4s var(--ease),box-shadow .4s var(--ease);}
.discover-item:hover .discover-photo{transform:translateY(-4px);box-shadow:0 16px 30px -18px rgba(33,30,26,.4);}
.discover-label{font-size:.9rem;line-height:1.6;letter-spacing:.01em;font-weight:500;text-align:center;}
@media (max-width:820px){.discover-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.discover-grid{grid-template-columns:repeat(3,1fr);gap:22px 14px;}.discover-label{font-size:.88rem;}}

/* ---- ②カテゴリー別リスト ---- */
.menu-sec{padding-block:clamp(56px,8vh,84px) var(--sect-y);}
.menu-list-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(30px,4vw,48px) clamp(30px,4vw,56px);}
.menu-list-block{scroll-margin-top:calc(var(--head-h) + 20px);}
.menu-list-title{font-family:var(--f-disp);font-weight:700;font-size:1.1rem;letter-spacing:.01em;background:var(--porcelain-2);padding:.9em 1.2em;margin:0 0 16px;border-radius:4px;}
.menu-list-inner{display:flex;gap:18px;}
.menu-list-photo{flex:0 0 128px;width:128px;aspect-ratio:1/1;border-radius:6px;object-fit:cover;object-position:center;display:block;height: 150px;}
.menu-link-list{list-style:none;margin:0;padding:0;flex:1;}
.menu-link-list li{border-bottom:1px dashed var(--line);}
.menu-link-list li:last-child{border-bottom:0;}
.menu-link-list a{display:flex;align-items:center;gap:.5em;padding:.8em 0;font-size:.94rem;line-height:1.6;color:var(--ink-soft);transition:color .3s,padding-left .3s;}
.menu-link-list a:hover{color:var(--bronze);padding-left:.3em;}
.menu-link-list .ar{color:var(--bronze);font-family:var(--f-body);font-weight:700;}

/* ★追加：「目元の施術」だけサブカテゴリー（埋没／切開）を持つ構造に対応。
   .menu-link-listは既存のまま流用し、サブグループの見出しだけ新規追加。 */
.menu-link-groups{flex:1;display:flex;flex-direction:column;gap:22px;}
.menu-link-group-title{display:inline-block;font-family:var(--f-disp);font-weight:700;font-size:.86rem;letter-spacing:.02em;color:var(--bronze);padding-bottom:6px;border-bottom:2px solid var(--blush);margin-bottom:4px;}
@media (max-width:820px){.menu-list-grid{grid-template-columns:1fr;}}
@media (max-width:600px){
  .menu-list-title{font-size:1.14rem;}
  .menu-link-list a{font-size:1rem;padding:.9em 0;}
}
@media (max-width:480px){.menu-list-inner{flex-direction:column;}.menu-list-photo{width:100%;flex-basis:auto;aspect-ratio:16/9;}.menu-link-groups{gap:18px;}}