@charset "UTF-8";
/* =========================================
   トップ：制作実績（.front-works）
   ・見出し・説明文は MESSAGE / SERVICES と同じクラス（.message-section__title / __lead）
   ・カルーセルは Swiper（public/js/front-works.js）
     1401px以上 5件 / 1200〜1400px 4件 / 981〜1199px 3件 / 701〜980px 2件 / 700px以下 1件
   ・701px以上：カード全体の左右に矢印　700px以下：ドットの左右に円の矢印（MESSAGEと同じ形）
   ・カテゴリー色は --works-color（PHPでカード・タブごとに指定）
========================================= */

.front-works {
  background: #fff;
  padding: clamp(64px, 6vw, 110px) 0 clamp(72px, 7vw, 120px);
  overflow: hidden;
  scroll-margin-top: 80px;
}

.front-works__inner {
  /* 1920px画面で1776px（画面幅の92.5%）。以下は同じ比率で縮む */
  width: min(1776px, 92.5vw);
  margin: 0 auto;
}

/* ---------- 見出し・説明文 ---------- */
.front-works__eyebrow {
  justify-content: center;
  white-space: nowrap;
}

.front-works .front-works__title,
.front-works .front-works__lead {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* 文字サイズは SERVICES の見出し（.home-services__title-line）と同じ。狭い画面で入りきらない時だけ縮める */
.front-works .front-works__title .front-works__title-line {
  display: block;
  white-space: nowrap;
  color: var(--color-text-strong);
  font-size: min(1em, calc((100vw - 40px) / 16));
}

.front-works .front-works__lead {
  max-width: 900px;
  margin-bottom: clamp(32px, 3vw, 48px);
}

.front-works__lead-line {
  display: block;
}

/* ---------- カテゴリータブ ---------- */
.front-works__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 20px;
  margin-bottom: clamp(24px, 2.2vw, 32px);
}

.front-works__tab {
  --works-color: var(--color-gold);
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  min-width: clamp(150px, 11.8vw, 228px);
  min-height: 50px;
  margin: 0;
  padding: 8px 20px;
  border: 1.5px solid var(--works-color);
  border-radius: 6px;
  background: #fff;
  color: var(--color-text-strong);
  font-family: inherit;
  font-size: clamp(0.875rem, 0.8rem + 0.15vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.front-works__tab-icon {
  color: var(--works-color);
  font-size: 1.35em;
  transition: color .25s ease;
}

.front-works__tab:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
}

.front-works__tab.is-active {
  background: var(--works-color);
  color: #fff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
}

.front-works__tab.is-active .front-works__tab-icon {
  color: #fff;
}

.front-works__tab:focus-visible {
  outline: 3px solid rgba(var(--color-gold-rgb), 0.5);
  outline-offset: 3px;
}

/* ---------- スライダー ---------- */
.front-works__slider {
  position: relative;
}

.front-works__swiper.swiper {
  overflow: hidden;
  padding: 6px 4px 14px; /* カードの影が切れないよう少し余白 */
}

.front-works__slide.swiper-slide {
  height: auto;
}

/* ---------- カード ---------- */
.front-works__card {
  --works-color: var(--color-gold);
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}

.front-works__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14);
}

.front-works__card:focus-visible {
  outline: 3px solid rgba(var(--color-gold-rgb), 0.5);
  outline-offset: -3px;
}

.front-works__img {
  position: relative;
  margin: 0;
  aspect-ratio: 14 / 13;
  overflow: hidden;
  background: #f2f2f2;
}

.front-works__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.front-works__card:hover .front-works__img img {
  transform: scale(1.05);
}

.front-works__no-image {
  display: grid;
  place-items: center;
  height: 100%;
  color: #aaa;
  font-family: var(--font-en);
  font-size: 1.25rem;
  letter-spacing: 0.1em;
}

/* カテゴリーバッジ（画像の左上） */
.front-works__badge {
  position: absolute;
  top: 12px;
  left: 0;
  z-index: 2;
  padding: 5px 12px;
  background: var(--works-color);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* 動画制作：YouTubeアイコン（画像の中央） */
.front-works__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  color: #ff0000;
  font-size: clamp(3rem, 2.4rem + 1vw, 4rem);
  line-height: 1;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
  transition: transform .25s ease;
}

/* アイコンの三角部分を白く見せる下地 */
.front-works__play::before {
  content: "";
  position: absolute;
  top: 30%;
  left: 30%;
  width: 40%;
  height: 40%;
  background: #fff;
}

.front-works__play i {
  position: relative;
}

.front-works__card:hover .front-works__play {
  transform: translate(-50%, -50%) scale(1.08);
}

.front-works__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 22px clamp(16px, 1.2vw, 24px) 24px;
}

.front-works__name {
  margin: 0 0 14px;
  color: var(--color-text-strong);
  font-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.45;
  text-align: center;
}

.front-works__text {
  display: -webkit-box;
  width: 100%;
  margin: 0 0 20px;
  overflow: hidden;
  color: var(--color-base);
  font-size: 0.875rem;
  line-height: 1.8;
  letter-spacing: 0.03em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.front-works__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 130px;
  margin-top: auto;
  padding: 8px 22px;
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  color: var(--color-gold);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: background-color .25s ease, color .25s ease;
}

.front-works__more i {
  transition: transform .25s ease;
}

.front-works__card:hover .front-works__more {
  background: var(--color-gold);
  color: #fff;
}

.front-works__card:hover .front-works__more i {
  transform: translateX(3px);
}

/* ---------- 矢印・ドット ---------- */
.front-works__arrow {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  color: var(--color-gold);
  cursor: pointer;
  transition: opacity .2s, background-color .2s, color .2s;
}

.front-works__arrow:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

.front-works__arrow.swiper-button-disabled {
  opacity: .3;
  cursor: default;
}

/* 701px以上：カード全体の左右（カードの縦中央） */
.front-works__arrow--side {
  position: absolute;
  top: calc((100% - 44px) / 2); /* 下のドット分を除いた高さの中央 */
  z-index: 5;
  width: 52px;
  height: 52px;
  border: 0;
  background: #fff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
  font-size: 22px;
  transform: translateY(-50%);
}

.front-works__arrow--side.front-works__arrow--prev { left: -26px; }
.front-works__arrow--side.front-works__arrow--next { right: -26px; }

.front-works__arrow--side:not(.swiper-button-disabled):hover {
  background: var(--color-gold);
  color: #fff;
}

.front-works__arrow--nav {
  display: none;
}

.front-works__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  min-height: 30px;
  margin-top: 6px;
}

.front-works .front-works__nav .front-works__pagination.swiper-pagination-horizontal {
  position: static;
  top: auto;
  bottom: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  width: auto;
}

.front-works__pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  margin: 0 !important;
  background: #d6d6d6;
  opacity: 1;
  transition: background-color .25s ease;
}

.front-works__pagination .swiper-pagination-bullet-active {
  background: var(--color-gold);
}

.front-works__pagination.swiper-pagination-lock,
.front-works__arrow.swiper-button-lock {
  display: none;
}

.front-works .front-works__button-wrap {
  /* pages.css のMESSAGE用 .button-center-wrap の幅・位置指定（981〜1199px / 701〜980px）を打ち消す */
  width: 100%;
  margin-left: 0;
  margin-top: clamp(32px, 3vw, 52px);
}

/* ---------- 1199px以下：矢印の分だけ左右をあける ---------- */
@media screen and (max-width: 1199px) {
  .front-works__inner {
    width: auto;
    padding: 0 20px;
  }
  .front-works__slider {
    margin: 0 40px;
  }
  .front-works__arrow--side {
    width: 46px;
    height: 46px;
    font-size: 20px;
  }
  .front-works__arrow--side.front-works__arrow--prev { left: -46px; }
  .front-works__arrow--side.front-works__arrow--next { right: -46px; }
}

/* ---------- 701〜980px：タブは「すべて」を1段目、残り4つを2段目に並べる ---------- */
@media screen and (min-width: 701px) and (max-width: 980px) {
  .front-works__tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
  .front-works__tab {
    min-width: 0;
    padding: 8px 10px;
    gap: 0.5em;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
  }
  .front-works__tab[data-works-filter="all"] {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 30px) / 4);
  }
}

/* ---------- 700px以下：矢印はドットの左右（MESSAGEと同じ金の円） ---------- */
@media screen and (max-width: 700px) {
  .front-works__slider {
    margin: 0;
  }
  .front-works__arrow--side {
    display: none;
  }
  .front-works__arrow--nav {
    display: grid;
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-gold);
    background: #fff;
    font-size: 15px;
  }
  .front-works__arrow--nav:not(.swiper-button-disabled):hover {
    background: var(--color-gold);
    color: #fff;
  }
  .front-works__arrow--nav.swiper-button-disabled {
    background: #fff;
    color: var(--color-gold);
  }
  .front-works .front-works__nav .front-works__pagination.swiper-pagination-horizontal {
    gap: 8px;
  }
  .front-works__pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(var(--color-gold-rgb), 0.22); /* MESSAGEと同じ薄い金 */
    border-radius: 999px;
    transition: width .25s ease, background-color .25s ease;
  }
  .front-works__pagination .swiper-pagination-bullet-active {
    width: 26px;
    background: var(--color-gold);
  }

  .front-works .front-works__lead {
    text-align: left;
  }
  .front-works__lead-line {
    display: inline;
  }

  /* タブ：「すべて」を1段目いっぱい、残りを2列 */
  .front-works__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .front-works__tab {
    min-width: 0;
    min-height: 46px;
    padding: 8px 10px;
    gap: 0.5em;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
  }
  .front-works__tab[data-works-filter="all"] {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 480px) and (min-width: 351px) {
  .front-works__inner { padding: 0 16px; }
  .front-works__eyebrow { gap: 12px; margin-bottom: 18px; }
  .front-works__eyebrow::after { width: 64px; }
}

@media screen and (max-width: 350px) {
  .front-works__inner { padding: 0 10px; }
  .front-works__eyebrow { gap: 10px; margin-bottom: 14px; }
  .front-works__eyebrow::after { width: 48px; }
  .front-works__eyebrow span { font-size: 1.45rem; }
  .front-works__tab { font-size: 0.75rem; padding: 8px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .front-works__card,
  .front-works__img img,
  .front-works__play { transition: none; }
  .front-works__card:hover,
  .front-works__card:hover .front-works__img img { transform: none; }
}


/* =========================================================
   表示アニメーション（JS：front-works.js が .js-works-anim → .is-inview を付与）
   開始時間は JS が --fw-d で指定。
   WORKS（文字→赤線）→ 見出し → 説明文1行ずつワイプ → タブ
   → カードを左から1枚ずつ「ポン」→ 矢印・ボタン
   ※ .is-cards-in はタブ切替時にカードだけ出し直すためのクラス
   ※ 終了後は元のスタイルに戻す（backwards）。カードのホバーで浮く動きや、
     端まで来た矢印の半透明表示を上書きしないため
========================================================= */
.js-works-anim:not(.is-inview) :is(.front-works__eyebrow span, .front-works__title, .front-works__lead-line, .front-works__tabs, .front-works__arrow--side, .front-works__nav, .front-works__button-wrap),
.js-works-anim:not(.is-cards-in) .front-works__card {
  opacity: 0;
}

/* WORKS：MESSAGE・SERVICES と同じ（文字がフェードイン → 赤い横線が左から伸びる） */
.js-works-anim .front-works__eyebrow::after {
  transform: scaleX(0);
  transform-origin: left center;
}
.js-works-anim.is-inview .front-works__eyebrow span {
  animation: fw-fade .5s var(--fw-d, 0s) ease backwards;
}
.js-works-anim.is-inview .front-works__eyebrow::after {
  animation: fw-line .5s calc(var(--fw-d, 0s) + .1s) cubic-bezier(.25, .8, .25, 1) both; /* 線は伸びた状態を保つ */
}

/* 見出し・タブ：少し下からふわっと */
.js-works-anim.is-inview :is(.front-works__title, .front-works__tabs) {
  animation: fw-up .6s var(--fw-d, 0s) ease-out backwards;
}

/* 説明文：1行ずつ左→右にワイプ */
.js-works-anim.is-inview .front-works__lead-line {
  animation: fw-wipe-x .6s var(--fw-d, 0s) ease-out backwards;
}

/* カード：左から1枚ずつ、小さい状態から少し弾んで「ポン」 */
.js-works-anim.is-cards-in .front-works__card {
  animation: fw-pop .5s var(--fw-d, 0s) cubic-bezier(.34, 1.56, .64, 1) backwards;
}

/* 矢印・ドット・ボタン：最後にふわっと */
.js-works-anim.is-inview :is(.front-works__arrow--side, .front-works__nav, .front-works__button-wrap) {
  animation: fw-fade .5s var(--fw-d, 0s) ease backwards;
}

@keyframes fw-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fw-line {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes fw-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fw-wipe-x {
  from { opacity: 1; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 -1em 0 0); }
}
@keyframes fw-pop {
  0%   { opacity: 0; transform: translateX(-12px) scale(.7); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}