@charset "UTF-8";
/**
 * luluwedding.css — /luluwedding（Lu-Lu Wedding）
 *
 * 一次資料: 設計ツリー specs/pageviews/a9905499-f297-43e4-b343-17d244eb1763.json
 * 値はすべて設計ツリーの style から逐語。丸めや「だいたい同じ」で置き換えない。
 * 原本に無い値を足した箇所はその場にコメントで理由を書いている。
 *
 * ブレークポイント（全ページ共通・変更禁止）:
 *   ベース幅 1280px / small ~1140px / tablet ~840px / mobile ~540px / mini ~320px
 * base.css §0 の規約に従う:
 *   R1 ソース順は 1140 → 840 → 540 → 320
 *   R2 display の切替は狭い側にも明示的に書く
 *   R3 1本のセレクタのMQブロックを分散させない（各章の直後にまとめる）
 *
 * このページの主フォントは Noto Serif JP（--s-font-dbab4593）。
 * Inter系（--s-font-f88553ee）なのは、ヘッダーの公式LINEボタン／画面下固定バー／
 * CTA帯の @mobile・@mini 上書きだけ。設計ツリーの fontFamily を1要素ずつ確認済み。
 *
 * 色は tokens.css §直値で頻出する色 の方針に従い6桁小文字へ正規化している
 * （原本の #082b34ff → #082b34 など。値は同一）。
 */

/* ============================================================
 * 1. ページ土台
 *    設計ツリー Base: width:100% / height:100% / margin:0 / padding:0 / background:#fff
 *    ★ height:100% は移植しない。WordPress では <main> に 100% を当てると
 *      本文が viewport 高に固定されて崩れるため。原本の STUDIO は Base＝ページ全体。
 *    ★ Base に flex-direction / align-items の指定は無いが、
 *      子セクションが width:60% / 70% / 1080px などで中央に並ぶため
 *      column ＋ align-items:center が前提になっている（page-characters.php の .ch-main と同じ）。
 * ============================================================ */

.lw-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	background: #ffffff;
}

/* ============================================================
 * 2. ヘッダー（/0・このページ専用。共有シンボルではない）
 *    設計ツリー: position:fixed / top:0 / left:0 / width:100% / height:80px /
 *                padding:0 30px / row / align-items:center / justify-content:space-between /
 *                background:rgba(0,0,0,0.0) / overflow:visible
 * ============================================================ */

.lw-header {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	flex: none;
	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;
	overflow: visible;
	background: rgba(0, 0, 0, 0);
	/*
	 * ★ 原本に z-index の指定は無い。
	 *   直後の .lw-hero が z-index:1 を持つため、auto のままだとスクロール時に
	 *   ヘッダーがキービジュアルの下へ潜って固定ヘッダーとして成立しない。
	 *   テーマ共通の --o-header-z（=999）を当てている。
	 * ★ base.css の .o-header（スクロール方向でせり上げる）は意図的に使っていない。
	 *   その挙動は設計ツリーに無い。
	 */
	z-index: var(--o-header-z);
}

/* ---- ロゴ（/0/0・/0/0/0） ---- */

.lw-header__logo-link {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	padding: 0;
}

/*
 * 設計ツリー: width:400px / height:auto / margin:10px 0 0 -141px。
 * 実寸 1920×1080 の周囲が余白で、負の margin-left でロゴマークを左端へ寄せている。
 */
.lw-header__logo {
	flex: none;
	width: 400px;
	height: auto;
	margin: 10px 0 0 -141px;
	/*
	 * ★ max-width は原本に無い（2026-09-14 追加）。
	 *   base.css の img{max-width:100%} が、負の margin-left で 259px になった親リンク幅まで
	 *   画像を縮めてしまい、ロゴが 259×146px（現行 400×225px）にしか出ていなかった。
	 *   STUDIO ランタイムは負マージン分を max-width に足して calc(100% + 141px) に補正している
	 *   （現行の computed 値を実測: PC calc(100% + 141px) / @mobile calc(100% + 67px)）。
	 *   その挙動をそのまま再現する。結果は現行と同一の 400×225 / 205×115（x=-111,y=-67 / x=-37,y=-18）。
	 */
	max-width: calc(100% + 141px);
}

/* ---- 右クラスタ（/0/1） ---- */

.lw-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);
}

/* ---- PCナビ（/0/1/0） ---- */

.lw-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);
}

.lw-header__list {
	display: flex;
	flex-direction: row;
	align-items: center;
}

/* 設計ツリー: <group> column / center / margin:0 5px / padding:0 / :hover 200ms */
.lw-header__nav-item {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	margin: 0 5px;
	padding: 0;
}

/*
 * 15px / 600 / line-height 1.4 / padding 10px 5px 3px（設計ツリー実値）。
 * 原本では5項目中3項目に height:34px が入っているが、
 * padding(10+3) ＋ 15px×1.4(=21px) ＝ 34px で auto と同値のため指定しない。
 */
.lw-header__nav-label {
	display: block;
	width: auto;
	padding: 10px 5px 3px;
	color: #082b34;
	font-family: var(--s-font-dbab4593);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}

/* 下線。scale:0 1 → hover で 1 1（左基点）。色は項目ごとにインラインの --lw-navbar で渡す。 */
.lw-header__nav-bar {
	display: block;
	flex: none;
	width: 100%;
	height: 3px;
	background: var(--lw-navbar);
	transform-origin: center left;
	scale: 0 1;
	transition: scale 200ms;
}

.lw-header__nav-item:hover .lw-header__nav-bar,
.lw-header__nav-item:focus-visible .lw-header__nav-bar {
	scale: 1 1;
}

/* ---- 公式LINEボタン（/0/1/1） ---- */

.lw-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;
	background: linear-gradient(90deg, #32e306ff, #14c32eff);
	border: 1px solid #ffffff;
	border-radius: 8px;
	box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.1);
	transition-duration: 300ms;
	transition-property: box-shadow, scale;
}

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

/* 16px / 700 / #f9fafb。このページで数少ない Inter系フォントの箇所。 */
.lw-header__line-text {
	width: auto;
	height: auto;
	margin: 0;
	color: #f9fafb;
	font-family: var(--s-font-f88553ee);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

/* ---- ハンバーガー（/0/1/2） ---- */

/* 設計ツリー: dehaze / 24px / #000000 / padding:10px。サイズは parts.css の .o-hamburger と同値。 */
.lw-header__hamburger {
	display: none;
	flex: none;
	width: auto;
	height: auto;
	color: #000000;
}

/* ---- ヘッダーのレスポンシブ ---- */

@media screen and (max-width: 1140px) {

	.lw-header__nav { display: flex; }
	.lw-header__line { display: flex; }
	.lw-header__hamburger { display: none; }
}

@media screen and (max-width: 840px) {

	.lw-header__nav { display: none; }
	.lw-header__line { display: none; }
	.lw-header__hamburger { display: none; }
}

@media screen and (max-width: 540px) {

	.lw-header__logo-link { width: 138px; }

	/* 原本に @mobile の width 上書きは無い（400px のまま枠から溢れる作り）。 */
	/* max-width は上（ベース）と同じ理由。@mobile は負マージン 67px 分（現行の computed 値と一致・2026-09-14）。 */
	.lw-header__logo {
		margin: 0 0 0 -67px;
		max-width: calc(100% + 67px);
	}

	.lw-header__nav { display: none; }
	.lw-header__line { display: none; }
	.lw-header__hamburger { display: flex; }
}

@media screen and (max-width: 320px) {

	.lw-header__nav { display: none; }
	.lw-header__line { display: none; }

	/* ★原本どおり。320px以下ではメニュー導線が無くなるが、こちらで補わない。 */
	.lw-header__hamburger { display: none; }
}

/* ============================================================
 * 3. キービジュアル（/1）
 *    設計ツリー: column / center / margin:80px 0 0 / padding:0 /
 *                position:relative / z-index:1
 *    ★ base に width の指定は無いが、@mobile に width:100% があり、
 *      子が width:100% / left:0 right:0 の絶対配置なので base も 100% が唯一整合する解釈。
 * ============================================================ */

.lw-hero {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 100%;
	margin: 80px 0 0;
	padding: 0;
	/*
	 * ★ overflow-x:clip は原本に無い（2026-09-14 追加）。
	 *   @tablet（541〜840px）の動画枠は 427×247px を scale 2 にして right:206px に置くため、
	 *   右端が常に viewport +7.5px になり、document.scrollWidth が 776（768 幅時）に伸びていた。
	 *   現行（STUDIO）はルート div の overflow:clip で同じはみ出しを切っている。
	 *   縦は visible のまま（clip は片軸だけ指定できる）。動画枠の位置・高さは不変（実測 y=80 h=494）。
	 */
	overflow-x: clip;
}

/* /1/0 PC用 静止画。z-index:-2（動画・重ね画像より奥） */
.lw-hero__kv {
	position: relative;
	z-index: -2;
	display: flex;
	flex: none;
	width: 100%;
	height: auto;
	margin: 0;
}

/*
 * /1/1 重ねる静止画。z-index:2（動画より前面）。
 * ★ bottom:66px は top ＋ height:auto と同時指定のため CSS 仕様上は効かない（over-constrained）。
 *   原本どおり書いておく。
 */
.lw-hero__overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 66px;
	left: 0;
	z-index: 2;
	flex: none;
	width: 100%;
	height: auto;
	margin: 0;
}

/*
 * /1/2 PC用 Vimeo。z-index:3。
 * 原本の埋め込みは padding-top:56.25% の入れ子 div だが、
 * ここは親を 100%×100% で埋める指定なので比率ではなく inset で敷く。
 */
.lw-hero__video {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex: none;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 1;
	background: rgba(0, 0, 0, 0);
	border-radius: 0;
	box-shadow: none;
}

.lw-hero__video > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* /1/3 スマホ用スタック。z-index:-1 */
.lw-hero__sp {
	position: relative;
	z-index: -1;
	display: none;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-end;
	align-content: flex-end;
	justify-content: flex-start;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: visible;
	background: rgba(0, 0, 0, 0);
}

/* /1/3/0 スマホ用ポスター画像。base は width:160px。 */
.lw-hero__sp-poster {
	width: 160px;
	height: auto;
}

/* /1/3/1 スマホ用 Vimeo（縦）。原本の埋め込みは padding-top:178%。 */
.lw-hero__sp-video {
	position: relative;
	flex: 1;
	width: 100%;
	height: auto;
	margin: 90px 0;
	aspect-ratio: 100 / 178;
}

.lw-hero__sp-video > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---- キービジュアルのレスポンシブ ---- */

@media screen and (max-width: 1140px) {

	.lw-hero__kv { display: flex; }
	.lw-hero__overlay { display: block; }
	.lw-hero__video { display: flex; }
	.lw-hero__sp { display: none; }
}

@media screen and (max-width: 840px) {

	.lw-hero { margin: 125px 0 0; }

	.lw-hero__kv { display: flex; }
	.lw-hero__overlay { display: none; }
	.lw-hero__sp { display: none; }

	/*
	 * @tablet だけ動画が「右下に置いた 427×247px を2倍に拡大」する組み方へ変わる。
	 * 設計ツリー実値をそのまま写している。
	 */
	.lw-hero__video {
		display: flex;
		top: auto;
		right: 206px;
		bottom: 107px;
		left: auto;
		width: 427px;
		height: 247px;
		transform-origin: center center;
		translate: 0 0;
		scale: 2 2;
	}
}

@media screen and (max-width: 540px) {

	.lw-hero {
		width: 100%;
		margin: 0;
	}

	.lw-hero__kv { display: none; }

	/* @mobile では重ね画像が復活し、幅が 200% になる（設計ツリー実値）。 */
	.lw-hero__overlay {
		display: block;
		flex: none;
		width: 200%;
	}

	.lw-hero__video { display: none; }

	.lw-hero__sp { display: flex; }

	/*
	 * ★ 静止状態が opacity:0。
	 *   原本は「3000ms 後にフェードアウトし切ったポスター」で、最終状態は透明。
	 *   出現アニメ（&appear）は再現しない方針（reblue.css 2章）に合わせ、最終状態で固定する。
	 */
	.lw-hero__sp-poster {
		flex: none;
		z-index: 2;
		width: 100%;
		opacity: 0;
	}

	.lw-hero__sp-video {
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
	}
}

@media screen and (max-width: 320px) {

	.lw-hero__kv { display: none; }
	.lw-hero__overlay { display: block; }
	.lw-hero__video { display: none; }
	.lw-hero__sp { display: flex; }
}

/* ============================================================
 * 4. VISION（/2・id=concept）
 *    設計ツリー: column / center / width:100% / padding:0 92px 20px / background:#ffffff
 * ============================================================ */

.lw-vision {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 92px 20px;
	background: #ffffff;
}

/* 設計ツリー: width:70% / margin:79px 0 0 */
.lw-vision__inner {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 70%;
	margin: 79px 0 0;
	padding: 0;
}

/* 40px / 700 / line-height 1.7 / letter-spacing .3em（設計ツリー実値） */
.lw-vision__head {
	width: auto;
	height: auto;
	margin: 0;
	color: #082b34;
	font-family: var(--s-font-dbab4593);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 0.3em;
	text-align: center;
	text-shadow: none;
}

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

/* ---- VISION のレスポンシブ ---- */

@media screen and (max-width: 1140px) {

	.lw-vision {
		height: auto;
		padding: 97px 92px 20px;
	}
}

@media screen and (max-width: 840px) {

	.lw-vision {
		height: auto;
		padding: 71px 48px;
	}

	.lw-vision__inner { margin: 0; }

	.lw-vision__head { font-size: 32px; }
}

@media screen and (max-width: 540px) {

	.lw-vision { padding: 44px 30px; }

	.lw-vision__inner { width: 100%; }

	.lw-vision__head {
		width: 100%;
		font-size: 24px;
		letter-spacing: 0.15em;
	}

	.lw-vision__body {
		padding: 29px 0;
		font-size: 11px;
	}
}

@media screen and (max-width: 320px) {

	.lw-vision { height: auto; }

	.lw-vision__head {
		width: 100%;
		font-size: 15px;
	}
}

/* ============================================================
 * 5. Photographs / Movies（/3・id=photo）
 *    設計ツリー: column / center / width:60% / padding:0 / background:#FFFFFF
 * ============================================================ */

.lw-photo {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 60%;
	height: auto;
	padding: 0;
	background: #ffffff;
}

/* 'Photographs' / 'Movies'。20px / 400 / #333333 / line-height 1.4 / 左寄せ */
.lw-photo__label {
	width: auto;
	height: auto;
	color: #333333;
	font-family: var(--s-font-dbab4593);
	font-size: 20px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.4;
	text-align: left;
}

/* 設計ツリー: List row / wrap / align-items:flex-start / width:100% / margin:30px 0 */
.lw-photo__list {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	width: 100%;
	margin: 30px 0;
	padding: 0;
	background: rgba(0, 0, 0, 0);
	border-radius: 0;
}

/* 設計ツリー: <group> width:50% / margin:5px / overflow:hidden / background:#ffffff */
.lw-photo__item {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 50%;
	margin: 5px;
	padding: 0;
	overflow: hidden;
	background: #ffffff;
}

.lw-photo__link {
	display: block;
	width: 100%;
	overflow: hidden;
}

/* :hover scale 1.1 / 1200ms（設計ツリー実値） */
.lw-photo__img {
	flex: none;
	width: 100%;
	height: auto;
	overflow: hidden;
	transition: scale 1200ms;
}

.lw-photo__item:hover .lw-photo__img,
.lw-photo__link:focus-visible .lw-photo__img {
	scale: 1.1 1.1;
}

/*
 * 事例ムービー。設計ツリー: width:1120px / margin:30px 0 / border-radius:4px。
 * ★ max-width:100% は原本に無い。親が width:60%（1280px時 768px）なので
 *   1120px のままでは横に溢れる。base.css が生の iframe に当てているのと同じ保険。
 */
.lw-photo__movie {
	flex: 1;
	width: 1120px;
	max-width: 100%;
	margin: 30px 0;
	overflow: hidden;
	border-radius: 4px;
}

/* ---- Photographs / Movies のレスポンシブ ---- */

@media screen and (max-width: 1140px) {

	.lw-photo__list { width: 100%; }

	.lw-photo__movie { flex: none; }
}

@media screen and (max-width: 540px) {

	.lw-photo { width: 90%; }

	.lw-photo__movie {
		flex: none;
		width: 547px;
		max-width: 100%;
		margin: 10px 0;
		border-radius: 0;
	}
}

/* ============================================================
 * 6. 公式LINE CTA（/4 ＝ /12）
 *    設計ツリー: Section link付き / column / center / width:60% / padding:30px 0
 * ============================================================ */

.lw-cta {
	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;
	background: #ffffff;
}

/* 緑グラデ帯。border 3px solid #ffffff / radius 16px / shadow 3px 3px 3px rgba(0,0,0,.2) */
.lw-cta__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: linear-gradient(90deg, #32e306ff, #14c32eff);
	border: 3px solid #ffffff;
	border-radius: 16px;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
	transition: scale 800ms;
}

.lw-cta:hover .lw-cta__box,
.lw-cta:focus-visible .lw-cta__box {
	scale: 1.05 1.05;
}

.lw-cta__texts {
	display: flex;
	/*
	 * ★ flex:none は原本の style に無いが STUDIO の <group> 既定値（2026-09-14 追加）。
	 *   現行の computed 値は flex:0 0 auto。無指定（0 1 auto）だと space-around の余白計算で
	 *   テキスト群が縮み、「公式LINEから問い合わせ／る！」と2行に折れていた
	 *   （375px: 2行 / 768px: 36px で2行になり高さ 126px が箱 120px から上下にはみ出す）。
	 *   現行は同じ幅で1行（375 w=238 / 768 w=487・実測）。
	 */
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	padding: 0;
}

/* 18px / 700 / #ffffff（設計ツリー実値） */
.lw-cta__lead {
	width: auto;
	height: auto;
	color: #ffffff;
	font-family: var(--s-font-dbab4593);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
}

/* 36px / 700 / #ffffff（設計ツリー実値） */
.lw-cta__main {
	width: auto;
	height: auto;
	color: #ffffff;
	font-family: var(--s-font-dbab4593);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
}

/* 白丸 60×60 */
.lw-cta__circle {
	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%;
}

/*
 * play_arrow。原本は color にグラデーションが入っている（CSS の color は取れない）。
 * tokens.css §グラデーション の注記どおり background-clip:text で描く。
 */
.lw-cta__icon {
	font-size: 24px;
	background-image: linear-gradient(90deg, #41ee16ff, #5bbf71);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* ---- CTA のレスポンシブ ---- */

/*
 * ★ 主文言のフォントサイズを「箱に収まる上限」で頭打ちにする（原本は 36px 固定・2026-09-14 追加）。
 *   テキスト群は flex:none（現行と同じ・上記）なので、36px の1行幅 487px（実測）＋白丸 60px が
 *   箱の内寸に入らない幅では白丸が箱の外へ押し出される（現行サイトも同じ壊れ方で、
 *   541〜767px と 841〜921px で発生。ルートの overflow:clip で切れているだけ）。
 *   箱の内寸 = 箱幅 − 枠線 3px×2。@small は .lw-cta 60% × box 100% = 60vw、
 *   @tablet は 80% × 90% = 72vw。そこから白丸 60px を引いた幅に 487px を比例で収める。
 *   36px で収まる幅（@small 922px以上／@tablet 768px以上）では min() が 36px を返し原本どおり。
 *   縮むのは収まらない幅だけ。値はすべて設計ツリーの幅比率・実測の文字幅から導出。
 */
@media screen and (max-width: 1140px) {

	.lw-cta__main { font-size: min(36px, calc((60vw - 66px) * 36 / 487)); }
}

@media screen and (max-width: 840px) {

	.lw-cta { width: 80%; }

	.lw-cta__box {
		width: 90%;
		height: 120px;
	}

	/* 内寸 72vw − 6px から白丸 60px を引いた幅に収める（導出は上のコメント） */
	.lw-cta__main { font-size: min(36px, calc((72vw - 66px) * 36 / 487)); }
}

@media screen and (max-width: 540px) {

	.lw-cta__box {
		width: 95%;
		height: 90px;
		padding: 6px;
	}

	.lw-cta__texts {
		align-items: flex-start;
		align-content: flex-start;
		justify-content: center;
	}

	/* @mobile だけフォントが Inter系へ切り替わる（設計ツリー実値） */
	.lw-cta__lead {
		font-family: var(--s-font-f88553ee);
		font-size: 11px;
	}

	.lw-cta__main {
		font-family: var(--s-font-f88553ee);
		font-size: 18px;
	}

	.lw-cta__circle {
		width: 30px;
		height: 30px;
	}
}

@media screen and (max-width: 320px) {

	.lw-cta { width: 100%; }

	.lw-cta__box { height: 70px; }

	.lw-cta__lead { font-size: 11px; }

	.lw-cta__main { font-size: 18px; }
}

/* ============================================================
 * 7. 帯タイトル（/5 /7 /9）
 *    設計ツリー: row / center / width:100% / height:368px / margin:20px 0 /
 *                background:#FFFFFF / overflow:visible
 * ============================================================ */

.lw-band {
	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: #ffffff;
}

/* /9 だけ margin:20px 0 0 0（下マージン無し） */
.lw-band--top-only {
	margin: 20px 0 0;
}

/*
 * 背景写真。STUDIO は content:image を ::before の background-image で敷く
 * （campain.css / reblue.css と同じ）。画像はインラインの --lw-band-img で渡す。
 * background-position は原本に無いため STUDIO 既定の center。
 */
.lw-band__img {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.lw-band__img::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--lw-band-img);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.lw-band__img > * {
	position: relative;
	z-index: 1;
}

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

/* 上下の1px線。色は帯ごとにインラインの --lw-band-rule で渡す。 */
.lw-band__rule {
	display: block;
	flex: none;
	width: 100%;
	height: 1px;
	background: var(--lw-band-rule);
}

.lw-band__rule--top { margin: 0 0 12px; }
.lw-band__rule--bottom { margin: 12px 0 0; }

/*
 * 20px / 400 / letter-spacing .05em。
 * ★ 原本に line-height の指定が無い。推測で補わず指定しない（body の 1.6 を継承）。
 */
.lw-band__head {
	width: auto;
	height: auto;
	margin: 0;
	color: #082b34;
	font-family: var(--s-font-dbab4593);
	font-size: 20px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	letter-spacing: 0.05em;
	text-align: center;
}

/* ---- 帯タイトルのレスポンシブ ---- */

@media screen and (max-width: 540px) {

	.lw-band { height: 250px; }

	/* @mobile / @mini で上下の線が消える（設計ツリー実値） */
	.lw-band__rule { display: none; }

	/* /5 は右寄せ、/7 /9 は左寄せ（設計ツリー実値） */
	.lw-band--align-end .lw-band__box {
		align-items: flex-end;
		align-content: flex-end;
		justify-content: center;
	}

	.lw-band--align-start .lw-band__box {
		align-items: flex-start;
		align-content: flex-start;
		justify-content: center;
	}

	/* /9（代表より）だけ @mobile で見出しが白になる */
	.lw-band--head-white .lw-band__head { color: #ffffff; }

	/* /9 だけ @mobile で背景の寄せが right center（設計ツリー :before の実値） */
	#message .lw-band__img::before { background-position: right center; }
}

@media screen and (max-width: 320px) {

	.lw-band__rule { display: none; }
}

/* ============================================================
 * 8. ご利用の流れ（/6）
 *    設計ツリー: column / center / width:100% / padding:96px 16px /
 *                background:rgba(0,0,0,0.0)
 * ============================================================ */

.lw-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);
}

/*
 * 設計ツリー: row / wrap / align-items:flex-start / width:800px / overflow-y:auto。
 * ★ max-width:100% は原本に無い。左右 padding が16pxしか無く 800px 未満で溢れるため。
 */
.lw-flow__list {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	width: 800px;
	max-width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	overflow-y: auto;
}

/* 設計ツリー: width:100% / padding:24px / margin:0 0 16px / border-radius:4px / 枠線は 0px */
.lw-flow__item {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	width: 100%;
	height: auto;
	margin: 0 0 16px;
	padding: 24px;
	background: #ffffff;
	border: 0 solid #c3c3c3;
	border-radius: 4px;
}

.lw-flow__body {
	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 24px 0 0;
	padding: 0;
}

.lw-flow__head {
	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 / line-height 1 / 下線 2px solid #6a6a6a */
.lw-flow__num {
	width: auto;
	height: auto;
	margin: 0 0 8px;
	padding: 0 0 2px;
	color: #6a6a6a;
	font-family: var(--s-font-dbab4593);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-align: left;
	border-bottom: 2px solid #6a6a6a;
}

/* 見出し。20px / 400 / line-height 1.1 / palt */
.lw-flow__title {
	width: auto;
	height: auto;
	color: #082b34;
	font-family: var(--s-font-dbab4593);
	font-size: 20px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	font-feature-settings: "palt" 1;
	line-height: 1.1;
	text-align: left;
}

/* 本文。14px / 400 / line-height 1.4 */
.lw-flow__text {
	width: auto;
	height: auto;
	margin: 0;
	color: #082b34;
	font-family: var(--s-font-dbab4593);
	font-size: 14px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.4;
	text-align: left;
}

/*
 * カバー画像。230×120 / border-radius 4px。
 * ★ object-fit:cover は原本に無い。原本は type:"image" のノードで、
 *   固定サイズの枠に収める＝カバー配置が STUDIO の既定挙動のため合わせている。
 */
.lw-flow__cover {
	flex: none;
	width: 230px;
	height: 120px;
	margin: 0;
	object-fit: cover;
	border-radius: 4px;
}

/* ---- ご利用の流れ のレスポンシブ ---- */

@media screen and (max-width: 840px) {

	.lw-flow__list {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		align-content: flex-start;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.lw-flow__item { flex: none; }

	.lw-flow__cover { flex: none; }
}

@media screen and (max-width: 540px) {

	.lw-flow {
		width: 100%;
		padding: 72px 16px;
	}

	/*
	 * ★ 左右 padding 16px→10px（原本は 16px・2026-09-14 変更）。
	 *   375px では本文列が 343-32-140-16=155px しか無く、01 の見出し「LINEからお問い合わせ」
	 *   （自然幅 157px・実測）が「…お問い合わ／せ」と1文字だけ落ちていた（現行も同じ）。
	 *   左右 6px ずつ詰めて列幅 167px にし1行に収める（12px＝163px でも収まるが、
	 *   375px で 04 の本文が2文字だけ最終行に残るので 10px を採用。375/430 とも本文の
	 *   1〜2文字落ちなし・実測）。項目は枠線 0・白地に白なので padding の差は見た目に出ない。
	 *   上下 16px は原本どおり。
	 */
	.lw-flow__item {
		flex: none;
		margin: 0 0 8px;
		padding: 16px 10px;
	}

	.lw-flow__body { margin: 0 16px 0 0; }

	.lw-flow__head {
		z-index: 1;
		justify-content: flex-start;
	}

	.lw-flow__num {
		font-feature-settings: "palt" 1;
		text-align: left;
		writing-mode: horizontal-tb;
		text-orientation: mixed;
	}

	.lw-flow__title {
		flex: none;
		font-size: 15px;
		text-align: left;
		writing-mode: horizontal-tb;
		text-orientation: mixed;
	}

	.lw-flow__text {
		font-size: 12px;
		text-align: left;
	}

	.lw-flow__cover {
		flex: none;
		width: 140px;
		height: 100px;
	}
}

/* ============================================================
 * 9. 料金（/8）
 *    設計ツリー: column / center / width:1080px / padding:96px 0 / background:#FFFFFF
 * ============================================================ */

/* ★ max-width:100% は原本に無い。狭い画面での横溢れ防止（.ch-section と同じ扱い）。 */
.lw-price {
	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: #ffffff;
}

/* 設計ツリー: row / wrap / align-items:flex-start / width:700px（max-width は上と同じ理由で追加） */
.lw-price__list {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	width: 700px;
	max-width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	overflow-y: auto;
}

/* ★ /6 の項目と違い align-items は flex-end（設計ツリー実値）。揃えない。 */
.lw-price__item {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-end;
	align-content: flex-end;
	justify-content: flex-start;
	width: 100%;
	height: auto;
	margin: 0 0 16px;
	padding: 24px;
	background: #ffffff;
	border: 0 solid #c3c3c3;
	border-radius: 4px;
}

.lw-price__body {
	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 24px 0 0;
	padding: 0;
}

.lw-price__head {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	align-content: flex-start;
	margin: 0 0 10px;
	padding: 0;
}

/* ラベル（Photo / Movie / Photo&Movie）。16px / 700 / #6a6a6a / 下線 2px */
.lw-price__label {
	width: auto;
	height: auto;
	margin: 0 0 8px;
	padding: 0 0 2px;
	color: #6a6a6a;
	font-family: var(--s-font-dbab4593);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-align: left;
	border-bottom: 2px solid #6a6a6a;
}

/* 名称。20px / 400 / line-height 1.4 / letter-spacing .15em / palt */
.lw-price__name {
	width: auto;
	height: auto;
	color: #082b34;
	font-family: var(--s-font-dbab4593);
	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;
}

/* ★ margin-right:24px は原本どおり（右寄せカラムだが右に24px空く作り）。 */
.lw-price__amount-wrap {
	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 / line-height 1.1 / letter-spacing .15em / palt */
.lw-price__amount {
	width: auto;
	height: auto;
	margin: 0 0 12px;
	color: #082b34;
	font-family: var(--s-font-dbab4593);
	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;
}

/* 注記。20px / 400 / line-height 1.4 / margin 20px 0 / 左寄せ */
.lw-price__note {
	width: auto;
	height: auto;
	margin: 20px 0;
	color: #082b34;
	font-family: var(--s-font-dbab4593);
	font-size: 20px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.4;
	text-align: left;
}

/* ---- 料金のレスポンシブ ---- */

@media screen and (max-width: 840px) {

	.lw-price__list {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		align-content: flex-start;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.lw-price__item { flex: none; }
}

@media screen and (max-width: 540px) {

	.lw-price {
		width: 90%;
		padding: 20px 0;
	}

	/*
	 * ★ @mobile は「ラベル＋名称」と「金額」を2段に積む（原本は1行2列・2026-09-14 変更）。
	 *   原本どおり2列だと 375px では列幅 150.5px（(337-20-16)/2）に対し、letter-spacing .15em 込みの
	 *   1行幅が名称 152/169/187px・金額 155/165/165px（実測）で入らず、
	 *   「ウェディングフォ／ト」「88,000円(税／込)〜」と語の途中で折れていた（現行サイトも同じ崩れ）。
	 *   2列のまま収めるには内寸 317px に対し最低 約341px が要り不可能なので、
	 *   1段目にラベル＋名称、2段目に金額を右寄せで置く。色・フォント・字間・順序は変えない。
	 *   flex-wrap:wrap ＋ 各子 width:100% で折り返す（align-items:flex-end は原本どおり残す）。
	 */
	.lw-price__item {
		flex: none;
		flex-wrap: wrap;
		margin: 0 0 8px;
		padding: 12px 10px;
	}

	.lw-price__body {
		flex: none;
		width: 100%;
		margin: 0;
	}

	.lw-price__head {
		z-index: 1;
		justify-content: flex-start;
	}

	.lw-price__label {
		flex: none;
		font-size: 12px;
		font-feature-settings: "palt" 1;
		text-align: left;
		writing-mode: horizontal-tb;
		text-orientation: mixed;
		border-bottom: 1px solid #6a6a6a;
	}

	.lw-price__name {
		flex: none;
		font-size: 15px;
		text-align: left;
		writing-mode: horizontal-tb;
		text-orientation: mixed;
	}

	/* 2段積み（上の .lw-price__item 参照）。金額は2段目で右寄せ（align-items:flex-end はベース値）。 */
	.lw-price__amount-wrap {
		flex: none;
		width: 100%;
		margin: 0;
	}

	.lw-price__amount {
		flex: none;
		margin: 0;  /* 2段積みで下 12px は不要（項目の padding-bottom 12px が受ける・2026-09-14） */
		font-size: 16px;
		text-align: left;
		writing-mode: horizontal-tb;
		text-orientation: mixed;
	}

	.lw-price__note { font-size: 13px; }
}

/* ============================================================
 * 10. 代表写真（/10）
 *     設計ツリー: column / center / width:1080px / padding:49px 0 / background:#FFFFFF
 *     ★ @small 〜 @mini の上書きは原本に一つも無い（写真の幅指定だけ別にある）。
 * ============================================================ */

/* ★ max-width:100% は原本に無い。狭い画面での横溢れ防止。 */
.lw-portrait {
	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: 49px 0;
	color: #082b34;
	background: #ffffff;
}

/* 設計ツリー: width:50% / 枠線 1px solid #14314a / shadow 7px 7px 3px rgba(0,0,0,.2) */
.lw-portrait__photo {
	flex: none;
	width: 50%;
	height: auto;
	border: 1px solid #14314a;
	box-shadow: 7px 7px 3px rgba(0, 0, 0, 0.2);
}

/*
 * 淡い背景画像。設計ツリー: position:absolute / top:0 / left:0 / 100%×100% /
 * opacity:0.2 / z-index:-3。
 * ★ 親（.lw-portrait）に position の指定は原本に無いので足していない。
 *   その結果この要素は初期包含ブロック基準で置かれ、かつ負の z-index のため
 *   .lw-portrait の白背景より奥に描かれる＝画面には出ない。現行サイトも同じはず。
 *   実機で「うっすら見えている」場合は .lw-portrait に position:relative を足すこと。
 */
.lw-portrait__bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -3;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0.2;
	background-image: var(--lw-portrait-bg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

@media screen and (max-width: 840px) {

	.lw-portrait__photo {
		flex: none;
		width: 60%;
	}
}

@media screen and (max-width: 540px) {

	.lw-portrait__photo {
		flex: none;
		width: 85%;
	}
}

/* ============================================================
 * 11. 締めの一文（/11）
 *     設計ツリー: 20px / 400 / line-height 2 / letter-spacing .3em /
 *                 padding 50px 0 / width 90% / text-align center
 * ============================================================ */

.lw-closing {
	flex: none;
	width: 90%;
	height: auto;
	padding: 50px 0;
	color: #082b34;
	font-family: var(--s-font-dbab4593);
	font-size: 20px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 2;
	letter-spacing: 0.3em;
	text-align: center;
}

@media screen and (max-width: 540px) {

	.lw-closing {
		padding: 29px 0;
		font-size: 15px;
		letter-spacing: 0.1em;
	}
}

@media screen and (max-width: 320px) {

	.lw-closing { font-size: 12px; }
}

/* ============================================================
 * 12. 画面下固定LINEバー（/15）
 *     設計ツリー: display:none → @mobile / @mini のみ表示。
 *     base の width:200px / height:160px / background:#EEEEEE は
 *     表示される断面が無いので「出る側（@mobile）」の値が実質すべて。
 *     @tablet の背景・余白は同じ断面で display:none のため死にスタイル。移植しない。
 * ============================================================ */

.lw-linebar {
	display: none;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 200px;
	height: 160px;
	background: #eeeeee;
}

/* 20px / 400 / #333333。Inter系フォント（設計ツリー実値） */
.lw-linebar__text {
	width: auto;
	height: auto;
	color: #333333;
	font-family: var(--s-font-f88553ee);
	font-size: 20px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.4;
	text-align: left;
}

@media screen and (max-width: 1140px) {

	.lw-linebar { display: none; }
}

@media screen and (max-width: 840px) {

	.lw-linebar { display: none; }
}

@media screen and (max-width: 540px) {

	.lw-linebar {
		position: fixed;
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 5;
		display: flex;
		flex: none;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 10px 0;
		background: linear-gradient(90deg, #32e306ff, #14c32eff);
	}

	.lw-linebar__text {
		color: #ffffff;
		font-size: 18px;
	}
}

@media screen and (max-width: 320px) {

	.lw-linebar { display: flex; }
}

/* ============================================================
 * 13. モーション配慮
 *     原本には無いが、hover の scale / transition を
 *     prefers-reduced-motion で止める（characters.css と同じ扱い）。
 * ============================================================ */

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

	.lw-header__nav-bar,
	.lw-header__line,
	.lw-photo__img,
	.lw-cta__box {
		transition: none;
	}

	.lw-header__line:hover,
	.lw-header__line:focus-visible,
	.lw-cta:hover .lw-cta__box,
	.lw-cta:focus-visible .lw-cta__box,
	.lw-photo__item:hover .lw-photo__img,
	.lw-photo__link:focus-visible .lw-photo__img {
		scale: 1 1;
	}
}