@charset 'UTF-8';

/* ========================================
	style
======================================== */

/* --------- opening animation --------- */

body {
  background: var(--gray-100);
}

body:not(.is-loaded) {
  block-size: 100%;
  overflow: hidden;
}

article {
  padding-bottom: 0;
}

/* 上下に開くように見せる要素 */
.loading__top,
.loading__bottom {
  inline-size: 100%;
  block-size: 50%;
  background: var(--gray-100);
  position: absolute;
  left: 0;
  z-index: -1;
  transition: top 0.6s ease-in-out 0s;
}

.loading__top {
  top: 0%;
}

.loading__bottom {
  top: 50%;
}

.is-loaded .loading__top {
  top: -50%;
}

.is-loaded .loading__bottom {
  top: 100%;
}

.is-loaded .loading__container {
  background: transparent;
}

.loading__container {
  position: fixed;
  inset: 0;
  z-index: 11;
  background: var(--gray-100);
  transition: background-color 0.2s ease;
}

.progress__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  block-size: 100vh;
  gap: 9.4rem 0;
}

.progress__inner {
  position: relative;
  inline-size: 100%;
}

.progress__image {
  inline-size: min(100%, 160px);
  margin-inline: auto;
}

.progress__text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gray-100);
  font: 400 1.6rem/1.85 var(--font-family-en);
  color: var(--nawa-green);
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 7rem;
  block-size: 14px;
}

.progress__bar>span {
  display: block;
  block-size: 2px;
}

.progress__bar>span:not(:first-child) {
  margin-top: 4px;
}

.progress__bar--green {
  background: var(--nawa-green);
}

.progress__bar--red {
  background: var(--nawa-red);
}

.progress__bar--blue {
  background: var(--nawa-blue);
}

/* --------- グローバルヘッダー（トップページのみ外観変更） --------- */

.global-header__logo img:not(.is-active) {
  display: none;
}

/* --------- 汎用要素（common.cssに整理） --------- */

/* 汎用ボタンリンク（global.css上書き） */
.square-button__container {
  margin-top: 7rem;
}

/* --------- セクション共通設定 --------- */

.section-title {
  font: 400 clamp(7rem, 4.6704rem + 6.21vw, 12rem) / 1 var(--font-family-en);
}

.section-title--ja {
  display: block;
  font-size: 1.8rem;
  font-weight: 600;
  padding-left: 0.1em;
}

.section-title--en {
  display: inline-block;
}

.section-title--en span:not(:first-child) {
  color: var(--text-base);
}

.section-copy {
  font-size: 1.4rem;
  font-weight: 600;
  margin-top: 2.6rem;
}

/* 文字出現アニメーション用ラップ要素（JSで自動挿入） */
.anime-wrap {
  display: inline-block;
  overflow: hidden;
}

.anime-wrap span {
  display: inline-block;
}


/* --------- イントロダクション --------- */

.introduction {
  clip-path: var(--square-bottom-right-up);
  /* 重ね合わせコンテキスト作成 */
  position: relative;
  z-index: 1;
}

/* メインビジュアルエリア */
.introduction__container {
  overflow: hidden;
  /* 重ね合わせコンテキスト作成 */
  position: relative;
  z-index: 0;

  --title-font-size: clamp(6rem, 2.184rem + 10.18vw, 10rem);
  --title-line-height: 1.2;
  --title-line-num: 2;
  /* ファーストビューで見えるタイトル高さの定義 */
  --title-size: calc(var(--title-font-size) * var(--title-line-height) * var(--title-line-num));
  padding-block: calc(77svh - var(--title-size)) 14rem;
}

/* 背景色の描画エリア */
/* .introduction__container::before {
  bottom: 0;
  block-size: unset;
  clip-path: polygon(0 0, 130% 50%, 0 100%);
  aspect-ratio: var(--triangle-ratio);
} */

.introduction__container.contents-width {
  padding-inline: 7%;
}

/* 背景色の描画エリア */
.introduction .custom-shape {
  display: block;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  aspect-ratio: 1.875 / 1;
  block-size: 60rem;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: var(--black);
  /* padding-top: clamp(64rem, 43.4944rem + 26.7vw, 75rem); */
}

/* 背景動画 */
.introduction__movie {
  position: fixed;
  inset: 0;
  z-index: -1;
  block-size: 100svh;
}

.introduction__movie::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--filter-image-url) var(--filter-image-option);
}

.introduction__movie video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

/* テキストエリア */
.introduction__title {
  font: 400 var(--title-font-size) var(--font-family-en);
  line-height: 1;
  color: #fff;
  mix-blend-mode: difference;
}

.introduction__title span {
  line-height: 1.2;
}

.introduction__title span:not(.anime-wrap) {
  transform: translateX(-110%);
}

.introduction__sub-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  margin-top: 2rem;
  text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.65);
}

.introduction__copy {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 500;
  margin-top: 2rem;
  max-inline-size: 800px;
}

:is(.introduction, .business, .recruit) .arrow-button__container {
  margin-top: 3.2rem;
}

.introduction .arrow-button__anchor {
  color: #fff;
}

/* --------- BUSINESS section --------- */

.business {
  background: var(--gray-200);
}

.business__container {
  margin-top: var(--slope-fix-margin);
  padding: clamp(24rem, 9.5584rem + 38.51vw, 55rem) 0 15vw;
  position: relative;
  overflow: hidden;
}

.business .custom-shape {
  clip-path: var(--triangle-left);
  aspect-ratio: var(--triangle-ratio);
  position: absolute;
  right: 0;
  top: 0;
  inline-size: 85%;
  background: var(--filter-image-url) var(--filter-image-option),
    url('/assets/common/images/bg-header.jpg') no-repeat right bottom/cover;
}

/* .business__container::before {
  content: '';
  display: block;
  clip-path: var(--triangle-left);
  aspect-ratio: var(--triangle-ratio);
  position: absolute;
  right: 0;
  top: 0;
  inline-size: 85%;
  background: var(--filter-image-url) var(--filter-image-option),
    url('/assets/index/images/business.jpg') no-repeat right bottom/cover;
} */

/* 見出し */
.business__title {
  font-size: clamp(2.6rem, 3.2vw, 3.6rem);
  font-weight: 600;
  margin-top: 4rem;
}

/* 見出し英語 */
.business__title--en {
  display: block;
  font: 400 clamp(1.2rem, 1.4vw, 1.6rem) var(--font-family-en);
  color: #8b8585;
}

.business__copy {
  font-size: 1.4rem;
  font-weight: 500;
  margin-top: 2.4rem;
}

.business__list {
  margin: 3rem auto 0;
}

.business__image {
  padding-top: 55%;
  --custom-slope: 68px;
}

.business__list>li:nth-child(odd) .business__image {
  clip-path: polygon(0 var(--custom-slope), var(--custom-slope) 0, 100% 0, 100% 100%, 0 100%);
}

.business__list>li:nth-child(even) .business__image {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--custom-slope)), calc(100% - var(--custom-slope)) 100%, 0 100%);
}

.business__list>li:first-child .business__image {
  background: var(--filter-image-url) var(--filter-image-option),
    url('/assets/common/images/img-business01.jpg') no-repeat center/cover;
}

.business__list>li:nth-child(2) .business__image {
  background: var(--filter-image-url) var(--filter-image-option),
    url('/assets/common/images/img-business02.jpg') no-repeat center/cover;
}

.business__list>li:nth-child(3) .business__image {
  background: var(--filter-image-url) var(--filter-image-option),
    url('/assets/common/images/img-business03.jpg') no-repeat center/cover;
}

.business__list>li:nth-child(4) .business__image {
  background: var(--filter-image-url) var(--filter-image-option),
    url('/assets/common/images/img-business04.jpg') no-repeat center/cover;
}

.business__list>li:nth-child(5) .business__image {
  background: var(--filter-image-url) var(--filter-image-option),
    url('/assets/common/images/img-business05.jpg') no-repeat center/cover;
}

.business .square-button {
  position: relative;
  z-index: 1;
}

/* 汎用ボタンリンク（global.css上書き） */
.business .square-button__container {
  margin-top: 9rem;
}


/* --------- WORKS section --------- */

.works {
  position: relative;
  overflow: hidden;
}

.works__container {
  padding-bottom: 6rem;
}

/* スライドショー・共通設定 */
.swiper {
  overflow: visible;
  margin-top: 4rem;
}

.swiper-slide {
  transition: box-shadow ease 0.3s, transform ease 0.3s;
}

/* スライドショー・操作部共通設定 */
.swiper-controller {
  margin-top: 4rem;
  block-size: 22px;
  display: flex;
  align-items: center;
  gap: 0 20px;
}

/* スライドショー・プログレスバー */
.swiper-pagination-progressbar.swiper-pagination-horizontal {
  flex: 1 0;
  inline-size: auto;
  block-size: 5px;
}

.swiper-pagination-progressbar {
  background: #acacac;
  /* reset css */
  position: static;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--nawa-red);
}

/* スライドショー・スライド送りボタン */
.swiper-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 55px;
}

.swiper-button__next,
.swiper-button__prev {
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  transition: background-color 0.3s ease;
  background: url('/assets/common/images/chevron-right-w.svg') no-repeat center/8px auto, var(--black);
}

.swiper-button__prev {
  transform: rotate(180deg);
}

/* スライドショー・コンテンツ部分 */
.works__item {
  border-radius: 5px;
  overflow: hidden;
}

.works__image img {
  display: inline-block;
  object-fit: cover;
  aspect-ratio: 1.05 / 1;
}

.works__inner {
  background: #fff;
  padding: 2rem 7% 3rem;
}

.works__title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-base);
  margin-top: 1.2rem;
  block-size: 1.8lh;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.category__list {
  display: flex;
  block-size: 28px;
  column-gap: 3px;
  font-size: 1.2rem;
}

.category__main {
  display: flex;
  align-items: center;
  block-size: 100%;
  font-weight: 500;
  color: #fff;
  padding: 0 2em;
  background: var(--black);
  border-left: 6px solid var(--nawa-red);
}

.category__sub {
  display: flex;
  align-items: center;
  block-size: 100%;
  font-weight: 500;
  color: var(--text-base);
  padding: 0 1em;
  background: var(--gray-100);
}

/* --------- NEWS section --------- */

.news {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20vw), 0 100%);
  /* clip-path: var(--square-bottom-right-up); */
}

.news__container {
  overflow: hidden;
  position: relative;
  padding-block: 4rem clamp(22rem, 8.0256rem + 37.27vw, 52rem);
}

/* 背景色描画エリア*/
.news__container::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gray-200);
  clip-path: polygon(0 0, 100% 50vw, 100% 100%, 0 100%);
}

/* 背景画像エリア */
.news .custom-shape {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  clip-path: var(--triangle-right);
  aspect-ratio: 2.5 / 1;
  inline-size: 105%;
  background: var(--filter-image-url) var(--filter-image-option),
    url('/assets/index/images/news-bg.jpg') no-repeat center bottom 30%/cover;
}

/* --------- RECRUIT section --------- */

.recruit {
  overflow: hidden;
  position: relative;
  clip-path: var(--square-bottom-right-down);
}

.recruit__container {
  position: relative;
  padding-block: clamp(6.5rem, 3.9376rem + 6.83vw, 12rem) clamp(16.5rem, 1.7104rem + 39.44vw, 32rem);
}

/* 背景画像エリア */
.recruit .custom-shape {
  content: '';
  display: block;
  inline-size: 80%;
  position: absolute;
  right: 0;
  bottom: 0;
  clip-path: var(--triangle-left);
  aspect-ratio: var(--triangle-ratio);
  background: var(--filter-image-url) var(--filter-image-option),
    url('/assets/index/images/recruit-bg01.jpg') no-repeat center/cover;
}

/* --------- THUMBNAIL section --------- */

.thumbnail {
  margin-top: -29vw;
  clip-path: var(--square-top-right-down);
}

.thumbnail__container {
  display: grid;
  grid-template-columns: 1fr 0.588fr;
  gap: 0 1.25%;
  block-size: clamp(21rem, 2.832rem + 48.45vw, 60rem);
}

.thumbnail--large {
  background: var(--filter-image-url) var(--filter-image-option),
    url('/assets/index/images/thumbnail01.jpg') no-repeat center/cover;
}

.thumbnail--small {
  background: var(--filter-image-url) var(--filter-image-option),
    url('/assets/index/images/thumbnail02.jpg') no-repeat center/cover;
}

/* ========================================
	マウスポインタ専用
======================================== */
@media (hover:hover) and (pointer: fine) {

  /* --------- イントロダクション --------- */

  .introduction .arrow-button__anchor:hover {
    color: var(--nawa-green);
  }

  /* --------- WORKS section --------- */

  .swiper-slide:hover {
    box-shadow: 0px 3px 30px 0px rgba(62, 58, 57, 0.2);
    transform: translateY(-4px);
  }

  /* スライドショー・スライド送りボタン */
  .swiper-button__next:hover,
  .swiper-button__prev:hover {
    background-color: var(--nawa-red);
  }

  .works__item:hover .works__image::before {
    opacity: 0;
  }

  .works__item:hover .works__image img {
    filter: saturate(1);
  }

  /* スライドショー・サムネイル画像部分 */
  .works__image {
    position: relative;
  }

  .works__image img {
    filter: saturate(0.5);
    transition: filter 0.3s ease;
  }

  .works__image::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 1;
    background: var(--filter-image-url) var(--filter-image-option);
    transition: opacity 0.3s ease;
  }
}

/* ========================================
	1180px未満専用スタイル（TAB&SP）
======================================== */
@media screen and (width < 1180px) {

  /* --------- BUSINESS section --------- */

  .business__list .contents-width-sp {
    padding-inline: 7%;
  }

  .business__list>li:not(:first-child) {
    margin-top: 4rem;
  }

  .business__contents {
    position: relative;
  }

  .business__header {
    display: contents;
  }

  .business__icon {
    position: absolute;
    right: 3%;
    bottom: -10px;
    block-size: 80px;
  }

  .business__icon img {
    inline-size: auto;
    block-size: 100%;
  }

  .business .square-button__anchor {
    position: relative;
    z-index: 1;
  }

  /* --------- WORKS section --------- */

  .works {
    background: var(--gray-100);
    margin-top: var(--slope-fix-margin);
    padding-top: clamp(16rem, 4.8192rem + 29.81vw, 40rem);
    clip-path: var(--square-top-right-up);
  }

}

/* ========================================
	768px未満専用スタイル（SP）
======================================== */
@media screen and (width < 768px) {}

/* ========================================
	768px以上専用スタイル（TAB&PC）
======================================== */
@media print,
screen and (768px <=width) {

  /* --------- イントロダクション --------- */

  /* メインビジュアルエリア */
  .introduction__container {
    --title-font-size: clamp(11rem, 4.792rem + 8.08vw, 25rem);
    /* ファーストビューで見えるタイトル高さの定義 */
    padding-block: calc(92svh - var(--title-size)) clamp(15rem, 8.3488rem + 8.66vw, 30rem);
  }

  /* 背景色の描画エリア */
  .introduction .custom-shape {
    aspect-ratio: auto;
    padding-top: clamp(64rem, 43.4944rem + 26.7vw, 75rem);
    inline-size: 145%;
  }

  /* 背景色の描画エリア */
  .introduction__sub-title {
    font-size: clamp(2rem, 1.1136rem + 1.15vw, 4rem);
    margin-top: 4rem;
  }

  .introduction__copy {
    font-size: 1.6rem;
    inline-size: min(80%, 800px);
  }

  /* --------- WORKS section --------- */

  /* スライドショー・共通設定 */
  .swiper {
    margin-top: 5.5rem;
  }

  .swiper-slide {
    inline-size: 450px;
  }

  .swiper-slide:not(:last-child) {
    margin-right: 48px;
  }

  /* スライドショー・操作部共通設定 */
  .swiper-controller {
    margin-top: 5rem;
    block-size: 35px;
    gap: 0 40px;
  }

  /* スライドショー・スライド送りボタン */
  .swiper-button {
    inline-size: 90px;
  }

  .swiper-button__next,
  .swiper-button__prev {
    inline-size: 35px;
    block-size: 35px;
    background-size: 12px auto;
  }

  /* スライドショー・コンテンツ部分 */
  .works__inner {
    padding: 2rem 6% 3.5rem;
  }

  .works__title {
    font-size: 1.8rem;
    line-height: 1.6;
  }

  .category__main {
    font-size: 1.4rem;
    padding: 0 1.75em;
  }

  /* --------- RECRUIT section --------- */

  .recruit__container {
    padding-bottom: clamp(32rem, -1.6352rem + 43.8vw, 50rem);
  }
}

/* ========================================
	768px以上1180px未満専用スタイル（TAB）
======================================== */
@media screen and (768px <=width < 1180px) {

  /* --------- BUSINESS section --------- */

  .business__list .contents-width-sp {
    padding-inline: 10%;
  }


}

/* ========================================
	1180px以上専用スタイル（PC）
======================================== */
@media print,
screen and (1180px <=width) {

  /* --------- base style --------- */

  .contents-width,
  .contents-width-pc {
    padding-inline: 8%;
  }

  /* --------- 汎用要素（common.cssに整理） --------- */

  /* 汎用ボタンリンク（global.css上書き） */
  .square-button__container {
    margin-top: 10rem;
  }

  /* --------- グローバルヘッダー（トップページのみ外観変更） --------- */

  /* ヘッダーが画面上部にあるときはリンクの文字色を白 */
  :where(.global-header__container:not(.is-scroll)) .global-header-navi__list>li>a {
    color: #fff;
  }

  /* サブメニューが開いているときはリンクの文字色をデフォルト */
  :where(.global-header__container:not(.is-scroll).is-dropmenu-open) .global-header-navi__list>li>a {
    color: var(--text-base);
  }

  /* --------- opening animation --------- */

  .progress__container {
    gap: 10rem 0;
  }

  .progress__image {
    inline-size: min(100%, 220px);
  }

  /* --------- イントロダクション --------- */

  /* 背景色の描画エリア */
  .introduction .custom-shape {
    padding-top: clamp(75rem, 30.3024rem + 37.88vw, 125rem);
  }

  .introduction__copy {
    font-size: 1.6rem;
    margin-top: 3rem;
  }

  /* もっと見るボタンリンク */
  .view-more__container {
    margin-top: 4rem;
  }

  .view-more__anchor {
    grid-template-columns: 55px auto;
    gap: 0 24px;
    font-size: 1.8rem;
  }

  .view-more__arrow {
    padding: 0.8em;
  }

  /* --------- BUSINESS section --------- */

  .business {
    clip-path: polygon(0 var(--slope), 100% 0, 100% calc(100% - var(--slope)), 0 100%);
    /* clip-path: var(--square-bottom-right-up); */
  }

  .business__container {
    padding-block: clamp(60rem, 10.8336rem + 41.67vw, 115rem) clamp(36rem, 6.9472rem + 24.62vw, 68.5rem);
  }

  .business__copy {
    font-size: 1.6rem;
    margin-top: 3rem;
  }

  .section-title {
    font-size: clamp(18rem, 10.5rem + 2.5vw, 20rem);
  }

  .section-copy {
    font-size: 1.8rem;
    margin-top: 5.5rem;
  }

  .business__list {
    margin-top: 14rem;
  }

  .business__item {
    display: flex;
    gap: 0;
  }

  .business__list>li:nth-child(even) .business__item {
    flex-direction: row-reverse;
  }

  .business__image {
    inline-size: 50%;
    padding-top: 500px;
    --custom-slope: 195px;
  }

  .image-filter {
    position: absolute;
    inset: 0;
    block-size: 100%;
    display: block;
  }

  .business__contents {
    display: flex;
    flex-direction: column;
    justify-content: center;
    inline-size: min(50%, 890px);
    padding: 0 5%;
  }

  .business__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .business__title {
    margin-top: 0;
  }

  .section-title--ja {
    margin-top: -0.8em;
    padding-left: 0.55em;
  }

  .business__copy {
    font-size: 1.6rem;
  }

  .business__icon {
    block-size: 115px;
  }

  .business__icon img {
    inline-size: auto;
    block-size: 100%;
  }


  /* --------- WORKS section --------- */

  .works {
    margin-top: -17vw;
  }

  .works__container {
    padding-bottom: 14rem;
  }

  .category__list {
    block-size: 30px;
    font-size: 1.4rem;
  }

  .category__main {
    padding: 0 2.5em;
  }

  /* --------- NEWS section --------- */

  .news__container {
    padding-block: 0 clamp(60rem, 1.8944rem + 49.24vw, 125rem);
  }

  .news__container::after {
    inline-size: 110%;
  }

  /* --------- RECRUIT section --------- */

  .recruit__container {
    padding-block: clamp(8rem, 4.872rem + 2.65vw, 11.5rem) clamp(53rem, 15.4544rem + 31.82vw, 95rem);
  }

  /* --------- THUMBNAIL section --------- */

  .thumbnail__container {
    grid-template-columns: 1fr 0.625fr;
    block-size: clamp(74rem, 30.1968rem + 37.12vw, 123rem);
  }

}

/* ========================================
	1500px以上専用スタイル（PC）
======================================== */
@media print,
screen and (1500px <=width) {

  /* --------- イントロダクション --------- */

}