@charset "UTF-8";

:root {
  --lpSetSize: (100vw / 1400) * 0.6133333333;
  --lpSetBghero: #ead8e4;/* 背景：hero */
  --lpSetBg01: #dbc3c9;/* 背景：濃いピンク */
  --lpSetBg02: #f7edf1;/* 背景：薄いピンク */
  --lpSetTxt01: #ffffff;/* フォントカラー：白 */
  --lpSetTxt02: #d195a9;/* フォントカラー：濃いピンク */
}
html {
  scroll-behavior: smooth;
}
.l-container {
  width: 100%;
}
.feature {
  width: 100%;
  font-feature-settings: "palt";
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Helvetica Neue", Arial, "Noto Sans JP", "Noto Sans", Meiryo, '游ゴシック体', 'YuGothic', '游ゴシック Medium', 'Yu Gothic', メイリオ, sans-serif;
  font-weight: normal;
  font-style: normal;
  color: var(--lpSetTxt01);
}
.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;
}

/* .f_left
----------------------------- */
.feature .f_left {
  width: 50%;
  background: #ead8e4;
}
.feature .f_left .f_left__box {
  position: relative;
  height: 100%;
  background: #ead8e4;  
}
.feature .f_left .f_left__box .hero__img {
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  margin-inline: auto;
  width: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* .f_main
----------------------------- */
.feature .f_main {
  width: 50%;
}
.feature .sec {
  margin: 0;
  padding: 0;
}
.feature .sec .inner {
  width: calc(460 * (100vw / 1400));
  margin: 0 auto;
}


/* credit
*******************************/
.feature .sec__credit .credit {
  display: flex;
  flex-wrap: wrap;
  gap: calc(25 * var(--lpSetSize)) calc(20 * var(--lpSetSize));
}
.feature .sec__credit .credit li {
  font-family: "Crimson Text", serif;
  font-weight: 400;
  font-style: normal;
  color: var(--lpSetTxt01);  
  font-size: calc(24 * var(--lpSetSize));
  letter-spacing: 0.025em;
  line-height: 1;
  border-bottom: calc(2 * var(--lpSetSize)) solid var(--lpSetTxt01);
}
.feature .sec03 .sec__credit .credit li,
.feature .sec04 .sec__credit .credit li,
.feature .sec05 .sec__credit .credit li {
  color: var(--lpSetTxt02);
  border-color: var(--lpSetTxt02);  
}

.feature .sec__credit .credit li .price {
  margin-left: calc(4 * 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__itemtitle
*******************************/
.feature .sec__itemtitle {
  font-family: "Crimson Text", serif;
  font-weight: 400;
  font-style: normal;
  color: var(--lpSetTxt01);
  font-size: calc(26 * var(--lpSetSize));
  letter-spacing: 0.03em;
  line-height: calc(54 * var(--lpSetSize));
}
.feature .sec03 .sec__itemtitle,
.feature .sec04 .sec__itemtitle,
.feature .sec05 .sec__itemtitle {
    color: var(--lpSetTxt02);
}
.feature .sec__itemtitle ul {
  display:flex;
  gap: calc(30 * var(--lpSetSize));  
}
.feature .sec__itemtitle ul li {
  display:flex;
  align-items: center;
  gap: calc(14 * var(--lpSetSize));
}
.feature .sec__itemtitle ul li span {
  padding: calc(2 * var(--lpSetSize)) 0 0 0;
}
.feature .sec__itemtitle .icon {
  width: calc(54 * var(--lpSetSize));
}


/* svg .text
*******************************/
.feature .deco {
  position: relative;
  width: calc(750 var(--lpSetSize));
}


/* .sec__slide
*******************************/
.feature .sec__slide {
  margin-bottom: 0;
}
.feature .slick-dots {
  position: absolute;
  right: calc(14 * var(--lpSetSize));
  bottom: calc(16 * var(--lpSetSize));
  width: fit-content;
  z-index: 1;
}
.feature .slick-dots li {
    width: calc(8 * var(--lpSetSize));
    height: calc(8 * var(--lpSetSize));
}
.feature .slick-dots li button {
    width: calc(8 * var(--lpSetSize));
    height: calc(8 * var(--lpSetSize));
    padding: calc(6 * var(--lpSetSize));
}
.feature .slick-dots li button:before {
    content: '';
    width: calc(8 * var(--lpSetSize));
    height: calc(8 * var(--lpSetSize));
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    background:none;
    border: 1px solid var(--lpSetTxt02);
    border-radius: calc(10 * var(--lpSetSize));
}
.feature .slick-dots li.slick-active button:before {
    opacity: 1;
    background:var(--lpSetTxt02);
    border: 1px solid var(--lpSetTxt02); 
}


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

/* .hero
----------------------------- */
.feature .hero {
  background: var(--lpSetBg01);
}
.feature .hero .hero__img {
  background: var(--lpSetBghero);
  text-align: center;
}
.feature .hero .hero__img img {
  width: calc(630 * var(--lpSetSize));
  display: inline;
}
.feature .hero__lead {
  font-size: calc(24 * var(--lpSetSize));
  line-height: 2.2;
  letter-spacing: 0.07em;
  padding: calc(106 * var(--lpSetSize)) 0 calc(146 * var(--lpSetSize));
  text-align:center;
  width: calc(750 * var(--lpSetSize));
  margin: 0 auto;
}


/* .sec01
----------------------------- */
.feature .sec01 {
  background: var(--lpSetBg01);
  padding: 0 0 calc(222 * var(--lpSetSize)) 0;
}
.feature .img01 {
  width: calc(615 * var(--lpSetSize));
  margin: 0 0 calc(100 * var(--lpSetSize)) 0;
}
.feature .img02 {
  width: calc(690 * var(--lpSetSize));
  margin: 0 0 calc(40 * var(--lpSetSize)) calc(60 * var(--lpSetSize));
}
.feature .wavetxt01 {
  position: absolute;
  top: calc(264 * var(--lpSetSize));
  right: calc(38 * var(--lpSetSize));
  width: calc(58.2188 * var(--lpSetSize));
}
.feature .sec01 .sec__itemtitle {
  margin: 0 0 calc(40 * var(--lpSetSize)) 0;
  padding: 0 calc(74 * var(--lpSetSize));
}
.feature .sec01 .credit {
  margin: 0 auto;
  width: calc(600 * var(--lpSetSize));
}


/* .sec02
----------------------------- */
.feature .sec02 {
  background: var(--lpSetBg01);
  padding: 0 0 calc(220 * var(--lpSetSize)) 0;
}
.feature .img03 {
  width: calc(615 * var(--lpSetSize));
  margin: 0 auto calc(20 * var(--lpSetSize));
}
.feature .wavetxt02 {
  position: absolute;
  top: calc(40 * var(--lpSetSize));
  left: calc(78 * var(--lpSetSize));
  width: calc(157.4817 * var(--lpSetSize));
  z-index: 1;
}
.feature .wavetxt03 {
  position: absolute;
  top: calc(304 * var(--lpSetSize));
  left: calc(32 * var(--lpSetSize));
  width: calc(170.3382* var(--lpSetSize));
  z-index: 2;
}
.feature .img04 {
  width: calc(615 * var(--lpSetSize));
  margin: 0 auto calc(50 * var(--lpSetSize));
}
.feature .sec02 .sec__itemtitle {
  width: fit-content;
  margin:0 auto calc(40 * var(--lpSetSize));
}
.feature .sec02 .credit {
  width: calc(450 * var(--lpSetSize));
  margin: 0 auto;
  justify-content: center;
}



/* .sec03
----------------------------- */
.feature .sec03 {
  background: linear-gradient(to bottom, var(--lpSetBg01) calc(428 * var(--lpSetSize)), var(--lpSetBg02) calc(428 * var(--lpSetSize)));
  padding: 0 0 calc(220 * var(--lpSetSize)) 0;
}
.feature .img05 {
  width: calc(646 * var(--lpSetSize));
  margin: 0 0 calc(57 * var(--lpSetSize)) calc(104 * var(--lpSetSize));
}
.feature .text01 {
  width: calc(660 * var(--lpSetSize));
  margin: 0 auto calc(56 * var(--lpSetSize));
}
.feature .img06 {
  width: calc(705 * var(--lpSetSize));
  margin: 0 0 calc(50 * var(--lpSetSize)) 0;
}
.feature .sec03 .sec__itemtitle {
  margin: 0 0 calc(42 * var(--lpSetSize)) 0;
  padding: 0 0 0 calc(40 * var(--lpSetSize));
}
.feature .sec03 .credit {
  margin: 0 0 0 calc(40 * var(--lpSetSize));
  width: calc(700 * var(--lpSetSize));
}


/* .sec04
----------------------------- */
.feature .sec04 {
  background: var(--lpSetBg02);
  padding: 0 0 calc(220 * var(--lpSetSize)) 0;
}
.feature .img07 {
  width: calc(676 * var(--lpSetSize));
  border: #eacee4 calc(8 * var(--lpSetSize)) solid;
  margin: 0 auto calc(50 * var(--lpSetSize));
}
.feature .sec04 .sec__itemtitle {
  margin: 0 auto calc(40 * var(--lpSetSize));
  width: fit-content;
}
.feature .sec04 .credit {
  width: calc(450 * var(--lpSetSize));
  margin: 0 auto;
  justify-content: center;
}



/* .sec05
----------------------------- */
.feature .sec05 {
  background: linear-gradient(to bottom, transparent calc(200 * var(--lpSetSize)), var(--lpSetBg02) calc(200 * var(--lpSetSize)));
  padding: 0 0 calc(220 * var(--lpSetSize)) 0; 
}
.feature .sticky-block#sticky-01 {
  position: -webkit-sticky;
  position: sticky;
  bottom:0;
}
.feature .sticky-block#sticky-02 {
  position: -webkit-sticky;
  position: sticky;
  top:0;
}
.feature #sticky-01 {
  top: var(--sticky-block01-pos);
  z-index: 2;
}
.feature #sticky-02 {
  top: var(--sticky-block02-pos);
  z-index: 3;
}
.feature .img08 {
  margin: 0 auto calc(80 * var(--lpSetSize));
}
.feature .img09 {
  width: calc(660 * var(--lpSetSize));
  margin: 0 auto calc(150 * var(--lpSetSize));
}
.feature .wavetxt04 {
  position: absolute;
  top: calc(774 * var(--lpSetSize));
  left: calc(63.7 * var(--lpSetSize));
  width: calc(622.6611 * var(--lpSetSize));
}
.feature .sec05 .sec__itemtitle {
  width: fit-content;
  margin:0 auto calc(40 * var(--lpSetSize));
}
.feature .sec05 .credit {
  width: calc(600 * var(--lpSetSize));
  margin: 0 auto;
  justify-content: center;
}


/* .sec06
----------------------------- */
.feature .sec06 {
  background: linear-gradient(to bottom, var(--lpSetBg02) calc(1075 * var(--lpSetSize)), var(--lpSetBg01) calc(1075 * var(--lpSetSize)));
  padding: 0 0 calc(220 * var(--lpSetSize)) 0;
}
.feature .img10 {
  width: calc(615 * var(--lpSetSize));
  margin: 0 0 calc(19 * var(--lpSetSize)) calc(135 * var(--lpSetSize));
}
.feature .img11 {
  width: calc(615 * var(--lpSetSize));
  margin: 0 0 calc(50 * var(--lpSetSize)) calc(135 * var(--lpSetSize));
}
.feature .wavetxt05 {
  position: absolute;
  top: calc(350 * var(--lpSetSize));
  left: calc(34 * var(--lpSetSize));
  width: calc(60.8818 * var(--lpSetSize));
}
.feature .sec06 .sec__itemtitle {
  margin: 0 calc(30 * var(--lpSetSize)) calc(40 * var(--lpSetSize)) 0;
}
.feature .sec06 .sec__itemtitle ul {
  justify-content: flex-end;
}
.feature .sec06 .credit {
  width: calc(720 * var(--lpSetSize));
  padding: 0 0 0 100px;
  justify-content: flex-end;
}


/* .sec07
----------------------------- */
.feature .sec07 {
  background: var(--lpSetBg01);
  padding: 0 0 calc(226 * var(--lpSetSize)) 0;
}
.feature .img12 {
  width: calc(691 * var(--lpSetSize));
  margin: 0 auto calc(100 * var(--lpSetSize));
}
.feature .img13 {
  width: calc(630 * var(--lpSetSize));
  margin: 0 0 calc(40 * var(--lpSetSize)) calc(120 * var(--lpSetSize));
}
.feature .text02 {
  position: absolute;
  top: calc(40 * var(--lpSetSize));
  left: calc(60 * var(--lpSetSize));   
  width: calc(21.252 * var(--lpSetSize));
  z-index: 1;
}
.feature .sec07 .sec__itemtitle {
  margin: 0 calc(40 * var(--lpSetSize)) calc(40 * var(--lpSetSize)) 0;
}
.feature .sec07 .sec__itemtitle ul {
  justify-content: flex-end;
}
.feature .sec07 .credit {
  width: calc(710 * var(--lpSetSize));
  padding: 0 0 0 100px;
  justify-content: flex-end;
}


/* .sec08
----------------------------- */
.feature .sec08 {
  background: var(--lpSetBg01);
}
.feature .img14 {
  width: calc(600 * var(--lpSetSize));
  margin: 0 0 calc(100 * var(--lpSetSize)) calc(37.5 * var(--lpSetSize));
}
.feature .img15 {
  width: calc(675 * var(--lpSetSize));
  margin: 0 auto calc(50 * var(--lpSetSize));
}
.feature .wavetxt06 {
  position: absolute;
  top: calc(610 * var(--lpSetSize));
  right: calc(36 * var(--lpSetSize));
  width: calc(212.7236 * var(--lpSetSize));
  z-index: 1;
}
.feature .sec08 .sec__itemtitle {
  width: fit-content;
  margin:0 auto calc(40 * var(--lpSetSize));
}
.feature .sec08 .credit {
  width: calc(600 * var(--lpSetSize));
  margin: 0 auto;
  justify-content: center;
}


/* .sec_bottom
----------------------------- */
.feature .sec_bottom {
  background: var(--lpSetBg01);
  padding: calc(180 * var(--lpSetSize)) 0 calc(120 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn {
  width: calc(520 * var(--lpSetSize));
  margin: 0 auto;
}


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

/* フェードイン */
.js-fade-in {
  opacity: 0;
  visibility: hidden;
  transition: opacity 2s ease, transform 0.8s ease;
  will-change: opacity;
}
.js-fade-in.is-show {
  opacity: 1;
  transform: none;
  visibility: visible;
}

/* SVG画像テキストを矢印の方向にへ流れるように表示 */
.js-wavetxt {
  opacity: 0;
}
.js-wavetxt.is-show {
  opacity: 1;
}

/*  左右コンテンツ 追従＋フェードイン＋フェードアウト */
.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;
}


/* 画像スライドイン＋ズームアウト（250528STY） */
.feature .target[data-fade="top"],
.feature .target[data-fade="left"],
.feature .target[data-fade="right"]{
  opacity: 0;
  transition: transform 1s ease-out, opacity 1s ease-out;
}
.feature .target[data-fade="top"]{
  transform: translateY(100px);
}
.feature .target[data-fade="left"]{
  transform: translateX(-50px);
}
.feature .target[data-fade="right"]{
  transform: translateX(50px);
}
.feature .target[data-fade="top"][data-is-active="true"],
.feature .target[data-fade="left"][data-is-active="true"],
.feature .target[data-fade="right"][data-is-active="true"]{
  opacity: 1;
  transform: translateX(0);
}
.feature .target[data-scale="scale"]{
  overflow: hidden;
}
.feature .target[data-scale="scale"] img{
  animation-duration: 2s;
  animation-fill-mode: both;
  transition: transform 1s ease-out, 1s ease-out;
  transform: scale(1.1, 1.1);
}

.feature .target[data-scale="scale"][data-is-active="true"] img{
  transform: scale(1);
}


/* --------------------------------------------------- */

@media screen and (min-width: 1400px) { 
  
  :root {
    --lpSetSize: 1px * 0.6133333333;
  }
  .feature .f_left .f_left__box .hero__img img {
    width: 700px;
  }
  .feature .sec .inner {
    width: 460px;
  }

}