@charset "UTF-8";
/* =====================================================================
LP ウエディング（撮影特典付き展示場予約）専用スタイル
- すべて .lp-wedding 配下にスコープ（他ページに影響させない）
- 画像で組むLP：各セクション webp を width:100% で縦に積む
- SPデザイン基準 750px(2x)。PCは max-width:750px で中央寄せ表示
===================================================================== */
.lp-wedding {
--lp-max: 750px;
--lp-accent: #197662; /* CTA緑 */
--lp-gold: #c8a14e; /* ボタン金 */
--lp-text: #333;
--lp-font: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
}
/* CTAクリックで下のフォームへ滑らかにスクロール（このLPページのみ） */
html { scroll-behavior: smooth; }
/* ---- スコープ内リセット ---- */
.lp-wedding *,
.lp-wedding *::before,
.lp-wedding *::after { box-sizing: border-box; margin: 0; padding: 0; }
.lp-wedding {
color: var(--lp-text);
background: #F8F5EF;
font-family: var(--lp-font);
line-height: 1.7;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: var(--lp-max); /* PCでは750px中央寄せ（SPデザイン基準） */
margin: 0 auto;
overflow-x: clip; /* 横スクロール防止。hiddenだとスクロール文脈が出来てsticky追従が壊れるためclip */
}
.lp-wedding img { display: block; width: 100%; height: auto; }
.lp-wedding a { color: inherit; text-decoration: none; }
/* SEO/アクセシビリティ用の視覚非表示見出し */
.lp-visually-hidden {
position: absolute !important; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
/* SP等で出る共通モバイルヘッダー（WP Responsive Menu）をLPでは全面非表示 */
body.lp-wedding-body #wprmenu_bar,
body.lp-wedding-body #wprmenu_menu_ul,
body.lp-wedding-body [id^="wprmenu"],
body.lp-wedding-body [class^="wprmenu"],
body.lp-wedding-body .cbp-spmenu,
body.lp-wedding-body #mg-wprm-wrap,
body.lp-wedding-body #full-screen-search,
body.lp-wedding-body [id^="full-screen-search"],
body.lp-wedding-body .responsive-menu-button { display: none !important; }
/* SP: WP Responsive Menu の「html { padding-top:42px!important }」を詳細度で上書きして打ち消す */
html[lang] { margin-top: 0 !important; padding-top: 0 !important; background: #F8F5EF; }
body.lp-wedding-body { margin: 0 !important; padding: 0 !important; } /* 左右・上下の白余白を除去（独立テンプレのbody初期化） */
/* 画像セクション共通（積層時のすき間を完全に殺す） */
.lp-wedding .lp-fv,
.lp-wedding .lp-band,
.lp-wedding .lp-subbanner,
.lp-wedding .lp-cta,
.lp-wedding picture {
display: block;
margin: 0;
padding: 0;
font-size: 0; /* インライン空白由来のすき間防止 */
line-height: 0;
}
.lp-wedding .lp-fv img,
.lp-wedding .lp-band img,
.lp-wedding .lp-cta img,
.lp-wedding .lp-subbanner img,
.lp-wedding picture img {
display: block;
width: 100%;
vertical-align: bottom; /* ベースライン由来のすき間防止 */
}
/* 本体（ステップ〜フォーム）。SP=全幅 / PC=750px中央寄せ */
.lp-body { width: 100%; }
/* ステップ画像内「展示場一覧はこちら」に重ねる透明リンク（step.webpは SP/PC共通の1枚なので%指定でOK） */
.lp-step { position: relative; }
.lp-step-link {
position: absolute;
left: 56%; width: 28%;
top: 79.8%; height: 3.5%;
display: block;
/* 位置確認用デバッグ: background: rgba(255,0,0,.3); */
}
/* アンカー着地点：sticky ヘッダー分だけ上に余白を取り、見出しが隠れないように */
#mh-carousel { scroll-margin-top: 72px; }
/* ---- 01 ヘッダー（コード：ロゴ左＋ボタン右）。スクロール追従（PC/SP共通） ---- */
.lp-header { position: sticky; top: 0; z-index: 100; width: 100%; background: #F8F5EF; }
.lp-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
max-width: 1440px;
margin: 0 auto;
padding: 8px 16px;
}
.lp-header-logo { display: block; line-height: 0; flex: 0 1 auto; min-width: 0; }
.lp-header-logo img { display: block; width: auto; max-width: 100%; height: 34px; }
.lp-header-btn { position: relative; display: block; line-height: 0; flex: 0 0 auto; }
.lp-header-btn img { display: block; width: auto; height: 30px; }
.lp-header-btn-hover { position: absolute; inset: 0; opacity: 0; transition: opacity .2s; }
.lp-header-btn:hover .lp-header-btn-hover { opacity: 1; }
/* ---- 02 FV：緑バナーの空き位置に予約ボタン画像を重ねる（ホバーで差し替え） ---- */
.lp-fv { position: relative; }
.lp-fv picture img { aspect-ratio: 1501 / 2557; } /* SP用FVの比率を先に確保しCLS防止（ボタン画像には当てない） */
.lp-fv-cta {
position: absolute;
left: 5%; width: 90%; top: 80%; /* SP：FV内ボタン位置（cta-fv 1349/1501≒90%） */
display: block;
line-height: 0;
}
.lp-fv-cta img { display: block; width: 100%; }
.lp-fv-cta .lp-cta-hover {
position: absolute; inset: 0;
opacity: 0; transition: opacity .2s; pointer-events: none;
}
.lp-fv-cta:hover .lp-cta-hover { opacity: 1; }
/* ---- 04 サブバナー（671px幅・中央寄せ＋上下余白） ---- */
/* ガップ消しの .lp-wedding .lp-subbanner(0,2,0) に勝つよう同詳細度＋後出しで指定 */
.lp-wedding .lp-subbanner { text-align: center; background: #fff; margin: 0; padding: 20px 0 34px; } /* SP：余白は白(padding)で */
/* 詳細度を .lp-wedding 付き(0,2,1)にしてガップ消しの width:100% に勝たせる（旧 .lp-subbanner img では負けて全幅になっていた） */
.lp-wedding .lp-subbanner img { width: 89.5%; margin: 0 auto; } /* 671/750。上の参加条件の表と同幅 */
/* ---- CTA（画像全体を #form リンク・ホバーで画像差し替え） ---- */
.lp-cta { display: block; position: relative; }
.lp-cta .lp-cta-hover {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .2s;
pointer-events: none;
}
.lp-cta:hover .lp-cta-hover { opacity: 1; }
/* ---- 14 フォーム見出し＋展示場スワイプカルーセル ---- */
.lp-form-intro { background: transparent; padding-bottom: 8px; }
/* 右端に書き出し由来の1pxグレー線が残っているため、右を数pxクリップして隠す（背景＝クリームで同色なので継ぎ目なし） */
.lp-form-intro-head { display: block; width: 100%; clip-path: inset(0 3px 0 0); }
.lp-mh { position: relative; padding: 4px 0 24px; } /* position: 左右矢印の配置基準 */
.lp-mh-track {
display: flex;
gap: 16px;
margin: 0;
padding: 4px 24px 14px;
list-style: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.lp-mh-track::-webkit-scrollbar { display: none; }
.lp-mh-item {
flex: 0 0 auto;
width: 53%; /* デザイン基準 398/750。1枚＋次の覗き見え */
scroll-snap-align: start;
}
.lp-mh-card {
display: block;
width: 100%;
padding: 0;
border: 0;
border-radius: 8px;
background: #fff;
box-shadow: 0 1px 6px rgba(0,0,0,.12);
font-family: inherit;
cursor: pointer;
overflow: hidden;
}
.lp-mh-card img { display: block; width: 100%; height: auto; }
.lp-mh-addr {
display: block;
padding: 8px 8px 10px;
font-size: 14px;
line-height: 1.4;
color: #333;
text-align: left;
}
.lp-mh-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.lp-mh-dot {
width: 8px; height: 8px; border-radius: 50%; background: #d8d2c4;
border: 0; padding: 0; cursor: pointer; position: relative;
-webkit-appearance: none; appearance: none;
-webkit-tap-highlight-color: transparent;
transition: background .2s, transform .2s;
}
.lp-mh-dot::before { content: ""; position: absolute; inset: -5px; } /* タップ領域を拡大（見た目は8pxのまま） */
.lp-mh-dot:hover { transform: scale(1.25); }
.lp-mh-dot.is-active { background: var(--lp-gold); }
/* 展示場カルーセルの左右ナビ矢印（白シェブロン。縦位置はJSで画像中央に合わせる） */
.lp-mh-arrow {
position: absolute;
top: 50%; /* 初期値。JSで画像中央へ補正 */
transform: translateY(-50%);
width: 46px; height: 46px;
display: flex; align-items: center; justify-content: center;
padding: 0; border: 0; background: transparent;
cursor: pointer; z-index: 3;
-webkit-tap-highlight-color: transparent;
}
.lp-mh-prev { left: 0; }
.lp-mh-next { right: 0; }
.lp-mh-arrow::before {
content: "";
width: 20px; height: 20px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); /* 明るい写真でも視認できるよう影 */
}
.lp-mh-prev::before { transform: rotate(-135deg); margin-left: 6px; }
.lp-mh-next::before { transform: rotate(45deg); margin-right: 6px; }
.lp-mh-arrow:hover::before { border-color: #f1ece1; }
/* =====================================================================
15 フォーム（CF7実HTML）。デザイン(1:140)に寄せた最小スタイル。
実レンダリング確認後に微調整する。
===================================================================== */
/* 体裁は page-contact7.css（.wrap-form7 / .dl_kj / .must 等）に委ねる。
LP側は最小限のみ。独自の入力欄/ボタン上書きはしない（崩れの原因だったため撤去）。 */
.lp-form { background: transparent; padding: 8px 20px 24px; } /* 周囲と同じクリーム(#F8F5EF)を透過。入力欄だけ白 */
.lp-form-inner { width: 100%; margin: 0 auto; }
/* 20分クイック見学：左ラベル無しの全幅チェック行 */
.lp-form .lp-quick { margin: 4px 0 18px; }
.lp-form .lp-quick .wpcf7-list-item { margin: 0; }
.lp-form .lp-quick label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.lp-form .lp-quick .any { margin-left: 8px; vertical-align: middle; }
.lp-form .lp-quick .quick-note { margin: 6px 0 0 2px; font-size: 13px; color: #8a8a8a; }
/* =====================================================================
デザイン合わせ：フォームを「縦並び・白背景・小バッジ・緑ボタン」に
（page-contact7.css の2カラム/グレー行/大バッジを .lp-form 内で上書き）
===================================================================== */
/* 行を縦並び（ラベル上・入力欄下）＋グレー行背景を除去 */
.lp-form .dl_kj { display: block; background: transparent; margin: 0 0 8px; }
.lp-form .dl_kj dt,
.lp-form .dl_kj dd {
display: block;
width: 100%;
background: transparent;
border: 0;
padding: 0;
text-align: left;
}
.lp-form .dl_kj dt { margin: 20px 0 8px; font-weight: 700; font-size: 15px; color: #333; line-height: 1.5; }
.lp-form .dl_kj dd { margin: 0; }
/* 必須/任意バッジを小さく */
.lp-form .must,
.lp-form .any {
display: inline-block;
margin-left: 8px;
padding: 1px 7px;
font-size: 11px;
font-weight: 700;
line-height: 1.6;
border-radius: 3px;
vertical-align: middle;
}
.lp-form .must { background: #9c1944; color: #fff; }
.lp-form .any { background: #9b9b9b; color: #fff; }
/* 入力欄：白背景・細い枠 */
.lp-form .wrap-form7 input[type="text"],
.lp-form .wrap-form7 input[type="email"],
.lp-form .wrap-form7 input[type="tel"],
.lp-form .wrap-form7 textarea,
.lp-form .wrap-form7 select {
width: 100%;
padding: 12px 14px;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
font-size: 16px; /* iOSズーム防止 */
font-family: inherit;
box-sizing: border-box;
}
.lp-form .wrap-form7 textarea { min-height: 110px; }
/* 人数（大人/子ども）と日時の時間は横並び・幅自動 */
.lp-form .input-number { display: inline-flex; align-items: center; gap: 6px; margin: 0 18px 8px 0; }
.lp-form .input-number select { width: auto; }
.lp-form .wrap-form7 #raijo-time1,
.lp-form .wrap-form7 #raijo-time2 { width: auto; display: inline-block; margin-left: 8px; vertical-align: middle; }
.lp-form .wrap-form7 .date-text { display: inline-block; width: 48%; max-width: 210px; vertical-align: middle; }
/* 第二希望日を空欄に戻すクリアボタン */
.lp-form .lp-date2-clear {
display: inline-block;
margin-top: 8px;
padding: 5px 14px;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
color: #666;
font-size: 13px;
line-height: 1.4;
cursor: pointer;
transition: background .2s;
}
.lp-form .lp-date2-clear:hover { background: #f3f3f3; }
/* 郵便番号まわり */
.lp-form .yubin-mark { margin-right: 6px; }
.lp-form .auto-ad { font-size: 12px; color: #8a8a8a; margin: 4px 0 8px; }
/* 送信ボタン：緑グラデのピル型＋右シェブロン＋ドロップシャドウ（Figma準拠 / 無効時は薄く）
シェブロン「>」は背景SVGで付与するため [submit] のラベル文字は変更不要 */
.lp-form .wrap-form7 input[type="submit"],
.lp-form .wrap-form7 input[type="button"] {
display: block;
width: 100%;
max-width: 400px;
margin: 10px auto 0;
padding: 18px 48px 18px 28px; /* 右側はシェブロンの逃げ分を確保 */
border: 0;
border-radius: 999px; /* ピル型 */
background-color: #1c6650;
background-image:
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='9'%20height='15'%20viewBox='0%200%208%2014'%3E%3Cpath%20d='M1%201l6%206-6%206'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"),
linear-gradient(135deg, #2f8167 0%, #124b38 100%); /* 左上が明るい斜めグラデ */
background-repeat: no-repeat;
background-position: right 26px center, center;
background-size: 9px 15px, auto;
color: #fff;
font-size: 17px;
font-weight: 700;
letter-spacing: .08em;
line-height: 1.4;
cursor: pointer;
box-shadow: 0 8px 16px rgba(16,74,56,.28);
transition: filter .2s, box-shadow .2s;
}
/* ホバーで少し明るく＋影を強調 */
.lp-form .wrap-form7 input[type="submit"]:hover:not(:disabled),
.lp-form .wrap-form7 input[type="button"]:hover:not(:disabled) {
filter: brightness(1.06);
box-shadow: 0 10px 22px rgba(16,74,56,.34);
}
.lp-form .wrap-form7 input[type="submit"]:disabled,
.lp-form .wrap-form7 input[type="button"]:disabled {
opacity: .5;
cursor: not-allowed;
box-shadow: none;
}
/* 同意チェック（box-confirm）：中央寄せ。チェックボックス＋本文＋必須バッジを
インラインで1つの文として流す（wpautopが入れる/
もインライン化して崩れ防止） */
.lp-form .box-confirm {
display: block;
text-align: center;
max-width: 600px;
margin: 24px auto 12px;
padding: 0;
line-height: 1.9;
}
/* page-contact7.css が wpcf7 要素に付ける float:left を打ち消す（float放置だと親が高さ0に潰れる） */
.lp-form .box-confirm p,
.lp-form .box-confirm > div,
.lp-form .box-confirm .wpcf7-form-control-wrap,
.lp-form .box-confirm .wpcf7-form-control,
.lp-form .box-confirm .wpcf7-acceptance,
.lp-form .box-confirm .wpcf7-list-item,
.lp-form .box-confirm .wpcf7-list-item-label,
.lp-form .box-confirm label { display: inline; float: none; margin: 0; }
.lp-form .box-confirm label { font-weight: 400; }
.lp-form .box-confirm input[type="checkbox"] {
width: auto;
margin: 0 8px 0 0;
vertical-align: middle;
transform: translateY(-1px);
}
.lp-form .box-confirm .must { display: inline-block; float: none; margin: 0 0 0 8px; } /* 本文末尾に必須バッジを続ける */
/* ---- フッター（リンク行＋ロゴ＝白 / コピーライト＝ダーク帯） ---- */
.lp-footer { background: #fff; }
.lp-footer .lp-footer-top { padding: 30px 16px 26px; text-align: center; }
.lp-footer .lp-footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 0 0 24px;
font-size: 14px;
line-height: 1.4;
}
.lp-footer .lp-footer-links a { position: relative; padding: 4px 18px; color: #333; text-decoration: underline; }
.lp-footer .lp-footer-links a:hover { text-decoration: none; } /* オンマウスで下線を消す */
.lp-footer .lp-footer-links a + a::before {
content: "";
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
width: 1px; height: 14px;
background: #ccc;
}
.lp-footer .lp-footer-logo { margin: 0; line-height: 0; }
.lp-footer .lp-footer-logo img { display: inline-block; width: auto; height: 44px; }
.lp-footer .lp-copyright {
margin: 0;
background: #3a3a3a;
color: #fff;
text-align: center;
font-size: 12px;
letter-spacing: .03em;
padding: 16px;
}
/* =====================================================================
PC（Figma 1440px）: 768px 以上
ヘッダー/FV/フッターは1440まで全幅、本体(.lp-body)は750中央寄せ、左右#f3f3f3
===================================================================== */
@media (min-width: 768px) {
.lp-wedding {
max-width: none; /* 横は全幅（マックス） */
background: #F8F5EF; /* 本体まわりの背景 */
}
.lp-body {
max-width: 750px;
margin: 0 auto; /* 本体は750中央寄せ */
}
/* PCヘッダー：ロゴ/ボタンを少し大きく */
.lp-header-inner { padding: 12px 32px; }
.lp-header-logo img { height: 56px; }
.lp-header-btn img { height: 52px; }
.lp-wedding .lp-subbanner { margin: 0; padding: 42px 0 70px; } /* PCはFigmaどおり（白padding） */
.lp-fv picture img { aspect-ratio: 2881 / 2560; } /* PC用FVの比率 */
.lp-fv-cta { left: 28%; width: 44%; top: 80%; } /* PC：FV内ボタン位置（幅≒レタッチ線44%に合わせFigmaサイズへCTAを拡大） */
/* FV下端の継ぎ目消し：FVを全幅、本体は750中央寄せのため、step上部のベージュ余白が全幅に見える。
FVを前面にして本体を少し上に重ね、その余白をFVで隠す（SPは全幅で問題ないのでPCのみ） */
.lp-fv { z-index: 2; }
.lp-body { position: relative; z-index: 1; margin-top: -40px; }
.lp-form { padding: 40px 24px 56px; }
}