/* FVの予約導線を赤背景とゆとりのある高さに変更する */
.campaign-fv .reservation-links a,.campaign-fv .reservation-links a+a{background:#df0025;min-height:112px}
.campaign-fv .reservation-links a:hover,.campaign-fv .reservation-links a+a:hover{background:#bd0020}
@media(min-width:761px){
 .campaign-fv.selected-layout:not([data-period]) .hero{min-height:calc(100svh - 112px)}
 .campaign-fv.selected-layout:not([data-period]) .hero-content{min-height:calc(100svh - 188px)}
}
@media(max-width:760px){
 .campaign-fv .reservation-links a{height:60px;min-height:60px}
 .campaign-fv.selected-layout:not([data-period]) .hero{height:calc(100svh - 120px)}
 .booking-form select{font-size:clamp(10px,2.9vw,14px)}
}
/* スマホの予約メニューは2項目で幅を配分する */
@media(max-width:768px){#navi ul{grid-template-columns:1.4fr 1fr}}

/* 特典はタイトルを引き立てる落ち着いた配色と文字の強弱にする */
.campaign-fv.selected-layout .offer{background:rgba(237,244,241,.94);border:1px solid rgba(255,255,255,.65)}
.campaign-fv.selected-layout .step h2 .step-visit-line{display:block}
.campaign-fv.selected-layout .step h2 .or{display:block;font-size:.8em;line-height:1.5;font-weight:500}
@media(min-width:761px){
 .campaign-fv.selected-layout .reward-amount strong{font-size:78px;letter-spacing:-.045em}
 .campaign-fv.selected-layout .reward>p:first-child{font-size:24px}
 .campaign-fv.selected-layout .step-price strong{font-size:32px}
 .campaign-fv.selected-layout .step h2{font-size:14px;min-height:68px}
 .campaign-fv.selected-layout .step-gift{font-size:13px}
}
@media(max-width:760px){
 .campaign-fv.selected-layout .reward-amount strong{font-size:36px}
 .campaign-fv.selected-layout .step-price strong{font-size:24px}
 .campaign-fv.selected-layout .step h2{min-height:38px;font-size:8px}
}

/* 展示場・分譲の予約カード全体をキーカラーの枠線で囲む */
.booking-form{border:2px solid #df0025}

/* スマホの固定予約メニューに押しやすい高さを確保する */
@media(max-width:768px){
 #navi ul{height:48px}
 #navi ul li,#navi ul li:nth-of-type(n+2){height:48px}
 #navi ul li span{height:48px;min-height:48px}
 .booking-main{padding-bottom:68px}
}

/* PCのFVはタイトルと特典ボードを一緒にひと回り大きくする */
@media(min-width:1101px){
 .campaign-fv.selected-layout:not([data-period]) .hero-composition .hero-content{transform:scale(1.1);transform-origin:center center}
}

/* 都府県の選択欄が操作できることをカーソルで示す */
.booking-form select{cursor:pointer}

/* 女性を外側に寄せ、タイトルとの間隔を確保する */
@media(min-width:1101px){
 .campaign-fv.selected-layout .hero-composition .person-left{left:-130px}
}
@media(min-width:761px) and (max-width:1100px){
 .campaign-fv.selected-layout .person-left{left:-9%}
}
@media(max-width:760px){
 .campaign-fv.selected-layout .person-left{left:-20%}
}


/* FV背景のフィルター濃度は15％で確定 */
.campaign-fv[data-layout] .hero::before{background:linear-gradient(rgba(20,37,39,.15),rgba(20,37,39,.0846))}

/* FVの金額はキャンペーンタイトルより控えめな大きさと太さにする */
.campaign-fv.selected-layout .reward-amount strong,.campaign-fv.selected-layout .step-price strong{font-weight:700}
@media(min-width:761px){
 .campaign-fv.selected-layout .reward-amount strong{font-size:50px;letter-spacing:-.03em}
 .campaign-fv.selected-layout .step-price strong{font-size:26px}
}
@media(max-width:760px){
 .campaign-fv.selected-layout .reward-amount strong{font-size:29px;letter-spacing:-.03em}
 .campaign-fv.selected-layout .step-price strong{font-size:20px}
}

/* 特典は白文字と赤のアクセントを使った透過画像で表示する */
.campaign-fv.selected-layout .offer.offer-artwork{display:block;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0}
.offer-artwork picture,.offer-artwork img{display:block;width:100%;height:auto}
.offer-artwork img{filter:drop-shadow(0 2px 5px rgba(12,28,32,.45))}
@media(max-width:760px){.offer-artwork img{aspect-ratio:800 / 440}}

/* 編集しやすいHTMLの特典案内を、背景写真の透けるすりガラス面に載せる */
.campaign-fv.selected-layout .offer.offer-html{background:rgba(237,244,241,.72);border:1px solid rgba(255,255,255,.65);border-radius:12px;backdrop-filter:blur(14px) saturate(.85);-webkit-backdrop-filter:blur(14px) saturate(.85);box-shadow:0 8px 28px rgba(20,37,39,.08);color:#202628}
.campaign-fv.selected-layout .offer-html .step-number{background:transparent;color:#df0025;border-color:#df0025}
.campaign-fv.selected-layout .offer-html .steps{border-top-color:rgba(44,64,66,.25)}
.campaign-fv.selected-layout .offer-html .step:last-child{border-left-color:rgba(44,64,66,.25)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.campaign-fv.selected-layout .offer.offer-html{background:rgba(237,244,241,.94)}}

/* FV下の赤い予約帯を少し低くする */
@media(min-width:761px){
 .campaign-fv .reservation-links a{min-height:96px}
 .campaign-fv.selected-layout:not([data-period]) .hero{min-height:calc(100svh - 96px)}
 .campaign-fv.selected-layout:not([data-period]) .hero-content{min-height:calc(100svh - 172px)}
}
@media(max-width:760px){
 .campaign-fv .reservation-links a{height:54px;min-height:54px}
 .campaign-fv.selected-layout:not([data-period]) .hero{height:calc(100svh - 108px)}
}
@media(min-width:761px){.campaign-fv .reservation-links a+a{min-height:96px}}
@media(max-width:760px){.campaign-fv .reservation-links a+a{height:54px;min-height:54px}}

/* スマホの詳細画面は固定メニュー分を引いた高さにまとめる */
@media(max-width:768px){
 #navi ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 .booking-main{min-height:calc(100svh - 48px);padding:10px 10px 58px;gap:10px;justify-content:center}
 .booking-step,.booking-event{padding:12px 14px}
 .booking-marker,.booking-step-heading{margin-bottom:5px}
 .booking-content h2,.booking-event h2{margin-bottom:4px}
 .booking-reward{margin-bottom:4px}
 .booking-reward strong{font-size:34px}
 .booking-note,.booking-exclusion{font-size:11px;line-height:1.5}
 .booking-summary{padding-bottom:6px}
 .booking-form-body{padding:8px}
 .booking-form select,.booking-form button{min-height:40px;height:40px}
 .booking-event-guide{padding:10px}
 .booking-event-guide .event-examples{margin:6px 0}
 .booking-event-guide .event-examples li{padding:6px 2px}
 .booking-event-guide>p{line-height:1.5}
}
@media(max-width:760px) and (max-height:700px){
 .booking-main{padding-top:6px;padding-bottom:54px;gap:7px}
 .booking-step,.booking-event{padding:8px 10px}
 .booking-marker{padding-top:5px}
 .booking-marker b{font-size:25px}
 .booking-reward strong{font-size:30px}
 .booking-event-guide{padding:7px 9px}
}

/* 概要の期間を明示し、フッターを固定メニューの外側に配置する */
.p-secInfo_camp .campaign-period{font-weight:700}
@media(min-width:769px){
 .l-footer{margin-left:180px}
 .l-footer_nav{flex-wrap:wrap;gap:12px 24px}
 .l-footer_nav>ul{flex-wrap:wrap}
}
@media(min-width:769px) and (max-width:1100px){.l-footer{margin-left:150px}}