/* @media only screen and (min-width: 768px) and (max-width: 1400px) {
  html,
  body {
    font-size: 0.7142857143vw;
  }
} */

/* ▼ -----------可変設定---------- ▼ */
#st250827outfit {
  --font-helvetica: "helvetica-lt-pro", sans-serif;
  font-feature-settings: "palt";
  font-weight: 400;
  font-style: normal;

  --pc-width: 1400;/*PCデザイン幅*/
  --sp-width: 750;/*SPデザイン幅*/
  --pc-artboard-width: 450;/*SP共通デザイン幅*/
  --sp-artboard-width: 750;/*PC共通デザイン幅*/
}

/* PC画面幅 1400px以上 固定 */
@media (min-width: 1400px) {
  #st250827outfit {
  --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
  --variable: 1px; /* 固定値（可変しない） */
  }
}

 /* PC画面幅 768～1400px 可変 */
@media (min-width: 768px) and (max-width: 1400px) {
  #st250827outfit {
  --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
  --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
}

 /* SP画面幅 767px以下 可変 */
@media (max-width: 767px) {
  #st250827outfit {
  --ratio: 1; /* 比率は1（変わらない） */
  --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
}
/* ▲ -----------可変設定---------- ▲ */

/* ▼ ----------- 共通設定 pc ---------- ▼ */

* {
  font-feature-settings: "palt"; 
}

* > #st250827outfit {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow: clip; */
}

.main-area {
  padding-top: 0;
}

@media screen and (min-width: 768px) {
  .main-area {
    padding-top: 2.5rem;
  }

  #st250827outfit a:hover{
    transition: .3s;
    opacity: .7;
  }
}

@media screen and (max-width: 767px) {
  .main-area {
    padding-top: calc(170*(100vw / 750));
  }

  .main-area .main-inner{
    padding-left: 0;
    padding-right: 0;
  }

  .footer{
    padding-top: 0;
  }
}
/* ▲ ----------- 共通設定 pc ---------- ▲ */

/*
///////////////////////////////////////////////////////////////////////////////////////
 st250827outfit
 ///////////////////////////////////////////////////////////////////////////////////////
*/

.st250827outfit img, .st250827outfit svg {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.st250827outfit h2,
.st250827outfit a{
  white-space: nowrap;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #000;
}

.mv__wrapper{
  width: 100%;
  margin: calc(65 * var(--variable) * var(--ratio)) auto calc(173 * var(--variable)* var(--ratio));
}

.contents__wrapper{
  width: calc(660 * var(--variable)* var(--ratio));
  margin: 0 auto;
}

.item__wrapper{
  margin-bottom: calc(90 * var(--variable)* var(--ratio));
}

.item__wrapper:nth-of-type(3){
  margin-bottom: calc(150* var(--variable)* var(--ratio));
}

.item_ttl{
  font-size: calc(72 * var(--variable) * var(--ratio));
  font-family: var(--font-helvetica);
  margin-bottom: calc(32 * var(--variable)* var(--ratio));
}

.crdt__wrapper{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: baseline;
  row-gap: calc(13 * var(--variable)* var(--ratio));
  margin-top: calc(30 * var(--variable)* var(--ratio));
}

.crdt{
  font-size: calc(20 * var(--variable) * var(--ratio));
  font-family: var(--font-helvetica);
  pointer-events: all;
}

.st250827outfit a {
  word-spacing: calc(7 * var(--variable) * var(--ratio));
}

.allBtn{
  display: block;
  width: calc(480 * var(--variable)* var(--ratio));
  margin: calc(140 * var(--variable)* var(--ratio)) auto;
}

@media screen and (min-width: 768px) {
  .st250827outfit{
    width: calc(450 * (100vw /1400));
    max-width: 480px;
    margin: 0 auto;
  }

  .is-sp {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .is-pc {
    display: none;
  }

  .is-sp {
    display: block;
  }

  html {
    font-size: 1.3333333333vw;
  }
}

/*============ ▼ sec01 ▼ ============*/

/*============ ▲ sec01 ▲ ============*/



/*
///////////////////////////////////////////////////////////////////////////////////////
 animation
 ///////////////////////////////////////////////////////////////////////////////////////
*/

.js-fade {
  visibility: hidden;
  opacity: 0;
  filter: blur(40px);
  transition: opacity 0.8s cubic-bezier(0.35, 0.97, 0.59, 0.99), filter 0.8s cubic-bezier(0.35, 0.97, 0.59, 0.99);
  pointer-events: none;
}

.js-fade.is-active {
  visibility: visible;
  opacity: 1;
  filter: blur(0);
  pointer-events: inherit;
}