@charset "UTF-8";
/* 申し込みページ（order.html）のトンマナ
 * media.orylab.com（分身ナビ）・インターンシップ2026ページのトンマナに合わせる
 *   白背景／Noto Sans JP（英字・数字は Jost）／文字 #4F4C4C／ミント #00C8AA／線 #D4D6D6／面 #F6F7F7
 *   角丸は小さめ（5〜12px）、影はほぼなし、見出しの左にミントの縦線
 * order.css を読み込んだあとに、このファイルで色と形を上書きする
 */

body.om { background: #fff; }

.od {
  --od-green: #00C8AA;
  --od-green-dark: #00C8AA;
  --od-green-light: #9DE6DA;
  --od-green-bg: #F2FFFC;
  --od-orange: #00C8AA;
  --od-orange-bg: #F6F7F7;
  --od-text: #4F4C4C;
  --od-sub: #666;
  --od-bg: #fff;
  --od-line: #D4D6D6;
  --od-zen: 'Jost', 'Noto Sans JP', sans-serif;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.8;
}

/* 見出しまわり：TOP・機能と価格と同じく、黒の太字・左寄せ（左の線などの飾りはなし）
 * 「STEP 1」は順番が分かるよう見出しの上に小さくミントで。補足（OriHime 第8世代・購入 など）は見出しと同じ行に */
.od-hero { padding-top: 96px; text-align: left; }
.od-kicker { display: none; }
.od-hero h1 { margin: 0 0 16px; color: #000; font-size: 56px; font-weight: 700; letter-spacing: 0; line-height: 1.4; }
.od-section { padding-top: 120px; }
.od-hero.od-section { padding-top: 96px; }
.od-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; margin-bottom: 32px; }
.od-step { display: block; flex-basis: 100%; width: auto; height: auto; margin-bottom: 6px; border-radius: 0; background: none; color: #00C8AA; font-family: 'Jost', sans-serif; font-size: 16px; font-weight: 500; letter-spacing: .15em; }
.od-step::before { content: "STEP "; }
.od-head h2 { padding-left: 0; color: #000; font-size: 30px; font-weight: 700; letter-spacing: 0; line-height: 1.5; }
.od-head-sub { display: inline; color: #4F4C4C; font-size: 16px; font-weight: 500; }
.od-faq { max-width: 1180px; }
.od-faq h2 { margin-bottom: 32px; color: #000; font-size: 30px; font-weight: 700; letter-spacing: 0; text-align: left; }

/* カード：影ではなく細い線で区切る */
.od-card { border: 1px solid var(--od-line); border-radius: 12px; box-shadow: none; }

/* 1. 購入 / レンタル */
.od-mode { border: 1px solid var(--od-line); border-radius: 12px; box-shadow: none; }
.od-mode:hover { border-color: var(--od-green); box-shadow: 0 5px 20px rgba(0, 0, 0, .08); }
.od-mode[aria-checked="true"] { border: 2px solid var(--od-green); background: var(--od-green-bg); box-shadow: none; }
.od-mode-img { border-radius: 8px; background: #F6F7F7; }
.od-mode-name { color: #111; }

/* 2. プラン表 */
.od-cmp th { border-radius: 12px 12px 0 0; }
.od-cmp tr:last-child td { border-radius: 0 0 12px 12px; }
.od-cmp .is-star:not(th) { border-bottom-color: var(--od-line); }
.od-cmp td.is-on { border-bottom-color: #CFF3EC; }
.od-cmp tr:last-child td.is-on { box-shadow: none; }
.od-badge { border-radius: 4px; }
.od-pname { color: #111; font-weight: 600; }
.od-ttl { border-radius: 4px; background: #F6F7F7; font-weight: 500; }
.od-plus { font-weight: 400; }
.od-pcard { border: 1px solid var(--od-line); border-radius: 12px; }
.od-pcard[aria-checked="true"] { border: 2px solid var(--od-green); box-shadow: none; }
/* スマホのプランカードの頭：「一括払い・月額なし」などのラベルをプラン名の上に小さく置く（ラベル → プラン名 → 価格の順）
   margin-right: 100% でラベルだけを1行目に置き、プラン名を次の行に送る */
/* スマホのプランカードの頭：「プラン名」「価格＋補足」の2行にする（「月額プラン」などのラベルは価格の「月」と重なるので出さない。
   永年利用の「一括払い・月額なし」は価格の横の小さい字で伝える）。
   名前と価格を1行に左右で並べると、ラジオボタンのある申し込みページでは幅が足りず名前が折り返すので、この形にしている */
.od-pcard-top { align-items: center; gap: 2px 10px; }
.od-pcard-top .od-ptype { display: none; }
.od-pcard-top .od-pname { font-size: 18px; line-height: 1.5; }
.od-pcard-price { padding-left: 36px; font-size: 18px; line-height: 1.5; }
.od-pcard-price small { display: block; margin-left: 0; color: #4F4C4C; font-size: 15px !important; font-weight: 500; } /* ＋本体代は2行目に。注意書きに見えて読み飛ばされないよう、本文と同じ濃さ・大きさに */
/* 見出しに税抜も入れて、下の内訳の「本体代」「利用料」の段は省く（同じ金額を2回書かない） */
.od-pcard-price .od-pcard-tax { display: inline-block; margin-left: 2px; color: var(--od-sub); font-size: 13px; font-weight: 400; white-space: nowrap; } /* 折り返すときは（税抜…）ごと次の行へ */
.od-pcard-price small .od-pcard-tax { font-size: 13px; }
/* スマホのプランカードの内訳：左右2列だと項目名と値の対応が読みにくいので、項目名をグレーの帯の見出しにして、その下に値を置く */
.od-pcard dl { display: block; margin-top: 14px; padding-top: 0; border-top: 0; }
.od-pcard dt { padding: 3px 10px; border-radius: 4px; background: #F2F2F2; color: #111; }
.od-pcard.is-star dt { background: #fff; } /* 永年利用のカードは背景がグレーなので、帯は白にして見分けやすくする */
.od-pcard dt small { display: inline; margin-left: 6px; color: var(--od-sub); font-weight: 400; }
.od-pcard dt small::before { content: "（"; }
.od-pcard dt small::after { content: "）"; }
.od-pcard dd { margin: 6px 10px 12px; }
.od-pcard dd:last-child { margin-bottom: 0; }
/* 金額と（税抜〜）はわざと改行しない。1行に入るときは並べ、入らないときだけ（税抜〜）をまとめて次の行に送る */
.od-pcard dd br:has(+ .od-tax) { display: none; }
.od-pcard dd .od-tax { display: inline-block; }
.od-auto-note { border-radius: 6px; font-weight: 500; }

/* 2. レンタル */
.od-rent { border: 1px solid var(--od-line); border-radius: 12px; box-shadow: none; }
.od-rent:hover { border-color: var(--od-green); }
.od-rent[aria-checked="true"] { border: 2px solid var(--od-green); box-shadow: none; }
.od-rent-name { color: #111; }
.od-rentio { border-radius: 8px; background: #F6F7F7; border-color: #F6F7F7; }
/* スマホ：横並び（flex）だと「個人の方のレンタル」と「は〜」が別の行に分かれ、ボタンも枠からはみ出すので、
   文章は1つの文として流し、ボタンはその下に横いっぱいで置く */
@media only screen and (max-width: 804px) {
  .od-rentio { display: block; padding: 16px; line-height: 1.7; }
  .od-rentio .od-btn { display: flex; width: 100%; box-sizing: border-box; margin: 12px 0 0; padding: 10px 12px; font-size: 15px; white-space: normal; text-align: center; }
}
.od-btn { border-radius: 5px; }
.od-check { border-radius: 8px; }

/* 3. 流れ */
/* 番号の横に見出し・説明を並べ、上端でそろえる（番号の高さ＝見出しの1行目） */
.od-flow li { flex-direction: row; align-items: flex-start; gap: 10px; }
.od-flow li > span:last-child { padding-top: 4px; min-width: 0; }
.od-flow-no { justify-content: flex-start; border-radius: 0; background: none; font-size: 28px; font-weight: 500; line-height: 1.1; width: auto; height: auto; }

/* 4. フォーム */
.od-buyer-now { border-radius: 6px; }
.od .od-buyer-back { border-radius: 5px; }
.od-rent8 { border: 1px solid var(--od-line); background: #F6F7F7; }

/* よくある質問 */
.od-faq-item { border-bottom-color: var(--od-line); }

/* ヘッダー：白地に薄い影、ボタンはミントの角丸5px */
body.om .header { background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
/* PC はヘッダーを低めに（120px → 92px）。「ご検討中の方」などの見出しが上に収まる高さは残す */
@media only screen and (min-width: 805px) {
  body.om .header { height: 92px; padding: 30px 20px 22px; }
  body.om main, body.om .main-top { padding-top: 92px; }
}
body.om .hd-btn { border-radius: 5px; }
body.om .hd-btn-main { background: #00C8AA; border-color: #00C8AA; }
body.om .hd-btn-sub { color: #00C8AA; border-color: #00C8AA; }
body.om .hd-label { color: #666; }
body.om .hd-group-user { border-left-color: #D4D6D6; }
body.om .sp-con-btn { background: #00C8AA; border-radius: 5px; }
@media (hover: hover) {
  body.om .hd-btn-main:hover { background: #00C8AA; opacity: .8; }
  body.om .hd-btn-sub:hover { background: #E6FAF6; }
  body.om .hd-support:hover { color: #00C8AA; }
}
@media only screen and (max-width: 804px) {
  body.om .hd-btn { border-radius: 5px; }
  body.om .hd-group-user { border-top-color: #D4D6D6; }
}

/* フッター：分身ナビ・インターンシップと同じ 3列（ロゴ／グラデーションの線／英語のタグライン）
 * 線はフッターの上端から下端までつなげる（色は internship/2026/img/footer-line.svg と同じ） */
.om-footer { position: relative; background: #4F4C4C; color: #fff; }
.om-footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; min-height: 400px; max-width: 1180px; margin: 0 auto; }
.om-footer-left { display: flex; justify-content: flex-end; align-items: center; padding: 80px 80px 80px 24px; }
.om-footer-left a { display: block; width: 150px; }
.om-footer-left img { display: block; width: 150px; max-width: none; }
.om-footer-center { width: 8px; background: linear-gradient(to bottom, #040828 0%, #0E326F 30%, #36538D 50%, #8484AC 70%, #A28FA6 78%, #CCB3B0 84%, #DDC4B7 88%, #F2D4AE 91%, #FBD99B 94%, #F8C170 97%, #F08E4D 100%); }
.om-footer-right { display: flex; align-items: center; padding: 80px 24px 80px 64px; }
.om-footer-right p { margin: 0; font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 500; line-height: 2; }
.om-footer-copy { position: absolute; right: 24px; bottom: 20px; margin: 0; font-family: 'Jost', sans-serif; font-size: 12px; color: #D4D6D6; }
@media (max-width: 768px) {
  .od-hero, .od-hero.od-section { padding-top: 48px; }
  .od-section { padding-top: 80px; }
  .od-hero h1 { font-size: 32px; }
  .od-head { margin-bottom: 24px; }
  .od-head h2, .od-faq h2 { font-size: 22px; }
  .om-footer-inner { min-height: 280px; }
  .om-footer-left { padding: 48px 24px 48px 16px; }
  .om-footer-right { padding: 48px 16px 48px 24px; }
  .om-footer-left a, .om-footer-left img { width: 90px; }
  .om-footer-copy { right: 16px; bottom: 12px; }
}

/* プランの表（PC）：各段の見出し（価格・修理補償…）は、段の上の横帯の中央に1回だけ
 * 帯も4列のセルでできているので、「永年利用」の列の色と、選んだ列の緑の枠は帯の上でもつながる */
.od-cmp tr.od-band-row td { position: relative; height: 40px; padding: 0; border-bottom: 0; background: #EEF0F0; vertical-align: middle; }
.od-cmp tr.od-band-row td.is-star:not(.is-on) { background: #DDF3EE; }
.od-cmp tr.od-band-row td.is-on { background: #D9F5EF; }
/* 列の幅は同じなので、1つ目のセルから 400% の幅で置くと帯の中央になる */
.od-band-label { position: absolute; z-index: 2; top: 50%; left: 0; width: 400%; transform: translateY(-50%); color: #4F4C4C; font-size: 14px; font-weight: 700; text-align: center; white-space: nowrap; }
.od-band-label .od-ref { vertical-align: baseline; line-height: inherit; }
.od-cmp tbody tr:not(.od-band-row) td { padding-top: 18px; padding-bottom: 22px; }

/* 補足の中でも金額は太字にして、税抜の表記と見分けやすくする（永年利用の「2年目以降は51,700円」） */
.od-ex .od-ex-v { color: var(--od-text); font-weight: 700; }

/* 「永年利用」（いちばん選ばれています）の列：見出しから下までずっと薄いミント */
.od-cmp th.is-star:not(.is-on) { background: #E6FAF6; }
.od-cmp td.is-star:not(.is-on) { background: #F0FBF8; }

/* 本体代（全プラン共通）：「価格」の帯のすぐ下に、表の幅いっぱいの薄いグレーの帯で1行だけ。
 * 列の色はここで切って、4プランに共通だと分かるようにする（選んだプランの緑の線だけは通す） */
.od-cmp tr.od-base-row td { position: relative; padding: 14px 20px; border-top: 6px solid #fff; border-bottom: 6px solid #fff; border-left: 0; border-right: 0; border-radius: 0; background: #F6F7F7; text-align: center; cursor: default; }
.od-cmp tr.od-base-row td > span { position: relative; z-index: 1; }
.od-base-ttl { margin-right: 16px; color: #4F4C4C; font-size: 14px; font-weight: 700; }
.od-base-ttl small { margin-left: 8px; padding: 2px 8px; border-radius: 4px; background: #fff; font-size: 12px; font-weight: 700; }
.od-base-price b { color: #4F4C4C; font-size: 20px; font-weight: 700; }
.od-base-price span { margin-left: 8px; color: var(--od-sub); font-size: 13px; }
.od-cmp tr.od-base-row + tr td { padding-top: 18px; }
/* 選んだプランの緑の線を、本体代の行でも列の位置に引く（列は同じ幅） */
.od-cmp:has(th.is-on) tr.od-base-row td::before { content: ""; position: absolute; top: -6px; bottom: -6px; width: 25%; border-left: 3px solid var(--od-green); border-right: 3px solid var(--od-green); }
.od-cmp:has(th.is-on[data-od-plan="0"]) tr.od-base-row td::before { left: 0; }
.od-cmp:has(th.is-on[data-od-plan="1"]) tr.od-base-row td::before { left: 25%; }
.od-cmp:has(th.is-on[data-od-plan="2"]) tr.od-base-row td::before { left: 50%; }
.od-cmp:has(th.is-on[data-od-plan="3"]) tr.od-base-row td::before { left: 75%; }

/* ヘッダーの左右の端を、下の中身（1180px の枠）にそろえる（PC）。ロゴの左端＝見出しの左端、サポートの右端＝中身の右端 */
@media only screen and (min-width: 805px) {
  body.om .header { padding-left: 24px; padding-right: 24px; }
  body.om .header-inner { max-width: 1180px; }
}

/* 申し込みページの各段も、ほかのページと同じ 1180px の中身に（左右 24px の余白をふくめて 1228px） */
body.om .od-section, body.om .od-faq { max-width: 1228px; }

/* プランの表（PC）：左に行の名前の列（価格・修理補償…）＋横の線。本体代は各プランのマスに小さく薄く（2026-10-28）
 * 前の「横帯の見出し」「本体代を1行にまとめる」はやめた。表の中は rl-label（行の名前）・rl-base（本体代）・rl-plus（＋）
 */
/* 共通：左に行の名前の列 */
.od-cmp.rl { table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.od-cmp.rl col, .od-cmp.rl .rl-corner, .od-cmp.rl .rl-label { width: 150px; }
.od-cmp.rl .rl-corner { background: transparent !important; border: 0 !important; }
.od-cmp.rl .rl-label { padding: 16px 14px; background: #F6F7F7; color: #4F4C4C; font-size: 14px; font-weight: 700; text-align: left; vertical-align: middle; border-radius: 0; border: 0; }
.od-cmp.rl .rl-label .od-ref { vertical-align: baseline; }
.od-cmp.rl th:not(.rl-label):not(.rl-corner), .od-cmp.rl td { border-radius: 0 !important; box-shadow: none !important; }
.od-cmp.rl tbody td { padding: 18px 12px 20px; vertical-align: middle; }
.od-cmp.rl tr.od-base-row td { border-top: 0; border-bottom: 0; padding: 14px 20px; background: #fff; }
.od-cmp.rl tr.od-base-row td::before { display: none; }
.od-cmp.rl .od-base-ttl small { background: #F6F7F7; }
/* プラン名の行に背景 */
.od-cmp.rl thead th:not(.rl-corner) { background: #F6F7F7; padding: 14px 10px 16px; }
.od-cmp.rl thead th.is-star { background: #E6FAF6; }
.od-cmp.rl td.is-star { background: #F7FDFB; }

/* 案1：横の線だけ（縦の線なし） */
.od-cmp.rl-a thead th { border-bottom: 2px solid #D4D6D6 !important; }
.od-cmp.rl-a tbody th, .od-cmp.rl-a tbody td { border-bottom: 1px solid #D4D6D6 !important; }
.od-cmp.rl-a tr.od-base-row td { border-bottom: 1px dashed #D4D6D6 !important; }
.od-cmp.rl-a .rl-label { background: #fff; border-right: 0; }
.od-cmp.rl-a thead th:not(.rl-corner) { border-left: 3px solid #fff; border-right: 3px solid #fff; }

/* 本体代は各マスに、小さめ・薄い文字で。違い（利用料）は太字のまま */
.od-cmp.rl .rl-base { display: block; color: #7A7878; font-size: 13px; font-weight: 500; line-height: 1.5; }
.od-cmp.rl .rl-base small { display: block; font-size: 11px; font-weight: 400; }
.od-cmp.rl .rl-plus { display: block; margin: 2px 0; color: #9A9C9C; font-size: 13px; line-height: 1; }
.od-cmp.rl tr.rl-price td { padding-top: 16px; }

/* 永年利用の列の色を少し濃く（見出し・中のマスとも） */
.od-cmp.rl thead th.is-star { background: #DCF5EF; }
.od-cmp.rl td.is-star:not(.is-on) { background: #ECF9F6; }

/* ヘッダーのずれ直し（PC）
 * ・外部リンクのアイコン（導入事例・サポート）は同じ大きさ・同じすき間で、文字の高さの中央にそろえる
 * ・「ご利用中の方」は、縦線の右側（サポートのリンク部分）の真ん中に置く（画面幅で縦線の余白が変わっても中央のまま） */
@media only screen and (min-width: 805px) {
  body.om .hd-links a { display: inline-flex; align-items: center; gap: 4px; }
  body.om .hd-ext { display: inline-flex; align-items: center; margin-left: 0; font-size: 14px; line-height: 1; }
  body.om .hd-support { gap: 4px; }
  body.om .hd-support .ion-headphone { display: inline-flex; align-items: center; margin-right: 2px; line-height: 1; }
  body.om .hd-group-user .hd-label { left: 2.4rem; right: 0; transform: none; text-align: center; }
}
@media only screen and (min-width: 805px) and (max-width: 1180px) {
  body.om .hd-group-user .hd-label { left: 1.6rem; }
}

/* 申し込みページ：選んだプランの列を、上（プラン名）から下（電話サポート）まで緑の枠でひと続きに囲む */
.od-cmp.rl thead th.is-on { border-top: 3px solid var(--od-green) !important; border-left: 3px solid var(--od-green) !important; border-right: 3px solid var(--od-green) !important; border-bottom-color: #CFF3EC !important; border-radius: 8px 8px 0 0 !important; }
.od-cmp.rl tbody td.is-on { border-left: 3px solid var(--od-green) !important; border-right: 3px solid var(--od-green) !important; border-bottom-color: #CFF3EC !important; }
.od-cmp.rl tbody tr:last-child td.is-on { border-bottom: 3px solid var(--od-green) !important; border-radius: 0 0 8px 8px !important; }
/* 選んでいない列は左右に白いすき間（3px）を同じだけ取り、選ぶ・外すで表がずれないように */
.od-cmp.rl tbody td:not(.is-on) { border-left: 3px solid transparent; border-right: 3px solid transparent; }
.od-cmp.rl thead th:not(.rl-corner):not(.is-on) { border-top: 3px solid transparent; }

/* 選んだ列の上の角も、下と同じ角丸に（角を 0 にする指定より強く） */
.od-cmp.rl thead tr th.is-on:not(.rl-label):not(.rl-corner) { border-radius: 8px 8px 0 0 !important; }
.od-cmp.rl tbody tr:last-child td.is-on:not(.rl-label) { border-radius: 0 0 8px 8px !important; }

/* お申し込みのあとの流れ：フォームのすぐ下に、説明として（進み具合の表示に見えないよう、矢印や番号は使わない） */
.od-after { margin: 20px 0 0; padding: 18px 22px; border-radius: 8px; background: #F6F7F7; color: #4F4C4C; font-size: 14px; line-height: 1.8; }
.od-after p { margin: 0; }
.od-after .od-after-ttl { margin-bottom: 4px; font-size: 15px; font-weight: 700; }
@media only screen and (max-width: 804px) { .od-after { padding: 14px 16px; font-size: 13px; } }

/* ページタイトル：お問い合わせ（form.html）と同じく、ヘッダーの下に横いっぱいのイラスト＋左寄せの黒い太字 */
body.om .page-title { padding: 0; }
body.om .page-title figure { max-width: none; border-radius: 0; background: #ECECEC; }
body.om .page-title h1 { max-width: 1180px; left: 24px; right: 24px; padding: 0; color: #000; font-weight: 700; justify-content: flex-start; }
body.om .od-hero, body.om .od-hero.od-section { padding-top: 64px; }
@media only screen and (max-width: 804px) {
  body.om .page-title h1 { left: 16px; right: 16px; }
  body.om .od-hero, body.om .od-hero.od-section { padding-top: 40px; }
}
/* 写真のページタイトル（学校・イベント・受付）：見出しを「誰向けか（緑の小さい行）」＋「何のページか」の2段にする */
html body.om .page-title.pt-photo h1 { flex-direction: column; align-items: flex-start; justify-content: center; }
html body.om .page-title.pt-photo .pt-kicker { display: block; margin-bottom: 12px; color: #07A994; font-size: 18px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; }
html body.om .page-title.pt-photo .pt-main { display: block !important; margin: 0; font-size: inherit; } /* 受付ページの古い「タイトル内のspanは18px・スマホは非表示」を打ち消す */
html body.om .page-title.pt-photo .pt-kicker { display: block !important; }
html body.om .page-title.pt-photo .pt-main br { display: inline !important; }
/* PC：3ページの見出しの大きさをイベントのページ（30px）にそろえる（学校は48px・受付は34pxだった） */
@media only screen and (min-width: 805px) {
  html body.om .page-title.pt-photo h1 { font-size: 30px !important; line-height: 1.5; }
}
/* スマホのページタイトル：横長の画像をそのまま縮めると高さ70px弱しかなく、長い見出しが写真にかぶるので、
   写真を高さ120pxで右寄せに切り抜き、見出しは写真の下のグレーの帯に置く（機能と価格・第7/8世代・学校・イベント・受付・申し込み・お問い合わせで共通） */
@media only screen and (max-width: 804px) {
  html body.om .page-title { background: #ECECEC; }
  html body.om .page-title figure { height: 120px; }
  html body.om .page-title figure img { width: 100%; height: 100%; object-fit: cover; object-position: 85% center; }
  html body.om .page-title h1 { position: static; max-width: none; padding: 14px 16px 18px !important; font-size: 20px !important; line-height: 1.5; }
  /* グレー地にロボット・イラストを置いた画像（機能と価格・第7/8世代・申し込み・お問い合わせ）は、写真の下に見出しを置くと
     ロボットが胸で切れて見えるので、PCと同じく左に見出し・右に帯の下端から立ち上がるロボットを並べる */
  html body.om .page-title.pt-side figure { position: relative; height: 130px; }
  html body.om .page-title.pt-side figure img { position: absolute; right: 16px; bottom: 0; width: auto; max-width: none; height: 100%; transform: translateX(12%); }
  html body.om .page-title.pt-side h1 { position: absolute; top: 0; bottom: 0; left: 16px; right: auto; width: 46%; display: flex; align-items: center; padding: 0 !important; }
  /* 写真のページ（学校・イベント・受付）：画像の左半分はグレーのぼかしなので、高さを190pxにして右の写真部分だけを横いっぱいに見せる
     （スマホ用の画像は縦長でぼかしが入ってしまうので、PC用の画像を使う） */
  html body.om .page-title.pt-photo figure { height: 190px; }
  html body.om .page-title.pt-photo figure.pc-on { display: block !important; }
  html body.om .page-title.pt-photo figure.sp-on { display: none !important; }
  html body.om .page-title.pt-photo figure img { object-position: right center; }
  html body.om .page-title.pt-photo h1 { padding: 16px 16px 20px !important; }
  html body.om .page-title.pt-photo .pt-kicker { margin-bottom: 4px; font-size: 13px !important; }
}

/* レンタルの2枚のカード：期間・台数・付属品 を同じ順番の行でそろえて、横に読んで比べられるようにする */
.od-rent-spec { display: grid; grid-template-columns: max-content 1fr; column-gap: 20px; row-gap: 6px; align-items: baseline; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--od-line); font-size: 15px; }
.od-rent-row { display: contents; }
.od-rent-k { color: #777; font-size: 13px; font-weight: 700; white-space: nowrap; }
.od-rent-v b { font-weight: 700; color: #111; }
/* 「ご利用に必要なもの」の下の注記は、一覧より控えめに */
.od-check ul { margin-bottom: 0; }
.od-check-notes { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(0, 0, 0, .08); }
.od-check .od-check-note { margin: 2px 0 0; font-size: 14px; color: #666; }

/* スマホ：「補償・モーター交換などの詳しい条件」が数px足りず「件」だけ2行目に落ちるので、＋との間を詰めて1行に収める */
@media only screen and (max-width: 804px) {
  .od-toggle { gap: 8px; }
}