/* ==========================================================================
   運動不足・体力づくりの方へ(/exercise/)── 第65回 第2部
   段・見出し・oc-howto・oc-flow・oc-cards2 は base.css の共通部品。ここはこのページだけの所
   ========================================================================== */

/* 横長の写真(見出し帯のすぐ下) */
.ex-hero{padding-top:0; padding-bottom:clamp(48px,6vw,72px)}
.ex-wide img{aspect-ratio:21/9; height:auto; object-fit:cover; object-position:50% 55%}

/* 文の段 */
.ex-prose{margin-top:clamp(20px,3vw,28px); max-width:40em}
.ex-prose p{margin:0 0 1em; font-size:1rem; line-height:2; color:var(--ink-soft)}
.ex-prose ul{margin:0 0 1em; padding-left:1.3em; font-size:1rem; line-height:1.95; color:var(--ink-soft)}
.ex-prose h3{margin:1.4em 0 .6em}
.ex-more{margin:0}
.ex-more .oc-link{margin-top:6px}

/* 運動の部屋:写真と文を横に(スマホは縦) */
.ex-room{margin-top:clamp(24px,3vw,36px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,48px); align-items:start}
.ex-room .ex-prose{margin-top:0}
.ex-room__photo{aspect-ratio:4/3}
.ex-room__photo img{height:100%; object-fit:cover}
.ex-room .tools{list-style:none; margin:0 0 1.2em; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.ex-room .tools li{font-size:.86rem; padding:4px 12px; border-radius:999px; background:#fff; color:var(--ink); line-height:1.7}

/* 1回の流れ:番号の横に題と文(題は太く) */
.ex-flow li b{font-weight:600; color:var(--ink)}

/* 料金 */
.ex-price{list-style:none; margin:14px 0 0; padding:0; border-top:1px solid rgba(33,33,33,.08)}
.ex-price li{display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 12px; padding:10px 0; border-bottom:1px solid rgba(33,33,33,.08); font-size:.95rem; line-height:1.7}
.ex-price .k{color:var(--ink-soft)}
.ex-price .v{font-weight:500; color:var(--ink)}
.ex-price small{font-size:.82rem; font-weight:400; color:var(--ink-soft)}
.ex-pace{margin-top:clamp(28px,4vw,40px); padding:22px clamp(20px,3vw,28px); background:#fff; border-radius:8px; box-shadow:0 0 0 1px rgba(33,33,33,.07); max-width:46em}
.ex-pace p{margin:0 0 .8em; font-size:.95rem; line-height:1.9; color:var(--ink-soft)}
.ex-pace p:last-child{margin-bottom:0}
.ex-pace ul{margin:0 0 .8em; padding-left:1.3em; font-size:.95rem; line-height:1.9; color:var(--ink-soft)}
#fee .ex-more{margin-top:clamp(20px,3vw,28px)}

/* よくあるご質問(開いたまま3つ) */
.ex-qa{margin:clamp(24px,3vw,32px) 0 0; display:grid; gap:14px}
.ex-qa > div{padding:20px clamp(20px,3vw,28px); background:#fff; border-radius:8px; box-shadow:0 0 0 1px rgba(33,33,33,.07)}
.ex-qa dt{position:relative; padding-left:1.8em; font-weight:600; line-height:1.7}
.ex-qa dt::before{content:"Q"; position:absolute; left:0; top:0; font-family:var(--mincho); color:var(--oc-red-text)}
.ex-qa dd{position:relative; margin:10px 0 0; padding-left:1.8em; font-size:.95rem; line-height:1.95; color:var(--ink-soft)}
.ex-qa dd::before{content:"A"; position:absolute; left:0; top:0; font-family:var(--mincho); color:var(--blue)}
#qa .ex-more{margin-top:clamp(20px,3vw,28px)}

/* スマホでだけ改行(「整体＋」のあと・院長 11/14。共通の br.oc-sp は 360px 以下だけなので、このページ用) */
br.ex-sp{display:none}

/* 料金のカードの「このメニューを予約する」 */
.ex-go{margin:12px 0 0}
.ex-go .oc-link{margin-top:0}

@media (max-width:899px){
  .ex-room{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:599px){
  br.ex-sp{display:inline}
  .ex-wide img{aspect-ratio:4/3; object-position:22% 50%}
}

/* 見出しの下の小さい字(第65回 院長 11/14:括弧で折れないよう見出しから出した) */
.ex-h2sub{margin:6px 0 0; font-size:.9rem; letter-spacing:.04em; color:var(--ink-soft); line-height:1.7}