@charset "UTF-8";

.feature {
  --lpSetSize: (100vw / 1400) * 1;
}
html {
  scroll-behavior:smooth;
}
.l-container {
  width:100%;
}
.feature {
  width:100%;
  font-family: "yu-gothic-pr6n", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #6e6e6e;
  background: #e3e3e3;
}
.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: #e3e3e3;}
.l-footer { padding-top: 0 !important;}
.pc-footer { margin-top: 0 !important;}

/* .f_main
----------------------------- */
.feature .f_main .inner {
  width: calc(750 * (100vw / 1400));
  margin: 0 auto;
  overflow: hidden;
}

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

/* .hero
----------------------------- */
.feature .hero {
  position: relative;
}
.feature .hero h1 {
  position: absolute;
  top: calc(227.4086 * var(--lpSetSize));
  left: calc(52.6133 * var(--lpSetSize));
  width: calc(226.4473 * var(--lpSetSize));
  z-index: 1;
}

/* .wrap_lead
----------------------------- */
.feature .wrap_lead {
  padding: calc(88 * var(--lpSetSize)) 0 calc(170 * var(--lpSetSize));
}
.feature .wrap_lead p {
  text-align: center;
  font-size: calc(24 * var(--lpSetSize));
  letter-spacing: 0.040em;
  line-height: 2.0;
}

/* .sec__title
----------------------------- */
.feature .sec__title {
  position: relative;
}
.feature .sec__title h2 {
  position: absolute;
  top: calc(6 * var(--lpSetSize));
  left: calc(10 * var(--lpSetSize));
  display: flex;
  color: #ffffff;
  flex-direction: column;
  z-index: 1;
  font-family: "futura-pt", sans-serif;
  font-weight: 300;
  font-style: italic;
  gap: calc(2 * var(--lpSetSize));
}
.feature .sec__title h2 .number {
  font-size: calc(31.18 * var(--lpSetSize));
  letter-spacing: 0.060em;
}
.feature .sec__title h2 .en {
  font-size: calc(23 * var(--lpSetSize));
  line-height: 1.3;
}

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

/* .credit_wrap  */
.feature .credit_wrap {
  width: fit-content;
}
.feature .sec__credit {
  display: flex;
  gap: calc(8 * var(--lpSetSize));
  font-size: calc(24 * var(--lpSetSize));
  letter-spacing: 0.085em;
  line-height: 1.77;
  font-family: "futura-pt", sans-serif;
  font-weight: 300;
  font-style: normal;
}
.feature .sec__credit .credit {
  display:flex;
}
.feature .sec__credit .credit li {
  position: relative;
}
.feature .sec__credit .credit li,
.feature .sec__credit .credit a {
  display: flex;
  gap: 0.3em;
}

.feature .sec {}
.feature .sec .img01 {
  width: calc(650 * var(--lpSetSize));
  margin: 0 auto calc(20 * var(--lpSetSize));
}
.feature .sec .img02 {
  width: calc(500 * var(--lpSetSize));
  margin: 0 0 calc(60 * var(--lpSetSize)) 0;
  position:relative;
}
.feature .sec .img02 .sec__credit {
  position:absolute;
  top: calc(60 * var(--lpSetSize));
  right: calc(-202 * var(--lpSetSize));
}
.feature .sec .img02 .credit {
  flex-direction: column;
  align-items: flex-end;
}
.feature .sec .img03 {
  width: calc(480 * var(--lpSetSize));
  margin: 0 0 calc(20 * var(--lpSetSize)) calc(125 * var(--lpSetSize));
}
.feature .sec .img04 {
  width: calc(575 * var(--lpSetSize));
  margin: 0 0 calc(60 * var(--lpSetSize)) calc(125 * var(--lpSetSize));
  position:relative;
}
.feature .sec .img04 .sec__credit {
  position:absolute;
  top: calc(37 * var(--lpSetSize));
  left: calc(-75 * var(--lpSetSize));
}
.feature .sec .img04 .credit {
  flex-direction: column;
}
.feature .sec .img05 {
  width: calc(650 * var(--lpSetSize));
  margin: 0 auto calc(20 * var(--lpSetSize));
}
.feature .sec .flex_wrap {
  display:flex;
  margin: 0 0 calc(60 * var(--lpSetSize)) 0;
}
.feature .sec .img06 {
  width: calc(375 * var(--lpSetSize));
}
.feature .sec .flex_wrap .flex_wrap_inner {
  width: calc(375 * var(--lpSetSize));
}
.feature .sec .flex_wrap .flex_wrap_inner .sec__credit {
  justify-content: flex-end;
  padding: calc(22 * var(--lpSetSize)) calc(48 * var(--lpSetSize)) calc(35 * var(--lpSetSize)) 0;
}
.feature .sec .flex_wrap .flex_wrap_inner .credit {
  flex-direction: column;
  align-items: flex-end;
}
.feature .sec .flex_wrap .flex_wrap_inner .credit li:last-child {
  line-height: 1.5;
}
.feature .sec .flex_wrap .flex_wrap_inner .credit li:last-child a {
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}
.feature .sec .img08 {
  width: calc(500 * var(--lpSetSize));
  margin: 0 auto calc(60 * var(--lpSetSize));
}
.feature .sec .img09 {
  width: calc(650 * var(--lpSetSize));
  margin: 0 auto calc(20 * var(--lpSetSize));
}
.feature .sec .img10 {
  width: calc(600 * var(--lpSetSize));
  margin: 0 0 calc(20 * var(--lpSetSize)) calc(150 * var(--lpSetSize));
}
.feature .sec .img11 {
  width: calc(500 * var(--lpSetSize));
  margin: 0 0 calc(200 * var(--lpSetSize)) 0;
  position:relative;
}
.feature .sec .img11 .sec__credit {
  position:absolute;
  top: calc(24 * var(--lpSetSize));
  right: calc(-202 * var(--lpSetSize));
}
.feature .sec .img11 .credit {
  flex-direction: column;
  align-items: flex-end;
}

/* .sec_point
----------------------------- */
.feature .sec_point {}
.feature .sec_point h2 {
  text-align:center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(38 * var(--lpSetSize));
  padding: calc(48 * var(--lpSetSize)) 0 calc(60 * var(--lpSetSize));
}
.feature .sec_point h2 .en {
  font-family: "futura-pt", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: calc(30 * var(--lpSetSize));
  letter-spacing: 0.140em;
  line-height: 1.77;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--lpSetSize));
}
.feature .sec_point h2 .en::after {
  content: '';
  display:block;
  width:calc(40 * var(--lpSetSize));
  height:calc(1 * var(--lpSetSize));
  background: #6e6e6e;
}
.feature .sec_point h2 .ja {
  font-size: calc(29 * var(--lpSetSize));
  letter-spacing: 0.080em;
  line-height: 2.2;
}
.feature .sec_point h3 {
  position:relative;
  display:flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: calc(53 * var(--lpSetSize));
  gap: calc(22 * var(--lpSetSize));
  padding: calc(60 * var(--lpSetSize)) 0 0 0;
  margin: 0 0 calc(48 * var(--lpSetSize)) 0;
}
.feature .sec_point h3 .num {
  width:calc(134 * var(--lpSetSize));
  height:calc(134 * var(--lpSetSize));
  pointer-events: none;
}
.feature .sec_point h3 strong {
  font-size: calc(27 * var(--lpSetSize));
  letter-spacing: 0.060em;
  line-height: 1;
  font-weight: normal;
  display:inline-block;
  background: #ffffff;
}
.feature .sec_point h3::after {
  content: '';
  display:block;
  width:calc(40 * var(--lpSetSize));
  height:calc(1 * var(--lpSetSize));
  background: #6e6e6e;
  margin-top: calc(42 * var(--lpSetSize));
}
.feature .sec_point .lead {
  text-align: center;
  font-size: calc(24 * var(--lpSetSize));
  letter-spacing: 0.020em;
  line-height: 2.0;
  margin-bottom: calc(52 * var(--lpSetSize));
}
.feature .sec_point .point01 {
  padding-bottom: calc(150 * var(--lpSetSize));
}
.feature .sec_point .point01 h3 .num {
  position:absolute;
  top: calc(-109 * var(--lpSetSize));
  left: calc(539.845 * var(--lpSetSize));
}
.feature .sec_point .point01 dl {
  display:flex;
  gap:calc(20 * var(--lpSetSize));
  width:calc(630 * var(--lpSetSize));
  margin: 0 auto;
  align-items: center;
}
.feature .sec_point .point01 dt {
  text-align: center;
  font-size: calc(24 * var(--lpSetSize));
  letter-spacing: 0.060em;
  line-height: 1.65;
  display:flex;
  flex-direction: column;
  align-items: center;
  gap:calc(20 * var(--lpSetSize));
}
.feature .sec_point .point01 dt::before,
.feature .sec_point .point01 dt::after {
  content: '';
  display:block;
  width:calc(245 * var(--lpSetSize));
  height:calc(5.66 * var(--lpSetSize));
  background: #ffffff;
}
.feature .sec_point .point01 dd ul {
  display:flex;
  flex-wrap: wrap;
  gap:calc(5 * var(--lpSetSize));
}
.feature .sec_point .point01 dd ul li {
  background:#ffffff;
  border-radius:50%;
  width:calc(180 * var(--lpSetSize));
  height:calc(180 * var(--lpSetSize));
  text-align: center;
  font-size: calc(20 * var(--lpSetSize));
  letter-spacing: 0.060em;
  line-height: 1.41;
  display:flex;
  justify-content: center;
  align-items: center;
  padding-top: calc(6 * var(--lpSetSize));
}
.feature .sec_point .point02 {
  padding-bottom: calc(90 * var(--lpSetSize));
}
.feature .sec_point .point02 h3 .num {
  position:absolute;
  top: calc(-108 * var(--lpSetSize));
  left: calc(79 * var(--lpSetSize));
}

.feature .sec_point .point03 {
  padding-bottom: calc(90 * var(--lpSetSize));
}
.feature .sec_point .point03 h3 .num {
  position:absolute;
  top: calc(-107 * var(--lpSetSize));
  left: calc(539.845 * var(--lpSetSize));
}

.feature .sec_point .point04 {
  padding-bottom: calc(90 * var(--lpSetSize));
}
.feature .sec_point .point04 h3 .num {
  position:absolute;
  top: calc(-107 * var(--lpSetSize));
  left: calc(79 * var(--lpSetSize));
}

.feature .sec .img12 {
  width: calc(630 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .sec .img13 {
  width: calc(630 * var(--lpSetSize));
  margin: 0 auto;
  position:relative;
}
.feature .sec .img13 a {
  position:relative;
}
.feature .sec .img13 li {
  pointer-events: none;
  position:absolute;
  text-align: center;
  font-size: calc(20 * var(--lpSetSize));
  letter-spacing: 0.000em;
  line-height: 1.41;
}
.feature .sec .img13 li:nth-of-type(1) {
  width: calc(224.3968 * var(--lpSetSize));
  height: calc(118.9008 * var(--lpSetSize));
  top: calc(17 * var(--lpSetSize));
  left: calc(26 * var(--lpSetSize));
  background: url(../img/point02_1.png) 0 0 no-repeat;
  background-size: contain;
  padding: calc(18 * var(--lpSetSize)) 0 0 0;
}
.feature .sec .img13 li:nth-of-type(2) {
  width: calc(224.3968 * var(--lpSetSize));
  height: calc(151.1308* var(--lpSetSize));
  top: calc(155 * var(--lpSetSize));
  left: calc(14 * var(--lpSetSize));
  background: url(../img/point02_2.png) 0 0 no-repeat;
  background-size: contain;
  padding: calc(31 * var(--lpSetSize)) 0 0 0;
}
.feature .sec .img13 li:nth-of-type(3) {
  width: calc(257.9467 * var(--lpSetSize));
  height: calc(151.6914 * var(--lpSetSize));
  top: calc(511 * var(--lpSetSize));
  left: calc(14 * var(--lpSetSize));
  background: url(../img/point02_3.png) 0 0 no-repeat;
  background-size: contain;
  padding: calc(50 * var(--lpSetSize)) 0 0 0;
  color:#ffffff;
  display:flex;
  justify-content: center;
}
.feature .sec .img13 li:nth-of-type(3)::after {
  content:'';
  width: calc(35 * var(--lpSetSize));
}
.feature .sec .img13 li:nth-of-type(4) {
  width: calc(224.3968 * var(--lpSetSize));
  height: calc(153.5161 * var(--lpSetSize));
  top: calc(676 * var(--lpSetSize));
  left: calc(362 * var(--lpSetSize));
  background: url(../img/point02_4.png) 0 0 no-repeat;
  background-size: contain;
  padding: calc(52 * var(--lpSetSize)) calc(-52 * var(--lpSetSize)) 0;
}
.feature .sec .img14 {
  width: calc(630 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .sec .img15 {
  width: calc(630 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .sec .img15 ul {
  display: flex;
  flex-wrap: wrap;
}
.feature .sec .img15 ul li {
  position: relative;
  width: 50%;
}
.feature .sec .img15 ul li span {
  position: absolute;
  top: calc(16 * var(--lpSetSize));
  font-size: calc(20 * var(--lpSetSize));
  letter-spacing: 0.070em;
  font-family: "futura-pt", sans-serif;
  font-weight: 300;
  font-style: normal;
  line-height: 1;
  color: #ffffff;
  display: inline-block;
}
.feature .sec .img15 ul li:nth-of-type(1) span {
  left: calc(12 * var(--lpSetSize));
}
.feature .sec .img15 ul li:nth-of-type(2) span {
  left: calc(20 * var(--lpSetSize));
}
.feature .sec .img15 ul li:nth-of-type(3) span,
.feature .sec .img15 ul li:nth-of-type(4) span {
  right: calc(12 * var(--lpSetSize));
}

/* .sec_staff
----------------------------- */
.feature .sec_staff {
  padding-top: calc(60 * var(--lpSetSize));
}
.feature .sec_staff h2 {
  text-align:center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(48 * var(--lpSetSize)) 0 calc(28 * var(--lpSetSize));
}
.feature .sec_staff h2 .en {
  font-family: "futura-pt", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: calc(40 * var(--lpSetSize));
  letter-spacing: 0.140em;
  line-height: 1.77;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--lpSetSize));
}
.feature .sec_staff h2 .en::after {
  content: '';
  display:block;
  width:calc(40 * var(--lpSetSize));
  height:calc(1 * var(--lpSetSize));
  background: #6e6e6e;
}
.feature .sec_staff .sec__slide {
  display: flex;
}
.feature .sec_staff .sec__slide img {
  width: calc(262.5 * var(--lpSetSize));
}

/* .sec_bottom
----------------------------- */
.feature .sec_bottom {
  padding: calc(192 * var(--lpSetSize)) 0 calc(40 * var(--lpSetSize));
}
.feature .sec_bottom .staff {
  font-size: calc(24 * var(--lpSetSize));
  letter-spacing: 0.085em;
  font-family: "futura-pt", sans-serif;
  font-weight: 300;
  font-style: normal;
  line-height: 1.75;
  color:#555555;
  text-align: center;
  margin-bottom: calc(118 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn {
  text-align: center;
}
.feature .sec_bottom .sec__btn a {
  width: calc(540 * var(--lpSetSize));
  margin:0 auto calc(80 * var(--lpSetSize));
  font-size: calc(22 * var(--lpSetSize));
  letter-spacing: 0.030em;
  line-height: calc(80 * var(--lpSetSize));
  background: #ffffff;
  display:flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn a::after {
  content: "";
  display: block;
  width: calc(8 * var(--lpSetSize));
  height: calc(17 * var(--lpSetSize));
  background: url(../img/icon_btn.svg) left bottom no-repeat;
  background-size: contain;
}

/*****************************************************
animation
*****************************************************/

/* .js_fadein
----------------------------- */
.feature .js_anime.js_fadein {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.feature .js_anime.js_fadein.is_show {
  opacity: 1;
}
.feature .js_anime.js_fadein.--1.is_show {
  transition-delay: 0.6s;
}
.feature .js_anime.js_fadein.--2.is_show {
  transition-delay: 1.2s;
}

/* .js_fadeup
----------------------------- */
.feature .js_anime.js_fadeup {
    opacity: 0;
    will-change: opacity, transform;
    -webkit-transition: ease-in, opacity 1500ms, -webkit-transform 1000ms;
    transition: ease-in, opacity 1500ms, -webkit-transform 1000ms;
    transition: ease-in, opacity 1500ms, transform 1000ms;
    transition: ease-in, opacity 1500ms, transform 1000ms, -webkit-transform 1000ms;
    -webkit-transform: translate3d(0, 5%, 0);
    transform: translate3d(0, 5%, 0);
}
.feature .js_anime.js_fadeup.is_show {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/*****************************************************
レスポンシブ対応 (PC ONLY)
*****************************************************/
@media screen and (min-width: 1400px) { 
  .feature {
    --lpSetSize: 1px;
  }
  .feature .f_main .inner {
    width: 750px;
  }
}