@charset "UTF-8";

@-moz-document url-prefix() {}

html {
  font-size: 10px;
}

body {
  overflow-x: hidden;
}

.l-container {
  width: 100%;
}

.l-container #feature {
  color: #000;
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 0 auto;
  width: 100%;
}

.l-container #feature .default-img {
  display: block;
  height: auto;
  width: 100%;
}

.l-container:after {
  content: none;
}

.l-container #feature * {
  box-sizing: border-box;
}

.l-container #feature *::after {
  box-sizing: border-box;
}

.l-container #feature *::before {
  box-sizing: border-box;
}

.l-container #feature a {
  display: block;
  text-decoration: none;
  position: relative;
  transition: all 0.3s;
}

.l-container #feature a:hover::after {
  cursor: pointer;
  opacity: 1;
}

#feature a:hover {
  opacity: 0.7;
  transition: 0.3s;
}

.l-container #feature #sp-only {
  display: none !important;
}

.l-container #feature .target[data-fade="fadeIn"] {
  opacity: 0;
  transition: opacity 0.7s;
}

.l-container #feature .target[data-fade="fadeIn"][data-is-active="true"] {
  opacity: 1;
}

.l-container #feature .target[data-fade="slide"] {
  opacity: 0;
  transform: translateY(calc(20 *(100vw / 1400)));
  transition: opacity 0.7s, transform 0.7s;
}

.l-container #feature .target[data-fade="slide"][data-is-active="true"] {
  opacity: 1;
  transform: translateY(0);
}

.l-container #feature .target[data-fade="text"] .js-text-list path {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.l-container #feature .target[data-fade="text"][data-is-active="true"] .js-text-list path {
  opacity: 1;
  transform: translateY(0);
}

.l-container #feature .target[data-fade="parent"] .fade-child {
  opacity: 0;
  transition: opacity 0.7s;
}

.l-container #feature .hero.target[data-fade="parent"] .fade-child {
  transition: opacity .8s linear .2s;
}

.l-container #feature .target[data-fade="parent"][data-is-active="true"] .fade-child {
  opacity: 1;
}

/* credit */

.l-container #feature .creditList .credit {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 *(100vw / 1400)) calc(8 *(100vw / 1400));
}

.l-container #feature .credit02 .credit,
.l-container #feature .credit03 .credit,
.l-container #feature .credit04 .credit,
.l-container #feature .credit05 .credit,
.l-container #feature .credit06 .credit,
.l-container #feature .credit07 .credit,
.l-container #feature .credit08 .credit {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.l-container #feature .credit02 .credit li,
.l-container #feature .credit03 .credit li,
.l-container #feature .credit04 .credit li,
.l-container #feature .credit05 .credit li,
.l-container #feature .credit06 .credit li,
.l-container #feature .credit07 .credit li,
.l-container #feature .credit08 .credit li {
  margin-top: 0.7rem;
}

.l-container #feature .creditList .credit li {
  border-bottom: calc(1 *(100vw / 1400)) solid #000;
}

.l-container #feature .creditList .credit li,
.l-container #feature .creditList .credit li a {
  color: #000;
  display: table;
  font-family: "roboto-slab", serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(12 *(100vw / 1400));
  letter-spacing: -0.01em;
  line-height: 1;
}

.l-container #feature .creditList .credit li .ja {
  font-family: "roboto-slab", serif;
  font-weight: 400;
  font-style: normal;
}

.l-container #feature .creditList .credit li .price {
  margin-left: calc(3 *(100vw / 1400));
}

.l-container #feature .credit01 {
  margin: calc(19 *(100vw / 1400)) 0 0 0;
  width: calc(320 *(100vw / 1400));
}

.l-container #feature .credit02 {
  position: absolute;
  bottom: calc(-4 *(100vw / 1400));
  left: calc(1192 *(100vw / 1400));
  width: calc(280 *(100vw / 1400));
}

.l-container #feature .credit03 {
  position: absolute;
  bottom: calc(-56 *(100vw / 1400));
  left: calc(1 *(100vw / 1400));
  width: calc(280 *(100vw / 1400));
}

.l-container #feature .credit04 {
  position: absolute;
  bottom: calc(-4 *(100vw / 1400));
  left: calc(489 *(100vw / 1400));
  width: calc(280 *(100vw / 1400));
}

.l-container #feature .credit05 {
  position: absolute;
  bottom: calc(-3 *(100vw / 1400));
  left: calc(278 *(100vw / 1400));
  width: calc(280 *(100vw / 1400));
}

.l-container #feature .credit06 {
  position: absolute;
  bottom: calc(-4 *(100vw / 1400));
  left: calc(524 *(100vw / 1400));
  width: calc(280 *(100vw / 1400));
}

.l-container #feature .credit07 {
  position: absolute;
  bottom: calc(-3 *(100vw / 1400));
  left: calc(465 *(100vw / 1400));
  width: calc(280 *(100vw / 1400));
}

.l-container #feature .credit08 {
  position: absolute;
  bottom: calc(25 *(100vw / 1400));
  left: calc(680 *(100vw / 1400));
  width: calc(280 *(100vw / 1400));
}

.l-container #feature .credit05 .credit li:nth-of-type(4) .txt {
  transform: translateX(-0.43vw);
}

.l-container #feature .credit05 .credit li:nth-of-type(4) .ja:nth-of-type(2) {
  margin: 0 calc(-1 *(100vw / 1400)) 0 0;
}

.l-container #feature .credit05 .credit li:nth-of-type(4) .price {
  margin: 0;
}

/* hero */

.l-container #feature .hero {
  margin: 0 auto;
  position: relative;
  width: 100%;
}

.l-container #feature .hero__mv {
  margin: 0 auto;
  position: relative;
  width: 100%;
}

.l-container #feature .hero__ttl {
  position: absolute;
  transition-delay: .8s !important;
  top: calc(603 *(100vw / 1400));
  right: calc(339 *(100vw / 1400));
  width: calc(703 *(100vw / 1400));
}

.l-container #feature .hero__vol {
  position: absolute;
  top: calc(888.5 *(100vw / 1400));
  left: 0;
  right: 0;
  margin: auto;
  width: calc(418 *(100vw / 1400));
}

.l-container #feature .hero__arrow {
  position: absolute;
  bottom: calc(32 *(100vw / 1400));
  left: calc(33 *(100vw / 1400));
  width: calc(5.6 *(100vw / 1400));
}

/* main */

.l-container #feature .sticky {
  background: #fff;
  border-top: calc(1 *(100vw / 1400)) solid #000;
  border-bottom: calc(1 *(100vw / 1400)) solid #000;
  position: sticky;
  top: 79.8px;
  height: calc(40 *(100vw / 1400));
  width: 100%;
  z-index: 10;
}

.l-container #feature .sticky__text {
  margin: calc(15 *(100vw / 1400)) auto 0;
  width: calc(298 *(100vw / 1400));
}

.l-container #feature .sec {
  margin: 0 auto;
  position: relative;
  width: 100%;
}

.l-container #feature .sec .inner {
  margin: 0 auto;
  position: relative;
  width: 100%;
}

.l-container #feature .sec .sec__flex {
  display: flex;
}

.l-container #feature .sec .sec__item,
.l-container #feature .sec .sec__img {
  position: relative;
}

.l-container #feature .sec .sec__concept {
  font-feature-settings: "palt";
  font-weight: 500;
  font-size: calc(18 *(100vw / 1400));
  letter-spacing: 0.05em;
  line-height: 2.1;
  text-align: center;
}

.l-container #feature .sec .sec__concept span:nth-of-type(2) {
  letter-spacing: 0.03em;
  margin-left: -0.5rem;
}

.l-container #feature .sec .sec__concept span:nth-of-type(3) {
  letter-spacing: 0.02em;
  margin-left: -0.4rem;
}

.l-container #feature .sec .sec__concept span:nth-of-type(4) {
  letter-spacing: 0.02em;
  margin-left: -0.4rem;
}

.l-container #feature .sec .sec__concept span:nth-of-type(5) {
  letter-spacing: 0.09em;
}

.l-container #feature .sec .sec__concept span:nth-of-type(7) {
  letter-spacing: 0;
  margin-left: 0;
}

.l-container #feature .sec .sec__concept span:nth-of-type(8) {
  letter-spacing: 0.02em;
  margin-left: -0.6rem;
}

/* sec01 */

.l-container #feature .sec01 {
  margin: calc(67 *(100vw / 1400)) auto 0;
}

.l-container #feature .sec01 .inner {
  width: 100%;
}

.l-container #feature .sec01 .sec__ttl {
  margin: calc(176 *(100vw / 1400)) auto 0;
  transition-delay: .3s !important;
  width: calc(512.42 *(100vw / 1400));
  transform: translateX(calc(3 *(100vw / 1400)));
}

.l-container #feature .sec01 .sec__text {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
  z-index: 2;
}

.l-container #feature .sec01 .item01 {
  margin: calc(55 *(100vw / 1400)) auto 0;
  width: calc(505 *(100vw / 1400));
  z-index: 1;
}

.l-container #feature .sec01 .img02 {
  margin: calc(189 *(100vw / 1400)) 0 0;
  width: calc(547 *(100vw / 1400));
}

.l-container #feature .sec01 .img03 {
  margin: calc(-697 *(100vw / 1400)) calc(214 *(100vw / 1400)) 0 auto;
  width: calc(320 *(100vw / 1400));
}

/* sec02 */

.l-container #feature .sec02 {
  margin: calc(295 *(100vw / 1400)) auto 0;
}

.l-container #feature .sec02 .flex01 {
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.l-container #feature .sec02 .img04 {
  width: calc(525 *(100vw / 1400));
  margin: 0 calc(214 *(100vw / 1400)) 0 auto;
}

.l-container #feature .sec02 .img05 {
  margin: calc(279 *(100vw / 1400)) 0 0 calc(428 *(100vw / 1400));
  width: calc(471 *(100vw / 1400));
}

.l-container #feature .sec02 .img06 {
  margin: calc(-638 *(100vw / 1400)) 0 0 0;
  width: calc(594 *(100vw / 1400));
}

/* sec03 */

.l-container #feature .sec03 {
  margin: calc(226 *(100vw / 1400)) auto 0;
}

.l-container #feature .sec03 .flex01 {
  align-items: flex-end;
  flex-direction: row-reverse;
  justify-content: space-between;
  margin: 0 0 0 auto;
  position: relative;
  width: calc(1320 *(100vw / 1400));
}

.l-container #feature .sec03 .img06 {
  width: calc(560 *(100vw / 1400));
}

.l-container #feature .sec03 .img07 {
  width: calc(874 *(100vw / 1400));
  margin: 0 0 0 calc(352 *(100vw / 1400));
  position: relative;
}

.l-container #feature .text_typing {
  width: calc(874 *(100vw / 1400));
  position: absolute;
  top: 0;
  right: 0;
}

.l-container #feature .sec03 .img08 {
  margin: calc(28 *(100vw / 1400)) 0 0 calc(82 *(100vw / 1400));
  width: calc(258 *(100vw / 1400));
}

.l-container #feature .sec03 .sec__article {
  width: calc(882 *(100vw / 1400));
  position: absolute;
  top: calc(29 *(100vw / 1400));
  right: calc(-332 *(100vw / 1400));
}

.l-container #feature .sec03 .img09 {
  margin: calc(245 *(100vw / 1400)) auto calc(82 *(100vw / 1400));
  width: calc(504 *(100vw / 1400));
}

/* sec04 */

.l-container #feature .sec04 {
  margin: calc(201 *(100vw / 1400)) auto 0;
}

.l-container #feature .sec04 .img10 {
  margin: 0 0 0 calc(258 *(100vw / 1400));
  width: calc(505 *(100vw / 1400));
}

.l-container #feature .sec04 .img11 {
  margin: calc(284 *(100vw / 1400)) 0 0 calc(148 *(100vw / 1400));
  width: calc(297 *(100vw / 1400));
}


.l-container #feature .sec04 .sec__flex {
  flex-direction: row-reverse;
  justify-content: space-between;
}

.l-container #feature .sec04 .item10 {
  margin: calc(-296 *(100vw / 1400)) 0 0 calc(290 *(100vw / 1400));
  pointer-events: all;
  width: calc(370 *(100vw / 1400));
}

/* sec05 */

.l-container #feature .sec05 {
  margin: calc(117 *(100vw / 1400)) auto 0;
}

.l-container #feature .sec05 .flex01 {
  align-items: flex-start;
  justify-content: space-between;
  margin: 0;
  position: relative;
  width: calc(1304 *(100vw / 1400));
}

.l-container #feature .sec05 .img12 {
  width: calc(675 *(100vw / 1400));
  margin-left: calc(-11 *(100vw / 1400));
}

.l-container #feature .sec05 .item13 {
  margin: calc(574 *(100vw / 1400)) 0 0;
  width: calc(265 *(100vw / 1400));
}

/* interview */

.l-container #feature .interview {
  background: #f0dbd9;
  margin: calc(219 *(100vw / 1400)) auto 0;
  padding: calc(137 *(100vw / 1400)) 0 calc(106 *(100vw / 1400));
  position: relative;
  width: 100%;
}

.l-container #feature .interview__ttl {
  margin: 0 auto;
  position: relative;
  width: calc(462 *(100vw / 1400));
  z-index: 2;
}

.l-container #feature .interview__img {
  margin: calc(45 *(100vw / 1400)) 0 0 calc(464 *(100vw / 1400));
  position: relative;
  transition-delay: .4s !important;
  width: calc(422 *(100vw / 1400));
  z-index: 1;
}

.l-container #feature .interview .flex01 {
  display: flex;
  flex-wrap: wrap;
  gap: calc(70 *(100vw / 1400)) 0;
  justify-content: space-between;
  margin: calc(102 *(100vw / 1400)) auto 0;
  width: calc(965 *(100vw / 1400));
  height: fit-content;
  transform: translateX(calc(3 *(100vw / 1400)));
}

.l-container #feature .interview__text {
  width: calc(450 *(100vw / 1400));
  height: fit-content;
}

.l-container #feature .interview__text:nth-child(2) {
  margin-top: calc(130 *(100vw / 1400));
}

.l-container #feature .interview__text:nth-child(3) {
  margin-top: calc(-133 *(100vw / 1400));
}

.l-container #feature .interview__text:nth-child(4) {
  margin-top: calc(-4 *(100vw / 1400));
}

.l-container #feature .interview__text:nth-child(5) {
  margin-top: calc(-157 *(100vw / 1400));
}

.l-container #feature .interview__text:nth-child(6) {
  margin-top: calc(-4 *(100vw / 1400));
}

.l-container #feature .interview__text p:nth-of-type(1) {
  font-weight: 600;
  font-size: calc(20 *(100vw / 1400));
  line-height: 1;
  text-align: left;
}

.l-container #feature .interview__text p:nth-of-type(2) {
  font-feature-settings: "palt";
  font-weight: 400;
  font-size: calc(18 *(100vw / 1400));
  line-height: 1.5555;
  margin: calc(22 *(100vw / 1400)) 0 0;
  text-align: justify;
  width: calc(446 *(100vw / 1400));
}

.l-container #feature .interview__text__ttl02 {
  letter-spacing: 0.015em;
}

.l-container #feature .interview__text__ttl03 {
  letter-spacing: -0.015em;
}

.l-container #feature .interview__text__ttl04 {
  letter-spacing: -0.05em;
}

.l-container #feature .interview__text__ttl05 {
  letter-spacing: 0.02em;
}

.l-container #feature .interview__text__ttl06 {
  letter-spacing: -0.015em;
}

.l-container #feature .interview__text__text01 {
  letter-spacing: -0.013em;
}

.l-container #feature .interview__text__text02 {
  letter-spacing: -0.013em;
}

.l-container #feature .interview__text__text03 {
  letter-spacing: -0.05em;
}

.l-container #feature .interview__text__text03 span {
  letter-spacing: -0.06em;
}

.l-container #feature .interview__text__text04 span {
  letter-spacing: -0.01em;
}

.l-container #feature .interview__text__text05 {
  letter-spacing: -0.01em;
}

.l-container #feature .interview__text__text06 {
  letter-spacing: -0.01em;
}


.l-container #feature .interview__btn {
  margin: calc(126 *(100vw / 1400)) auto 0;
  width: calc(447 *(100vw / 1400));
}

.l-container #feature .interview__note {
  font-feature-settings: "palt";
  font-size: calc(12 *(100vw / 1400));
  letter-spacing: -0.03em;
  line-height: 1.7691;
  margin: calc(36 *(100vw / 1400)) auto 0;
  text-align: center;
}

@media screen and (max-width: 1401px) {}

.l-footer {
  padding: 0;
}

.pc-footer {
  margin: 0;
}