@charset "UTF-8";

:root {
  --lpSetSize: (100vw / 1400) * 0.653333333333333;
  --lpBgColor01: #fef9db;
  --lpBgColor02: #ffffff;
  --lpColor01: #1e1e1e;
  --lpColor02: #70b5e0;
}
html {
  scroll-behavior: smooth;
}
.area-header {
  width: 100%;
}
.feature {
  width: 100%;
  font-feature-settings: "palt";
  font-family: 游ゴシック体, 游ゴシック Medium, Yu Gothic Medium, Yu Gothic, YuGothic, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  font-weight: normal;
  font-style: normal;
  color: var(--lpColor01);
  background-color: var(--lpBgColor01);
}
.feature * {
  margin: 0;
  padding: 0;
  line-height: 1;
  box-sizing: border-box;
}
.feature img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.feature a {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.feature li {
  list-style: none;
}

/* .feature wrap (PC ONLY)
*******************************/
.feature {
  display: flex;
}

/* .f_left / .f_right
----------------------------- */
.feature .f_left,
.feature .f_right {
  width: calc(50% - (245 * (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__title,
.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__title h2 {
  width: calc(300 * (100vw / 1400));
}
.feature .f_right .f_right__btn a {
  color: var(--lpColor02);
  line-height: calc(48 * (100vw / 1400));
  width: calc(220 * (100vw / 1400));
  border: 2px solid var(--lpColor02);
  border-radius: calc(24 * (100vw / 1400));
  font-family: "din-2014", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: calc(23 * (100vw / 1400));
  letter-spacing:0.01em;
}


/* .f_main
----------------------------- */
.feature .f_main {
  width: calc(490 * (100vw / 1400));
  background: var(--lpBgColor02);  
}


/* .hero
----------------------------- */
.feature .hero {
  text-align: center;
  margin-bottom:calc(70 * var(--lpSetSize));	
}
.feature .hero .hero__img {
  margin-bottom: calc(101 * var(--lpSetSize));
}
.feature .hero h1 {
  font-size: calc(40.13 * var(--lpSetSize));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: var(--lpColor02);
  text-align: center;
  margin: 0 0 calc(38 * var(--lpSetSize)) 0;
  padding: 0 0 calc(24 * var(--lpSetSize)) 0;	
}
.feature .hero h1 strong {
  position:relative;
  padding-bottom: calc(24 * var(--lpSetSize));
}
.feature .hero h1 strong::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: calc(8 * var(--lpSetSize));
  width: calc(220 * var(--lpSetSize));
  height:calc(18 * var(--lpSetSize));
  background: url(../img/wave.svg) 0 0 no-repeat;
  background-size: calc(220 * var(--lpSetSize)) auto;
}
.feature .hero h1 strong .en {
  font-family: "din-2014", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: calc(75.25 * var(--lpSetSize));
  letter-spacing: 0;
  padding: 0 0 0 calc(12 * var(--lpSetSize));
}
.feature .hero h1 strong .ja {
  font-size: calc(46.15 * var(--lpSetSize));
  letter-spacing: 0.040em;
}
.feature .hero h1 strong sup {
  font-size: calc(15.05 * var(--lpSetSize));
  letter-spacing: 0;
  font-size: calc(15.05 * var(--lpSetSize));
  top: -1.6em;
}
.feature .hero .lead {
  font-size: calc(27 * var(--lpSetSize));
  font-weight: 500;
  line-height: 2.0;
  letter-spacing: 0.025em;
  margin-bottom:calc(36 * var(--lpSetSize));
}
.feature .hero .lead h2 {
  display: inline;
  font-size: calc(27 * var(--lpSetSize));
  font-weight: 500;
}
.feature .hero .lead sup {
  font-size: calc(15 * var(--lpSetSize));
}
.feature .hero .note {
  font-size: calc(16 * var(--lpSetSize));
  font-weight: 500;
  line-height: 2.0;
  letter-spacing: 0.040em;  
  color: var(--lpColor02);
}


/* .sec__about
----------------------------- */
.feature .sec__about {
  margin-bottom: calc(82 * var(--lpSetSize));
}
.feature .sec__about .inner {
  width: calc(680 * var(--lpSetSize));
  margin: 0 auto;
  padding: calc(34 * var(--lpSetSize)) calc(65 * var(--lpSetSize));
  background: #fefae1;
}
.feature .sec__about h2 {
  color: var(--lpColor02);
  font-size: calc(30 * var(--lpSetSize));
  font-weight: 700;
  line-height: 2.0;
  letter-spacing: 0.050em;
  text-align: center;
  margin-bottom: calc(8 * var(--lpSetSize));	
}
.feature .sec__about p {
  font-size: calc(22 * var(--lpSetSize));
  font-weight: 500;
  line-height: 2.0;
  letter-spacing: 0.042em;
}


/* .sec__brand
----------------------------- */
.feature .sec__brand {
  margin: 0 auto calc(124 * var(--lpSetSize));
}
.feature .sec__brand .btn_brand {
  width: calc(230 * var(--lpSetSize));
  text-align: center;
  margin: 0 auto calc(40 * var(--lpSetSize));
}
.feature .sec__brand .btn_brand span {
  border: calc(2 * var(--lpSetSize)) solid #808080;
  border-radius: calc(26 * var(--lpSetSize));
  color: #808080;
  font-family: "din-2014", sans-serif;
  font-style: normal;
  font-size: calc(28 * var(--lpSetSize));
  font-weight: 700;
  line-height: calc(52 * var(--lpSetSize));
  letter-spacing: 0.010em;
  display: block;  
}
.feature .sec__brand .ttl_brand {
  color: #808080;  
  font-family: "din-2014", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: calc(24 * var(--lpSetSize));
  line-height: calc(29 * var(--lpSetSize));
  letter-spacing: 0.04em;  
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	margin: 0 auto calc(30 * var(--lpSetSize));
}
.feature .sec__brand .ttl_brand::before,
.feature .sec__brand .ttl_brand::after {
  content: '';
  flex-grow: 1;
  width: calc(42 * var(--lpSetSize));
  height: calc(2 * var(--lpSetSize));
  background: #808080;
  margin:0 1em;
}
.feature .sec__brand .brandlist {
  margin: 0 auto;
  width: calc(650 * var(--lpSetSize));
  display: flex;
  gap: calc(22 * var(--lpSetSize)) calc(40 * var(--lpSetSize));
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.feature .sec__brand .brandlist h3 {
  min-height: calc(42 * var(--lpSetSize));
  display:flex;
  align-items: center;
}
.feature .sec__brand .brandlist h3 a {
  width: 100%;
}
.feature .sec__brand .brandlist .SND {
  width: calc(125.9098 * var(--lpSetSize));
}
.feature .sec__brand .brandlist .FID {
  width: calc(193.165 * var(--lpSetSize));
}
.feature .sec__brand .brandlist .LBW {
  width: calc(189.5878 * var(--lpSetSize));
}
.feature .sec__brand .brandlist .MOW {
  width: calc(163.3556 * var(--lpSetSize));
}
.feature .sec__brand .brandlist .FUR {
  width: calc(91.813 * var(--lpSetSize));
}
.feature .sec__brand .brandlist .EEM {
  width: calc(103.8507 * var(--lpSetSize));
}
.feature .sec__brand .brandlist .CFD {
  width: calc(149.047 * var(--lpSetSize));
}
.feature .sec__brand .brandlist .SNH {
  width: calc(200 * var(--lpSetSize));
}
.feature .sec__brand .brandlist .MIR {
  width: calc(162.1533 * var(--lpSetSize));
}
.feature .sec__brand .brandlist .CKT {
  width: calc(215 * var(--lpSetSize));
}
.feature .sec__brand .brandlist .MUC {
  width: calc(128.4808 * var(--lpSetSize));
}
.feature .sec__brand .brandlist .SSM {
  width: calc(98.3385 * var(--lpSetSize));
}
.feature .sec__brand .brandlist .biople {
  width: calc(90 * var(--lpSetSize));
}
.feature .sec__brand .brandlist .JAK {
  width: calc(195 * var(--lpSetSize));
}
.feature .sec__brand .brandlist .SRO {
  width: calc(180 * var(--lpSetSize));
}
.feature .sec__brand .brandlist .NUL {
  width: calc(60 * var(--lpSetSize));
}


/* .sec__start
----------------------------- */
.feature .sec__start {
  text-align: center;
  padding: 0 0 calc(76 * var(--lpSetSize)) 0;
}
.feature .sec__start .en {
  font-family: "din-2014", sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.020em;
}
.feature .sec__start h2 {
  width: calc(550 * var(--lpSetSize));
  margin: 0 auto calc(32 * var(--lpSetSize));
  padding: calc(2 * var(--lpSetSize)) 0 0 0;
  background: var(--lpColor02);
  font-size: calc(26 * var(--lpSetSize));
  font-weight: 700;
  color: var(--lpBgColor02);
  line-height: calc(50 * var(--lpSetSize));
  letter-spacing: 0.020em;
}
.feature .sec__start h2 .en {
  font-size: calc(27 * var(--lpSetSize));
}
.feature .sec__start .date {
  font-size: calc(44 * var(--lpSetSize));
  color: var(--lpColor02);
  line-height: 1.25;
  margin: 0 0 calc(30 * var(--lpSetSize)) 0;	
}
.feature .sec__start .date small {
  font-size: calc(40 * var(--lpSetSize));
}
.feature .sec__start .date small span {
  font-size: calc(38 * var(--lpSetSize));
}
.feature .sec__start .note {
  font-size: calc(16 * var(--lpSetSize));
  line-height: 2.0;  
  letter-spacing: 0.040em;
  margin: 0 0 calc(14 * var(--lpSetSize)) 0;	
}


/* .sec__description
----------------------------- */
.feature .sec__description {
  background: var(--lpBgColor01);
  padding: calc(60 * var(--lpSetSize)) 0;
  overflow: hidden;
}
.feature .sec__description .cont_wrap {
  display: flex;
  height: calc(880 * var(--lpSetSize));	
}
.feature .sec__description .cont {
  width: calc(670 * var(--lpSetSize));
  margin: 0 calc(40 * var(--lpSetSize));
  padding: calc(80 * var(--lpSetSize)) calc(60 * var(--lpSetSize)) 0;
  height: calc(880 * var(--lpSetSize));
  background: var(--lpBgColor02);
  border-radius: calc(40 * var(--lpSetSize));
}
.feature .sec__description .cont figure {
  margin: 0 auto calc(40 * var(--lpSetSize));
}
.feature .sec__description .cont p {
  font-size: calc(26 * var(--lpSetSize));
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.025em;
}
.feature .sec__description .cont p.note {
  font-size: calc(16 * var(--lpSetSize));
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.030em;
}
.feature .sec__description .cont01 {
  text-align: center;
  padding: calc(69 * var(--lpSetSize)) 0 0 0;
}
.feature .sec__description .cont01 figure {
  width: calc(489.2232 * var(--lpSetSize));
  margin: 0 0 calc(52 * var(--lpSetSize)) calc(74 * var(--lpSetSize));
}
.feature .sec__description .cont02 figure {
  width: calc(464.8926 * var(--lpSetSize));
}
.feature .sec__description .cont03 figure {
  width: calc(464.8926 * var(--lpSetSize));	
}
.feature .sec__description .cont04 figure {
  width: calc(464.8926 * var(--lpSetSize));
}
.feature .sec__description .cont05 figure:nth-of-type(1) {
  width: calc(350 * var(--lpSetSize));
}
.feature .sec__description .cont05 figure:nth-of-type(2) {
  width: calc(530 * var(--lpSetSize));
}
.feature .sec__description .cont06 figure:nth-of-type(1) {
  width: calc(240.1466 * var(--lpSetSize));
}
.feature .sec__description .cont06 figure:nth-of-type(2) {
  width: calc(550 * var(--lpSetSize));
}
.feature .sec__description .cont07 figure:nth-of-type(1) {
  width: calc(425.5664 * var(--lpSetSize));
}
.feature .sec__description .cont07 figure:nth-of-type(2) {
  width: calc(420 * var(--lpSetSize));
}
.feature .sec__description .cont08 figure:nth-of-type(1) {
  width: calc(425.6088 * var(--lpSetSize));
  margin: 0 0 0 calc(20 * var(--lpSetSize));
  position:relative;
  z-index:1;
}
.feature .sec__description .cont08 figure:nth-of-type(2) {
  width: calc(450 * var(--lpSetSize));
  margin-top: calc(-104 * var(--lpSetSize));
  position:relative;
  z-index:0;
}


/* slide
----------------------------- */
.feature .sec__description .slick-prev {
  width: calc(56 * var(--lpSetSize));
  height: calc(56 * var(--lpSetSize));
  border-radius:50%;
  background:#b1d9e6;
  opacity: .75;
  z-index:1;
  left: calc(11 * var(--lpSetSize));
}
.feature .sec__description .slick-next {
  width: calc(56 * var(--lpSetSize));
  height: calc(56 * var(--lpSetSize));
  border-radius:50%;
  background:#b1d9e6;
  opacity: .75;
  z-index:1;
  right: calc(11 * var(--lpSetSize));
}
.feature .sec__description .slick-prev::before {
  content: '';
  display: block;
  width: calc(24 * var(--lpSetSize));
  height: calc(24 * var(--lpSetSize));
  background: url(../img/arrow.svg) 0 0 no-repeat;
  background-size: contain;
  margin: 0 0 0 calc(10 * var(--lpSetSize));
  opacity: 1;
  transform: rotateY(180deg);
}
.feature .sec__description .slick-next::before {
  content: '';
  display: block;
  width: calc(24 * var(--lpSetSize));
  height: calc(24 * var(--lpSetSize));
  background: url(../img/arrow.svg) 0 0 no-repeat;
  background-size: contain;
  margin: 0 0 0 calc(24 * var(--lpSetSize));
  opacity: 1;
}


/* animation
-------------------------------*/
.feature .clipTxtLeft {
  clip-path: inset(0 100% 0 0);
  transition: 1.6s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
.feature .clipTxtLeft.is_show {
  clip-path: inset(0);
}



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

@media screen and (min-width: 1400px) {  
  :root {
    --lpSetSize: 1px * 0.653333333333333;
  }
  .feature .f_left {
    width: calc(50% - 245px);
  }  
  .feature .f_main {
    width: 490px;
  }
  .feature .f_right {
    width: calc(50% - 245px);
  }

}