@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;
}

/*****************************************************
.feature (PC・SP共通)
*****************************************************/
.feature .f_main .inner {
  background: #e3e3e3;
}

/* .hero
----------------------------- */
.feature .hero {
  position: relative;
}
.feature .hero h1 {
  position: absolute;
  top: calc(507.4819 * var(--lpSetSize));
  left: calc(142 * var(--lpSetSize));
  width: calc(488.168 * 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.050em;
  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;
}

/* .sec01
----------------------------- */
.feature .sec01 .sec__title {
  width: calc(668 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .sec01 {
  margin-bottom: calc(60 * var(--lpSetSize));
}
.feature .sec01 .img02 {
  width: calc(510 * var(--lpSetSize));
}
.feature .sec01 .img03 {
  width: calc(510 * var(--lpSetSize));
}
.feature .sec01 .scroll_wrap {
   padding-top: calc(64 * var(--lpSetSize));
}
.feature .sec01 .scroll_wrap_list {
  margin-left: calc(41 * var(--lpSetSize));
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  display: flex;
}
.feature .sec01 .scroll_wrap_list::-webkit-scrollbar {
  display: none;
}
.feature .sec01 .scroll_wrap_list figure {
  object-fit: cover;
  flex-shrink: 0;
}

/* .sec02
----------------------------- */
.feature .sec02 {
  width: calc(579 * var(--lpSetSize));
  margin: 0 auto calc(200 * var(--lpSetSize));
}
.feature .sec02 .sticky_wrap .sec__title  {
  position:sticky;
  top: calc(80px + (60 * var(--lpSetSize)));
  z-index:1;
}
.feature .sec02 .img05 {
  position: relative;
  z-index:1;
}

/* .sec03
----------------------------- */
.feature .sec03 .sec__title {
  width: calc(668 * var(--lpSetSize));
  margin: 0 auto calc(60 * var(--lpSetSize));
}
.feature .sec03 .flex_wrap {
  display: flex;
  margin-bottom: calc(60 * var(--lpSetSize));
}

/* .sec04-05
----------------------------- */
.feature .sec04-05 .img09 {
  width: calc(668 * var(--lpSetSize));
  height: calc(890 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .sec04-05 .sec__title {
  width: calc(579 * var(--lpSetSize));
  height: calc(772 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .sec04-05 .img12 {
  width: calc(579 * var(--lpSetSize));
  height: calc(890 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .sec04-05 .sticky_wrap {
  position: relative;
  height: fit-content;
}
.feature .sec04-05 .sticky_box {
  position: sticky;
  display: flex;
  justify-content: center;
  align-items: center;
}
.feature .sec04-05 .sticky_wrap .sticky_box01 {
  top: calc(80px + (60 * var(--lpSetSize)));
  z-index:1;
}
.feature .sec04-05 .sticky_wrap .sticky_box02 {
  top: calc(80px + (119 * var(--lpSetSize)));
  z-index:2;
  margin-bottom: calc(59 * var(--lpSetSize));
}
.feature .sec04-05 .sticky_wrap .sticky_box03 {
  top: calc(80px + (119 * var(--lpSetSize)));
  z-index:3;
  margin-top: calc(-59 * var(--lpSetSize));
  margin-bottom: calc(59 * var(--lpSetSize));
}
.feature .sec04-05 .sticky_wrap .sticky_box04 {
  top: calc(80px + (59 * var(--lpSetSize)));
  z-index:4;
  margin-top: calc(-118 * var(--lpSetSize));
  margin-bottom: calc(59 * var(--lpSetSize));
}
_::-webkit-full-page-media, _:future, :root .feature .sec04-05 .sticky_wrap .sticky_box04 {
  margin-bottom: calc(0 * var(--lpSetSize)) !important;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, .feature .sec04-05 .sticky_wrap .sticky_box04 {
      margin-bottom: calc(0 * var(--lpSetSize)) !important;
	}
}
.feature .sec04-05 figure {
  background: none !important;
}
.feature .sec04-05 figure a {
  background: #e3e3e3;
}
.feature .sec04-05 figure a:hover {
  opacity: 1;
}
.feature .sec04-05 figure a img {
  transition: opacity 0.3s;
}
.feature .sec04-05 figure a:hover img {
  opacity: .7;
}

/* .sec06
----------------------------- */
.feature .sec06 {
  position: relative;
  z-index:1;
}
_::-webkit-full-page-media, _:future, :root .feature .sec06 {
  padding-top: calc(59 * var(--lpSetSize)) !important;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, .feature .sec06 {
      padding-top: calc(59 * var(--lpSetSize)) !important;
	}
}
.feature .sec06 .img13 {
  width: calc(579 * var(--lpSetSize));
  margin: 0 auto calc(100 * var(--lpSetSize));
}
.feature .sec06 .img14 {
  width: calc(668 * var(--lpSetSize));
  margin: 0 auto calc(52 * var(--lpSetSize));
}

/* .credit_wrap  */
.feature .credit_wrap {
  width: calc(668 * var(--lpSetSize));
  margin: 0 auto;
  margin-bottom: calc(186 * var(--lpSetSize));
}
.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;
  gap: calc(15 * var(--lpSetSize));
  flex-wrap: wrap;
}
.feature .sec__credit .credit li {
  position: relative;
}
.feature .sec__credit .credit li,
.feature .sec__credit .credit a {
  display: flex;
  gap: 0.3em;
}

/* .sec_about
----------------------------- */
.feature .sec_about {
  text-align:center;
  padding-top: calc(146 * var(--lpSetSize));
}
.feature .sec_about h2 {
  display:flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: calc(53 * var(--lpSetSize));
  gap:calc(4 * var(--lpSetSize));
}
.feature .sec_about h2 .en {
  font-size: calc(34.03 * var(--lpSetSize));
  font-family: "futura-pt", sans-serif;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.140em;
  margin-left:calc(4 * var(--lpSetSize));
}
.feature .sec_about h2 .ja {
  font-size: calc(27.33 * var(--lpSetSize));
  letter-spacing: 0.080em;
}
.feature .sec_about h2 strong {
  display: inline-block;
  width: calc(512 * var(--lpSetSize));
  margin-left:calc(12 * var(--lpSetSize));
  padding-top:calc(12 * var(--lpSetSize));
}
.feature .bg01 {
  width: calc(668 * var(--lpSetSize));
  margin: 0 auto calc(96 * var(--lpSetSize));
}
.feature .sec_about h3 {
  display:flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: calc(53 * var(--lpSetSize));
  gap: calc(22 * var(--lpSetSize));
}
.feature .sec_about h3 .ja {
  font-size: calc(25.51 * var(--lpSetSize));
  letter-spacing: 0.110em;
  margin-bottom: calc(5 * var(--lpSetSize));
}
.feature .sec_about h3 strong {
  font-size: calc(35.32 * var(--lpSetSize));
  letter-spacing: 0.100em;
  line-height: 1;
  display:inline-block;
  background: #ffffff;
}
.feature .sec_about .lead {
  font-size: calc(24 * var(--lpSetSize));
  letter-spacing: 0.080em;
  line-height: 2.0;
  margin-bottom: calc(140 * var(--lpSetSize));
}

.feature .sec_about .sec__feature {
  width: calc(668 * var(--lpSetSize));
  height: calc(610 * var(--lpSetSize));
  background:rgba(255,255,255,0.5);
  border-radius: calc(32.239 * var(--lpSetSize));
  margin: 0 auto calc(144 * var(--lpSetSize));
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.feature .sec_about .sec__feature h4 {
  display:flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: calc(48 * var(--lpSetSize));
  gap: calc(10 * var(--lpSetSize));
}
.feature .sec_about .sec__feature h4 .ja {
  font-size: calc(26.22 * var(--lpSetSize));
  letter-spacing: 0.070em;
}
.feature .sec_about  .sec__feature h4 strong {
  font-size: calc(36.85 * var(--lpSetSize));
  letter-spacing: 0.110em;
  display: inline-block;
  border-bottom: calc(1 * var(--lpSetSize)) solid #6e6e6e;
}
.feature .feature_list p {
  width: calc(588.7886 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .sec_about .sec__recommend h4 {
  width:calc(667.5 * var(--lpSetSize));
  margin: 0 auto;
  font-size: calc(31.18 * var(--lpSetSize));
  letter-spacing: 0.110em;
  margin-bottom: calc(38 * var(--lpSetSize));
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 1em;
}
.feature .sec_about .sec__recommend h4::before,
.feature .sec_about .sec__recommend h4::after {
  content: "";
  flex-grow: 1;
  width: 100%;
  height: calc(1 * var(--lpSetSize));
  background: #6e6e6e;
}
.feature .sec_about .sec__recommend ul {
  width:fit-content;
  margin: 0 0 calc(135 * var(--lpSetSize)) calc(112 * var(--lpSetSize));
}
.feature .sec_about .sec__recommend li {
  font-size: calc(27.79 * var(--lpSetSize));
  letter-spacing: 0.050em;
  line-height: 2.32;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0 calc(26 * var(--lpSetSize));
}
.feature .sec_about .sec__recommend li::before {
  content: "";
  display: block;
  width: calc(20 * var(--lpSetSize));
  height: calc(20 * var(--lpSetSize));
  background:url('../img/icon01.svg') 0 0 no-repeat;
  background-size: cover;
}
.feature .bg02 {
  position: relative;
  margin-bottom: calc(48 * var(--lpSetSize));
}
.feature .bg02 .border_list {
  position: absolute;
  top: calc(45 * var(--lpSetSize));
  left: calc(41.25 * var(--lpSetSize));
  width: calc(220 * var(--lpSetSize));
  border-bottom: calc(1 * var(--lpSetSize)) solid #6e6e6e;
}
.feature .bg02 .border_list  li {
  font-size: calc(23 * var(--lpSetSize));
  letter-spacing: 0.050em;
  line-height: calc(36.85 * var(--lpSetSize));
  height: calc(200 * var(--lpSetSize));
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: calc(1 * var(--lpSetSize)) solid #6e6e6e;
}

.feature .sec_about .circle_list {
  display: flex;
  gap: calc(55 * var(--lpSetSize));
  flex-direction: column;
}
.feature .sec_about .circle_list li {
  font-size: calc(23 * var(--lpSetSize));
  letter-spacing: 0.100em;
  line-height: calc(37 * var(--lpSetSize));
  width: calc(240 * var(--lpSetSize));
  height: calc(240 * var(--lpSetSize));
  border-radius: 50%;
  background:#ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: calc(2 * var(--lpSetSize));
  opacity: .7;
}
.feature .bg03 {
  position: relative;
  margin: calc(-49 * var(--lpSetSize)) 0 calc(20 * var(--lpSetSize));
}
.feature .bg03 a {
  display: flex;
  flex-direction: column;
}
.feature .bg03 .circle_list {
  position: absolute;
  top: calc(128 * var(--lpSetSize));
  left: calc(74.914 * var(--lpSetSize));
}
.feature .bg04 {
  position: relative;
  margin-bottom: calc(48 * var(--lpSetSize));
}
.feature .bg04 .circle_list {
  position: absolute;
  top: calc(22 * var(--lpSetSize));
  left: calc(487.8195 * var(--lpSetSize));
}

.feature .bg05 {
  width: calc(668 * var(--lpSetSize));
  margin: 0 auto calc(60 * var(--lpSetSize));
  padding: calc(50 * var(--lpSetSize)) 0 0 0;
}

.feature .sec__voice {
  position:relative;
  height: calc(670 * var(--lpSetSize));
  margin-bottom: calc(307 * var(--lpSetSize));
}
.feature .sec__voice h4 {
  position: absolute;
  left: calc(159 * var(--lpSetSize));
  top: calc(98 * var(--lpSetSize));
  font-size: calc(40 * var(--lpSetSize));
  letter-spacing: 0.160em;
  line-height: calc(44 * var(--lpSetSize));
  font-family: "futura-pt", sans-serif;
  font-weight: 300;
  font-style: normal;
}
.feature .voice_list li {
  position: absolute;
}
.feature .voice_list li:nth-of-type(1) {
  width: calc(286.0738 * var(--lpSetSize));
  left: calc(383.504 * var(--lpSetSize));
  top: calc(72 * var(--lpSetSize));
}
.feature .voice_list li:nth-of-type(2) {
  width: calc(286.0738 * var(--lpSetSize));
  left: calc(91.5173 * var(--lpSetSize));
  top: calc(219 * var(--lpSetSize));
}
.feature .voice_list li:nth-of-type(3) {
  width: calc(286.0738 * var(--lpSetSize));
  left: calc(384.7368 * var(--lpSetSize));
  top: calc(333 * var(--lpSetSize));
}
.feature .voice_list li:nth-of-type(4) {
  width: calc(340.2541 * var(--lpSetSize));
  left: calc(84.1518 * var(--lpSetSize));
  top: calc(465 * var(--lpSetSize));
}

.feature .sec__lineup h4 {
  text-align: center;
  font-size: calc(40 * var(--lpSetSize));
  letter-spacing: 0.140em;
  font-family: "futura-pt", sans-serif;
  font-weight: 300;
  font-style: normal;
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14 * var(--lpSetSize));
  margin-left: calc(4 * var(--lpSetSize));
  margin-bottom: calc(30 * var(--lpSetSize));
}
.feature .sec__lineup h4::after {
  content:"";
  display: block;
  width: calc(40 * var(--lpSetSize));
  height: calc(1 * var(--lpSetSize));
  background:#6e6e6e;
}
.feature .lineup_list {
  width: calc(698.5948 * var(--lpSetSize));
  margin: 0 auto;
  display: flex;
}
.feature .lineup_list span {
  font-size: calc(25 * var(--lpSetSize));
  letter-spacing: 0.150em;
  line-height: calc(56 * var(--lpSetSize));
  font-family: "futura-pt", sans-serif;
  font-weight: 300;
  font-style: normal;
}

/* .sec_bottom
----------------------------- */
.feature .sec_bottom {
  padding: calc(178 * 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(78 * var(--lpSetSize));
  background: #ffffff;
  display:flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--lpSetSize));
  padding-top: calc(2 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn a::after {
  content: "";
  display: block;
  width: calc(9 * var(--lpSetSize));
  height: calc(14 * var(--lpSetSize));
  background: url(../img/icon02.svg) 0 0 no-repeat;
  background-size: contain;
}

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

/* .js_zoomin
----------------------------- */
.feature .js_anime.js_zoomin {
  overflow: hidden;
}
.feature .js_anime.js_zoomin img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-transition: all .8s ease;
          transition: all .8s ease;
  opacity: 0;
}
.feature .js_anime.js_zoomin.is_show img {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
.feature .js_anime.js_zoomin.--1.is_show img {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}

/* .js_in
----------------------------- */
.feature .js_anime.js_in {
  opacity: 0;
  -webkit-transition: opacity 0s 1s;
          transition: opacity 0s 1s;
}

.feature .js_anime.js_in.is_show {
  opacity: 1;
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}

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