@charset "UTF-8";

:root {
  --lpSetSize: (100vw / 1400) * 0.6;
  --lpSetTxt01:#2d2d2d;
  --lpSetTxt02:#e09132;
  --lpSetBg01:#fffaf3;
  --lpSetBg02:#ffffff;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top: 80px;
}
.l-container {
  width:100%;
}
.feature {
  width:100%;
  font-feature-settings:"palt";
  font-family:"hiragino-kaku-gothic-pron", "ryo-gothic-plusn", "yu-gothic-pr6n",'游ゴシック体', 'YuGothic', '游ゴシック Medium', 'Yu Gothic', メイリオ, sans-serif;
  font-weight:300;
  font-style:normal;
  color:var(--lpSetTxt01);
  background:var(--lpSetBg01);
}
.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 / .f_right
----------------------------- */
.feature .f_left,
.feature .f_right {
  width: calc(50% - (225 * (100vw / 1400)));
  text-align: center;
}
.feature .f_left .f_left__box,
.feature .f_right .f_right__box {
  position: relative;
  height: 100%;
}
.feature .f_left .f_left__box .f_left__nav,
.feature .f_right .f_right__btn {
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  margin-inline: auto;
  width: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.feature .f_left .f_left__box .f_left__nav ul {
  display:flex;
  gap:calc(8* (100vw / 1400));
  width:calc(376 * (100vw / 1400));
}
.feature .f_left .f_left__box .f_left__nav li {
  border: 1px solid var(--lpSetTxt02);
  width:calc(120* (100vw / 1400));
}
.feature .f_left .f_left__box .f_left__nav li a {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:calc(10 * (100vw / 1400)) 0 calc(6 * (100vw / 1400));
}
.feature .f_left .f_left__box .f_left__nav li .img {
  width:calc(80 * (100vw / 1400));
}

.feature .f_right .f_right__btn a {
  font-family: "ivyepic", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size:calc(26 * (100vw / 1400));
  line-height:calc(60 * (100vw / 1400));
  letter-spacing: 0.040em;
  color: var(--lpSetTxt02);
  position: relative;
  width: fit-content;
  margin: 0 auto;
  padding: 0 calc(64 * (100vw / 1400));
}
.feature .f_right .f_right__btn a::after {
  content: '';
  display: block;
  width: calc(8 * (100vw / 1400));
  height: calc(20 * (100vw / 1400));
  background: url(../img/icon_arrow02.svg) 0 0 no-repeat;
  position: absolute;
  right: calc(36 * (100vw / 1400));
  top: calc(22 * (100vw / 1400));
}

/* .f_main
----------------------------- */
.feature .f_main {
  width: calc(450 * (100vw / 1400));
  border-left: 1px solid var(--lpSetTxt02);
  border-right: 1px solid var(--lpSetTxt02);
}


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

/* .hero
----------------------------- */
.feature .hero {
  position:sticky;
  top:0;
  z-index:2;
  margin-bottom: calc(200 * var(--lpSetSize));
  width: 100%;
}
.comingsoon {
  padding-bottom:calc(100 * var(--lpSetSize));
}
.feature .hero__lead {
  margin-top:calc(-10 * var(--lpSetSize));
  padding-bottom:calc(100 * var(--lpSetSize));
}
.feature .hero__lead h2 {
  width:calc(630 * var(--lpSetSize));
  margin:0 auto calc(70 * var(--lpSetSize));
}
.feature .hero__lead p {
  text-align:center;
  font-size:calc(24 * var(--lpSetSize));
  letter-spacing:0.15em;
  line-height:1.75;
  margin-bottom:calc(90 * var(--lpSetSize));
}
.feature .pagenav {
  padding:0 calc(30 * var(--lpSetSize));
}
.feature .pagenav p {
  text-align:center;
  font-weight:600;
  font-size:calc(32 * var(--lpSetSize));
  line-height:calc(146 * var(--lpSetSize));
  letter-spacing:0.040em;
  color:var(--lpSetTxt02);
  border:calc(2* var(--lpSetSize)) solid var(--lpSetTxt02);
  margin-bottom:calc(30* var(--lpSetSize));
  position: relative;
}
.feature .pagenav p::after {
  content: '';
  display: block;
  width: calc(10 * var(--lpSetSize));
  height: calc(20 * var(--lpSetSize));
  background: url(../img/icon_arrow02.svg) 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  right: calc(30 * var(--lpSetSize));
  top: calc(64 * var(--lpSetSize));
}

.feature .pagenav ul {
  display:flex;
  gap:calc(16* var(--lpSetSize));
}
.feature .pagenav li {
  border:calc(2* var(--lpSetSize)) solid var(--lpSetTxt02);
  width:calc(220* var(--lpSetSize));
}
.feature .pagenav li a {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:calc(10* var(--lpSetSize)); 
}
.feature .pagenav li .img {
  width:calc(130 * var(--lpSetSize));
}


/* .sec
----------------------------- */
.feature .sec {
  position:sticky;
  top:0;
  z-index:2;
  background:var(--lpSetBg01);
  padding:calc(160 * var(--lpSetSize)) 0 0 0;
}
.feature #straight h3 {
  width:calc(357.1826 * var(--lpSetSize));
  margin:0 0 calc(14 * var(--lpSetSize)) calc(178 * var(--lpSetSize));
}
.feature #wave h3 {
  width:calc(278.6681 * var(--lpSetSize));
  margin:0 0 calc(14 * var(--lpSetSize)) calc(216 * var(--lpSetSize));
}
.feature #natural h3 {
  width:calc(336.877 * var(--lpSetSize));
  margin:0 0 calc(14 * var(--lpSetSize)) calc(188 * var(--lpSetSize));
}
.feature .sec .img_main {
  background:url(../img/bg_sec.svg) 0 0 no-repeat;
  background-size:100% auto;
}
.feature .sec .img_main figure {
  width:calc(310 * var(--lpSetSize));
  margin:0 auto calc(30 * var(--lpSetSize));
  padding:calc(40 * var(--lpSetSize)) 0 0 0;
}
.feature .sec .img_main .item_name {
  text-align:center;
  font-weight:600;
  font-size:calc(28 * var(--lpSetSize));
  line-height:1.75;
  letter-spacing:0.15em;
  color:var(--lpSetTxt02);
}
.feature .sec .img_main .item_price {
  text-align:center;
  font-weight:600;
  font-size:calc(28 * var(--lpSetSize));
  line-height:1.75;
  letter-spacing:0.040em;
  color:var(--lpSetTxt02);
  margin-bottom:calc(20 * var(--lpSetSize));
}
.feature .sec .img_main .item_detail {
  text-align:center;
  font-weight:300;
  font-size:calc(24 * var(--lpSetSize));
  line-height:1.75;
  letter-spacing:0.16em;
  color:var(--lpSetTxt01);
  padding-bottom:calc(90 * var(--lpSetSize));
}
.feature .sec .type {
  background:var(--lpSetBg02);
  padding-bottom:calc(90 * var(--lpSetSize));
}
.feature .sec .type h4 {
  text-align:center;
  font-weight:600;
  font-size:calc(28 * var(--lpSetSize));
  letter-spacing:0.080em;
  line-height:calc(34 * var(--lpSetSize));
  color:var(--lpSetTxt01);
  position:relative;
  width:fit-content;
  margin:0 auto calc(30* var(--lpSetSize));
  padding:0 calc(62 * var(--lpSetSize));
}
.feature .sec .type h4::before {
  content:'';
  display:block;
  width:calc(42 * var(--lpSetSize));
  height:calc(34 * var(--lpSetSize));
  background:url(../img/icon_check.svg) 0 0 no-repeat;
  position:absolute;
  left:0;
  top:0;
}
.feature .sec .type p {
  font-weight:300;
  font-size:calc(24 * var(--lpSetSize));
  line-height:1.75;
  letter-spacing:0.14em;
  color:var(--lpSetTxt01);
  text-align:justify;
  padding:0 calc(60 * var(--lpSetSize));
}
.feature .sec .point {
  background:var(--lpSetBg01);
}
.feature .sec .point ul {
  display:flex;
  width:calc(630 * var(--lpSetSize));
  margin:calc(50 * var(--lpSetSize)) auto calc(50 * var(--lpSetSize));
  justify-content:space-between;
}
.feature .sec .point ul li {
  width:calc(290 * var(--lpSetSize));
  font-weight:300;
  font-size:calc(20 * var(--lpSetSize));
  line-height:1.8;
  letter-spacing:0.16em;
  text-align:justify;
}
.feature #wave .point ul:last-child li {
  width:calc(180 * var(--lpSetSize));
}
.feature .sec .point ul li strong {
  color:var(--lpSetTxt02);
  display:block;
  font-family:"ivyepic", sans-serif;
  font-weight:600;
  font-style:normal;
  font-size:calc(24 * var(--lpSetSize));
  padding-bottom:calc(6 * var(--lpSetSize));  
}
.feature .sec .point figure {
  width:calc(450 * var(--lpSetSize));
  margin:0 auto;
}


.feature .sec .text {
  position:absolute;
}
.feature .sec__credit .credit {
  display:flex;
  flex-wrap:wrap;
}
.feature .sec__credit .credit li {
  font-family: "ivyepic", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:calc(24 * var(--lpSetSize));
  letter-spacing:0.04em;
  line-height: 1.75;
}

.feature #straight .sec__img {
  background: var(--lpSetBg02);
  padding-bottom: calc(160 * var(--lpSetSize));
}
.feature #wave .sec__img {
  background: var(--lpSetBg02);
  padding-bottom: calc(160 * var(--lpSetSize));
}
.feature #natural .sec__img {
  background: var(--lpSetBg02);
}

.feature .img01_1 {
  padding:calc(104 * var(--lpSetSize)) 0 0 0;
  position: relative;
}
.feature .img01_1 figure {
  width:calc(610 * var(--lpSetSize));
}
.feature .img01_1 .text {
  width:calc(260 * var(--lpSetSize));
  top:calc(180 * var(--lpSetSize));
  right:calc(28 * var(--lpSetSize));
}

.feature .img01_2 {
  margin:calc(-60 * var(--lpSetSize)) 0 0 0;
  display:flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  justify-content: space-between;
}
.feature .img01_2 figure {
  width:calc(490 * var(--lpSetSize));
}
.feature .img01_2 .sec__credit .credit {
  flex-direction: column;
  padding-left:calc(30 * var(--lpSetSize));
}


.feature .img01_3 {
  padding:calc(100 * var(--lpSetSize)) 0 calc(50 * var(--lpSetSize)) 0;
  position: relative;  
}
.feature .img01_3 figure {
  width:calc(570 * var(--lpSetSize));
}
.feature .img01_3 .text {
  width:calc(305.29 * var(--lpSetSize));
  top:calc(180 * var(--lpSetSize));
  right:calc(28 * var(--lpSetSize));
}

.feature .img01_4 {
  display:flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  justify-content: space-between;
}
.feature .img01_4 figure {
  width:calc(510 * var(--lpSetSize));
}
.feature .img01_4 .sec__credit .credit {
  flex-direction: column;
  padding-left:calc(30 * var(--lpSetSize));  
}

.feature .img02_1 {
  padding:calc(104 * var(--lpSetSize)) 0 0 0;
  position: relative;
}
.feature .img02_1 figure {
  margin: 0 calc(30 * var(--lpSetSize));
}
.feature .img02_1 .text {
  width:calc(260 * var(--lpSetSize));
  top: calc(142 * var(--lpSetSize));
  right: calc(56 * var(--lpSetSize));
}
.feature .img02_1 .sec__credit .credit {
  width: calc(400 * var(--lpSetSize));
  padding: calc(20 * var(--lpSetSize)) 0 0 calc(30 * var(--lpSetSize));
  gap:0 calc(20 * var(--lpSetSize));
}

.feature .img02_2 {
  padding:calc(92 * var(--lpSetSize)) 0 0 0;
  display: flex;
  justify-content: flex-end;
}
.feature .img02_2 figure {
  width:calc(570 * var(--lpSetSize));
}

.feature .img02_3 {
  padding:calc(50 * var(--lpSetSize)) 0 0 0;
  position: relative;  
}
.feature .img02_3 figure {
  width:calc(650 * var(--lpSetSize));
}
.feature .img02_3 .text {
  width:calc(300.3682 * var(--lpSetSize));
  top:calc(654 * var(--lpSetSize));
  right:calc(28 * var(--lpSetSize));
}
.feature .img02_3 .sec__credit .credit {
  width: calc(700 * var(--lpSetSize));
  padding: calc(20 * var(--lpSetSize)) 0 0 calc(30 * var(--lpSetSize));
  gap:0 calc(20 * var(--lpSetSize));  
}


.feature .img03_1 {
  padding:calc(104 * var(--lpSetSize)) 0 0 0;
  position: relative;  
}
.feature .img03_1 figure {
  width:calc(670 * var(--lpSetSize));
}
.feature .img03_1 .text {
  width: calc(255.0781 * var(--lpSetSize));
  top:calc(180 * var(--lpSetSize));
  right:calc(28 * var(--lpSetSize));
}


.feature .img03_2 {
  margin:calc(-60 * var(--lpSetSize)) 0 0 0;
  display:flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  justify-content: space-between;
}
.feature .img03_2 figure {
  width:calc(490 * var(--lpSetSize));
}
.feature .img03_2 .sec__credit .credit {
  flex-direction: column;
  padding-left:calc(30 * var(--lpSetSize));  
}

.feature .img03_3 {
  padding:calc(100 * var(--lpSetSize)) 0 0 0;
  position: relative;
  display:flex;
  flex-direction: row-reverse;
}
.feature .img03_3 figure {
  width: calc(670 * var(--lpSetSize));
}
.feature .img03_3 .text {
  width: calc(300.3682 * var(--lpSetSize));
  top: calc(140 * var(--lpSetSize));
  right:calc(28 * var(--lpSetSize));
}

.feature .img03_4 {
  padding:calc(50 * var(--lpSetSize)) 0 calc(160 * var(--lpSetSize)) 0;
  background:linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #fffaf3 55%, #fffaf3 100%);
}
.feature .img03_4 figure {
  width:calc(590 * var(--lpSetSize));
}
.feature .img03_4 .sec__credit .credit {
  width: calc(700 * var(--lpSetSize));
  padding: calc(20 * var(--lpSetSize)) 0 0 calc(30 * var(--lpSetSize));
  gap:0 calc(20 * var(--lpSetSize));
}


/* .sec_bottom
----------------------------- */
.feature .sec_bottom {
  background: var(--lpSetBg01);
  padding-bottom:calc(150 * var(--lpSetSize));
}
.feature .sec_bottom .mafumegu {
  padding:calc(50 * var(--lpSetSize)) 0 calc(50 * var(--lpSetSize)) 0;
  margin-bottom:calc(150 * var(--lpSetSize));
  background: var(--lpSetBg02);
}
.feature .sec_bottom .mafumegu figure {
  margin: 0 auto;
  width:fit-content;
  text-align:center;
  font-weight:600;
  font-size:calc(28 * var(--lpSetSize));
  line-height:1.8;
  letter-spacing:0.070em;
  margin-bottom:calc(20 * var(--lpSetSize));  
}
.feature .sec_bottom .mafumegu figure img {
  width: calc(190 * var(--lpSetSize));
  margin-bottom:calc(30 * var(--lpSetSize));
}
.feature .sec_bottom .mafumegu p {
  padding:0 calc(60 * var(--lpSetSize));
  font-weight:300;
  font-size:calc(24 * var(--lpSetSize));
  line-height:1.75;
  letter-spacing: 0.12em;
  text-align: justify;
  margin-bottom:calc(40 * var(--lpSetSize));
}
.feature .sec_bottom .deco {
  position: relative;
  margin-bottom: calc(20 * var(--lpSetSize));
}
.feature .sec_bottom .text {
  position:absolute;
  top:calc(10 * var(--lpSetSize));
  left:calc(20 * var(--lpSetSize));
  width: calc(313.4438 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn {
  font-family: "ivyepic", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size:calc(44 * var(--lpSetSize));
  line-height:calc(100 * var(--lpSetSize));
  letter-spacing: 0.040em;
  color: var(--lpSetTxt02);
  position: relative;
  width: fit-content;
  margin: 0 auto;
  padding: 0 calc(100 * var(--lpSetSize)) 0 calc(64 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn::after {
  content: '';
  display: block;
  width:calc(12 * var(--lpSetSize));
  height:calc(28 * var(--lpSetSize));
  background: url(../img/icon_arrow02.svg) 0 0 no-repeat;
  position: absolute;
  right: calc(70 * var(--lpSetSize));
  top: calc(40 * var(--lpSetSize));
}

/*****************************************************
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;
}


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

@media screen and (min-width: 1400px) {  
  :root {
    --lpSetSize: 1px * 0.6;
  }
  .feature .f_left,
  .feature .f_right {
    width: calc(50% - 225px);
  }  
  .feature .f_left .f_left__box .f_left__nav ul {
    display:flex;
    gap:8px;
    width:376px;
  }
  .feature .f_left .f_left__box .f_left__nav li a {
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:10px 0 6px;
  }
  .feature .f_left .f_left__box .f_left__nav li .img {
    width:80px;
  }
  .feature .f_right .f_right__btn a {
    font-size:26px;
    line-height:60px;
    padding: 0 64px;
  }
  .feature .f_right .f_right__btn a::after {
    content: '';
    display: block;
    width: 8px;
    height: 20px;
    right: 36px;
    top: 22px;
  }
  .feature .f_main {
    width: 450px;
  }
}