/* スマホでは各スライドの情報を一画面にまとめる */
@media(max-width:760px){
 .campaign-fv.selected-layout:not([data-period]) .hero{height:calc(100svh - 100px);min-height:0;display:flex;flex-direction:column}
 .campaign-fv.selected-layout:not([data-period]) .site-header{height:40px;flex:0 0 40px;padding:0 18px}
 .campaign-fv .site-header img{width:136px}
 .campaign-fv.selected-layout:not([data-period]) .hero-content{display:flex;flex-direction:column;justify-content:center;flex:1;min-height:0;padding:0 16px 12px;gap:10px}
 .campaign-fv .campaign-title{width:min(64%,230px)}
 .campaign-fv .campaign-logo img{width:100%;height:auto;max-height:27svh;object-fit:contain}
 .campaign-fv.selected-layout .offer{width:100%;padding:12px 12px 10px;border-radius:20px}
 .campaign-fv.selected-layout .offer-intro{font-size:12px;margin:0 0 3px}
 .campaign-fv.selected-layout .reward>p:first-child{font-size:18px;margin:0}
 .campaign-fv.selected-layout .reward-amount{margin:0;gap:6px;line-height:1}
 .campaign-fv.selected-layout .reward-amount strong{font-size:64px;line-height:1.1}
 .campaign-fv.selected-layout .maximum,.campaign-fv.selected-layout .yen{font-size:17px}
 .campaign-fv.selected-layout .present{font-size:16px;margin:2px 0 8px}
 .campaign-fv.selected-layout .steps{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;border-top:1px solid #aeb8b8}
 .campaign-fv.selected-layout .step{padding:8px 4px 0;border:0;background:none;display:block}
 .campaign-fv.selected-layout .step:last-child{border-left:1px solid #aeb8b8}
 .campaign-fv.selected-layout .step-number{display:inline-block;font-size:10px;padding:3px 8px}
 .campaign-fv.selected-layout .step-number b{font-size:13px}
 .campaign-fv.selected-layout .step h2{font-size:10px;min-height:32px;margin:5px 0 2px;line-height:1.5}
 .campaign-fv.selected-layout .step-gift{font-size:10px;margin:0}
 .campaign-fv.selected-layout .step-price{font-size:11px;margin:0;line-height:1.2}
 .campaign-fv.selected-layout .step-price strong{font-size:30px}
 .campaign-fv.selected-layout .plus{display:none}
 .campaign-fv.selected-layout .person{width:48%;bottom:auto;top:44px;z-index:1;max-height:33svh;object-fit:fill}
 .campaign-fv.selected-layout .person-left{left:-15%}.campaign-fv.selected-layout .person-right{right:-15%}
 .campaign-fv .reservation-links{grid-template-columns:1fr}
 .campaign-fv .reservation-links a{min-height:50px;height:50px;padding:8px 18px;font-size:12px;justify-content:space-between}
 .booking-main{padding:12px 16px 62px;display:block;margin:0;max-width:none}
 .booking-step,.booking-event{display:block}
 .booking-marker{display:flex;align-items:baseline;gap:5px;width:65px;border-top-width:2px;padding-top:3px;margin-bottom:6px;font-size:10px}
 .booking-marker b,.booking-step-heading .booking-marker b{font-size:23px;line-height:1}
 .booking-content h2,.booking-event h2{font-size:21px;line-height:1.3;margin:0 0 4px}
 .booking-content h2 br{display:none}
 .booking-content h2 span{font-size:13px;display:inline-block;margin-left:5px}
 .booking-reward{font-size:13px;gap:0 5px;margin:0 0 4px;line-height:1.4}
 .booking-reward strong{font-size:34px;line-height:1.1}
 .booking-note,.booking-exclusion{font-size:11px;line-height:1.5;margin:0}
 .booking-note br{display:none}
 .booking-summary{padding-bottom:8px}
 .booking-form{grid-template-columns:23% minmax(0,1fr);position:relative}
 .booking-form>img{position:absolute;width:23%;height:100%;min-height:0;object-fit:cover}
 .booking-form-body{grid-column:2;padding:10px 12px}
 .booking-form-title{font-size:13px;line-height:1.4;margin-bottom:6px}
 .booking-form-title small{font-size:10px;display:inline;margin-right:4px}
 .booking-form label{font-size:10px;line-height:1.5;margin-bottom:3px}
 .booking-form select{height:38px;font-size:16px;padding:0 8px}
 .booking-form button{min-height:38px;margin-top:6px;font-size:11px;padding:8px}
 .booking-event{margin-top:12px;padding-top:10px;border-top:1px solid #d7dcda}
 .booking-step-heading{gap:12px;margin-bottom:6px}
 .booking-step-heading .booking-marker{width:65px;margin-bottom:0}
 .booking-step-heading .booking-event-intro{font-size:10px;line-height:1.4;padding:6px 9px;border-radius:7px}
 .booking-event-guide{padding:10px 12px;margin:0;font-size:11px;line-height:1.6}
 .booking-event-guide .event-examples{gap:5px;margin:8px 0}
 .booking-event-guide .event-examples li{font-size:10px;padding:6px 2px;gap:3px}
 .event-examples svg{width:20px;height:20px}
 .booking-event-guide small{font-size:10px;line-height:1.5}
 #navi ul li span{min-height:48px}
}
@media(max-width:760px) and (max-height:700px){
 .booking-main{padding-top:8px;padding-bottom:54px}
 .booking-content h2,.booking-event h2{font-size:19px}
 .booking-event{margin-top:8px;padding-top:7px}
 .booking-form-body{padding:8px 10px}
 .booking-event-guide{padding:8px 10px}
 .booking-event-guide .event-examples{margin:6px 0}
 .campaign-fv.selected-layout .hero-content{gap:6px}
 .campaign-fv .campaign-logo img{max-height:24svh}
 .campaign-fv.selected-layout .offer{padding:8px 10px}
 .campaign-fv.selected-layout .reward-amount strong{font-size:54px}
}
/* 高さの小さい端末では、直上の見出しと重複するカードタイトルを省く */
@media(max-width:760px) and (max-height:700px){
 .booking-form-title{display:none}
 .booking-form{grid-template-columns:1fr}
 .booking-form>img{display:none}
 .booking-form-body{grid-column:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 8px}
 .booking-form label{grid-column:1 / -1;margin:0}
 .booking-form button{margin:0;font-size:10px;line-height:1.4}
 .booking-form select{height:40px}
}
@media(max-width:360px) and (max-height:600px){
 .booking-main{padding:6px 10px 52px}
 .booking-content h2,.booking-event h2{font-size:17px}
 .booking-content h2 span{font-size:11px}
 .booking-marker{margin-bottom:4px}.booking-marker b,.booking-step-heading .booking-marker b{font-size:21px}
 .booking-reward{font-size:11px;gap:0 3px}.booking-reward strong{font-size:30px}
 .booking-note,.booking-exclusion{font-size:10px;line-height:1.4}
 .booking-summary{padding-bottom:5px}
 .booking-event-guide{font-size:10px;line-height:1.4;padding:7px 8px}
 .booking-event-guide small{font-size:9px;line-height:1.4}
 .booking-event-guide .event-examples li{font-size:9px;padding:4px 1px}
 .booking-event-guide .event-examples{margin:5px 0}
 .booking-step-heading{gap:8px;margin-bottom:4px}
 .booking-step-heading .booking-event-intro{font-size:9px;padding:5px 7px}
}
/* スマホFVは大きなタイトルを主役に、人物を下部左右へ配置する */
@media(max-width:760px){
 .campaign-fv.selected-layout:not([data-period]) .hero-content{justify-content:flex-start;padding-bottom:70px;gap:8px}
 .campaign-fv .campaign-title{width:min(88%,330px);flex-shrink:0}
 .campaign-fv .campaign-logo img{max-height:30svh}
 .campaign-fv.selected-layout .person{top:auto;bottom:-44px;width:43%;max-height:none;height:auto;z-index:3}
 .campaign-fv.selected-layout .person-left{left:-10%}
 .campaign-fv.selected-layout .person-right{right:-10%}
 .campaign-fv.selected-layout .offer{position:relative;z-index:4}
}
@media(max-width:760px) and (max-height:700px){
 .campaign-fv.selected-layout:not([data-period]) .hero-content{gap:5px;padding-bottom:42px}
 .campaign-fv .campaign-logo img{max-height:27svh}
 .campaign-fv.selected-layout .person{width:38%;bottom:-38px}
 .campaign-fv.selected-layout .offer-intro{font-size:11px}
 .campaign-fv.selected-layout .reward>p:first-child{font-size:16px}
 .campaign-fv.selected-layout .reward-amount strong{font-size:46px}
 .campaign-fv.selected-layout .present{font-size:13px;margin-bottom:5px}
 .campaign-fv.selected-layout .step{padding-top:5px}
 .campaign-fv.selected-layout .step-price strong{font-size:26px}
}
/* 人物が特典の文字に重ならないよう下端に収める */
@media(max-width:760px){
 .campaign-fv.selected-layout .person{height:20svh;width:auto;aspect-ratio:2947 / 4473;bottom:-10svh}
 .campaign-fv.selected-layout .person-left{left:-2%}.campaign-fv.selected-layout .person-right{right:-2%}
}
@media(max-width:760px) and (max-height:600px){
 .campaign-fv .campaign-logo img{max-height:23svh}
 .campaign-fv.selected-layout .offer{padding-top:5px;padding-bottom:5px}
 .campaign-fv.selected-layout .step h2{font-size:9px;min-height:27px}
 .campaign-fv.selected-layout .step-gift{font-size:9px}
 .campaign-fv.selected-layout .person{height:16svh;bottom:-8svh}
}
/* 人物を特典パネル下部の左右に重ね、中央の金額と説明を避ける */
@media(max-width:760px){
 .campaign-fv.selected-layout .person{height:24svh;width:auto;bottom:-5svh;z-index:3}
 .campaign-fv.selected-layout .person-left{left:-8%}
 .campaign-fv.selected-layout .person-right{right:-8%}
 .campaign-fv.selected-layout .step{padding-left:14px;padding-right:14px}
}
@media(max-width:760px) and (max-height:700px){
 .campaign-fv.selected-layout .person{height:21svh;bottom:-5svh}
}
/* 画面の余裕をSTEP間と見出し周辺の余白に配分する */
@media(max-width:760px){
 .booking-main{min-height:100svh;display:flex;flex-direction:column;justify-content:space-evenly;gap:12px;padding-top:18px;padding-bottom:64px}
 .booking-marker{margin-bottom:10px}
 .booking-content h2,.booking-event h2{margin-bottom:10px}
 .booking-reward{margin-bottom:9px}
 .booking-summary{padding-bottom:12px}
 .booking-event{margin-top:0;padding-top:14px}
 .booking-step-heading{margin-bottom:10px}
 .booking-event-guide{padding:14px}
 .booking-event-guide .event-examples{margin:12px 0}
}
@media(max-width:760px) and (max-height:740px){
 .booking-form-title{display:none}
 .booking-form{grid-template-columns:1fr}
 .booking-form>img{display:none}
 .booking-form-body{grid-column:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px 8px}
 .booking-form label{grid-column:1 / -1;margin:0}
 .booking-form button{margin:0;font-size:10px;line-height:1.4}
 .booking-form select{height:40px}
 .booking-main{padding-top:12px;padding-bottom:54px;gap:10px}
 .booking-content h2,.booking-event h2{margin-bottom:7px}
 .booking-reward{margin-bottom:6px}
 .booking-marker{margin-bottom:7px}
 .booking-summary{padding-bottom:9px}
 .booking-event{padding-top:10px}
 .booking-step-heading{margin-bottom:7px}
 .booking-event-guide{padding:10px 12px}
 .booking-event-guide .event-examples{margin:9px 0}
}
@media(max-width:760px) and (max-height:600px){
 .booking-main{padding-top:8px;padding-bottom:52px;gap:8px}
 .booking-content h2,.booking-event h2{margin-bottom:5px}
 .booking-reward{margin-bottom:5px}
 .booking-summary{padding-bottom:7px}
 .booking-event-guide{padding:8px 10px}
 .booking-event-guide .event-examples{margin:7px 0}
}
@media(max-width:760px) and (max-height:650px){.booking-main{padding-top:6px;padding-bottom:50px;gap:6px}.booking-event{padding-top:8px}}
/* 特典パネルを低くし、下部の人物を大きく見せる */
@media(max-width:760px){
 .campaign-fv.selected-layout .offer{padding:10px 10px 8px}
 .campaign-fv.selected-layout .offer-intro{font-size:11px;margin:0 0 2px}
 .campaign-fv.selected-layout .reward>p:first-child{font-size:16px;line-height:1.3}
 .campaign-fv.selected-layout .reward-amount strong{font-size:52px;line-height:1}
 .campaign-fv.selected-layout .reward-amount{gap:5px}
 .campaign-fv.selected-layout .present{font-size:12px;line-height:1.3;margin:2px 0 6px}
 .campaign-fv.selected-layout .step{display:grid;grid-template-columns:1fr;justify-items:center;gap:2px;padding:6px 5px 0}
 .campaign-fv.selected-layout .step-number{padding:1px 6px;line-height:1.3}
 .campaign-fv.selected-layout .step h2{margin:2px 0;min-height:28px;font-size:9px;line-height:1.4;display:flex;flex-direction:column;justify-content:center}
 .campaign-fv.selected-layout .step-gift{display:none}
 .campaign-fv.selected-layout .step-price{font-size:10px;line-height:1.1}
 .campaign-fv.selected-layout .step-price strong{font-size:27px}
 .campaign-fv.selected-layout .person{height:48svh;bottom:-15svh;width:auto}
 .campaign-fv.selected-layout .person-left{left:-17%}
 .campaign-fv.selected-layout .person-right{right:-17%}
}
@media(max-width:760px) and (max-height:700px){
 .campaign-fv.selected-layout .reward-amount strong{font-size:44px}
 .campaign-fv.selected-layout .person{height:42svh;bottom:-15svh}
}
/* パネルはタイトルへ寄せ、人物の顔が説明・金額を隠さない位置に置く */
@media(max-width:760px){
 .campaign-fv.selected-layout .offer{top:-54px}
 .campaign-fv.selected-layout .person{bottom:-23svh}
}
@media(max-width:760px) and (max-height:700px){
 .campaign-fv.selected-layout .offer{top:-16px}
 .campaign-fv.selected-layout .person{bottom:-23svh}
}
/* 特典の上段を2カラムにして、ロゴと日付を大きく見せる */
@media(max-width:760px){
 .campaign-fv.selected-layout:not([data-period]) .hero-content{justify-content:space-between;padding:0 12px 76px;gap:8px}
 .campaign-fv .campaign-title{width:100%;max-width:420px}
 .campaign-fv .campaign-logo img{width:100%;max-height:40svh}
 .campaign-fv.selected-layout .offer{top:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);column-gap:8px;row-gap:2px;padding:12px 10px 9px}
 .campaign-fv.selected-layout .offer-intro{grid-column:1;grid-row:1;margin:0;font-size:11px;line-height:1.5;align-self:end}
 .campaign-fv.selected-layout .reward{display:contents}
 .campaign-fv.selected-layout .reward>p:first-child{grid-column:1;grid-row:2;margin:0;font-size:14px;line-height:1.4;align-self:start}
 .campaign-fv.selected-layout .reward-amount{grid-column:2;grid-row:1 / span 2;align-self:center;display:flex;justify-content:center;align-items:baseline;gap:2px;white-space:nowrap}
 .campaign-fv.selected-layout .reward-amount strong{font-size:45px}
 .campaign-fv.selected-layout .maximum,.campaign-fv.selected-layout .yen{font-size:12px}
 .campaign-fv.selected-layout .present{grid-column:2;grid-row:3;margin:0 0 5px;font-size:11px}
 .campaign-fv.selected-layout .steps{grid-column:1 / -1;grid-row:4}
}
@media(max-width:760px) and (max-height:700px){
 .campaign-fv.selected-layout:not([data-period]) .hero-content{padding-bottom:48px;gap:5px}
 .campaign-fv .campaign-logo img{max-height:36svh}
 .campaign-fv.selected-layout .offer{top:0;padding:8px 8px 7px;column-gap:5px}
 .campaign-fv.selected-layout .reward-amount strong{font-size:40px}
}
@media(max-width:360px){
 .campaign-fv.selected-layout .offer-intro{font-size:10px}
 .campaign-fv.selected-layout .reward>p:first-child{font-size:12px}
 .campaign-fv.selected-layout .reward-amount strong{font-size:35px}
 .campaign-fv.selected-layout .maximum,.campaign-fv.selected-layout .yen{font-size:11px}
}
/* 下へ移したパネルの金額を隠さず、人物を下端に重ねる */
@media(max-width:760px){.campaign-fv.selected-layout .person{bottom:-30svh}}
@media(max-width:760px) and (max-height:700px){.campaign-fv.selected-layout .person{bottom:-26svh}}
/* 実機参考のバランス：大きなロゴ、下寄せの特典、左右の人物 */
@media(max-width:760px){
 .campaign-fv.selected-layout:not([data-period]) .hero-content{display:flex;justify-content:space-between;padding:0 12px 24px;gap:10px}
 .campaign-fv .campaign-title{width:100%;max-width:440px;min-height:0;flex:1;display:flex;align-items:center;justify-content:center}
 .campaign-fv .campaign-logo{width:100%;margin:0}
 .campaign-fv .campaign-logo img{width:100%;max-height:44svh;object-fit:contain}
 .campaign-fv.selected-layout .offer{top:0;flex-shrink:0;margin:0;width:100%}
 .campaign-fv.selected-layout .person{height:42svh;bottom:-19svh}
 .campaign-fv.selected-layout .person-left{left:-17%}
 .campaign-fv.selected-layout .person-right{right:-17%}
}
@media(max-width:760px) and (min-height:760px){
 .campaign-fv.selected-layout:not([data-period]) .hero-content{padding-bottom:46px}
 .campaign-fv.selected-layout .offer{padding-top:14px;padding-bottom:12px}
 .campaign-fv.selected-layout .step{padding-top:9px;gap:4px}
}
/* 特典パネルの左右に少し余白を増やす */
@media(max-width:760px){.campaign-fv.selected-layout .offer{width:94%;align-self:center}}
/* スマホでは上下のSTEPに写真を全面表示する */
@media(max-width:760px){
 .booking-main{position:relative;isolation:isolate}
 .booking-step{position:static;isolation:auto}
 .booking-step:after{inset:0 0 auto;height:50%;width:100%;border-radius:0}
 .booking-step.booking-event:after{top:50%}
 .booking-event{border:0}
 #navi ul li span{color:#fff}
 #navi ul li span.selected{color:#fff;background:#ed001b}
}
/* スマホは上下に写真を分けて同じすりガラスを重ねる */
@media(max-width:760px){
 .booking-main{background-position:center top,center bottom;background-size:100% 50%,100% 50%;padding-left:10px;padding-right:10px}
 .booking-step,.booking-event{position:relative;padding:10px;border:0;border-radius:14px;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(5px) saturate(.85);backdrop-filter:blur(5px) saturate(.85)}
 .booking-step:after{display:none}
}
@media(max-width:760px) and (max-height:700px){.booking-step,.booking-event{padding:7px}}
@media(max-width:760px){
 .booking-main:before,.booking-main:after{width:100%;height:50%;bottom:auto;left:0;right:0}
 .booking-main:after{top:50%}
}
@media(max-width:360px) and (max-height:600px){
 .booking-main{padding-left:4px;padding-right:4px;gap:4px;padding-top:4px}
 .booking-step,.booking-event{padding:5px}
 .booking-event-guide{padding:6px}
 .booking-event-guide .event-examples{margin:4px 0}
 .booking-summary{padding-bottom:4px}
 .booking-step-heading{margin-bottom:4px}
}
@media(max-width:760px){#title-tenjijo{font-size:18px}#title-tenjijo span{font-size:13px;margin-left:5px}}
@media(max-width:760px) and (max-height:700px){#title-tenjijo{font-size:16px}}
@media(max-width:360px) and (max-height:600px){#title-tenjijo{font-size:15px}#title-tenjijo span{font-size:11px}}
@media(max-width:760px){.booking-content h2,.booking-event h2{font-size:18px}.booking-content h2 span{font-size:13px;margin-left:5px}}
@media(max-width:760px) and (max-height:700px){.booking-content h2,.booking-event h2{font-size:16px}}
@media(max-width:360px) and (max-height:600px){.booking-content h2,.booking-event h2{font-size:15px}.booking-content h2 span{font-size:11px}}

/* スマホの下部ナビは1行・薄いバーにする */
.nav-mobile-label{display:none}
#navi b{font-weight:inherit}
@media(max-width:768px){
 #navi .nav-desktop-label{display:none}
 #navi .nav-mobile-label{display:inline}
 #navi{padding:0}
 #navi ul{display:grid;grid-template-columns:1.55fr 1fr 1fr;height:36px;align-items:stretch}
 #navi ul li,#navi ul li:nth-of-type(n+2){height:36px;margin:0;min-width:0}
 #navi ul li span{height:36px;min-height:36px;padding:0 4px;line-height:1.2;font-size:clamp(8px,2.5vw,11px);white-space:nowrap;letter-spacing:0;display:flex;align-items:center;justify-content:center}
}

/* 特典の導入文をスマホでも1行に収める */
@media(max-width:760px){
 .campaign-fv.selected-layout .offer-intro{font-size:clamp(8px,2.2vw,11px);white-space:nowrap;letter-spacing:-.025em}
}

/* スマホの罫線を一本に揃え、人物を避けてSTEPの内容を中央に寄せる */
@media(max-width:760px){
 .campaign-fv.selected-layout .step:last-child{border-top:0;border-left:1px solid #aeb8b8}
 .campaign-fv.selected-layout .step:first-child>*{position:relative;left:10px}
 .campaign-fv.selected-layout .step:last-child>*{position:relative;left:-10px}
}

/* スマホの予約STEPは、枠の内側と情報の区切りに余白を持たせる */
@media(max-width:760px){
 .booking-main{justify-content:center;gap:20px;padding-top:20px;padding-bottom:56px}
 .booking-step,.booking-event{padding:18px 16px}
 .booking-event{margin-top:0}
 .booking-marker,.booking-step-heading{margin-bottom:14px}
 .booking-step-heading .booking-marker{margin-bottom:0}
 .booking-content h2,.booking-event h2{margin-bottom:16px}
 .booking-reward{margin-bottom:10px}
 .booking-note,.booking-exclusion{line-height:1.7}
 .booking-exclusion{margin-top:5px}
 .booking-summary{padding-bottom:16px}
 .booking-form-body{padding:12px}
 .booking-event-guide{padding:14px 12px}
 .booking-event-guide .event-examples{margin:12px 0;gap:6px}
 .booking-event-guide .event-examples li{padding:9px 2px;gap:5px}
}
@media(max-width:360px){
 .booking-step,.booking-event{padding:16px 12px}
 .booking-reward{gap:0 3px}
}

/* スマホのイベント例はアイコンと名称を横並びにして高さを抑える */
@media(max-width:760px){
 .booking-event-guide .event-examples li{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:4px;padding:8px 3px;font-size:clamp(8px,2.2vw,10px);line-height:1.35;white-space:nowrap}
 .booking-event-guide .event-examples svg{width:16px;height:16px;flex-shrink:0}
}

/* スマホは枠内の余白を保ちつつ、情報同士の縦間隔をコンパクトにする */
@media(max-width:760px){
 .booking-marker,.booking-step-heading{margin-bottom:8px}
 .booking-step-heading .booking-marker{margin-bottom:0}
 .booking-content h2,.booking-event h2{margin-bottom:6px}
 .booking-reward{margin-bottom:6px}
 .booking-exclusion{margin-top:3px}
 .booking-summary{padding-bottom:10px}
 .booking-event-guide .event-examples{margin:8px 0}
 .booking-main{gap:14px}
}

/* スマホの都道府県選択欄の文字を少し小さくする */
@media(max-width:760px){
 .booking-form select{font-size:14px}
}