.mobile-page{display:none}

@media(max-width:767px){
main{overflow:hidden;height:auto!important}
.canvas{display:none}
.mobile-page{display:block;font-family:"Yu Gothic","Meiryo",sans-serif;font-size:16px;line-height:1.8;color:#454d9b;font-weight:600;overflow-wrap:anywhere}
.mobile-page *{box-sizing:border-box}
.mobile-page h1,.mobile-page h2,.mobile-page h3,.mobile-page h4,.mobile-page p{margin:0}
.mobile-page h2{font-size:clamp(23px,6.5vw,32px);line-height:1.5;font-weight:800}
.mobile-page h3{font-size:22px;line-height:1.5}
.mobile-page section{padding:40px 20px}
.mobile-page .m-hero{padding-top:18px;background:#73c3f1}
.m-brand{font-size:14px;line-height:1.3;color:#11222f;font-weight:900}
.m-brand small{display:block;font-size:8px;letter-spacing:.02em}
.mobile-page .m-lead{text-align:center;margin-top:30px;font-size:18px;line-height:1.7;font-weight:800}
.m-hero-art{position:relative;height:365px;max-width:480px;margin:12px auto 0}
.m-hero-art h1{position:absolute;top:95px;left:0;width:100%;font-family:Arial,"Yu Gothic",sans-serif;font-size:clamp(31px,8.5vw,48px);font-weight:900;line-height:1.1;letter-spacing:.025em;text-align:center;color:white;text-shadow:2px 2px 0 #4a50a5,-1px -1px 0 #4a50a5,0 4px 5px #40529666;z-index:1}
.m-hero-art h1>span{display:block;font-size:26px;margin-bottom:10px}
.m-fly{position:absolute;object-fit:contain}
.m-fly-one{width:34%;left:0;top:0}
.m-fly-two{width:40%;right:0;top:24px}
.m-fly-three{width:40%;left:27%;bottom:12px}
.m-born{position:absolute;right:2%;top:215px;border-radius:50%;background:#fff72f;padding:12px 7px;font-size:15px;transform:rotate(9deg)}
.mobile-page .m-launch{text-align:center;color:#fffc32;font-size:20px;line-height:1.4;margin:12px 0 32px}
.m-launch strong{font-size:32px}
.m-launch b{font-size:40px;letter-spacing:.06em}
.m-intro{text-align:center;color:#fff}
.mobile-page .m-intro h2{font-size:22px}
.m-intro>p{margin-top:12px}
.m-features{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:9px}
.m-features li{padding:12px;border:1px solid #ffffffb0;border-radius:8px;font-size:15px;background:#ffffff12}
.m-announcement{text-align:center;margin-top:34px;color:white}
.m-announcement>p{color:#fffd32;margin-bottom:14px}
.m-cta{min-height:56px;display:flex;align-items:center;justify-content:center;gap:16px;text-decoration:none;color:#fff;background:#4a50a5;border-radius:40px;padding:14px 18px;font-size:16px;font-weight:800;box-shadow:0 5px 9px #29396e35;max-width:420px;margin:28px auto 0}
.m-cta span{font-size:24px;line-height:1}
.m-cta:focus-visible{outline:3px solid #253071;outline-offset:4px}
.mobile-page .m-campaigns{background:#83c27d;padding-top:40px}
.m-section-lead{text-align:center;color:#fff;font-weight:800}
.mobile-page .m-start{font-size:14px;color:#404890;background:#fff72f;border-radius:30px;text-align:center;padding:6px;margin:22px auto 12px;max-width:360px}
.m-campaigns>h2{text-align:center;color:#fff72f;font-size:clamp(28px,8vw,38px)}
.m-campaign-notes{font-size:13px;line-height:1.8;margin:22px 0 28px;color:#fff;font-weight:700}
.m-campaign-notes p+p{margin-top:8px}
.m-campaign{background:#fffef8;border:3px solid #fff72f;border-radius:20px;padding:20px 16px;margin-top:22px}
.m-card-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.m-card-heading>div{flex:1;min-width:0}
.m-card-heading img{width:76px;height:118px;object-fit:contain;flex:none}
.m-eyebrow{font-size:12px;letter-spacing:.08em;margin-bottom:6px!important}
.m-card-heading h3{font-size:clamp(20px,5.6vw,26px);line-height:1.4}
.m-card-heading h3 small{display:block;font-size:15px;margin-top:5px}
.mobile-page .m-reward{display:flex;align-items:baseline;justify-content:center;gap:7px;background:#fff72f;padding:9px 6px;border-radius:12px;font-size:13px;margin:16px 0}
.m-reward strong{font-size:31px;letter-spacing:-.03em;white-space:nowrap}
.m-reward strong small{font-size:16px;margin-left:2px}
.m-target{font-size:15px}
.m-target b,.m-people b{display:block;font-size:13px;color:#64713e;margin-bottom:4px}
.m-period{margin-top:16px;border-top:1px solid #dfe5d1;padding-top:14px;display:flex;gap:12px;align-items:flex-start}
.m-period h4{background:#e8f1dc;padding:2px 8px;font-size:13px;white-space:nowrap;border-radius:4px}
.m-period dl{margin:0;flex:1}
.m-period dl>div{display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap}
.m-period dt{font-size:13px;color:#5d665a}
.m-period dd{margin:0;font-size:15px;white-space:nowrap}
.mobile-page .m-people{margin-top:16px;font-size:15px}
.m-campaign .m-terms-block{margin-top:18px;border-top:1px solid #dfe5d1;padding-top:6px}
.m-campaign .m-terms-title{margin:0;padding:10px 0 0;font-size:14px}
.m-detail{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px auto 0;max-width:320px;min-height:44px;padding:9px 16px;background:#fff;color:#72b471;border-radius:40px;font-size:15px;font-weight:800;text-decoration:none;box-shadow:0 3px 6px #29396e30}
.m-detail span{font-size:20px;line-height:1}
.m-detail:focus-visible{outline:3px solid #253071;outline-offset:4px}
.m-terms{font-size:14px;line-height:1.8;padding-top:8px;color:#fff}
.m-terms p+p{margin-top:10px}
.m-terms ul{list-style:none;padding-left:0;margin:10px 0 0}
.m-terms li+li{margin-top:8px}
.mobile-page .m-benefits{background:#f6ad6b}
.m-benefits>p,.m-benefits>h2{text-align:center;color:white}
.m-benefits>p{font-size:14px}
.m-benefits>h2{margin-top:10px}
.mobile-page .m-fee{border:1px solid #fff;border-radius:30px;padding:7px 18px;margin:18px auto 24px;width:max-content;font-size:16px}
.m-benefit{border-radius:18px;background:white;padding:23px 20px;margin-top:14px}
.m-benefit h3{text-align:center;font-size:23px;margin-bottom:12px}
.m-benefit p{font-size:15px}
.m-exchange{margin-top:12px!important;text-align:center}
.m-exchange strong{display:block;font-size:29px}
.m-bonus-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.m-bonus-grid .m-benefit{padding:20px 9px;text-align:center}
.m-bonus-grid h3{font-size:21px}
.m-bonus-grid p{font-size:12px}
.m-bonus-grid mark{color:inherit;background:#fff72f;padding:2px 4px;border-radius:12px}
.mobile-page .m-bonus{font-size:15px;margin-top:10px;line-height:1.5}
.m-bonus strong{font-size:30px;white-space:nowrap}
.m-bonus strong span{font-size:16px}
.mobile-page .m-steps{background:#73c3f1;padding-bottom:54px;text-align:center}
.m-steps>p{font-size:15px}
.m-steps>h2{font-size:23px;margin-top:15px}
.mobile-page .m-step-label{color:#fff72f;margin-top:26px;font-weight:800}
.m-steps ol{list-style:none;display:grid;gap:14px;padding:0;margin:20px 0 0;text-align:left}
.m-steps li{display:flex;gap:14px;align-items:center;background:#fff94b;border-radius:12px;padding:18px 16px}
.m-steps li>span{font-size:13px;white-space:nowrap}
.m-steps li>p{font-size:16px;line-height:1.7;border-left:1px solid #bbb557;padding-left:14px;flex:1}
.m-steps li:last-child p{font-size:22px;font-weight:800}

}

@media(max-width:359px){.mobile-page section{padding-left:16px;padding-right:16px}
.m-campaign{padding-left:12px;padding-right:12px}
.m-period{gap:8px}
.m-period dl>div{display:block}
.m-bonus-grid{gap:8px}
.m-bonus-grid .m-benefit{padding-left:6px;padding-right:6px}
.m-bonus strong{font-size:26px}
.m-hero-art{height:345px}
}


@media(max-width:767px){
/* Bootstrap row/columns replace the original bonus grid at the same dimensions. */
.m-bonus-grid.row{display:flex;margin-left:0;margin-right:0;gap:12px}

.m-bonus-grid.row>.col-6{width:calc((100% - 12px)/2)}

.mobile-page h1,.mobile-page h2,.mobile-page h3,.mobile-page h4{font-weight:bold}

.mobile-page h2{font-weight:800}

.m-hero-art h1{font-weight:900}

.mobile-page b,.mobile-page strong{font-weight:bold}

.mobile-page img{vertical-align:baseline}


.mobile-page dl,.mobile-page ol,.mobile-page ul{margin-bottom:0}

.m-steps li p{margin:0}

.m-bonus-grid mark{color:inherit}

}

@media(max-width:359px){.m-bonus-grid.row{gap:8px}
.m-bonus-grid.row>.col-6{width:calc((100% - 8px)/2)}
}


/* PC原稿の雲・人物・山並みを使ったスマートフォン装飾。 */
@media(max-width:767px){
.mobile-page section{position:relative;isolation:isolate}
.m-sky-decoration{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.m-cloud{position:absolute;display:block;width:110px;height:64px;background:url("../assets/mobile-cloud-round.svg") center/contain no-repeat}
.m-cloud-a{top:13%;left:-82px}
.m-cloud-b{top:48%;right:-85px;width:120px;background-image:url("../assets/mobile-cloud-soft.svg")}
.m-cloud-c{bottom:16%;left:-86px;background-image:url("../assets/mobile-cloud-wide.svg")}
.mobile-page .m-hero,.mobile-page .m-campaigns,.mobile-page .m-steps{padding-bottom:112px}
.m-hero::after,.m-campaigns::after,.m-steps::after{content:"";position:absolute;bottom:0;left:0;right:0;height:72px;background:url("../assets/mobile-mountains-blue.svg") center bottom/100% 100% no-repeat;pointer-events:none;z-index:-1}
.m-campaigns::after{background-image:url("../assets/mobile-mountains-green.svg")}
.m-steps::after{background-image:url("../assets/mobile-mountains-footer.svg")}
.m-hero .m-cloud-a{top:13%;left:-55px}
.m-hero .m-cloud-b{top:65%;right:-92px}
.m-hero .m-cloud-c{bottom:205px;left:-68px}
.m-campaigns .m-cloud-a{top:16px;left:-65px}
.m-campaigns .m-cloud-b{top:44px;right:-75px}
.m-benefits .m-cloud-a{top:8px;left:-38px}
.m-benefits .m-cloud-b{top:48%;right:-52px}
.m-benefits .m-cloud-c{bottom:22px;left:-38px}
.m-steps .m-cloud-a{top:7px;left:-65px}
.m-steps .m-cloud-b{top:147px;right:-69px}
.m-steps .m-cloud-c{bottom:130px;left:-60px}
.m-hero-art{isolation:isolate}
.m-hero-art::before,.m-hero-art::after{content:"";position:absolute;background:url("../assets/mobile-cloud-wide.svg") center/contain no-repeat;z-index:-1;pointer-events:none}
.m-hero-art::before{width:112px;height:58px;left:0;top:37px}
.m-hero-art::after{width:170px;height:80px;bottom:34px;left:22%}
.m-fly-four{width:21%;left:-1%;bottom:36px}
.m-fly-five{width:18%;right:-1%;bottom:7px}
}

/* PCと同じ座標・角度・フォントで描く曲線タイトル。 */
@media(max-width:767px){
.m-hero-art h1.m-curved-title{top:80px;left:50%;width:calc(100% + 24px);max-width:420px;transform:translateX(-50%);height:auto;line-height:1;letter-spacing:normal;text-shadow:none}
.m-curved-title svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(3px 5px 4px rgba(53,62,120,.5))}
.m-curved-title text{font-family:Airport0;fill:#fff;stroke:#4a50a5;stroke-width:5;stroke-linejoin:round;paint-order:stroke fill;font-weight:normal;letter-spacing:normal}
}



/* PCの元データから抽出した「誕生！」バッジ。 */
@media(max-width:767px){
.m-born{display:flex;align-items:center;justify-content:center;width:58px;height:58px;padding:0;border-radius:0;background:transparent url("../assets/birth-badge.svg") center/contain no-repeat;transform:none;font-family:Airport0,sans-serif;font-weight:normal;font-size:15px;line-height:1;color:#4653a2}
}

/* PCと同じ人物のセリフ。狭い画面でもタイトルと分離して表示。 */
@media(max-width:767px){
.m-hero-art{height:500px}
.m-hero-art h1.m-curved-title{top:105px}
.m-person-line{position:absolute;color:#4653a2;font-size:12px;line-height:1.6;font-weight:700;z-index:2}
.m-line-games{top:76px;right:0;text-align:center}
.m-line-points{top:267px;left:25%;text-align:center}
.m-line-perks{bottom:22px;left:23%;text-align:left}
.m-fly-three{left:43%;bottom:76px}
.m-fly-four{bottom:8px}
.m-fly-five{bottom:4px}
.m-hero-art::after{left:41%;bottom:95px;width:145px}
.m-born{top:252px}
}
@media(max-width:359px){.m-person-line{font-size:11px}.m-line-points{left:18%}.m-line-perks{left:22%}}


/* PCのキャンペーン枠・特典パーツ・矢印の意匠をSPにも適用。 */
@media(max-width:767px){
.m-campaign-title-row{position:relative;display:flex;align-items:center;gap:12px;margin:26px 0 18px;min-height:110px}
.mobile-page .m-campaign-title-row .m-start{flex:0 0 88px;width:88px;height:88px;margin:0;background:transparent;border:1.5px solid #fff72f;color:#fff72f;border-radius:50%;padding:12px 2px;font-size:11px;line-height:1.5;transform:rotate(-16deg)}
.m-campaign-title-row .m-start b{font-size:13px;white-space:nowrap}
.m-campaign-title-row h2{flex:1;min-width:0;color:#fff72f;font-size:clamp(22px,5.8vw,29px);line-height:1.6;text-align:left}
.m-reserve-label{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;border-radius:50%;background:#fff72f;color:#83c27d;width:29px;height:29px;font-size:11px;letter-spacing:0;margin-right:5px}
.m-campaign{position:relative;background:transparent;border:2px solid #fff72f;border-radius:13px;padding:24px 18px 18px;margin-top:40px;color:white}
.m-card-heading{display:block;padding-right:12px}
.m-card-heading h3{color:#fff;font-size:25px}
.m-card-heading h3 small{font-size:16px}
.m-eyebrow{position:absolute;right:-10px;top:-21px;width:42px;margin:0!important;text-align:center;color:#4653a2}
.m-eyebrow small{position:absolute;top:-16px;left:50%;transform:translateX(-50%);display:block;width:max-content;white-space:nowrap;overflow-wrap:normal;line-height:1.4;font-size:10px;color:#fff72f;letter-spacing:.01em;font-weight:800}
.m-eyebrow b{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:#fff72f;font-size:22px;line-height:1}
.m-campaign-visual{display:flex;align-items:center;justify-content:center;gap:24px;margin:16px 0 20px;min-height:152px}
.m-campaign-visual>img{width:88px;height:150px;object-fit:contain}
.m-campaign:nth-of-type(2) .m-campaign-visual{flex-direction:row-reverse}
.mobile-page .m-campaign-visual .m-reward{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;flex:0 0 144px;width:144px;height:144px;margin:0;padding:15px 8px;background:transparent url("../assets/campaign-point-badge.svg") center/contain no-repeat;border-radius:0;color:#4653a2;font-size:14px;line-height:1.35}
.m-reward strong{font-size:29px;letter-spacing:-.04em}.m-reward>b{font-size:24px}
.m-reward .m-reward-note{display:block;font-size:10px;font-weight:700;line-height:1.3;margin-top:2px;white-space:nowrap}
.m-target,.m-people{color:#fff;font-weight:700}
.m-target b,.m-people b{color:#fff;font-weight:800}
.m-period{border-color:#ffffffb0}
.m-period h4{background:#fff;color:#72b471;border-radius:0;clip-path:polygon(0 0,88% 0,100% 50%,88% 100%,0 100%);padding:2px 12px 2px 7px}
.m-period dt{color:#fff;font-weight:700}.m-period dd{color:#fff;font-weight:700}
.m-campaign .m-terms-block{border-color:#ffffffa0}
.m-campaign .m-terms-title{color:#fff;font-weight:700}
.m-terms{color:#fff;padding:6px 0 0;margin:0;font-weight:600}
.m-wallet-heading{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px}
.m-wallet-heading h3{margin:0;font-size:25px;flex:1}
.m-wallet-heading img{width:90px;height:128px;object-fit:contain}
.m-bonus-grid mark{background:radial-gradient(circle,#fff348 69%,transparent 71%) 0 center/23px 26px repeat-x;padding:3px 4px}
.m-bonus strong{background:linear-gradient(transparent 78%,#fff348 78%,#fff348 95%,transparent 95%)}
.m-benefits>.m-benefit:not(.m-wallet)>h3{text-decoration:underline;text-decoration-color:#fff348;text-decoration-thickness:5px;text-underline-offset:-2px;text-decoration-skip-ink:none}
.mobile-page .m-fee{width:86px;height:86px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:7px;line-height:1.6}
.m-announcement h2{position:relative;width:max-content;max-width:calc(100% - 36px);margin:0 auto;padding:0 12px}
.m-announcement h2::before,.m-announcement h2::after{content:"";position:absolute;top:8%;height:85%;width:2px;background:#fff}
.m-announcement h2::before{left:-9px;transform:rotate(-30deg)}.m-announcement h2::after{right:-9px;transform:rotate(30deg)}
.m-steps ol{gap:7px}
.m-steps li{border-radius:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),50% 100%,0 calc(100% - 14px));padding-bottom:28px;background:linear-gradient(100deg,#fffc44 12%,#dceb8b 53%,#fffc44 87%)}
.m-steps li:last-child{clip-path:none;padding-bottom:18px;background:#fffc44}
}
@media(max-width:359px){
.m-campaign-title-row{gap:8px}.m-campaign-title-row h2{font-size:21px}.mobile-page .m-campaign-title-row .m-start{flex-basis:80px;width:80px;height:80px;font-size:10px;padding-top:11px}.m-campaign-title-row .m-start b{font-size:11px}
.m-campaign{padding-left:13px;padding-right:13px}.m-campaign-visual{gap:18px}.m-campaign-visual>img{width:75px;height:138px}
.m-wallet-heading{gap:6px}.m-wallet-heading h3{font-size:23px}.m-wallet-heading img{width:76px;height:112px}
}

@media(max-width:767px){.m-keep-word{white-space:nowrap}.m-wallet-heading h3{word-break:keep-all;overflow-wrap:normal}}
/* 矢印の先端を次のステップに重ねる。 */
@media(max-width:767px){
.m-steps ol{gap:0;isolation:isolate}
.m-steps li{position:relative}
.m-steps li+li{margin-top:-14px;padding-top:32px}
.m-steps li:nth-child(1){z-index:4}
.m-steps li:nth-child(2){z-index:3}
.m-steps li:nth-child(3){z-index:2}
.m-steps li:nth-child(4){z-index:1}
}
@media(max-width:767px){
.m-steps li{background:linear-gradient(to bottom,#fffc44 0%,#73c3f1 100%)}
}

/* PCの左→右の配色を、SPでは上→下に回転して再現。 */
@media(max-width:767px){
.m-steps li:first-child{background:#ffff45}
.m-steps li:nth-child(n+2){background:linear-gradient(to bottom,#95cfc2 0%,#c1e190 20%,#e6f26f 45%,#f8fb62 70%,#ffff45 100%)}
}

/* ヒーローの人物と雲。各人物の足元を基準に雲を配置する。 */
@media(max-width:767px){
.m-hero-art{max-width:390px}
.m-hero .m-cloud-a{top:720px;left:-82px}
.m-hero-art::before,.m-hero-art::after{content:none}
.m-fly-one{width:32%;max-width:125px;left:0;top:0}
.m-fly-two{width:42%;max-width:164px;right:0;top:24px}
.m-fly-three{width:37%;max-width:145px;left:calc(43% - 10px);bottom:90px}
.m-fly-four{width:27%;max-width:105px;left:0;bottom:8px}
.m-fly-five{width:26%;max-width:101px;right:-10px;bottom:4px}
.m-person-cloud{position:absolute;z-index:-1;pointer-events:none;background:url("../assets/mobile-cloud-wide.svg") center/100% 100% no-repeat}
.m-person-cloud-one{width:36%;height:44px;left:0;top:48px}
.m-person-cloud-three{width:43%;height:58px;left:calc(40% - 10px);bottom:78px}
.m-person-cloud-four{width:31%;height:42px;left:-2%;bottom:0;background-image:url("../assets/mobile-cloud-soft.svg")}
.m-person-cloud-five{width:30%;height:42px;right:calc(-2% - 10px);bottom:0;background-image:url("../assets/mobile-cloud-round.svg")}
.m-line-perks{left:30%;bottom:26px;font-size:11px}
}
@media(max-width:359px){
.m-line-perks{left:29%;font-size:10px}
.m-person-cloud-one{top:38px}
}

/* PC同様、右上の人物の背後からセリフの上にかけて雲を配置。 */
@media(max-width:767px){
.m-person-cloud-two{width:38%;height:auto;aspect-ratio:229.8290/100.0240;right:-2%;top:14px;background-image:url("../assets/mobile-cloud-hero-right.svg");background-size:contain}
}

/* PC原稿の各人物と雲の相対座標を維持。人物の移動・拡縮に雲も追従する。 */
@media(max-width:767px){
.m-person-scene{isolation:isolate}
.m-person-scene>img{display:block;width:100%;height:auto}
.m-person-scene>.m-scene-cloud{position:absolute;z-index:-1;pointer-events:none;background-position:center;background-size:contain;background-repeat:no-repeat}
.m-fly-one>.m-scene-cloud{left:1.39007%;top:14.37414%;width:62.04358%;height:45.49933%;background-image:url("../assets/hero-person-1-cloud.svg")}
.m-fly-two>.m-scene-cloud{left:39.47279%;top:24.11936%;width:65.05768%;height:91.00078%;background-image:url("../assets/hero-person-2-cloud.svg")}
.m-fly-three>.m-scene-cloud{left:27.47679%;top:44.48107%;width:52.11690%;height:33.38228%;background-image:url("../assets/hero-person-3-cloud.svg")}
.m-fly-four>.m-scene-cloud{left:28.43014%;top:52.03697%;width:58.78134%;height:28.61325%;background-image:url("../assets/hero-person-4-cloud.svg")}
.m-fly-five>.m-scene-cloud{left:-18.00152%;top:63.78692%;width:109.67948%;height:44.59128%;background-image:url("../assets/hero-person-5-cloud.svg")}
}

/* PCと同様、ヒーロータイトルの左右端に見切れる雲を配置。 */
@media(max-width:767px){
.m-hero .m-cloud-a{top:310px;left:-56px;width:110px;height:65px;background-image:url("../assets/mobile-cloud-round.svg")}
.m-hero .m-cloud-b{top:390px;right:-58px;width:110px;height:65px;background-image:url("../assets/mobile-cloud-round.svg")}
}