@charset "UTF-8";
/*このcssはscssにより書き出されています*/
#mileage {
  /* ---------------- マイレージプログラム ---------------- */
  background-color: #FAFAFB;
}
#mileage .main-visual img {
  width: 100%;
}
#mileage .readWrap h2 {
  font-size: clamp(2rem, 2rem + (1vw - 0.52rem) * 0.9090909091, 2.4rem);
  font-weight: 700;
}
@media screen and (max-width: 519px) {
  #mileage .readWrap h2 {
    line-height: 1.6;
  }
}
#mileage .stepList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 40px;
  gap: 6%;
}
@media screen and (max-width: 959px) {
  #mileage .stepList {
    display: block;
    max-width: 420px;
    margin: 0 auto;
  }
}
#mileage .stepList li {
  width: 33%;
  position: relative;
}
@media screen and (max-width: 959px) {
  #mileage .stepList li {
    margin: 0 0 24%;
    width: 100%;
    max-width: inherit;
  }
  #mileage .stepList li:last-child {
    margin-bottom: 40px;
  }
}
#mileage .stepList li:not(:first-child) .step_contentWrap {
  position: relative;
}
#mileage .stepList li:not(:first-child) .step_contentWrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -13%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  background: url(/images/common/ico_arrow2-bl.svg) no-repeat center center/contain;
  width: 16px;
  height: 20px;
}
@media screen and (max-width: 959px) {
  #mileage .stepList li:not(:first-child) .step_contentWrap::before {
    top: -28%;
    left: 50%;
    -webkit-transform: translate(-50%, 0) rotate(90deg);
            transform: translate(-50%, 0) rotate(90deg);
  }
}
#mileage .stepList li .step_num {
  text-align: center;
  color: white;
  font-size: 1.2rem;
  line-height: 1;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  background: -webkit-gradient(linear, left top, left bottom, from(#00a7e5), to(#0092E5));
  background: linear-gradient(180deg, #00a7e5 0%, #0092E5 100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, -40px);
          transform: translate(-50%, -40px);
  z-index: 1;
}
#mileage .stepList li .step_num > div {
  padding-top: 4px;
}
#mileage .stepList li .step_num span {
  font-size: 2.6rem;
  margin-top: 2px;
  display: block;
  font-weight: 700;
}
#mileage .stepList li .step_contentWrap {
  background-color: white;
  padding: 48px 16px 32px;
  text-align: center;
  line-height: 1.6;
}
@media screen and (min-width: 960px) {
  #mileage .stepList li .step_contentWrap {
    min-height: 284px;
  }
}
#mileage .stepList li .step_ttl {
  font-weight: 700;
  font-size: clamp(2rem, 2rem + (1vw - 0.52rem) * 0.9090909091, 2.4rem);
  margin: 16px 0 10px;
}
@media screen and (min-width: 960px) {
  #mileage .stepList li p {
    font-size: clamp(1.4rem, 1.5vw, 1.6rem);
  }
}
#mileage .summaryWrap {
  background-color: white;
  padding: 3% 5% 5%;
  border-top: 4px solid #0092E5;
}
@media screen and (max-width: 519px) {
  #mileage .summaryWrap {
    padding: 6% 6% 8%;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }
}
#mileage .summaryWrap h3 {
  border-bottom: 1px solid #BAB7CB;
  font-size: clamp(1.8rem, 1.8rem + (1vw - 0.52rem) * 0.4545454545, 2rem);
  font-weight: 700;
  color: #0092E5;
  padding-bottom: 8px;
  margin-bottom: 24px;
}
@media screen and (max-width: 519px) {
  #mileage .summaryWrap h3 {
    margin-bottom: 16px;
  }
}
#mileage .summaryWrap h3 span {
  color: #160E3E;
  font-weight: 400;
  font-size: clamp(1.6rem, 1.6rem + (1vw - 0.52rem) * 0.4545454545, 1.8rem);
}
@media screen and (max-width: 519px) {
  #mileage .summaryWrap h3 span {
    display: block;
  }
}
@media screen and (min-width: 960px) {
  #mileage .summaryWrap dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
#mileage .summaryWrap dl:not(:last-child) {
  margin-bottom: 24px;
}
#mileage .summaryWrap dl dt {
  width: 178px;
  height: 32px;
  background-color: #160E3E;
  color: white;
  font-weight: 400;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-right: 30px;
}
@media screen and (max-width: 959px) {
  #mileage .summaryWrap dl dt {
    margin-bottom: 10px;
  }
}
#mileage .summaryWrap dl dd {
  font-weight: 700;
  font-size: clamp(1.6rem, 1.6rem + (1vw - 0.52rem) * 0.4545454545, 1.8rem);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
#mileage .summaryWrap dl dd .u-cautionList {
  font-weight: 400;
  line-height: 1.8;
}
#mileage .summaryWrap dl dd span {
  font-weight: 400;
  font-size: clamp(1.2rem, 1.2rem + (1vw - 0.52rem) * 0.4545454545, 1.4rem);
}
#mileage .campaignWrap {
  border-top: 4px solid #DDAC07;
  border-bottom: 4px solid #DDAC07;
  background-color: white;
  padding: 3.5% 5%;
  text-align: center;
}
@media screen and (max-width: 959px) {
  #mileage .campaignWrap {
    padding: 6%;
  }
}
#mileage .campaignWrap h3 {
  color: #DDAC07;
  font-weight: 700;
  font-size: clamp(2rem, 2rem + (1vw - 0.52rem) * 0.9090909091, 2.4rem);
  margin-bottom: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#mileage .campaignWrap h3::before, #mileage .campaignWrap h3::after {
  content: "";
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  background: url(/images/mileage/ico_deco.svg) no-repeat left center/contain;
  width: 28px;
  height: 54px;
}
#mileage .campaignWrap h3::before {
  margin-right: 3rem;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
}
@media screen and (max-width: 519px) {
  #mileage .campaignWrap h3::before {
    margin-right: 1rem;
  }
}
#mileage .campaignWrap h3::after {
  margin-left: 3rem;
}
@media screen and (max-width: 519px) {
  #mileage .campaignWrap h3::after {
    margin-left: 1rem;
  }
}
#mileage .campaignWrap p {
  font-size: clamp(1.8rem, 1.8rem + (1vw - 0.52rem) * 0.4545454545, 2rem);
  font-weight: 700;
  line-height: 1.4;
}
#mileage .campaignWrap p span {
  color: #DDAC07;
}
#mileage .campaignWrap p span.font-L {
  font-size: clamp(3rem, 3rem + (1vw - 0.52rem) * 0.9090909091, 3.4rem);
}
#mileage .campaignWrap .period {
  color: #DDAC07;
  background-color: rgba(235, 203, 30, 0.1);
  max-width: 540px;
  margin: 0 auto;
  padding: 13px;
  font-weight: 700;
  font-size: clamp(1.6rem, 1.6rem + (1vw - 0.52rem) * 0.4545454545, 1.8rem);
}
#mileage .campaignWrap .u-cautionList {
  text-align: left;
  max-width: 540px;
  margin: 0 auto;
}
#mileage .section-content01 .p-lineTtl-h3 {
  text-indent: -1.3em;
  padding-left: 1.3em;
}
#mileage .section-content01 .flexWrap {
  gap: 3%;
}
@media screen and (max-width: 959px) {
  #mileage .section-content01 .flexWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    margin-bottom: 40px;
  }
}
#mileage .section-content01 .logoArea {
  background-color: black;
  padding: 3%;
  width: min(20%, 204px);
  height: min(20%, 204px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (min-width: 960px) {
  #mileage .section-content01 .logoArea {
    aspect-ratio: 1/1;
  }
}
@media screen and (max-width: 959px) {
  #mileage .section-content01 .logoArea {
    margin: 24px auto;
    min-width: 254px;
  }
}
@media screen and (max-width: 519px) {
  #mileage .section-content01 .logoArea {
    padding: 5%;
  }
}
#mileage .section-content01 .Earn01, #mileage .section-content01 .Earn02, #mileage .section-content01 .Earn03 {
  margin-bottom: 80px;
}
@media screen and (max-width: 959px) {
  #mileage .section-content01 .Earn01, #mileage .section-content01 .Earn02, #mileage .section-content01 .Earn03 {
    margin-bottom: 60px;
  }
}
#mileage .mileage_tableBox {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
#mileage .mileage_tableBox ul {
  width: 100%;
  border: 1px solid #BAB7CB;
  font-size: clamp(1.2rem, 1.2rem + (1vw - 0.52rem) * 0.4545454545, 1.4rem);
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
}
#mileage .mileage_tableBox ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: white;
}
#mileage .mileage_tableBox ul li:nth-child(2n+1) {
  background-color: #EAF6FF;
}
#mileage .mileage_tableBox ul li > div {
  padding: 2% 3%;
  line-height: 1.6;
  min-width: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  word-wrap: break-word;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
#mileage .mileage_tableBox ul li > div:not(:last-child) {
  border-right: thin solid #BAB7CB;
}
#mileage .mileage_tableBox ul li > div:first-child {
  width: 55%;
}
#mileage .mileage_tableBox ul li > div:nth-child(2) {
  width: 30%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#mileage .mileage_tableBox ul li > div:last-child {
  width: 15%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#mileage .mileage_tableBox ul li.head {
  background-color: #0092E5;
  color: white;
}
#mileage .mileage_tableBox ul li.head div {
  text-align: center;
  padding: 5px 10px;
  font-weight: normal;
  white-space: nowrap;
  min-width: 100px;
}
#mileage .mileage_tableBox .btn-acdn {
  position: absolute;
  margin-top: 10px;
  font-weight: 700;
  cursor: pointer;
  padding-left: 26px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
@media screen and (max-width: 519px) {
  #mileage .mileage_tableBox .btn-acdn {
    margin-left: auto;
    left: auto;
    -webkit-transform: none;
            transform: none;
    right: 0;
  }
}
#mileage .mileage_tableBox .btn-acdn::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
@media screen and (max-width: 519px) {
  #mileage .mileage_tableBox .btn-acdn::before {
    top: 1px;
    width: 20px;
    height: 20px;
  }
}
#mileage .mileage_tableBox .btn-acdn:hover {
  opacity: 0.7;
}
#mileage .mileage_tableBox .btn-acdn.js-btn-more {
  color: #0092E5;
  max-width: 112px;
}
@media screen and (max-width: 519px) {
  #mileage .mileage_tableBox .btn-acdn.js-btn-more {
    max-width: 100px;
  }
}
#mileage .mileage_tableBox .btn-acdn.js-btn-more::before {
  background: url(/images/common/ico_more.svg);
}
#mileage .mileage_tableBox .btn-acdn.js-btn-close {
  max-width: 80px;
}
@media screen and (max-width: 519px) {
  #mileage .mileage_tableBox .btn-acdn.js-btn-close {
    max-width: 72px;
  }
}
#mileage .mileage_tableBox .btn-acdn.js-btn-close::before {
  background: url(/images/common/ico_close.svg);
}
#mileage .bonusWrap {
  border: 1px solid #DDAC07;
  background-color: white;
  padding: 5%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 960px) {
  #mileage .bonusWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 3%;
    gap: 3%;
  }
}
#mileage .bonusWrap .figure_img {
  width: 8%;
  text-align: center;
}
@media screen and (max-width: 959px) {
  #mileage .bonusWrap .figure_img {
    width: min(15%, 58px);
    margin: 0 auto 16px;
  }
}
#mileage .bonusWrap .figure_caption {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
#mileage .bonusWrap h4 {
  color: #DDAC07;
  font-weight: 700;
  font-size: clamp(1.6rem, 1.6rem + (1vw - 0.52rem) * 0.4545454545, 1.8rem);
}
@media screen and (max-width: 959px) {
  #mileage .bonusWrap h4 {
    line-height: 1.6;
    text-align: center;
    margin-bottom: 16px;
  }
}
#mileage .flexWrap {
  row-gap: 40px;
}
@media screen and (min-width: 960px) {
  #mileage .flexWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 5%;
  }
}
@media screen and (min-width: 960px) {
  #mileage .flexWrap .figure_img {
    width: 40%;
  }
}
#mileage .flexWrap .figure_caption {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
@media screen and (min-width: 960px) {
  #mileage .flexWrap .figure_caption {
    padding-top: 3%;
  }
}
#mileage .benefitsList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 5%;
  row-gap: 40px;
}
@media screen and (max-width: 519px) {
  #mileage .benefitsList {
    row-gap: 32px;
  }
}
#mileage .benefitsList .figure_img {
  margin-bottom: 24px;
}
@media screen and (max-width: 519px) {
  #mileage .benefitsList .figure_img {
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 519px) {
  #mileage .benefitsList .figure_img img {
    width: 100%;
  }
}
#mileage .benefitsList .figure_caption {
  text-align: center;
  line-height: 1.8;
}
#mileage .benefitsList .figure_caption h4 {
  font-weight: 700;
}
#mileage .benefitsList .figure_caption .mile {
  color: #0092E5;
  font-weight: 700;
}
#mileage .benefitsList .figure_caption .note {
  font-size: clamp(1.2rem, 1.2rem + (1vw - 0.52rem) * 0.2272727273, 1.3rem);
}
#mileage .benefitsList-s {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 2.5%;
  row-gap: 40px;
  margin-bottom: 40px;
}
@media screen and (max-width: 519px) {
  #mileage .benefitsList-s {
    row-gap: 32px;
  }
}
#mileage .benefitsList-s li {
  width: max(18%, 180px);
}
@media screen and (max-width: 519px) {
  #mileage .benefitsList-s li {
    width: 48.75%;
  }
}
#mileage .benefitsList-s .figure_img {
  margin-bottom: 24px;
}
@media screen and (max-width: 519px) {
  #mileage .benefitsList-s .figure_img {
    margin-bottom: 10px;
  }
}
#mileage .benefitsList-s .figure_caption {
  text-align: center;
  line-height: 1.8;
}
#mileage .benefitsList-s .figure_caption h4 {
  font-weight: 700;
}
#mileage .benefitsList-s .figure_caption .mile {
  color: #0092E5;
  font-weight: 700;
}
#mileage .benefitsList-s .figure_caption .note {
  font-size: clamp(1.2rem, 1.2rem + (1vw - 0.52rem) * 0.2272727273, 1.3rem);
}
#mileage .section-content02 .benefitsWrap {
  margin-bottom: 80px;
}
@media screen and (max-width: 959px) {
  #mileage .section-content02 .benefitsWrap {
    margin-bottom: 60px;
  }
}
#mileage .p-cautionWrap {
  background-color: #F6F5F7;
}
#mileage .p-stepList li .step_ttl {
  font-size: 1.5rem;
}