@charset "UTF-8";

/* ===================================================
   基本設定・PCレイアウト枠組み
=================================================== */
.feature {
  --lpSetSize: (100vw / 1400) * 0.6666666;
  width: 100%;
  display: flex;
  font-family: "Gilda Display", serif;
  font-weight: 400;
  font-style: normal;
  color: #000000;
  background: #eff2f4;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
}

.l-container {
  width: 100%;
}

.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;
  transition: opacity 0.3s;
}

.feature a:hover {
  cursor: pointer;
  opacity: 0.7;
}

.feature .sec__img {
  background: #ffffff;
}

.l-footer {
  padding-top: 0 !important;
}

.pc-footer {
  margin-top: 0 !important;
}

/* ===================================================
   フォント指定
=================================================== */
.gilda-display-regular {
  font-family: "Gilda Display", serif;
  font-weight: 400;
  font-style: normal;
}

/* ===================================================
   PC固有 3カラム配置 (sticky)
=================================================== */
.feature .f_left,
.feature .f_right {
  width: calc((100% - (500 * (100vw / 1400))) / 2);
  position: sticky;
  height: calc(100vh - 80px);
  top: 80px;
}

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

.feature .f_left .f_left__box,
.feature .f_right .f_right__box {
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.feature .f_left__img {
  width: calc(200 * (100vw / 1400));
  margin: 0 auto;
}

.feature .f_right__btn {
  width: calc(260 * (100vw / 1400));
  margin: 0 auto;
}

/* ===================================================
   hero セクション
=================================================== */
.feature .hero {
  position: relative;
  width: 100%;
}

.feature .hero_img {
  width: 100%;
  margin: 0 auto;
}

.feature .hero_title {
  width: calc(480 * var(--lpSetSize));
  margin: calc(80 * var(--lpSetSize)) auto calc(60 * var(--lpSetSize));
}

/* ===================================================
   クレジット共通スタイル
=================================================== */
.feature .sec__credit {
  display: flex;
  gap: calc(8 * var(--lpSetSize));
  font-size: calc(24 * var(--lpSetSize));
  line-height: 1.4;
}

.feature .sec__credit .credit {
  display: flex;
  flex-wrap: wrap;
}

.feature .sec__credit .credit li {
  position: relative;
  display: flex;
}

.feature .sec__credit .credit a {
  display: flex;
  gap: calc(10 * var(--lpSetSize));
}

.feature .sec__credit .credit li::after {
  content: "/";
  margin: 0 calc(8 * var(--lpSetSize));
}

.feature .sec__credit .credit li:last-of-type::after {
  content: none !important;
}

/* ===================================================
   個別画像＆クレジット設定 (margin・width調整可能)
   ※全画像ボックスに position: relative を付与
=================================================== */

/* img01 / img02 スライダー ＆ credit01 */
.feature .img_slider_wrap {
  position: relative;
  width: calc(700 * var(--lpSetSize));
  margin: calc(80 * var(--lpSetSize)) auto 0;
}

.feature .img_box01 {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.feature .img_box02 {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.feature .sec__credit01 {
  width: calc(680 * var(--lpSetSize));
  margin: calc(12 * var(--lpSetSize)) auto;
  justify-content: center;
}

.feature .sec__credit01 .credit {
  justify-content: center;
}

/* img03 */
.feature .img_box03 {
  position: relative;
  width: 100%;
  margin: calc(102 * var(--lpSetSize)) auto 0;
}

/* img04 ＆ credit02 */
.feature .img_box04 {
  position: relative;
  width: calc(548 * var(--lpSetSize));
  margin: calc(0 * var(--lpSetSize)) auto 0;
}

.feature .sec__credit02 {
  width: 100%;
  margin: calc(12 * var(--lpSetSize)) auto 0 calc(-42 * var(--lpSetSize));
  justify-content: center;
}

.feature .sec__credit02 .credit {
  justify-content: center;
}

/* img05 ＆ credit03 (画像上に縦書き配置) */
.feature .img_box05 {
  position: relative;
  width: calc(700 * var(--lpSetSize));
  margin: calc(100 * var(--lpSetSize)) auto 0 0;
}

.feature .sec__credit03 {
  position: absolute;
  bottom: calc(12 * var(--lpSetSize));
  right: calc(-38 * var(--lpSetSize));
  writing-mode: vertical-lr;
  transform: rotate(360deg);
  letter-spacing: 0.08em;
  color: #000000;
  z-index: 2;
}

.feature .sec__credit03 .credit li::after {
  margin: calc(8 * var(--lpSetSize)) 0;
}

/* img06 */
.feature .img_box06 {
  position: relative;
  width: calc(550 * var(--lpSetSize));
  margin: calc(0 * var(--lpSetSize)) 0 calc(90 * var(--lpSetSize)) calc(200 * var(--lpSetSize));
}

/* img07 ＆ credit04 (画像上に縦書き配置・白文字) */
.feature .img_box07 {
  position: relative;
  width: 100%;
  margin: calc(108 * var(--lpSetSize)) auto 0;
}

.feature .sec__credit04 {
  position: absolute;
  bottom: calc(20 * var(--lpSetSize));
  right: calc(13 * var(--lpSetSize));
  writing-mode: vertical-lr;
  transform: rotate(360deg);
  letter-spacing: 0.08em;
  color: #ffffff;
  z-index: 2;
}

.feature .sec__credit04 .credit li::after {
  margin: calc(8 * var(--lpSetSize)) 0;
}

/* img08 */
.feature .img_box08 {
  position: relative;
  width: calc(549 * var(--lpSetSize));
  margin: calc(0 * var(--lpSetSize)) auto 0 0;
}

/* img09 ＆ img10 (横並び) */
.feature .img_box09_10 {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: calc(4 * var(--lpSetSize)) auto 0;
  gap: 0;
}

.feature .img_box09,
.feature .img_box10 {
  position: relative;
  width: 50%;
  margin: calc(-4 * var(--lpSetSize)) auto 0;
}

/* img11 ＆ credit05 */
.feature .img_box11 {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.feature .sec__credit05 {
  width: calc(680 * var(--lpSetSize));
  margin: calc(15 * var(--lpSetSize)) auto 0;
  justify-content: center;
}

.feature .sec__credit05 .credit {
  justify-content: center;
}

/* img12 */
.feature .img_box12 {
  position: relative;
  width: calc(600 * var(--lpSetSize));
  margin: calc(98 * var(--lpSetSize)) auto 0;
}

/* img13 ＆ credit06 */
.feature .img_box13 {
  position: relative;
  width: calc(600 * var(--lpSetSize));
  margin: 0 auto;
}

.feature .sec__credit06 {
  width: 100%;
  margin: calc(12 * var(--lpSetSize)) auto 0 calc(-16 * var(--lpSetSize));
  justify-content: center;
}

.feature .sec__credit06 .credit {
  justify-content: center;
}

/* img14 */
.feature .img_box14 {
  position: relative;
  width: 100%;
  margin: calc(104 * var(--lpSetSize)) auto 0;
}

/* img15 */
.feature .img_box15 {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

/* img16 ＆ credit07 */
.feature .img_box16 {
  position: relative;
  width: calc(549 * var(--lpSetSize));
  margin: calc(0 * var(--lpSetSize)) auto calc(90 * var(--lpSetSize)) 0;
}

.feature .sec__credit07 {
  position: absolute;
  bottom: calc(0 * var(--lpSetSize));
  right: calc(-54 * var(--lpSetSize));
  writing-mode: vertical-lr;
  transform: rotate(360deg);
  letter-spacing: 0.08em;
  color: #000000;
  z-index: 2;
}

.feature .sec__credit07 .credit {
  justify-content: center;
}

.feature .sec__credit07 .credit li::after {
  margin: calc(8 * var(--lpSetSize)) 0;
}

/* img17 ＆ credit08 */
.feature .img_box17 {
  position: relative;
  width: 100%;
  margin: calc(113 * var(--lpSetSize)) auto;
}

.feature .sec__credit08 {
  width: 100%;
  margin: calc(11 * var(--lpSetSize)) auto 0;
  justify-content: center;
}

.feature .sec__credit08 .credit {
  justify-content: center;
}

/* img18 */
.feature .img_box18 {
  position: relative;
  width: calc(550 * var(--lpSetSize));
  margin: calc(-18 * var(--lpSetSize)) 0 calc(90 * var(--lpSetSize)) calc(200 * var(--lpSetSize));
}

/* img19 */
.feature .img_box19 {
  position: relative;
  width: calc(500 * var(--lpSetSize));
  margin: calc(-90 * var(--lpSetSize)) auto 0 0;
}

/* img20 */
.feature .img_box20 {
  position: relative;
  width: 100%;
  margin: calc(0 * var(--lpSetSize)) auto 0;
}

/* ===================================================
   bottom (all_items.svg)
=================================================== */
.feature .sec_bottom {
  width: 100%;
  margin: calc(104 * var(--lpSetSize)) auto 0;
  padding-bottom: calc(100 * var(--lpSetSize));
}

.feature .bottom_all_items {
  width: calc(600 * var(--lpSetSize));
  margin: 0 auto;
}

/* ===================================================
   Slick スライダードット（インジケーター）
=================================================== */
.feature .img_slider_wrap .slider_fade {
  position: relative;
}

.feature .img_slider_wrap .slick-dots {
  position: absolute;
  bottom: calc(20 * var(--lpSetSize));
  right: calc(20 * var(--lpSetSize));
  display: flex !important;
  gap: calc(12 * var(--lpSetSize));
  z-index: 5;
}

.feature .img_slider_wrap .slick-dots li {
  width: calc(14 * var(--lpSetSize));
  height: calc(14 * var(--lpSetSize));
}

.feature .img_slider_wrap .slick-dots li button {
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: calc(1.5 * var(--lpSetSize)) solid #ffffff;
  text-indent: -9999px;
  cursor: pointer;
}

.feature .img_slider_wrap .slick-dots li.slick-active button {
  background: #ffffff;
}

/* ===================================================
   アニメーション (.is_fade-up)
=================================================== */
.js_anime.is_fade-up {
  opacity: 0;
  -webkit-transform: translateY(40px);
  transform: translateY(40px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
  transition-delay: 0.1s;
}

.js_anime.is_show.is_fade-up {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/* ===================================================
   PC固定幅 (1400px以上)
=================================================== */
@media screen and (min-width: 1400px) {
  .feature {
    --lpSetSize: 1px * 0.6666666;
  }

  .feature .f_left,
  .feature .f_right {
    width: calc((100% - 500px) / 2);
  }

  .feature .f_main {
    width: 500px;
  }

  .feature .f_left__img {
    width: 306px;
  }

  .feature .f_right__btn {
    width: 276px;
  }
}

.efs-system-notification { display: none !important; }