@charset "utf-8";

/*------------------------------------------------*/
/*★ ページスタイル設定 ★*/
/*------------------------------------------------*/
/*★ ＝＝ headerArea ＝＝ ★*/
#headerArea {
  padding-bottom: min((100vw / 8.34), 150px);
}

/*------------------------------------------------*/
/*★ ＝＝ mainArea ＝＝ ★*/

.main {
  color: var(--default-color-base);
}

/*section*/
.section__inner {
  width: var(--default-width);
  margin: auto;
  padding: min((80vw / 8.34), 140px) 0;
}

.section__title {
  width: fit-content;
  text-align: center;
  line-height: 1.2;
  display: grid;
  margin: 0 auto calc(60vw / 8.34);
  position: relative;

  @media (1180px <=width) {
    margin: 0 auto 130px;
  }
}

.section__title::before {
  content: "";
  position: absolute;
  width: min((130vw / 8.34), 200px);
  height: min((210vw / 8.34), 350px);
  top: min((-20vw / 8.34), (-37vw / 8.34));
  left: max((-130vw / 8.34), -230px);
}

.section__title::after {
  content: "";
  position: absolute;
  width: min((130vw / 8.34), 200px);
  height: min((210vw / 8.34), 350px);
  top: min((-20vw / 8.34), (-37vw / 8.34));
  right: max((-130vw / 8.34), -220px);
}

#point .section__title {
  &::before {
    background: url(../images/point_kazari_l.png) no-repeat;
    background-size: contain;
  }

  &::after {
    background: url(../images/point_kazari_r.png) no-repeat;
    background-size: contain;
  }
}

#ranking .section__title {
  &::before {
    background: url(../images/ranking_kazari_l.png) no-repeat;
    background-size: contain;
  }

  &::after {
    background: url(../images/ranking_kazari_r.png) no-repeat;
    background-size: contain;
  }
}

#recommend .section__title {
  &::before {
    background: url(../images/recommend_kazari_l.png) no-repeat;
    background-size: contain;
  }

  &::after {
    background: url(../images/recommend_kazari_r.png) no-repeat;
    background-size: contain;
  }
}

#prepare .section__title {
  &::before {
    background: url(../images/prepare_kazari_l.png) no-repeat;
    background-size: contain;
  }

  &::after {
    background: url(../images/prepare_kazari_r.png) no-repeat;
    background-size: contain;
  }
}

.section__subtitle {
  font-weight: 700;
  font-size: min((36vw / 8.34), 38px);
  text-align: center;
  margin-bottom: min((50vw / 8.34), 60px);
}

.section__title--large {
  font-weight: 900;
  font-size: min((50vw / 8.34), 60px);
  background: linear-gradient(90deg, #048FC8 30%, #3A41BC 50%, #E42F93 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: min((35vw / 8.34), 45px);
  z-index: 2;
}

.section__title--small {
  font-weight: 700;
  font-size: min((30vw / 8.34), 35px);
  color: #3A41BC;
  margin-bottom: min((16vw / 8.34), 15px);
}

.section__title--kazari {
  display: flex;
  gap: min((21vw / 8.34), 16px);
  justify-content: center;

  :is(.section__title--kazari--a, .section__title--kazari--b, .section__title--kazari--c, .section__title--kazari--d, .section__title--kazari--e, .section__title--kazari--f) {
    width: min((16.46vw / 8.34), 13px);
    height: min((16.46vw / 8.34), 13px);
    border-radius: 50%;
  }

  .section__title--kazari--a {
    background: #98D8F2;
  }

  .section__title--kazari--b {
    background: #98BCF2;
  }

  .section__title--kazari--c {
    background: #696EC7;
  }

  .section__title--kazari--d {
    background: #9E69C7;
  }

  .section__title--kazari--e {
    background: #C769B3;
  }

  .section__title--kazari--f {
    background: #F5A6D2;
  }
}

.section__title--photo {
  width: 100%;
  margin: 35px 0em 60px;
}

@media (835px <=width) {
  .section__title--photo {
    width: 328.85px;
    height: 303.47px;
    position: relative;
    text-align: left;
    margin: -15em 0em 0em -7em;
    z-index: 1;
  }
}

/* 背景 */
#ranking,
#prepare {
  background: #FAFAFF url("../images/bg_kazari.png") repeat center top / contain;
}

#point,
#recommend,
#faq {
  background: url("../images/bg_dots.png") repeat top 10px center;
}

#searchArea {
  @media (width >=741px) {
    padding: 120px 0;
    background-image: url("../images/bg_search.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
  }
}

.partition {
  margin: min((80vw / 8.34), 100px) 0 min((80vw / 8.34), 100px);
}


/*★ ＝＝ button ＝＝ ★*/
.button_s_blue {
  color: var(--default-color-white);
  width: 100%;

  /*@media (835px <=width) {
    width: 320px;
  }*/
}

#ranking .button_s_blue,
#recommend .button_s_blue {
  @media (835px <=width) {
    width: 330px;
  }
}

.button_s_blue__link {
  display: grid;
  justify-items: center;
  align-items: center;
  text-align: center;
  grid-template-columns: 1fr .85em;
  gap: 0;
  height: 100%;
  font-weight: bold;
  line-height: 1.2;
  padding: .7em 1.4em .8em calc(1em + .85em);
  background: var(--default-color-base);
  border-radius: 200px;

  &::after {
    content: "";
    background: var(--default-icon-arw-r) var(--default-bg-setting);
    width: 100%;
    height: 1.9em;

    @media(834px >=width) {
      height: 2em;
      padding: 0;
    }
  }

  &[target="_blank"]::after {
    background: var(--default-icon-blank) var(--default-bg-setting);
    height: 1.3em;
    width: 1.3em;

    @media(width < 861px) {
      height: 1.2em;
      width: 1.2em;
    }
  }

  &[href^="#"]::after {
    transform: rotate(90deg);
  }
}

.base-button_s__wrapper {
  display: grid;
  margin: calc(100vw / 8.34) auto 0;
  gap: calc(50vw / 8.34) 0;
  width: var(--default-width);

  @media (835px <=width) {
    grid-template-columns: repeat(3, 1fr);
    margin: 100px auto 0;
  }
}

.base-button_s {
  display: grid;
  gap: calc(20vw / 8.34);

  @media (835px <=width) {
    grid-template-rows: 1fr auto;
    justify-content: center;
    text-align: center;
    row-gap: 1.5em;
  }
}

.button_s_blue__text {
  font-size: min((26vw / 8.34), 16px);
  font-weight: 500;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .75em;

  &::before,
  &::after {
    content: "";
    background: url("../images/kazari_m.png") no-repeat center center / cover;
    width: min((22vw / 8.34), 15px);
    height: min((37vw / 8.34), 26px);
  }

  &::after {
    transform: scale(-1, 1);
  }

  @media (835px >=width) {
    font-weight: 700;
  }
}

.button_m_blue {
  color: var(--default-color-white);
  margin: min((60vw / 8.34), 60px) auto 0;
  display: flex;
  justify-content: center;
  gap: calc(50vw / 8.34) 0;
  flex-direction: column;
  align-items: center;
  width: var(--default-width);

  @media (835px <=width) {
    gap: 0 50px;
    flex-direction: row;
  }
}

.button_m_blue__link {
  display: grid;
  justify-items: center;
  align-items: center;
  text-align: center;
  grid-template-columns: 1fr .85em;
  gap: 0;
  height: 100%;
  font-size: var(--fs-button);
  font-weight: bold;
  line-height: 1.2;
  padding: .7em 1.4em .8em calc(1em + .85em);
  background: var(--default-color-base);
  border-radius: 200px;
  width: 98%;

  @media (835px <=width) {
    width: 460px;
  }

  &::after {
    content: "";
    background: var(--default-icon-arw-r) var(--default-bg-setting);
    width: 100%;
    height: 1.9em;

    @media(width < 861px) {
      height: 2em;
    }
  }

  &[target="_blank"]::after {
    background: var(--default-icon-blank) var(--default-bg-setting);
    height: 1.3em;
    width: 1.3em;

    @media(width < 861px) {
      height: 1.2em;
      width: 1.2em;
    }
  }

  &[href^="#"]::after {
    transform: rotate(90deg);
  }
}

.button_m_blue__link span,
.button_s_blue__link span {
  height: 2em;
  display: flex;
  align-items: center;
}

.base-button_mw__wrapper {
  margin: min((100vw / 8.34), 150px) auto 0;
  width: var(--default-width);
}

.button_m_white {
  color: var(--default-color-base);
  width: 100%;

  @media (835px <=width) {
    width: 460px;
    margin: 0 auto;
  }
}

.button_m_white__link {
  display: grid;
  justify-items: center;
  align-items: center;
  text-align: center;
  grid-template-columns: 1fr .85em;
  gap: 0;
  height: 100%;
  font-size: var(--fs-button);
  font-weight: bold;
  line-height: 1.2;
  padding: 1.1em 1.4em;
  background: var(--default-color-white);
  border: solid 2px var(--default-color-base);
  border-radius: 200px;

  &::after {
    content: "";
    background: var(--default-icon-blue) var(--default-bg-setting);
    width: 100%;
    height: 1.2em;
    transform: rotate(90deg);
  }

  &[target="_blank"]::after {
    background: var(--default-icon-blue-blank) var(--default-bg-setting);
    height: 1em;

    @media(width < 861px) {
      height: 1.2em;
      width: 1.2em;
    }
  }

  &[href^="#"]::after {
    transform: rotate(90deg);
  }
}

.base-text-link {
  display: grid;
  grid-template-columns: auto 1em;
  justify-content: end;
  align-items: center;
  text-align: right;
  font-size: min((28vw / 8.34), 18px);
  font-weight: 700;

  &::after {
    content: "";
    background: var(--default-icon-blue) var(--default-bg-setting);
    width: 1em;
    height: 1em;
    margin-left: .4em;
  }

  &[target="_blank"]::after {
    background: var(--default-icon-blue-blank) var(--default-bg-setting);
    width: 1em;
    height: 1em;
  }

  &[href^="#"]::after {
    transform: rotate(90deg);
  }
}

/*なぜすべての画像に設定？*/
.base-picture__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

/*★ ＝＝ MV ＝＝ ★*/
.mv {
  position: relative;
  width: 100%;
  height: calc(734vw / 8.34);

  @media (835px <=width) {
    height: 664px;
  }

  & .mv__slider {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  .mv__content {
    position: absolute;
    width: min((630vw / 8.34), 1104px);
    height: min((840vw / 8.34), 600px);
    top: min((75vw / 8.34), 110px);
    left: 50%;
    transform: translate(-50%);
  }

  .mv__logo {
    width: min((630vw / 8.34), 750px);
    margin-bottom: calc(144vw / 8.34);
  }

  .mv__people {
    width: min((582vw / 8.34), 569px);
  }

  .mv__slider--track {
    height: 100%;
  }

  .mv__photo {
    width: 100%;
    height: min((734vw / 8.34), 664px);
    display: block;
    object-fit: cover;
  }

  .mv__photo .base-picture__image {
    height: auto;

    @media (835px <=width) {
      height: 100%;
    }
  }

  @media (1260px <=width) {
    .mv__content__logos {
      position: relative;
      display: inline-block;
      text-align: left;

      &::before,
      &::after {
        content: "";
        position: absolute;
      }

      &::before {
        width: 116px;
        height: 96px;
        background: url("../images/mv_icon_01.png") no-repeat center center / cover;
        left: -138px;
        top: 6px;
      }

      &::after {
        width: 90px;
        height: 80px;
        background: url("../images/mv_icon_02.png") no-repeat center center / cover;
        right: -115px;
        top: 80px;
      }
    }

    .mv__logo {
      margin-bottom: -53px;
    }

    .mv__content__peoples {
      position: relative;
      display: block;
      text-align: right;
    }

    .mv__people {
      display: inline-block;
      width: 569px;
    }
  }

  @media (1430px <=width) {
    .mv__content__peoples {

      &::before {
        content: "";
        position: absolute;
      }

      &::before {
        width: 121px;
        height: 73px;
        background: url("../images/mv_icon_03.png") no-repeat center center / cover;
        right: 347px;
        top: -33px;
      }
    }
  }

  @media (835px <=width) {}

  @media (min-width: 835px) and (max-width: 1259px) {
    .mv__content {
      width: min((630vw / 8.34), 750px);
    }

    .mv__content__logos {
      position: relative;
      display: inline-block;
      text-align: left;

      &::before,
      &::after {
        content: "";
        position: absolute;
      }

      &::before {
        width: 116px;
        height: 96px;
        background: url("../images/mv_icon_01.png") no-repeat center center / cover;
        left: -138px;
        top: 6px;
      }

      &::after {
        width: 90px;
        height: 80px;
        background: url("../images/mv_icon_02.png") no-repeat center center / cover;
        right: -115px;
        top: 80px;
      }
    }

    .mv__logo {
      margin-bottom: 1vw;
    }

    .mv__content__peoples {
      position: relative;
      display: block;
      text-align: right;

      &::before {
        content: "";
        position: absolute;
      }

      &::before {
        width: 121px;
        height: 73px;
        background: url("../images/mv_icon_03.png") no-repeat center center / cover;
        right: 370px;
        top: 27px;
      }
    }
  }

}

.mv__lead {
  display: grid;
  text-align: center;
  font-weight: 500;
  padding-top: calc(150vw / 8.34);

  @media (500px >=width) {
    margin-top: auto;
  }

  @media (1260px <=width) {
    margin-top: 100px;
    padding-top: 0;
  }

  @media (min-width: 981px) and (max-width: 1259px) {
    margin-top: calc(90vw / 8.34);
    padding-top: 0;
  }

  @media (min-width: 835px) and (max-width: 980px) {
    margin-top: min((70vw / 8.34), (80vw / 8.34));
    padding-top: 0;
  }
}

.mv__lead--title {
  width: min((661vw / 8.34), 550px);
  margin: 0 auto;
  display: block;
}

.mv__lead--text--small {
  font-size: min((26vw / 8.34), 16px);
  margin: 60px 0 20px;

  @media (834px >=width) {
    display: flex;
    flex-direction: column;
    margin: calc(70vw / 8.34) 0 calc(60vw / 8.34);
    gap: calc(6vw / 8.34);
  }
}

.mv__lead--text--large {
  font-size: min((26vw / 8.34), 20px);
}

/*★ ＝＝ morefun ＝＝ ★*/
#morefun {
  & .section__inner {
    width: 100%;
    padding: 0;
  }

  .morefun__title {
    font-size: min((32vw / 8.34), 28px);
    font-weight: 700;
    margin: 0 auto min((40vw / 8.34), 40px);
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    text-align: center;
    line-height: 1.2;
    position: relative;

    &::before,
    &::after {
      content: "";
      display: inline-block;
      width: min((22.17vw / 8.34), 21px);
      height: min((38vw / 8.34), 36px);
      background: url("../images/kazari_m.png") no-repeat center center / cover;
      margin: 0 .8em 0 .6em;

      @media (835px <=width) {
        width: 21px;
        height: 36px;
      }
    }

    &::after {
      transform: scale(-1, 1);
    }
  }

  /*.morefun__lineup {
    row-gap: min((40vw / 8.34), 30px);
  }*/

  .morefun__list--item--details {
    display: grid;
    width: 100%;
    height: 100%;
  }

  .morefun__list--item {
    margin-right: 40px;
  }

  .morefun__list--item--detail {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    row-gap: min((10vw / 8.34), 10px);
    padding: 0 min((18vw / 8.34), 12px) min((18vw / 8.34), 12px);
  }

  .morefun__list--item--tags {
    display: flex;
    flex-wrap: wrap;
    color: var(--default-color-white);
    font-weight: 500;
    gap: min((12vw / 8.34), 8px) min((11vw / 8.34), 8px);
    font-size: var(--font-size-morefun);
  }

  .morefun__list--item--tag {
    background: rgb(0 0 0 / 0.6);
    padding: .1em .4em .2em;
  }

  .morefun__list--item--bg {
    order: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
  }

  :is(.morefun__list--item--bg, .morefun__list--item--detail) {
    grid-area: 1/-1;
  }
}

/*★ ＝＝ anxiety ＝＝ ★*/
#anxiety {
  font-size: min((32vw / 8.34), 28px);
  text-align: center;
  font-weight: 700;

  .anxiety__inner {
    display: grid;
    grid-auto-rows: auto auto auto;
    margin: min((100vw / 8.34), 120px) auto;
    padding-top: min((60vw / 8.34), 60px);
  }

  & .section__inner {
    padding: 0;
  }

  & .section__title {
    margin: 0 auto min((50vw / 8.34), 40px);
    position: relative;
    line-height: 1.5;
  }

  .anxiety__title--demo {
    position: absolute;
    width: min((97.34vw / 8.34), 99px);
    height: min((57.03vw / 8.34), 58px);
    left: -7%;
    top: -60%;

    @media(835px <=width) {
      left: -7%;
      top: -77%;
    }
  }

  .anxiety__photo {
    width: 100%;
    position: relative;
    padding-top: calc((586 / 811) * 100%);
    margin-bottom: calc(50vw / 8.34);

    @media (835px <=width) {
      padding-top: calc((463 / 1044) * 100%);
      margin-bottom: 80px;
    }
  }
}


/*★ ＝＝ point ＝＝ ★*/

#point {
  & .section__subtitle {
    text-align: left;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 min((20vw / 8.34), 20px);
    margin-bottom: min((30vw / 8.34), 34px);

    &::before {
      content: "point";
      background-color: #2165C2;
      font-size: min((24vw / 8.34), 18px);
      color: var(--default-color-white);
      padding: min((10vw / 8.34), 6px) min((13vw / 8.34), 13px) min((11vw / 8.34), 10px);
      line-height: 1;

      @media (835px <=width) {
        &::before {
          padding: 2px 15px 6px;
        }
      }
    }
  }

  .point__main--text {
    text-align: left;
    flex: 1;
  }

  .point__main--point {
    white-space: nowrap;
    margin-top: 5px;
    font-size: min((16vw / 8.34), 18px);
    color: var(--default-color-white);
    background-color: #2165C2;
    padding: 2px 15px 6px;
    order: -1;
  }


  .point__main--lead {
    font-weight: 500;
    font-size: min((26vw / 8.34), 18px);
    text-align: center;
    line-height: 1.6;
    margin-bottom: min((50vw / 8.34), 70px);
  }

  /*★ ＝＝ point__layoutA ＝＝ ★*/

  .point__layoutA {
    display: grid;
    gap: min((40vw / 8.34), 80px);
    line-height: 1.2;

    .point__layoutA__list {
      display: grid;
      background: linear-gradient(90deg, rgba(152, 216, 242, 1) 16%, rgba(105, 110, 199, 1) 50%, rgba(245, 166, 210, 1) 85%);
      border-radius: calc(24vw / 8.34);
      padding: calc(12vw / 8.34);

      @media (835px <=width) {
        border-radius: 20px;
        padding: 8px;
      }
    }

    .point__layoutA__list--item {
      display: grid;
      grid-template-areas:
        "title photo"
        "text text"
        "btn btn";
      grid-template-columns: 1fr calc(370vw / 8.34);
      align-items: center;
      gap: 0 calc(30vw / 8.34);
      background: #fff;
      border-radius: calc(16vw / 8.34);
      padding: calc(40vw / 8.34) calc(30vw / 8.34) calc(50vw / 8.34);

      @media (835px <=width) {
        grid-template-columns: auto 1fr;
        gap: 0 30px;
        padding: 60px;
        border-radius: 16px;
      }
    }

    .point__layoutA__list--item--titles {
      display: flex;
      flex-wrap: wrap;
      text-align: center;
      gap: 0 calc(10vw / 8.34);
      justify-content: center;

      @media (835px <=width) {
        grid-area: title;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        gap: 0 8px;
      }
    }

    .point__layoutA__list--item--icon {
      width: calc(105vw / 8.34);

      @media (835px <=width) {
        grid-column: 1;
        text-align: right;
        width: 100%;
      }
    }

    .point__layoutA__list--item--num {
      font-size: min((53vw / 8.34), 53px);
      font-weight: 700;
      font-family: "Roboto", sans-serif;

      @media (835px <=width) {
        grid-column: 2;
        text-align: left;
      }
    }

    .point__layoutA__list--item--title {
      font-size: min((32vw / 8.34), 36px);
      font-weight: 900;
      width: 100%;

      @media (835px <=width) {
        grid-column: 1 / 3;
      }
    }

    .point__layoutA__list--item--text {
      grid-area: text;
      font-size: var(--font-size-detail);
      font-weight: 500;
      line-height: 1.6;
      margin-top: min((30vw / 8.34), 30px);
    }

    .point__layoutA__list--item--photo {
      grid-area: photo;
      width: 100%;
      position: relative;
      padding-top: calc((335 / 468) * 100%);
    }

    .point__layoutA__button {
      grid-area: btn;
      display: grid;
      gap: calc(50vw / 8.34);
      margin: calc(65vw / 8.34) calc(12vw / 8.34) 0;

      @media (835px <=width) {
        gap: 50px 0;
        margin: 0 auto;
        grid-template-columns: 430px;

        &:has(.point__layoutA__button__list:nth-child(2)) {
          grid-template-columns: repeat(2, 1fr);
          gap: 50px;
          margin: 0 auto;
        }

        &:has(.point__layoutA__button__list:nth-child(3)) {
          grid-template-columns: repeat(3, 1fr);
          gap: 20px;
          margin: 0 0 0 -16px;
        }
      }
    }

    .point__layoutA__button__list {
      display: grid;
      justify-items: center;
      gap: calc(20vw / 8.34);

      @media (835px <=width) {
        margin: 60px 0 0;
        gap: 20px 0;
      }
    }

    @media (835px <=width) {
      .point__layoutA__list--item {
        grid-template-areas:
          "title photo"
          "text photo"
          "btn btn";
        grid-template-columns: repeat(2, 1fr);
        align-items: start;
      }

      .point__layoutA__button.layoutA_04 {
        grid-template-columns: repeat(3, 1fr);
        gap: 23px;
        margin: 0 auto;

        @media (835px < width <=1230px) {
          grid-template-columns: repeat(2, 1fr);
        }
      }
    }
  }

  /*★ ＝＝ point__layoutB ＝＝ ★*/

  .point__layoutB {
    background: linear-gradient(90deg, rgba(152, 216, 242, 1) 16%, rgba(105, 110, 199, 1) 50%, rgba(245, 166, 210, 1) 85%);
    border-radius: calc(24vw / 8.34);
    padding: calc(12vw / 8.34);

    @media (835px <=width) {
      padding: 70px 60px 60px;
      border-radius: 20px;
      padding: 8px;
    }

    .point__layoutB__tab__container {
      background: var(--default-color-white);
      border-radius: calc(16vw / 8.34);
      padding: calc(40vw / 8.34) calc(30vw / 8.34) calc(50vw / 8.34);

      @media (835px <=width) {
        padding: 60px;
        border-radius: 16px;
      }
    }

    .ui-static-tab {
      padding: 0;
    }

    .ui-static-tab-button-list {
      column-gap: min((25vw / 8.34), 30px);
      grid-template-columns: repeat(4, 1fr);
      justify-content: center;

      @media (835px <=width) {
        grid-template-columns: repeat(4, 200px);
      }
    }

    .point__layoutB--title {
      font-size: min((28vw / 8.34), 30px);
      font-weight: 900;
      color: #3A41BC;
      text-align: center;
      margin-bottom: min((60vw / 8.34), 60px);
    }

    .ui-static-tab-button {
      font-size: min((28vw / 8.34), 20px);
      font-weight: 900;
      color: var(--default-color-base);
      padding: calc(22vw / 8.34) calc(18vw / 8.34);
      border-radius: 8px;
      min-width: auto;
      line-height: 1.3;

      @media (835px <=width) {
        padding: 25px 0;
      }

      &::before {
        transform: translateX(-50%);
        clip-path: polygon(50% 83%, 0 0, 100% 0);
        width: calc(31vw / 8.34);
        height: calc(28vw / 8.34);
        bottom: calc(-27vw / 8.34);
        left: 50%;

        @media (835px <=width) {
          bottom: -20px;
          width: 25px;
          height: 23px;
        }
      }

      &:nth-child(1) {
        background-color: #E2F6FF;
      }

      &:nth-child(1).is-active,
      &:nth-child(1).is-active:before {
        background-color: #048FC8;
      }

      &:nth-child(2) {
        background-color: #F0F1FF;
      }

      &:nth-child(2).is-active,
      &:nth-child(2).is-active:before {
        background-color: #3A41BC;
      }

      &:nth-child(3) {
        background-color: #FDF3FF;
      }

      &:nth-child(3).is-active,
      &:nth-child(3).is-active:before {
        background-color: #9F28BD;
      }

      &:nth-child(4) {
        background-color: #FFF3F9;
      }

      &:nth-child(4).is-active,
      &:nth-child(4).is-active:before {
        background-color: #E42F93;
      }

    }

    .ui-static-tab-button.is-active {
      color: #fff;
    }

    .point__layoutB--subtitle {
      font-size: min((28vw / 8.34), 26px);
      font-weight: 700;
      text-align: center;
      margin: calc(55vw / 8.34) calc(30vw / 8.34) calc(20vw / 8.34);

      @media (835px <=width) {
        margin: 70px 0 60px;
      }
    }

    .point__layoutB__content {
      display: grid;
      gap: calc(40vw / 8.34);

      @media (835px <=width) {
        grid-template-columns: 387px auto;
        gap: 40px;
      }
    }

    .point__layoutB__schedule {
      display: grid;
      row-gap: min((25vw / 8.34), 30px);
      border-bottom: 2px dotted var(--default-color-base);
      border-top: 2px dotted var(--default-color-base);
      padding: calc(30vw / 8.34) calc(10vw / 8.34);
      font-size: min((28vw / 8.34), 18px);
      font-weight: 500;

      @media (835px <=width) {
        order: 1;
        border-bottom: none;
        border-top: none;
        padding: 0px 0px;
      }
    }

    .point__layoutB__schedule--items {
      @media (835px <=width) {
        background: #F5F5F5;
        padding: 25px 30px;
      }
    }

    .point__layoutB__schedule--times {
      display: flex;
    }

    .point__layoutB__schedule--time {
      width: min((125vw / 8.34), 90px);
      font-weight: 700;
    }

    .point__layoutB__schedule--text {
      @media (835px <=width) {}
    }

    .point__layoutB__schedule--links {
      background: #F8F8F8;
      display: grid;
      row-gap: min((25vw / 8.34), 15px);
      padding: calc(30vw / 8.34);
      margin-top: calc(20vw / 8.34);
      margin-left: calc(40vw / 8.34);

      @media (835px <=width) {
        margin-top: 25px;
        margin-left: 0px;
        padding: 23px 5px 5px;
        border-top: 2px dotted var(--default-color-base);
      }
    }

    .point__layoutB__schedule--links--title {
      font-size: min((26vw / 8.34), 16px);
      font-weight: 700;
    }

    .point__layoutB__schedule--links--text {
      font-size: min((26vw / 8.34), 16px);
      text-decoration: underline;
      text-underline-offset: 4px;
      padding-left: min((40vw / 8.34), 25px);
      position: relative;

      &::before {
        content: "";
        display: inline-block;
        width: calc(15vw / 8.34);
        height: calc(15vw / 8.34);
        border-top: solid 2px #fff;
        border-right: solid 2px #fff;
        transform: rotate(45deg);
        position: absolute;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        -webkit-transform: translateY(-50%) rotate(45deg);
        left: calc(6vw / 8.34);
        z-index: 2;

        @media (835px <=width) {
          left: 3.8px;
          width: 8px;
          height: 8px;
        }
      }

      &::after {
        content: "";
        width: min((32vw / 8.34), 18px);
        height: min((32vw / 8.34), 18px);
        background: var(--default-color-base);
        border-radius: 50%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        left: 0;
        z-index: 1;
      }
    }

    .point__layoutB__photo {
      display: grid;
      grid-template-columns: 1fr;
      padding: 0 2vw;

      @media (835px <=width) {
        grid-template-columns: none;
        grid-template-rows: 276px auto;
        gap: 30px;
        padding: 0;
      }
    }

    .point__layoutB__photo_right {
      width: 100%;
      position: relative;
      padding-top: calc((228.21 / 317.75) * 100%);

      @media (835px <=width) {
        padding-top: calc((335 / 468) * 100%);
      }
    }

    .point__layoutB__photo_left {
      width: 100%;
      margin-top: auto;
      text-align: right;

      @media (835px <=width) {
        text-align: left;
      }
    }
  }
}

/*★ ＝＝ prepare ＝＝ ★*/

#prepare {
  .prepare__need {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 min((30vw / 8.34), 40px);
    max-width: 730px;
    margin: 0 auto min((50vw / 8.34), 60px);
  }

  .prepare__need--content {
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    gap: calc(20vw / 8.34) 0;
    align-self: start;

    @media(835px <=width) {
      gap: 20px 0;
    }
  }

  .prepare__need--content--text {
    font-size: min((28vw / 8.34), 20px);
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
  }

  .prepare__need--content--photo {
    order: -1;
    width: 100%;
    position: relative;
    padding-top: calc((150 / 150) * 100%);
  }

  .prepare__need--content--image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }

  .prepare__list {
    display: grid;
    row-gap: min((30vw / 8.34), 30px);
    margin-bottom: min((80vw / 8.34), 100px);

    @media (835px <=width) {
      grid-template-columns: repeat(3, 1fr);
      gap: min((26vw / 8.34), 30px);
    }
  }

  .prepare__list.layout_get {
    @media (835px <=width) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .prepare__list--item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: min((20vw / 8.34), 20px) 0;
    border: 2px solid var(--default-color-base);
    border-radius: 15px;
    padding: min((40vw / 8.34), 30px) min((40vw / 8.34), 26px);
    background: var(--default-color-white);
  }

  .prepare__list--title {
    font-size: min((28vw / 8.34), 22px);
    font-weight: 700;
    align-content: center;
    text-align: center;
    padding-bottom: min((20vw / 8.34), 20px);
    border-bottom: 2px dotted var(--default-color-base);
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 11.8px 5px;

    @media (835px <=width) {
      border-bottom: none;
      background-image: radial-gradient(circle, var(--default-color-base) 1.5px, transparent 3px);
    }
  }

  .prepare__list--text {
    font-size: min((26vw / 8.34), 14px);
    font-weight: 500;
  }

  .prepare__list--link {
    display: flex;
    flex-direction: column;
    gap: min((15vw / 8.34), 10px) 0;
    justify-content: flex-end;
  }

  .prepare__bnr {
    display: grid;
    grid-template-rows: auto auto;
    margin: 0 auto;

    @media (1075px <=width) {
      width: min((710vw / 8.34), 960px);
    }
  }

  .prepare__bnr--text {
    font-size: min((26vw / 8.34), 26px);
    font-weight: 700;
    text-align: center;
    position: relative;
    display: block;
    margin-bottom: min((20vw / 8.34), 30px);

    &::before,
    &::after {
      content: "";
      display: inline-block;
      width: min((22vw / 8.34), 21px);
      height: min((38vw / 8.34), 36px);
      background: url("../images/kazari_m.png") no-repeat center center / cover;
      margin: 0em .6em -.2em .6em;

      @media (835px <=width) {
        width: 21px;
        height: 36px;
      }
    }

    &::after {
      transform: scale(-1, 1);
    }
  }

  .prepare__bnr--photo {
    width: 90%;
    position: relative;
    padding-top: calc((300 / 736) * 90%);
    margin: 0 auto;

    @media (835px <=width) {
      width: 100%;
      padding-top: calc((100 / 960) * 100%);
    }

  }

  .base-text-link {
    font-size: min((26vw / 8.34), 16px);
  }
}


/*海外旅行先ランキング / おすすめする海外旅行先*/
#ranking,
#recommend {

  & .section__inner {
    width: 100%;

    @media (835px <=width) {
      width: var(--default-width);
    }
  }

  @media (835px <=width) {
    .base-picture__image {
      border-radius: 8px;
    }
  }

  .ui-static-tab-container {
    position: relative;
  }

  .ui-static-tab {
    @media(835px <=width) {
      padding-bottom: 20px;
      margin-bottom: 50px;

      /*position: absolute;
      top: 0;
      left: -230px;
      padding: 0;
      margin: 0;
      width: 180px;*/
    }
  }

  @media (834px >=width) {
    .ui-static-tab-content {
      margin-top: calc(50vw / 8.34);
    }
  }

  .ui-static-tab-button {
    font-size: min((28vw / 8.34), 20px);
    background-color: #fff;
    border: 2px solid;
    border-radius: 8px;
    font-weight: 700;
    padding: calc(20vw / 8.34) calc(30vw / 8.34);

    @media (835px <=width) {
      font-weight: 900;
      padding: 20px 0 23px;
    }
  }

  .ui-static-tab-button.is-active {
    color: var(--default-color-white);
  }

  .ui-static-tab-button-list {
    display: flex;
    justify-content: center;
    gap: 0 20px;
    width: 100%;
  }

  .travel__content--titles {
    display: grid;
    text-align: center;
    line-height: 1.2;
    margin-bottom: min((36vw / 8.34), 40px);
  }

  .travel__content--title {
    font-size: min((46vw / 8.34), 46px);
    font-weight: 900;
  }

  .travel__content--subtitle {
    font-size: min((28vw / 8.34), 26px);
    font-weight: 700;
    margin: min((60vw / 8.34), 70px) 0 min((40vw / 8.34), 40px);
  }

  .travel__content--text {
    font-size: var(--font-size-detail);
    font-weight: 500;
    line-height: 1.6;
    text-align: left;
    width: var(--default-width);
    margin: 0 auto;
  }

  .travel__content__photos {
    position: relative;
  }

  .travel__content__photos--photo {
    width: 100%;
    position: relative;
    padding-top: calc((400 / 836) * 100%);

    @media (835px <=width) {
      padding-top: calc((400 / 1104) * 100%);
    }
  }

  .travel__content__photos--keywords {
    position: absolute;
    display: grid;
    font-size: min((22vw / 8.34), 13px);
    font-weight: 500;
    right: 0;
    bottom: 0;
    z-index: 1;
    row-gap: min((8vw / 8.34), 8px);
    margin: 0 min((26vw / 8.34), 25px) min((26vw / 8.34), 30px) 0;
  }

  .travel__content__photos--keyword {
    background: var(--default-color-white);
    padding: min((3vw / 8.34), 3px) min((6vw / 8.34), 8px);
    width: fit-content;
  }

  .travel__content__radars {
    display: grid;
    gap: min((20vw / 8.34), 30px) 0;
    margin: min((55vw / 8.34), 60px) auto 0;
    width: var(--default-width);

    @media (835px <=width) {
      grid-template-columns: 461px 1fr;
      gap: 0 77px;
    }

    @media (835px <=width <=1140px) {
      grid-template-columns: 1fr 1fr;
    }

    .travel__content__radar--sum {
      margin: min((73vw / 8.34), 73px) min((87vw / 8.34), 87px);
      position: relative;

      @media (835px <=width) {
        margin: 3em 0em 0em 3em;
      }
    }

    .travel__content__radar--sum--circle {
      display: grid;
      justify-content: center;
      text-align: center;
      width: min((190vw / 8.34), 118px);
      height: min((190vw / 8.34), 118px);
      border-radius: 50%;
      background: #585DAC;
      color: var(--default-color-white);
      font-weight: 700;
      padding: min((25vw / 8.34), 12px) 0;
      position: absolute;
      margin: -2em 0em 0em -3em;

      @media (834px >=width) {
        line-height: 1.3;
        margin: -2em 0em 0em -2em;
      }
    }

    .travel__content__radar--sum--circle--text {
      font-size: min((28vw / 8.34), 16px);

      @media (835px <=width) {
        line-height: 1.4;
      }
    }

    .travel__content__radar--sum--circle--level {
      font-size: min((58vw / 8.34), 40px);
      line-height: 1;
    }

    .travel__content__radar--sum--photo {
      width: 100%;
      position: relative;
      padding-top: calc((421 / 574) * 100%);
      margin-left: 4vw;

      @media (835px <=width) {
        padding-top: calc((289 / 367) * 100%);
        margin-left: 0;
      }
    }

    /* @media (835px <=width) {
      padding-top: calc((363 / 461) * 100%);
    } */
  }

  .travel__content__radar--title {
    font-size: min((26vw / 8.34), 16px);
    font-weight: 700;
  }

  .travel__content__radar--texts {
    font-size: min((26vw / 8.34), 14px);
    font-weight: 500;
    line-height: 1.5;
  }

  .travel__content__radar--lineup {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0 min((40vw / 8.34), 30px);
  }

  .travel__content__radar--item {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2;
    align-items: center;
    font-size: min((20vw / 8.34), 14px);
    border-bottom: 2px dotted var(--default-color-base);
    padding: 1em .5em 1em .2em;

    &:last-child {
      border-bottom: none;
    }

    @media (835px <=width) {
      padding: 15px .5em;
    }
  }


  @media (834px >=width) {
    .travel__plan__list--wrapper {
      overflow-x: scroll;
      padding-bottom: calc(25vw / 8.34);
    }
  }

  .travel__plan__list {
    display: grid;
    gap: min((30vw / 8.34), 40px);
    margin-bottom: 0;
    grid-auto-flow: column;
    grid-template-columns: repeat(4, calc(550vw / 8.34));
    margin-left: calc(30vw / 8.34);

    @media (835px <=width) {
      margin-bottom: 60px;
      grid-auto-flow: unset;
      grid-template-columns: 1fr;
      margin-left: 0;
    }
  }

  .travel__plan__list--items {
    background: linear-gradient(90deg, rgba(152, 216, 242, 1) 16%, rgba(105, 110, 199, 1) 50%, rgba(245, 166, 210, 1) 85%);
    border-radius: calc(24vw / 8.34);
    padding: calc(12vw / 8.34);

    @media (835px <=width) {
      border-radius: 20px;
      padding: 8px;
    }
  }

  .travel__plan__list--item {
    display: grid;
    grid-template-columns: 1fr;
    gap: min((20vw / 8.34), 40px);
    background: #fff;
    border-radius: calc(16vw / 8.34);
    padding: calc(40vw / 8.34) calc(30vw / 8.34) calc(50vw / 8.34);
    align-items: start;
    height: 100%;

    @media (835px <=width) {
      grid-template-columns: 360px 1fr;
      border-radius: 16px;
      padding: min((40vw / 8.34), 50px);
    }
  }

  .travel__plan__list--photo {
    width: 100%;
    position: relative;
    padding-top: calc((168 / 260) * 100%);

    @media (835px <=width) {
      padding-top: calc((250 / 360) * 100%);
    }
  }

  .travel__plan__list--texts {
    display: flex;
    flex-direction: column;
    /*height: -moz-available;
    height: -webkit-fill-available;
    height: fill-available;*/
  }

  .travel__plan__list--title {
    font-size: min((30vw / 8.34), 24px);
    font-weight: 700;
    border-bottom: 2px dotted var(--default-color-base);
    padding-bottom: min((20vw / 8.34), 20px);

    @media (835px <=width) {
      border-bottom: 4px dotted var(--default-color-base);
    }
  }

  .travel__plan__list--text {
    font-size: var(--font-size-detail);
    font-weight: 500;
    padding: min((20vw / 8.34), 20px) 0 min((30vw / 8.34), 30px);
  }

  .travel__plan__list--texts .base-text-link {
    margin-top: auto;
  }

  .travel__hotel {
    margin-top: min((100vw / 8.34), 100px);

    @media (834px >=width) {
      .travel__hotel__list--wrapper {
        overflow-x: scroll;
        padding-bottom: calc(25vw / 8.34);
      }
    }

    .travel__hotel__list {
      display: grid;
      gap: min((20vw / 8.34), 20px);
      background: var(--default-color-white);
      grid-auto-flow: column;
      width: max-content;
      grid-template-columns: repeat(4, calc(550vw / 8.34));
      margin-left: calc(30vw / 8.34);

      @media (835px <=width) {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-flow: unset;
        width: 100%;
        margin-left: 0;
      }
    }

    .travel__hotel__list--inner {
      color: #373737;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .travel__hotel__list--item {
      box-shadow: 4px 6px 7px -4px #828282;
      border-radius: 8px;
    }

    .travel__hotel__list--data {
      height: 100%;
    }

    .travel__hotel__list--photo {
      width: 100%;
      position: relative;
      padding-top: calc((362 / 550) * 100%);

      @media (835px <=width) {
        padding-top: calc((170 / 260) * 100%);
      }
    }

    .travel__hotel__list--image {
      border-radius: 8px 8px 0px 0px;
    }

    .travel__hotel__list--type {
      font-size: var(--font-size-hotel);
      font-weight: 700;
      background: #2B466B;
      color: var(--default-color-white);
      text-align: center;
      padding: 5px 5px 7px;
    }

    .travel__hotel__list--title {
      font-size: min((30vw / 8.34), 16px);
      font-weight: 700;
    }

    .travel__hotel__list--rank {
      margin: min((15vw / 8.34), 5px) 0 min((20vw / 8.34), 12px);
      line-height: 1;
    }

    .travel__hotel__list--rank--image {
      width: min((180vw / 8.34), 95px);
    }

    .travel__hotel__list--texts {
      display: flex;
      flex-direction: column;
      /*height: -moz-available;
      height: -webkit-fill-available;
      height: fill-available;*/
      padding: min((34vw / 8.34), 12px) min((30vw / 8.34), 15px) min((40vw / 8.34), 23px);
    }

    .travel__hotel__list--text {
      font-size: var(--font-size-hotel);
    }

    .travel__hotel__list--prices {
      font-size: min((30vw / 8.34), 16px);
      font-weight: 700;
      color: var(--default-color-red);
      text-align: right;
      margin-top: min((20vw / 8.34), 20px);
    }

    .travel__hotel__list--price {
      font-size: min((38vw / 8.34), 20px);
    }

    .travel__hotel__list--note {
      font-size: var(--font-size-hotel);
      color: var(--default-color-gray);
      text-align: right;
    }
  }
}

#ranking {
  @media (834px >=width) {
    .is-scrollable {
      overflow: hidden;
      margin-right: 0;
      padding-right: 0;
      padding-bottom: 20px;
    }


    .ui-static-tab-button-list {
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      gap: calc(20vw / 8.34);
    }
  }

  .ui-static-tab-button::before {
    content: none;
  }

  .ui-static-tab-button.is-active {
    background: #048FC8;
    border-color: #048FC8;

    &::before {
      content: "";
      transform: translateX(-50%);
      clip-path: polygon(50% 83%, 0 0, 100% 0);
      left: 50%;
      background: #048FC8;
      bottom: -21px;
      width: 25px;
      height: 23px;

      @media(834px >=width) {
        width: calc(31vw / 8.34);
        height: calc(28vw / 8.34);
        bottom: calc(-27vw / 8.34);
      }
    }
  }

  .ui-static-tab-button {
    border: 2px solid;
    color: #048FC8;

    @media (835px <=width) {
      width: 220px;
    }
  }

  .travel__content--title {
    color: #048FC8;
  }

  .ranking__note {
    text-align: center;
    font-size: var(--font-size-hotel);
    margin: min((80vw / 8.34), 100px) auto 0;
    width: var(--default-width);
  }
}

#recommend {
  @media (834px >=width) {
    .is-scrollable {
      margin-right: 0;
      padding-right: 0;
      padding-bottom: 20px;
    }

    .ui-static-tab {
      overflow-x: scroll;
      overflow-y: hidden;
      margin-left: calc(30vw / 8.34);
    }

    .ui-static-tab-button-list {
      display: flex;
      flex-wrap: nowrap;
      justify-content: left;
      gap: calc(20vw / 8.34);
    }
  }

  .ui-static-tab-button::before {
    content: none;
  }

  .ui-static-tab-button.is-active {
    background: #DE3176;

    &::before {
      background: #DE3176;
      content: "";
      transform: translateX(-50%);
      clip-path: polygon(50% 83%, 0 0, 100% 0);
      left: 50%;
      bottom: -21px;
      width: 25px;
      height: 23px;

      @media(834px >=width) {
        width: calc(31vw / 8.34);
        height: calc(28vw / 8.34);
        bottom: calc(-27vw / 8.34);
      }
    }
  }

  .ui-static-tab-button {
    border: 2px solid;
    color: #DE3176;
    white-space: nowrap;
    width: 195px;
  }

  .travel__content--title {
    color: #DE3176;
  }
}


/*よくある質問*/
#faq {
  .faq__lineup {
    display: grid;
    gap: min((40vw / 8.34), 40px);

    .ui-static-accordion-content {
      border-radius: 0 0 min((16vw / 8.34), 20px) min((16vw / 8.34), 20px);
    }

    .ui-static-accordion-content {
      font-size: min((16vw / 8.34), 16px);
      font-weight: 500;
    }

    .ui-static-accordion-trigger {
      background: var(--default-color-base);

      &::before {
        content: "Q.";
        font-size: min((40vw / 8.34), 28px);
        color: var(--default-color-white);
        left: min((24vw / 8.34), 20px);
      }
    }

    .ui-static-accordion-content-inner {
      &::before {
        content: "A.";
        font-family: "Roboto", sans-serif;
        font-size: min((40vw / 8.34), 28px);
        font-weight: 700;
        position: absolute;
        left: min((24vw / 8.34), 20px);
      }
    }

    .ui-static-accordion-trigger,
    .ui-static-accordion-content-inner {
      padding: min((24vw / 8.34), 28px) min((14vw / 8.34), 28px) min((24vw / 8.34), 28px) min((40vw / 3.75), 70px);
      font-size: min((26vw / 8.34), 16px);
    }

    .ui-static-icon-size-small {
      font-size: min((50vw / 8.34), 22px);
    }

    .ui-static-accordion-text {
      font-size: min((26vw / 8.34), 20px);
      font-weight: 500;
      color: var(--default-color-white);
      line-height: 1.5;
      padding-right: 2vw;
    }

    .ui-static-accordion-content-inner {}

    .ui-static-icon-color-gray {
      color: var(--default-color-white);
    }

    .ui-static-accordion-trigger[data-state=open] {
      border-radius: min((16vw / 8.34), 20px) min((16vw / 8.34), 20px) 0 0;
    }

    .ui-static-accordion-trigger[data-state=closed] {
      border-radius: min((16vw / 8.34), 20px);
    }
  }
}

/*------------------------------------------------*/
/*★ ＝＝ feature ＝＝ ★*/
#feature {
  .banner__reco {
    background: #FAFAFF;
  }
}

/*------------------------------------------------*/

/*------------------------------------------------*/
/*★ ＝＝ footerArea ＝＝ ★*/

/*------------------------------------------------*/

/*★ ＝＝ hover ＝＝ ★*/
@media (hover : hover) and (pointer : fine) {

  a,
  .ui-static-tab-button {
    transition: var(--default-hover-transition-opacity);

    &:hover {
      opacity: var(--default-hover-opacity);
    }
  }
}


/*★ ＝＝ nav ＝＝ ★*/
#nav {
  background-color: var(--default-color-blue-purple);
  position: sticky;
  top: 0;
  z-index: 100;

  @media (834px >=width) {
    overflow: scroll;
  }
}

.nav__inner {
  display: flex;
  flex-wrap: nowrap;
  background-color: var(--default-color-blue-purple);

  @media (834px >=width) {
    padding-left: calc(5vw / 8.34);
  }

  @media (835px <=width) {
    max-width: 1104px;
    margin: 0 auto;
    justify-content: center;
  }
}

.nav__item--main,
.nav__item--sub {
  padding: calc(26vw / 8.34) calc(35vw / 8.34) calc(28vw / 8.34);
  display: inline-block;
  position: relative;
  white-space: nowrap;
  line-height: 1;

  &:hover {
    opacity: 1;
  }

  @media (835px <=width) {
    padding: 16px 35px 20px;
  }

  /*&.is-active::before {
    position: absolute;
    content: "";
    clip-path: polygon(50% 83%, 0 0, 100% 0);
    left: 50%;
    transform: translateX(-50%);
    bottom: -20px;
    width: 25px;
    height: 23px;
    display: block;
  }*/
}

.nav__item--main {
  font-size: min((28vw / 8.34), 18px);
  font-weight: 900;

  /*&.is-active::before {
    background-color: var(--default-color-blue-purple);
  }*/
}

.nav__item--sub {
  font-size: min((28vw / 8.34), 15px);
  font-weight: 600;
  background-color: #DCDDFF;
  display: flex;
  align-items: center;

  /*&.is-active::before {
    background-color: #DCDDFF;
  }*/
}

#nav a,
#nav a:visited {
  color: var(--default-color-base);
}

/*出し分け*/
@media (835px <=width) {
  .is-sp {
    display: none;
  }
}