/* 添付レイアウトを一枚の広告画像として表示する */
.campaign-fv.selected-layout:not([data-period]) .hero{height:auto;min-height:0;background:#183345;display:block}
.campaign-fv.selected-layout .hero::before,.campaign-fv.selected-layout .hero-motion-bg{display:none}
.campaign-fv.selected-layout .site-header{position:absolute;left:0;top:0;width:100%;z-index:5}
.campaign-fv.selected-layout:not([data-period]) .hero-content.poster-image{display:block;width:100%;max-width:none;height:auto;min-height:0;margin:0;padding:0;transform:none}
.poster-image h1{margin:0;line-height:0}
.poster-image picture,.poster-image img{display:block;width:100%;height:auto;max-width:none}
.campaign-fv.selected-layout .person-left{left:-4%;bottom:-12%;height:80%;width:auto;max-width:none;z-index:3}
@media(max-width:760px){
 .campaign-fv.selected-layout .person-left{left:-8%;height:31%;bottom:-8%}
}

/* 題字の中心1015pxに歓迎文の可視文字中心938pxを合わせる */
.poster-image{position:relative}
.poster-image .welcome-aligned{position:absolute;width:38.8756%;height:auto;left:41.6866%;top:17.0032%;pointer-events:none}
@media(max-width:760px){.poster-image .welcome-aligned{display:none}}

/* 小さくしたPCポスターの題字中心に歓迎文を揃える */
@media(min-width:761px){.poster-image .welcome-aligned{width:31.1005%;left:33.95%;top:15.4%}}
/* 予約帯までを初期画面に収め、ポスターは縦横比を保つ */
@media(min-width:761px){
 .campaign-fv.selected-layout{--fv-image-width:min(100vw,calc((100svh - 96px)*1672/941));background:#183345}
 .campaign-fv.selected-layout:not([data-period]) .hero{height:calc(100svh - 96px);min-height:0;overflow:hidden}
 .campaign-fv.selected-layout:not([data-period]) .hero-content.poster-image{width:var(--fv-image-width);margin:0 auto;height:auto}
 .campaign-fv.selected-layout .person-left{height:80%;left:calc((100% - var(--fv-image-width))/2 - var(--fv-image-width)*.04)}
 .campaign-fv.selected-layout .reservation-links{height:96px;min-height:96px}
}
@media(max-width:760px){
 .campaign-fv.selected-layout{--fv-image-width:min(100vw,calc((100svh - 108px)*1086/1448));background:#183345}
 .campaign-fv.selected-layout:not([data-period]) .hero{height:calc(100svh - 108px);min-height:0;overflow:hidden}
 .campaign-fv.selected-layout:not([data-period]) .hero-content.poster-image{width:var(--fv-image-width);height:auto;margin:0 auto}
 .campaign-fv.selected-layout .reservation-links{height:108px;min-height:108px}
}
/* 写真の下側をトリミングして予約帯の高さを確保する */
@media(min-width:761px){
 .campaign-fv.selected-layout{--fv-image-width:min(100vw,calc((100svh - 96px)*1672/700))}
 .campaign-fv.selected-layout:not([data-period]) .hero{background:#183345 url(images/bg_new.webp) center center/cover no-repeat}
}
@media(max-width:760px){
 .campaign-fv.selected-layout:not([data-period]) .hero{height:min(calc(100svh - 108px),calc(100vw * 1448 / 1086))}
}

/* 拡大した題字の中心に歓迎文を揃える */
@media(min-width:761px){.poster-image .welcome-aligned{width:34.2105%;left:34.402%;top:12.8%}}

/* 写真・フィルター・ベクター文字を独立したレイヤーにする */
.campaign-fv.selected-layout:not([data-period]) .hero{background:#183345 url(images/bg_new.webp) center center/cover no-repeat;isolation:isolate}
.campaign-fv.selected-layout .hero.has-motion-background{background-image:none}
.campaign-fv.selected-layout .hero-motion-background{display:block;z-index:0}
.campaign-fv.selected-layout .hero::before{display:block;content:"";position:absolute;inset:0;background:rgba(20,37,39,.15);z-index:1;pointer-events:none}
.campaign-fv.selected-layout .hero-content.poster-image{position:relative;z-index:2}
.campaign-fv.selected-layout .person-left{z-index:3}

/* PCの文字全体を写真領域の上下中央に置き、12％拡大する */
@media(min-width:761px){
 .campaign-fv.selected-layout:not([data-period]) .hero-content.poster-image{
  position:absolute;left:50%;top:50%;margin:0;
  transform:translate(-50%,-50%) scale(1.12);
 }
}

/* スマホの人物を拡大し、特典の文字より左側に収める */
@media(max-width:760px){
 .campaign-fv.selected-layout .person-left{height:40%;left:-10%;bottom:-8%}
}

/* スマホのFVを予約ボタンまで画面いっぱいにし、下端の空白帯をなくす */
@media(max-width:760px){
 .campaign-fv.selected-layout:not([data-period]) .hero{height:calc(100svh - 108px)}
}

/* スマホ専用構成：左下の起点を保ち、女性を約2倍にする */
@media(max-width:760px){.campaign-fv.selected-layout .person-left{height:80%;left:-10%;bottom:-8%}}

@media(max-width:760px){.campaign-fv.selected-layout{--fv-image-width:min(100vw,calc((100svh - 108px)*1086/1900))}}
/* 画像内の透明余白も補正し、拡大前の女性の左下位置を維持する */
@media(max-width:760px){.campaign-fv.selected-layout .person-left{left:calc(-10% - (100svh - 108px)*.074)}}

/* 女性を70％に縮小し、透明余白を補正して左下の起点を維持する */
@media(max-width:760px){.campaign-fv.selected-layout .person-left{height:56%;left:calc(-10% - (100svh - 108px)*.0296);bottom:-8%}}

/* スマホの文字とカードを予約帯の上端から積み上げる */
@media(max-width:760px){
 .campaign-fv.selected-layout{--fv-image-width:min(100vw,calc((100svh - 172px)*1086/1412))}
 .campaign-fv.selected-layout:not([data-period]) .hero-content.poster-image{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);margin:0}
}

/* 特典カード削除後も、透明余白を補正した人物の位置を維持する */
.hero-mobile-composition{display:contents}
@media(max-width:760px){
 .campaign-fv.selected-layout .hero-mobile-composition{
  --woman-height:calc((100svh - 108px)*.56);
  --woman-width:calc(var(--woman-height)*493/1821);
  display:block;position:absolute;bottom:0;left:50%;z-index:3;
  width:calc(var(--woman-width) + 12px + calc(var(--fv-image-width)*544/1086));height:var(--woman-height);
  transform:translateX(-50%);
 }
 .campaign-fv.selected-layout .hero-mobile-composition .person-left{
  height:var(--woman-height);width:auto;left:calc(var(--woman-height)*-342/1821);
  bottom:calc((100svh - 108px)*-.08);
 }
}

/* スマホは2行の歓迎文・題字を上段、開催期間と案内を人物の右側に置く */
.hero-mobile-offer{display:none}
@media(max-width:760px){
 .campaign-fv.selected-layout{
  --mobile-header-bottom:40px;
  --mobile-woman-head:calc((100svh - 108px)*(.52 + .56*203/1821));
  --mobile-title-width:min(calc(100vw - 24px),480px,calc((100svh - 108px)*.52*1086/700));
  --mobile-heading-height:calc(var(--mobile-title-width)*700/1086);
  /* SVGの透明余白を除いた文字中心を、ヘッダー下端と人物の頭の間に揃える。 */
  --mobile-heading-top:calc((var(--mobile-header-bottom) + var(--mobile-woman-head))/2 - var(--mobile-title-width)*344.1263/1086);
  --mobile-person-width:calc((100svh - 108px)*.56*493/1821);
  --mobile-composition-width:calc(var(--mobile-person-width) + 12px + var(--fv-image-width)*544/1086);
  --mobile-offer-left:calc((100vw - var(--mobile-composition-width))/2 + var(--mobile-person-width) + 12px);
  --mobile-offer-width:calc(100vw - var(--mobile-offer-left) - 16px);
 }
 .campaign-fv.selected-layout:not([data-period]) .hero-content.poster-image{
  width:var(--mobile-title-width);top:var(--mobile-heading-top);
  bottom:auto;
 }
 .campaign-fv.selected-layout .hero-mobile-offer{
  display:block;position:absolute;z-index:2;
  left:var(--mobile-offer-left);width:var(--mobile-offer-width);height:auto;
  top:max(calc(var(--mobile-heading-top) + var(--mobile-heading-height) + 20px),calc((100svh - 108px)*.86 - var(--mobile-offer-width)*560/650));
 }
}