@charset "UTF-8";
/*! toppage
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

# 

# Hero

# NextStage-section

# Concept-section

# FullView-section
--------------------------------------------------------------*/

.home {
  --hero-black: #1b1b1b;
}

.site-main > .section.section--colored {
  padding-bottom: clamp(11.5rem, 9.034rem + 2.89vw, 12.5rem);
}
.site-main > .section:where(:not(:last-of-type)) {
  padding-bottom: clamp(9.5rem, 8.267rem + 1.44vw, 10rem);
}

@media (width < 64rem) {
  .site-main > .section.section--colored {
    padding-bottom: clamp(7rem, 4.4rem + 11.09vw, 11.5rem);
  }
  .site-main > .section:where(:not(:last-of-type)) {
    padding-bottom: clamp(5rem, 2.4rem + 11.09vw, 9.5rem);
  }
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
.hero {
  background-image: url(../img/bg-graph-paper.svg);
  background-color: var(--primary);
}

.hero > .inner {
  display: flex;
  justify-content: space-between;
  height: clamp(51.25rem, 1.25rem + 50vw, 61.25rem);
  overflow: hidden;
  max-width: 1920px;
  margin-inline: auto;
}
.hero .body {
  flex: 1;
}

.hero .thumb {
  display: flex;
}
.hero .thumb .img {
  margin-right: 8px;
}
.hero .body .visual {
  font-weight: 900;
  font-size: clamp(26.813rem, 4.621rem + 25.99vw, 35.813rem);
  display: flex;
  flex-direction: column;
  line-height: 1;
  align-items: center;
  margin-top: 30px;
}
.hero .body .visual .img {
  background-image: url(../img/img-bg-kv-text.webp);
  background-color: var(--light);
  background-size: contain;
  background-position: left;
  background-clip: text;
  color: transparent;
}

.hero .body .visual .text {
  font-size: 39%;
  margin-top: -0.9em;
  color: var(--hero-black);
}
.hero .body .heading {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--light);
  font-size: min(80 / 1600 * 100vw, 80px);
  font-size: clamp(3.625rem, 0.235rem + 3.97vw, 5rem);
  max-width: min-content;
  margin-top: 0.6em;
  margin-inline: auto;
}
.hero .body .heading .catch {
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  font-weight: 500;
}
.hero .body .heading .text {
  font-size: min(22 / 1600 * 100vw, 22px);
  font-weight: 400;
}

.hero .thumb .to-top {
  margin-top: -60px;
}

.hero .thumb .img img {
  aspect-ratio: 432 / 243;
}

@media (width < 87.5rem) {
  .hero > .inner {
    height: 43rem;
  }
  .hero .body .visual {
    margin-top: 0;
    font-size: clamp(13.75rem, 6.202rem + 32.2vw, 26.813rem);
  }
  .hero .body .heading {
    margin-top: 0.3em;
    font-size: clamp(1.875rem, 0.864rem + 4.31vw, 3.625rem);
  }
  .hero .body .heading .text {
    font-size: clamp(0.875rem, 0.586rem + 1.23vw, 1.375rem);
  }
}
@media (width < 75rem) {
  .hero .body .visual {
    zoom: 0.875;
  }
}
@media (width < 64rem) {
  .hero > .inner {
    flex-direction: column;
    min-height: unset;
    height: auto;
    padding-inline: var(--side);
    row-gap: clamp(1.75rem, 1.034rem + 3.05vw, 2.5rem);
  }
  .hero .body .visual {
    zoom: unset;
    font-size: clamp(13.75rem, 6.202rem + 32.2vw, 26.813rem);
  }
  .hero .thumb .to-top {
    /* margin-top: 0; */
  }
  .hero .thumb .img {
    margin-inline-end: clamp(8px, 2vw, 16px);
  }
  .hero .thumb {
    max-width: 696px;
    height: calc(204 / 375 * 100vw - clamp(8px, 2vw, 16px));
    overflow: hidden;
    justify-content: center;
    margin-inline: auto;
    padding-bottom: clamp(0.5rem, 0.023rem + 2.04vw, 1rem);
  }
  .hero .thumb .img:last-of-type {
    margin-inline-end: 0;
  }
}

/* ずれ対策 */
.hero .splide:not(.is-initialized) .splide__slide:nth-child(n + 2) {
  display: none;
}
.hero .splide:not(.is-initialized) .splide__slide {
  width: min(360/1600 * 100vw, 360px);
}
@media (max-width: 1366px) {
  .hero .splide:not(.is-initialized) .splide__slide {
    width: min(256/1366 * 100vw, 256px);
  }
}

/*--------------------------------------------------------------
# NextStage-section
--------------------------------------------------------------*/
.section-01 {
  background: var(--bg-section-type01);
  padding-top: clamp(9.063rem, 6.751rem + 2.71vw, 10rem);
}

.section-01 .card-list {
  display: flex;
  justify-content: space-between;
  gap: clamp(2.5rem, 1.267rem + 1.44vw, 3rem);
  flex-wrap: wrap;
  margin-top: 48px;
}
.section-01 .card-list .card {
  flex: 1;
  max-width: 100%;
}

.section-01 .section-desc {
  line-height: 2;
}

@media (width < 87.5rem) {
  .section-01 .card-list {
    justify-content: center;
  }
  .section-01 .section-desc {
    line-height: 1.75;
  }
}
@media (width < 64rem) {
  .section-01 .card-list .card {
    flex: 100%;
    max-width: 480px;
  }
  .section-01 {
    padding-top: clamp(5rem, 3.555rem + 6.16vw, 7.5rem);
  }
  .section-01 .card-list {
    margin-top: clamp(2rem, 1.046rem + 4.07vw, 3rem);
    gap: clamp(2rem, 1.046rem + 4.07vw, 3rem);
  }
}

/*--------------------------------------------------------------
# Concept-section
--------------------------------------------------------------*/
.section-02_eyecatch {
  aspect-ratio: 1920 / 500;
  margin-bottom: -1px; /* 特定の小数値で隙間があくため */
  display: block;
  width: 100%;
  object-fit: cover;
  filter: drop-shadow(0px 0px #000); /* 黒い線が出るため */
}
.section-02_heading {
  background: linear-gradient(
    to bottom,
    var(--gradation-color-1),
    var(--gradation-color-2)
  );
  color: #fff;
  --color: currentColor;
  flex: 43%;
  padding-inline-end: min(80 / 1920 * 100vw, 80px);
  padding-block: 80px;
}
.section-02_desc {
  line-height: 2;
}

.section-02 .card-list {
  flex: 57%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  margin-left: 1px;
  margin-top: 1px;
}
.section-02 .card-list > li {
  flex: 0 0 50%;
}

@media (width < 87.5rem) {
  .section-02_heading {
    width: 39%;
  }
  .section-02 .card-list > li {
    height: 33.333%;
  }
  .section-02 .wide-card {
    aspect-ratio: unset;
    height: 100%;
  }
}

@media (width < 64rem) {
  .section-02 .card-list > li {
    height: auto;
  }
  .section-02 .section-02_heading {
    width: 100%;
    padding-inline-start: var(--side);
    padding-block: clamp(3rem, 2.653rem + 1.48vw, 3.6rem);
  }
  .section-02 .wide-card {
    aspect-ratio: var(--aspect);
    height: auto;
  }
  .section-02_concept-box > * {
    grid-column: 1 / 4;
  }
}

@media (width < 48rem) {
  .section-02 .card-list > li {
    flex: 100%;
  }
  .section-02 .section-02_heading {
    width: 100%;
  }
  .section-02 .wide-card {
    aspect-ratio: 3.3 / 1;
  }
}

@media (width < 30rem) {
  .section-02 .wide-card {
    aspect-ratio: 375 / 184;
  }
}

/*--------------------------------------------------------------
# FullView-section
--------------------------------------------------------------*/
.section-03 .head {
  margin-bottom: 0;
}
.section-03 .view-img {
  position: relative;
  margin-top: 60px;
}
.section-03 .view-img_bg {
  max-width: none;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 600;
}
.c-pin {
  /* isolation: isolate; */
  position: absolute;
}

.c-pin .icon {
  width: clamp(2.844rem, -0.007rem + 3.34vw, 4rem);
  height: auto;
  aspect-ratio: 64 / 93;
  display: block;
  transition: opacity 0.8s ease-in;
}

.c-pin--hover .icon--on {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  max-width: none;
  height: 100%;
  width: auto;
  /* opacity: 0; */
  visibility: hidden;
  clip-path: inset(0 85% 0 0);
  transition:
    opacity 0.8s ease-in,
    clip-path 0.8s ease-out,
    visibility 0.8s ease-out;
}

.c-pin--hover:focus-visible .icon {
  opacity: 0;
}
.c-pin--hover:focus-visible .icon--on {
  opacity: 1;
  visibility: visible;
  clip-path: inset(0 0 0 0);
}

@media (any-hover: hover) {
  .c-pin--hover:hover .icon {
    opacity: 0;
  }
  .c-pin--hover:hover .icon--on {
    opacity: 1;
    visibility: visible;
    clip-path: inset(0 0 0 0);
  }
}
@media not (any-hover: hover) {
  .c-pin--hover .icon {
    opacity: 0;
  }
  .c-pin--hover .icon--on {
    opacity: 1;
    visibility: visible;
    clip-path: inset(0 0 0 0);
  }
}

.c-pin--01 {
  bottom: 28.0722%;
  left: 27.083%;
}

.c-pin--02 {
  left: 34.948%;
  top: 20.6896%;
}
.c-pin--03 {
  left: 41.823%;
  top: 11.9869%;
}
.c-pin--04 {
  bottom: 22.8177%;
  right: 30.104%;
}
.c-pin--05 {
  bottom: 18.3826%;
  right: 23.4114%;
}

@media (width < 87.5rem) {
  .section-03 .c-pin .icon {
    width: clamp(0.813rem, -0.125rem + 4vw, 2.875rem);
  }
}

/* フルビューセクションを表示する際に外す */

.site-main > .section {
  padding-bottom: clamp(9.5rem, 8.267rem + 1.44vw, 10rem);
}

@media (width < 64rem) {
  .site-main > .section {
    padding-bottom: clamp(5rem, 2.4rem + 11.09vw, 9.5rem);
  }
}