@charset "UTF-8";

.feature {
  --lpSetSize: (100vw / 1400) * 0.666666;
}
html {
  scroll-behavior:smooth;
}
.l-container {
  width:100%;
}
.feature {
  width:100%;
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #353535;
}
.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,
.feature .f_right {
  width: calc(50% - (250 * (100vw / 1400)));
}
.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__box .f_right__btn {
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  display:flex;
  justify-content: center;
  align-items: center;
}
.feature .f_left .f_left__box .f_left__title p {
  width: calc(315.3516 * (100vw / 1400));
}
.feature .f_right .f_right__btn p {
  width: calc(203.397 * (100vw / 1400));
}

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

/*****************************************************
.feature (PC・SP共通)
*****************************************************/

/* .hero
----------------------------- */
.feature .hero .mv {
  position: relative;
}
.feature .hero .mv p {
  width:  calc(669.7363 * var(--lpSetSize));
  position: absolute;
  top: calc(76 * var(--lpSetSize));
  left: calc(42 * var(--lpSetSize));
  pointer-events:none;
}
.feature .hero h1 {
  width: calc(577.8613 * var(--lpSetSize));
  margin-top: calc(124 * var(--lpSetSize));
  margin-left: calc(88 * var(--lpSetSize));
  margin-bottom: calc(30 * var(--lpSetSize));
}

/* .wrap_lead
----------------------------- */
.feature .wrap_lead {
  padding: calc(80 * var(--lpSetSize)) 0 0;
}
.feature .wrap_lead p {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  font-size: calc(26 * var(--lpSetSize));
  line-height: calc(50 * var(--lpSetSize));
  margin-bottom:calc(50 * var(--lpSetSize));
}
.feature .wrap_lead p strong {
  font-family: "DotGothic16", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(40 * var(--lpSetSize));
  letter-spacing: 0.100em;
  line-height: calc(60 * var(--lpSetSize));
  padding-left:calc(22 * var(--lpSetSize));
}

/* .sec
----------------------------- */

/* .sec__credit */
.feature .sec .sec__credit .credit {
  display:flex;
  gap: 0 calc(20 * var(--lpSetSize));
  padding-top:calc(12 * var(--lpSetSize));
  flex-wrap: wrap;
}
.feature .sec .sec__credit .credit li {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-size: calc(22 * var(--lpSetSize));
  line-height: 1.7; 
  letter-spacing: 0.050em;
  color: #000000;
}
.feature .sec .sec__credit .credit li,
.feature .sec .sec__credit .credit a {
  display: flex;
  gap: calc(6 * var(--lpSetSize));
}

.feature .img02 .sec__credit .credit {
  flex-direction: column;
  align-items: center;
}
.feature .sec03 .sec__credit .credit {
  flex-direction: column;
  align-items: center;
}
.feature .sec04 .sec__credit .credit {
  padding-left: calc(100 * var(--lpSetSize));
  justify-content: flex-end;
}
.feature .img12 .sec__credit .credit {
  flex-direction: column;
}
.feature .sec07 .sec__credit .credit {
  align-items: center;
  justify-content: center;
}
.feature .sec07 .sec__credit .credit li:nth-of-type(2){
  width: 40%;
  justify-content: flex-end;
}
.feature .sec07 .sec__credit .credit li:nth-of-type(3) {
  width: 40%;
}
.feature .img16 .sec__credit .credit {
  justify-content: flex-end;
}
.feature .sec10 .sec__credit .credit {
  flex-direction: column;
  align-items: center;
}
.feature .img21 .sec__credit .credit {
  justify-content: flex-end;
}
.feature .sec .img22 .sec__credit .credit {
  width: calc(600 * var(--lpSetSize));
  align-items: center;
  justify-content: center;
}
.feature .sec .img25 .sec__credit .credit {
  align-items: center;
  justify-content: center;
}
.feature .sec .img26 .sec__credit .credit {
  padding-left:calc(28 * var(--lpSetSize));
}
.feature .sec .img28 .sec__credit .credit {
  width: calc(550 * var(--lpSetSize));
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.feature .sec .img30 .sec__credit .credit {
  width: calc(550 * var(--lpSetSize));
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.feature .sec .img33 .sec__credit .credit {
  width: calc(650 * var(--lpSetSize));
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.feature .sec .img33 .sec__credit .credit li:nth-of-type(2){
  width: 40%;
  justify-content: flex-end;
}
.feature .sec .img33 .sec__credit .credit li:nth-of-type(3) {
  width: 40%;
}
.feature .sec .img34 .sec__credit .credit {
  align-items: center;
  justify-content: center;
}

/* .logo */
.feature .sec {position:relative;}
.feature .snd01 {width: calc(336 * var(--lpSetSize));}
.feature .cfd02 {width: calc(62 * var(--lpSetSize));}
.feature .lbw01 {width: calc(372 * var(--lpSetSize));}
.feature .fid02 {width: calc(46  * var(--lpSetSize));}
.feature .mow02 {width: calc(78 * var(--lpSetSize));}
.feature .fid01 {width: calc(380 * var(--lpSetSize));}
.feature .org02 {width: calc(62 * var(--lpSetSize));}
.feature .lbw02 {width: calc(46 * var(--lpSetSize));}
.feature .fur01 {width: calc(250 * var(--lpSetSize));}
.feature .piq01 {width: calc(488 * var(--lpSetSize));}

/* .sec01 */
.feature .sec01 {
  padding-top: calc(230 * var(--lpSetSize));
}
.feature .sec01 .logo {
  position:absolute;
  left: calc(384 * var(--lpSetSize));
  top: calc(142 * var(--lpSetSize));
}
.feature .sec .img02 {
  width: calc(750 * var(--lpSetSize));
  margin-bottom: calc(190 * var(--lpSetSize));
}

/* .sec02 */
.feature .sec02 .logo {
  position:absolute;
  left: calc(118 * var(--lpSetSize));
  top: 0;
}
.feature .sec .img04 {
  width: calc(550 * var(--lpSetSize));
  margin-left: calc(200 * var(--lpSetSize));
  margin-bottom: calc(160 * var(--lpSetSize));
}
.feature .sec .img05 {
  margin-bottom: calc(80 * var(--lpSetSize));
}
.feature .sec .img06 {
  margin-left:calc(87 * var(--lpSetSize));
  margin-bottom: calc(188 * var(--lpSetSize));
}
.feature .sec .img06 figure {
  margin-right: calc(13.7  * var(--lpSetSize));
}
.feature .sec .img06 figure img {
  width: calc(516.5 * var(--lpSetSize));
}

/* .sec03 */
.feature .sec03 {
  padding-bottom: calc(192 * var(--lpSetSize));
}
.feature .sec03 .logo {
  margin: 0 auto calc(20 * var(--lpSetSize));
}
.feature .sec03 .wrap_sticky {
  position:relative;
}
.feature .sec .img08 {
  width: calc(750 * var(--lpSetSize));
  position:sticky;
  top: 80px;
}
.feature .sec .img09 {
  width: calc(600 * var(--lpSetSize));
  position:sticky;
  top: 80px;
  padding-bottom: calc(108 * var(--lpSetSize));
  margin: calc(100 * var(--lpSetSize)) auto 0;
}
.feature .sec .img09 img {
  border: 1px solid #000000;
}

/* .sec04 */
.feature .sec04 .logo {
  margin-left: calc(306 * var(--lpSetSize));
  margin-bottom:calc(18 * var(--lpSetSize));
}
.feature .sec .img10 {
  margin-right: calc(73 * var(--lpSetSize));
}
.feature .sec .img10 figure {
  margin-left: calc(10  * var(--lpSetSize));
}
.feature .sec .img10 figure img {
  width: calc(580.5 * var(--lpSetSize));
}

/* .wrap_about */
.feature .wrap_about {
  height: calc(688 * var(--lpSetSize));
  background: url(../img/img01.png) no-repeat,url(../img/img02.png) no-repeat;
  background-size: calc(675.5567 * var(--lpSetSize)) calc(241.6842 * var(--lpSetSize)),calc(640.5959 * var(--lpSetSize)) calc(241.7448 * var(--lpSetSize));
  background-position-x: calc(22 * var(--lpSetSize)),calc(104 * var(--lpSetSize));
  background-position-y: calc(80 * var(--lpSetSize)),calc(450 * var(--lpSetSize));
  margin-bottom:calc(110 * var(--lpSetSize));
}
.feature .wrap_about .about {
  width: calc(391.4258 * var(--lpSetSize));
  margin: 0 0 calc(40 * var(--lpSetSize)) calc(188 * var(--lpSetSize));
  padding: calc(237 * var(--lpSetSize)) 0 0 0;
}
.feature .wrap_about p {
  text-align:center;
  font-size:calc(21 * var(--lpSetSize));
  line-height: 1.9;
}

/* .sec05 */
.feature .sec05 .logo {
  position:absolute;
  top:0;
  left: calc(122 * var(--lpSetSize));
}
.feature .sec .img12 {
  width: calc(562 * var(--lpSetSize));
  margin-left: calc(188 * var(--lpSetSize));
  margin-bottom: calc(190 * var(--lpSetSize));
}

/* .sec06 */
.feature .sec .img13 {
  width: calc(532.5 * var(--lpSetSize));
  margin: 0 auto calc(10 * var(--lpSetSize));
}
.feature .sec .img14 {
  width: calc(532.5 * var(--lpSetSize));
  margin: 0 auto calc(200 * var(--lpSetSize));
}

/* .sec07 */
.feature .sec07 {
  margin-bottom: calc(194 * var(--lpSetSize));
}
.feature .sec07 .logo {
  margin: 0 0 calc(18 * var(--lpSetSize)) calc(384 * var(--lpSetSize));
}

/* .sec08 */
.feature .sec08 {
  margin-bottom:calc(150 * var(--lpSetSize));
}
.feature .sec08 .logo {
  position: absolute;
  top:0;
  right: calc(84 * var(--lpSetSize));
}
.feature .sec .img16 {
  width: calc(600 * var(--lpSetSize));
}

/* .sec09 */
.feature .sec09 {
  margin-bottom:calc(154 * var(--lpSetSize));
}
.feature .sec09 .logo {
  position: absolute;
  top: 0;
  left: calc(52 * var(--lpSetSize));
}
.feature .sec09 .img17 {
  width: calc(600 * var(--lpSetSize));
  margin-left:calc(150 * var(--lpSetSize));
}

/* .sec10 */
.feature .sec10 {
  margin-bottom: calc(228 * var(--lpSetSize));
}
.feature .sec .img20 {
  position: relative;
  width: calc(665 * var(--lpSetSize));
  margin: calc(193 * var(--lpSetSize)) auto 0;
}
.feature .sec .img20 figure img {
  border: 1px solid #000000;
}
.feature .sec .img20 p {
  width:calc(567 * var(--lpSetSize));
  position:absolute;
  top:calc(106 * var(--lpSetSize));
  left:calc(50 * var(--lpSetSize));
  pointer-events: none;
}

/* .sec11 */
.feature .sec11 {
  margin-bottom: calc(228 * var(--lpSetSize));
}
.feature .sec11 .logo {
  position:absolute;
  top:0;
  right: calc(52 * var(--lpSetSize));
}
.feature .sec .img21 {
  width: calc(600 * var(--lpSetSize));
}

/* .sec12 */
.feature .sec12 {
  margin-bottom: calc(80 * var(--lpSetSize));
}
.feature .sec12 .logo {
  margin: 0 auto calc(22 * var(--lpSetSize));
}
.feature .sec .img22 {
  width: calc(700 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .sec .img22 figure img {
  border: 1px solid #000000;
}

/* .sec13 */
.feature .sec13 {
  margin-bottom: calc(170 * var(--lpSetSize));
}
.feature .sec13 .wrap_sticky {
  position:relative;
}
.feature .sec .img23 {
  width: calc(523 * var(--lpSetSize));
  transform: rotate(-357.67deg);
  margin: 0 auto;
  position:sticky;
  top: 90px;
}
.feature .sec .img24 {
  width: calc(523 * var(--lpSetSize));
  transform: rotate(-5.298deg);
  margin: calc(50 * var(--lpSetSize)) auto 0;
  position:sticky;
  z-index:1;
}
.feature .sec13 .motif {
  margin: calc(0 * var(--lpSetSize)) 0 0 calc(60 * var(--lpSetSize));
  width:calc(214.958 * var(--lpSetSize));
  position:sticky;
  z-index: 2;
  pointer-events:none;
}

/* .sec14 */
.feature .sec14 {
  margin-bottom:calc(133 * var(--lpSetSize));
}
.feature .sec .img25 {
  position:relative;
}
.feature .sec .img25 p {
  width:calc(672.3535 * var(--lpSetSize));
  position:absolute;
  top: calc(84 * var(--lpSetSize));
  left: calc(40 * var(--lpSetSize));
  pointer-events:none;
}

/* .sec15 */
.feature .sec15 {
  margin-bottom:calc(132 * var(--lpSetSize));
}
.feature .sec15 .logo {
  position:absolute;
  top: 0;
  right: calc(69 * var(--lpSetSize));
}
.feature .sec .img26 {
  width: calc(600 * var(--lpSetSize));
}
.feature .sec15 .motif {
  width:calc(266.124 * var(--lpSetSize));
  position:absolute;
  right: calc(31 * var(--lpSetSize));
  bottom: calc(8 * var(--lpSetSize));
  pointer-events:none;
}

/* .sec16 */
.feature .sec16 {
  margin-bottom:calc(122 * var(--lpSetSize));
}
.feature .sec16 .logo {
  position:absolute;
  top: 0;
  left: calc(84 * var(--lpSetSize));
}
.feature .sec .img27 {
  width: calc(600 * var(--lpSetSize));
  margin-left:calc(150 * var(--lpSetSize));
  position:relative;
  z-index:1;
}
.feature .sec .img27 img {
  border: 1px solid #000000;
}
.feature .sec .img28 {
  width: calc(750 * var(--lpSetSize));
  margin-top:calc(-116 * var(--lpSetSize));
  position:relative;
  z-index:0;
}

/* .sec17 */
.feature .sec17 {
}
.feature .sec17 .logo {
  position:absolute;
  right: calc(84 * var(--lpSetSize));
  top: 0;
}
.feature .sec .img29 {
  width: calc(598.5 * var(--lpSetSize));
  margin-bottom:calc(100 * var(--lpSetSize));
}
.feature .sec .img30 {
  width: calc(750 * var(--lpSetSize));
  margin-bottom:calc(206 * var(--lpSetSize));
}

/* .sec18 */
.feature .sec18 {
  margin-bottom:calc(108 * var(--lpSetSize));
}
.feature .sec18 .wrap_sticky {
  position:relative;
}
.feature .sec18 .motif {
  width:calc(214.958 * var(--lpSetSize));
  margin: 0 0 0 calc(64 * var(--lpSetSize));
  position:sticky;
  top: calc(-100 * var(--lpSetSize));
  z-index:1;
  pointer-events:none;
}
.feature .sec .img31 {
  width: calc(523.5 * var(--lpSetSize));
  transform: rotate(-357.67deg);
  margin: 0 auto;
  position:sticky;
  top: 154px;
}
.feature .sec .img32 {
  width: calc(523.5 * var(--lpSetSize));
  transform: rotate(-5.298deg);
  margin: 0 auto;
  position:sticky;
  z-index:2;
}
.feature .sec18 .logo { 
  margin: calc(102 * var(--lpSetSize)) auto calc(80 * var(--lpSetSize));
}
.feature .sec .img33 {
  width: calc(750 * var(--lpSetSize));
}

/* .sec19 */
.feature .sec19 {
  margin-bottom: calc(194 * var(--lpSetSize));
}
.feature .sec19 .logo {
  margin: 0 auto calc(20 * var(--lpSetSize));
}
.feature .sec .img34 {
  width: calc(700 * var(--lpSetSize));
  margin: 0 auto;
}

/* .sec_bottom
----------------------------- */
.feature .sec_bottom {
  margin-bottom: calc(150 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn {
  width: calc(400 * var(--lpSetSize));
  margin: 0 auto calc(120 * var(--lpSetSize));
}
.feature .sec_bottom .copyright {
  width: calc(123 * var(--lpSetSize));
  margin: 0 auto calc(112 * var(--lpSetSize)); 
}
.feature .sec_bottom .staff {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: calc(22 * var(--lpSetSize));
  line-height: 1.63; 
  letter-spacing: 0.035em;
  text-align: center;
}
.feature .sec_bottom .staff dt {
  margin-bottom: calc(10 * var(--lpSetSize));
}
.feature .sec_bottom .staff span {
  font-family: "Kozuka Gothic Pr6N", "小塚ゴシック Pr6N", "Kozuka Gothic Pro", "小塚ゴシック Pro", sans-serif;
}


/******************************************************/

@media screen and (min-width: 1400px) { 
  .feature {
    --lpSetSize: 1px * 0.666666;
  }
  .feature .f_left,
  .feature .f_right {
    width: calc(50% - 250px);
  }
  .feature .f_left .f_left__box .f_left__title p {
    width: 315.3516px;
  }
  .feature .f_right .f_right__btn p {
    width: 203.397px;
  }
  .feature .f_main {
    width: 500px;
  }
}