@charset "UTF-8";

:root {
  --lpSetSize: (100vw / 1400);
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
body {
  margin: 0;
}
.l-container {
  width: 100%;
}
.feature {
  width: 100%;
  font-feature-settings: "palt";
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-style: normal;
  color: #000000;
}
.feature * {
  margin: 0;
  box-sizing: border-box;
}
.feature img {
  width: 100%;
  height: auto;
  vertical-align: top;
  display: block;
}
.feature a {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s;
}

.feature a img: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 / .f_main
----------------------------- */
.feature .f_left {
  width: 50%;
  display: flex;
  flex-direction: row-reverse;
}
.feature .f_main {
  width: 50%;
  display: flex;
  margin-top: calc(-24 * var(--lpSetSize));
}
.feature .f_left .f_left__box,
.feature .f_main .inner {
  width: calc(560 * var(--lpSetSize));
  background: #ffffff;
}
.feature .f_left .f_left__box {
  position: relative;
  height: 100%;
}
.feature .f_left .f_left__box .f_left__title {
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  overflow: hidden;
}
.feature .f_left .f_left__box .f_left__title div {
  position: relative;
}
.feature .f_left .f_left__box .f_left__title h2 .txt01,
.feature .f_left .f_left__box .f_left__title h2 .txt02 {
  position: absolute;
  z-index: 2;
}
.feature .f_left .f_left__box .f_left__title h2 .txt01 {
  width: calc(225 * var(--lpSetSize));
  bottom: calc(92 * var(--lpSetSize));
  left: calc(54 * var(--lpSetSize));
}
.feature .f_left .f_left__box .f_left__title h2 .txt02 {
  width: calc(298 * var(--lpSetSize));
  bottom: calc(129 * var(--lpSetSize));
  left: calc(17 * var(--lpSetSize));
}
.feature .f_left .f_left__box .f_left__title .hero__img img {
  width: 100%;
  object-fit: cover;
}


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

/* .hero（intro）
----------------------------- */
.feature .hero__lead {
  padding: calc(95 * var(--lpSetSize)) calc(40 * var(--lpSetSize)) calc(49 * var(--lpSetSize));
}
.feature .hero__lead p {
  font-size: calc(18 * var(--lpSetSize));
  line-height: 1.555;
  text-align: center;
}


/* .sec 共通
----------------------------- */
.feature .sec {
  position: relative;
}
.feature .sec h3,
.feature .sec .ttl {
  position: absolute;
  z-index: 2;
}
.feature .sec .bg {
  position: absolute;
  z-index: 0;
}
.feature .sec .bg img {
  width: 100%;
  height: auto;
}
.feature .sec figure {
  position: relative;
  z-index: 1;
}

/* sec タイトルSVG位置
----------------------------- */
/* sec01 */
.feature .sec01 h3 {
  width: calc(110 * var(--lpSetSize));
  top: calc(370 * var(--lpSetSize));
  left: calc(320 * var(--lpSetSize));
}
.feature .sec01 .ttl {
  width: calc(71 * var(--lpSetSize));
  top: calc(203 * var(--lpSetSize));
  right: calc(42 * var(--lpSetSize));
  left: auto;
}

/* sec02 */
.feature .sec02 h3 {
  width: calc(126 * var(--lpSetSize));
  top: calc(140 * var(--lpSetSize));
  right: calc(18 * var(--lpSetSize));
  left: auto;
}
.feature .sec02 .ttl {
  width: calc(70.8 * var(--lpSetSize));
  top: calc(130.8 * var(--lpSetSize));
  left: calc(39 * var(--lpSetSize));
}

/* sec03 */
.feature .sec03 h3 {
  width: calc(136 * var(--lpSetSize));
  top: calc(230 * var(--lpSetSize));
  left: calc(293 * var(--lpSetSize));
}
.feature .sec03 .ttl {
  width: calc(74 * var(--lpSetSize));
  top: calc(286 * var(--lpSetSize));
  right: calc(36 * var(--lpSetSize));
  left: auto;
}

/* sec04 */
.feature .sec04 h3 {
  width: calc(131 * var(--lpSetSize));
  top: calc(204 * var(--lpSetSize));
  right: calc(304 * var(--lpSetSize));
  left: auto;
}
.feature .sec04 .ttl {
  width: calc(71 * var(--lpSetSize));
  top: calc(202 * var(--lpSetSize));
  left: calc(50 * var(--lpSetSize));
}

/* sec テキスト共通
----------------------------- */
.feature .sec p {
  font-size: calc(18 * var(--lpSetSize));
  text-align: center;
  line-height: 1.56;
}
.feature .sec p.lead {
  font-size: calc(22 * var(--lpSetSize));
  text-align: center;
  line-height: 1.22;
}
.feature .sec p.lead strong {
  font-weight: 400;
}


/* .sec__credit 共通
----------------------------- */
.feature .sec__credit .credit {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(7 * var(--lpSetSize)) calc(8 * var(--lpSetSize));
}
.feature .sec__credit .credit li {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #8E8E8E;
  font-size: calc(16 * var(--lpSetSize));
  line-height: 1;
  position: relative;
  display: flex;
}
.feature .sec__credit .credit a {
  border-bottom: 1px solid #8E8E8E;
}
.feature .sec01 .sec__credit {
  width: 80%;
  margin: 0 auto calc(80 * var(--lpSetSize));
}
.feature .sec02 .sec__credit {
  width: 80%;
  margin: 0 auto calc(80 * var(--lpSetSize));
}
.feature .sec03 .sec__credit {
  width: 80%;
  /* margin: 0 auto calc(80 * var(--lpSetSize)); */
}
.feature .sec04 .sec__credit {
  width: 80%;
  margin: 0 auto calc(63 * var(--lpSetSize));
}
.feature .sec__topics .sec__credit {
  width: 80%;
  margin: 0 auto calc(40 * var(--lpSetSize));
}
.feature .sec__topics .sec__credit .credit li {
  color: #000000;
}


/* .sec__topics
----------------------------- */
.feature .sec__topics {
  position: relative;
  padding: calc(60 * var(--lpSetSize)) 0 calc(50 * var(--lpSetSize));
  overflow: hidden;
}
.feature .sec__topics .sec__topics__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.feature .sec__topics .sec__topics__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature .sec__topics figure {
  position: relative;
  z-index: 1;
}
.feature .sec__topics .topics__lead {
  position: relative;
  z-index: 1;
  font-size: calc(22 * var(--lpSetSize));
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  margin-bottom: calc(17 * var(--lpSetSize));
}
.feature .sec__topics .topics__img01,
.feature .sec__topics .topics__img02 {
  width: calc(400 * var(--lpSetSize));
  margin: calc(18 * var(--lpSetSize)) auto calc(17 * var(--lpSetSize));
}
.feature .sec__topics .topics__img03,
.feature .sec__topics .topics__img04 {
  width: calc(400 * var(--lpSetSize));
  margin: 0 auto;
}

.feature .sec__topics_bottom .sec__credit {
  margin: calc(15 * var(--lpSetSize)) auto calc(40 * var(--lpSetSize));
}

/* .sec01
----------------------------- */
.feature .sec01 {
  padding-top: calc(176 * var(--lpSetSize));
  padding-bottom: calc(60 * var(--lpSetSize));
}
.feature .sec01 p.lead {
  margin-bottom: calc(21 * var(--lpSetSize));
}
.feature .sec01 p {
  margin-bottom: calc(43 * var(--lpSetSize));
}
.feature .sec01 .bg {
  position: absolute;
  top: calc(-87 * var(--lpSetSize));
  left: calc(290 * var(--lpSetSize));
  width: 48%;
  z-index: 0;
}
.feature .sec01 .img01 {
  width: calc(450 * var(--lpSetSize));
}
.feature .sec01 .img02 {
  width: calc(350 * var(--lpSetSize));
  margin: calc(20 * var(--lpSetSize)) 0 0 auto;
}
.feature .sec01 .img03 {
  width: calc(350 * var(--lpSetSize));
  margin: calc(20 * var(--lpSetSize)) auto calc(44 * var(--lpSetSize)) calc(60 * var(--lpSetSize));
}

/* .sec02
----------------------------- */
.feature .sec02 {
  padding-top: calc(112 * var(--lpSetSize));
  padding-bottom: calc(43 * var(--lpSetSize));
}
.feature .sec02 p.lead {
  margin-bottom: calc(23 * var(--lpSetSize));
}
.feature .sec02 p {
  margin-bottom: calc(45 * var(--lpSetSize));
}
.feature .sec02 .bg {
  position: absolute;
  top: calc(-70 * var(--lpSetSize));
  left: calc(-1 * var(--lpSetSize));
  width: 63%;
  z-index: 0;
}
.feature .sec02 .img04 {
  width: calc(450 * var(--lpSetSize));
  margin: 0 0 0 auto;
}
.feature .sec02 .img05 {
  width: calc(350 * var(--lpSetSize));
  margin: calc(13 * var(--lpSetSize)) auto 0 0;
}
.feature .sec02 .img06 {
  width: calc(350 * var(--lpSetSize));
  margin: calc(20 * var(--lpSetSize)) auto calc(53 * var(--lpSetSize)) calc(150 * var(--lpSetSize));
}

/* .sec03
----------------------------- */
.feature .sec03 {
  padding-top: calc(172 * var(--lpSetSize));
  padding-bottom: calc(80 * var(--lpSetSize));
}
.feature .sec03 p.lead {
  margin-bottom: calc(21 * var(--lpSetSize));
}
.feature .sec03 p {
  margin-bottom: calc(44 * var(--lpSetSize));
}
.feature .sec03 .bg {
  position: absolute;
  top: calc(-19 * var(--lpSetSize));
  left: calc(235 * var(--lpSetSize));
  width: 58%;
  z-index: 0;
}
.feature .sec03 .img07 {
  width: calc(450 * var(--lpSetSize));
  margin: calc(37 * var(--lpSetSize)) auto calc(20 * var(--lpSetSize)) 0;
}
.feature .sec03 .img08 {
  width: calc(350 * var(--lpSetSize));
  margin: 0 calc(60 * var(--lpSetSize)) 0 auto;
}
.feature .sec03 .img09 {
  width: calc(350 * var(--lpSetSize));
  margin: calc(20 * var(--lpSetSize)) auto calc(53 * var(--lpSetSize)) 0;
}

/* .sec04
----------------------------- */
.feature .sec04 {
  padding-top: calc(172 * var(--lpSetSize));
  padding-bottom: calc(29 * var(--lpSetSize));
}
.feature .sec04 p.lead {
  margin-bottom: calc(21 * var(--lpSetSize));
}
.feature .sec04 p {
  margin-bottom: calc(44 * var(--lpSetSize));
}
.feature .sec04 .bg {
  position: absolute;
  top: calc(-56 * var(--lpSetSize));
  left: calc(1 * var(--lpSetSize));
  width: 61%;
  z-index: 0;
}
.feature .sec04 .img10 {
  width: calc(450 * var(--lpSetSize));
  margin: 0 0 calc(20 * var(--lpSetSize)) calc(110 * var(--lpSetSize));
}
.feature .sec04 .img11 {
  width: calc(450 * var(--lpSetSize));
  margin: 0 auto calc(54 * var(--lpSetSize)) 0;
}


/* .sec_bottom
----------------------------- */
.feature .sec_bottom .sec__btn {
  text-align: center;
  margin: 0 auto calc(16 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn a {
  display: inline-block;
}
.feature .sec_bottom .sec__btn a:hover {
  opacity: 0.5;
}

/* The Legacy of Redouté */
.feature .sec__legacy {
  padding: calc(20 * var(--lpSetSize)) calc(36 * var(--lpSetSize));
  margin: 0 calc(28 * var(--lpSetSize)) calc(77 * var(--lpSetSize));
}
.feature .sec__legacy .legacy__ttl {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: calc(24 * var(--lpSetSize));
  line-height: 0.833;
  text-align: center;
  margin-bottom: calc(28 * var(--lpSetSize)) !important;
}
.feature .sec__legacy .legacy__body {
  font-size: calc(18 * var(--lpSetSize));
  line-height: 1.556;
  text-align: center;
  margin-bottom: 0 !important;
}
.feature .sec_bottom .staff {
  color: #595757;
  font-family: "Bodoni Moda", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  font-size: calc(14 * var(--lpSetSize));
  text-align: center;
  line-height: 1.428;
  margin-top: calc(10 * var(--lpSetSize));
  padding: 0 0 calc(82 * var(--lpSetSize));
}


/* .pagetop
----------------------------- */
.feature .pagetop {
  cursor: pointer;
  position: fixed;
  top: calc(399 * var(--lpSetSize));
  right: calc(50% - calc(560 * var(--lpSetSize)) + calc(20 * var(--lpSetSize)));
  width: calc(18 * var(--lpSetSize));
  z-index: 10;
}


/*****************************************************
animation (clip-path + scale版)
*****************************************************/

/* 画像ラッパーの設定（拡大した画像がはみ出さないようにする） */
.feature .imgOuter {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden; 
}
.feature .imgOuter img {
  display: block;
  width: 100%;
  height: auto;
}

/* 基本のフェードイン（下から上へのフワッとした出現） */
.feature .fadeInBlock {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.85s cubic-bezier(0.33, 1, 0.68, 1), transform 1s cubic-bezier(0.33, 1, 0.68, 1);
}

/* シャッターエフェクト用のベース（要素自体は最初から定位置・透明度1にしておく） */
.feature .fadeInBlock.topIn,
.feature .fadeInBlock.bottomIn,
.feature .fadeInBlock.leftIn,
.feature .fadeInBlock.rightIn {
  transform: translateY(0);
  opacity: 1; 
}

/* clip-path の初期状態 */
.feature .fadeInBlock.topIn .imgOuter { clip-path: inset(0 0 100% 0); transition: clip-path 0.85s cubic-bezier(0.645, 0.045, 0.355, 1); }
.feature .fadeInBlock.bottomIn .imgOuter { clip-path: inset(100% 0 0 0); transition: clip-path 0.85s cubic-bezier(0.645, 0.045, 0.355, 1); }
.feature .fadeInBlock.leftIn .imgOuter { clip-path: inset(0 100% 0 0); transition: clip-path 0.85s cubic-bezier(0.645, 0.045, 0.355, 1); }
.feature .fadeInBlock.rightIn .imgOuter { clip-path: inset(0 0 0 100%); transition: clip-path 0.85s cubic-bezier(0.645, 0.045, 0.355, 1); }

/* 画像scale の初期状態（ズームしておく） */
.feature .fadeInBlock.topIn .imgOuter img,
.feature .fadeInBlock.bottomIn .imgOuter img,
.feature .fadeInBlock.leftIn .imgOuter img,
.feature .fadeInBlock.rightIn .imgOuter img {
  transform: scale(1.3);
  transition: transform 1.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* inviewで .view が付与された時の発火状態 */
.feature .fadeInBlock.view {
  opacity: 1;
  transform: translateY(0);
}

.feature .fadeInBlock.topIn.view .imgOuter,
.feature .fadeInBlock.bottomIn.view .imgOuter,
.feature .fadeInBlock.leftIn.view .imgOuter,
.feature .fadeInBlock.rightIn.view .imgOuter {
  clip-path: inset(0);
}

.feature .fadeInBlock.topIn.view .imgOuter img,
.feature .fadeInBlock.bottomIn.view .imgOuter img,
.feature .fadeInBlock.leftIn.view .imgOuter img,
.feature .fadeInBlock.rightIn.view .imgOuter img {
  transform: scale(1);
}

/* テキスト等で fadeInBlock 自身がシャッターになる場合 (h3を追加) */
.feature h3.fadeInBlock.topIn, .feature span.fadeInBlock.topIn, .feature p.fadeInBlock.topIn { clip-path: inset(0 0 100% 0); transition: clip-path 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); }
.feature h3.fadeInBlock.bottomIn, .feature span.fadeInBlock.bottomIn, .feature p.fadeInBlock.bottomIn { clip-path: inset(100% 0 0 0); transition: clip-path 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); }
.feature h3.fadeInBlock.leftIn, .feature span.fadeInBlock.leftIn, .feature p.fadeInBlock.leftIn { clip-path: inset(0 100% 0 0); transition: clip-path 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); }
.feature h3.fadeInBlock.rightIn, .feature span.fadeInBlock.rightIn, .feature p.fadeInBlock.rightIn { clip-path: inset(0 0 0 100%); transition: clip-path 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); }

/* テキストSVGの発火状態 (h3を追加) */
.feature h3.fadeInBlock.view, .feature span.fadeInBlock.view, .feature p.fadeInBlock.view { clip-path: inset(0); }

/* ディレイ用クラスを強制適用（スクロールの時差を吸収するために少し長めに設定） */
.feature .delay01, .feature .delay01 .imgOuter, .feature .delay01 .imgOuter img { transition-delay: 0.6s !important; }
.feature .delay02, .feature .delay02 .imgOuter, .feature .delay02 .imgOuter img { transition-delay: 1.0s !important; }
.feature .delay03, .feature .delay03 .imgOuter, .feature .delay03 .imgOuter img { transition-delay: 1.4s !important; }
.feature .delay04, .feature .delay04 .imgOuter, .feature .delay04 .imgOuter img { transition-delay: 1.8s !important; }


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

@media screen and (min-width: 1400px) {
  :root {
    --lpSetSize: 1px;
  }
  .feature .f_left .f_left__box,
  .feature .f_main .inner {
    width: 560px;
  }
  .feature .pagetop {
    top: calc(392 * var(--lpSetSize));
    right: calc(50% - 560px - -20px);
    width: 18px;
  }
}

.feature {
  background-image: 
    url('../img/pc_bg01.jpg'),
    url('../img/pc_bg02.jpg'),
    url('../img/pc_bg03.jpg'),
    url('../img/pc_bg04.jpg');
  background-size: 
    100% 3000px,
    100% 3000px,
    100% 3000px,
    100% 3000px;
  background-position: 
    right 0 top 0,
    right 0 top 3000px,
    right 0 top 6000px,
    right 0 top 9000px;
  background-repeat: 
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
}