@charset "UTF-8";
/**
 * comingout.css — /comingout（カミングアウトムービー制作サービス）
 *
 * 一次資料: 設計ツリー specs/pageviews/1697691a-da6d-41f6-80c4-aa6498698be5.json
 * 値はすべて設計ツリーの style から逐語。丸めや「だいたい同じ」で置き換えない。
 * 設計ツリーに書いていない余白・線・装飾は足していない。
 *
 * ブレークポイント（specs/design_tokens.json の breakPoints・全ページ共通）:
 *   ベース幅 1280px / small ~1140px / tablet ~840px / mobile ~540px / mini ~320px
 *
 * クラス接頭辞は cm-（ComingoutMovie）。
 *   ch-=characters / cp-=campain / co-=company / fr-=front / rb-=reblue が既に使われているため。
 *
 * ★フォントについて
 *   このページで実装対象になるテキストは全ノードが --s-font-f88553ee。
 *   Noto Serif JP（--s-font-dbab4593）を使うノードは4つあるが、いずれも
 *   全5断面 display:none の非表示ブロック内（ヒーローの見出し／「詳しく見る」×3）で、
 *   CEO決定 2026-09-13 により実装対象外。よってこのファイルに dbab4593 は出てこない。
 *
 * ★設計ツリーに無いのに書いた指定は3つだけ。いずれも理由を各所に明記した。
 *   1) .cm-header の z-index（固定ヘッダーが帯画像の下に潜るのを防ぐ）
 *   2) .cm-interview__panel / .cm-interview__frame の position:relative ＋ z-index:0
 *      （absolute 配置の子の基準を作る／負の z-index の飾りを背景より前に出す）
 *   3) hover の transition-duration が設計ツリーに無い箇所への 0.2s 指定と
 *      prefers-reduced-motion のガード
 *
 * ★2026-09-15 コントラスト調整（CEO決定「直してOK」）
 *   このページの Stories 緑 #13ae67（設計ツリーでは --s-color-9eaeaf39 /
 *   --s-color-ee81bfd8 / --s-color-7bb7321f の3別名・すべて同値）は、
 *   文字色・LINEボタン地色として WCAG AA を下回っていた。
 *   根拠（tools/audit_page.py lowContrast・2026-09-15 実測）:
 *     .cm-flow__num   #13ae67 / #fbf3e9 = 2.62（36px・要 3）… 12件
 *     .cm-policy__t1  #13ae67 / #fbf8f5 = 2.73（20px700・要 3）… 4件
 *     .cm-line__icon  #13ae67 / 白      = 2.89（24px・要 3）
 *     .cm-line__label 白 / #13ae67      = 2.89（要 4.5 / 36px版は要 3）
 *     .cm-header__line-label #f9fafb / #13ae67 = 2.76（16px・要 4.5）
 *   → 色相そのままに 24% 暗くした派生 var(--o-c-brand-green-d) #0e844e へ、
 *     **このファイル内の3別名の全宣言** を差し替えた（3.83〜4.74 で全て基準以上）。
 *     罫線・下線・装飾バーも同時に差し替えている。文字だけ暗くすると
 *     同じ見出しの下線が明るい緑のまま残り、2種類の緑が並んで色ミスに見えるため。
 *     tokens.css の元トークンは不変。コメント中の別名表記は一次資料の記録として残す。
 */

/* ============================================================
 * 1. ページ土台
 *    設計ツリー: Base background:var(--s-color-2c90be8a) / width:100% / padding:0 / margin:0
 * ============================================================ */

/*
 * ★2026-09-14 追加: 設計ツリーには無いが base.css の指示に従う上書き。
 *   base.css は html に scroll-padding-top:var(--o-header-h) を置き、--o-header-h を
 *   @tablet（~840px）以下で 60px に落としている。
 *   「80px 固定のヘッダー（S-02 等）は各コンポーネント側で --o-header-h を上書きすること」
 *   （base.css §1 のコメント）とあるとおり、このページの .cm-header は全幅で 80px 固定なので
 *   ここで 80px に戻す。
 *   無いと 375px / 768px でアンカー着地が top=60px になり、セクションの上端 20px が
 *   固定ヘッダーの下に潜っていた（実測：#concept/#interview/#flow/#cost/#message すべて top=60・
 *   ヘッダー高 80）。1440px は 80px で正しかったため、幅による着地位置のズレも解消する。
 *   ※現行サイトは scroll-padding が auto（=0）で全幅とも top=0 とさらに深く潜る。
 *   このページの CSS でしか使っていない変数なので、影響範囲は /comingout のみ。
 */
:root {
	--o-header-h: 80px;
}

.cm-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	font-family: var(--s-font-f88553ee);
	background: var(--s-color-2c90be8a);
}

/* ============================================================
 * 2. ページ内ヘッダー（共有シンボルではない・設計ツリー Box fd77e93d）
 *    position:fixed / height:80px / padding:0px 30px 0px / background:rgba(0,0,0,0.0)
 * ============================================================ */

.cm-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: space-between;
	width: 100%;
	height: 80px;
	margin: 0;
	padding: 0 30px;
	font-family: var(--s-font-f88553ee);
	background: rgba(0, 0, 0, 0);
	/*
	 * ★設計ツリーに z-index は無い。
	 *   ただしこのページには position:absolute の飾り（#interview の斜め帯）と
	 *   帯見出しがあり、指定なしだとスクロール時にヘッダーが潜る可能性がある。
	 *   base.css の共通トークンと同じ値を使って前面に固定する。
	 */
	z-index: var(--o-header-z);
}

/* 設計ツリー: <group> 3189128f align-items:center / justify-content:center / padding:0 */
.cm-header__logo-link {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	padding: 0;
}

/* 設計ツリー: Image 9d82c93e width:200px / height:auto / margin:10px 0 0 0 */
.cm-header__logo {
	display: block;
	flex: none;
	width: 200px;
	height: auto;
	margin: 10px 0 0;
}

/* 設計ツリー: Box 18bdee83 flex row / flex-wrap:wrap / height:100% / width:auto */
.cm-header__right {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: auto;
	height: 100%;
	background: rgba(0, 0, 0, 0);
}

/* 設計ツリー: Box 83aa5950 flex row / justify-content:flex-start / width:auto / height:auto */
.cm-header__nav {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	width: auto;
	height: auto;
	background: rgba(0, 0, 0, 0);
}

.cm-header__list {
	display: flex;
	flex-direction: row;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-header__item {
	display: flex;
}

/* 設計ツリー: <group> flex column / 中央寄せ / margin:0px 5px 0px 5px / padding:0px */
.cm-header__link {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	margin: 0 5px;
	padding: 0;
	text-decoration: none;
}

/*
 * 15px / 600 / line-height 1.4 / padding 10px 5px 3px 5px（設計ツリー実値）。
 * height:34px は STUDIO の実測値（padding13px＋15×1.4＝34px）なので書かない。
 */
.cm-header__label {
	flex: none;
	width: auto;
	padding: 10px 5px 3px;
	color: #082b34;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}

/*
 * 下線。設計ツリー: height:3px / width:100% / background var(--s-color-9eaeaf39) /
 * scale:0 1 / transform-origin:center left / :hover で scale:1 1 / transition-duration:200ms
 */
.cm-header__underline {
	display: block;
	flex: none;
	width: 100%;
	height: 3px;
	background: var(--o-c-brand-green-d);
	scale: 0 1;
	transform-origin: center left;
	transition: scale 200ms;
}

.cm-header__link:hover .cm-header__underline,
.cm-header__link:focus-visible .cm-header__underline {
	scale: 1 1;
}

/* 設計ツリー: Box b5e7be4f。border-radius:8px / padding:15px 30px 15px / margin-left:20px */
.cm-header__line {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: auto;
	height: auto;
	margin: 0 0 0 20px;
	padding: 15px 30px;
	text-decoration: none;
	background: var(--o-c-brand-green-d);
	border: 1px solid #ffffff;
	border-radius: 8px;
	box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.1);
	transition: box-shadow 300ms, scale 300ms;
}

.cm-header__line:hover,
.cm-header__line:focus-visible {
	scale: 1.05 1.05;
	box-shadow: 1px 3px 20px rgba(0, 0, 0, 0.1);
}

/* 16px / 700 / #f9fafb（設計ツリー実値） */
.cm-header__line-label {
	width: auto;
	margin: 0;
	color: #f9fafb;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

/* ============================================================
 * 3. #concept
 *    設計ツリー: Concept 5048fbb3 margin:80px 0 0 0 / padding:0px 92px 20px 92px
 *    margin-top:80px は固定ヘッダー分のオフセットを兼ねている
 * ============================================================ */

.cm-concept {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 100%;
	height: auto;
	margin: 80px 0 0;
	padding: 0 92px 20px;
	background: transparent;
}

/* 設計ツリー: <group> 5c06382d width:70% / gap:20px / margin:79px 0 0 0 / padding:0 */
.cm-concept__inner {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	gap: 20px;
	width: 70%;
	margin: 79px 0 0;
	padding: 0;
}

/* 20px / 700 / letter-spacing .3em / line-height 1.7（設計ツリー実値） */
.cm-concept__eyebrow {
	width: auto;
	margin: 0;
	color: #082b34ff;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 0.3em;
	text-align: center;
}

/* 設計ツリー: Image 47ea47e4 width:412px / height:auto */
.cm-concept__logo {
	display: block;
	flex: none;
	width: 412px;
	max-width: 100%;
	height: auto;
}

/* 40px / 700 / letter-spacing .3em / line-height 1.7（設計ツリー実値） */
.cm-concept__head {
	width: auto;
	margin: 0;
	color: #082b34ff;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 0.3em;
	text-align: center;
}

/* 20px / 400 / letter-spacing .3em / line-height 2 / width:100% / padding:0（設計ツリー実値） */
.cm-concept__body {
	flex: none;
	width: 100%;
	margin: 0;
	padding: 0;
	color: #082b34;
	font-size: 20px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 2;
	letter-spacing: 0.3em;
	text-align: center;
}

/* ============================================================
 * 4. #interview
 *    設計ツリー: Movie 5053e1fc padding:108px 0px 100px 0px / gap:20px /
 *                align-items:flex-start / justify-content:center
 * ============================================================ */

.cm-interview {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: center;
	gap: 20px;
	width: 100%;
	height: auto;
	padding: 108px 0 100px;
	overflow: visible;
	background: transparent;
}

/*
 * 斜め帯パネル。設計ツリー: <group> 07fbf6e9 margin:-70px 0 0 0 / padding:80px 0px 50px 0px / gap:20px
 *
 * ★position:relative と z-index:0 は設計ツリーに無い追加。
 *   - relative … 子の斜め帯（position:absolute / 100%×100%）の基準になる要素が
 *     設計ツリー上どこにも無く、static のままだと帯がページ全面に広がってしまうため。
 *   - z-index:0 … 帯は z-index:-2。ここで積み重ねコンテキストを作らないと、
 *     負のz-indexの帯が .cm-main の不透明な背景の下に隠れて見えなくなるため。
 *   なお設計ツリーの z-index:-1 は position 指定の無い要素に付いた死にスタイルなので写さない。
 */
.cm-interview__panel {
	position: relative;
	z-index: 0;
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	gap: 20px;
	width: 100%;
	height: auto;
	margin: -70px 0 0;
	padding: 80px 0 50px;
	background: transparent;
}

/* 設計ツリー: Box 42988d12 background:#fdf2e5ff / transform:skew(0deg,-5deg) / z-index:-2 */
.cm-interview__band {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	background: #fdf2e5ff;
	transform: skew(0deg, -5deg);
}

/* 20px / 400 / line-height 1.4 / #14314a（設計ツリー実値） */
.cm-interview__head {
	width: auto;
	margin: 0;
	color: #14314a;
	font-size: 20px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.4;
	text-align: left;
	/*
	 * ★2026-09-14 追加: 375px で「…インタビュ／ー（いちさん）」と長音「ー」が行頭に来ていた
	 *   （現行も同じ折れ方）。JIS の行頭禁則を有効にして「ー」「ュ」を行頭に置かないようにする。
	 *   値は増やさず折り返し規則だけ変える最小変更。430px 以上の折り返し位置は変わらない。
	 */
	line-break: strict;
}

/* 設計ツリー: <group> ffc02633 flex row / gap:50px / width:960px */
.cm-interview__row {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	gap: 50px;
	width: 960px;
	max-width: 100%;
	padding: 0;
}

/* 16px / 600 / letter-spacing .15em / line-height 1.6 / width:50% / padding:20px 0（設計ツリー実値） */
.cm-interview__text {
	flex: none;
	width: 50%;
	/*
	 * ★2026-09-14 追加: max-width は設計ツリーに無いが、現行の描画では STUDIO が
	 *   gap 付き flex row の子に max-width:calc(50% - 25px)（gap:50px の半分）を自動付与している。
	 *   無いと 50%＋50%＋gap50px で行が親（960px）から 50px はみ出し、
	 *   1440px で本文 x=215 / 動画 480px（現行 x=240 / 455px）、768px で本文 x=5（現行 20）になっていた。
	 *   #interview の高さも +14px（1440）/ +9px（768）ずれていた。現行実測値に合わせる。
	 */
	max-width: calc(50% - 25px);
	margin: 0;
	padding: 20px 0;
	color: #14314a;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.15em;
	text-align: left;
}

/* 設計ツリー: <group> 8383250d width:50% / border-radius:4px / overflow:hidden / gap:20px */
.cm-interview__media {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: center;
	gap: 20px;
	width: 50%;
	max-width: calc(50% - 25px); /* 現行実測 maxWidth:calc(50% - 25px)。理由は .cm-interview__text 参照（2026-09-14） */
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: 4px;
}

/*
 * 設計ツリー: <group> e745ac12 width:100% / overflow:hidden / border-radius:0 /
 *             box-shadow:3px 3px 5px rgba(0,0,0,0.2)
 * ★position:relative / z-index:0 は .cm-interview__panel と同じ理由の追加。
 *   中の iframe が position:absolute、透明PNGが z-index:-2 のため基準が要る。
 */
.cm-interview__frame {
	position: relative;
	z-index: 0;
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: center;
	gap: 20px;
	width: 100%;
	padding: 0;
	overflow: hidden;
	border-radius: 0;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
}

/* 設計ツリー: Iframe 239a3fe1 position:absolute / top:0 left:0 / 100%×100% */
.cm-interview__embed {
	position: absolute;
	top: 0;
	left: 0;
	flex: none;
	width: 100%;
	height: 100%;
	margin: 0;
}

/* 埋め込み本体（Vimeo の padding-top:56.25% のラッパ）を枠いっぱいに */
.cm-interview__embed > div {
	height: 100%;
}

/* 設計ツリー: Image dcacc7d8 width:100% / height:auto / z-index:-2。高さを作る透明PNG */
.cm-interview__spacer {
	display: block;
	z-index: -2;
	flex: none;
	width: 100%;
	height: auto;
}

/* ============================================================
 * 5. #policy（サービスの強み）
 *    設計ツリー: Section c205b112 width:960px / padding:50px 0 / gap:30px / overflow:hidden
 * ============================================================ */

.cm-policy {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	gap: 30px;
	width: 960px;
	max-width: 100%;
	height: auto;
	padding: 50px 0;
	overflow: hidden;
	background: transparent;
	box-shadow: none;
}

/* 20px / 400 / line-height 1.4 / #14314a（設計ツリー実値） */
.cm-policy__head {
	width: auto;
	margin: 0;
	color: #14314a;
	font-size: 20px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.4;
	text-align: left;
}

/* 設計ツリー: <group> 5ef56510 flex row / gap:30px / width:100% */
.cm-policy__row {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: center;
	gap: 30px;
	width: 100%;
	padding: 0;
}

/* 設計ツリー: Box 8e210bff width:85% / gap:20px */
.cm-policy__col {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	gap: 20px;
	width: 85%;
	height: auto;
	background: transparent;
}

/* 設計ツリー: <group> bbd4a6dd margin:0 0 0 10px / padding:10px 0 0 0 / border-radius:16px */
.cm-policy__wrap {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	width: 100%;
	/*
	 * ★2026-09-14 追加: 設計ツリーに無いが、STUDIO は margin 付きの width:100% 子に
	 *   max-width:calc(100% - 10px)（margin-left 分）を自動付与している。
	 *   現行実測: 内枠 = 列（Box 8e210bff）− 10px（541px: 445 / 768px: 638 / 1440px: 802）。
	 *   無いと 100%＋margin 10px で列から左右 5px ずつはみ出していた（541px: 列 41〜501 に対し内枠 46〜506）。
	 */
	max-width: calc(100% - 10px);
	margin: 0 0 0 10px;
	padding: 10px 0 0;
	background: transparent;
	border-radius: 16px;
	box-shadow: none;
}

/* 設計ツリー: List b865adc5 flex row / flex-wrap:nowrap / width:100% / padding:0px 0px */
.cm-policy__list {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * 設計ツリー: Box 5fed416e width:33.3% / margin:10px / padding:30px 20px /
 *   background:#f9dcc933 / backdrop-filter:blur(6px) / border:0 solid #ffffffff /
 *   border-radius:12px / gap:10px / :hover{ scale:1.1 1.1 }
 *
 * ★2026-09-14 訂正: 旧コメント「33.3%×3＋margin 60px でコンテナから約59px はみ出すが設計ツリーどおり」は誤り。
 *   STUDIO は margin 付き幅指定の子に max-width:calc(33.3% - 20px)（margin 左右 20px 分）を
 *   自動付与しており、現行はカード3枚がリスト内に収まる。
 *   現行実測: 1440px カード幅 247px・x=334/601/868（ローカル旧 272px・x=327/619/910 でリストから 49px はみ出し）／
 *   768px 193px・x=80/292/505（旧 217px・x=73/310/547、右端が画面端 4px まで迫る）／
 *   541px 128px（旧 153px、3枚目が Section の overflow:hidden で 14px 切れていた）。
 *   @mobile（縦積み・width:100%）は現行 max-width:calc(100% - 20px)。
 *
 * ★:hover に transition-duration が設計ツリーに無い。
 *   指定なしだと瞬間移動になるため characters.css と同じ 0.2s を当てた（追加指定）。
 */
.cm-policy__card {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	gap: 10px;
	width: 33.3%;
	max-width: calc(33.3% - 20px); /* 現行実測（STUDIO 自動付与・margin 左右分）。理由は上のコメント参照（2026-09-14） */
	height: auto;
	margin: 10px;
	padding: 30px 20px;
	background: #f9dcc933;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 0 solid #ffffffff;
	border-radius: 12px;
	box-shadow: none;
	transition: scale 0.2s ease;
}

.cm-policy__card:hover,
.cm-policy__card:focus-within {
	scale: 1.1 1.1;
}

/*
 * 設計ツリー: Image 53cb757a width:100px / height:120px（content.type:"image" ＝ cover 配置）
 * in:hover { rotate:-20deg / transition-duration:600ms }
 */
.cm-policy__icon {
	display: block;
	flex: none;
	width: 100px;
	height: 120px;
	object-fit: cover;
	transition: rotate 600ms;
}

.cm-policy__card:hover .cm-policy__icon,
.cm-policy__card:focus-within .cm-policy__icon {
	rotate: -20deg;
}

/* 設計ツリー: Box 9c2b8ec1 height:1px / width:80% / background var(--s-color-9eaeaf39) */
.cm-policy__rule {
	display: block;
	flex: none;
	width: 80%;
	height: 1px;
	background: var(--o-c-brand-green-d);
}

/* 設計ツリー: <group> 9dc12340 flex column / gap:5px / padding:0 */
.cm-policy__labels {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	gap: 5px;
	padding: 0;
}

/* 20px / 700 / var(--s-color-7bb7321f)（設計ツリー実値） */
.cm-policy__t1 {
	width: auto;
	color: var(--o-c-brand-green-d);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

/* 15px / 700 / #4f4f4fff（設計ツリー実値） */
.cm-policy__t2 {
	width: auto;
	color: #4f4f4fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

/* ============================================================
 * 6. 帯見出し（#flow / #cost）
 *    設計ツリー: Title height:368px / margin:20px 0px / width:100%
 * ============================================================ */

.cm-title {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 100%;
	height: 368px;
	margin: 20px 0;
	overflow: visible;
	background: transparent;
}

/*
 * 設計ツリー: Image（content.type:"image"）width:100% / height:100% / overflow:hidden。
 * STUDIO の "image" 型は背景画像の cover 配置。テキストを重ねるので <img> ではなく背景で出す。
 * background-image は PHP 側が inline style で渡す（ordinary_img_url を通すため）。
 */
.cm-title__bg {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/* 設計ツリー: Box width:300px / padding:4px 4px 4px 4px / background:rgba(0,0,0,0.0) */
.cm-title__box {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 300px;
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 4px;
	background: rgba(0, 0, 0, 0);
	box-shadow: none;
}

/* 設計ツリー: Box height:1px / width:100%。色は #flow=#14314a / #cost=#082b34 */
.cm-title__rule {
	display: block;
	flex: none;
	width: 100%;
	height: 1px;
	background: var(--cm-title-rule, #14314a);
}

.cm-title__rule--top {
	margin: 0 0 12px;
}

.cm-title__rule--bottom {
	margin: 12px 0 0;
}

/* 20px / 400 / letter-spacing .05em / #082b34（設計ツリー実値・#flow も #cost も同じ） */
.cm-title__text {
	width: auto;
	margin: 0;
	color: #082b34;
	font-size: 20px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	letter-spacing: 0.05em;
	/*
	 * ★2026-09-14 追加: 設計ツリー（h2 b8067921 / b0e71066）に lineHeight の指定が無いため
	 *   base.css の body{line-height:1.6} を継承して行高 32px になっていた。
	 *   現行実測は 20px（=font-size×1.0・375/768/1440 とも）。h2 の箱が 12px 高い分だけ
	 *   上下の区切り線（margin 12px）が 6px ずつ外へ開いていたので、現行に合わせて 1 に戻す。
	 *   .cm-title の高さは 368px/250px 固定なのでセクション高は変わらない。
	 */
	line-height: 1;
	text-align: center;
}

/* ============================================================
 * 7. ご利用の流れ（各手順カード）
 *    設計ツリー: ご利用の流れ 0ce78063 padding:96px 16px 96px / width:100%
 * ============================================================ */

.cm-flow {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 100%;
	height: auto;
	padding: 96px 16px;
	background: rgba(0, 0, 0, 0);
}

/*
 * 設計ツリー: List d1d6fbc0 width:800px / flex row / wrap / gap:20px / justify-content:center /
 *   overflow-x:hidden / overflow-y:auto
 *
 * ★ 1行3枚になる（2026-09-13 現行サイト実測で訂正）
 *   33.3% x 3 ＋ gap40px = 839.2px で 800px をはみ出すが、現行はカードが**縮んで**3枚並ぶ。
 *   実測: カード幅253px（=(800-40)/3）、x座標 313 / 586 / 859。
 *   カード側の flex-shrink が効いているためで、flex:none にすると縮まず2枚で折り返してしまう。
 *   （それで 884px のセクションが 1,240px になっていた）
 */
.cm-flow__list {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: center;
	gap: 20px;
	width: 800px;
	max-width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	overflow-y: auto;
	list-style: none;
}

/*
 * 設計ツリー: Box 5f105c82 width:33.3% / height:320px / padding:24px / background:#fbf3e9ff
 *
 * ★ 幅は 33.3% ではなく calc((100% - 40px) / 3)（2026-09-13 現行実測で訂正）
 *   現行のカード幅は 253px、x座標は 313 / 586 / 859 で、800px の枠に3枚ちょうど収まっている。
 *   33.3%（=266.4px）のままだと 3枚＋gap40px = 839.2px で枠に入らず、
 *   flex-wrap:wrap が2枚で折り返してしまう（縮小より折り返しが先に効くため）。
 *   それでセクションが 884px → 1,240px になっていた。gap を引いた3等分で現行と一致する。
 */
.cm-flow__card {
	display: flex;
	flex: none;
	width: calc((100% - 40px) / 3);
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: center;
	height: 320px;
	margin: 0 0 16px;
	padding: 24px;
	background: #fbf3e9ff;
	border: 0 solid #c3c3c3;
	border-radius: 12px;
}

/* 設計ツリー: <group> 054891d2 flex:1 / gap:10px / justify-content:center */
.cm-flow__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: center;
	gap: 10px;
	width: auto;
	margin: 0;
	padding: 0;
}

/* 設計ツリー: <group> ddf55d76 flex column / align-items:center / width:100% / margin:0 0 10px 0 */
.cm-flow__heading {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	width: 100%;
	height: auto;
	margin: 0 0 10px;
	padding: 0;
}

/*
 * 36px / 700 / line-height 1 / var(--s-color-9eaeaf39)
 * 下線は border-bottom:2px solid var(--s-color-7bb7321f)（設計ツリー実値・左右上は 0px）
 */
.cm-flow__num {
	width: auto;
	margin: 0 0 8px;
	padding: 0 0 2px;
	color: var(--o-c-brand-green-d);
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	text-align: left;
	border-bottom: 2px solid var(--o-c-brand-green-d);
}

/* 20px / 400 / line-height 1.1 / font-feature-settings 'palt' 1（設計ツリー実値） */
.cm-flow__title {
	width: auto;
	margin: 0;
	color: #082b34;
	font-size: 20px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	font-feature-settings: "palt" 1;
	line-height: 1.1;
	text-align: center;
}

/* 14px / 400 / line-height 1.4（設計ツリー実値） */
.cm-flow__text {
	width: auto;
	margin: 0;
	color: #082b34;
	font-size: 14px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.4;
	text-align: left;
}

/* ============================================================
 * 8. 料金
 *    設計ツリー: Section a3b7cfac width:1080px / padding:96px 0px
 * ============================================================ */

.cm-cost {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 1080px;
	max-width: 100%;
	height: auto;
	padding: 96px 0;
	background: transparent;
}

/* 設計ツリー: List d6d4c860 width:720px / flex row / wrap / overflow-x:hidden / overflow-y:auto */
.cm-cost__list {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	width: 720px;
	max-width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	overflow-y: auto;
	list-style: none;
}

/* 設計ツリー: Box 988ac964 width:100% / background:#FFFFFF / border-radius:4px / padding:24px / gap:10px */
.cm-cost__card {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	height: auto;
	margin: 0 0 16px;
	padding: 24px;
	background: #ffffff;
	border: 0 solid #c3c3c3;
	border-radius: 4px;
}

/* 設計ツリー: <group> fe75df4d flex row / align-items:flex-end / width:100% */
.cm-cost__row {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-end;
	align-content: flex-end;
	justify-content: flex-start;
	width: 100%;
	padding: 0;
}

/* 設計ツリー: <group> b9d30b31 flex:1 / justify-content:center */
.cm-cost__names {
	display: flex;
	flex: 1;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: center;
	width: auto;
	margin: 0;
	padding: 0;
}

/* 設計ツリー: <group> 76e674c6 flex column / margin:0 0 10px 0 */
.cm-cost__namebox {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: flex-start;
	margin: 0 0 10px;
	padding: 0;
}

/* 16px / 700 / #6a6a6a / border-bottom:2px solid #6a6a6a（設計ツリー実値） */
.cm-cost__badge {
	width: auto;
	margin: 0 0 8px;
	padding: 0 0 2px;
	color: #6a6a6a;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-align: left;
	border-bottom: 2px solid #6a6a6a;
}

/* 20px / 400 / letter-spacing .15em / line-height 1.4 / 'palt'（設計ツリー実値） */
.cm-cost__name {
	width: auto;
	margin: 0;
	color: #082b34;
	font-size: 20px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	font-feature-settings: "palt" 1;
	line-height: 1.4;
	letter-spacing: 0.15em;
	text-align: left;
}

/* 設計ツリー: <group> 7476ae21 flex:1 / align-items:flex-end / margin:0 24px 0 0 */
.cm-cost__pricewrap {
	display: flex;
	flex: 1;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-end;
	align-content: flex-end;
	justify-content: center;
	width: auto;
	margin: 0 24px 0 0;
	padding: 0;
}

/* 28px / 400 / letter-spacing .15em / line-height 1.1 / margin:0 0 12px 0（設計ツリー実値） */
.cm-cost__price {
	width: auto;
	margin: 0 0 12px;
	color: #082b34ff;
	font-size: 28px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	font-feature-settings: "palt" 1;
	line-height: 1.1;
	letter-spacing: 0.15em;
	text-align: left;
}

/* 14px / 400 / #333333 / line-height 1.4（設計ツリー実値） */
.cm-cost__detail {
	width: auto;
	margin: 0;
	color: #333333;
	font-size: 14px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.4;
	text-align: left;
}

/* 20px / 400 / #082b34 / margin:20px 0px 20px 0px（設計ツリー実値） */
.cm-cost__note {
	width: auto;
	margin: 20px 0;
	color: #082b34;
	font-size: 20px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.4;
	text-align: left;
}

/* ============================================================
 * 9. #message（代表メッセージ）
 *    設計ツリー: Section 16e39370 width:960px / padding:49px 0px / background:#fff5ecff
 * ============================================================ */

/*
 * ★2026-09-14 修正: 薄桃色の背景をビューポート全幅の帯にする。
 *   STUDIO の type:"section" は「全幅の外枠（背景）＋幅指定の内枠（.section-inner）」の
 *   二重構造で描画される。現行実測（1440px）: 外枠 section 0,4431 1440×679 bg rgb(255,245,236) ／
 *   内枠 240,4431 960×679 透明・本文 x=360 w=720。
 *   ローカルは 960px の箱だけが桃色で、両脇 240px ずつページ地色が見えて「箱」になっていた。
 *   外枠 .cm-message（全幅・背景）＋内枠 .cm-message__inner（960px・padding）に分けて写す。
 *   960px 以下のビューポートでは外枠＝内枠の幅なので見た目は変わらない。
 */
.cm-message {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 100%;
	height: auto;
	padding: 0;
	color: #082b34ff;
	background: #fff5ecff;
}

/* 内枠（現行 .section-inner 相当）。設計ツリー 16e39370 の width:960px / padding:49px 0px はこちらに持つ */
.cm-message__inner {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 960px;
	max-width: 100%;
	height: auto;
	padding: 49px 0;
}

/*
 * 18px / 400 / line-height 1.7 / #14314a / width:720px（設計ツリー実値）。
 * @mobile の height:665px は STUDIO の実測値であって制約ではないため写さない
 * （そのまま当てると本文が入りきらず次のセクションに重なる）。
 */
.cm-message__body {
	flex: none;
	width: 720px;
	max-width: 100%;
	margin: 0;
	color: #14314a;
	font-size: 18px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.7;
	text-align: left;
}

/* ============================================================
 * 10. 公式LINE CTA
 *     設計ツリー: Section 2f366e0e width:60% / padding:30px 0px / background:#FFFFFF
 *     （リンクが Section 自身に付いているため、ここでは <a> がこのクラスを持つ）
 * ============================================================ */

/*
 * ★2026-09-14 修正: 白い背景をビューポート全幅の帯にする。
 *   STUDIO の type:"section" は「全幅の外枠（背景）＋幅指定の内枠（.section-inner）」の
 *   二重構造で描画される。現行実測（1440px）: 外枠 <a class="section"> 0,5110 1440×220 白 ／
 *   内枠 .section-inner 288,5110 864×220 透明。375px: 外枠 375×130 白。
 *   ローカルは 60% の箱（288〜1152）だけが白く、両脇にページ地色が残っていた。
 *   外枠 <a>.cm-line（全幅・白・リンク）＋内枠 .cm-line__inner（60%・padding 30px 0）に分けて写す。
 *   白帯全体がリンクなのは現行と同じ挙動（設計ツリーでリンクが Section に付いている）。
 */
.cm-line {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 100%;
	height: auto;
	padding: 0;
	text-decoration: none;
	background: #ffffff;
}

/* 内枠（現行 .section-inner 相当）。設計ツリー 2f366e0e の width:60% / padding:30px 0px はこちらに持つ */
.cm-line__inner {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 60%;
	height: auto;
	padding: 30px 0;
}

/*
 * 設計ツリー: Box 83676f03 height:160px / background var(--s-color-ee81bfd8) /
 *   border:3px solid #ffffff / border-radius:16px / box-shadow:3px 3px 3px rgba(0,0,0,0.2) /
 *   justify-content:space-around / :hover{ scale:1.05 1.05; transition-duration:800ms }
 */
.cm-line__box {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: space-around;
	width: 100%;
	height: 160px;
	background: var(--o-c-brand-green-d);
	border: 3px solid #ffffff;
	border-radius: 16px;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
	transition: scale 800ms;
}

.cm-line:hover .cm-line__box,
.cm-line:focus-visible .cm-line__box {
	scale: 1.05 1.05;
}

/* 設計ツリー: <group> 4ff3c059 align-items:center / justify-content:center / padding:0 */
.cm-line__labelwrap {
	display: flex;
	/*
	 * ★2026-09-14 追加: 設計ツリーに flex 指定は無いが、現行は STUDIO のノード既定で
	 *   flex:0 0 auto / max-width:100% になっている（実測 375〜1440px すべて）。
	 *   未指定（0 1 auto）だと 541〜620px で箱（90%×80%）が文言 368px＋バッジ 60px より狭くなった時に
	 *   文言側だけ縮んで「公式LINEで無料相／談！」と 2 行に折れていた（現行は 1 行のまま）。
	 */
	flex: none;
	max-width: 100%;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	padding: 0;
}

/* 36px / 700 / #ffffff / line-height 1.4（設計ツリー実値） */
.cm-line__label {
	width: auto;
	color: #ffffff;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
}

/* 設計ツリー: Box 781e3910 60×60 / background:#ffffff / border-radius:50% */
.cm-line__badge {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	background: #ffffff;
	border-radius: 50%;
}

/* 設計ツリー: Icon ce191d4d color:var(--s-color-7bb7321f) / font-size:24px */
.cm-line__icon {
	color: var(--o-c-brand-green-d);
	font-size: 24px;
}

/* ============================================================
 * 11. レスポンシブ
 *     上書きはすべて設計ツリーの @small / @tablet / @mobile / @mini から逐語。
 * ============================================================ */

/* ---------- @small（~1140px） ---------- */
@media (max-width: 1140px) {

	/* Concept padding:97px 92px 20px 92px */
	.cm-concept {
		padding: 97px 92px 20px;
	}

	/* <group> ffc02633 gap:30px */
	.cm-interview__row {
		gap: 30px;
	}

	/* gap:30px に合わせて子の max-width も gap の半分に（現行 768px 実測 maxWidth:calc(50% - 15px)）。2026-09-14 */
	.cm-interview__text,
	.cm-interview__media {
		max-width: calc(50% - 15px);
	}

	/* Text 1f80deb6 font-size:24px / Text 206f9fc0 font-size:14px */
	.cm-policy__t1 {
		font-size: 24px;
	}

	.cm-policy__t2 {
		font-size: 14px;
	}
}

/* ---------- @tablet（~840px） ---------- */
@media (max-width: 840px) {

	/* Box 83aa5950 / Box b5e7be4f とも display:none。ハンバーガーも非表示のため導線が無くなる */
	.cm-header__nav,
	.cm-header__line {
		display: none;
	}

	/* Concept padding:71px 48px ／ <group> 5c06382d margin:0 ／ Text f4e0aa50 font-size:32px */
	.cm-concept {
		padding: 71px 48px;
	}

	.cm-concept__inner {
		margin: 0;
		/*
		 * ★2026-09-14 追加: 設計ツリーは @tablet でも width:70% のままで、768px では内側枠が
		 *   (768−48×2)×0.7＝470px しかなく、見出し（32px×0.3em×13字＝541px）が「…あなた／に、」、
		 *   リード文（20px・最長 21字＝546px）が「…悩んできたんだ／ろう。」等 4 行で 1〜3 文字だけ
		 *   次行に落ちていた（現行も同じ）。設計ツリーが @mobile で使っている width:100% を
		 *   @tablet にも当てて内側枠を 672px にし、見出し・本文とも 1 行に収める。
		 *   letter-spacing・font-size は変えない。
		 */
		width: 100%;
	}

	.cm-concept__head {
		font-size: 32px;
	}

	/* <group> 07fbf6e9 padding:80px 20px 50px 20px */
	.cm-interview__panel {
		padding: 80px 20px 50px;
	}

	/* Title height:250px */
	.cm-title {
		height: 250px;
	}

	/*
	 * Box 5f105c82 height:381px
	 * ★2026-09-14 修正: 固定 height → min-height。541〜610px ではカードが 156〜176px 幅になり
	 *   本文（12〜14px）が 381px に収まらず、02 のカードで最大 84px（541px: scrollHeight 465）
	 *   はみ出して次の行のカードに食い込んでいた（現行も同じ）。中身が収まる 640px 以上・768px では
	 *   全カード 381px のまま変わらない（768px 実測 scrollHeight 381 ≤ 381）。
	 */
	.cm-flow__card {
		height: auto;
		min-height: 381px;
	}

	/*
	 * ★2026-09-14 追加: 768px ではカードが 232px（内側 184px）になり、20px だと
	 *   「納品後カウンセリング」10 字＝200px が入らず「納品後カウンセリン／グ／（1回）」、
	 *   「カウンセリング打ち合わせ（全2回）」が「…（全2／回）」と 3 行・1〜2 文字落ちで折れていた
	 *   （現行も同じ）。設計ツリー 0c6c35da が @mobile で使っている 18px を @tablet にも当てる
	 *   （10 字＝180px ≤ 184px）。1440px は内側 205px で 20px のまま 1 行に入るので変えない。
	 */
	.cm-flow__title {
		font-size: 18px;
	}

	/* Section a3b7cfac padding:29px 0px ／ List d6d4c860 flex-direction:column */
	.cm-cost {
		padding: 29px 0;
	}

	.cm-cost__list {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
	}

	/* Text bdd6a3fc width:540px */
	.cm-message__body {
		width: 540px;
	}

	/* Section 2f366e0e width:80%（内枠 .cm-line__inner が持つ・2026-09-14）／ Box 83676f03 height:120px / width:90% */
	.cm-line__inner {
		width: 80%;
	}

	.cm-line__box {
		width: 90%;
		height: 120px;
	}
}

/* ---------- @mobile（~540px） ---------- */
@media (max-width: 540px) {

	/* Image 9d82c93e width:120px */
	.cm-header__logo {
		width: 120px;
	}

	/* Concept padding:28px 30px ／ <group> width:100% */
	.cm-concept {
		padding: 28px 30px;
	}

	.cm-concept__inner {
		width: 100%;
	}

	/* Text a2be3d54 14px / letter-spacing .15em / width:100% */
	.cm-concept__eyebrow {
		width: 100%;
		font-size: 14px;
		letter-spacing: 0.15em;
	}

	/* Image 47ea47e4 width:80% */
	.cm-concept__logo {
		width: 80%;
	}

	/* Text f4e0aa50 20px / letter-spacing .15em / width:100% */
	.cm-concept__head {
		width: 100%;
		font-size: 20px;
		letter-spacing: 0.15em;
	}

	/* Text aef15c37 11px / padding:0px 0px */
	.cm-concept__body {
		padding: 0;
		font-size: 11px;
	}

	/* Movie 5053e1fc background:#f9fafb / padding:95px 0px 41px 0px / align-items:center */
	.cm-interview {
		align-items: center;
		align-content: center;
		justify-content: flex-start;
		padding: 95px 0 41px;
		background: #f9fafb;
	}

	/* <group> 07fbf6e9 align-items:center / justify-content:flex-start */
	.cm-interview__panel {
		align-items: center;
		align-content: center;
		justify-content: flex-start;
	}

	/* <group> ffc02633 flex-direction:column-reverse */
	.cm-interview__row {
		flex-direction: column-reverse;
		flex-wrap: nowrap;
		align-items: center;
		align-content: center;
		justify-content: flex-start;
	}

	/* Text 30b1c446 14px / width:100% / margin:0px 0px */
	.cm-interview__text {
		width: 100%;
		max-width: 100%; /* 縦積み（column-reverse）では全幅。現行 @mobile 実測 maxWidth:100%（2026-09-14） */
		margin: 0;
		font-size: 14px;
	}

	/* <group> 8383250d width:100% / align-items:center / justify-content:flex-start */
	.cm-interview__media {
		align-items: center;
		align-content: center;
		justify-content: flex-start;
		width: 100%;
		max-width: 100%; /* 同上（2026-09-14） */
	}

	/* <group> e745ac12 align-items:center / justify-content:flex-start */
	.cm-interview__frame {
		align-items: center;
		align-content: center;
		justify-content: flex-start;
	}

	/* Section c205b112 padding:34px 0px 50px 0px */
	.cm-policy {
		padding: 34px 0 50px;
	}

	/* List b865adc5 flex-direction:column ／ Box 5fed416e width:100% */
	.cm-policy__list {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.cm-policy__card {
		width: 100%;
		max-width: calc(100% - 20px); /* 現行 @mobile 実測（375px: 284px / 430px: 331px）。基本の calc(33.3% - 20px) を縦積み用に置換（2026-09-14） */
	}

	/* Image 53cb757a 80×80 */
	.cm-policy__icon {
		width: 80px;
		height: 80px;
	}

	/* Title height:250px（@tablet と同値。継承に頼らず明示） */
	.cm-title {
		height: 250px;
	}

	/* 上下の区切り線は @mobile / @mini で display:none */
	.cm-title__rule {
		display: none;
	}

	/* ご利用の流れ padding:72px 16px 40px */
	.cm-flow {
		padding: 72px 16px 40px;
	}

	/* List d1d6fbc0 flex-direction:column / gap:5px */
	.cm-flow__list {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 5px;
	}

	/* Box 5f105c82 width:100% / height:auto / margin:0px 0px 8px / padding:16px */
	.cm-flow__card {
		width: 100%;
		height: auto;
		min-height: 0; /* @tablet の min-height:381px を打ち消す（縦積みは自然高 140〜191px。2026-09-14） */
		margin: 0 0 8px;
		padding: 16px;
	}

	/* <group> 054891d2 margin:0px 16px 0px 0px */
	.cm-flow__body {
		margin: 0 16px 0 0;
	}

	/* <group> ddf55d76 flex-direction:row / gap:20px / justify-content:flex-start / margin:0 */
	.cm-flow__heading {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		align-content: center;
		justify-content: flex-start;
		gap: 20px;
		margin: 0;
	}

	/* Text 51e647bb writing-mode:horizontal-tb / text-align:left / 'palt' */
	.cm-flow__num {
		font-feature-settings: "palt" 1;
		text-align: left;
	}

	/* Text 0c6c35da 18px / text-align:left / 'palt' */
	.cm-flow__title {
		font-size: 18px;
		text-align: left;
	}

	/* Text e3cd7315 12px / text-align:left */
	.cm-flow__text {
		font-size: 12px;
		text-align: left;
	}

	/* Section a3b7cfac width:90% / padding:20px 0px */
	.cm-cost {
		width: 90%;
		padding: 20px 0;
	}

	/* Box 988ac964 padding:12px 10px / margin:0px 0px 8px */
	.cm-cost__card {
		margin: 0 0 8px;
		padding: 12px 10px;
	}

	/* <group> fe75df4d flex-direction:column / align-items:flex-start */
	.cm-cost__row {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		align-content: flex-start;
		justify-content: flex-start;
	}

	/* <group> b9d30b31 margin:0px 16px 0px 0px */
	.cm-cost__names {
		margin: 0 16px 0 0;
	}

	/* Text 3f3eebb3 12px / border-bottom:1px solid #6a6a6a */
	.cm-cost__badge {
		font-size: 12px;
		border-bottom-width: 1px;
	}

	/* <group> 7476ae21 margin:0px 0px 0px 0px */
	.cm-cost__pricewrap {
		margin: 0;
	}

	/* Text faccdaa3 16px */
	.cm-cost__price {
		font-size: 16px;
	}

	/* Text e2da32f7 13px */
	.cm-cost__note {
		font-size: 13px;
	}

	/* Section 16e39370 padding:49px 10px（内枠 .cm-message__inner が持つ・2026-09-14）／ Text bdd6a3fc 14px */
	.cm-message__inner {
		padding: 49px 10px;
	}

	.cm-message__body {
		font-size: 14px;
	}

	/* Box 83676f03 height:70px / padding:6px / width:95% */
	.cm-line__box {
		width: 95%;
		height: 70px;
		padding: 6px;
	}

	/* <group> 4ff3c059 align-items:flex-start / justify-content:center */
	.cm-line__labelwrap {
		align-items: flex-start;
		align-content: flex-start;
		justify-content: center;
	}

	/* Text 133c732d 18px */
	.cm-line__label {
		font-size: 18px;
	}

	/* Box 781e3910 30×30 */
	.cm-line__badge {
		width: 30px;
		height: 30px;
	}
}

/* ---------- @mini（~320px） ---------- */
@media (max-width: 320px) {

	/* Text a2be3d54 15px / width:100% */
	.cm-concept__eyebrow {
		width: 100%;
		font-size: 15px;
	}

	/* Text f4e0aa50 15px / width:100% */
	.cm-concept__head {
		width: 100%;
		font-size: 15px;
	}

	/* Section 2f366e0e width:100%（内枠 .cm-line__inner が持つ・2026-09-14）／ Box 83676f03 height:70px */
	.cm-line__inner {
		width: 100%;
	}

	.cm-line__box {
		height: 70px;
	}

	/* Text 133c732d 18px */
	.cm-line__label {
		font-size: 18px;
	}
}

/* ============================================================
 * 12. prefers-reduced-motion
 *     設計ツリーには無い。アクセシビリティ上必要なので足している。
 *     characters.css と同じ考え方。
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {

	.cm-header__underline,
	.cm-header__line,
	.cm-policy__card,
	.cm-policy__icon,
	.cm-line__box {
		transition: none;
	}

	.cm-header__line:hover,
	.cm-header__line:focus-visible,
	.cm-policy__card:hover,
	.cm-policy__card:focus-within,
	.cm-line:hover .cm-line__box,
	.cm-line:focus-visible .cm-line__box {
		scale: 1 1;
	}

	.cm-policy__card:hover .cm-policy__icon,
	.cm-policy__card:focus-within .cm-policy__icon {
		rotate: 0deg;
	}
}