@import url('./variables.css');
@import url('./reset.css');

/* 本文は通常フロー、波線・車両のみ支給素材の装飾座標。 */
html { scroll-padding-top: 106px; }
html.menu-open { overflow: hidden; }
:root { --color-text-sub: #777; --layout-content-width: 920px; }
body { overflow-wrap: break-word; }
h1,h2,h3 { font-weight: 500; }
[hidden],.hidden { display: none !important; }
.site-wrapper { max-width: 1440px; margin-inline: auto; overflow: clip; }
main section,footer { position: relative; }
.sp-only { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.site-header { position: sticky; top: 0; z-index: 20; background: #fff; height: 90px; padding: 16px 32px 21px; display: flex; align-items: center; justify-content: space-between; }
.header-brand { display: flex; flex-direction: column; align-items: center; width: 125px; gap: 3px; }
.header-brand-caption { font-size: 8px; font-weight: 700; line-height: 1.4; }
.header-brand-reading { font-size: 6px; line-height: 1; letter-spacing: .25em; }
.header-logo { width: 125px; height: auto; }
.header-nav { width: 620px; display: flex; gap: 32px; color: #777; font-size: 14px; line-height: 24px; }
.menu-button { display: none; }
.hero { height: auto; }
.hero-art { position: relative; width: 100%; aspect-ratio: 1440 / 707; }
.hero h1 { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.decoration-canvas { position: absolute; top: 0; left: 50%; width: 1440px; transform: translateX(-50%) scale(var(--art-scale,1)); transform-origin: top center; pointer-events: none; }
.decoration-canvas picture,.decoration-canvas .balloon { position: absolute; }
.decoration-canvas img { max-width: none; }
.message { padding: 55px 20px 182px; text-align: center; }
.message h2 { position: relative; font-size: 46px; line-height: 75px; color: var(--color-gold); }
.message p { position: relative; margin-top: 33px; font-size: 20px; line-height: 50px; color: #777; }
.message-wave { left: 0; top: 0; }
.message-wave img { width: 1440px; height: 670px; }

.balloon-0 { left: 92px; top: 116px; width: 40px; height: 110px;  }
.balloon-1 { left: 302px; top: 422px; width: 44px; height: 145px;  }
.balloon-2 { left: 1190px; top: 56px; width: 70px; height: 190px;  }
.balloon-3 { left: 1085px; top: 229px; width: 40px; height: 125px;  }
.red-train { left: 401.316px; top: 576.469px; }
.red-train img { width: 152.031px; height: 57.96px; }
.campaign { padding: 60px 40px 73px; }
.campaign h2 { font-size: 36px; line-height: 61px; color: var(--color-gold); text-align: center; margin-bottom: 38px; }
.campaign-grid { width: 100%; max-width: 920px; margin-inline: auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; align-items: stretch; overflow: clip; }
.campaign-card { height: 100%; min-height: 286px; padding: 20px; background: #fff3e9; border-radius: 4px; display: flex; flex-direction: column; gap: 16px; }
.campaign-image { height: 137px; flex: none; background: #dbdbdb; border-radius: 4px; position: relative; display: grid; place-items: center; }
.campaign-card p { font-size: 18px; line-height: 31px; }
.campaign-card:first-child { background: #f9dfe7; }
.campaign-card.ended { background: #edf7f8; }
.campaign-image span { background: #777; color: white; text-align: center; width: calc(100% - 24px); font-size: 14px; line-height: 28px; }
.toggle { display: flex; justify-content: center; align-items: center; gap: 16px; width: max-content; max-width: 100%; margin-inline: auto; color: var(--color-gold); font-size: 18px; font-weight: 500; line-height: 31px; min-height: 40px; }
.toggle-icon { flex: 0 0 40px; }
.toggle-icon img { width: 40px; height: 40px; }
.campaign .toggle { margin-top: 56px; }
.campaign.is-expanded { padding-bottom: 70px; }
.campaign.is-expanded .toggle { margin-top: 48px; }
.toggle[aria-expanded="true"] .toggle-icon { transform: rotate(180deg); }
.history { padding: 51px 40px 148px; background: linear-gradient(180deg,#fff 0%,#edf7f8 18%,#edf7f8 80%,#fff 100%); }
.history h2 { position: relative; font-size: 42px; line-height: 61px; text-align: center; color: var(--color-gold); margin-bottom: 92px; }
.history-wave { top: 114px; }
.history-wave img { width: 1444.6px; height: 1197px; }
.history-wave-expanded { display: none; }
.history.is-expanded .history-wave-normal { display: none; }
.history.is-expanded .history-wave-expanded { display: block; }
.history.is-expanded .history-wave img { height: 1677px; }
.timeline { list-style: none; overflow: clip; padding: 0 14px 20px; position: relative; width: 100%; max-width: 920px; margin-inline: auto; display: grid; grid-template-columns: minmax(0,420fr) minmax(0,420fr); column-gap: 80px; grid-template-rows: repeat(4, auto); row-gap: 22px; }
.timeline-item { position: relative; min-width: 0; isolation: isolate; }
.year { display: block; font-size: 48px; line-height: 71px; margin-bottom: -16px; color: #d6afc3; }
.history-card { position: relative; width: calc(100% - 50px); min-height: 149px; padding: 20px; background: transparent; border-radius: 4px; }

.history-row { display: flex; align-items: center; gap: 16px; }
.history-text { flex: 1; min-width: 0; font-size: 18px; line-height: 26px; }
.history-text h3 { color: var(--color-gold); font-size: inherit; margin-bottom: 2px; }
.history-photo { flex: 0 0 120px; width: 120px; height: auto; object-fit: contain; }

.history-note { font-size: 14px; line-height: 23px; color: #777; margin-top: 12px; }
.history-logo { width: 166px; height: 130.82px; margin: 2px auto 0; }
.item-0 { grid-column: 1; grid-row: 1; }
.item-1 { grid-column: 2; grid-row: 2; }
.item-2 { grid-column: 2; grid-row: 3; }
.item-3 { grid-column: 1; grid-row: 4; }
.item-hotel { grid-column: 1; grid-row: 5; }
.item-4 { grid-column: 2; grid-row: 6; }
.item-0 .year,.item-3 .year,.item-5 .year,.item-7 .year { text-align: right; }
.item-1 .history-card,.item-4 .history-card,.item-6 .history-card { margin-left: 50px; }
.item-2 .history-card { margin-left: 92px; }
.item-2 .year { display: none; }
.item-3 .history-card { min-height: 149px; }
.item-1 .year { color: #efb3b5; }.item-3 .year { color: #ffa9bc; }.item-4 .year { color: #ffb6bc; }.item-5 .year { color: #b6d4e5; }.item-6 .year { color: #c3d5ad; }.item-7 .year { color: #d1bddb; }
.history .toggle { position: relative; margin-top: 67px; }
.history.is-expanded { padding-bottom: 133px; }
.history.is-expanded .timeline { grid-template-rows: repeat(9, auto); }
.item-5 { grid-column: 1; grid-row: 7; }
.item-6 { grid-column: 2; grid-row: 8; }
.item-7 { grid-column: 1; grid-row: 9; }
.item-6 .history-card { min-height: 177px; }.item-7 .history-card { min-height: 227px; }
/* 既存の下余白内へ配置し、展開状態でもポインターで閉じられる。 */
.history.is-expanded .toggle { position: absolute; margin: 0; bottom: 40px; left: 50%; transform: translateX(-50%); }

.blue-train-question { display: none; }
.blue-train { left: 869.155px; top: 569.376px; }
.blue-train img { width: 152.497px; height: 38.997px; }

.site-footer { background: linear-gradient(transparent 264px,#eef7f7 264px); padding: 20px 20px 18.812px; min-height: 601px; display: flex; flex-direction: column; align-items: center; }




.footer-sns { position: relative; display: flex; align-items: flex-start; gap: 51.78px; margin-top: 34px; height: 62px; }


.footer-logo { position: relative; width: 162px; height: auto; margin-top: 53px; }
.copyright { position: relative; margin-top: 55px; font-size: 10px; line-height: 17px; color: #777; text-align: center; }

@media (min-width:1001px) and (max-width:1100px) {
 .header-nav { width: auto; gap: 20px; font-size: 12px; }
 .message h2 { font-size: 38px; }.message p { font-size: 18px; }
 .timeline { column-gap: 40px; }.history-card { width: calc(100% - 30px); padding: 16px; }.history-text { font-size: 16px; }.history-row { gap: 10px; }.history-photo { flex-basis: 92px; width: 92px; height: auto; }
 .item-1 .history-card,.item-4 .history-card,.item-6 .history-card { margin-left: 30px; }.item-2 .history-card { margin-left: 40px; }

}
@media (max-width:1000px) {
 html { scroll-padding-top: 80px; }
 .pc-only { display: none; }.sp-only { display: initial; }
 .site-header { height: 64px; padding: 12px 16px 16px; }.header-brand { width: 86px; gap: 2px; }.header-brand-caption { font-size: 5.5px; }.header-brand-reading { font-size: 5px; }.header-logo { width: 86px; height: auto; }
 .menu-button { display: block; width: 24px; height: 24px; }.header-nav { display: none; }
 .header-nav.is-open { display: flex; position: absolute; top: 64px; left: 0; width: 100%; z-index: 5; flex-direction: column; align-items: center; color: #48b9ae; padding: 32px 20px 42px; gap: 26px; background: linear-gradient(#fff,#eef7f7); border-radius: 0 0 22px 22px; box-shadow: 0 4px 8px #0001; }

 .decoration-canvas { width: 390px; transform: translateX(-50%) scale(var(--sp-scale,1)); }
 .message { padding: 108px 20px 111px; }.message h2 { font-size: 24px; line-height: 41px; }.message p { margin-top: 20px; font-size: 15px; line-height: 34px; }
 .message-wave { left: -4.329px; }.message-wave img { width: 394.329px; height: 600px; }

 .balloon-0 { left: 27px; top: 7px; width: 22px; height: 66px;  }
 .balloon-1 { left: 36px; top: 193px; width: 36px; height: 140px;  }
 .balloon-2 { left: 336px; top: 66px; width: 32px; height: 100px;  }
 .balloon-3 { left: 327px; top: 436px; width: 27px; height: 85px;  }
 .red-train { left: 60.994px; top: 552.397px; }.red-train img { width: 79.628px; height: 27.014px; }
 .campaign { padding: 40px 20px 33px; }.campaign h2 { font-size: 22px; line-height: 37px; margin-bottom: 33px; }
 .campaign-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; max-width: 550px; }.campaign-card { min-height: 216px; padding: 16px; gap: 12px; }.campaign-image { height: 75px; }.campaign-card p { font-size: 15px; line-height: 23px; }
 .campaign-image span { font-size: 9px; line-height: 22px; width: calc(100% - 14px); }
 .toggle { font-size: 14px; line-height: 24px; min-height: 30px; gap: 12px; }.toggle-icon { flex-basis: 30px; }.toggle-icon img { width: 30px; height: 30px; }
 .campaign .toggle { margin-top: 39px; }.campaign.is-expanded { padding-bottom: 34px; }.campaign.is-expanded .toggle { margin-top: 38px; }
 .history { padding: 33px 20px 71px; }.history h2 { font-size: 25px; line-height: 43px; margin-bottom: 58px; }
 .history-wave { top: 44px; }.history-wave img { width: 392.886px; height: 1070px; }.history.is-expanded .history-wave img { height: 1529px; }
 .timeline { padding-inline: 0; overflow: visible; }
 .timeline,.history.is-expanded .timeline { display: flex; flex-direction: column; max-width: 350px; gap: 30px; }
 .timeline-item { display: flex; gap: 25px; }.year { flex: 0 0 52px; font-size: 22px; line-height: 32px; margin: 0; text-align: left !important; }
 .history-card { flex: 1; min-width: 0; width: auto; min-height: 118px; padding: 16px; }
 .history-row { gap: 10px; }.history-text { font-size: 15px; line-height: 23px; }.history-text h3 { margin-bottom: 1px; }.history-photo { flex: 0 0 86px; width: 86px; height: auto; }
 .history-note { font-size: 12px; line-height: 20px; margin-top: 5px; }.history-logo { width: 126px; height: 99.304px; }
 .item-0 .history-card { min-height: 141px; }.item-0 .year { color: #abcfd8; }
 .item-1 .history-card { margin: 0 17px 0 0; min-height: 119px; }.item-1 .history-text { line-height: 21.25px; }
 .item-2 { margin-top: -16px; }.item-2 .year { display: block; }.item-2 .history-card { margin-left: 17px; }
 .item-3 .history-card { min-height: 118px; }.item-4 .history-card,.item-6 .history-card { margin-left: 0; }.item-4 .year { color: #c3d5ad; }
 .item-5 .history-card { min-height: 119px; }.item-6 .history-card { min-height: 138px; }.item-6 .history-text { line-height: 21px; }.item-7 .history-card { min-height: 178px; }.item-7 .history-text { line-height: 22px; }
 .history .toggle { margin-top: 49px; }.history.is-expanded { padding-bottom: 84px; }.history.is-expanded .toggle { bottom: 20px; margin: 0; }

 .blue-train { left: 244.459px; top: 394.14px; }.blue-train img { width: 80.068px; height: 16.82px; }

 .blue-train-question { left: 235.397px; top: 506.889px; }.blue-train-question img { width: 80.138px; height: 17.182px; }
 body:has(.diagnosis.is-question) .site-footer { min-height: 414px; padding-bottom: 22px; }
 .site-footer { background: linear-gradient(transparent 146.5px,#eef7f7 146.5px); padding-top: 20px; padding-bottom: 22px; min-height: 414px; }




 .footer-sns { gap: 34.64px; margin-top: 40px; height: 44px; }


 .footer-logo { width: 120px; height: auto; margin-top: 35px; }.copyright { margin-top: 20px; font-size: clamp(7px,2.3vw,9px); line-height: 14px; }

}

/* 中間幅でも縦方向の接続位置を維持する。装飾だけ横方向へ追従。 */
.decoration-canvas { transform: translateX(-50%) scaleX(var(--art-scale,1)); }
.decoration-canvas .balloon,.red-train,.blue-train { transform: scaleX(var(--art-inverse,1)); transform-origin: center; }
.history-wave img,.history.is-expanded .history-wave img { height: var(--history-wave-height,1197px); }

@media (max-width:1000px) {
 .decoration-canvas { transform: translateX(-50%) scaleX(var(--sp-scale,1)); }
 .decoration-canvas .balloon,.red-train,.blue-train { transform: scaleX(var(--sp-inverse,1)); }
 .history-wave img,.history.is-expanded .history-wave img { height: var(--history-wave-height,1070px); }
}
@media (max-width:374px) {
 .history-photo { flex-basis: 68px; width: 68px; height: auto; }
 .timeline-item { gap: 12px; }.year { flex-basis: 42px; font-size: 20px; }
 .history-card { padding: 12px; }.history-text { font-size: 14px; }
 .message p { font-size: 13px; }.message h2 { font-size: 22px; }

}

@media (max-width:1000px) {
 .site-wrapper { max-width: 600px; }
 .timeline,.history.is-expanded .timeline { max-width: 550px; }
 .timeline-item { gap: 7.142857%; }.year { flex-basis: 14.857143%; }
}


/* Figma車輪基準の外側回転と、原SVGの傾きを戻す内側回転を分離。 */
.red-train,.blue-train { position: absolute; transform-origin: 0 0; }
.red-train { left: 401.31595px; top: 604.66742px; transform: scaleX(var(--art-inverse,1)) rotate(-10.91deg); }
.red-train img { width: 148.699px; height: 48.6721px; transform: translate(5.93153px,-21.01033px) rotate(10.681deg); transform-origin: 0 0; }
.blue-train { left: 869.15503px; top: 577.70215px; transform: scaleX(var(--art-inverse,1)) rotate(-3.16deg); }
.blue-train img { width: 151.116px; height: 34.3647px; transform: translate(1.20351px,-5.8391px) rotate(3.17077deg); transform-origin: 0 0; }
.blue-train-question { left: 869.16888px; top: 577.65149px; transform: scaleX(var(--art-inverse,1)) rotate(-3.13deg); }
@media (max-width:1000px) {
 .red-train { left: 63.28867px; top: 552.39679px; transform: scaleX(var(--sp-inverse,1)) rotate(8.3deg); }
 .red-train img { width: 148.699px; height: 48.6721px; transform: translate(3.11138px,-11.02096px) rotate(10.681deg) scale(.5245493); }
 .blue-train { left: 244.4594px; top: 394.69775px; transform: scaleX(var(--sp-inverse,1)) rotate(-.4deg); }
 .blue-train img { width: 151.116px; height: 34.3647px; transform: translate(.637134px,-3.09119px) rotate(3.17077deg) scale(.5293946); }
 .blue-train-question { left: 235.39729px; top: 507.80984px; transform: scaleX(var(--sp-inverse,1)) rotate(-.66deg); }
}

/* 支給v22。PC/SPの切替幅・縦横比・端のフェードはSPECに合わせる。 */
.hero-art { overflow: hidden; }
.fv-motion { position: absolute; inset: 0; pointer-events: none; }
.hero-art .mp-stage {
 -webkit-mask-image: linear-gradient(to bottom,transparent 0%,#000 4%,#000 96%,transparent 100%);
 mask-image: linear-gradient(to bottom,transparent 0%,#000 4%,#000 96%,transparent 100%);
}
@media (max-width:767px) { .hero-art { aspect-ratio: 780 / 760; } }
.hero[data-motion-state="error"] h1 { inset: 30% 10% auto; width: 80%; height: auto; clip-path: none; white-space: normal; text-align: center; font-size: clamp(16px,2vw,28px); }
.fv-motion-toggle { position: absolute; right: 16px; top: 12px; z-index: 2; padding: 6px 10px; border: 1px solid #c49b60; border-radius: 20px; background: #fff; color: #765629; font-size: 12px; cursor: pointer; }
/* 通常レイアウトを変えず、キーボードの現在位置を明示する。 */
:focus-visible { outline: 3px solid #276b79; outline-offset: 4px; }
@media (max-width:1000px) {
 .menu-button { position: relative; }
 .menu-button::before { content: ""; position: absolute; inset: -10px; }
}

@media (min-width:1001px) {
 .item-hotel .year { display: none; }
}

/* 元画像は寸法確保に使い、同じ素材をSVG内の経路マスクで描画する。 */
.scroll-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.scroll-art-ready > img { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
 .scroll-art-ready > img { visibility: visible; }
 .scroll-art { display: none; }
}

/* 追加支給線は原寸比率を維持し、画面外だけをwrapperで切り取る。 */
.message-wave { left: 50%; transform: translateX(-50%) scaleX(var(--art-inverse,1)); transform-origin: top center; }
.message-wave img { width: 1396px; height: 1006px; }
.history-wave-normal,.history-wave-expanded { left: 50%; transform: translateX(-50%) scaleX(var(--art-inverse,1)); transform-origin: top center; overflow: hidden; height: var(--history-wave-height,1197px); }
.history-wave img,.history.is-expanded .history-wave img { width: 1396px; height: 1476.47px; }
@media (max-width:1000px) {
 .message-wave { left: 50%; transform: translateX(-50%) scaleX(var(--sp-inverse,1)); }
 .message-wave img { width: 566px; height: 773px; }
 .history-wave-normal,.history-wave-expanded { transform: translateX(-50%) scaleX(var(--sp-inverse,1)); height: var(--history-wave-height,1070px); }
 .history-wave img,.history.is-expanded .history-wave img { width: 566px; height: 1939px; }
}
.message-wave,.history-wave-normal,.history-wave-expanded { width: 1396px; max-width: none; }
@media (max-width:1000px) {
 .message-wave,.history-wave-normal,.history-wave-expanded { width: 566px; }
}
@media (max-width:1000px) {
 .history-wave { top: 100px; }
 .history-wave-normal,.history-wave-expanded { height: calc(var(--history-wave-height,1070px) - 56px); }
}

/* 静止/fallbackも支給中心線の上縁へ車輪を合わせる。 */
.red-train { left: calc(50% + -323.74593px * var(--art-inverse,1)); top: 566.64449px; transform: scaleX(var(--art-inverse,1)) rotate(-0.1366432rad); }
@media (max-width:1000px) { .red-train { left: calc(50% + -128.05505px * var(--sp-inverse,1)); top: 525.41039px; transform: scaleX(var(--sp-inverse,1)) rotate(0.1243550rad); } }

/* 慣性中だけ線画像を合成レイヤーへ。停止時はGPU用の保持指定を解除する。 */


/* 承認済み文字・操作色。 */
:root { --color-text-sub: #666; }

.header-nav,.message p,.history-note,.copyright { color: #666; }
.campaign-image span { background: #666; }

.hero h1,.toggle,.history-text h3 { color: #835c2a; }
.message h2,.campaign h2,.history h2 { color: #a67c3b; }

.year,.item-1 .year,.item-3 .year,.item-4 .year { color: #876566; }
.item-5 .year { color: #607079; }.item-6 .year { color: #67715c; }.item-7 .year { color: #75697a; }
@media (max-width:1000px) {
 .campaign h2 { color: #835c2a; }
 .item-0 .year { color: #5d7176; }.item-4 .year { color: #67715c; }
}
@media (max-width:374px) { .message h2 { color: #835c2a; } }

/* 原本と同形、画像取得に依存しない操作表示。 */
@supports (background: linear-gradient(#276b79,#276b79)) {
 .menu-button::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#276b79,#276b79) center 5.5px / 83.333333% 1px no-repeat, linear-gradient(#276b79,#276b79) center 11.5px / 83.333333% 1px no-repeat, linear-gradient(#276b79,#276b79) center 17.5px / 83.333333% 1px no-repeat; pointer-events: none; }
.menu-button img { visibility: hidden; }

}
/* 原本と同寸の円・矢印。 */
@supports (clip-path: polygon(0 0,100% 0,50% 100%)) {
 .toggle-icon { position: relative; }
 .toggle-icon img { visibility: hidden; }
 .toggle-icon::before { content: ''; position: absolute; inset: 2.5%; border-radius: 50%; background: #835c2a; }
 .toggle-icon::after { content: ''; position: absolute; inset: 0; background: white; clip-path: polygon(25.732% 41.768%,50% 66.036%,74.268% 41.768%,70.732% 38.232%,50% 58.964%,29.268% 38.232%); }
}

/* フッターの公式サイト表示。正式URLは支給後に設定する。 */
.footer-official { position: relative; display: flex; align-items: center; gap: 20px; margin-top: 36px; }
.footer-official img { width: 162px; height: auto; }
.footer-official p { font-size: 14px; line-height: 22px; }
@media (prefers-reduced-motion: no-preference) {
 .balloon { animation: balloon-float 5s ease-in-out infinite alternate; }
 .balloon-1 { animation-delay: -2s; }.balloon-2 { animation-delay: -3s; }.balloon-3 { animation-delay: -1s; }
 @keyframes balloon-float { to { translate: 0 -6px; } }
}
@media (max-width:1000px) {
 .menu-button[aria-expanded="true"] { border-radius: 50%; background: #48b9ae; }
 .menu-button[aria-expanded="true"] img { visibility: hidden; }
 .menu-button[aria-expanded="true"]::after { content: '×'; position: absolute; inset: 0; color: white; line-height: 24px; font-size: 24px; }
 .footer-official { gap: 16px; margin-top: 30px; }
 .footer-official img { width: 100px; }.footer-official p { font-size: 9px; line-height: 14px; }
}

.history-card::before { content: ''; position: absolute; z-index: -1; inset: -11.4333% -4.856% -16.5% 0; background: url('../assets/supplied-20261026/history/box-s-fluid.svg') center / 100% 100% no-repeat; }
.item-hotel .history-card::before,.item-6 .history-card::before { inset: -9.628% -5.353% -13.528% 0; background-image: url('../assets/supplied-20261026/history/box-m-fluid.svg'); }
.item-7 .history-card::before { inset: -7.498% -7.823% -10.876% 0; background-image: url('../assets/supplied-20261026/history/box-l-fluid.svg'); }
.balloon { height: auto; object-fit: contain; }

/* フッターはキャラクターと吹き出しの一体素材を原寸比率で表示。 */
.mascot-area { position: relative; top: 4px; width: min(339px, 100%); height: auto; }
.mascot-area img { width: 100%; height: auto; }
.site-footer > .decoration-canvas { z-index: 1; }
.footer-sns,.footer-official,.footer-logo,.copyright,.back-to-top { z-index: 2; }
.footer-wave { position: absolute; top: 143.38px; left: 0; width: 1440px; height: 120.62px; }
.sns-icon { width: 62px; height: 62px; }
.back-to-top { position: absolute; width: 60px; height: 60px; left: calc(50% + 400px); top: 157px; border-radius: 50%; }
.back-to-top img { width: 100%; height: auto; }
@media (min-width:1001px) and (max-width:1100px) { .back-to-top { left: auto; right: 40px; } }
@media (max-width:1000px) {
 .mascot-area { width: min(260px, 100%); }
 .footer-wave { top: 114px; width: 390px; height: auto; }
 .sns-icon { width: 44px; height: 44px; }
 .back-to-top { width: 50px; height: 50px; left: auto; right: 21px; top: 101px; }
 .footer-official img { width: 112px; flex-shrink: 0; }
}

/* 支給PC背景は原本の画角。SPは既存の専用線を使用する。 */
@media (min-width:1001px) {
 .message-wave { left: 0; top: 0; width: 1444.81px; transform: none; }
 .message-wave img { width: 1444.81px; height: 684.51px; }
 .history-wave-normal,.history-wave-expanded { left: 0; width: 1440px; transform: none; height: var(--history-wave-height,1197px); }
 .history-wave img,.history.is-expanded .history-wave img { width: 1440px; height: var(--history-wave-height,1197px); }
}
/* 新券面と同じく、車両も支給SVGそのものを使う。 */
.red-train img { width: 149.09px; height: 44.64px; transform: none; }
.blue-train img { width: 154.67px; height: 33.63px; transform: none; }
@media (max-width:1000px) {
 .red-train img { width: 78.2px; height: auto; }
 .blue-train img { width: 81.9px; height: auto; }
}
@media (min-width:1001px) {
 .red-train { left: 400px; top: 604px; transform: scaleX(var(--art-inverse,1)); }
 .blue-train { left: 869px; top: 610px; transform: scaleX(var(--art-inverse,1)); }
}

.campaign-image-character { background: #fff7fa; overflow: hidden; }
.campaign-image-character img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); max-height: none; object-fit: contain; }

.footer-external-icon { display: inline-block; width: 1em; height: 1em; margin-left: .3em; vertical-align: -.1em; }