@charset "utf-8";
/*------------------------------------------------*/
/*★ ページスタイル設定 ★*/
/*------------------------------------------------*/
/*★ ＝＝ headerArea ＝＝ ★*/

#mv{
  position: relative;
  height: var(--mv-size-h);
  background: var(--default-color-bg) var(--mv-bg) no-repeat center center / cover;
  @media(width <861px) {
    --mv-size-h: calc(300vw / 3.75);
    --mv-bg: url("../images/mv_bg_sp.webp");
  }
  @media(width >=861px) {
    --mv-size-h: 520px;
    --mv-bg: url("../images/mv_bg_pc.webp");
  }
  .mv__title {
    width: min((320vw / 3.75), 640px);
    margin: auto;
    padding-top: min((42vw / 3.75), 84px);
    @media(width >=861px) {
      padding-top: 118px;
    }
    .mv__title--text {
      width: 100%;
      height: min((134vw / 3.75), 268px);
      object-fit: contain;
    }
  }
}

/*------------------------------------------------*/
/*★ ＝＝ mainArea ＝＝ ★*/
#mainArea {
  background: var(--default-color-bg);
  .section {
    padding: min((40vw / 3.75), 62px) 0;
  }
  .section__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--default-color-blue);
    font-weight: bold;
  }
  .section__inner {
    width: var(--default-width);
    margin: auto;
  }
}
/*section*/

/*profile*/
#profile {
  .section__inner {
    width: min(var(--default-width-sp), 760px);
    background: #fff;
    padding: min((24vw / 3.75), 32px);
    @media(width <861px) {
      border: 1px solid #DFD6AF;
    }
  }
  .profile {
    display: flex;
    gap: min((22vw / 3.75), 24px);
    @media(width <861px) {
      flex-direction: column;
    }
    @media(width >=861px) {
      padding: 0 26px;
    }
    .profile__data {
      @media(width <861px) {
        order: 1;
      }
      @media(width >=861px) {
        width: calc((100% - 24px) - 200px);
      }
    }
    .profile__data--name {
      display: flex;
      gap: min((16vw / 3.75), 16px);
      align-items: baseline;
      background: url(../images/border.svg) no-repeat bottom right / contain;
      padding-bottom: min((40vw / 7.5), 40px);
      @media(width >=861px) {
        padding-bottom: 20px;
      }
    }
    .profile__data--name--main {
      font-size: min((18vw / 3.75), 26px);
      font-weight: bold;
    }
    .profile__data--name--sub {
      font-size: var(--default-font-size);
    }
    .profile__data--detail {
      display: flex;
      flex-direction: column;
      gap: 1.5em;
      font-size: var(--default-font-size);
      font-weight: bold;
      margin-top: min((16vw / 3.75), 16px);
    }
    .profile__data--works {
      display: flex;
      gap: min((16vw / 3.75), 16px);
      @media(width <861px) {
        flex-direction: column;
      }
      @media(width >=861px) {
        padding: 0 15px;
        gap: 10px;
      }
      margin-top: min((16vw / 3.75), 16px);
    }
    .profile__data--works--item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: min((8vw / 3.75), 8px);
    }
    .profile__data--works--item--example {
      width: min((285vw / 3.75), 285px);
      @media(width >=861px) {
        width: 190px;
      }
    }
    .profile__data--works--item--example--image {
      width: auto;
      height: min((140vw / 3.75), 140px);
      object-fit: contain;
      @media(width >=861px) {
        height: 93px;
      }
    }
    .profile__data--works--item--cap {
      font-weight: bold;
    }
    .profile__photo {
      text-align: center;
      @media(width >=861px) {
        width: 200px;
      }
    }
    .profile__photo--image {
      width: auto;
      height: min((225vw / 3.75), 300px);
      object-fit: contain;
    }
  }
}
/*howto*/
#howto {
  .section__inner {
    width: min(var(--default-width-sp), 760px);
    background: #fff;
    padding: min((24vw / 3.75), 32px);
    @media(width <861px) {
      border: 1px solid #DFD6AF;
    }
  }
  .section__title {
    margin-bottom: min((16vw / 3.75), 24px);
  }
  .section__title--main {
    font-size: min((24vw / 3.75), 32px);
  }
  .howto__item:not(:first-child) {
    margin-top: 1.5em;
  }
  .howto__item--title {
    font-size: min((16vw / 3.75), 16px);
    font-weight: bold;
    color: var(--default-color-blue);
    margin-bottom: .5em;
  }
  .howto__item--text {
    font-size: min((16vw / 3.75), 16px);
    font-weight: bold;
  }
  .step__list {
    display: flex;
    flex-direction: column;
    gap: min((16vw / 7.5), 16px);
  }
  .step__list--item {
    display: flex;
    --step-gap: min((8vw / 3.75), 8px);
    gap: var(--step-gap);
    font-size: min((16vw / 3.75), 16px);
    font-weight: bold;
    --num-size: 1.5em;
    .step__list--item--num {
      display: flex;
      align-items: center;
      justify-content: center;
      width: var(--num-size);
      height: var(--num-size);
      color: #fff;
      border-radius: 100px;
      background: var(--default-color-blue);
    }
    .step__list--item--text {
      width: calc(100% - (var(--num-size) + var(--step-gap)));
    }
  }

}
/*movie*/
#movie {
  .section__title {
    margin-bottom: min((24vw / 3.75), 32px);
  }
  .section__title--main {
    font-size: min((28vw / 3.75), 36px);
    text-align: center;
  }
  .section__title--sub {
    font-size: min((18vw / 3.75), 26px);
  }
  .movie__list {
    display: flex;
    flex-direction: column;
    gap: min((40vw / 3.75), 40px)
  }
}
/*------------------------------------------------*/
/*★ ＝＝ footerArea ＝＝ ★*/
#footerArea {
  background: var(--default-color-bg);
  padding: min((40vw / 3.75), 62px) 0 min((120vw / 3.75), 100px);
}
#bannerApp {
  width: var(--default-width);
  margin: auto;
}
.reco-banner__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min((40vw / 7.5), 30px);
}
/*------------------------------------------------*/
/*★ ＝＝ searchArea ＝＝ ★*/
#searchArea {
  @media(width >=861px) {
    padding: 80px 0;
  }
}

/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover : hover) and (pointer : fine) {
  .reco-banner__link {
    transition: var(--default-hover-transition-opacity);
    &:hover {
      opacity: var(--default-hover-opacity);
    }
  }
}