/* ========== オープンプレーのページ ========== */

/* 12/1 の前後で出し分ける要素（is-after は head のインラインの処理が付ける） */
html:not(.is-after) [data-when="after"],html.is-after [data-when="before"]{display:none!important}

.op-narrow{--container-max:808px}
.op-sec{position:relative;padding:64px 0}
/* セクションの地は肌色とクリームを交互にする（白はカードの地なのでセクションには使わない） */
.op-sec.is-cream{background:var(--c-cream)}
.op-sec h2{margin-bottom:20px}
@media (max-width:992px){.op-sec{padding:48px 0}}
.op-page .btn{padding-inline:20px}
.op-end{margin-top:32px;text-align:center}
/* ページ内の CTA（FV・おねがいの下）は、スマホでは全幅にして文字を中央に置く */
@media (max-width:480px){.op-hero-txt .btn,.op-end .btn{display:flex;justify-content:center;width:100%}}
/* 折り返すときは指定したまとまりの切れ目で切る */
.op-ib{display:inline-block}
.u-blk{display:block}
.op-tt{margin:16px 0 12px;font-size:20px;font-weight:700;color:var(--c-navy);line-height:1.4}
.op-mk{background:linear-gradient(transparent 58%,var(--c-orange-pale) 58%)}

/* ----- ヘッダー ----- */
/* 「OPEN PLAY」は「LESSON」より長く、スマホではヘッダーに予約ボタンまで入らない。予約は画面下の固定ボタンに任せる */
.header-logo .header-section{white-space:nowrap}
@media (max-width:992px){.op-page .header-nav a.header-cta{display:inline-flex}}
@media (max-width:480px){.op-page .header-nav a.header-cta{display:none}}

/* ----- FV ----- */
.op-hero{position:relative;padding:48px 0 56px;background:var(--c-cream)}
.op-hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.op-hero-title{margin:0 0 16px;font-size:48px;font-weight:700;line-height:1.4;color:var(--c-navy)}
.op-hero-lead{margin:0 0 24px;font-size:18px;font-weight:500;line-height:1.7;color:var(--c-charcoal)}
.op-hero-visual{overflow:hidden;border:4px solid var(--c-navy);border-radius:var(--radius);box-shadow:5px 5px 0 var(--c-navy)}
.op-hero-visual img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media (max-width:992px){
  .op-hero{padding:0 0 40px}
  .op-hero-inner{grid-template-columns:1fr;gap:24px}
  /* スマホは写真を枠なしで画面幅いっぱいに出す */
  .op-hero-visual{order:-1;margin-inline:calc(var(--container-pad,24px) * -1);border:0;border-radius:0;box-shadow:none}
  .op-hero-visual img{aspect-ratio:16/10}
  .op-hero-title{font-size:32px;margin-bottom:12px}
}

/* ----- お知らせ: FV のすぐ下に、FV には重ねず、枠だけのカードで出す ----- */
.op-news-band{padding-top:24px}
.op-news{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 20px;border:2px solid var(--c-navy);border-radius:var(--radius-sm);background:var(--c-white)}
.op-news + .op-news{margin-top:12px}
/* 週間スケジュール下の移動の注記。淡いオレンジの地に黒の文字 */
.op p.op-chg{margin:16px 0 0;padding:10px 14px;border-radius:var(--radius-sm);background:var(--c-orange-pale);font-size:16px;font-weight:500;line-height:1.7;color:var(--c-charcoal)}
.op-news-tag{padding:2px 10px;border-radius:4px;background:var(--c-orange-logo);color:var(--c-charcoal);font-size:13px;font-weight:600;line-height:1.5}
.op-news p{margin:0;font-size:16px;font-weight:500;line-height:1.7;color:var(--c-charcoal)}

/* ----- Pickle Kのオープンプレー ----- */
/* 元は1段落だった2文。段落の間を空けずに続けて読ませる */
.op .op-intro-wide.is-joined{margin-bottom:0}
/* ベンチに座る2人の切り抜き。文章とはほぼ重ねずに右下へ置き、ベンチの脚の下端をセクションの境目に合わせ、
   足元を次のセクションへはみ出させる。はみ出しは写真自身の高さに対する translateY で付ける（幅が変わっても比率が保たれる）。
   スマホではベンチの右端を画面の外へ逃がして切る */
#intro{overflow-x:clip}
.op-intro-photo{position:relative;z-index:1;display:block;height:auto;transform:translateY(16.5%)}
@media (min-width:481px){
  /* 最後の行(1fr)は空けておき、写真が文章より高いぶんの余りをそこで受ける（文章の行が間延びしないように） */
  #intro .op{display:grid;grid-template-columns:1fr min(360px,45%);grid-template-rows:repeat(5,auto) 1fr;column-gap:32px}
  #intro .op > *{grid-column:1}
  /* 見出しと最初の1段落だけ全幅。「集まった人同士…」からは写真の横に置く */
  #intro .op > h2,#intro .op > .op-intro-wide:not(.is-joined){grid-column:1 / -1}
  /* 行を明示して、写真と同じ行に文章を重ねて置けるようにする（自動配置だと写真を避けて文章が下へ送られる） */
  #intro .op > h2{grid-row:1}
  #intro .op > .op-intro-wide:not(.is-joined){grid-row:2}
  #intro .op > .op-intro-wide.is-joined{grid-row:3}
  #intro .op > p:not(.op-intro-wide){grid-row:4}
  #intro .op-intro-end > p{grid-row:5}
  .op-intro-end{display:contents}
  #intro .op-intro-end > *{grid-column:1}
  #intro .op-intro-end > .op-intro-photo{grid-column:2;grid-row:1 / 7;align-self:end;width:100%;margin-bottom:-64px}
}
@media (min-width:481px) and (max-width:992px){
  #intro .op{column-gap:24px}
  #intro .op-intro-end > .op-intro-photo{margin-bottom:-48px}
}
@media (max-width:480px){
  /* 最後の一文と写真を同じマスに重ね、一文を写真の左上（男性の頭より左の空いた所）に置く。
     一文の幅は本文の半分までにして、人物にかからない所で自動で折り返させる。
     写真は translateY で下げているため、そのぶん写真の上に空きができる。
     まとまりごと同じ量だけ持ち上げて空きを詰め、一文は写真の見た目の上端（頭の高さ）から始める
     （.661 は写真の縦横比 529/800、.165 は translateY の量） */
  .op-intro-end{--shift:calc(92vw * .661 * .165);display:grid;margin-top:calc(24px - var(--shift))}
  .op-intro-end > *{grid-area:1 / 1}
  .op-intro-end > p{position:relative;z-index:2;align-self:start;max-width:50%;margin:calc(var(--shift) - 8px) 0 0}
  .op-intro-photo{width:92vw;margin:0 calc(var(--container-pad,24px) * -1 - 92vw * .1) -48px auto}
}

/* ----- 開催内容: 項目名と内容の2列。スマホでも2列のまま ----- */
.op-info{margin:0;border-top:2px solid var(--c-navy)}
/* 項目名(16px)と内容(18px)は1行目の文字の並びをそろえる */
.op-info > div{display:grid;grid-template-columns:64px 1fr;align-items:baseline;gap:12px;padding:16px 0;border-bottom:1px solid var(--c-sky)}
.op-info dt{font-size:16px;font-weight:700;line-height:1.7;color:var(--c-navy)}
.op-info dd{margin:0;font-size:18px;font-weight:500;line-height:1.7;color:var(--c-charcoal)}
.op-info-row{display:block}
/* 説明が長い項目（コート）は、項目名の下に本文を置いて本文の幅を確保する */
.op-info > div.is-stack{grid-template-columns:1fr;gap:4px}
/* かっこ書きの補足は次の行に送り、途中で折り返さないようにする */
.op-info-sub{display:block;font-size:16px}
.op-info-note{display:block;margin-top:4px;font-size:14px;color:var(--c-grey)}
@media (max-width:480px){.op-info > div{grid-template-columns:56px 1fr;gap:8px}}

/* ========== 週間スケジュール ========== */
/* 表は左右の余白を詰めて広げる（7列を収めるため）。表の右端は画面の端から 480px 以下で 7px、992px 以下で 13px。
   左端は時間の列が中央寄せで内側にすき間を持つため、右端より 7px 外へ出す（480px 以下で 0px、992px 以下で 6px）。
   切り替え（土日1列・横スクロール）は画面幅ではなく表の置き場の幅で判定する */
.op-scroll{margin:0 -2px;padding:0 2px;overflow-x:auto;container:opweek/inline-size}
@media (max-width:992px){.op-scroll{margin-inline:-18px -11px}}
@media (max-width:480px){.op-scroll{margin-inline:-24px -17px}}
/* 背景の淡い面は、曜日の行と時間の列を除いた「セルの部分」だけに敷く(表の背面に疑似要素で置く)。
   位置は表の寸法から決まる: 左=時間列40px+border-spacing 2px×2、上=曜日行28px+2px×2、面の外側へ4pxはみ出させて丸みを付ける */
.op-panel{position:relative;min-width:310px;padding:0 0 6px}
.op-panel::before{content:"";position:absolute;z-index:0;left:calc(2px + 40px + 2px - 4px);right:calc(2px - 4px);top:calc(2px + 28px + 2px - 4px);bottom:calc(6px + 2px - 4px);background:var(--c-ivory);border-radius:var(--radius)}
.op-panel table.op-sch{position:relative;z-index:1}
.op-sch{width:100%;border-collapse:separate;border-spacing:2px;table-layout:fixed;font-size:13px;text-align:center}
/* 左上の空セルも曜日行と同じ高さにする（.op-sch td の高さだと曜日行が伸び、面の位置がずれる） */
.op-sch thead td{width:40px;height:28px}
/* 992px 以下は「午前」が 16px で列に余るため、時間の列を 34px に詰めてセルを広げる。背景の面の左端もこの幅に合わせる */
@media (max-width:992px){
  .op-sch thead td{width:34px}
  .op-panel::before{left:calc(2px + 34px + 2px - 4px)}
}
.op-sch th{padding:0;height:28px;line-height:28px;border-radius:6px;font-size:13px;font-weight:700;color:var(--c-navy)}
.op-sch th.is-today{background:var(--c-navy);color:var(--c-white)}
.op-sch td{position:relative;height:88px;padding:0;border-radius:6px;vertical-align:middle;font-family:var(--font-display);font-size:13px;font-weight:700;line-height:1.2;letter-spacing:-.01em}
/* 目安レベルなし(白)・目安レベルあり(水色)の2種だけにする。範囲をレベルごとに色分けすると重なって読めなくなるため */
.op-sch td.is-all{background:var(--c-white);box-shadow:inset 0 0 0 1px var(--c-sky);color:var(--c-navy);font-weight:500}
.op-sch td.is-lv{--cell-bg:var(--c-sky-pale);background:var(--c-sky-pale);box-shadow:inset 0 0 0 1px var(--c-sky);color:var(--c-navy);font-weight:700}
/* 午後(〜17:00)と夜(18:00〜)の間は1時間あくので、行の間を空けて区切る。
   行ラベルの th.op-rh の height:auto に負けないよう、詳細度を上げている */
.op-sch tr.is-gap th.op-rh{height:10px}

/* 目安レベルの印: 1〜3 は若葉マーク、3〜4/4〜5/5〜7 は星の数。数字を読まなくても難しさの段階が分かるようにする */
.op-ic{display:flex;justify-content:center;gap:1px;height:14px;margin-bottom:4px}
.op-ic svg{display:block;height:14px;width:auto}
/* 星の黄色と縁は評価を表す意味の色（パレット外）。白・水色の地で形が出るよう濃い縁を付ける */
.op-ic .is-star{color:#F5B800}
.st-gap{fill:none;stroke:none}
.st-fg{fill:currentColor;stroke:#8A5F00;stroke-width:1.2;stroke-linejoin:round}
/* 星3つは横に並べるとセル幅を取りすぎるため、両脇を小さく、真ん中を大きくして上に持ち上げ、少し重ねる */
.op-ic.is-2{gap:0}
.op-ic.is-2 svg + svg{margin-left:-2px}
.op-ic.is-3{height:20px;align-items:flex-end;gap:0}
.op-ic.is-3 svg{height:12px;margin-bottom:2px}
.op-ic.is-3 svg:nth-child(2){position:relative;z-index:1;height:17px;margin:0 -5px 4px}
/* 真ん中の星はセルの地色で太く縁取り、重なった星との境目を見せる */
.op-ic.is-3 svg:nth-child(2) .st-gap{stroke:var(--cell-bg,var(--c-white));stroke-width:5;stroke-linejoin:round}
/* 「目安Lv」と数字は1組の表示なので、行間を詰めてくっつける */
.op-rec{display:block;font-family:var(--font-jp);font-size:10px;font-weight:500;line-height:1;white-space:nowrap}
.op-lvn{display:flex;justify-content:center;align-items:center;font-family:var(--font-display);font-size:16px;font-weight:700;line-height:1.1;white-space:nowrap}
.op-lvn.is-none{font-family:var(--font-jp);font-size:14px;font-weight:500}
/* 数字の間の「~」は小さく細くして、数字を主役にする */
.op-tl{display:block;width:6px;height:4px;margin:0 1px}

/* 行ラベル: 「午前」の下に小さく 9:00 ｜ 13:00 */
.op-sch th.op-rh{padding:0;height:auto;line-height:1;vertical-align:middle;border-radius:0;text-align:center;color:var(--c-navy)}
.op-rh-name{display:block;font-size:16px;font-weight:700}
.op-rh-time{display:flex;flex-direction:column;align-items:center;margin-top:8px;font-family:var(--font-display);font-size:12px;font-weight:500;line-height:1.1;color:var(--c-grey)}
.op-rh-time i{display:block;width:1px;height:10px;margin:3px 0;background:currentColor}

/* 2面の枠だけ「2面」 */
.op-cap{display:inline-flex;align-items:center;gap:1px;margin-top:5px;font-family:var(--font-display);font-size:12px;font-weight:500;line-height:1;color:var(--c-charcoal)}
/* 通常の枠は「2面」を下端に外出しし、ほかの「通常」の枠と文字の位置をそろえる */
.op-sch td.is-all .op-cap.is-2{position:absolute;left:0;right:0;bottom:12px;justify-content:center;margin:0}

/* 狭い画面: 7列が入らない幅(曜日の列が中身の最大幅 約31px + 余白を下回る)では、土日を1列にまとめる。
   まとめても入らない幅では、どのみち横スクロールになるので、まとめずに7列のまま横スクロールさせる */
.op-sch .op-wk{display:none}
@container opweek (284px <= width < 310px){
  .op-scroll .op-panel{min-width:0}
  .op-sch .op-we{display:none}
  .op-sch .op-wk{display:table-cell}
}
/* 「日曜は/2面」は2行になるため、ほかの「2面」より下端に寄せて「通常」と重ならないようにする */
.op-sch td.is-all.op-wk .op-cap.is-wk{display:block;bottom:6px;line-height:1.1;text-align:center}
.op-wk-sun{font-size:10px}

/* 「通常」の説明。表の「通常」の枠と同じ見た目の札を左に置く */
.op-normal{display:flex;align-items:center;gap:12px;margin-top:20px}
.op-normal-tag{flex:none;display:grid;place-items:center;width:34px;height:50px;border-radius:6px;background:var(--c-white);box-shadow:inset 0 0 0 1px var(--c-sky);font-family:var(--font-jp);font-size:12px;font-weight:500;color:var(--c-navy)}
.op .op-normal p{margin:0;font-size:16px;line-height:1.4}

/* 各レベル枠の説明(開閉) */
.op-lvd{margin-top:16px;border-radius:var(--radius-sm);background:var(--c-white);box-shadow:inset 0 0 0 1px var(--c-sky)}
.op-lvd summary{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;list-style:none;font-size:16px;font-weight:700;color:var(--c-navy)}
.op-lvd summary::-webkit-details-marker{display:none}
.op-lvd summary::after{content:"";flex:none;width:8px;height:8px;margin-left:auto;border:solid var(--c-navy);border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.op-lvd[open] summary::after{transform:translateY(2px) rotate(-135deg)}
/* 下端そろえだと星3つだけ背が高く上に浮いて見えるため、印どうしの上下の中心をそろえる */
.op-lvd-ics{display:flex;align-items:center;gap:6px;position:relative;top:2px}
.op-lvd .op-ic{margin:0}
.op-lvd-ics .op-ic.is-3{margin-left:-3px}
.op-lvd-ics .op-ic.is-3 svg{margin-bottom:0}
.op-lvd-ics .op-ic.is-3 svg:nth-child(2){margin-bottom:3px}
.op-lvi{padding:16px;border-top:1px dashed var(--c-sky)}
/* 印は見出しの左に置く。左に列を取ると箇条書きの幅が狭まり、1〜2文字だけ次の行に落ちるため */
.op-lvi-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:18px;font-weight:700;line-height:1.4;color:var(--c-navy)}
.op-lvi-range{margin-left:-4px;font-size:16px;font-weight:500;color:var(--c-charcoal)}
.op-lvi-h .op-ic{flex:none;width:44px;height:20px;justify-content:center}
.op-lvi-h .op-ic svg{height:20px}
.op-lvi-h .op-ic.is-2 svg + svg{margin-left:-3px}
.op-lvi-h .op-ic.is-3{height:28px}
.op-lvi-h .op-ic.is-3 svg{height:17px;margin-bottom:0}
.op-lvi-h .op-ic.is-3 svg:nth-child(2){height:24px;margin:0 -7px 4px}
.op-lvi ul{margin:8px 0 0;padding:0 0 0 1.2em;font-size:16px;line-height:1.7;color:var(--c-charcoal)}
.op .op-lvi p{margin:8px 0 0;font-size:16px;line-height:1.7}

/* レベルについて */
.op-lvbox{margin-top:24px;padding:14px 16px 16px;border-radius:var(--radius-sm);background:var(--c-sky-pale)}
.op-lvbox h4{margin:0 0 4px;font-size:16px;font-weight:700;color:var(--c-navy)}
.op .op-lvbox p{margin:0 0 10px;font-size:16px}
/* 列の数は幅に合わせて変える。1列の最小幅は一番長い「Lv.6中上級」が1行に収まる幅 */
.op-lvlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px 8px;margin:0;padding:0;list-style:none}
.op-lvlist li{display:flex;align-items:baseline;gap:4px;font-size:16px;font-weight:500;color:var(--c-charcoal);white-space:nowrap}
.op-lvlist b{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--c-navy)}

/* ========== 開催カレンダー: 週間スケジュールで出せない、日ごとの内容と休みを見せる ========== */
.op-tt.op-cal-tt{margin-top:32px}
.op .op-cal-note{margin:4px 0 0;font-size:14px;line-height:1.7;color:var(--c-charcoal)}
.op .op-cal-hint{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--c-charcoal)}
/* 箱は左右の余白の半分まで広げる */
.op-cal{margin:4px calc(var(--container-pad,24px) * -.5) 0;padding:12px 12px 16px;border-radius:var(--radius-sm);background:var(--c-white);box-shadow:inset 0 0 0 1px var(--c-sky)}
.op-cal-head{display:flex;align-items:center;justify-content:space-between;margin:-6px 0 2px}
.op-cal-ttl{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--c-navy)}
.op-cal-nav{display:grid;place-items:center;width:44px;height:36px;padding:0;border:0;background:none;color:var(--c-navy);cursor:pointer}
.op-cal-nav svg{width:22px;height:22px}
.op-cal-nav:disabled{opacity:.3;cursor:default}
/* Googleカレンダーのように、マスは色を付けず細い線で区切る。部分休み・終日休みの日だけマス全体の色を変える */
.op-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--c-cream);border-left:1px solid var(--c-cream)}
.op-cal-grid > *{border-right:1px solid var(--c-cream);border-bottom:1px solid var(--c-cream)}
.op-cal-dow{padding:2px 0;font-size:13px;font-weight:600;text-align:center;color:var(--c-charcoal)}
/* 土日の曜日の色は、カレンダーで一般に使われる意味の色（青・赤）。パレット外だが白地で 4.5:1 以上 */
.op-cal-dow.is-sat{color:#1F5FBF}
.op-cal-dow.is-sun{color:#C8322B}
.op-cal-day{display:flex;flex-direction:column;align-items:center;justify-content:center;height:38px;padding:0 0 3px;border-top:0;border-left:0;border-radius:0;background:var(--c-white);color:var(--c-charcoal);font:500 16px/1 var(--font-display);cursor:pointer}
.op-cal-day.is-part{background:var(--c-orange-logo)}
.op-cal-day.is-off{background:var(--c-navy);color:var(--c-white)}
/* 今日は日付の数字を線の丸で囲むだけ */
.op-cal-num{display:grid;place-items:center;width:22px;height:22px;border-radius:50%}
.op-cal-day.is-today .op-cal-num{box-shadow:inset 0 0 0 2px var(--c-navy)}
.op-cal-day.is-off.is-today .op-cal-num{box-shadow:inset 0 0 0 2px var(--c-white)}
/* 選んだ日はマスの内側に枠を引く。マスの塗り（状態）は変えず、枠の色だけをそのマスの地と反対にする
   （白・オレンジのマスは紺の枠、紺のマスは水色の枠）。今日は丸があるので枠を付けない */
.op-cal-day[aria-pressed="true"]:not(.is-today){box-shadow:inset 0 0 0 3px var(--c-navy)}
.op-cal-day.is-off[aria-pressed="true"]:not(.is-today){box-shadow:inset 0 0 0 3px var(--c-sky)}
/* 状態は色だけでなく文字（通・部・休）でも示す */
.op-cal-mk{margin-top:1px;font:600 12px/1 var(--font-jp);font-style:normal}
/* 通常の日の「通」は目立たせない */
.op-cal-day.is-ok .op-cal-mk,.op-cal-key i.is-ok{color:var(--c-grey)}
.op-cal-blank{cursor:default}
/* 凡例と非開催日の一覧は箱の外に置く */
.op-cal-after{margin-top:10px}
.op-cal-key{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px;color:var(--c-charcoal)}
.op-cal-key span{display:inline-flex;align-items:center;gap:6px}
.op-cal-key i{display:grid;place-items:center;width:24px;height:20px;border:1px solid var(--c-cream);font:600 12px/1 var(--font-jp);font-style:normal}
.op-cal-key i.is-ok{border-color:var(--c-sky);background:var(--c-white)}
.op-cal-key i.is-part{border-color:var(--c-orange-logo);background:var(--c-orange-logo)}
.op-cal-key i.is-off{border-color:var(--c-navy);background:var(--c-navy);color:var(--c-white)}
/* 選んだ日の内容 */
.op-cal-detail{margin-top:8px;padding-top:6px;border-top:1px dashed var(--c-sky)}
.op-cal-date{display:flex;align-items:center;justify-content:space-between;font-size:18px;font-weight:700;color:var(--c-navy)}
.op-cal-close{display:grid;place-items:center;width:40px;height:32px;margin-right:-8px;padding:0;border:0;background:none;color:var(--c-navy);cursor:pointer}
.op-cal-close svg{width:20px;height:20px}
/* 日の詳細: 左に時間帯（週間スケジュールの行ラベルと同じ縦並び）、右に週間スケジュールのマスと同じ色のカード */
.op-cal-slots{display:grid;gap:4px;margin-top:6px}
.op-cal-slot{display:grid;grid-template-columns:38px 1fr;gap:6px;align-items:stretch}
.op-cal-time{display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-display);font-size:12px;font-weight:500;line-height:1.1;color:var(--c-grey)}
.op-cal-time b{margin-bottom:4px;font-family:var(--font-jp);font-size:16px;font-weight:700;color:var(--c-navy)}
.op-cal-time i{display:block;width:1px;height:6px;margin:2px 0;background:currentColor}
.op-cal-card{padding:6px 10px 7px;border-radius:6px;background:var(--c-white);box-shadow:inset 0 0 0 1px var(--c-sky)}
.op-cal-card.is-lv{--cell-bg:var(--c-sky-pale);background:var(--c-sky-pale)}
.op-cal-card.is-off{background:var(--c-ivory);box-shadow:inset 0 0 0 1px var(--c-cream)}
.op-cal-lv{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;font-size:16px;font-weight:700;line-height:1.4;color:var(--c-navy)}
.op-cal-lv .op-ic{margin:0}
.op-cal-lv small{font-size:13px;font-weight:500;color:var(--c-charcoal)}
/* コートと定員は、アイコンを付けた小さめの文字で1行にまとめ、定員は右に寄せる */
.op-cal-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 14px;margin-top:9px;font-size:14px;font-weight:500;line-height:1.4;color:var(--c-charcoal)}
.op-cal-meta > span{display:inline-flex;align-items:center;gap:4px}
.op-cal-meta > span:nth-child(2){margin-left:auto}
.op-cal-meta svg{flex:none;width:15px;height:15px;color:var(--c-navy)}
.op-cal-card.is-off .op-cal-lv{color:var(--c-charcoal)}
.op-cal-card.is-off .op-cal-meta{color:var(--c-grey)}
/* 非開催日の一覧。箱の外（肌色の地）に置くので、白いカードにして地から浮かせる */
.op-cal-off{margin-top:12px;border-radius:var(--radius-sm);background:var(--c-white);box-shadow:inset 0 0 0 1px var(--c-sky)}
.op-cal-off summary{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;list-style:none;font-size:16px;font-weight:700;color:var(--c-navy)}
.op-cal-off summary::-webkit-details-marker{display:none}
.op-cal-off summary::after{content:"";flex:none;width:8px;height:8px;margin-left:auto;border:solid var(--c-navy);border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg)}
.op-cal-off[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.op-cal-off ul{margin:0;padding:0 24px 12px;list-style:none}
/* 各行の左に「休」を置き、日付の羅列ではなく休みの一覧だと読み取れるようにする。
   カレンダーの「休」（終日休み）は塗りの印、こちらは枠だけの印にして区別する */
.op-cal-off li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:6px 0;border-top:1px solid var(--c-cream);font-size:14px;line-height:1.6;color:var(--c-grey)}
.op-cal-off li > i{display:grid;place-items:center;width:26px;height:26px;padding-bottom:2px;border:2px solid var(--c-navy);border-radius:4px;font:700 13px/1 var(--font-jp);font-style:normal;color:var(--c-navy)}
.op-cal-off li b{display:block;font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--c-charcoal)}

/* ========== 料金 ========== */
/* セクションの地はクリームなので、表の地（白）を料金案内のカードと同じ白い箱で敷く */
.op-price{--bp:14px;overflow:hidden;padding:10px var(--bp) 14px;background:var(--c-white);border:2px solid var(--c-navy);border-radius:var(--radius-sm)}
/* スマホは左右の余白の半分まで広げ、表の幅を確保する。480px 以下は画面の端から 8px まで広げる（320px 幅でも表を横スクロールさせないため） */
@media (max-width:992px){.op-price{margin-inline:calc(var(--container-pad,24px) * -.5)}}
@media (max-width:480px){.op-price,.op-cal{margin-inline:calc(8px - var(--container-pad,24px))}}
.op .pt-foot p{margin:0;font-size:14px;line-height:1.7}
.op .pt-foot p + p{margin-top:4px}
/* 箱の上端に付けるオレンジの帯（オレンジの地には紺の文字）。箱の内側の余白を打ち消して、枠の端から端まで敷く */
.op-price-band{margin:-10px calc(var(--bp) * -1) 0;padding:4px 12px;background:var(--c-orange-logo);color:var(--c-navy);font-size:16px;font-weight:700;line-height:1.5;text-align:center}
/* 会員の水色の帯は、上の帯の下に角を付けずにつなげ、つなげた分は列見出しの上に余白を足す（水色の内側で取る） */
.op-price-band + .pt-scroll .price-table thead .is-member{border-top-left-radius:0}
.op-price-band + .pt-scroll .price-table thead th{padding-top:16px}

/* ========== PC（993px〜）: 幅に余裕があるので、表とカレンダーの文字・マスを大きくする ========== */
@media (min-width:993px){
  /* 週間スケジュール */
  .op-sch td{height:108px}
  .op-sch thead td{height:36px}  .op-sch th{font-size:16px}
  .op-rh-name{font-size:18px}
  .op-rh-time{font-size:14px}
  .op-sch .op-ic,.op-sch .op-ic svg{height:22px}
  .op-sch .op-ic.is-3{height:30px}
  .op-sch .op-ic.is-3 svg{height:19px}
  .op-sch .op-ic.is-3 svg:nth-child(2){height:27px;margin:0 -7px 6px}
  .op-rec{font-size:13px}
  .op-lvn{font-size:24px}
  .op-lvn.is-none{font-size:16px}
  .op-tl{width:9px;height:6px}
  .op-cap{font-size:16px}
  .op-sch td.is-all .op-cap.is-2{bottom:14px}
  /* カレンダー */
  .op-cal-dow{padding:6px 0;font-size:14px}
  .op-cal-day{height:60px;font-size:18px}
  .op-cal-num{width:30px;height:30px}
  .op-cal-mk{margin-top:3px;font-size:13px}
  .op-cal-detail{max-width:600px;margin-inline:auto}
  /* 料金表: 幅が余るので箱の幅に上限を付けて中央に置き、文字を大きくする */
  #price .op-price{max-width:600px;margin-inline:auto}
  #price .price-table thead th{font-size:18px}
  #price .price-table thead th small{font-size:14px}
  #price .price-table tbody th .pt-name{font-size:18px}
  #price .price-table tbody th .pt-name.is-sub{font-size:16px}
  #price .price-table td{padding-top:12px;padding-bottom:12px;font-size:28px}
  #price .pt-alt{font-size:18px}
  #price .op-price-band{font-size:18px}
}