@charset "UTF-8";
:root {
  --font-jp: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
  --font-primary: 'Be Vietnam Pro', sans-serif;
  --color-basis: #000;
}

.js-fade-trigger {
  -webkit-transition-duration: .8s;
          transition-duration: .8s;
  opacity: 0;
  -webkit-transform: translateY(3rem);
          transform: translateY(3rem);
}

.js-fade-trigger.is-visible {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

html {
  font-size: 62.5%;
}

@media screen and (min-width: 768px) and (max-width: 1400px) {
  html {
    font-size: calc(10* (100vw / 1400));
  }
}

@media screen and (max-width: 767px) {
  html {
    font-size: calc(10* (100vw / 750));
  }
}

body {
  width: 100%;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.main-area .main-inner {
  max-width: initial;
  width: initial;
}

.main-container__landing-page img,
.main-container__landing-page video,
.main-container__landing-page svg {
  width: 100%;
  height: auto;
}

.main-container__landing-page * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.main-container__landing-page a,
.main-container__landing-page picture {
  display: block;
}

@media screen and (min-width: 768px) {
  .main-container__landing-page .hidden-desktop {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .main-container__landing-page .hidden-mobile {
    display: none;
  }
}

/*//////////////////////////////////////////////////

Title : _main.css
For   : 骨格タイプでアイテムを選ばない！ 着たい服を“着こなす”「骨格タイプ別コーデ術」 SUMMER’S OUTFIT  vol.1 診断結果

Created       : 2022-04-25
Last Modified : 2022-04-25

==========================================

Content

    main

//////////////////////////////////////////////////*/
/* ==============================================================================================
                                            common
============================================================================================== */
.main-container__landing-page {
  color: var(--color-base);
  font-family: var(--font-jp);
  -webkit-font-feature-settings: initial;
          font-feature-settings: initial;
  text-align: center;
  letter-spacing: .08em;
}

.main-container__landing-page .title {
  display: inline-block;
  padding-left: var(--padding, 8rem);
  padding-right: var(--padding, 8rem);
  position: relative;
  font-size: var(--fz, 5rem);
  font-weight: 500;
}

.main-container__landing-page .title::before {
  display: block;
  width: var(--width, 5rem);
  height: var(--height, 5.3rem);
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  content: "";
  background-image: url(../img/svg/decolation_left.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}

.main-container__landing-page .title::after {
  display: block;
  width: var(--width, 5rem);
  height: var(--height, 5.3rem);
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  background-image: url(../img/svg/decolation_right.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}

.main-container__landing-page .list__text {
  font-size: var(--fz, 2.8rem);
  font-weight: 500;
}

.main-container__landing-page .list__text span {
  position: relative;
}

.main-container__landing-page .list__text span::before {
  display: block;
  width: var(--width, 1.6rem);
  height: var(--height, 1.6rem);
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  content: "";
  background-color: var(--color-basis);
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                        for desktop
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (min-width: 768px) {
  .main-container__landing-page {
    margin: 75px auto 200px;
  }
  .main-container__landing-page .title {
    --padding: 55px;
    --fz: 30px;
    letter-spacing: 0.069em;
  }
  .main-container__landing-page .title::before {
    --width: 33px;
    --height: 33px;
  }
  .main-container__landing-page .title::after {
    --width: 33px;
    --height: 33px;
  }
  .main-container__landing-page .list__text {
    --fz: 16px;
  }
  .main-container__landing-page .list__text span::before {
    --width: 8px;
    --height: 8px;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                      for mobile phone
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 767px) {
  .main-container__landing-page {
    margin: 10rem auto 20rem;
  }
  .main-container__landing-page .title {
    letter-spacing: 0.12em;
  }
}

/*//////////////////////////////////////////////////

Title : _text.scss
For   : 骨格タイプでアイテムを選ばない！ 着たい服を“着こなす”「骨格タイプ別コーデ術」 SUMMER’S OUTFIT  vol.1 診断結果

Created       : 2022-04-25
Last Modified : 2022-04-25

//////////////////////////////////////////////////*/
/*===================== title */
.main-container__landing-page .c-button {
  margin-top: var(--margin, 20rem);
}

.main-container__landing-page .c-button__list {
  margin: auto;
  width: var(--btn-w, 65rem);
  height: var(--btn-h, 15rem);
  position: relative;
  font-size: var(--fz, 2.6rem);
  border: 1px solid var(--color-basis);
  font-weight: 500;
}

.main-container__landing-page .c-button__list::before {
  display: block;
  content: "";
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
  width: var(--frame-w, 63rem);
  height: var(--frame-h, 13rem);
  border: 1px solid var(--color-basis);
  pointer-events: none;
}

.main-container__landing-page .c-button__list a {
  width: 100%;
  height: 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;
  padding-right: var(--padding, 4rem);
}

.main-container__landing-page .c-button__list a::after {
  display: block;
  content: "";
  margin: auto 0;
  position: relative;
  top: 0;
  bottom: 0;
  right: var(--right, -3rem);
  width: var(--width, 2.7rem);
  height: var(--height, 2rem);
  background-image: url(../img/svg/arrow_double.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}

.main-container__landing-page .c-button__back {
  margin-top: var(--margin, 6.2rem);
  font-size: var(--fz, 2.6rem);
  font-weight: 500;
}

.main-container__landing-page .c-button__back span {
  display: inline-block;
  padding-right: var(--padding, 3.8rem);
  position: relative;
}

.main-container__landing-page .c-button__back span::before {
  display: block;
  content: "";
  margin: auto 0;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--width, 1.1rem);
  height: var(--height, 2rem);
  background-image: url(../img/svg/arrow.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
																				for desktop
//////////////////////////////////////////////////////////////////////////////////////////////
*/
@media screen and (min-width: 768px) {
  .main-container__landing-page .c-button {
    --margin: 155px;
  }
  .main-container__landing-page .c-button__list {
    --btn-w: 480px;
    --btn-h: 90px;
    --fz: 18px;
  }
  .main-container__landing-page .c-button__list::before {
    top: 5px;
    --frame-w: 465px;
    --frame-h: 75px;
  }
  .main-container__landing-page .c-button__list a {
    --padding: 25px;
    letter-spacing: -0.03em;
  }
  .main-container__landing-page .c-button__list a::after {
    --width: 17px;
    --height: 12px;
    --right: -25px;
  }
  .main-container__landing-page .c-button__back {
    --margin: 40px;
    --fz: 18px;
  }
  .main-container__landing-page .c-button__back span {
    --padding: 26px;
  }
  .main-container__landing-page .c-button__back span::before {
    --width: 7px;
    --height: 11px;
  }
}

@media all and (-ms-high-contrast: none) {
  .main-container__landing-page .c-button__list::before {
    width: 97% !important;
    height: 83% !important;
  }
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
																				for mobile
//////////////////////////////////////////////////////////////////////////////////////////////
*/
@media screen and (max-width: 767px) {
  .main-container__landing-page .c-button__list::before {
    top: .8rem;
  }
}

/*//////////////////////////////////////////////////

Title : _diagnosis.scss
For   : 骨格タイプでアイテムを選ばない！ 着たい服を“着こなす”「骨格タイプ別コーデ術」 SUMMER’S OUTFIT  vol.1 診断結果

Created       : 2022-04-25
Last Modified : 2022-04-25

//////////////////////////////////////////////////*/
.main-container__landing-page .c-diagnosis__lead {
  margin-top: var(--margin, 6rem);
  font-size: var(--fz, 3.6rem);
  font-weight: 500;
}

.main-container__landing-page .c-diagnosis__unit--01 {
  width: var(--width, 56rem);
  padding: var(--padding, 2rem);
  border: 1px solid var(--color-basis);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.main-container__landing-page .c-diagnosis__inner {
  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: 0 auto;
  margin-top: var(--margin, 6.8rem);
}

.main-container__landing-page .c-diagnosis .type__en {
  font-size: var(--fz, 5.4rem);
  font-family: var(--font-primary);
}

.main-container__landing-page .c-diagnosis .type__ja {
  font-size: var(--fz, 2.4rem);
  letter-spacing: -0.03em;
  font-weight: 500;
}

.main-container__landing-page .c-diagnosis .desc {
  margin-top: var(--margin, 7rem);
  font-size: var(--fz, 2.4rem);
  text-align: justify;
  font-weight: 500;
}

.main-container__landing-page .c-diagnosis .person {
  margin-top: var(--margin, 5.75rem);
}

.main-container__landing-page .c-diagnosis .person__title {
  font-size: var(--fz, 2.8rem);
  font-weight: 500;
}

.main-container__landing-page .c-diagnosis .person__name {
  margin-top: var(--margin, 3rem);
  font-weight: 500;
}

.main-container__landing-page .c-diagnosis .person__name span {
  padding-left: var(--padding, 3.5rem);
  display: inline-block;
  font-weight: 500;
}

.main-container__landing-page .c-diagnosis .person__name span:nth-child(n + 2) {
  margin-left: var(--margin, 3rem);
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
																				for desktop
//////////////////////////////////////////////////////////////////////////////////////////////
*/
@media screen and (min-width: 768px) {
  .main-container__landing-page .c-diagnosis__lead {
    --margin: 65.5px;
    --fz: 22px;
  }
  .main-container__landing-page .c-diagnosis__unit--01 {
    --width: 320px;
    --padding: 8px;
  }
  .main-container__landing-page .c-diagnosis__unit--02 {
    margin-left: 100px;
  }
  .main-container__landing-page .c-diagnosis__inner {
    max-width: 780px;
    --margin: 30px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: left;
  }
  .main-container__landing-page .c-diagnosis .type {
    padding-bottom: 20px;
    border-bottom: solid var(--color-basis) 1px;
  }
  .main-container__landing-page .c-diagnosis .type span {
    display: inline-block;
  }
  .main-container__landing-page .c-diagnosis .type__en {
    --fz: 30px;
  }
  .main-container__landing-page .c-diagnosis .type__ja {
    padding-left: 10px;
    --fz: 14px;
  }
  .main-container__landing-page .c-diagnosis .person {
    --margin: 37px;
  }
  .main-container__landing-page .c-diagnosis .person__title {
    --fz: 16px;
  }
  .main-container__landing-page .c-diagnosis .person__name {
    --margin: 20px;
  }
  .main-container__landing-page .c-diagnosis .person__name span {
    --padding: 20px;
  }
  .main-container__landing-page .c-diagnosis .person__name span:nth-child(n + 2) {
    --margin: 15px;
  }
  .main-container__landing-page .c-diagnosis .desc {
    --margin: 30px;
    --fz: 14px;
    -webkit-font-feature-settings: 'halt';
            font-feature-settings: 'halt';
    line-height: 2.1428571429;
    letter-spacing: -0.01em;
  }
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
																				for mobile
//////////////////////////////////////////////////////////////////////////////////////////////
*/
@media screen and (max-width: 767px) {
  .main-container__landing-page .c-diagnosis__inner {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .main-container__landing-page .c-diagnosis__unit--01 {
    margin-top: 2rem;
  }
  .main-container__landing-page .c-diagnosis__unit--02 {
    padding-left: 6.5rem;
    padding-right: 6.5rem;
  }
  .main-container__landing-page .c-diagnosis .type span {
    display: block;
  }
  .main-container__landing-page .c-diagnosis .desc {
    line-height: 1.75;
    letter-spacing: 0.03em;
  }
}

/*//////////////////////////////////////////////////

Title : _diagnosis.scss
For   : 骨格タイプでアイテムを選ばない！ 着たい服を“着こなす”「骨格タイプ別コーデ術」 SUMMER’S OUTFIT  vol.1 診断結果

Created       : 2022-04-25
Last Modified : 2022-04-25

//////////////////////////////////////////////////*/
.main-container__landing-page .c-match {
  margin-top: var(--margin, 18.5rem);
}

.main-container__landing-page .c-match__title {
  font-weight: 500;
}

.main-container__landing-page .c-match__list {
  margin-top: var(--margin, 5.5rem);
}

.main-container__landing-page .c-match__list span {
  display: inline-block;
  padding-left: var(--padding, 4.5rem);
  text-align: center;
}

.main-container__landing-page .c-match__list span:nth-child(n + 2) {
  margin-top: var(--margin, 3rem);
}

.main-container__landing-page .c-match__text {
  display: inline-block;
  text-align: left;
  font-weight: 500;
}

.main-container__landing-page .c-match__text span {
  text-align: left;
  font-weight: 500;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
																				for desktop
//////////////////////////////////////////////////////////////////////////////////////////////
*/
@media screen and (min-width: 768px) {
  .main-container__landing-page .c-match {
    --margin: 150px;
  }
  .main-container__landing-page .c-match__title {
    --margin: 35px;
  }
  .main-container__landing-page .c-match__list {
    --margin: 60px;
  }
  .main-container__landing-page .c-match__text {
    padding-left: 15px;
    letter-spacing: 0.03em;
  }
  .main-container__landing-page .c-match__text span {
    --padding: 30px;
  }
  .main-container__landing-page .c-match__text span::before {
    top: 3px;
    bottom: initial;
  }
  .main-container__landing-page .c-match__text span:nth-child(n + 2) {
    --margin: 25px;
  }
}

/*v
//////////////////////////////////////////////////////////////////////////////////////////////
																				for mobile
//////////////////////////////////////////////////////////////////////////////////////////////
*/
@media screen and (max-width: 767px) {
  .main-container__landing-page .c-match__title {
    --fz: 4.4rem;
    --padding: 6.8rem;
    letter-spacing: 0.08em;
  }
  .main-container__landing-page .c-match__text {
    padding-left: 6.25rem;
    padding-right: 6.25rem;
    line-height: 1.7142857143;
    white-space: nowrap;
  }
  .main-container__landing-page .c-match__text span::before {
    top: 1.3rem;
    bottom: initial;
  }
  .main-container__landing-page .c-match__text.__natural {
    padding-left: 4.25rem;
    padding-right: 2.25rem;
  }
}



/* ▼　5/27　追加分　▼ */
/* //////////////////////////////////////////////////////////////////////////////////////////////
                                      for mobile phone
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 767px) {
  .c-back {
    margin-top: calc(94 * (100vw / 750));
  }
  .c-back__desc {
    font-size: calc(26 * (100vw / 750));
    letter-spacing: 0.08rem;
    font-weight: 500;
  }
  .c-back-btn--wraper {
    margin-top: calc(29 * (100vw / 750));
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .c-back-btn {
    width: calc(307 * (100vw / 750));
    display: inline-block;
  }
  .c-back-btn--02 {
    margin-left: calc(20 * (100vw / 750));
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                        for desktop
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (min-width: 768px) {
  .c-back {
    margin-top: 7.8rem;
  }
  .c-back__desc {
    font-size: 1.8rem;
    font-weight: 500;
  }
  .c-back-btn--wraper {
    margin-top: 2.9rem;
  }
  .c-back-btn {
    width: 20rem;
    display: inline-block;
  }
  .c-back-btn--02 {
    margin-left: 0.7rem;
  }
}

/*# sourceMappingURL=style.css.map */