@charset 'UTF-8';

html {
  font-size: calc(10 * (100vw / 2100));
}

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

/*-------------------------
 common
-------------------------*/
.l-container {
  width: 100%;
  margin: auto;
}
.pc-header-main.is-fixed {
  position: unset;
}
#feature {
  overflow: clip;
  width: 100%;
  margin: 0 auto;
  font-family: 'apparat-light', sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #000000;
  font-feature-settings: 'palt';
}
.feature img {
  display: block;
  width: 100%;
  height: auto;
}
.feature a {
  text-decoration: none;
  transition: all .3s ease-in-out;
}
.feature a:link,
.feature a:visited {
  color: #000000;
}
.feature a:hover {
  opacity: .7;
}
.feature figure:has(a:hover) {
  background: #ffffff;
}

/*-------------------------
 fade
-------------------------*/
.fadeIn {
  opacity: 0;
  transition-duration: 2s;
  transform: translate(0, 0);
}
.fadeIn.is_show {
  opacity: 1;
}

#feature .fade-top {
  opacity: 0;
  transition-duration: 2s;
  transform: translateY(-50px);
}
#feature .fade-top.is_show {
  opacity: 1;
  transform: translateY(0);
}

#feature .fade-bottom {
  opacity: 0;
  transition-duration: 2s;
  transform: translateY(50px);
}
#feature .fade-bottom.is_show {
  opacity: 1;
  transform: translateY(0);
}

#feature .fade-right {
  opacity: 0;
  transition-duration: 2s;
  transform: translateX(50px);
}
#feature .fade-right.is_show {
  opacity: 1;
  transform: translateX(0);
}

#feature .fade-left {
  opacity: 0;
  transition-duration: 2s;
  transform: translate(-50px, 0);
}
#feature .fade-left.is_show {
  opacity: 1;
  transform: translate(0, 0);
}

#feature .fade-delay {
  overflow: hidden;
  opacity: 0;
  transition: 1.5s;
  transition-duration: 2s;
  transform: translate(-50px, 0);
}
#feature .fade-delay.is_show {
  opacity: 1;
  transition-delay: .4s;
  transform: translate(0, 0);
}

/*--------------------------------
  fadeIn blur <hero>
--------------------------------*/
#feature .js-fadeIn{
  opacity: 0;
}
#feature .js-fadeIn.js-scrollIn{
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes blurAnime{
  0% {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}

#feature .js-fadeInPc,
#feature .js-fadeInSp{
  opacity: 0;
  transition: 1s;
  transform: translateY(5rem);
}
#feature .js-fadeIn .delay01{
  transition-delay: 3s;
}
#feature .js-scrollIn{
  opacity: 1;
  transform: translateY(0rem);
}

/*----  fadeIn for mobile  -----*/
@media screen and (max-width: 750px) {
  #feature .js-fadeInPc{
    opacity: 1;
    transform: translateX(0);
    transform: translateY(0);
  }
}

/*----  fadeIn for desktop  -----*/
@media only screen and (min-width: 750px) {
  #feature .js-fadeInSp{
    opacity: 1;
    transform: translateX(0);
    transform: translateY(0);
  }
}





/*-------------------------
  top
-------------------------*/
#feature .hero_contents {
  background: #fff9b3;
}
#feature .hero img {
  width: 100vw;
  object-fit: cover;
  object-position: top;
}
#feature .hero-ttl {
  padding: 13.5rem 0 16.5rem;
  text-align: center;
}
#feature .hero-ttl h1 {
  margin-bottom: 1.5rem;
  letter-spacing: -.13rem;
  font-size: 9.6rem;
  font-weight: 400;
}
#feature .hero-ttl p {
  letter-spacing: .65rem;
  font-size: 2.8rem;
  font-weight: 600;
}


/*-------------------------
  credit
-------------------------*/
#feature .credit li {
  padding-top: .6rem;
}
#feature .credit a {
  letter-spacing: .04em;
  font-family: 'apparat-light', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  font-style: normal;
  color: #000000;
}
#feature .credit .price {
  margin-left: .7rem;
}


/*-------------------------
  content
-------------------------*/

#feature .section {
  position: relative;
  padding: 28rem 0;
  margin: 0 auto;
}
#feature .credit__flex {
  position: relative;
}
#feature .credit__container {
  position: absolute;
}

/** img-txt **/
#feature .img-txt {
  text-align: center;
  letter-spacing: -.2rem;
  font-size: 15.9rem;
  line-height: 1;
  color: #fff9b3;
}


/** sec01 **/
#feature .sec01 {
  padding-top: 0;
  background: #fff9b3;
}
#feature .img01-1 {
  width: 50rem;
  margin-left: 14rem;
}
#feature .img01-2 {
  width: 100rem;
  margin: -62.5rem 0 14rem 110rem;
}
#feature .img01-3 {
  width: 78rem;
  margin: 0 auto 14rem;
}
#feature .img01-4 {
  width: 60rem;
  margin-left: 123rem;
}
#feature .sec01 .credit__container {
  bottom: 0;
  left: 187rem;;
}


/** sec02 **/
#feature .sec02 {
  background: #ffffff;
}
#feature .img02-1 {
  width: 72rem;
  margin: 0 auto 14rem;
}
#feature .img02-2 {
  width: 102rem;
  margin: -6rem auto 0;
  border: 1rem solid #fff9b3;
}
#feature .sec02 .credit__container {
  bottom: 0;
  left: 161rem;
}


/** sec03 **/
#feature .sec03 {
  background: #fff9b3;
}
#feature .img03-1 {
  width: 68rem;
  margin-left: 90rem;
}
#feature .img03-2 {
  width: 50rem;
  margin: -34.5rem 0 18rem 148rem;
}
#feature .img03-3 {
  width: 98rem;
  margin-left: 14rem;
}
#feature .sec03 .credit__container {
  bottom: 0;
  left: 116rem;
}


/** sec04 **/
#feature .sec04 {
  padding-bottom: 0;
  background: #ffffff;
}
#feature .sec04 .img-txt {
  position: absolute;
  top: 90.5rem;
  left: -1.8rem;
}
#feature .img04-1 {
  width: 90rem;
  margin-bottom: 4rem;
}
#feature .sec04 .credit__flex {
  display: flex;
  flex-direction: column;
  margin-left: 97rem;
}
#feature .sec04 .credit__container {
  position: relative;
  width: 90rem;
  text-align: right;
}
#feature .sec04 .credit__container::after {
  position: absolute;
  z-index: -1;
  top: -38.5rem;
  right: -12rem;
  width: 24rem;
  height: 64rem;
  content: '';
  background: #fff9b3;
}
#feature .sec04 .credit__container .credit li {
  padding-top: 0;
  padding-bottom: .6rem;
}
#feature .img04-2 {
  width: 66rem;
  margin: -57.7rem 0 0 21rem;
}


/**btn**/
#feature .btn {
  margin: 25rem auto 14rem;
  text-align: center;
  letter-spacing: .04em;
  font-family: 'apparat-light', sans-serif;
  font-size: 2.2rem;
  font-weight: 400;
  font-style: normal;
  color: #000000;
}
#feature .btnLiner.liner {
  width: 0;
  height: 0.16rem;
  background: #000000;
  margin: 0 auto;
  transition: width 1s;
}
#feature .btnLiner.liner.is_show {
  width: 13rem;
  margin-top: 1.3rem;
}