@charset "UTF-8";
/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用） — Cosme M・DO【エムドゥ】
 * ======================================
 *
 * .mdo-header 系      - 2段ヘッダー（濃紺ユーティリティバー＋白メインバー、EN+JAナビ、LINE CTA）
 *                       --overlay（TOPのみ）はMV写真の上に重ねる透過表示。MVを過ぎると .is-stuck で白バーへ
 * .mdo-cta / .mdo-footer - お問い合わせCTAバンド／濃紺フッター（情報＋地図）
 * .mdo-btn(--white/--pink/--ghost/--ghost-light/--pink-xl/--pink-flat/--navy) - ピル型ボタン各種
 * .mdo-eyebrow(--pink/--light) - Cormorant小見出しラベル
 * .mdo-phero 系       - 下層ページヒーロー（帯画像＋浮きタイトルカード＋パンくず）
 * .mdo-bgimg(--y30..y62) - 背景画像のsize/position（url指定は style="background-image:url()" で付与）
 * .mdo-wash-white(-72/-78) - 写真の上に白ウォッシュを重ねる面（--bgimg で画像指定）
 * .mdo-mv 系          - メインビュー（写真2×2タイル×2パターンのクロスフェード＋白ベール＋中央の白板に濃紺コピー）
 * .mdo-news-card / .mdo-thumb--g1..g6 - お知らせカード＋サムネイルグラデ（CMSサムネの代替）
 * .mdo-concept / .mdo-promise / .mdo-brandsec / .mdo-menusec / .mdo-exp / .mdo-storesec - TOP各セクション
 * .mdo-cstore / .mdo-cbeliefs / .mdo-belief / .mdo-cinfo - 店舗案内ページ
 * .mdo-brand-card / .mdo-notebox - 取扱ブランドページ
 * .mdo-pricelist / .mdo-price 系 / .mdo-flow 系 - メニュー・料金・施術フロー
 * .mdo-chips / .mdo-chip / .mdo-pager / .mdo-side - お知らせ一覧
 * .mdo-entry 系 / .mdo-backlink - お知らせ詳細
 * .mdo-fade           - スクロール連動フェードイン（common.js の IntersectionObserver）
 *
 * ======================================
 * 共通SCSSに不足していたもの（5分類）
 * ======================================
 * ・構造不足：2段ヘッダー（上部ユーティリティバー＋下部ロゴ/ナビ）が共通headerに無い
 * ・構造不足：下層ヒーローの「帯画像＋浮きタイトルカード＋右下パンくず」構成が無い
 * ・装飾パターン不足：Lavishly Yours筆記体の大型あしらい／ロゴ由来ハートドット面
 * ・値の粒度不足：セクション上下paddingが76/82/96/104/108px等、共通の120px固定と不一致
 * ・値の粒度不足：カード角丸18/20/22px・影 rgba(27,42,74,.07〜.14) が共通値と不一致
 */

/* ==========================================================================
   0. トークン / 汎用
   ========================================================================== */
:root {
  --navy: #1b2a4a;   /* メイン濃紺 */
  --navy2: #1b1d7a;  /* サブ濃紺（面・価格・ボタン） */
  --ink: #141a30;    /* フッター */
  --pink: #e4007f;
  --pink-dark: #c70070;
  --pink-soft: #ff8fc6;
  --pink-soft2: #ff9ecd;
  --pink-pale: #fdf4f8;
  --pink-pale2: #fdeaf4;
  --body: #41496a;
  --muted: #8a90ad;
  --muted2: #5b6285;
  --line-pink: #efd9e6;
}

.mdo-bg-white { background: #fff; }
.mdo-wide { width: 96%; margin: 0 auto; }
.mdo-container { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.mdo-container--w960  { max-width: 960px; }
.mdo-container--w1000 { max-width: 1000px; }
.mdo-container--w1080 { max-width: 1080px; }
.mdo-container--w1120 { max-width: 1120px; }
.mdo-container--w1160 { max-width: 1160px; }

/* 背景画像（url は style="background-image:url()" で付与） */
.mdo-bgimg { background-size: cover; background-repeat: no-repeat; background-position: center center; }
.mdo-bgimg--y30 { background-position: center 30%; }
.mdo-bgimg--y32 { background-position: center 32%; }
.mdo-bgimg--y35 { background-position: center 35%; }
.mdo-bgimg--y40 { background-position: center 40%; }
.mdo-bgimg--y45 { background-position: center 45%; }
.mdo-bgimg--y62 { background-position: center 62%; }

/* 写真に白ウォッシュを重ねる面 */
.mdo-wash-72 { background-image: linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)), var(--bgimg); background-size: cover; background-position: center; background-repeat: no-repeat; }
.mdo-wash-78 { background-image: linear-gradient(rgba(255,255,255,.78), rgba(255,255,255,.78)), var(--bgimg); background-size: cover; background-position: center; background-repeat: no-repeat; }

/* 縦paddingユーティリティ（デザイン実値） */
.mdo-pt-0{padding-top:0}.mdo-pb-0{padding-bottom:0}
.mdo-pt-8{padding-top:8px}.mdo-pb-8{padding-bottom:8px}
.mdo-pt-20{padding-top:20px}.mdo-pb-20{padding-bottom:20px}
.mdo-pt-30{padding-top:30px}.mdo-pb-30{padding-bottom:30px}
.mdo-pt-32{padding-top:32px}
.mdo-pt-34{padding-top:34px}
.mdo-pt-40{padding-top:40px}.mdo-pb-40{padding-bottom:40px}
.mdo-pt-44{padding-top:44px}
.mdo-pt-60{padding-top:60px}
.mdo-pt-64{padding-top:64px}
.mdo-pt-72{padding-top:72px}
.mdo-pt-74{padding-top:74px}
.mdo-pt-76{padding-top:76px}.mdo-pb-76{padding-bottom:76px}
.mdo-pt-78{padding-top:78px}.mdo-pb-78{padding-bottom:78px}
.mdo-pt-82{padding-top:82px}.mdo-pb-82{padding-bottom:82px}
.mdo-pb-84{padding-bottom:84px}
.mdo-pt-88{padding-top:88px}.mdo-pb-88{padding-bottom:88px}
.mdo-pt-96{padding-top:96px}.mdo-pb-96{padding-bottom:96px}
.mdo-pt-104{padding-top:104px}.mdo-pb-108{padding-bottom:108px}
.mdo-pb-110{padding-bottom:110px}

/* 改行制御（PC/SP で改行位置を切り替える）
   .mdo-br-pc … PC のみ改行（SP では無効）
   .mdo-br-sp … SP のみ改行（PC では無効）
   .mdo-nb    … 文節を inline-block でまとめ、語の途中で折り返さない */
.mdo-br-sp { display: none; }
.mdo-nb { display: inline-block; }

/* 本文の折り返し：最終行が1〜2文字だけ残るのを防ぐ（対応ブラウザのみ） */
.mdo-two__p, .mdo-sec-lead, .mdo-clead__p, .mdo-course-lead, .mdo-course-close,
.mdo-note, .mdo-cta__lead, .mdo-brand-intro p, .mdo-price__body,
.mdo-two__note, .mdo-brandsec__note { text-wrap: pretty; }

/* 見出しラベル・共通見出し */
.mdo-eyebrow { font-family: "Cormorant", serif; font-size: 15px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--pink); margin: 0; line-height: 1; }
.mdo-eyebrow--pink { color: var(--pink-soft2); }
.mdo-eyebrow--light { color: #ffd6ea; font-size: 14px; margin-bottom: 20px; }
.mdo-sec-head { text-align: center; }
.mdo-sec-ttl { font-size: 26px; font-weight: 500; letter-spacing: .06em; margin: 2px 0 0; line-height: 1.4; }
.mdo-sec-ttl--28 { font-size: 28px; }
.mdo-sec-lead { opacity: .82; font-size: 15px; line-height: 1.9; margin: 0; }

/* ボタン */
.mdo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; font-weight: 700; border-radius: 999px; line-height: 1.2; transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
.mdo-btn:hover { opacity: 1; }
.mdo-btn--white { background: #fff; color: var(--navy2); padding: 15px 28px; font-size: 15px; box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.mdo-btn--white:hover { background: var(--pink-pale); }
.mdo-btn--pink { background: var(--pink); color: #fff; padding: 15px 28px; font-size: 15px; box-shadow: 0 10px 26px rgba(228,0,127,.32); }
.mdo-btn--pink:hover { background: var(--pink-dark); }
.mdo-btn--pink-flat { background: var(--pink); color: #fff; padding: 14px 30px; font-size: 15px; }
.mdo-btn--pink-flat:hover { background: var(--pink-dark); }
.mdo-btn--pink-xl { background: var(--pink); color: #fff; padding: 16px 32px; font-size: 15px; box-shadow: 0 12px 30px rgba(228,0,127,.36); }
.mdo-btn--pink-xl:hover { background: var(--pink-dark); }
.mdo-btn--ghost { color: var(--navy2); border: 1.5px solid var(--navy2); padding: 13px 26px; font-size: 14px; background: transparent; }
.mdo-btn--ghost:hover { background: var(--navy2); color: #fff; }
.mdo-btn--ghost-light { background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.7); color: #fff; padding: 16px 32px; font-size: 15px; backdrop-filter: blur(2px); }
.mdo-btn--ghost-light:hover { background: rgba(255,255,255,.26); }
.mdo-btn--navy { background: var(--navy2); color: #fff; padding: 13px 24px; font-size: 14px; }
.mdo-btn--navy:hover { background: var(--ink); }

.mdo-arrow { width: 15px; height: 15px; flex-shrink: 0; }
.mdo-arrow-ext { width: 15px; height: 15px; flex-shrink: 0; }

.mdo-morelink { text-decoration: none; color: var(--navy2); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 7px; border-bottom: 1.5px solid var(--pink); padding-bottom: 3px; }
.mdo-morelink:hover { opacity: 1; color: var(--pink); }

/* サムネイルグラデ（CMSサムネの代替。差し替え時は img に置換） */
.mdo-thumb--g1 { background: linear-gradient(140deg,#f5d3e6,#c7cdf5); }
.mdo-thumb--g2 { background: linear-gradient(140deg,#d4dbf7,#f6dbe9); }
.mdo-thumb--g3 { background: linear-gradient(140deg,#e7dcf7,#f8d8e4); }
.mdo-thumb--g4 { background: linear-gradient(140deg,#f2d7ea,#d5dcf7); }
.mdo-thumb--g5 { background: linear-gradient(140deg,#dfe4fb,#f6d6e6); }
.mdo-thumb--g6 { background: linear-gradient(140deg,#eadcf7,#f7d8e6); }

/* スクロール連動フェードイン */
.mdo-fade { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.mdo-fade.is-shown { opacity: 1; transform: none; }

/* ==========================================================================
   1. ヘッダー
   ========================================================================== */
.mdo-header { font-family: "Zen Old Mincho", serif; position: sticky; top: 0; z-index: 50; }

.mdo-topbar { background: var(--navy2); color: #fff; }
.mdo-topbar__inner { width: 96%; max-width: none; margin: 0 auto; padding: 7px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: "Zen Old Mincho", serif; font-size: 13px; letter-spacing: .02em; }
.mdo-topbar__info { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mdo-topbar__info > span { opacity: .92; }
.mdo-topbar__sep { opacity: .5; }
.mdo-topbar__contact { display: flex; align-items: center; gap: 14px; }
.mdo-topbar__tel { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; letter-spacing: .04em; }
.mdo-topbar__tel:hover { opacity: .85; }
.mdo-topbar__icon { display: inline-flex; align-items: center; color: #fff; }
.mdo-topbar__icon svg { width: 14px; height: 14px; display: block; }
.mdo-topbar__icon--sns { text-decoration: none; }
.mdo-topbar__icon--sns svg { width: 17px; height: 17px; }
.mdo-topbar__icon--sns:hover { opacity: .8; }

.mdo-headbar { background: #fff; border-bottom: 1px solid #eee7ea; }
.mdo-headbar__inner { width: 96%; max-width: none; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.mdo-logo { display: inline-flex; align-items: center; }
.mdo-logo img { height: 54px; width: auto; display: block; }
.mdo-logo:hover { opacity: 1; }
.mdo-gnav { display: flex; align-items: center; gap: 26px; }
.mdo-gnav__item { text-decoration: none; font-weight: 500; font-size: 14px; line-height: 1.2; color: var(--navy); transition: color .2s ease; }
.mdo-gnav__item:hover { opacity: 1; color: var(--pink); }
.mdo-gnav__item.is-current { color: var(--pink); }
.mdo-gnav__en { display: block; font-family: "Cormorant", serif; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); line-height: 1; margin-bottom: 3px; }
.mdo-gnav__cta { background: var(--pink); color: #fff; text-decoration: none; font-weight: 700; font-size: 13px; padding: 11px 18px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; letter-spacing: .03em; box-shadow: 0 6px 16px rgba(228,0,127,.22); transition: background .25s ease; }
.mdo-gnav__cta:hover { opacity: 1; background: var(--pink-dark); }
.mdo-gnav__cta-icon svg { width: 15px; height: 15px; display: block; }

/* -- TOPのみ：ヘッダーをMV写真の上に重ねる ------------------------------
   .mdo-topbar の濃紺面と .mdo-headbar の白面＋境界線を消し、fixed で写真に浮かせる。
   MV側に黒の乗算が入って全体が暗いので、文字・ロゴは白で抜く。上端は写真が明るい
   タイルだと乗算だけでは足りないため、ヘッダー自身にも上から薄い黒を足す。
   ロゴ logo.jpg は「濃紺文字＋白背景」の不透明JPGで白地が抜けず、fixed のヘッダーは
   独立した合成グループになるため mix-blend-mode でも抜けない。そこで白ロゴの透過PNG
   （logo-white.png）を別に用意して差し替える。
   MV を通り過ぎたら .is-stuck（common.js が付与）で従来の白バーに戻す。 */
.mdo-header--overlay { position: fixed; top: 0; left: 0; right: 0; transition: box-shadow .3s ease; }
.mdo-header--overlay::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: calc(100% + 56px); z-index: 0; pointer-events: none; transition: opacity .3s ease; background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.18) 60%, rgba(0,0,0,0) 100%); }
.mdo-header--overlay .mdo-topbar,
.mdo-header--overlay .mdo-headbar { position: relative; z-index: 1; background: transparent; border-bottom: none; }
/* 白バーが無くなるので、濃紺だったナビ文字を白抜きに。EN ラベルのピンクは暗所でも
   読めるのでそのまま残す */
.mdo-header--overlay .mdo-gnav__item { color: #fff; }
.mdo-header--overlay .mdo-gnav__item.is-current { color: var(--pink); }
.mdo-header--overlay .mdo-topbar__sep { opacity: .45; }
/* ロゴは白ロゴPNGへ差し替え（.is-stuck で元のカラーロゴへ戻す） */
.mdo-logo__white { display: none; }
.mdo-header--overlay .mdo-logo__color { display: none; }
.mdo-header--overlay .mdo-logo__white { display: block; }

/* MVを過ぎたら通常の白バーへ戻す */
.mdo-header--overlay.is-stuck { box-shadow: 0 2px 14px rgba(20,26,48,.08); }
.mdo-header--overlay.is-stuck::before { opacity: 0; }
.mdo-header--overlay.is-stuck .mdo-topbar { background: var(--navy2); }
.mdo-header--overlay.is-stuck .mdo-headbar { background: #fff; border-bottom: 1px solid #eee7ea; }
.mdo-header--overlay.is-stuck .mdo-gnav__item { color: var(--navy); }
.mdo-header--overlay.is-stuck .mdo-gnav__item.is-current { color: var(--pink); }
.mdo-header--overlay.is-stuck .mdo-logo__color { display: block; }
.mdo-header--overlay.is-stuck .mdo-logo__white { display: none; }


/* SPナビ下部ボタン */
.mdo-spnav__tel { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-size: 1.6rem; font-weight: 600; margin-bottom: 16px; }
.mdo-spnav__tel svg { width: 16px; height: 16px; }
.mdo-spnav__line { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--pink); color: #fff; text-decoration: none; font-weight: 700; padding: 12px 26px; border-radius: 999px; font-size: 1.5rem; }
.mdo-spnav__line svg { width: 16px; height: 16px; }
.mdo-spnav__line:hover { opacity: 1; background: var(--pink-dark); }

@media (max-width: 1100px) {
  .mdo-gnav { display: none; }
  /* 上部ユーティリティバーはPC専用。SPではハンバーガー内・フッターに集約 */
  .mdo-topbar { display: none; }
}

/* ==========================================================================
   2. メインビュー（MV）
   ========================================================================== */
.mdo-mv-wrap { background-size: cover; background-position: center; background-repeat: no-repeat; }
.mdo-mv-wrap.mdo-wash-78 { background-image: linear-gradient(rgba(255,255,255,.78), rgba(255,255,255,.78)), var(--bgimg); }
/* MVは全画面（フルブリード）。ヘッダーは fixed で写真の上に浮くようになったため
   高さを差し引かず、そのまま1画面（100svh）ぶんの高さを取る。 */
.mdo-mv { position: relative; overflow: visible; padding: 0; }
.mdo-mv__frame { position: relative; height: 100vh; height: 100svh; min-height: 480px; width: 100%; max-width: none; margin: 0; overflow: hidden; border-radius: 0; }
/* 写真は「2×2タイル＝1パターン」を2組重ね、common.js が is-active を移して
   クロスフェードする。JS無効時は HTML で is-active を持つパターン1が静止したまま残る。
   gap を白地で抜いて細い目地に見せる */
.mdo-mv__slides { position: absolute; inset: 0; }
.mdo-mv__grid { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; background: #fff; opacity: 0; transition: opacity 1.6s ease; }
.mdo-mv__grid.is-active { opacity: 1; }
/* 明るく清潔感のあるトーンにするため、写真そのものを少し持ち上げる */
.mdo-mv__cell { position: relative; filter: brightness(1.05) saturate(1.03); }
/* 写真の上に敷くのは黒の乗算ではなく、白のごく薄いベール。全体を明るく飛ばしつつ
   中央の白パネルとつなげる。ヘッダー白文字の可読性は
   .mdo-header--overlay::before の上部グラデーションが担保する。
   .mdo-mv__content(z-index:2) の下に敷く */
.mdo-mv__frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.20) 55%, rgba(255,255,255,.30) 100%); }
/* コピーは白の板に載せる。タイルの白い目地（十字）がキャッチを横切って読みづらく
   なるため、板で目地ごと隠す。板が明るいので文字は濃紺で置く */
.mdo-mv__content { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0 20px; }
.mdo-mv__panel { width: clamp(300px, 48vw, 720px); padding: clamp(28px, 3.4vw, 46px) clamp(24px, 3.4vw, 52px) clamp(30px, 3.6vw, 48px); background: rgba(255,255,255,.88); backdrop-filter: blur(10px) saturate(1.08); -webkit-backdrop-filter: blur(10px) saturate(1.08); box-shadow: 0 22px 60px rgba(27,42,74,.13); text-align: center; color: var(--navy); animation: mdoMvRise 1.1s cubic-bezier(.22,.61,.36,1) both; }
/* MVの主役は欧文の店名。サイズは抑えめにして字間を大きく開け、上品に見せる */
.mdo-mv__ttl { font-family: "Cormorant", "Zen Old Mincho", serif; font-size: clamp(24px, 3.1vw, 44px); font-weight: 400; line-height: 1.3; letter-spacing: .22em; text-indent: .22em; text-transform: uppercase; color: var(--navy); margin: 0 0 clamp(16px, 1.8vw, 22px); padding-bottom: clamp(14px, 1.6vw, 20px); border-bottom: 1px solid var(--line-pink); animation: mdoMvRise 1.1s cubic-bezier(.22,.61,.36,1) .3s both; }
.mdo-mv__lead { font-size: clamp(13px, 1.2vw, 17px); font-weight: 400; line-height: 2.15; letter-spacing: .1em; margin: 0; color: var(--body); animation: mdoMvRise 1.1s cubic-bezier(.22,.61,.36,1) .55s both; }
/* 帯の中身が下からふわっと浮き出るフェードイン（読み込み直後に1回だけ・控えめ） */
@keyframes mdoMvRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mdo-mv__panel, .mdo-mv__ttl, .mdo-mv__lead { animation: none; }
  .mdo-mv__grid { transition: none; }
}

/* ==========================================================================
   3. TOP：お知らせ
   ========================================================================== */
.mdo-news-sec { background: transparent; }
.mdo-news-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 34px; }
.mdo-news-head__ttl { font-size: 26px; font-weight: 500; margin: 2px 0 0; letter-spacing: .06em; }
.mdo-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mdo-news-card { text-decoration: none; color: inherit; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(27,42,74,.07); display: block; transition: transform .25s ease, box-shadow .25s ease; }
.mdo-news-card:hover { opacity: 1; transform: translateY(-5px); box-shadow: 0 18px 40px rgba(27,42,74,.13); }
/* サムネは縦3:4。A4チラシ（210:297）を載せても上下2.8%ずつしか切れず、
   店舗写真（mayucut.jpg 1086×1448 等＝3:4）は無トリミングで収まる。
   横長16:10だとA4が上下半分近く切れて「中途半端な写真」になっていた。 */
.mdo-news-card__thumb { aspect-ratio: 3 / 4; position: relative; background-color: var(--pink-pale); }
/* 画像未登録時の no-image.jpg だけは横長（368×230）なので、cover のままだと
   ロゴが左右に大きく切れる。contain で全体を見せ、余白は淡いピンク面で埋める。
   CMS側のテンプレートを触らずに済むよう、style属性の画像URLで判定している。 */
.mdo-news-card__thumb[style*="no-image"] { background-size: contain; background-color: var(--pink-pale); }
.mdo-news-card__cat { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.92); color: var(--pink); font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 999px; letter-spacing: .04em; }
.mdo-news-card__body { padding: 18px 20px 22px; }
.mdo-news-card__date { font-family: "Zen Old Mincho", serif; font-size: 13px; color: #9aa1bd; letter-spacing: .04em; }
.mdo-news-card__title { margin: 6px 0 0; font-size: 15.5px; font-weight: 500; line-height: 1.6; }
/* CMS埋め込み枠（inline spanのままだと内側gridが全幅にならないためblock化） */
#cms-blog-entry-list-1-area { display: block; }

/* ==========================================================================
   4. TOP：コンセプト／想い
   ========================================================================== */
.mdo-concept { background: #fff; position: relative; overflow: hidden; }
.mdo-concept__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.mdo-concept__text { position: relative; }
.mdo-concept__text > *:not(.mdo-concept__deco) { position: relative; z-index: 1; }
.mdo-concept__deco { position: absolute; left: -70px; top: -64px; width: 340px; height: auto; pointer-events: none; z-index: 0; opacity: .55; }
.mdo-concept__ttl { font-size: clamp(23px, 2.8vw, 31px); font-weight: 500; margin: 6px 0 24px; line-height: 1.5; letter-spacing: .06em; }
.mdo-concept__p { font-size: 15.5px; line-height: 2.1; color: var(--body); margin: 0 0 18px; }
.mdo-concept__p--last { margin: 0 0 30px; }
.mdo-concept__media { position: relative; margin-right: calc(-50vw + 600px - 24px + 2vw); }
.mdo-concept__imgs { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 16px; align-items: start; }
.mdo-concept__img { aspect-ratio: 3 / 4; border-radius: 22px; box-shadow: 0 20px 50px rgba(27,42,74,.14); }
.mdo-concept__img--offset { margin-top: 34px; }
.mdo-concept__script { position: absolute; left: -40px; bottom: -14px; margin: 0; font-family: "Lavishly Yours", cursive; font-size: clamp(40px, 4.6vw, 64px); line-height: .9; color: var(--pink); white-space: nowrap; text-shadow: 0 6px 22px rgba(228,0,127,.22); transform: rotate(-4deg); }

/* ==========================================================================
   5. TOP：3つの約束
   ========================================================================== */
.mdo-promise__head { text-align: center; margin-bottom: 40px; }
.mdo-promise__ttl { font-size: 26px; font-weight: 500; margin: 6px 0 12px; letter-spacing: .06em; }
.mdo-promise__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.mdo-promise__card { background: transparent; border-radius: 20px; padding: 36px 30px; text-align: center; }
.mdo-promise__icon { width: 66px; height: 66px; margin: 0 auto 18px; border-radius: 50%; background: var(--pink-pale2); display: flex; align-items: center; justify-content: center; color: var(--pink); }
.mdo-promise__icon svg { width: 30px; height: 30px; }
.mdo-promise__card h3 { font-size: 18px; font-weight: 700; margin: 0 0 10px; }
.mdo-promise__card p { font-size: 14px; line-height: 1.9; color: var(--muted2); margin: 0; }

/* ==========================================================================
   6. TOP：取扱ブランド（濃紺面）
   ========================================================================== */
.mdo-brandsec { background: var(--navy2); color: #fff; }
.mdo-brandsec__head { text-align: center; margin-bottom: 40px; }
.mdo-brandsec__ttl { font-size: 26px; font-weight: 500; margin: 2px 0 12px; letter-spacing: .06em; }
.mdo-brandsec__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mdo-brandsec__card { background: #fff; border-radius: 14px; height: 110px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: transform .2s ease; position: relative; }
.mdo-brandsec__card:hover { opacity: 1; transform: translateY(-4px); }
.mdo-brandsec__name { font-family: "Cormorant", serif; font-size: 22px; letter-spacing: .14em; color: var(--navy2); font-weight: 600; }
.mdo-brandsec__ext { position: absolute; top: 10px; right: 10px; width: 15px; height: 15px; color: #c9ccdd; }
/* TOP はアルビオン1枚のみ掲載するため、4連グリッドではなく中央の単独カードで見せる
   （.mdo-brandsec__grid は他ブランドを並べたい場合のために残している） */
.mdo-brandsec__main { display: flex; justify-content: center; }
.mdo-brandsec__card--main { height: auto; width: 100%; max-width: 420px; flex-direction: column; gap: 4px; padding: 34px 28px 30px; text-align: center; }
.mdo-brandsec__card--main .mdo-brandsec__name { font-size: 34px; line-height: 1.1; }
/* 中心ブランドはテキスト名ではなく提供されたロゴ画像を掲載する */
.mdo-brandsec__logo { display: block; width: 100%; max-width: 230px; margin: 2px 0 8px; }
.mdo-brandsec__logo img { display: block; width: 100%; height: auto; }
.mdo-brandsec__jp { font-size: 14px; color: var(--body); letter-spacing: .08em; }
.mdo-brandsec__cat { font-size: 12.5px; color: var(--muted); }
.mdo-brandsec__go { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--pink); }
.mdo-brandsec__go .mdo-arrow-ext { width: 14px; height: 14px; }
.mdo-brandsec__note { text-align: center; opacity: .6; font-size: 13px; margin: 24px 0 0; }
.mdo-brandsec__cta { text-align: center; margin-top: 30px; }

/* ==========================================================================
   7. TOP：メニュー
   ========================================================================== */
.mdo-menusec { background: #fff; }
.mdo-menusec__head { text-align: center; margin-bottom: 44px; }
.mdo-menusec__ttl { font-size: 26px; font-weight: 500; margin: 2px 0 0; letter-spacing: .06em; }
.mdo-menusec__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.mdo-menucard { text-decoration: none; color: inherit; border-radius: 20px; overflow: hidden; box-shadow: 0 12px 34px rgba(27,42,74,.09); display: block; transition: transform .25s ease; background: #fff; }
.mdo-menucard:hover { opacity: 1; transform: translateY(-6px); }
.mdo-menucard__img { aspect-ratio: 3 / 2; }
.mdo-menucard__body { padding: 24px 24px 26px; }
.mdo-menucard__en { font-family: "Cormorant", serif; font-size: 12px; letter-spacing: .14em; color: var(--pink); text-transform: uppercase; margin: 0 0 6px; }
.mdo-menucard__ttl { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.mdo-menucard__text { font-size: 13.5px; line-height: 1.85; color: var(--muted2); margin: 0; }

/* ==========================================================================
   8. TOP／共通：体験のおさそい（濃紺写真面）
   ========================================================================== */
.mdo-exp { position: relative; overflow: visible; }
.mdo-exp__overlay { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(100deg, rgba(20,26,48,.82) 0%, rgba(20,26,48,.6) 52%, rgba(27,29,122,.42) 100%); }
.mdo-exp__script { position: absolute; top: 0; right: 2%; margin: 0; transform: translateY(-46%); font-family: "Lavishly Yours", cursive; font-size: clamp(56px, 9vw, 132px); color: var(--pink-soft2); line-height: .8; white-space: nowrap; z-index: 3; pointer-events: none; text-shadow: 0 8px 30px rgba(20,26,48,.28); }
.mdo-exp__inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 104px 24px 108px; color: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.mdo-exp__ttl { font-size: 26px; font-weight: 500; line-height: 1.5; margin: 0; letter-spacing: .06em; text-shadow: 0 2px 18px rgba(20,26,48,.35); }
.mdo-exp__p { font-size: 15.5px; line-height: 2.1; margin: 0 0 16px; opacity: .95; text-shadow: 0 1px 10px rgba(20,26,48,.4); }
.mdo-exp__p--last { margin: 0 0 34px; }
.mdo-exp__btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* ==========================================================================
   9. TOP：店舗案内抜粋
   ========================================================================== */
.mdo-storesec__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.mdo-storesec__ttl { font-size: 26px; font-weight: 500; margin: 2px 0 24px; letter-spacing: .06em; }
.mdo-storesec__dl { margin: 0 0 28px; display: grid; grid-template-columns: auto 1fr; font-size: 15px; }
.mdo-storesec__dl dt { padding: 14px 0; border-bottom: 1px solid var(--line-pink); font-weight: 700; color: var(--navy2); width: 110px; }
.mdo-storesec__dl dd { padding: 14px 0; border-bottom: 1px solid var(--line-pink); margin: 0; color: var(--body); line-height: 1.7; }
.mdo-storesec__dl dt:nth-last-child(2), .mdo-storesec__dl dd:last-child { border-bottom: none; }
/* 営業時間の補足（※祝日・月末日曜日は19:00閉店）。値の下に一段小さく置く */
.mdo-storesec__note { display: block; font-size: 13px; color: var(--muted); }
.mdo-storesec__tel { font-family: "Zen Old Mincho", serif; font-size: 17px; }
.mdo-storesec__map { border-radius: 20px; overflow: hidden; box-shadow: 0 18px 44px rgba(27,42,74,.12); }
.mdo-storesec__map iframe { width: 100%; height: 340px; border: 0; display: block; }

/* ==========================================================================
   10. 下層ヒーロー（company / brand / esthe / light / makeup / news）
   ========================================================================== */
.mdo-phero { background: #fff; padding: 34px 0 8px; }
.mdo-phero__wrap { position: relative; width: 96%; max-width: none; margin: 0 auto; }
.mdo-phero__img { width: 100%; aspect-ratio: 24 / 8; min-height: 280px; border-radius: 10px; }
.mdo-phero__crumb { position: absolute; right: clamp(16px, 2.5vw, 32px); bottom: 14px; font-size: 12.5px; color: var(--navy); font-family: "Cormorant", "Zen Old Mincho", serif; letter-spacing: .03em; background: rgba(255,255,255,.9); padding: 6px 14px; border-radius: 999px; }
.mdo-phero__crumb a { color: var(--navy); text-decoration: none; }
.mdo-phero__card { position: relative; margin: -70px 0 0 clamp(14px, 4vw, 68px); max-width: min(90%, 600px); background: #fff; border-radius: 14px; padding: 26px clamp(24px, 3vw, 46px) 30px; }
.mdo-phero__ttl { font-size: clamp(22px, 2.8vw, 31px); font-weight: 500; margin: 4px 0 0; letter-spacing: .06em; }

/* ==========================================================================
   11. 店舗案内ページ
   ========================================================================== */
.mdo-cstore { background: #fff; position: relative; overflow: visible; }
.mdo-cstore__inner { position: relative; }
.mdo-cstore__deco { position: absolute; left: 50%; bottom: -160px; transform: translateX(-50%); width: min(72%, 620px); height: auto; pointer-events: none; z-index: 0; opacity: .75; }
/* 縦長写真（tenpo_gaikai.jpg）を収めるため 16/9 → 3/2。
   16/9 だと店名の日除けから足元までが入りきらず上下が切れる */
.mdo-cstore__img { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 3 / 2; }
/* 次セクション（.mdo-clead は z-index:1）のあしらいが上に重なるため、
   キャプションはそれより前面に出す */
.mdo-cstore__cap { position: relative; z-index: 3; text-align: center; font-size: 13px; color: var(--muted); margin: 14px 0 0; letter-spacing: .04em; }

.mdo-clead { background: transparent; position: relative; z-index: 1; }
.mdo-clead__inner { text-align: center; position: relative; }
/* あしらい（店舗外観写真の背面から移設）。文章の背面に中央配置する */
.mdo-clead__deco { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); width: min(72%, 620px); height: auto; pointer-events: none; z-index: 0; opacity: .75; }
.mdo-clead__inner > *:not(.mdo-clead__deco) { position: relative; z-index: 1; }
.mdo-clead__ttl { font-size: clamp(24px, 3vw, 32px); font-weight: 500; line-height: 1.7; margin: 0 0 22px; letter-spacing: .06em; }
.mdo-clead__p { font-size: 15.5px; line-height: 2.2; color: var(--body); margin: 0; }

.mdo-cbeliefs { background: #fff; }
.mdo-cbeliefs__grid { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; border-top: 1px solid #e6dfe4; border-bottom: 1px solid #e6dfe4; padding: 40px 0; }
.mdo-cbeliefs__grid::before { content: ""; position: absolute; left: 50%; top: 40px; bottom: 40px; width: 1px; background: #e6dfe4; transform: translateX(-.5px); }
.mdo-cbeliefs__grid::after { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #e6dfe4; transform: translateY(-.5px); }
.mdo-belief { position: relative; background: transparent; border-radius: 20px; padding: 36px 34px; }
.mdo-belief__no { font-family: "Zen Old Mincho", serif; font-size: 14px; letter-spacing: .16em; color: var(--pink); margin-bottom: 10px; }
.mdo-belief h3 { font-size: 19px; font-weight: 700; margin: 0 0 12px; line-height: 1.5; }
.mdo-belief p { font-size: 14.5px; line-height: 2; color: var(--muted2); margin: 0; }

.mdo-cinfo { background: var(--navy2); color: #fff; }
.mdo-cinfo__head { text-align: center; margin-bottom: 36px; }
.mdo-cinfo__ttl { font-size: 28px; font-weight: 500; margin: 2px 0 0; letter-spacing: .06em; }
.mdo-cinfo__dl { margin: 0; display: grid; grid-template-columns: 170px 1fr; background: rgba(255,255,255,.05); border-radius: 16px; overflow: hidden; }
.mdo-cinfo__dl dt { padding: 20px 26px; border-bottom: 1px solid rgba(255,255,255,.1); font-weight: 700; }
.mdo-cinfo__dl dd { padding: 20px 26px; border-bottom: 1px solid rgba(255,255,255,.1); margin: 0; }
.mdo-cinfo__dl dt:nth-last-child(2), .mdo-cinfo__dl dd:last-child { border-bottom: none; }
.mdo-cinfo__note { display: block; font-size: 13px; opacity: .72; margin-top: 4px; }
.mdo-cinfo__tel { font-family: "Zen Old Mincho", serif; font-size: 19px; }
.mdo-cinfo__sns { display: flex; gap: 14px; flex-wrap: wrap; }
.mdo-cinfo__sns a { color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 8px 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.mdo-cinfo__sns a:hover { opacity: 1; background: rgba(255,255,255,.12); }
.mdo-cinfo__sns svg { width: 16px; height: 16px; }

/* ==========================================================================
   12. 取扱ブランドページ
   ========================================================================== */
.mdo-brand-intro { background: #fff; text-align: center; }
.mdo-brand-intro p { font-size: 15.5px; line-height: 2.1; color: var(--body); margin: 0; }
.mdo-brand-cards { background: #fff; }
.mdo-brand-cards__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.mdo-brand-card { text-decoration: none; color: inherit; border: 1px solid #ece5ea; border-radius: 16px; padding: 30px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #fff; transition: border-color .25s ease, transform .25s ease; }
.mdo-brand-card:hover { opacity: 1; transform: translateY(-4px); border-color: var(--pink); }
/* ブランドロゴの枠。ロゴ提供のないブランドはテキスト名を同じ高さの枠に入れて、
   横並びカード同士で和文名・カテゴリの行位置を揃える */
.mdo-brand-card__logo { height: 64px; display: flex; align-items: center; }
/* ロゴは縦横比が 1:1（Elegance / HINOKI）〜10:1（UYEDA BISYODO）まで幅があり、共通の
   max-width / max-height で収めると横長ロゴだけ極端に大きく見える。ブランドごとに
   brand.php 側で --logo-w（SP時の表示幅px）を持たせ、見た目の面積を揃える。
   PC は既定で --logo-w の1.18倍。SPだけ個別調整したブランドは --logo-w-pc で
   PC側の幅を明示する（Elegance のみ） */
.mdo-brand-card__logo img { width: calc(var(--logo-w-pc, calc(var(--logo-w, 120) * 1.18)) * 1px); max-width: 100%; height: auto; }
/* ロゴ未提供のブランド（LisBlanc）をテキスト名で表示する枠。和文名が入った場合も
   欧文 Cormorant → 和文 Zen Old Mincho の順にフォールバックさせて字面を揃える */
.mdo-brand-card__name { font-family: "Cormorant", "Zen Old Mincho", serif; font-size: 28px; letter-spacing: .14em; font-weight: 600; color: var(--navy2); line-height: 1.1; }
.mdo-brand-card__jp { font-size: 15px; font-weight: 700; margin-top: 12px; }
.mdo-brand-card__note { font-size: 13px; color: #7c82a0; margin-top: 3px; }
.mdo-brand-card__link { color: var(--pink); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; }

.mdo-notebox { background: var(--pink-pale); border-radius: 20px; padding: 30px 34px; display: flex; gap: 16px; align-items: flex-start; }
.mdo-notebox svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; color: var(--pink); }
.mdo-notebox p { margin: 0; font-size: 14.5px; line-height: 2; color: var(--body); }

/* ==========================================================================
   13. メニュー系（esthe / light / makeup）
   ========================================================================== */
.mdo-two { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
/* 眉カットの店頭チラシ（縦長）を左、メニューを右に並べる列。
   チラシ側は固定幅にして、右のメニューに幅を渡す */
.mdo-two--mayu { grid-template-columns: 360px 1fr; gap: 46px; }
.mdo-two__media { aspect-ratio: 4 / 3; border-radius: 22px; box-shadow: 0 20px 50px rgba(27,42,74,.12); }
.mdo-two__media--noshadow { box-shadow: none; }
.mdo-two__text { position: relative; }
.mdo-two__text > *:not(.mdo-two__deco) { position: relative; z-index: 1; }
.mdo-two__deco { position: absolute; left: -64px; top: -70px; width: 360px; height: auto; pointer-events: none; z-index: 0; opacity: .6; }
.mdo-two__ttl { font-size: clamp(23px, 2.8vw, 30px); font-weight: 500; margin: 6px 0 20px; line-height: 1.5; letter-spacing: .06em; }
.mdo-two__ttl--tight { margin: 0 0 20px; }
.mdo-two__p { font-size: 15px; line-height: 2.1; color: var(--body); margin: 0 0 16px; }
.mdo-two__p--lg { font-size: 15.5px; margin: 0; }
.mdo-two__note { font-size: 13.5px; line-height: 1.9; color: var(--muted); margin: 0; }

.mdo-menu-head { text-align: center; margin-bottom: 36px; }

/* 料金リスト */
.mdo-pricelist { display: flex; flex-direction: column; }
.mdo-price { padding: 20px 4px; }
.mdo-price__top { display: flex; align-items: baseline; gap: 14px; }
.mdo-price__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
.mdo-price__name { font-size: 19px; font-weight: 700; margin: 0; flex-shrink: 0; }
.mdo-price__tag { background: var(--pink-pale2); color: var(--pink); font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.mdo-price__leader { flex: 1; border-bottom: 1.5px dotted #c9cede; transform: translateY(-4px); }
.mdo-price__right { text-align: right; flex-shrink: 0; }
.mdo-price__time { font-size: 12.5px; color: var(--muted); margin-right: 10px; }
.mdo-price__price { font-family: "Zen Old Mincho", serif; font-weight: 600; color: var(--navy2); line-height: 1.2; font-size: 17px; flex-shrink: 0; }
.mdo-price__price--lg { font-size: 26px; }
.mdo-price__body { font-size: 14px; line-height: 1.9; color: var(--muted2); margin: 8px 0 0; }
.mdo-price__pinknote { font-size: 12.5px; line-height: 1.7; color: var(--pink); margin: 8px 0 0; }
/* 単体バナー画像（眉カットの店頭チラシ）。縦長で文字が小さいため、
   クリック（タップ）で原寸画像を別タブに開いて読めるようにしている */
.mdo-bnr-single { text-align: center; }
.mdo-bnr-single a { display: inline-block; width: 100%; max-width: 520px; border-radius: 18px; overflow: hidden; box-shadow: 0 16px 40px rgba(27,42,74,.12); transition: transform .25s ease, box-shadow .25s ease; }
.mdo-bnr-single a:hover { opacity: 1; transform: translateY(-4px); box-shadow: 0 22px 50px rgba(27,42,74,.18); }
.mdo-bnr-single img { display: block; width: 100%; height: auto; }
.mdo-note { font-size: 13px; line-height: 1.9; color: var(--muted); margin: 26px 0 0; text-align: center; }
.mdo-note--tight { margin: 14px 0 0; }

/* 予約制バンド（個室エステ） */
.mdo-reserve { background: var(--pink-pale); border-radius: 22px; text-align: center; padding: 34px 28px 36px; }
.mdo-reserve__note { font-size: 17px; font-weight: 700; letter-spacing: .06em; color: var(--pink); margin: 10px 0 20px; }
.mdo-reserve__tel { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; background: var(--pink); color: #fff; border-radius: 999px; padding: 14px 30px; box-shadow: 0 12px 30px rgba(228,0,127,.30); transition: background .25s ease, box-shadow .25s ease; }
.mdo-reserve__tel:hover { background: var(--pink-dark); box-shadow: 0 14px 34px rgba(228,0,127,.38); }
.mdo-reserve__ico { display: inline-flex; }
.mdo-reserve__ico svg { width: 22px; height: 22px; }
.mdo-reserve__telbody { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.mdo-reserve__tellabel { font-size: 12px; font-weight: 600; letter-spacing: .04em; opacity: .92; }
.mdo-reserve__telnum { font-family: "Zen Old Mincho", serif; font-size: 22px; font-weight: 700; letter-spacing: .02em; }

/* 個室エステ コースグリッド */
.mdo-course-lead { text-align: center; font-size: 15px; line-height: 2; color: var(--body); margin: 0 0 38px; }
.mdo-course-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mdo-course { background: #fff; border: 1px solid var(--line-pink); border-radius: 12px; padding: 26px 28px; }
.mdo-course--wide { grid-column: 1 / -1; }
.mdo-course__concern { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--pink); background: var(--pink-pale2); padding: 5px 14px; border-radius: 999px; margin: 0 0 14px; }
.mdo-course__pack { font-size: 19px; font-weight: 700; color: var(--navy); letter-spacing: .02em; margin: 0 0 16px; }
.mdo-course__items { display: flex; flex-direction: column; gap: 12px; }
.mdo-course__item { display: flex; align-items: baseline; gap: 12px; }
.mdo-course__name { font-size: 15px; font-weight: 500; color: var(--body); flex-shrink: 0; }
.mdo-course__leader { flex: 1; border-bottom: 1.5px dotted #d7c4d1; transform: translateY(-4px); }
.mdo-course__price { font-family: "Zen Old Mincho", serif; font-weight: 700; font-size: 21px; color: var(--navy2); flex-shrink: 0; }
.mdo-course__price small { font-family: "Zen Old Mincho", serif; font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 5px; }
.mdo-course-close { max-width: 680px; margin: 40px auto 0; text-align: center; font-size: 15px; line-height: 2.15; color: var(--body); }
.mdo-course-notes { margin: 30px auto 0; text-align: center; }
.mdo-course-notes__time { font-size: 15px; font-weight: 700; color: var(--pink); margin: 0 0 6px; }
.mdo-course-notes__sub { font-size: 13px; color: var(--muted); line-height: 1.9; margin: 0; }

/* 施術の流れ */
/* --------------------------------------------------------------------------
   ltcard（期間限定メニュー／特典付きカード）
   ライトエステの期間限定コース用。価格・説明・豪華特典・条件の4ブロック構成。
   -------------------------------------------------------------------------- */
.mdo-ltcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
/* カードが1枚だけのときは中央に寄せる（2枚前提のグリッドで右半分が空くのを防ぐ） */
.mdo-ltcard:only-child { grid-column: 1 / -1; max-width: 488px; margin-left: auto; margin-right: auto; }
.mdo-ltcard { background: #fff; border: 2px solid var(--line-pink); border-radius: 18px; padding: 28px 28px 24px; box-shadow: 0 10px 26px rgba(27,42,74,.06); display: flex; flex-direction: column; }
.mdo-ltcard__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mdo-ltcard__name { font-size: 20px; font-weight: 700; color: var(--navy); margin: 0; line-height: 1.4; }
.mdo-ltcard__price { font-family: "Zen Old Mincho", serif; font-size: 30px; font-weight: 700; color: var(--navy2); line-height: 1.2; margin: 12px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mdo-ltcard__price small { font-family: "Zen Old Mincho", serif; font-size: 11px; font-weight: 500; color: var(--muted); }
.mdo-ltcard__time { font-family: "Zen Old Mincho", serif; font-size: 13px; font-weight: 700; color: var(--pink); background: var(--pink-pale2); padding: 4px 12px; border-radius: 999px; }
.mdo-ltcard__body { font-size: 13.5px; line-height: 1.85; color: var(--muted2); margin: 12px 0 0; }
.mdo-ltcard__rec { font-size: 12.5px; line-height: 1.8; color: var(--pink); font-weight: 700; margin: 4px 0 18px; }
/* margin-top:auto で特典ブロックをカード下端に揃える（2枚の高さが違っても下が揃う） */
.mdo-ltcard__gift { margin-top: auto; background: var(--pink-pale); border-radius: 12px; padding: 16px 18px; }
.mdo-ltcard__gift-ttl { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--pink); margin: 0 0 6px; }
.mdo-ltcard__gift-body { font-size: 14px; font-weight: 700; line-height: 1.7; color: var(--navy); margin: 0; }
.mdo-ltcard__gift-note { font-size: 12px; line-height: 1.7; color: var(--muted); margin: 6px 0 0; }

.mdo-flow-sec { background: var(--pink-pale); }
.mdo-flow__head { text-align: center; margin-bottom: 44px; }
.mdo-flow__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* ライトエステの流れは3ステップなので3列（4列だと1枠空く） */
.mdo-flow__grid--3 { grid-template-columns: repeat(3, 1fr); }
.mdo-flow__card { background: #fff; border-radius: 18px; padding: 30px 24px; box-shadow: 0 10px 26px rgba(27,42,74,.06); position: relative; }
.mdo-flow__step { font-family: "Zen Old Mincho", serif; font-size: 14px; letter-spacing: .14em; color: var(--pink); font-weight: 600; }
.mdo-flow__card h3 { font-size: 16.5px; font-weight: 700; margin: 10px 0 8px; }
.mdo-flow__card p { font-size: 13.5px; line-height: 1.85; color: var(--muted2); margin: 0; }

.mdo-center { text-align: center; }

/* ==========================================================================
   14. お知らせ一覧
   ========================================================================== */
.mdo-entrylist__grid-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; }
.mdo-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.mdo-chip { border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 999px; transition: all .2s ease; background: var(--pink-pale); color: var(--navy); text-decoration: none; display: inline-block; }
.mdo-chip:hover { opacity: 1; }
.mdo-chip.is-on { background: var(--pink); color: #fff; }
.mdo-cards2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.mdo-pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; }
.mdo-pager__num { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e6dce3; color: var(--navy); text-decoration: none; font-family: "Zen Old Mincho", serif; }
.mdo-pager__num:hover { opacity: 1; border-color: var(--pink); color: var(--pink); }
.mdo-pager__num.is-current { background: var(--pink); color: #fff; border-color: var(--pink); font-weight: 600; }
.mdo-pager__num svg { width: 16px; height: 16px; }
/* CMS出力の前/次ページ送り（.pages > .page_prev/.page_next > a）に .mdo-pager__num と同じピルデザインを適用 */
.mdo-pager .pages { display: flex; justify-content: center; align-items: center; gap: 8px; }
.mdo-pager .page_prev a, .mdo-pager .page_next a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid #e6dce3; color: var(--navy); text-decoration: none; font-family: "Zen Old Mincho", serif; white-space: nowrap; }
.mdo-pager .page_prev a:hover, .mdo-pager .page_next a:hover { opacity: 1; border-color: var(--pink); color: var(--pink); }
.mdo-pager .page_current { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--pink); background: var(--pink); color: #fff; font-weight: 600; font-family: "Zen Old Mincho", serif; }
/* TOPのお知らせエリアではページネーションを出さない（一覧ページ #cms-blog-entry-list-1-area では表示） */
#cms-top-news-area .mdo-pager { display: none; }
/* LINEアイコンを Font Awesome（.fab.fa-line）に統一。旧SVGのサイズをフォントサイズで再現 */
.fa-line { line-height: 1; }
.mdo-topbar__icon--sns .fa-line { font-size: 17px; }
.mdo-gnav__cta-icon .fa-line { font-size: 15px; }
.mdo-spnav__line .fa-line { font-size: 16px; }
.mdo-ico .fa-line { font-size: 17px; }
.mdo-footer__sns .fa-line { font-size: 18px; }
.mdo-cinfo__sns .fa-line { font-size: 16px; }
/* SPナビ：日本語（主）を左・英語（副）を右に入れ替え、右端のアイコン（::after）を削除 */
.sp-nav__link::after { content: none; }
.sp-nav__en { margin: 0; padding-left: 0; }

.mdo-side { display: flex; flex-direction: column; gap: 30px; }
.mdo-side__box { background: #fff; border: 1px solid #efe3ea; border-radius: 18px; padding: 26px 24px; }
.mdo-side__box--cat { background: var(--pink-pale); border: none; }
.mdo-side__ttl { font-family: "Cormorant", serif; font-size: 12px; letter-spacing: .16em; color: var(--pink); text-transform: uppercase; margin: 0 0 14px; }
.mdo-side__list { list-style: none; margin: 0; padding: 0; }
.mdo-side__catlink { display: flex; justify-content: space-between; padding: 11px 2px; text-decoration: none; color: var(--navy); font-size: 14px; border-bottom: 1px solid var(--line-pink); }
.mdo-side__catlink:hover { opacity: 1; color: var(--pink); }
.mdo-side__count { color: #a9adc5; font-family: "Zen Old Mincho", serif; }
.mdo-side__recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mdo-side__recent a { display: flex; gap: 12px; text-decoration: none; color: var(--navy); }
.mdo-side__recent a:hover { opacity: 1; color: var(--pink); }
.mdo-side__thumb { width: 56px; height: 56px; border-radius: 10px; flex-shrink: 0; }
.mdo-side__recent time { display: block; font-family: "Zen Old Mincho", serif; font-size: 12px; color: #9aa1bd; }
.mdo-side__recent-ttl { font-size: 13px; line-height: 1.5; display: block; margin-top: 2px; }
.mdo-side__arclink { display: block; padding: 10px 2px; text-decoration: none; color: var(--navy); font-size: 14px; font-family: "Zen Old Mincho", serif; border-bottom: 1px solid var(--line-pink); }
.mdo-side__arclink:hover { opacity: 1; color: var(--pink); }

/* ==========================================================================
   15. お知らせ詳細
   ========================================================================== */
.mdo-entry-crumb { background: #fff; }
.mdo-entry-crumb nav { font-size: 12.5px; color: var(--muted); font-family: "Cormorant", "Zen Old Mincho", serif; letter-spacing: .03em; }
.mdo-entry-crumb a { color: var(--muted); text-decoration: none; }
.mdo-entry__grid { max-width: 820px; margin: 0 auto; }
.mdo-entry__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.mdo-entry__cat { background: var(--pink-pale2); color: var(--pink); font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 999px; }
.mdo-entry__date { font-family: "Zen Old Mincho", serif; font-size: 14px; color: #9aa1bd; letter-spacing: .04em; }
.mdo-entry__ttl { font-size: clamp(24px, 3.2vw, 34px); font-weight: 500; line-height: 1.5; margin: 0 0 28px; letter-spacing: .06em; }
.mdo-entry__hero { aspect-ratio: 16 / 9; border-radius: 20px; box-shadow: 0 18px 44px rgba(27,42,74,.1); margin-bottom: 36px; }
.mdo-entry__body { font-size: 15.5px; line-height: 2.2; color: #3a4266; }
.mdo-entry__body p { margin: 0 0 24px; }
.mdo-entry__body p:last-child { margin: 0; }
.mdo-entry__h2 { font-size: 21px; font-weight: 700; color: var(--navy2); margin: 36px 0 14px; padding-left: 14px; border-left: 4px solid var(--pink); }
.mdo-entry__figure { border-radius: 16px; background: #f2d7ea; aspect-ratio: 16 / 9; margin: 0 0 24px; }
.mdo-entry__actions { display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
.mdo-entry__actions svg { width: 15px; height: 15px; }
/* 一覧へ戻るリンク（左）と予約バナー（右）を1行に並べる */
.mdo-entry__back { margin-top: 44px; padding-top: 26px; border-top: 1px solid #efe3ea; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.mdo-backlink { text-decoration: none; color: var(--navy2); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.mdo-backlink:hover { opacity: 1; color: var(--pink); }
.mdo-backlink svg { width: 16px; height: 16px; }
.mdo-resv-banner { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%); border-radius: 14px; padding: 12px 20px; transition: background .25s ease; }
.mdo-resv-banner:hover { opacity: 1; background: var(--pink-dark); }
.mdo-resv-banner__ico { width: 24px; height: 24px; flex-shrink: 0; opacity: .9; }
.mdo-resv-banner__txt { display: flex; flex-direction: column; line-height: 1.25; }
.mdo-resv-banner__en { font-family: "Cormorant", serif; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--pink-pale2); }
.mdo-resv-banner__ja { font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.mdo-resv-banner .mdo-arrow-ext { opacity: .85; }

/* ==========================================================================
   16. お問い合わせCTAバンド
   ========================================================================== */
.mdo-cta { background: #1b1d7a; color: #fff; }
.mdo-cta__inner { max-width: 1000px; margin: 0 auto; padding: 52px 24px; text-align: center; }
.mdo-cta__script { font-family: "Lavishly Yours", cursive; font-size: 30px; color: var(--pink-soft); margin: 0 0 6px; line-height: 1; }
.mdo-cta__title { font-size: 26px; font-weight: 500; margin: 0 0 10px; letter-spacing: .06em; }
.mdo-cta__lead { margin: 0 0 26px; opacity: .85; font-size: 15px; line-height: 1.9; }
.mdo-cta__note { font-size: 13px; opacity: .8; }
.mdo-cta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.mdo-cta__btn { text-decoration: none; font-weight: 700; border-radius: 999px; display: inline-flex; align-items: center; gap: 9px; }
.mdo-cta__btn--tel { background: #fff; color: var(--navy2); padding: 15px 26px; font-family: "Zen Old Mincho", serif; font-size: 16px; }
.mdo-cta__btn--line { background: var(--pink); color: #fff; padding: 15px 26px; }
.mdo-cta__btn--line:hover { opacity: 1; background: var(--pink-dark); }
.mdo-cta__btn--insta { border: 1.5px solid rgba(255,255,255,.6); color: #fff; font-weight: 600; padding: 15px 24px; }
.mdo-cta__btn--insta:hover { opacity: 1; background: rgba(255,255,255,.12); }
.mdo-cta__btn:hover { opacity: 1; }
.mdo-ico { display: inline-flex; align-items: center; }
.mdo-ico svg { width: 17px; height: 17px; display: block; }

/* ==========================================================================
   17. フッター
   ========================================================================== */
.mdo-footer { background: var(--ink); color: #cfd3e4; }
.mdo-footer__body { max-width: 1200px; margin: 0 auto; padding: 56px 24px 30px; display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; gap: 44px; }
.mdo-footer__brand-en { font-family: "Cormorant", serif; font-size: 15px; letter-spacing: .28em; color: var(--pink-soft); margin: 0 0 4px; }
.mdo-footer__brand-logo { font-family: "Cormorant", serif; font-size: 38px; font-weight: 600; color: #fff; line-height: 1; letter-spacing: .02em; margin: 0; }
.mdo-footer__heart { color: var(--pink); }
.mdo-footer__brand-note { margin: 14px 0 0; font-size: 13px; line-height: 2; opacity: .8; }
.mdo-footer__ttl { font-family: "Cormorant", serif; font-size: 12px; letter-spacing: .18em; color: var(--pink-soft); margin: 0 0 16px; text-transform: uppercase; }
/* 項目名を上に積まず左右2列（表組み）にして縦を詰める */
.mdo-footer__dl { margin: 0; font-size: 13.5px; line-height: 1.7;
  display: grid; grid-template-columns: 66px 1fr; column-gap: 12px; row-gap: 7px;
  align-items: baseline; }
.mdo-footer__dl dt { opacity: .6; }
.mdo-footer__dl dd { margin: 0; color: #fff; }
.mdo-footer__note { display: block; font-size: 12px; opacity: .7; }
.mdo-footer__tel { font-family: "Zen Old Mincho", serif; font-size: 15px; }
.mdo-footer__sns { display: flex; gap: 12px; margin-top: 18px; }
.mdo-footer__sns a { color: var(--ink); background: #fff; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.mdo-footer__sns a:hover { opacity: .85; }
.mdo-footer__sns svg { width: 18px; height: 18px; }
.mdo-footer__map { border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); }
.mdo-footer__map iframe { width: 100%; height: 220px; border: 0; display: block; }
.mdo-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); }
.mdo-footer__bottom-inner { max-width: 1200px; margin: 0 auto; padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12px; }
.mdo-footer__nav { display: flex; gap: 18px; flex-wrap: wrap; }
.mdo-footer__nav a { color: #cfd3e4; text-decoration: none; }
.mdo-footer__nav a:hover { opacity: .8; }
.mdo-footer__copy { opacity: .55; font-family: "Zen Old Mincho", serif; letter-spacing: .04em; }

/* ==========================================================================
   18. ページトップボタン
   ========================================================================== */
.mdo-pagetop { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; background: var(--navy2); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(27,42,74,.28); opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .3s ease, transform .3s ease, background .25s ease; }
.mdo-pagetop.is-visible { opacity: 1; visibility: visible; transform: none; }
.mdo-pagetop:hover { background: var(--pink); }
.mdo-pagetop svg { width: 20px; height: 20px; }

/* ==========================================================================
   19. レスポンシブ
   ========================================================================== */
@media (max-width: 1024px) {
  .mdo-concept__grid,
  .mdo-storesec__grid,
  .mdo-exp__inner,
  .mdo-two { grid-template-columns: 1fr; gap: 40px; }
  /* .mdo-two より詳細度が高いので、縦積みへの切り替えを個別に打ち消す */
  .mdo-two--mayu { grid-template-columns: 1fr; gap: 36px; }
  .mdo-concept__media { margin-right: 0; }
  .mdo-two__deco, .mdo-concept__deco { display: none; }
  .mdo-entrylist__grid-wrap { grid-template-columns: 1fr; gap: 40px; }
  .mdo-exp__inner { padding: 72px 24px 76px; }
  /* 長いブランド名（UYEDA BISYODO 等）が「公式サイトへ」と
     横並びのままだと折り返すため、この幅から縦積みに切り替える。
     縦積み時はロゴ幅がブランドごとに違い左揃えだと視線が揃わないため中央揃えにする */
  .mdo-brand-card { flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 26px 24px; }
  /* ロゴ枠は和文名・カテゴリと同じ幅に広がるため、中に入るロゴ画像／テキスト名も中央へ。
     高さは一番縦長の Elegance（62×58）が収まる値 */
  .mdo-brand-card__logo { height: 60px; justify-content: center; }
  /* SP は brand.php の --logo-w をそのまま使う */
  .mdo-brand-card__logo img { width: calc(var(--logo-w, 120) * 1px); }
  .mdo-brand-card__name { font-size: 24px; letter-spacing: .08em; }
  /* 3列のままだと Information 列が約231pxで住所・営業時間が折り返すため2列に */
  .mdo-footer__body { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .mdo-news-grid,
  .mdo-menusec__grid { grid-template-columns: repeat(2, 1fr); }
  .mdo-brandsec__grid,
  .mdo-flow__grid { grid-template-columns: repeat(2, 1fr); }
  /* 3ステップは2列だと1枚だけ次の行に残るので、640pxまで3列を維持 */
  .mdo-flow__grid--3 { grid-template-columns: repeat(3, 1fr); }
  .mdo-footer__body { grid-template-columns: 1fr 1fr; }
  .mdo-cinfo__dl { grid-template-columns: 120px 1fr; }
  /* 2列だとカード内が約258pxしかなく説明文が語の途中で折り返すため1列に */
  .mdo-ltcards { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .mdo-container { padding-left: 18px; padding-right: 18px; }
  .mdo-news-grid,
  .mdo-menusec__grid,
  .mdo-promise__grid,
  .mdo-brandsec__grid,
  .mdo-flow__grid,
  .mdo-brand-cards__grid,
  .mdo-cbeliefs__grid,
  .mdo-course-grid,
  .mdo-ltcards,
  .mdo-cards2 { grid-template-columns: 1fr; }
  /* 説明文が SP 幅で語の途中で折り返さないよう、内側を広げ本文を少し縮める */
  .mdo-ltcard { padding: 24px 18px 22px; }
  .mdo-ltcard__gift { padding: 14px 14px; }
  .mdo-ltcard__body { font-size: 13px; }
  .mdo-cbeliefs__grid::before,
  .mdo-cbeliefs__grid::after { display: none; }
  .mdo-footer__body { grid-template-columns: 1fr; gap: 32px; }
  .mdo-cinfo__dl { grid-template-columns: 1fr; }
  .mdo-cinfo__dl dt { padding-bottom: 4px; border-bottom: none; }
  .mdo-cinfo__dl dd { padding-top: 4px; }
  /* SPはロゴを縮めてヘッダーを浅くする */
  .mdo-logo img { height: 38px; }
  /* 高さは全画面（100svh）のまま。低い端末だけ下限を効かせる */
  .mdo-mv__frame { min-height: 420px; }
  /* SPはタイルが小さくなるため目地を細くし、黒板は画面幅いっぱい近くまで広げる */
  .mdo-mv__grid { gap: 2px; }
  .mdo-mv__content { padding: 0 16px; }
  .mdo-mv__panel { width: 100%; max-width: 420px; padding: 26px 20px 28px; }
  .mdo-mv__ttl { letter-spacing: .16em; text-indent: .16em; }
  .mdo-mv__lead { line-height: 2; letter-spacing: .06em; }
  /* 大きな縦paddingをモバイルで圧縮 */
  .mdo-pt-72,.mdo-pt-74,.mdo-pt-76,.mdo-pt-78,.mdo-pt-82,.mdo-pt-88,.mdo-pt-96,.mdo-pt-104 { padding-top: 54px; }
  .mdo-pb-76,.mdo-pb-78,.mdo-pb-82,.mdo-pb-84,.mdo-pb-88,.mdo-pb-96,.mdo-pb-108 { padding-bottom: 54px; }
  .mdo-exp__inner { padding: 56px 20px 60px; }
  .mdo-phero__card { margin-left: 0; max-width: 92%; }
  /* 見出し列を詰めて、住所・定休日が SP 幅でも1行に収まるようにする */
  .mdo-storesec__dl dt { width: 84px; }
  /* SP は文章が縦に伸びるため、あしらいを広げて背面の面として見せる */
  .mdo-clead__deco { width: 108%; top: 36%; }

  /* 改行制御の切り替え */
  .mdo-br-pc { display: none; }
  .mdo-br-sp { display: inline; }

  /* 価格行：flex-shrink:0 の「名称」と「時間＋価格」が SP 幅で1行に収まらず
     横スクロールが発生していたため、価格側を下段に折り返す */
  .mdo-price { padding: 16px 2px; }
  .mdo-price__top { flex-wrap: wrap; row-gap: 4px; }
  .mdo-price__head { flex-shrink: 1; }
  .mdo-price__name { font-size: 17px; }
  .mdo-price__leader { min-width: 24px; }
  .mdo-price__right { width: 100%; }
  .mdo-price__price--lg { font-size: 23px; }

  .mdo-course { padding: 22px 20px; }
  .mdo-course__item { flex-wrap: wrap; row-gap: 2px; }
  .mdo-course__name { flex-shrink: 1; }
  .mdo-course__leader { min-width: 24px; }
  .mdo-course__price { width: 100%; text-align: right; font-size: 19px; }

  /* 26/28px の和文見出しは SP 幅で1行に収まらず、1〜2文字だけ溢れて
     行長がバラつくため縮小する */
  .mdo-sec-ttl { font-size: 21px; }
  .mdo-sec-ttl--28 { font-size: 22px; }
  .mdo-promise__ttl,
  .mdo-brandsec__ttl,
  .mdo-menusec__ttl,
  .mdo-storesec__ttl,
  .mdo-news-head__ttl,
  .mdo-cta__title { font-size: 21px; }
  .mdo-cinfo__ttl { font-size: 22px; }
  .mdo-exp__ttl { font-size: 22px; }

  /* 折り返しが発生する場合も行長を均す（対応ブラウザのみ） */
  .mdo-sec-ttl,
  .mdo-mv__ttl,
  .mdo-concept__ttl, .mdo-two__ttl, .mdo-clead__ttl, .mdo-exp__ttl,
  .mdo-promise__ttl, .mdo-brandsec__ttl, .mdo-menusec__ttl,
  .mdo-storesec__ttl, .mdo-news-head__ttl, .mdo-phero__ttl,
  .mdo-cinfo__ttl, .mdo-cta__title, .mdo-entry__ttl { text-wrap: balance; }

  /* 戻るリンクと予約バナーは SP 幅で横並びに収まらないため縦積みにし、
     バナーは全幅のタップ領域にする */
  .mdo-entry__back { flex-direction: column; align-items: stretch; gap: 20px; }
  .mdo-resv-banner { justify-content: center; padding: 14px 18px; }
}