@charset "UTF-8";
:root {
  --vw: calc(100vw / 1400) * var(--ratio);
  --ratio: calc(var(--pc-width) / 750);
  --pc-width: 440;
  --pcVw: calc(100vw / 1400);
}

/* 共通設定
----------------------------*/
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

.l-container {
  width: 100%;
}

.l-header,
.l-footer {
  padding: 0;
  position: relative;
  z-index: 999;
  background-color: #fff;
  overflow-x: clip;
}

.pc-footer {
  margin: 0;
}

#feature {
  width: 100%;
  margin: 0 auto;
  color: #000;
  box-sizing: border-box;
  font-style: normal;
  font-feature-settings: "palt";
  position: relative;
  overflow: clip;
}

#feature * {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

#feature a {
  width: 100%;
  height: auto;
  display: block;
  color: #000;
  text-decoration: none;
}

#feature a:hover {
  opacity: 1;
}

#feature img,
#feature svg {
  width: 100%;
  height: auto;
  display: block;
}

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

/* 全体 Wrap (背景＋3カラム)
----------------------------*/
#feature .contentsWrap {
  display: grid;
  grid-template-columns: 1fr calc(460 * var(--pcVw)) 1fr;
  width: 100%;
  position: relative;
  background-size: cover;
  background-attachment: fixed;
}

#feature .mainWrap {
  order: 2;
  background-color: #fff;
}

#feature .mainWrap .inner {
  width: calc(440 * var(--pcVw));
  background-color: #fff;
  margin: 0 auto;
  position: relative;
  overflow: clip;
  z-index: 2;
}

/* 左右 固定エリア
----------------------------*/
#feature .leftWrap {
  order: 1;
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#feature .leftWrap .leftWrap__logo {
  width: calc(302 * var(--pcVw));
}

#feature .rightWrap {
  order: 3;
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  display: flex;
  justify-content: center;
  align-items: center;
}

#feature .rightWrap .rightWrap__all-btn {
  width: calc(237 * var(--pcVw));
}

/* アニメーション (.js-blur)
----------------------------*/
#feature .js-blur {
  transform: scale(1.02);
  opacity: 0;
  filter: blur(10px);
  transition: filter 1s, opacity 1s, transform 1s;
}

#feature .js-blur.is-show {
  transform: scale(1);
  opacity: 1;
  filter: blur(0px);
}

/* 下から上へスライドインアニメーション (.js-text-up)
----------------------------*/
#feature .js-text-up {
  overflow: hidden;
  display: block;
}

#feature .js-text-up span {
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  display: block;
  width: 100%;
}

#feature .js-text-up.is-show span {
  transform: translateY(0);
}

#feature .js-text-up.--1.is-show span {
  transition-delay: 0.2s !important;
}

#feature .js-text-up.--2.is-show span {
  transition-delay: 0.4s !important;
}

/* スライダー設定 (sec04用)
----------------------------*/
#feature .swiper-pagination {
  width: fit-content;
  left: auto;
  right: calc(20 * var(--vw));
  transform: none;
  display: flex;
  gap: calc(14 * var(--vw));
  bottom: calc(23 * var(--vw));
}

#feature .swiper-pagination-bullet {
  width: calc(14 * var(--vw));
  height: calc(14 * var(--vw));
  background-color: transparent;
  border: calc(2 * var(--vw)) solid #000;
  cursor: pointer;
  margin: 0px !important;
  opacity: 1;
}

#feature .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #000;
  border: none;
}

/* メインビジュアル（.hero)
----------------------------*/
#feature .hero {
  position: relative;
}

#feature .hero .hero__img {
  width: calc(750 * var(--vw));
}

#feature .hero .hero_text_wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 10;
}

/* リード・キャンペーン
----------------------------*/
#feature .lead {
  margin: calc(123 * var(--vw)) auto calc(109 * var(--vw));
  width: calc(560 * var(--vw));
}

#feature .lead_wrapper {
  display: flex;
  flex-direction: column;
  gap: calc(22.7 * var(--vw));
  align-items: center;
}

#feature .campaign {
  margin: 0 auto calc(179 * var(--vw));
  width: calc(600 * var(--vw));
}

/* 各セクション共通 (.sec)
----------------------------*/
#feature .sec {
  position: relative;
  z-index: 1;
}

#feature .sec__title {
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  width: 100%;
}

#feature .sec__title_wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#feature .sec__box {
  margin: 0 auto;
  width: calc(750 * var(--vw));
}

#feature .sec__img.img-main {
  width: 100%;
}

/* 2x2 グリッドレイアウト */
#feature .sec__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  list-style: none;
}

#feature .sec__grid li {
  width: 100%;
  position: relative;
}

#feature .sec__grid li a {
  display: block;
  width: 100%;
  height: 100%;
}

#feature .sec__grid img {
  width: 100%;
  height: 100%;
  aspect-ratio: 375 / 480;
  object-fit: cover;
}

#feature .sec__grid li::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-bottom: 2px solid #000;
}

#feature .sec__grid li:nth-child(-n+2)::after {
  border-top: 2px solid #000;
}

#feature .sec__grid li:nth-child(odd)::after {
  border-right: 2px solid #000;
}

/* クレジット */
#feature .sec__credit {
  margin-top: calc(40 * var(--vw));
  text-align: center;
  width: 100%;
}

#feature .sec__credit .credit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(2 * var(--vw)) calc(24 * var(--vw));
  font-family: "area-variable", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 500, "INKT" 0;
  font-style: normal;
  font-size: calc(19 * var(--vw));
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
  max-width: calc(520 * var(--vw));
  margin: 0 auto;
}

#feature .sec__credit .credit > * {
  flex: 0 0 auto;
  width: auto;
}

#feature .credit01 .credit {
  max-width: calc(400 * var(--vw));
  margin: 0 auto;
}

/* BOTTOM & STAFF */
#feature .img-bottom-all {
  width: 100%;
}

#feature .sec__bottom .sec__all-btn {
  width: 100%;
  margin: calc(180 * var(--vw)) 0 calc(180 * var(--vw));
}

#feature .sec__staff {
  width: calc(388 * var(--vw));
  margin: 0 auto calc(180 * var(--vw));
}

#feature .img-staff {
  width: 103%;
  margin: calc(-57 * var(--vw)) auto calc(180 * var(--vw)) calc(-5 * var(--vw));
}

/* ==================================================
   個別画像・テキスト枠サイズ＆位置指定
================================================== */

#feature .img-pc-left {
  width: 111%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

#feature .img-pc-right {
  width: 110%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* HEROエリア（位置指定＆マスク枠調整） */
#feature .hero-txt-box01 {
  position: absolute;
  top: calc(-48 * var(--vw));
  left: calc(50 * var(--vw));
  width: calc(125 * var(--vw));
  overflow: hidden;
}

#feature .hero-txt-box02 {
  position: absolute;
  top: calc(-12 * var(--vw));
  left: calc(34 * var(--vw));
  width: calc(678 * var(--vw));
  overflow: hidden;
}

#feature .hero-txt-box03 {
  position: absolute;
  top: calc(65 * var(--vw));
  right: calc(50 * var(--vw));
  width: calc(248 * var(--vw));
  overflow: hidden;
}

/* LEADエリア */
#feature .img-lead-01 {
  width: calc(165 * var(--vw));
  margin: 0 auto;
}

#feature .img-lead-02 {
  width: calc(565 * var(--vw));
  margin: 0 auto 0 calc(-5 * var(--vw));
}

#feature .img-lead-03 {
  width: calc(246 * var(--vw));
  margin: 0 auto;
}

/* CAMPAIGNエリア */
#feature .img-campaign {
  width: calc(540 * var(--vw));
  margin: 0 auto;
}

/* SEC01 タイトル枠 */
#feature .sec01 .sec__title_wrapper .js-text-up:nth-child(1) {
  width: calc(445 * var(--vw));
  margin: calc(48 * var(--vw)) auto calc(24 * var(--vw)) calc(40 * var(--vw));
}

#feature .sec01 .sec__title_wrapper .js-text-up:nth-child(2) {
  width: calc(463 * var(--vw));
  margin: 0 auto calc(24 * var(--vw)) calc(38 * var(--vw));
}

#feature .sec01 .sec__title_wrapper .js-text-up:nth-child(3) {
  width: calc(260 * var(--vw));
  margin: 0 auto calc(48 * var(--vw)) calc(40 * var(--vw));
}

/* SEC02 タイトル枠 */
#feature .sec02 {
  margin: calc(175 * var(--vw)) auto 0;
}

#feature .sec02 .sec__title .js-text-up {
  width: calc(544 * var(--vw));
  margin: calc(51 * var(--vw)) auto calc(49 * var(--vw));
}

/* SEC03 タイトル枠 */
#feature .sec03 {
  margin: calc(177 * var(--vw)) auto 0;
}

#feature .sec03 .sec__title_wrapper .js-text-up:nth-child(1) {
  width: calc(410 * var(--vw));
  margin: calc(48 * var(--vw)) auto calc(23 * var(--vw)) calc(300 * var(--vw));
}

#feature .sec03 .sec__title_wrapper .js-text-up:nth-child(2) {
  width: calc(430 * var(--vw));
  margin: 0 auto calc(50 * var(--vw)) calc(280 * var(--vw));
}

/* SEC04 タイトル枠 */
#feature .sec04 {
  margin: calc(177 * var(--vw)) auto 0;
}

#feature .sec04 .sec__title_wrapper .js-text-up:nth-child(1) {
  width: calc(458 * var(--vw));
  margin: calc(50 * var(--vw)) auto calc(25 * var(--vw)) calc(150 * var(--vw));
}

#feature .sec04 .sec__title_wrapper .js-text-up:nth-child(2) {
  width: calc(124 * var(--vw));
  margin: 0 auto calc(52 * var(--vw)) calc(314 * var(--vw));
}

/* SEC05 タイトル枠 */
#feature .sec05 {
  margin: calc(178 * var(--vw)) auto 0;
}

#feature .sec05 .sec__title_wrapper .js-text-up:nth-child(1) {
  width: calc(445 * var(--vw));
  margin: calc(49 * var(--vw)) auto calc(24 * var(--vw)) calc(42 * var(--vw));
}

#feature .sec05 .sec__title_wrapper .js-text-up:nth-child(2) {
  width: calc(346 * var(--vw));
  margin: 0 auto calc(56 * var(--vw)) calc(38 * var(--vw));
}

#feature .img-hero-txt01,
#feature .img-hero-txt02,
#feature .img-hero-txt03,
#feature .img-sec01-txt01,
#feature .img-sec01-txt02,
#feature .img-sec01-txt03,
#feature .img-sec02-txt01,
#feature .img-sec03-txt01,
#feature .img-sec03-txt02,
#feature .img-sec04-txt01,
#feature .img-sec04-txt02,
#feature .img-sec05-txt01,
#feature .img-sec05-txt02 {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 !important;
}

/* 1400px以上 センターエリア固定化
----------------------------*/
@media screen and (min-width: 1401px) {
  :root {
    --vw: 1px * var(--ratio);
  }

  #feature .contentsWrap {
    grid-template-columns: 1fr 460px 1fr;
  }

  #feature .mainWrap .inner {
    width: 440px;
  }

  #feature .leftWrap .leftWrap__logo {
    width: 302px;
  }

  #feature .rightWrap .rightWrap__all-btn {
    width: 237px;
  }
}