@charset "UTF-8";

.feature {
  --lpSetSize: (100vw / 1400) * 0.6666666;
}
html {
  scroll-behavior:smooth;
}
.l-container {
  width:100%;
}
.feature {
  width:100%;
  font-family: "ryo-gothic-plusn", sans-serif;
  font-weight: 300;
  font-style: normal;
  color: #303030;
}
.feature * {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
  list-style: none;
}
.feature h1,
.feature h2,
.feature h3,
.feature h4,
.feature strong {
  font-weight: normal;
}
.feature img {
  width:100%;
  height:auto;
  vertical-align:top;
  display:block;
}
.feature a { 
  display: block;
  color: inherit;
  text-decoration: none;  
}

/*****************************************************
.feature (PC)
*****************************************************/

/* 共通
----------------------------- */
html { scroll-padding-top: 80px;}
.feature a { transition: opacity 0.3s;}
.feature a:hover { cursor: pointer; opacity: .7;}
/* .feature .sec__img {background: #ffffff;} */
.l-footer { padding-top: 0 !important;}
.pc-footer { margin-top: 0 !important;}

/* .feature（大枠）
----------------------------- */
.feature {
  display: flex;
}

/* .f_left
----------------------------- */
.feature .f_left {
  width: calc(450 * (100vw / 1400));
}
.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);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: url(../img/pc_hero__img.jpg) 0 0 no-repeat;
  background-size: cover;
}
.feature .f_left .f_left__box .f_left__title p {
  width: calc(197.1191 * (100vw / 1400));
  margin-left: calc(53 * (100vw / 1400));
}

/* .f_main
----------------------------- */
.feature .f_main {
  width: calc(500 * (100vw / 1400));
}

/* .f_right
----------------------------- */
.feature .f_right {
  width: calc(450 * (100vw / 1400));
  background: #e8ecef;
}
.f_right__box {
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.feature .f_right .f_right__btn {
  width: calc(250 * (100vw / 1400));
  margin: 0 auto;
}
.feature .f_right .f_right__btn ul {
  display: flex;
  gap: calc(18 * (100vw / 1400));
  flex-direction: column;
}
.feature .f_right .f_right__btn li a {
  border: #6d6d6d calc(1 * (100vw / 1400)) solid;
  background: #ffffff;
  font-size: calc(11 * (100vw / 1400));
  line-height: calc(40 * (100vw / 1400));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(5 * (100vw / 1400));
  position: relative;
}
.feature .f_right .f_right__btn li:nth-of-type(1) img {
  width: calc(37.5293 * (100vw / 1400));
}
.feature .f_right .f_right__btn li:nth-of-type(2) img {
  width: calc(38.1739 * (100vw / 1400));
}
.feature .f_right .f_right__btn li:nth-of-type(3) img {
  width: calc(35.1698 * (100vw / 1400));
}
.feature .f_right .f_right__btn li a::after {
  content: '';
  display: block;
  width: calc(5.7403 * (100vw / 1400));
  height: calc(8.0365 * (100vw / 1400));
  background: url(../img/btn_arrow.svg) 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: calc(5 * (100vw / 1400));
  transform:  translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

/*****************************************************
.feature (PC・SP共通)
*****************************************************/
/* .hero
----------------------------- */
.feature .hero {
  margin-bottom: calc(82 * var(--lpSetSize));
}
.feature .hero h1 {
  width: calc(719.3963 * var(--lpSetSize));
  margin-bottom: calc(46 * var(--lpSetSize));
}
.feature .hero p {
  width: calc(345.5221 * var(--lpSetSize));
  margin-left: calc(64 * var(--lpSetSize));
}

/* .wrap_lead
----------------------------- */
.feature .wrap_lead {
  padding: 0 calc(46 * var(--lpSetSize));
  margin-bottom: calc(188 * var(--lpSetSize));
}
.feature .wrap_lead p {
  text-align: right;
  font-size: calc(24 * var(--lpSetSize));
  line-height: 2.0;
  letter-spacing: 0.200em;
  margin-bottom: 2.0em;
} 

/* .sec
----------------------------- */
/* .sec__credit */
.feature .sec .sec__credit .credit {
  display:flex;
  gap: calc(8 * var(--lpSetSize)) calc(12 * var(--lpSetSize));
  flex-wrap: wrap;
}
.feature .sec .sec__credit .credit li {
  font-family: "thonglor-soi-4-nr", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(19 * var(--lpSetSize));
  line-height: 1.0;
}
.feature .sec .sec__credit .credit li {
  position: relative;
}
.feature .sec .sec__credit .credit li,
.feature .sec .sec__credit .credit a {
  display: flex;
}
.feature .sec .sec__credit .credit a .price {
  padding-left:calc(10 * var(--lpSetSize));
}

/* .sec01
---------------------------- */
.feature .sec01 h2 {
  margin-bottom: calc(56 * var(--lpSetSize));
}
.feature .img01 {
  margin-bottom: calc(138 * var(--lpSetSize));
}
.feature .img01 h3 {
  width: calc(683.6171 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .img01 .sec__credit .credit {
  margin: calc(-10 * var(--lpSetSize)) 0 0 calc(60 * var(--lpSetSize));
}
.feature .img02 {
  width: calc(560 * var(--lpSetSize));
  margin-bottom: calc(106 * var(--lpSetSize));
}
.feature .img03 {
  position: relative;
  margin-bottom: calc(220 * var(--lpSetSize));
}
.feature .img03 p {
  pointer-events: none;
  width: calc(57.0971 * var(--lpSetSize));
  position: absolute;
  top: calc(-30 * var(--lpSetSize));
  left: calc(598 * var(--lpSetSize));
  z-index: 1;
}
.feature .img03 figure {
  position: relative;
  z-index: 0;
}
.feature .img03 .sec__credit .credit {
  justify-content: center;
  width: calc(600 * var(--lpSetSize));
  margin: calc(36 * var(--lpSetSize)) auto 0;
}
.feature .img04 {
  margin-bottom: calc(126 * var(--lpSetSize));
}
.feature .img04 h3 {
  width: calc(681.5362 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .img04 .sec__credit .credit {
  margin: calc(-20 * var(--lpSetSize)) 0 0  calc(50 * var(--lpSetSize));
}
.feature .img05 {
  overflow: hidden;
  margin-bottom: calc(206 * var(--lpSetSize));
}
.feature .img05 img {
  width: calc(778 * var(--lpSetSize));
}
.feature .img06 {
  position: relative;
  width: calc(640 * var(--lpSetSize));
  margin: 0 auto calc(234 * var(--lpSetSize));
}
.feature .img06 p {
  pointer-events: none;
  width: calc(113.9044 * var(--lpSetSize));
  position: absolute;
  top: calc(-60 * var(--lpSetSize));
  left: calc(44 * var(--lpSetSize));
  z-index: 1;
}
.feature .img06 .sec__slide img {
  width: calc(640 * var(--lpSetSize));
}
.feature .img06 .sec__credit .credit {
  justify-content: center;
  margin: calc(30 * var(--lpSetSize)) 0 0 0;
}


/* .sec02
---------------------------- */
.feature .sec02 h2 {
  margin-bottom: calc(56 * var(--lpSetSize));
}
.feature .img07 {
  width: calc(681.5362 * var(--lpSetSize));
  margin: 0 0 calc(148 * var(--lpSetSize)) calc(50 * var(--lpSetSize));
}
.feature .img07 .sec__credit .credit {
  justify-content: end;
  margin: calc(-22 * var(--lpSetSize)) calc(28 * var(--lpSetSize)) 0 0;
}
.feature .img08 {
  width: calc(602.9747 * var(--lpSetSize));
  margin: 0 auto calc(264 * var(--lpSetSize));
}
.feature .img08 .sec__img {
  margin-bottom: calc(12 * var(--lpSetSize));
}
.feature .img08 .sec__credit .credit {
  justify-content: center;
  margin: calc(32 * var(--lpSetSize)) 0 0 0;
}
.feature .img09 {
  width: calc(626.708 * var(--lpSetSize));
  margin: 0 auto calc(84 * var(--lpSetSize));
}
.feature .img09 .sec__credit .credit {
  justify-content: center;
  margin: calc(12 * var(--lpSetSize)) 0 0 0;
}
.feature .img10 {
  position: relative;
  margin-bottom: calc(270 * var(--lpSetSize));
}
.feature .img10 > figure {
  width: calc(683.6868 * var(--lpSetSize));
  margin: 0 auto calc(196 * var(--lpSetSize));
}
.feature .img10 p {
  pointer-events: none;
  width: calc(700.5932 * var(--lpSetSize));
  position: absolute;
  top: calc(-52 * var(--lpSetSize));
  left: calc(28 * var(--lpSetSize));
  z-index: 1;
}
.feature .img10 .sec__slide figure {
  margin: 0 calc(6 * var(--lpSetSize));
}
.feature .img10 .sec__slide img {
  width: calc(450 * var(--lpSetSize));
}
.feature .img10 .sec__credit .credit {
  justify-content: center;
  margin: calc(40 * var(--lpSetSize)) 0 0 0;
}
.feature .img11 {
  width: calc(621.2334 * var(--lpSetSize));
  margin: 0 auto calc(150 * var(--lpSetSize));
}
.feature .img11 .sec__credit .credit {
  justify-content: center;
}
.feature .img12 {
  margin-bottom: calc(236 * var(--lpSetSize));
}
.feature .img12 .sec__slide img {
  width: calc(750 * var(--lpSetSize));
}
.feature .img12 .sec__credit .credit {
  justify-content: center;
  width: calc(600 * var(--lpSetSize));
  margin: calc(30 * var(--lpSetSize)) auto 0;
}

/* .sec03
---------------------------- */
.feature .sec03 {
  margin-bottom: calc(124 * var(--lpSetSize));
}
.feature .sec03 h2 {
  margin-bottom: calc(60 * var(--lpSetSize));
}
.feature .img13 {
  width: calc(681.5362 * var(--lpSetSize));
  margin: 0 0 calc(140 * var(--lpSetSize)) calc(26 * var(--lpSetSize));
}
.feature .img13 .sec__credit .credit {
  justify-content: end;
  margin: calc(-20 * var(--lpSetSize))  calc(10 * var(--lpSetSize)) 0 0;
}
.feature .img14 {
  width: calc(570 * var(--lpSetSize));
  margin-bottom: calc(110 * var(--lpSetSize));
}
.feature .img14 .sec__slide img {
  width: calc(570 * var(--lpSetSize));
}
.feature .img15 {
  width: calc(700 * var(--lpSetSize));
  margin-bottom: calc(210 * var(--lpSetSize));
  margin-left: calc(50 * var(--lpSetSize));
}
.feature .img15 .sec__credit .credit {
  margin: calc(36 * var(--lpSetSize)) 0 0 calc(4 * var(--lpSetSize));
}
.feature .img16 {
  width: calc(680 * var(--lpSetSize));
  margin: 0 0 calc(142 * var(--lpSetSize)) calc(42 * var(--lpSetSize));
}
.feature .img16 .sec__credit .credit {
  justify-content: end;
  margin: calc(-16 * var(--lpSetSize)) calc(20 * var(--lpSetSize)) 0 0;
}
.feature .img17 {
  width: calc(560 * var(--lpSetSize));
  margin: 0 auto calc(105 * var(--lpSetSize));
}
.feature .img17 .sec__slide img {
  width: calc(560 * var(--lpSetSize));
}
.feature .img18 {
  margin-bottom: calc(260 * var(--lpSetSize));
}
.feature .img18 .sec__credit .credit {
  justify-content: center;
  width: calc(600 * var(--lpSetSize));
  margin: calc(38 * var(--lpSetSize)) auto 0;
}
.feature .img19 {
  width: calc(560 * var(--lpSetSize));
  margin: 0 auto calc(100 * var(--lpSetSize));
}
.feature .img19 .sec__credit .credit {
  justify-content: center;
  margin: calc(12 * var(--lpSetSize)) 0 0 0;
}
.feature .img20 {
  position: relative;
  margin-bottom: calc(106 * var(--lpSetSize));
}
.feature .img20 > figure {
  width: calc(700 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .img20 p {
  pointer-events: none;
  width: calc(364.0944 * var(--lpSetSize));
  position: absolute;
  top: calc(-34 * var(--lpSetSize));
  right: calc(10 * var(--lpSetSize));
  z-index: 1;
}
.feature .img21 {
  width: calc(560 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .img21 .sec__credit .credit {
  justify-content: center;
  margin: calc(34 * var(--lpSetSize)) 0 0 0;
}

/* .sec_bottom
----------------------------- */
.feature .sec_bottom {
  padding: calc(120 * var(--lpSetSize)) 0;
}
.feature .sec_bottom .sec__btn {
  width: calc(536 * var(--lpSetSize));
  margin: 0 auto calc(174 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn ul {
  display: flex;
  gap: calc(38 * var(--lpSetSize));
  flex-direction: column;
}
.feature .sec_bottom .sec__btn li a {
  border: #6d6d6d calc(1 * var(--lpSetSize)) solid;
  background: #ffffff;
  font-size: calc(24 * var(--lpSetSize));
  line-height: calc(88 * var(--lpSetSize));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--lpSetSize));
  position: relative;
}
.feature .sec_bottom .sec__btn li:nth-of-type(1) img {
  width: calc(81.081 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn li:nth-of-type(2) img {
  width: calc(82.4775 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn li:nth-of-type(3) img {
  width: calc(75.976 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn li a::after {
  content: '';
  display: block;
  width: calc(12.3992 * var(--lpSetSize));
  height: calc(17.3588 * var(--lpSetSize));
  background: url(../img/btn_arrow.svg) 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: calc(10 * var(--lpSetSize));
  transform:  translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.feature .sec_bottom .staff {
  text-align: center;
  font-family: "thonglor-soi-4-nr", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(22 * var(--lpSetSize));
  line-height:1.38;
}
.feature .sec_bottom .staff dt {
  margin-bottom:calc(12 * var(--lpSetSize));
}