@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap");

html {
  scroll-behavior: smooth;
}

* {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
}

* {
  box-sizing: border-box;
  line-height: 1;
}

body {
  background-color: #fff;
}

img {
  width: 100%;
}

/* -------------------- ● Header -------------------- */

header{max-width:385px;background-color:#fff;width:100%;margin:0 auto;padding:10px 12px}
header #head_link{padding:0}
header #head_link img{width:100%;max-width:75px;height:auto;display:block}
@media screen and (max-width:1162px){
  header{max-width:750px;padding:20px 24px}
  header #head_link img{max-width:150px}
}
@media screen and (max-width:768px){
  header{max-width:100%;padding:2.667vw 3.2vw}
  header #head_link img{max-width:20vw}
}

/* -------------------- ● Attention -------------------- */

.attention{background:#EBEDEF}
.attention+#Wrapper .mv{border-top:none}
.head-attention{margin:auto;padding:5px 12px}
.head-attention .head-attention-inner{padding:8px 40px;width:100%;background:#dbdbdb;border:2px solid #fff;border-radius:5px;overflow:hidden}
.head-attention-inner p.note{position:relative;font-size:12px;line-height:1.8}
.head-attention p.note:before{position:absolute;content:"";left:-22px;top:2px;display:block;width:16px;height:14px;background:url(../img/icon_attention.png) 50% 50% no-repeat;background-size:100% 100%}
@media (min-width:769px) and (max-width:1162px){
  .head-attention{padding:10px 24px}
  .head-attention .head-attention-inner{padding:15px 50px;border-radius:10px}
  .head-attention p.note:before{top:3px}
}
@media (max-width:768px){
  .head-attention{padding:10px 3.2vw}
  .head-attention .head-attention-inner{padding:10px 35px;border:1px solid #fff;border-radius:10px;font-size:18px}
}
@media screen and (max-width:640px){
  .head-attention-inner p.note{font-size:10px}
  .head-attention p.note:before{top:2px}
}

/* -------------------- ● Wrapper --------------------*/

#Wrapper{display:flex;justify-content:center}
#wrapper img{max-width:100%}
#Wrapper a{cursor:pointer;word-break:break-all;color:#004091;text-decoration:none}
.container{max-width:100%;width:100%;position:relative;margin:0 auto;display:flex}
main{max-width:385px;width:100%;margin:0 auto}
@media screen and (max-width:1162px){
  main{max-width:750px}
  aside{display:none}
}
@media screen and (max-width:768px){
  main{max-width:100%}
  .container{overflow:hidden}
}

/* -------------------- ● aside -------------------- */

aside{text-align:center;display:flex;padding-bottom:62px}
aside img{width:100%;height:-moz-fit-content;height:fit-content}
.left{position:sticky;flex:1;justify-content:flex-end;padding-left:40px}
.left img{max-width:361px;max-height:311px;position:sticky;top:25vh}
.right{position:sticky;flex:1;justify-content:flex-start;padding-right:40px}
.right img{max-width:322px;max-height:683px;position:sticky;top:10vh}
@media screen and (max-width:1162px){
  aside{display:none;padding-bottom:0px}
}

/* -------------------- ● Section - MV -------------------- */

#mv {
  border-top: 2px solid #e5e5e5;
}

/* -------------------- ● Section summary -------------------- */

.summary {
  background: #22d2d6;
}
@media (max-width: 768px) {
  .summary {
    padding-bottom: 8vw;
  }
}
@media (min-width: 769px) and (max-width: 1162px) {
  .summary {
    padding-bottom: 60px;
  }
}
@media (min-width: 1163px) {
  .summary {
    padding-bottom: 31px;
  }
}
.summary__title img {
  max-width: 100%;
  display: block;
}
@media (max-width: 768px) {
  .summary__title {
    padding: 1.3333333333vw 8.5333333333vw 4vw;
  }
}
@media (min-width: 769px) and (max-width: 1162px) {
  .summary__title {
    padding: 10px 64px 30px;
  }
}
@media (min-width: 1163px) {
  .summary__title {
    padding: 5px 33px 15px;
  }
}
 
.summary__list {
  display: flex;
  align-items: flex-start;
}
.summary__item {
  flex: 1;
  min-width: 0;
}
@media (max-width: 768px) {
  .summary__list {
    padding: 0 3.7333333333vw 4vw;
    gap: 2.4vw;
  }
}
@media (min-width: 769px) and (max-width: 1162px) {
  .summary__list {
    padding: 0 28px 30px;
    gap: 18px;
  }
}
@media (min-width: 1163px) {
  .summary__list {
    padding: 0 14px 15px;
    gap: 9px;
  }
}
 
/* -- notes -- */
.summary__notes {
  color: #ffffff;
  font-weight: 500;
}
.summary__notesText:not(:first-child) {
  margin-top: 0.4em;
}
@media (max-width: 768px) {
  .summary__notes {
    padding: 0 4.2666666667vw 6.4vw;
    font-size: 3.2vw;
    line-height: 1.4;
  }
}
@media (min-width: 769px) and (max-width: 1162px) {
  .summary__notes {
    padding: 0 32px 48px;
    font-size: 24px;
    line-height: 1.4;
  }
}
@media (min-width: 1163px) {
  .summary__notes {
    padding: 0 16px 25px;
    font-size: 12px;
    line-height: 1.4;
  }
}
 
/* -- download / howto-link -- */
 
.summary__download {
  border-radius: 10px;
  padding: 0;
  border: 2px solid #004091;
  overflow: hidden;
}
@media (max-width: 768px) {
  .summary__download {
    border-radius: 2.5333333333vw;
  }
}
@media (min-width: 769px) and (max-width: 1162px) {
  .summary__download {
    border-radius: 19px;
  }
}
 
@media (max-width: 768px) {
  .summary__download {
    margin: 0 3.7333333333vw;
  }
}
@media (min-width: 769px) and (max-width: 1162px) {
  .summary__download {
    margin: 0 28px;
  }
}
@media (min-width: 1163px) {
  .summary__download {
    margin: 0 14px;
  }
}
.summary__downloadBanner {
  position: relative;
  background: #004091;
  text-align: left;
}
.summary__downloadBannerText {
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 0.01em;
}
.summary__downloadBannerArrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4vw solid transparent;
  border-right: 4vw solid transparent;
  border-top: 4vw solid #004091;
}
@media (max-width: 768px) {
  .summary__downloadBanner {
    padding: 5.8666666667vw 6.4vw;
  }
  .summary__downloadBannerText {
    font-size: 4.4vw;
    text-align: center;
  }
  .summary__downloadBannerArrow {
    bottom: -3.7333333333vw;
    border-left-width: 4vw;
    border-right-width: 4vw;
    border-top-width: 4vw;
  }
}
@media (min-width: 769px) and (max-width: 1162px) {
  .summary__downloadBanner {
    padding: 44px 48px;
  }
  .summary__downloadBannerText {
    font-size: 35px;
    text-align: center;
  }
  .summary__downloadBannerArrow {
    bottom: -28px;
    border-left-width: 30px;
    border-right-width: 30px;
    border-top-width: 30px;
  }
}
@media (min-width: 1163px) {
  .summary__downloadBanner {
    padding: 23px 20px;
  }
  .summary__downloadBannerText {
    font-size: 18px;
    text-align: center;
  }
  .summary__downloadBannerArrow {
    bottom: -14px;
    border-left-width: 15px;
    border-right-width: 15px;
    border-top-width: 15px;
  }
}
.summary__downloadBox {
  background: #ffffff;
}
@media (max-width: 768px) {
  .summary__downloadBox {
    margin-top: 0;
    padding: 8vw 4.2666666667vw 6.6666666667vw;
  }
}
@media (min-width: 769px) and (max-width: 1162px) {
  .summary__downloadBox {
    margin-top: 0;
    padding: 60px 32px 50px;
  }
}
@media (min-width: 1163px) {
  .summary__downloadBox {
    margin-top: 0;
    padding: 31px 16px 26px;
  }
}
.summary__downloadApp {
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .summary__downloadApp {
    gap: 4vw;
  }
}
@media (min-width: 769px) and (max-width: 1162px) {
  .summary__downloadApp {
    gap: 30px;
  }
}
@media (min-width: 1163px) {
  .summary__downloadApp {
    gap: 15px;
  }
}
.summary__downloadAppIcon {
  flex-shrink: 0;
}
.summary__downloadAppIcon img {
  display: block;
  width: 100%;
}
@media (max-width: 768px) {
  .summary__downloadAppIcon {
    width: 22.6666666667vw;
  }
}
@media (min-width: 769px) and (max-width: 1162px) {
  .summary__downloadAppIcon {
    width: 170px;
  }
}
@media (min-width: 1163px) {
  .summary__downloadAppIcon {
    width: 87px;
  }
}
.summary__downloadDlBtn {
  flex: 1;
  display: block;
}
.summary__downloadDlBtn img {
  display: block;
  width: 100%;
}
.summary__downloadHowtoLink,
.summary__downloadHowtoLink:visited,
.summary__downloadHowtoLink:hover,
.summary__downloadHowtoLink:active {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 2px solid #004091;
  color: #004091;
  font-weight: 900;
  text-decoration: none;
}
.summary__downloadHowtoLinkChevron {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  border-top: 4px solid #004091;
  border-right: 4px solid #004091;
  transform: rotate(45deg);
}
@media (max-width: 768px) {
  .summary__downloadHowtoLink {
    margin: 5vw 12.4vw 0;
    padding: 3.7333333333vw 4.8vw;
    font-size: 4.2666666667vw;
    gap: 2.1333333333vw;
    border-radius: 0.5333333333vw;
  }
  .summary__downloadHowtoLinkChevron {
    right: 3.2vw;
    width: 2.5333333333vw;
    height: 2.5333333333vw;
    border-top-width: 0.5333333333vw;
    border-right-width: 0.5333333333vw;
  }
}
@media (min-width: 769px) and (max-width: 1162px) {
  .summary__downloadHowtoLink {
    margin: 38px 93px 0;
    padding: 28px 36px;
    font-size: 32px;
    gap: 16px;
    border-radius: 4px;
  }
  .summary__downloadHowtoLinkChevron {
    right: 24px;
    width: 19px;
    height: 19px;
    border-top-width: 4px;
    border-right-width: 4px;
  }
}
@media (min-width: 1163px) {
  .summary__downloadHowtoLink {
    margin: 19px 48px 0;
    padding: 14px 18px;
    font-size: 16px;
    gap: 8px;
    border-radius: 2px;
  }
  .summary__downloadHowtoLinkChevron {
    right: 12px;
    width: 10px;
    height: 10px;
    border-top-width: 2px;
    border-right-width: 2px;
  }
}

/* ---------------------------------
	exchange（週ごとの交換カード）
--------------------------------- */
.exchange {
  background: #fdf6d3;
}
@media (max-width: 768px) {
  .exchange {
    padding: 0 0 8vw;
  }
  .exchange__week:not(:first-child) {
    margin-top: 8vw;
  }
}
@media (min-width: 769px) and (max-width: 1162px) {
  .exchange {
    padding: 0 0 60px;
  }
  .exchange__week:not(:first-child) {
    margin-top: 60px;
  }
}
@media (min-width: 1163px) {
  .exchange {
    padding: 0 0 31px;
  }
  .exchange__week:not(:first-child) {
    margin-top: 31px;
  }
}

.exchange__weekHead {
  width: 100%;
}
.exchange__weekHead img {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.exchange__productList {
  display: flex;
  flex-direction: column;
}
.exchange__product {
  position: relative;
  background: #ffffff;
  border: 2px solid #004098;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.exchange__state[hidden] {
  display: none;
}
.exchange__pendingBtn {
  display: block;
}
.exchange__pendingBtn img {
  display: block;
  width: 100%;
}
.exchange__pendingBtn[hidden],
.exchange__productBtn[hidden] {
  display: none;
}
.exchange__soldoutOverlay {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}
.exchange__soldoutOverlay p {
  color: #ffffff;
  font-weight: 900;
  text-align: center;
  line-height: 1.5;
}
.exchange__productBtn--disabled {
  position: relative;
  z-index: 1;
  display: block;
  cursor: not-allowed;
  pointer-events: none;
}
.exchange__productBtn--disabled img {
  display: block;
  max-width: 100%;
}
#Wrapper a.exchange__soldoutLink {
  display: block;
  text-align: center;
  color: #ffffff;
  text-decoration: underline;
}
.exchange__productCard {
  display: block;
  max-width: 100%;
}
.exchange__productBtn {
  display: block;
}
.exchange__productBtn img {
  display: block;
  max-width: 100%;
}
.exchange__productCaption {
  color: #000000;
  font-weight: bold;
  text-align: center;
}
@media (max-width: 768px) {
  .exchange__productList {
    gap: 4vw;
    margin-top: 4vw;
    padding: 0 4.2666666667vw;
  }
  .exchange__product {
    border-radius: 3.2vw;
    padding: 5.2vw;
  }
  .exchange__soldoutOverlay p {
    font-size: 5.7333333333vw;
    padding: 0 4vw;
  }
  .exchange__soldoutLink {
    font-size: 4.1333333333vw;
    margin-top: 7.7333333333vw;
    font-weight: 700;
  }
  .exchange__productBtn,
  .exchange__pendingBtn {
    margin-top: 6vw;
  }
  .exchange__productCaption {
    font-size: 2.2666666667vw;
    margin-top: 1.6vw;
  }
}
@media (min-width: 769px) and (max-width: 1162px) {
  .exchange__productList {
    gap: 30px;
    margin-top: 30px;
    padding: 0 32px;
  }
  .exchange__product {
    border-radius: 24px;
    padding: 39px;
  }
  .exchange__soldoutOverlay p {
    font-size: 43px;
    padding: 0 30px;
  }
  .exchange__soldoutLink {
    font-size: 31px;
    margin-top: 58px;
    font-weight: 700;
  }
  .exchange__productBtn,
  .exchange__pendingBtn {
    margin-top: 45px;
  }
  .exchange__productCaption {
    font-size: 17px;
    margin-top: 12px;
  }
}
@media (min-width: 1163px) {
  .exchange__productList {
    gap: 15px;
    margin-top: 15px;
    padding: 0 16px;
  }
  .exchange__product {
    border-radius: 12px;
    padding: 20px;
  }
  .exchange__soldoutOverlay p {
    font-size: 22px;
    padding: 0 15px;
  }
  .exchange__soldoutLink {
    font-size: 16px;
    margin-top: 30px;
    font-weight: 700;
  }
  .exchange__productBtn,
  .exchange__pendingBtn {
    margin-top: 23px;
  }
  .exchange__productCaption {
    font-size: 9px;
    margin-top: 6px;
  }
}

/* ---------------------------------
	howtoTitle（商品引き換え方法バー）
--------------------------------- */
.howtoTitle {
  background: #004091;
  text-align: center;
}
.howtoTitle__text {
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  .howtoTitle {
    padding: 4vw 0;
  }
  .howtoTitle__text {
    font-size: 4.8vw;
  }
}
@media (min-width: 769px) and (max-width: 1162px) {
  .howtoTitle {
    padding: 30px 0;
  }
  .howtoTitle__text {
    font-size: 36px;
  }
}
@media (min-width: 1163px) {
  .howtoTitle {
    padding: 15px 0;
  }
  .howtoTitle__text {
    font-size: 18px;
  }
}

/* ---------------------------------
	howto（引き換え方法STEP1〜4）
--------------------------------- */
.howto {
  background: #ececec;
}
.howto__item {
  position: relative;
}
.howto__itemLabel {
  display: block;
  position: relative;
  z-index: 1;
}
.howto__itemLabel img {
  display: block;
}
.howto__itemCard {
  background: #ffffff;
  display: flex;
  align-items: center;
}
.howto__itemImg {
  flex-shrink: 0;
  overflow: hidden;
}
.howto__itemImg img {
  display: block;
  width: 100%;
  margin: 0 auto;
}
.howto__itemImg--icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.howto__itemText p {
  color: #004091;
  font-weight: 700;
  line-height: 1.5;
}
#Wrapper a.howto__itemLink {
  display: inline-block;
  color: #000000;
  text-decoration: underline;
}
@media (max-width: 768px) {
  .howto {
    padding: 8vw 4.2666666667vw 6.6666666667vw;
  }
  .howto__item:not(:first-child) {
    margin-top: 8vw;
  }
  .howto__itemLabel {
    width: 34.6666666667vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -7.7333333333vw;
  }
  .howto__itemCard {
    border-radius: 3.2vw;
    box-shadow: 0 1.0666666667vw 2.1333333333vw rgba(0, 0, 0, 0.08);
    padding: 9.0666666667vw 4vw 4vw;
    gap: 3.2vw;
  }
  .howto__itemImg {
    width: 26.6666666667vw;
    height: 32vw;
  }
  .howto__itemText {
    padding-left: 2.5333333333vw;
  }
  .howto__itemText p {
    font-size: 4vw;
  }
  .howto__itemLink {
    font-size: 3.3333333333vw;
    margin-top: 2.1333333333vw;
  }
}
@media (min-width: 769px) and (max-width: 1162px) {
  .howto {
    padding: 60px 32px 50px;
  }
  .howto__item:not(:first-child) {
    margin-top: 60px;
  }
  .howto__itemLabel {
    width: 260px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -58px;
  }
  .howto__itemCard {
    border-radius: 24px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    padding: 68px 30px 30px;
    gap: 24px;
  }
  .howto__itemImg {
    width: 200px;
    height: 240px;
  }
  .howto__itemText {
    padding-left: 19px;
  }
  .howto__itemText p {
    font-size: 30px;
  }
  .howto__itemLink {
    font-size: 25px;
    margin-top: 16px;
  }
}
@media (min-width: 1163px) {
  .howto {
    padding: 31px 16px 26px;
  }
  .howto__item:not(:first-child) {
    margin-top: 31px;
  }
  .howto__itemLabel {
    width: 133px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -30px;
  }
  .howto__itemCard {
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    padding: 35px 15px 15px;
    gap: 12px;
  }
  .howto__itemImg {
    width: 103px;
    height: 123px;
  }
  .howto__itemText {
    padding-left: 10px;
  }
  .howto__itemText p {
    font-size: 16px;
  }
  .howto__itemLink {
    font-size: 13px;
    margin-top: 8px;
  }
}


/* ---------------------------------
	banner（下部バナー・リンク集）
--------------------------------- */
.banner {
  background: #ffffff;
}
.banner__heading {
  text-align: center;
}
.banner__heading img {
  display: inline-block;
  width: 100%;
  max-width: 100%;
}
.banner__heading--morepoints img {
  width: auto;
}
@media (max-width: 768px) {
  .banner__heading--morepoints img {
    width: 69.0666666667vw;
  }
}
@media (min-width: 769px) and (max-width: 1162px) {
  .banner__heading--morepoints img {
    width: 518px;
  }
}
@media (min-width: 1163px) {
  .banner__heading--morepoints img {
    width: 266px;
  }
}
.banner__linkList {
  display: flex;
  flex-direction: column;
}
.banner__link,
.banner__link:visited,
.banner__link:hover,
.banner__link:active {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #004091;
  color: #004091;
  font-weight: 900;
  text-decoration: none;
}
.banner__linkChevron {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  border-top: 4px solid #004091;
  border-right: 4px solid #004091;
  transform: rotate(45deg);
}
.banner__campaign {
  display: block;
}
.banner__campaign img {
  display: block;
  max-width: 100%;
}
@media (max-width: 768px) {
  .banner {
    padding: 6.6666666667vw 5.0666666667vw;
  }
  .banner__heading {
    margin-bottom: 4vw;
  }
  .banner__heading:not(:first-child) {
    margin-top: 8vw;
  }
  .banner__linkList {
    gap: 2.8vw;
  }
  .banner__link {
    border-radius: 0.5333333333vw;
    padding: 3.6vw 5.3333333333vw;
    font-size: 3.3333333333vw;
  }
  .banner__linkChevron {
    right: 4vw;
    width: 2.4vw;
    height: 2.4vw;
    border-top-width: 0.5333333333vw;
    border-right-width: 0.5333333333vw;
  }
  .banner__campaign {
    margin-top: 6.6666666667vw;
  }
}
@media (min-width: 769px) and (max-width: 1162px) {
  .banner {
    padding: 50px 38px;
  }
  .banner__heading {
    margin-bottom: 30px;
  }
  .banner__heading:not(:first-child) {
    margin-top: 60px;
  }
  .banner__linkList {
    gap: 21px;
  }
  .banner__link {
    border-radius: 4px;
    padding: 27px 40px;
    font-size: 25px;
  }
  .banner__linkChevron {
    right: 30px;
    width: 18px;
    height: 18px;
    border-top-width: 4px;
    border-right-width: 4px;
  }
  .banner__campaign {
    margin-top: 50px;
  }
}
@media (min-width: 1163px) {
  .banner {
    padding: 26px 20px;
  }
  .banner__heading {
    margin-bottom: 15px;
  }
  .banner__heading:not(:first-child) {
    margin-top: 31px;
  }
  .banner__linkList {
    gap: 11px;
  }
  .banner__link {
    border-radius: 2px;
    padding: 14px 21px;
    font-size: 13px;
  }
  .banner__linkChevron {
    right: 15px;
    width: 9px;
    height: 9px;
    border-top-width: 2px;
    border-right-width: 2px;
  }
  .banner__campaign {
    margin-top: 26px;
  }
}
/* ---------------------------------
	howto__download（STEP末尾のダウンロード誘導）
--------------------------------- */
.howto__download {
  border-radius: 10px;
  padding: 0;
  border: 2px solid #004091;
  overflow: hidden;
}
@media (max-width: 768px) {
  .howto__download {
    border-radius: 2.5333333333vw;
  }
}
@media (min-width: 769px) and (max-width: 1162px) {
  .howto__download {
    border-radius: 19px;
  }
}
@media (max-width: 768px) {
  .howto__download {
    margin-top: 8vw;
  }
}
@media (min-width: 769px) and (max-width: 1162px) {
  .howto__download {
    margin-top: 60px;
  }
}
@media (min-width: 1163px) {
  .howto__download {
    margin-top: 31px;
  }
}
 
@media (max-width: 768px) {
  .howto__download {
    margin-left: 0;
    margin-right: 0;
  }
}
@media (min-width: 769px) and (max-width: 1162px) {
  .howto__download {
    margin-left: 0;
    margin-right: 0;
  }
}
@media (min-width: 1163px) {
  .howto__download {
    margin-left: 0;
    margin-right: 0;
  }
}
.howto__downloadBanner {
  position: relative;
  background: #004091;
  text-align: left;
}
.howto__downloadBannerText {
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 0em;
}
.howto__downloadBannerArrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4vw solid transparent;
  border-right: 4vw solid transparent;
  border-top: 4vw solid #004091;
}
@media (max-width: 768px) {
  .howto__downloadBanner {
    padding: 5.8666666667vw 6.4vw;
  }
  .howto__downloadBannerText {
    font-size: 4.4vw;
    text-align: center;
  }
  .howto__downloadBannerArrow {
    bottom: -3.7333333333vw;
    border-left-width: 4vw;
    border-right-width: 4vw;
    border-top-width: 4vw;
  }
}
@media (min-width: 769px) and (max-width: 1162px) {
  .howto__downloadBanner {
    padding: 44px 48px;
  }
  .howto__downloadBannerText {
    font-size: 35px;
    text-align: center;
  }
  .howto__downloadBannerArrow {
    bottom: -28px;
    border-left-width: 30px;
    border-right-width: 30px;
    border-top-width: 30px;
  }
}
@media (min-width: 1163px) {
  .howto__downloadBanner {
    padding: 23px 20px;
  }
  .howto__downloadBannerText {
    font-size: 18px;
    text-align: center;
  }
  .howto__downloadBannerArrow {
    bottom: -14px;
    border-left-width: 15px;
    border-right-width: 15px;
    border-top-width: 15px;
  }
}
.howto__downloadBox {
  background: #ffffff;
}
@media (max-width: 768px) {
  .howto__downloadBox {
    margin-top: 0;
    padding: 8vw 4.2666666667vw 6.6666666667vw;
  }
}
@media (min-width: 769px) and (max-width: 1162px) {
  .howto__downloadBox {
    margin-top: 0;
    padding: 60px 32px 50px;
  }
}
@media (min-width: 1163px) {
  .howto__downloadBox {
    margin-top: 0;
    padding: 31px 16px 26px;
  }
}
.howto__downloadApp {
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .howto__downloadApp {
    gap: 4vw;
  }
}
@media (min-width: 769px) and (max-width: 1162px) {
  .howto__downloadApp {
    gap: 30px;
  }
}
@media (min-width: 1163px) {
  .howto__downloadApp {
    gap: 15px;
  }
}
.howto__downloadAppIcon {
  flex-shrink: 0;
}
.howto__downloadAppIcon img {
  display: block;
  width: 100%;
}
@media (max-width: 768px) {
  .howto__downloadAppIcon {
    width: 22.6666666667vw;
  }
}
@media (min-width: 769px) and (max-width: 1162px) {
  .howto__downloadAppIcon {
    width: 170px;
  }
}
@media (min-width: 1163px) {
  .howto__downloadAppIcon {
    width: 87px;
  }
}
.howto__downloadDlBtn {
  flex: 1;
  display: block;
}
.howto__downloadDlBtn img {
  display: block;
  width: 100%;
}