@charset "UTF-8";

:root {
  --lpSetSize: (100vw / 1400) * 0.64;
}
html {
  scroll-behavior: smooth;
}
.l-container {
  width: 100%;
}
.feature {
  width: 100%;
  font-feature-settings: "palt";
}
.feature * {
  margin: 0;
  box-sizing: border-box;
}
.feature img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.feature a {
  display: block;
  color: inherit;
  text-decoration: none;  
  transition: opacity 0.3s;
}
.feature a:hover {
  cursor: pointer;
  opacity: .7;
}

/* PC only */
.l-footer {
  padding-top: 0 !important;
}
.pc-footer {
  margin-top: 0 !important;
}


/* .feature wrap (PC ONLY)
*******************************/
.feature {
  display: flex;
}
.feature .f_main {
  width: calc(480 *(100vw / 1400));
}

/* .f_left
----------------------------- */
.feature .f_left {
  width: 100%;
  background: #f7f0f4;
}
.feature .f_left .f_left__box {
  position: relative;
  height: 100%;
}
.feature .f_left .f_left__box .f_left__title {
  position: sticky;
  top: calc(50vh - 80px);
  margin-inline: auto;
  width: fit-content;
}
.feature .f_left .f_left__box .f_left__title h2 {
  width: calc(195.605 * (100vw / 1400));
  margin: 0 0 calc(32 * (100vw / 1400)) 0;
}
.feature .f_left .f_left__lead {
  font-size: calc(16.31 * (100vw / 1400));
  line-height: 1.75;
  letter-spacing: 0.06em;
  color:#8c503e;
}

/* f_right
----------------------------- */
.feature .f_right {
  width: 100%;
  background: #f7f0f4;
}
.feature .f_right .f_right__box {
  position: relative;
  height: 100%;
}
.feature .f_right .f_right__btn {
  position: sticky;
  top: 50vh;
  margin-inline: auto;
  width: fit-content;
  font-family: "kudryashev-d-contrast", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(25 * (100vw / 1400));
  line-height: 1.6;
  letter-spacing: 0.06em;
  color:#8c503e;
  width: calc(219 * (100vw / 1400));
  border-bottom: calc(1 * (100vw / 1400)) solid #8c503e;
}
.feature .f_right .f_right__btn a::after {
  content: '';
  display:inline-block;
  width: calc(9 * (100vw / 1400));
  height: calc(10 * (100vw / 1400));
  background:url(../img/pc_arrow.svg) 0 0 no-repeat;
  background-size: cover;
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}


/* font-style
*******************************/
.l-container .feature {
  font-family:'游ゴシック体', 'YuGothic', '游ゴシック Medium', 'Yu Gothic', メイリオ, sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #232323;
}
.feature .sec h3 {
  font-family: "kudryashev-d-contrast", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(72 * var(--lpSetSize));
  line-height: 1.341;
  letter-spacing: 0.06em;
  text-align: center;
  margin: 0 0 calc(10 * var(--lpSetSize)) 0;
  padding: 0 0 calc(12 * var(--lpSetSize)) 0; 
  border-bottom: calc(2 * var(--lpSetSize)) #232323 solid;  
}
.feature .sec h3 small {
  font-size: calc(47 * var(--lpSetSize));
}
.feature .sec .sec__lead {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: calc(28 * var(--lpSetSize));
  line-height: 2.0;
  text-align: center;
  padding: calc(20 * var(--lpSetSize)) 0 calc(60 * var(--lpSetSize));
}
.feature .sec .sec__text {
  font-size: calc(24 * var(--lpSetSize));
  line-height: 2.2;
  letter-spacing: 0.06em;
}
.feature .sec h4 {
  display: flex;
  flex-direction: column;  
}
.feature .sec h4 span:nth-of-type(1) {
  font-family: "annabelle-jf", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #ce9b9b;
  font-size: calc(60 * var(--lpSetSize));
  line-height: 1.52;
  letter-spacing: 0.01em;
  transform: rotate(-6deg);
}
.feature .sec h4 span:nth-of-type(2) {
  font-family: "kudryashev-d-contrast", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #232323;
  font-size: calc(50 * var(--lpSetSize));
  line-height: 1.5354;
  letter-spacing: 0.068em;
  text-align: center;
}
.feature .sec h4 span small {
  font-size: calc(33 * var(--lpSetSize)); 
}
.feature .sec__subcnt .whats_list {
  font-size: calc(22 * var(--lpSetSize));
  line-height: 1;
  letter-spacing: 0.07em;
}


/* credit
*******************************/
.feature .sec__credit .credit li {
  font-family: "Crimson Text", serif;
  font-weight: 400;
  font-style: normal;
  color: #232323;  
  font-size: calc(24 * var(--lpSetSize));
  letter-spacing: 0.025em;
  line-height: 1;
  border-bottom: 1px solid #b2b2b2;
}
.feature .sec__credit .credit li .price {
  margin-left: calc(3 * var(--lpSetSize));
}

/* 以下、クレジット間に「/」を入れる場合 
.feature .sec__credit .credit li {
  position: relative;
}
.feature .sec__credit .credit li,
.feature .sec__credit .credit a {
  display: flex;
}
.feature .sec__credit .credit li.separator::after {
  content: "/";
  margin-left: calc(8 * var(--lpSetSize));
}
.feature .sec__credit .credit li:last-of-type::after {
  content: none !important;
}
*/

/* .sec__subcnt
*******************************/
.feature .sec .sec__subcnt {
  background:#f4eded;
  padding: calc(40 * var(--lpSetSize)) 0 calc(80 * var(--lpSetSize)) 0;
}
.feature .sec03 .sec__subcnt {
  background:#f4f4f4;
}
.feature .sec .sec__subcnt+.sec__subcnt::before {
  content:'';
  display: block;
  width: 100%;
  height: calc(40 * var(--lpSetSize));
  background:#f4eded;
  background: linear-gradient(180deg,rgba(244, 237, 237, 1) 0%, rgba(232, 232, 239, 1) 100%);
}
.feature .sec .sec__subcnt+.sec__subcnt {
  padding-top: 0;
  background: #e8e8ef;
  margin-bottom: calc(160 * var(--lpSetSize));
}
.feature .sec__subcnt h4 {
  margin-bottom: calc(-36 * var(--lpSetSize));
}
.feature .sec__subcnt .inner {
  width: calc(680 * var(--lpSetSize));
  background: #FFFFFF;
  margin: 0 auto calc(20 * var(--lpSetSize));
  padding: calc(72 * var(--lpSetSize)) calc(40 * var(--lpSetSize)) calc(60 * var(--lpSetSize));
}
.feature .sec__subcnt .inner .whats_img {
  display:flex;
  gap: calc(20 * var(--lpSetSize));
  flex-direction: column;
  align-items: center;
  margin: 0 auto calc(60 * var(--lpSetSize));
}
.feature .sec__subcnt .inner .whats_list {
  display:flex;
  flex-wrap: wrap;
  gap:calc(22 * var(--lpSetSize)) calc(20 * var(--lpSetSize));
}



/*****************************************************
container
*****************************************************/

/* .hero
----------------------------- */
.feature .hero__lead {
  font-size: calc(24 * var(--lpSetSize));
  line-height: 2.2;
  letter-spacing: 0.06em;
  padding: calc(108 * var(--lpSetSize)) 0 calc(136 * var(--lpSetSize));
  text-align:center;
}

/* .sec01
----------------------------- */
.feature .sec01 {
  margin: 0 0 calc(152 * var(--lpSetSize)) 0
 }
.feature .img02 {
  width: calc(660 * var(--lpSetSize));
}
.feature .img03 {
  width: calc(600 * var(--lpSetSize));
}
.feature .img04 {
  width: calc(600 * var(--lpSetSize));
}
.feature .sec01 .sec__text {
  text-align: center;
  padding: calc(84 * var(--lpSetSize)) 0 calc(106 * var(--lpSetSize));
}
.feature .sec01 .sec__subcnt h4 span:nth-of-type(1) {
  padding: calc(16 * var(--lpSetSize)) 0 0 calc(126 * var(--lpSetSize));
}
.feature .sec01 .credit01 {
  width: calc(700 * var(--lpSetSize));
  margin: 0 auto calc(100 * var(--lpSetSize));
  padding: calc(50 * var(--lpSetSize)) 0 0 0;
}
.feature .sec01 .credit01 .credit  {
  display: flex;
  gap: calc(26 * var(--lpSetSize)) calc(20 * var(--lpSetSize));
  flex-wrap: wrap;
  justify-content: center;
}


/* .sec02
----------------------------- */
.feature .img05 {
  width: calc(670 * var(--lpSetSize));
  margin: 0 auto;  
}
.feature .slide_wrap {
  width: calc(750 * var(--lpSetSize));
  overflow: hidden;
}
.feature .sec__slide {
  width: calc(860 * var(--lpSetSize));
  overflow: visible;
}
/* 次のスライドを消す */
.feature .slick-slide {
  opacity: 1;
}
/* 現在＋前だけ表示 */
.feature .slick-current,
.feature .slick-slide+.slick-current {
  opacity: 1;
}
.feature .img06 {
  padding: 0 0 0 calc(20 * var(--lpSetSize));
  width: calc(640 * var(--lpSetSize));
}
.feature .sec02 .sec__text {
  text-align: center;
  padding: calc(84 * var(--lpSetSize)) 0 calc(106 * var(--lpSetSize));
}
.feature .sec02 .sec__subcnt .sec__text {
 padding: calc(50 * var(--lpSetSize)) 0 calc(44 * var(--lpSetSize)); 
}
.feature .sec02 .sec__subcnt h4 span:nth-of-type(1) {
  padding: calc(16 * var(--lpSetSize)) 0 0 calc(106 * var(--lpSetSize));
}
.feature .sec02 .sec__subcnt:last-child h4 span:nth-of-type(1) {
  color:#9ca9bc;  
  padding: calc(16 * var(--lpSetSize)) 0 0 calc(100 * var(--lpSetSize));
}
.feature .sec02 .sec__subcnt:last-child h4 span:nth-of-type(2) {
  padding-top:calc(8 * var(--lpSetSize));
}
.feature .sec02 .sec__subcnt .text_limited {
  width: calc(510 * var(--lpSetSize));
  font-family: "kudryashev-d-contrast", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(26 * var(--lpSetSize));
  line-height: calc(56 * var(--lpSetSize));
  letter-spacing: 0.08em;
  color: #9ca9bc;
  text-align: center;
  border: 1px solid #9ca9bc;
  border-radius: calc(31 * var(--lpSetSize));
  margin: 0 auto calc(60 * var(--lpSetSize));
  padding: calc(6 * var(--lpSetSize)) 0 0 0;
}
.feature .sec02 .credit02 {
  margin: 0 0 calc(100 * var(--lpSetSize)) calc(200 * var(--lpSetSize));
  padding: calc(54 * var(--lpSetSize)) 0 0 0;
}
.feature .sec02 .credit02 .credit  {
  width: calc(510 * var(--lpSetSize));  
  display: flex;
  gap: calc(26 * var(--lpSetSize)) calc(20 * var(--lpSetSize));
  display:flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}


/* .sec03
----------------------------- */
.feature .sec03 .credit03 {
  width: calc(700 * var(--lpSetSize));
  margin: 0 auto calc(98 * var(--lpSetSize));
  padding: calc(50 * var(--lpSetSize)) 0 0 0;
}
.feature .sec03 .credit03 .credit  {
  display: flex;
  gap: calc(26 * var(--lpSetSize)) calc(20 * var(--lpSetSize));
  flex-wrap: wrap;
  justify-content: center;
}
.feature .img12 {
  width: calc(660 * var(--lpSetSize));
  margin: 0 auto;  
}
.feature .sec03 .sec__text {
  text-align: center;
  padding: calc(84 * var(--lpSetSize)) 0 calc(106 * var(--lpSetSize));
}
.feature .sec03 .sec__subcnt h4 span:nth-of-type(1) {
  color:#9e9a9a;  
  padding: calc(16 * var(--lpSetSize)) 0 0 calc(126 * var(--lpSetSize));
}
.feature .sec03 .sec__subcnt:last-child h4 span:nth-of-type(2) {
  padding-top:calc(2 * var(--lpSetSize));
}


/* .sec_bottom
----------------------------- */
.feature .sec_bottom {
  padding: calc(140 * var(--lpSetSize)) 0 calc(180 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn {
  width: fit-content;
  margin: 0 auto;
}
.feature .sec_bottom .sec__btn a {
  width: calc(540 * var(--lpSetSize));
  font-family: "kudryashev-d-contrast", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(30 * var(--lpSetSize));
  line-height: calc(96 * var(--lpSetSize));
  letter-spacing: 0.08em;
  color:#232323;
  text-align: center;
  border: 1px solid #232323;
  border-radius: calc(48 * var(--lpSetSize));
}

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

/* テキスト　左→右 */
.js-clip-lr {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s cubic-bezier(0.37, 0, 0.63, 1);
}
.js-clip-lr.is-show {
  clip-path: inset(0);
}

/* テキスト　右→左 */
.js-clip-rl {
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1s cubic-bezier(0.37, 0, 0.63, 1);
}
.js-clip-rl.is-show {
  clip-path: inset(0);
}

/* 画像　下→上　＋フェードイン */
.js-fade {
  opacity: 0;
  transform: translateY(3rem);
  visibility: hidden;
  transition: opacity 1s ease, transform 0.8s ease;
  will-change: opacity;
}
.js-fade.is-show {
  opacity: 1;
  transform: none;
  visibility: visible;
}

/* 画像　左→右（流れる）＋ズームアウト */
.js-shot-lr {
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 850ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.js-shot-lr img {
  transform: scale(1.3) translate3d(0, 0, 0);
  transition: transform 1350ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-delay: 250ms;
}
.js-shot-lr.is-show {
  clip-path: inset(0);
}
.js-shot-lr.is-show img {
  transform: none;
}

/* 画像　右→左（流れる）＋ズームアウト */
.js-shot-rl {
  overflow: hidden;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 850ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.js-shot-rl img {
  transform: scale(1.3) translate3d(0, 0, 0);
  transition: transform 1350ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-delay: 250ms;
}
.js-shot-rl.is-show {
  clip-path: inset(0);
}
.js-shot-rl.is-show img {
  transform: none;
}

/*  タイトル周り(PC ONLY) */
.feature .js-scroll-fade {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.feature .js-scroll-fade.is-active {
  opacity: 1;
  visibility: visible;
}


@media screen and (min-width: 1400px) { 
  
  :root {
    --lpSetSize: 1px * 0.64;
  }

  /* .feature wrap
  *******************************/
  .feature .f_main {
    width: 480px; 
  }

  /* .f_left (PC ONLY)
  ----------------------------- */
  .feature .f_left .f_left__box .f_left__title h2 {
    width: 195.605px;
    margin: 0 0 32px 0;
  }
  .feature .f_left .f_left__lead {
    font-size: 16.31px;
  }

  /* f_right (PC ONLY)
  ----------------------------- */
  .feature .f_right .f_right__btn {
    font-size: 25px;
    width: 219px;
    border-bottom: 1px solid #8c503e;
  }
  .feature .f_right .f_right__btn a::after {
    width: 9px;
    height: 10px;
  }

}