/* ===============================================### 
初期設定
###=============================================== */
.SpringOuter.main__area {
  /* font-family: minion-pro, '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
  font-weight: 500;
  font-style: normal;
  box-sizing: border-box;
  overflow: clip;
  background: #000;
  color: #fff;
  border-bottom: 1px solid #fff; */
  font-family: var(--yugothic);
  --font-en: "adobe-handwriting-ernie", sans-serif;
  font-weight: var(--font-weight-medium);
  font-style: normal;
  box-sizing: border-box;
  overflow: clip;
  color: #050302;
  --color-black01: #050302;
  --color-black02: #000000;
  --color-white: #FFFFFF;
}

.SpringOuter.main__area img {
  width: 100%;
  height: auto;
}

/* ===========### PC用設定 ###=========== */
@media screen and (min-width: 768px) {
  .breadcrumb__list {
    padding-bottom: 1.6rem;
  }

  .SpringOuter.main__area .pc_only {
    display: block;
  }

  .SpringOuter.main__area .sp_only {
    display: none;
  }
}

/* ===========### SP用設定 ###=========== */
@media screen and (max-width: 767px) {
  .SpringOuter.main__area .pc_only {
    display: none;
  }

  .SpringOuter.main__area .sp_only {
    display: block;
  }
}



/* ===============================================### 
アニメーション設定
###=============================================== */
.SpringOuter .js-fade-in{
  opacity: 0;
  will-change: opacity, transform;
  transition: ease-in, opacity 2500ms, transform 1000ms;
  transform: translate3d(0, 0, 0) scale(1);
}

.SpringOuter .js-fade-in.show{
  opacity: 1;
}


/* ===============================================### 
コンテンツ共通設定
###=============================================== */
.SpringOuter .grid-wrapper{
  display: grid;
}

.SpringOuter .content-sticky{
  position: sticky;
  top: 10rem;
}

.SpringOuter .content__area{
  position: relative;
  z-index: 3;
  transform: translateZ(1px);
  background: var(--color-white);
}

/************** text **************/
.SpringOuter .credit{
  width: fit-content;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
}

.SpringOuter .credit a {
  display: flex;
  flex-direction: row;
  gap: 0 1.6rem;
  align-items: center;
  flex-wrap: wrap;
}

.SpringOuter .buy{
  font-size: 1.2rem;
  text-decoration: underline;
}

.SpringOuter .content__text{
  font-size: 1.4rem;
  line-height: 2.2;
  letter-spacing: 0.075em;
  text-align: center;
}

/************** image **************/
.SpringOuter .item__name{
  position: absolute;
  pointer-events: none;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .SpringOuter .grid-wrapper{
    display: block;
  }

  .SpringOuter .content-sticky{
    top: calc(100 * (100vw / 375));
  }

  /************** text **************/
  .SpringOuter .credit{
    font-size: calc(12 * (100vw / 375));
  }

  .SpringOuter .credit a {
    gap: 0 calc(14 * (100vw / 375));
  }

  .SpringOuter .buy{
    font-size: calc(12 * (100vw / 375));
  }

  .SpringOuter .content__text{
    font-size: calc(12 * (100vw / 375));
    line-height: 2;
  }
}



/* ===============================================### 
リード文
###=============================================== */
.SpringOuter .content__lead{
  padding-top: 7.1rem;
  text-align: center;
}

.SpringOuter .title-wrapper{
  width: fit-content;
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2.3rem;
}

.SpringOuter .title__text.text01{
  position: relative;
  top: -0.2rem;
  font-family: var(--hkgrotesk);
  font-size: 2.8rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
}

.SpringOuter .title__text.text02{
  position: relative;
  left: -1rem;
  font-family: var(--font-en);
  font-weight: var(--font-weight-regular);
  font-style: normal;
  font-size: 6rem;
}

.SpringOuter .detail__text{
  margin-top: 3.3rem;
  font-size: 1.4rem;
  line-height: 2.2;
  letter-spacing: 0.075em;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .SpringOuter .content__lead{
    padding-top: calc(42 * (100vw / 375));
  }

  .SpringOuter .title-wrapper{
    gap: calc(18 * (100vw / 375));
  }

  .SpringOuter .title__text.text01{
    top: calc(-2 * (100vw / 375));
    font-size: calc(24 * (100vw / 375));
  }

  .SpringOuter .title__text.text02{
    top: calc(2 * (100vw / 375));
    left: calc(-8 * (100vw / 375));
    font-size: calc(45 * (100vw / 375));
  }

  .SpringOuter .detail__text{
    margin-top: calc(29 * (100vw / 375));
    font-size: calc(13 * (100vw / 375));
    line-height: 2;
  }
}



/* ===============================================### 
コンテンツ01
###=============================================== */
.SpringOuter .content01{

}

.SpringOuter .content01 .content-inner{
  
}

.SpringOuter .content01 .content__item01{
  position: relative;
  width: fit-content;
  margin-top: 7.1rem;
  margin-inline: auto;
}

.SpringOuter .content01 .content__item02{
  width: 100rem;
  margin-top: 7.1rem;
  margin-inline: auto;
}

/************** grid **************/
.SpringOuter .content01 .grid-wrapper{
  grid-template-columns: 45rem 10rem 45rem;
  grid-template-rows: 45rem 13rem 32rem 13rem 32rem 13rem 47.9rem;
}

.SpringOuter .content01 .grid__item01{
  grid-column: 1/2;
  grid-row: 1/3;
}

.SpringOuter .content01 .grid__item02{
  grid-column: 3/4;
  grid-row: 2/5;
}

.SpringOuter .content01 .grid__item03{
  grid-column: 1/2;
  grid-row: 4/7;
}

.SpringOuter .content01 .grid__item04{
  grid-column: 3/4;
  grid-row: 6/8;
}

/************** text **************/
.SpringOuter .content01 .content__item01 .credit{
  margin-top: 2.1rem;
  margin-inline: auto;
  text-align: center;
}

.SpringOuter .content01 .content__item02 .credit{
  margin-top: 1.6rem;
  text-align: left;
}

.SpringOuter .content01 .content__text{
  margin-top: 3.1rem;
}

/************** image **************/
.SpringOuter .content01 .content__item01 .content__image{
  width: 60rem;
}

.SpringOuter .content01 .content__item02 .content__image{
  width: 45rem;
}

.SpringOuter .content01 .item__name{
  bottom: 22.5rem;
  right: -7.7rem;
  width: 35.4rem;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .SpringOuter .content01 .content__item01{
    margin-top: calc(53 * (100vw / 375));
  }

  .SpringOuter .content01 .content__item02{
    width: calc(355 * (100vw / 375));
    margin-top: calc(54 * (100vw / 375));
  }

  /************** grid **************/
  .SpringOuter .content01 .grid__item01{
  }

  .SpringOuter .content01 .grid__item02{
    margin-top: calc(41 * (100vw / 375));
  }

  .SpringOuter .content01 .grid__item03{
    margin-top: calc(40 * (100vw / 375));
  }

  .SpringOuter .content01 .grid__item04{
    margin-top: calc(40 * (100vw / 375));
  }

  /************** text **************/
  .SpringOuter .content01 .content__item01 .credit{
    margin-top: calc(71 * (100vw / 375));
  }

  .SpringOuter .content01 .content__item02 .credit{
    margin-top: calc(17 * (100vw / 375));
  }

  .SpringOuter .content01 .content__text{
    margin-top: calc(23 * (100vw / 375));
  }

  /************** image **************/
  .SpringOuter .content01 .content__item01 .content__image{
    width: calc(355 * (100vw / 375));
    margin-inline: auto;
  }

  .SpringOuter .content01 .content__item02 .content__image{
    width: calc(355 * (100vw / 375));
    margin-inline: auto;
  }

  .SpringOuter .content01 .item__name{
    bottom: calc(140 * (100vw / 375));
    right: calc(10 * (100vw / 375));
    width: calc(200 * (100vw / 375));
  }
}



/* ===============================================### 
コンテンツ02
###=============================================== */
.SpringOuter .content02{
  margin-top: 15rem;
}

.SpringOuter .content02 .content-inner{
}

.SpringOuter .content02 .content__item01{
  position: relative;
  width: fit-content;
  margin-inline: auto;
}

.SpringOuter .content02 .content__item02{
  width: 100rem;
  margin-top: 7.1rem;
  margin-inline: auto;
}

/************** grid **************/
.SpringOuter .content02 .grid-wrapper{
  grid-template-columns: 45rem 10rem 45rem;
  grid-template-rows: 60rem 10rem 61.4rem;
}

.SpringOuter .content02 .grid__item01{
  grid-column: 1/4;
  grid-row: 1/2;
}

.SpringOuter .content02 .grid__item02{
  grid-column: 1/2;
  grid-row: 3/4;
}

.SpringOuter .content02 .grid__item03{
  grid-column: 3/4;
  grid-row: 3/4;
}

/************** text **************/
.SpringOuter .content02 .content__item01 .credit{
  margin-top: 2.1rem;
  margin-inline: auto;
  text-align: center;
}

.SpringOuter .content02 .content__item02 .credit{
  margin-top: 2.1rem;
  text-align: left;
}

.SpringOuter .content02 .content__text{
  margin-top: 3.1rem;
}

/************** image **************/
.SpringOuter .content02 .content__item01 .content__image{
  width: 60rem;
}

.SpringOuter .content02 .content__item02 .grid__item01 .content__image{
  width: 100rem;
}

.SpringOuter .content02 .content__item02 .content__image{
  width: 45rem;
}

.SpringOuter .content02 .item__name{
  top: 7.7rem;
  right: -19.5rem;
  width: 36.2rem;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .SpringOuter .content02{
    margin-top: calc(79 * (100vw / 375));
  }

  .SpringOuter .content02 .content__item02{
    width: calc(375 * (100vw / 375));
    margin-top: calc(54 * (100vw / 375));
  }

  /************** grid **************/
  .SpringOuter .content02 .grid__item01{
  }

  .SpringOuter .content02 .grid__item02{
    margin-top: calc(40 * (100vw / 375));
  }

  .SpringOuter .content02 .grid__item03{
    margin-top: calc(40 * (100vw / 375));
  }

  /************** text **************/
  .SpringOuter .content02 .content__item01 .credit{
    margin-top: calc(71 * (100vw / 375));
  }

  .SpringOuter .content02 .content__item02 .credit{
    margin-top: calc(14 * (100vw / 375));
    margin-left: calc(10 * (100vw / 375));
  }

  .SpringOuter .content02 .content__text{
    margin-top: calc(24 * (100vw / 375));
  }

  /************** image **************/
  .SpringOuter .content02 .content__item01 .content__image{
    width: calc(355 * (100vw / 375));
  }

  .SpringOuter .content02 .content__item02 .grid__item01 .content__image{
    width: calc(375 * (100vw / 375));
  }

  .SpringOuter .content02 .content__item02 .content__image{
    width: calc(355 * (100vw / 375));
    margin-inline: auto;
  }

  .SpringOuter .content02 .item__name{
    top: initial;
    bottom: calc(136 * (100vw / 375));
    right: initial;
    left: calc(13 * (100vw / 375));
    width: calc(209 * (100vw / 375));
  }
}



/* ===============================================### 
コンテンツ03
###=============================================== */
.SpringOuter .content03{
  margin-top: 15rem;
}

.SpringOuter .content03 .content-inner{
  
}

.SpringOuter .content03 .content__item01{
  position: relative;
  width: fit-content;
  margin-inline: auto;
}

.SpringOuter .content03 .content__item02{
  width: 100rem;
  margin-top: 7.1rem;
  margin-inline: auto;
}

/************** grid **************/
.SpringOuter .content03 .grid-wrapper{
  grid-template-columns: 27.5rem 17.5rem 10rem 17.5rem 27.5rem;
  grid-template-rows: 61.4rem 10rem 58rem;
}

.SpringOuter .content03 .grid__item01{
  grid-column: 1/3;
  grid-row: 1/2;
}

.SpringOuter .content03 .grid__item02{
  grid-column: 4/6;
  grid-row: 1/2;
}

.SpringOuter .content03 .grid__item03{
  grid-column: 2/5;
  grid-row: 3/4;
}

/************** text **************/
.SpringOuter .content03 .content__item01 .credit{
  margin-top: 2.1rem;
  margin-inline: auto;
  text-align: center;
}

.SpringOuter .content03 .content__item02 .credit{
  margin-top: 2.1rem;
  text-align: left;
}

.SpringOuter .content03 .content__text{
  margin-top: 3.1rem;
}

/************** image **************/
.SpringOuter .content03 .content__item01 .content__image{
  width: 60rem;
}

.SpringOuter .content03 .content__item02 .content__image{
  width: 45rem;
}

.SpringOuter .content03 .item__name{
  bottom: 26.4rem;
  left: -13.7rem;
  width: 39.5rem;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .SpringOuter .content03{
    margin-top: calc(80 * (100vw / 375));
  }

  .SpringOuter .content03 .content__item02{
    width: calc(355 * (100vw / 375));
    margin-top: calc(54 * (100vw / 375));
  }

  /************** grid **************/
  .SpringOuter .content03 .grid__item01{
  }

  .SpringOuter .content03 .grid__item02{
    margin-top: calc(40 * (100vw / 375));
  }

  .SpringOuter .content03 .grid__item03{
    margin-top: calc(40 * (100vw / 375));
  }

  /************** text **************/
  .SpringOuter .content03 .content__item01 .credit{
    margin-top: calc(72 * (100vw / 375));
  }

  .SpringOuter .content03 .content__item02 .credit{
    margin-top: calc(16 * (100vw / 375));
  }

  .SpringOuter .content03 .content__text{
    margin-top: calc(23 * (100vw / 375));
  }

  /************** image **************/
  .SpringOuter .content03 .content__item01 .content__image{
    width: calc(355 * (100vw / 375));
    margin-inline: auto;
  }

  .SpringOuter .content03 .content__item02 .content__image{
    width: calc(355 * (100vw / 375));
  }

  .SpringOuter .content03 .item__name{
    bottom: calc(193 * (100vw / 375));
    left: calc(3 * (100vw / 375));
    width: calc(231 * (100vw / 375));
  }
}



/* ===============================================### 
リンクエリア
###=============================================== */
.SpringOuter .link__area{
  margin-top: 8rem;
  padding-bottom: 8.4rem;
}

/************** btn **************/
.SpringOuter .black_btn{
  width: 30rem;
  height: 5rem;
  margin-inline: auto;
  background-color: var(--color-black02);
  color: var(--color-white);
  font-family: var(--yugothic);
  font-size: 1.4rem;
  font-weight: var(--font-weight-medium);
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.075em;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 767px) {
  .SpringOuter .link__area{
    margin-top: calc(80 * (100vw / 375));
    padding-bottom: calc(96 * (100vw / 375));
  }

  /************** btn **************/
  .SpringOuter .black_btn{
    width: calc(266 * (100vw / 375));
    height: calc(50 * (100vw / 375));
    font-size: calc(14 * (100vw / 375));
    letter-spacing: 0.05em;
  }
}