@charset "utf-8";
/* 「果てしなきスカーレット」レスポンシブCSS メイン要素 */
/*------------------------------------------------*/
/*★ ＝＝ headerArea ＝＝ ★*/
#headerArea {
  position: relative;
}
/*mv*/
.mv {
  .mv__inner {
    position: relative;
    height: var(--mv-size-h);
    background: var(--mv-bg) no-repeat center center / cover;
  }
  .mv__logo, .mv__logo--picture {
    width: 100%;
    height: 100%;
  }
  .mv__logo--image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  @media(width < 861px) {
    --mv-size-h: calc((1300vw/ 7.5));
    --mv-logo-size-h: var(--mv-size-h);
    --mv-bg: url("../images/mv_bg_sp.webp");
  }
  @media(width >=861px) {
    --mv-size-h: 960px;
    --mv-bg: url("../images/mv_bg_pc.webp");
    --mv-bg-size: 1920px;
    @media(width <=1120px) {
      --mv-size-h: calc((960vw/ 11.2));
      --mv-bg-size: calc((1920vw/ 11.2));
    }
  }
}
/*------------------------------------------------*/
/*★ ＝＝ mainArea ＝＝ ★*/
[class^="section__title"]{
  text-align: center;
  margin-bottom: var(--sec-ttl-mb);
}
/*introduction*/
#introduction {
  background: var(--default-color-light-gray);
  padding: min((75vw / 7.5), 70px) 0 min((90vw / 7.5), 75px);
  .introduction {
    text-align: center;
    .introduction__lead {
      font-family: "Shippori Mincho";
      font-size: min((36vw / 7.5), 30px);
      font-weight: 700;
    }
    .introduction__photo {
      margin-top: min((45vw / 7.5), 30px);
      .introduction__photo--image {
        width: auto;
        height: min((342vw / 7.5), 226px);
        object-fit: contain;
      }
    }
    .introduction__text {
      margin-top: min((80vw / 7.5), 45px);
      .introduction__text--item {
        font-size: var(--default-font-size);
        line-height: calc(22 / 14);
        &:not(:first-child) {
          margin-top: 1.2em;
        }
        &.is-em {
          font-size: min((26vw / 7.5), 16px);
          margin-top: 1.5em;
        }
      }
    }
    .introduction__other {
      margin-top: min((50vw / 7.5), 45px);
      .introduction__roadshow {
        font-family: "Shippori Mincho";
        font-size: min((30vw / 7.5), 24px);
        font-weight: 700;
        .is-date {
          letter-spacing: .05em;
        }
      }
    }
    .introduction__button {
      margin-top: min((50vw / 7.5), 45px);
      .base__button--item--link {
        border-color: var(--default-color-main);
        background: var(--default-color-main);
        color: #fff;
        font-weight: bold;
      }
    }
  }
  .copyright {
    font-size: var(--default-font-size);
    margin-top: min((345vw / 7.5), 30px);
    text-align: center;
    color: #323232;
  }
  @media(width < 861px) {
    .introduction {
      width: min((580vw / 7.5), 550px);
      margin: auto;
    }
  }
}
/*tokuten*/
#tokuten {
  background: var(--tokuten-bg, url("../images/cpn_bg_sp.webp")) no-repeat center top / cover;
  padding: min((80vw / 7.5), 105px) 0 min((85vw / 7.5), 110px);
  --sec-ttl-mb: min((34vw / 7.5), 20px);
  .section__inner {
    @media(width <861px) {
      width: 100%;
    }
  }
  [class^="section__title"]{
    font-family: "Shippori Mincho";
    font-weight: 500;
    color: #fff;
    text-shadow: 0px 0px min((7vw / 7.5), 7px) #042940;
  }
  .section__title {
    display: flex;
    gap: min((15vw / 7.5), 25px); 
    font-size: min((63vw / 7.5), 70px);
    @media(width <861px) {
      flex-direction: column;
      align-items: center;
    }
    .section__title--catch {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 10em;
      font-size: min((30vw / 7.5), 24px);
      letter-spacing: .1em;
      border: min((2vw / 7.5), 2px) solid #fff;
      box-shadow: inset 0px 0px 3px #074a75, 0px 0px 3px #074a75;
      padding: .5em 1.3em;
      --sec-ttl-mb: 0;
      @media (width >= 861px) {
        width: 8em;
        padding: .5em;
        font-size: min((24vw / 11.04), 24px);
      }
    }
    .section__title--text {
      --sec-ttl-mb: 0;
      @media (width >= 861px) {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0;
        font-size: min((70vw / 11.04), 70px);
      }
    }
  }
  .section__title--sub {
    font-size: min((48vw / 7.5), 48px);
    margin-top: min((90vw / 7.5), 90px);
  }
  .tokuten__lead {
    font-family: "Shippori Mincho";
    font-weight: 500;
    color: #fff;
    text-shadow: 0px 0px min((7vw / 7.5), 7px) #042940;
    text-align: center;
    @media(width <861px) {
      text-align: center;
    }
  }
  .tokuten__lead--sub {
    font-size: min((30vw / 7.5), 30px);
  }
  .tokuten__lead--main {
    font-size: min((47vw / 7.5), 48px);
    @media(width <861px) {
      letter-spacing: -.05em;
    }
  }
  .tokuten-intro {
    width: var(--default-width);
    font-size: min((24vw / 7.5), 24px);
    font-weight: 500;
    text-align: center;
    color: var(--default-color-blue);
    margin: min((45vw / 7.5), 50px) auto 0;
  }
  .tokuten-lineup {
    width: min((706vw / 7.5), 706px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: min((50vw / 7.5), 50px);
    margin: min((60vw / 7.5), 60px) auto 0;
  }
  .tokuten-lineup__item {
    --item-size-h: min((300vw / 7.5), 300px);
  }
  .tokuten-lineup__item--text--image {
    width: auto;
    height: var(--item-size-h);
    object-fit: contain;
  }
  .tokuten__button {
    margin-top: min((20vw / 7.5), 20px);
    .base__button--item--link {
      border-color: var(--default-color-blue);
      background: var(--default-color-blue);
      color: #fff;
      font-weight: bold;
    }
  }
  .tokuten-apply {
    display: flex;
    flex-direction: column;
    gap: .8em;
    width: var(--default-width);
    margin: auto;
  }
  .tokuten-apply--text {
    font-size: min((28vw / 7.5), 23px);
    font-weight: bold;
    color: #fff;
    text-shadow: 0px 0px min((7vw / 7.5), 7px) #042940;
    text-indent: -2.6em;
    padding-left: 2.6em;
  }
  .tokuten-notes {
    width: max-content;
    color: var(--default-color-blue);
    margin: min((100vw / 7.5), 90px) auto 0;
    max-width: var(--default-width);
    position: relative;
  }
  .tokuten-notes__title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5em;
    font-size: min((28vw / 7.5), 20px);
    font-weight: bold;
    padding-bottom: .5em;
    border-bottom: 1px solid;
    margin-bottom: .5em;
    &::before, &::after {
      content: "＞";
    }
    &::before {
      transform: scale(-1, 1);
    }
  }
  .tokuten-notes__list {
    font-size: var(--default-font-size);
    font-weight: 500;
    line-height: 1.4;
    padding: 0 .65em;
  }
  .tokuten-notes__list--item, .tokuten-notes__list--item--detail-list--item {
    padding-left: 1em;
    text-indent: -1em;
    &.tokuten-notes__list--item:not(:first-child) {
      margin-top: .35em;
    }
    &.tokuten-notes__list--item--detail-list--item:has(.base-text-link):not(:last-child) {
      margin-bottom: .25em;
    }
  }
  @media(width >=861px) {
    --tokuten-bg: url("../images/cpn_bg_pc.webp");
  }
}
/*photo-runner*/
.photo-runner {
  display: grid;
  grid-template-columns: repeat(2, min((3147vw / 7.5), 3147px));
  height: min((118vw / 7.5), 118px);
  line-height: 0;
}
.photo-runner__item {
  width: 100%;
  height: 100%;
  background: url("../images/cpn_photo_bottom.png") no-repeat 0 0 / cover;
  animation: photo-runner 100s linear infinite;
}
@keyframes photo-runner {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/*close*/
#close {
  background: url(../images/lead_bg.webp) no-repeat center top / cover;
  padding: min((43vw / 7.5), 60px) 0 min((65vw / 7.5), 67px);
  text-shadow: 0px 2px 4px #fff;
  .close-text {
    font-size: min((28vw / 7.5), 16px);
    strong {
      font-size: min((36vw / 7.5), 24px);
      display: block;
      margin-bottom: .5em;
    }
  }
  .link-read-text {
    font-size: min((30vw / 7.5), 20px);
    margin: 0 0 min((30vw / 7.5), 20px);
  }
  .link__contents {
    margin-top: min((100vw / 7.5), 80px);
    &:not(:has([class*="banner"])) {
      display: none;
    }
  }
}
/*------------------------------------------------*/
/*★ ＝＝ footerArea ＝＝ ★*/
#footerArea {
  background: var(--default-color-light-gray);
  padding: min((60vw / 7.5), 50px) 0;
}
#bannerApp {
  background: #fff;
  padding: min((50vw / 7.5), 32px) 0;
  @media (width >=861px) {
    width: min((960vw / 11.04), 960px);
    margin: auto;
  }
}
/*reco-banner*/
.reco-banner__list {
  width: var(--bnr-size, min((650vw / 7.5), 460px));
  margin: auto;
  display: grid;
  grid-template-columns: var(--bnr-col, repeat(2, 1fr));
  gap: var(--bnr-gap, min((30vw / 7.5), 20px));
  @media (width >=861px) {
    --bnr-size: min((896vw / 11.04), 896px);
    --bnr-col: repeat(4, 1fr);
    --bnr-gap: calc((32 / 960) * 100%);
    --bnr-mw: 100%;
  }
}
.reco-banner__link {
  display: block;
  border: 4px solid var(--reco-bc, #fff);
}
/*★ ＝＝ searchArea（検索ボックスのレイアウト切り替えタイミングで変更） ＝＝ ★*/
/*search*/
#searchArea {
  padding-bottom: min((50vw / 7.5), 60px);
  @media (width >=861px) {
    padding: 60px 0;
    background: url("../images/search_bg_pc.webp") no-repeat center bottom / var(--default-bg-width-pc);
  }
}
/*
@media (min-width:741px) {
}
@media only screen and (orientation: landscape) and (max-width: 828px), only screen and (max-width: 740px) {
  #searchArea .rn-searchMod__formSection {
    padding-bottom: min((100vw / 7.5), 100px);
  }
}
#pageApp.is-device-tab ~ #searchArea {
  padding-bottom: min((86vw / 7.5), 86px);
}*/
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover : hover) and (pointer : fine) {
  #introduction {
    .introduction {
      .introduction__button {
        .base__button--item--link {
          transition: background var(--default-hover-speed), color var(--default-hover-speed);
          &:hover {
            background: #fff;
            color: #000 !important;
          }
        }
      }
    }
  }
  #tokuten {
    .tokuten__button {
      .base__button--item--link {
        transition: background var(--default-hover-speed), color var(--default-hover-speed);
        &:hover {
          background: #fff;
          color: var(--default-color-blue) !important;
        }
      }
    }
  }
  .reco-banner__link {
    &:hover {
      --reco-bc: var(--default-color-red);
    }
  }
}