@charset "UTF-8";

/* ==========================================================================
   アクアスター IPタイアップLP  /  style.css
   ========================================================================== */

/* ==========================================================================
   01. Base
   ========================================================================== */

/* --- フォント読み込み --- */

@font-face {
  font-family: "GoogleSansFlex";
  src: url("../fonts/googlesansflex-var.woff2") format("woff2");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Murecho";
  src: url("../fonts/murecho-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MPLUS1p";
  src: url("../fonts/mplus1p-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --- 変数（色・フォント・ヘッダー高さ・最大幅） --- */

:root {
  --yellow: #FFFF00;
  --orange: #FF9E00;
  --ink: #000000;
  --white: #ffffff;
  --gray: #cacaca;
  --f-body: "MPLUS1p", "Hiragino Kaku Gothic ProN", sans-serif;
  --f-head: "Murecho", "Hiragino Kaku Gothic ProN", sans-serif;
  --f-en: "GoogleSansFlex", "Arial", sans-serif;
  --header-h: 76px;
  --maxw: 1120px;
}

/* --- リセット --- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.8;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* --- PC/SP 表示切替（.pc / .sp は 16 で反転させる） --- */

.sp {
  display: none;
}

/* ==========================================================================
   02. Layout common
   ========================================================================== */

.section {
  padding: 100px 0;
  position: relative;
}

.section__inner {
  width: min(92%, var(--maxw));
  margin-inline: auto;
}

.label_en {
  font-family: var(--f-en);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0;
  margin-bottom: 1.4em;
}

.head_band {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 48px;
  line-height: 1.35;
  margin-bottom: 2.6em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35em;
}

.head_band__row {
  background: var(--ink);
  color: var(--white);
  padding: .15em .5em;
  display: inline;
  font-family: var(--f-head);
}

.head_band__row .small {
  font-size: 0.7em;
}

/* ==========================================================================
   03. Header
   ========================================================================== */

.site_header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 100;
  transition: background .3s, box-shadow .3s;
}

.site_header.is-scrolled {
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
}

.site_header__inner {
  width: min(94%, 1320px);
  margin-inline: auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2.5vw;
}

.site_header__logo {
  flex: 0 0 auto;
  display: block;
  width: 145px;
  height: 28px;
}

.site_header__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gnav {
  margin-left: auto;
}

.gnav__list {
  display: flex;
}

.gnav__list li+li {
  border-left: 2px solid var(--ink);
}

.gnav__link {
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
  position: relative;
  padding: 0 30px;
  display: block;
}

.gnav__link li a {
  display: block;
}

.gnav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s;
}

.gnav__link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.btn_download {
  font-family: var(--f-head);
  font-weight: 600;
  background: var(--ink);
  color: var(--white);
  padding: .7em 1.6em;
  border-radius: 2px;
  font-size: 15px;
  transition: opacity .25s;
  border-radius: 10px 10px 0 0;
}

.btn_download:hover {
  opacity: .8;
}

.hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  margin-left: auto;
  background: var(--ink);
  border-radius: 50%;
  position: relative;
}

.hamburger.is-open {
  background: var(--yellow);
}

.hamburger span {
  display: block;
  width: 15px;
  height: 1px;
  background: var(--yellow);
  transition: background .3s, transform .3s, opacity .3s;
}

.hamburger.is-open span {
  background: var(--ink);
}

.hamburger.is-open span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.hamburger.is-open span:nth-child(2) {
  opacity: 0;
}

.hamburger.is-open span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* ==========================================================================
   04. FV
   ========================================================================== */

.fv {
  position: relative;
  background: var(--yellow);
  height: 768px;
  padding-top: var(--header-h);
  overflow: hidden;
}

.fv__grid_bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 0, 0, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .05) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
}

/* FV各要素は画面中央(50vw)基準でデザイン座標(1366幅・中央683)通りに配置。calcで画面幅に追従 */
/* キャッチ：デザイン左端x110 = 中央-573 */
.fv__copy {
  position: absolute;
  left: max(24px, calc(50vw - 613px));
  top: 230px;
  max-width: 820px;
  z-index: 2;
}

.fv__catch {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 114px;
}

.fv__catch_band {
  background: var(--ink);
  color: var(--white);
  padding: .1em .35em;
  line-height: 1.4;
}

.fv__catch_band .small {
  font-size: 0.7em;
}

.fv__en {
  font-family: var(--f-en);
  font-weight: 500;
  color: var(--ink);
  font-size: 70px;
  line-height: .98;
  letter-spacing: -0.09em;
}

.fv__vert {
  display: none;
}

.fv__cta {
  display: none;
}

/* ポスター：デザイン右端x1167(右余白199px) = 中央+484。右基準 calc(50vw-484px)。ENに一部重なる */
/* 画像の縦幅でスライダー高さが変わるため、下端基準(bottom)で固定してキャプション・ナビの位置を動かさない
   ※旧: top:115px（.fv 768px − top115 − カラム高620px = bottom 33px で同位置） */
.fv__poster_col {
  position: absolute;
  right: max(24px, calc(50vw - 484px));
  bottom: 33px;
  width: 367px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}

/* 高さの器。中の枠を上下中央に置くことで、画像の縦横比が変わっても枠の中心が動かない
   （下端基準だと枠が上へ伸びるだけになり、縦長・横長で位置が大きくズレる）。
   min-height は縦長ポスター（約2:2.8）が収まる基準値。これより縦長の画像が来ても
   min-heightなので器が伸びて収まり、キャプション・ナビは下端基準のまま動かない */
.fv__poster {
  margin-bottom: 46px;
  width: 100%;
  min-height: 519px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 画像サイズに追従する枠。オレンジの背景(deco)もこの枠を基準に重なる */
.fv__poster .fv__poster_frame {
  position: relative;
  width: 100%;
}

/* 傾いていない状態＝スライド画像と全く同じ位置・角度なので、オレンジは完全に隠れて見えない。
   この transition（遅延なし）は「傾きを解除する側」に効く。
   スライド切り替え時に main.js が is-visible を外すので、まず即座に元の角度へ戻る */
.fv__poster .fv__poster_frame .fv__poster_deco {
  position: absolute;
  inset: 0;
  background: var(--orange);
  z-index: 0;
  border-radius: 10px;
  transition: transform .4s cubic-bezier(.43, .05, .17, 1);
}

/* 傾く側だけ遅延を持たせて、画像が表示された後にワンテンポ置いて動き出すようにする */
.fv__poster.is-visible .fv__poster_frame .fv__poster_deco {
  transform: rotate(5deg);
  transition-delay: .4s;
}

/* スライド枠の幅はデザイン固定サイズ(367px)。
   高さは【可変モード】＝画像の縦幅に追従（slickのadaptiveHeightがスライドごとの高さを反映）。
   ▼グレー地に収める【固定モード】に切り替えたい場合は、すぐ下の 04-A を読む */
.poster_slider {
  position: relative;
  z-index: 2;
  width: 367px;
  background: #eee;
  border: solid 2px var(--ink);
  overflow: hidden;
  border-radius: 10px;
}

.poster_slide {
  width: 100%;
}

.poster_slide img {
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   04-A. スライダー「固定高さモード」への切り替え

   ■ 2つのモードの違い
     可変モード（現在）… 枠の高さが画像ごとに変わる。グレー地は出ない。
                        ただし .fv__poster（器）の中央に置かれるので、枠の中心位置は動かない
     固定モード      … 枠の高さを PC 518px / SP 86.9vw に固定。
                        縦横比の違う画像は #eee のグレー地の中に contain で収まる

   ■ 切り替え方 ─ 触るのは index.html の1行だけ
       <html lang="ja">  →  <html lang="ja" class="poster_fixed">
     戻すときは class="poster_fixed" を消すだけ。CSS・JSは触らなくてよい。
       ・main.js が同じclassを見て slick の adaptiveHeight を自動でOFFにする
       ・SP側の固定値(86.9vw)は 16-04 の同名ブロックにある
       ・.fv__poster_col の bottom:33px はどちらのモードでも正しい位置になる
         （高さが固定されるので、旧 top:115px と同じ位置に収まる）
       ・SPの .fv の min-height(182.3vw)は縦長スライド基準なので固定モードでも一致する
   -------------------------------------------------------------------------- */
.poster_fixed .poster_slider {
  height: 518px;
}

/* slick が adaptiveHeight 用にインラインで付ける高さを打ち消して枠いっぱいに広げる */
.poster_fixed .poster_slider .slick-list,
.poster_fixed .poster_slider .slick-track {
  height: 100% !important;
}

.poster_fixed .poster_slide {
  height: 100%;
}

.poster_fixed .poster_slide img {
  height: 100%;
  object-fit: contain;
}

.fv__poster_caption {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 14px;
  /* 高さを確保して、キャプションの行数が変わっても画像位置がずれないようにする。
     em指定なのでSPのfont-sizeにも自動で追従する（2行分を確保するなら 3em＝1.5em×2） */
  min-height: 1.8em;
  /* 切り替え時のクロスフェード。main.jsのCAPTION_FADEと同じ値にする（往復で画像のspeed:800と一致） */
  transition: opacity .4s ease;
}

.fv__poster_caption.is-fading {
  opacity: 0;
}

/* ドット・矢印（slick風の見た目） */
.poster_nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
}

/* 矢印はarrow.svg（左向き）を共用。右は反転。サイズはCSSで制御 */
.poster_arrow {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  border: none;
  background: url(../img/arrow.svg) center/contain no-repeat;
  font-size: 0;
  cursor: pointer;
  transition: opacity .2s;
}

.poster_arrow--next {
  transform: scaleX(-1);
}

.poster_dots {
  display: flex;
  gap: 13.7px;
}

.poster_dots button {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #cacaca;
  transition: background .2s, transform .2s;
}

.poster_dots button.is-active {
  background: var(--ink);
  transform: scale(1.15);
}

/* SCROLL indicator */
.scroll_ind {
  position: absolute;
  left: max(24px, calc(50vw - 605px));
  top: 665px;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 4px;
  z-index: 10;
}

.scroll_ind__label {
  writing-mode: vertical-rl;
  font-family: var(--f-en);
  font-size: .7rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  line-height: 1;
}

.scroll_ind__line {
  width: 1px;
  height: 180px;
  background: rgba(0, 0, 0, .25);
  position: relative;
  overflow: hidden;
}

.scroll_ind__line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50px;
  background: var(--ink);
  animation: scrolldown 1.8s ease-in-out infinite;
}

@keyframes scrolldown {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(250%);
  }
}

/* ==========================================================================
   05. SERVICE（六角形フロー）
   ========================================================================== */

.service {
  padding: 120px 0 100px;
}

.service .head_band {
  margin-bottom: 67px;
}

.flow {
  display: flex;
  justify-content: center;
}

.flow__item {
  flex: 0 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flow__item+.flow__item {
  margin-left: -13px;
}

.flow__item--low {
  transform: translateY(58px);
}

.flow__item:nth-child(even) {
  justify-content: flex-end;
}

/* 六角形：濃紺の外形(=枠)の上に白い六角形を内側に重ねる（clip-pathでは枠線が出ないため） */
.hexagon {
  width: 197px;
  height: 172px;
  margin: 0 auto;
  position: relative;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.hexagon::before {
  content: "";
  position: absolute;
  inset: 2px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: var(--white);
  z-index: 0;
}

.hexagon img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.hexagon__ttl {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}

.flow__desc {
  font-size: 15px;
  line-height: 1.5;
  margin-top: 12px;
  font-weight: 600;
  font-family: var(--f-head);
}

.flow__desc--top {
  margin-top: 0;
  margin-bottom: 12px;
}

.flow__item--low .flow__desc--top {
  order: -1;
}

/* ==========================================================================
   06. SCENE
   ========================================================================== */
.section#scene {
  padding: 100px 0 200px;
}

.scene .head_band {
  margin-bottom: 30px;
}

.scene__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

.scene__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: .3em;
  margin-bottom: 1em;
  position: relative;
}

.scene__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 4px;
  background-color: var(--ink);
}

.scene__ttl {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 20px;
}

.scene__head img {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  margin-left: auto;
  object-fit: contain;
}

.scene__desc {
  font-size: 15px;
  font-family: var(--f-head);
}

/* ==========================================================================
   07. STRENGTHS
   ========================================================================== */

.strengths .head_band {
  margin-bottom: 66px;
}

.strengths__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem 2.4rem;
}

.strength_card__ttl {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 20px;
  margin-bottom: .5em;
}

/* clip-path要素の枠線：親を枠線色で塗り、疑似要素を内側に少し小さく重ねる（borderは切り取られるため） */
.strength_card__body {
  position: relative;
  background: var(--ink);
  clip-path: polygon(0 0, 95% 0, 100% 17%, 100% 100%, 5% 100%, 0 85%);
  padding: 1.6em 1.8em;
  display: flex;
  align-items: center;
  gap: 1em;
  min-height: 130px;
}

.strength_card__body::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--white);
  clip-path: polygon(0 0, 95% 0, 100% 17%, 100% 100%, 5% 100%, 0 85%);
  z-index: 0;
}

.strength_card__body .strength_card__text {
  position: relative;
  z-index: 1;
  font-size: 15px;
  flex: 1;
  font-family: var(--f-head);
}

.strength_card__body img {
  position: relative;
  z-index: 1;
  width: 90px;
  height: 70px;
  flex: 0 0 auto;
  object-fit: contain;
  flex-shrink: 0;
}

/* ==========================================================================
   08. WORKS（カルーセル）
   ========================================================================== */

.works .head_band {
  margin-bottom: 20px;
}

.carousel {
  position: relative;
}

.carousel__viewport {
  width: 100%;
  overflow: hidden;
}

/* slickが内部生成する.slick-track（実際にスライドを並べているコンテナ）を上下中央揃えに */
#worksCarousel .slick-track {
  display: flex;
  align-items: center;
}

/* スライドの横並び・移動・見切れ量(centerPadding)はslick(main.js側)が制御 */
/* variableWidth:true（main.js）により、slickはこの幅をそのまま採用して位置計算する */
.work_card {
  width: 100%;
  text-align: center;
  padding: 20px 25px;
  position: relative;
  background: var(--ink);
  clip-path: polygon(0 0, 96% 0, 100% 12%, 100% 100%, 4% 100%, 0 88%);
  cursor: pointer;
  margin: 0 18px;
  transition: transform .5s;
}

/* 非中央は縮小表示（750px:447px の比率相当）。widthではなくtransformで表現し、slickの位置計算に影響を与えない */
/* transform-originはmain.js側でcenterの前後の要素に直接指定する（クローンによる兄弟判定のズレを避けるため） */
/* 判定は slick 標準の .slick-center ではなく main.js が付ける .is-center を使う。
   centerMode + infinite では、最後→最初のループ中に実際に中央へ来るのは1枚目のクローンなのに
   slickは .slick-center を実スライド側に付けるため、その500msだけ中央カードが縮小してしまう。
   （詳細は main.js の markCenter のコメント。SP側の打ち消しは 16-08 にあり、
     セレクタの詳細度を合わせる必要があるので片方だけ変えないこと） */
.work_card:not(.is-center) {
  transform: scale(0.596);
}

.work_card::before {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--white);
  clip-path: polygon(0 0, 96% 0, 100% 12%, 100% 100%, 4% 100%, 0 88%);
  z-index: -1;
}

.work_card__ttl {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 1.2em;
}

.work_card__copy {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 9px;
  margin-top: 3em;
}

.work_card__img img {
  position: relative;
  z-index: 1;
  margin-inline: auto;
  max-height: 290px;
}

.carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 70px;
  height: 70px;
  border: none;
  background: url(../img/arrow.svg) center/contain no-repeat #fff;
  font-size: 0;
  cursor: pointer;
  z-index: 2;
  border-radius: 50%;
}

.carousel__nav--prev {
  left: calc(50vw - 380px);
}

.carousel__nav--next {
  right: calc(50vw - 380px);
  transform: translateY(-50%) scaleX(-1);
}

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 2rem;
}

.carousel__dots button {
  width: 7.25px;
  height: 7.25px;
  border-radius: 50%;
  background: var(--gray);
  transition: background .25s;
}

.carousel__dots button.is-active {
  background: var(--orange);
}

/* ==========================================================================
   09. FAQ
   ========================================================================== */

.faq .head_band {
  margin-bottom: 65px;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 19px;
}

.faq__item {
  position: relative;
  background: var(--ink);
  clip-path: polygon(0px 0px, 97.4% 0px, 100% 17%, 100% 100%, 2.4% 100%, 0px 83%);
  padding: 25px 30px;
}

.faq__item::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--white);
  clip-path: polygon(0px 0px, 97.4% 0px, 100% 17%, 100% 100%, 2.4% 100%, 0px 83%);
  z-index: 0;
}

.faq__q {
  position: relative;
  z-index: 1;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 18px;
  display: flex;
  align-items: flex-start;
  gap: .7em;
  padding-left: 40px;
}

.faq__q::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-image: url(../img/icon_q.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.faq__a {
  position: relative;
  z-index: 1;
  font-family: var(--f-head);
  display: flex;
  align-items: flex-start;
  gap: .7em;
  margin-top: .7em;
  font-size: 14.5px;
  padding-left: 40px;
}

.faq__a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-image: url(../img/icon_a.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.faq__mark {
  flex: 0 0 auto;
  width: 1.7em;
  height: 1.7em;
  border: 2px solid var(--orange);
  border-radius: 50%;
  color: var(--orange);
  font-family: var(--f-en);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85em;
}

/* ==========================================================================
   10. CONTACT
   ========================================================================== */

.contact .head_band {
  margin-bottom: 65px;
}

/* フォーム埋め込み後は枠の背景（グレー）を出さない。高さは中のiframeに合わせる */
.contact__form_area {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 高さはフォームの実測値（1120px幅で865px）に余裕を持たせた固定値。
   フォームは別ドメイン(go.aqua-star.co.jp)のiframeで、クロスオリジンのため
   中身の高さを取得して自動追従させることができない。
   ※フォームの項目が増減したら、この値を実測して直す必要がある */
.contact__form_area iframe {
  display: block;
  width: 100%;
  height: 900px;
}

/* ==========================================================================
   11. Footer
   ========================================================================== */

.site_footer {
  background: #333;
  color: var(--white);
  padding: 38px 0;
}

.site_footer__inner {
  width: min(94%, 1320px);
  margin-inline: auto;
  display: flex;
  align-items: center;
}

.site_footer__logo {
  width: 180px;
  height: 35px;
  display: block;
}

.site_footer__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site_footer__sns {
  display: flex;
  gap: 24px;
  margin-left: auto;
}

.site_footer__sns a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .3s;
  flex-shrink: 0;
}

.site_footer__sns a:hover {
  opacity: .7;
}

/* ==========================================================================
   12. Floating CTA（追従ボタン）
   ========================================================================== */

/* 追従ボタン：黒円は中央、GET IN TOUCHの回転文字は円の外側 */
.float_contact {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 135px;
  height: 135px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s, opacity .35s ease, visibility .35s ease;
  opacity: 1;
  visibility: visible;
}

/* CONTACTセクションに入ったらJSでis-hiddenを付与してfadeOut */
.float_contact.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.float_contact__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: spin 14s linear infinite;
}

.float_contact__ring text {
  fill: var(--ink);
  font-family: var(--f-en);
  font-size: 10px;
  letter-spacing: 0;
  font-weight: 300;
  text-transform: uppercase;
}

.float_contact__center {
  position: relative;
  z-index: 1;
  width: 109px;
  height: 109px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .25s, color .25s, box-shadow .25s;
}

/* ホバー：白円＋黒文字に反転（外周のGET IN TOUCHは黒のまま） */
.float_contact:hover .float_contact__center {
  background: var(--white);
  color: var(--ink);
}

.float_contact__center svg {
  width: 30px;
  height: 27px;
  color: currentColor;
}

.float_contact__center svg * {
  color: currentColor;
}

.float_contact__label {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .02em;
}

.float_contact__line {
  width: 26px;
  height: 1.5px;
  background: currentColor;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   13. 波形帯（セクション境界のワイプ）
   ※ SP の top 値は 16-13 にまとめてある
   ========================================================================== */

/* 波形帯（SVG）：塗りはSVG側。端からシュルッと伸びるワイプ＋PC/SP切替 */
/* 各波はHTML側で対象セクション（position:relative）の最後の子要素として配置。
   top:100%＝セクションの下端（従来のフロー配置と同じ開始位置）を基準にposition:absoluteで自由配置。
   微調整は下の固有クラス（.wave--service 等）に top/bottom/left/right を追記するだけでOK。 */
.wave_band {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  line-height: 0;
  overflow: hidden;
  z-index: -1;
}

/* 固有クラス：ここに微調整用の値を追記する（例: bottom: -40px; や transform: translateY(-20px);） */
.wave--service {
  top: 345px;
}

.wave--scene {
  top: 430px;
}

.wave--strengths {
  top: 380px;
}

.wave--works {
  top: 440px;
}

.wave--faq {
  top: 870px;
}

.wave_band img {
  width: 100%;
  height: auto;
  display: block;
  transition: clip-path 1.3s cubic-bezier(.65, 0, .35, 1);
}

.wave_band .wave_sp {
  display: none;
}

.wave_band--rtl img {
  clip-path: inset(0 0 0 100%);
}

/* 右端のみ → 左へ伸びる */
.wave_band--ltr img {
  clip-path: inset(0 100% 0 0);
}

/* 左端のみ → 右へ伸びる */
.wave_band.is-visible img {
  clip-path: inset(0 0 0 0);
}

/* FV下の白波：FV最下部にオーバーレイ（黄色背景の上に白波） */
/* 白波：横幅いっぱい */
.fv__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -60px;
  width: auto;
  line-height: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.fv__wave img {
  width: 100%;
  height: auto;
  display: block;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1.4s cubic-bezier(.65, 0, .35, 1) .3s;
}

.fv__wave .wave_sp {
  display: none;
}

.fv__wave.is-visible img {
  clip-path: inset(0 0 0 0);
}

/* ==========================================================================
   14. 出現アニメ
   ※ 無効化指定（prefers-reduced-motion）は 17 にまとめてある
   ========================================================================== */

/* アニメB：文字がぬるりと現れる
   マスク（.anim_b_mask）の中を、文字（.anim_b_inn）が下から滑り上がってくる2重構造。
   内側の2要素は main.js が自動生成するので、HTML側は .anim_b を付けるだけでよい。
   指示書どおり「文字だけ」に付けるクラスなので、カード枠・六角形・アイコン・画像には付けない。
   ※マスクを既存要素ではなく内側に持たせているのは、FAQのQ/Aアイコンのように
     要素の外側ぎりぎりに置かれた疑似要素が overflow:hidden で切れるのを避けるため */
.anim_b .anim_b_mask {
  display: block;
  overflow: hidden;
  opacity: 0;
  /* 親がflexの場合（.faq__q・.scene__ttl等）に幅が足りず折り返しが崩れるのを防ぐ */
  flex: 1;
  min-width: 0;
}

.anim_b .anim_b_mask .anim_b_inn {
  display: block;
  opacity: 0;
  /* 文字サイズ基準で下に逃がす。マスクで隠れるので見た目は「何もない状態」から始まる */
  transform: translateY(2.8em);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.anim_b.is-visible .anim_b_mask {
  opacity: 1;
}

.anim_b.is-visible .anim_b_mask .anim_b_inn {
  opacity: 1;
  transform: translateY(0);
}

/* 見出しより本文をわずかに遅らせて、同じカード内で順に現れるようにする */
.flow__desc.anim_b .anim_b_mask .anim_b_inn,
.scene__desc.anim_b .anim_b_mask .anim_b_inn,
.strength_card__text.anim_b .anim_b_mask .anim_b_inn,
.faq__a.anim_b .anim_b_mask .anim_b_inn,
.work_card__copy.anim_b .anim_b_mask .anim_b_inn {
  transition-delay: .12s;
}

/* アニメA：黒帯見出しの背景（＋文字）が左→右に流れて現れる */
.head_band__row,
.fv__catch_band {
  clip-path: inset(0 101% 0 0);
  transition: clip-path .85s cubic-bezier(.76, 0, .24, 1);
}

.head_band.is-visible .head_band__row,
.fv__catch.is-visible .fv__catch_band {
  clip-path: inset(0 0 0 0);
}

.head_band.is-visible .head_band__row:nth-child(2),
.fv__catch.is-visible .fv__catch_band:nth-child(2) {
  transition-delay: .18s;
}

/* ==========================================================================
   15. Thanks page
   ========================================================================== */

/* コンテンツが短くても画面下端までフッターを送る（ページ下の白余白対策） */
.page_thanks {
  min-height: 100vh;
  min-height: 100dvh;
  /* モバイルのツールバー分を除いた実高さ */
  display: flex;
  flex-direction: column;
}

.page_thanks main {
  flex: 1;
}

/* 見出しエリア：LPのFVと同じ黄色＋グリッド。label_en / head_band はLP本体の指定を流用 */
.thanks_hero {
  position: relative;
  background: var(--yellow);
  min-height: 400px;
  padding: calc(var(--header-h) + 90px) 0 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.thanks_hero__inner {
  position: relative;
  z-index: 1;
  width: min(92%, var(--maxw));
  margin-inline: auto;
  text-align: center;
}

/* head_bandはLP本体では左揃え(align-items:flex-start)のため、中央寄せに上書き */
.thanks_hero .head_band {
  margin-bottom: 0;
  align-items: center;
}

/* 黒帯はmain.jsが付ける.is-visibleで開く仕様。thanksページはmain.jsを読まないため常時開いた状態にする */
.thanks_hero .head_band__row {
  clip-path: inset(0 0 0 0);
}

/* 波：thanksページはmain.jsを読まないため、ワイプ演出なしで常時表示 */
.thanks_hero__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  line-height: 0;
  pointer-events: none;
}

.thanks_hero__wave img {
  width: 100%;
  height: auto;
  display: block;
}

.thanks_hero__wave .wave_sp {
  display: none;
}

.thanks_body {
  width: min(92%, var(--maxw));
  margin-inline: auto;
  padding: 90px 0 130px;
}

.thanks_body__lead {
  font-size: 16px;
  line-height: 2;
  margin-bottom: 70px;
  text-align: center;
}

.thanks_body__back {
  display: block;
  width: fit-content;
  margin-inline: auto;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 17px;
  background: var(--ink);
  color: var(--white);
  padding: 1em 3.8em;
  border-radius: 999px;
  transition: opacity .25s;
}

.thanks_body__back:hover {
  opacity: .8;
}

/* ==========================================================================
   16. Responsive（SP / max-width:768px）
   中の並び順・番号は上の 01〜15 と対応させている
   ========================================================================== */
@media (max-width:768px) {

  /* ---------- 16-01. Base（SP） ---------- */
  :root {
    --header-h: 60px;
    /* SPのFV高さ。縦長スライド（ゴジラ）1枚分の自然な高さ＝デザイン基準値。
       ここを変えれば .fv と .scroll_ind の位置が一緒に追従する。
       ※この値を155.2vwより小さくすると左英字「IP PROMOTION」が2列に折り返す */
    --fv-h-sp: 182.3vw;
  }

  .pc {
    display: none;
  }

  .sp {
    display: block;
  }

  /* ---------- 16-02. Layout common（SP） ---------- */
  .section {
    padding: 13.3vw 0;
  }

  .section__inner {
    width: min(90%, var(--maxw));
  }

  .head_band {
    font-size: 5.3vw;
  }

  .head_band__row {
    padding: 0.3em .5em;
    letter-spacing: 0.05em;
  }

  .label_en {
    font-size: 4.5vw;
    margin-bottom: 0.2em;
  }

  /* ---------- 16-03. Header（SP） ---------- */
  .site_header.is-scrolled {
    background-color: unset;
    box-shadow: unset;
  }

  .site_header__inner {
    width: 90%;
    gap: 1rem;
  }

  .site_header__logo {
    width: 26.7vw;
    height: 5.4vw;
  }

  .gnav {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--ink);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
    pointer-events: none;
  }

  .gnav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .gnav__list {
    flex-direction: column;
    padding: 24vw 5vw 0;
    gap: 0;
  }

  .gnav__link {
    display: block;
    padding: 1em 0;
    font-size: 3.2vw;
    color: var(--yellow);
    text-align: right;
  }

  .btn_download {
    display: none;
  }

  .hamburger {
    display: flex;
    position: relative;
    z-index: 1;
  }

  /* ---------- 16-04. FV（SP） ---------- */
  /* SPは絶対配置をやめて縦積み */
  /* 高さを --fv-h-sp で固定し、中身は justify-content:flex-end で下端に揃える。
     横長スライドで余った分はスライドより上（黄色い背景だけの領域）に逃げるので、
     キャッチ・CTAボタン・FV下端の位置はスライドが変わっても動かない。
     min-heightなので、将来もっと縦長の画像が入っても切れずにFVが伸びる */
  .fv {
    height: auto;
    min-height: var(--fv-h-sp);
    justify-content: flex-end;
    padding: 23.2vw 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 32px;
  }

  .fv__copy {
    position: relative;
    transform: none;
    left: auto;
    top: auto;
    max-width: 100%;
    order: 2;
    padding: 0 13vw;
  }

  .fv__catch {
    align-items: flex-start;
    font-size: 7.2vw;
    gap: 1.3vw;
    margin-bottom: unset;
  }

  .fv__en {
    display: none;
  }

  /* 固有クラス（.fv__vert--left等）にtop/left/rightを追記して微調整 */
  .fv__vert {
    display: block;
    position: absolute;
    top: 17.3vw;
    writing-mode: vertical-rl;
    font-family: var(--f-en);
    font-weight: 500;
    color: var(--ink);
    font-size: 14.6vw;
    line-height: 1;
    letter-spacing: -0.05em;
    z-index: 2;
  }

  .fv__vert--left {
    left: -3vw;
  }

  .fv__vert--right {
    right: -3vw;
  }

  .fv__cta {
    display: flex;
    gap: 2.6vw;
    margin-top: 9.6vw;
  }

  .fv__cta_btn {
    flex: 1;
    text-align: center;
    font-family: var(--f-head);
    font-weight: 600;
    font-size: 3.4vw;
    padding: 0.7vw 6.9vw;
    border-radius: 10px 10px 0 0;
  }

  .fv__cta_btn--dl {
    background: var(--ink);
    color: var(--white);
  }

  .fv__cta_btn--contact {
    background: var(--white);
    color: var(--ink);
    border: 2px solid var(--ink);
  }

  .fv__poster_col {
    position: static;
    transform: none;
    right: auto;
    top: auto;
    width: 61.8vw;
    max-width: 61.3vw;
  }

  /* min-height は PC 519px と同じ考え方（縦長ポスターが収まる基準値）を vw 換算したもの */
  .fv__poster {
    margin-bottom: 7.2vw;
    min-height: 86.9vw;
  }

  .fv__poster.is-visible .fv__poster_frame .fv__poster_deco {
    transform: rotate(4deg);
  }

  .poster_slider {
    width: 61.3vw;
    border: solid 1px var(--ink);
  }

  /* 04-A「固定高さモード」のSP値。切り替えは index.html の <html> に
     class="poster_fixed" を足すだけ（詳細は 04-A のコメント参照） */
  .poster_fixed .poster_slider {
    height: 86.9vw;
  }

  /* SPは幅が狭く2行になるキャプションがあるため、2行分（1.5em×2）を確保しておく。
     1行分のままだと、キャプションの行数が変わるスライドでだけ画像の位置が上下にずれる */
  .fv__poster_caption {
    font-size: 2.9vw;
    margin-bottom: 1.7vw;
    letter-spacing: 0;
    min-height: 3em;
  }

  .poster_arrow {
    width: 3.9vw;
    height: 3.9vw;
  }

  .poster_dots {
    gap: 9.5px;
  }

  .poster_dots button {
    width: 3.5px;
    height: 3.5px;
  }

  /* .scroll_ind は .fv の外（兄弟）にあるため、FV下端から逆算して配置する。
     線を意図的にSERVICEセクションへ食い込ませるデザインなので、.fv の中に入れると
     overflow:hidden で切られてしまう。上下位置は下の計算式の引き算の値で調整する */
  .scroll_ind {
    left: auto;
    right: 5vw;
    top: calc(var(--fv-h-sp) - 29vw);
  }

  .scroll_ind__line {
    height: 165px;
  }

  /* ---------- 16-05. SERVICE（SP） ---------- */
  .service .head_band {
    margin-bottom: 6.6vw;
  }

  .flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: unset;
    row-gap: unset;
  }

  /* 六角形をハニカム状にずらすためのレイアウト指定（出現アニメとは無関係）。
     3列グリッドで1マスずつ下げていくので、6個それぞれ違う値になる */
  .flow__item:nth-child(1) {
    transform: translateY(0);
  }

  .flow__item:nth-child(2) {
    transform: translateY(15vw);
  }

  .flow__item:nth-child(3) {
    transform: translateY(30vw);
  }

  .flow__item:nth-child(4) {
    transform: translateY(2vw);
  }

  .flow__item:nth-child(5) {
    transform: translateY(18vw);
  }

  .flow__item:nth-child(6) {
    transform: translateY(28vw);
  }

  /* 六角形：濃紺の外形(=枠)の上に白い六角形を内側に重ねる（clip-pathでは枠線が出ないため） */
  .hexagon {
    width: 32.2vw;
    height: 28.2vw;
    gap: 2vw;
  }

  .hexagon::before {
    inset: 1px;
  }

  .hexagon img {
    width: 9.6vw;
    height: 10.1vw;
  }

  .hexagon__ttl {
    font-size: 3.7vw;
    line-height: 1.2;
  }

  .flow__desc {
    font-size: 3.2vw;
    line-height: 1.5;
    margin-top: 2.1vw;
  }

  .flow__desc--top {
    margin-top: 0;
    margin-bottom: 2.1vw;
  }

  .flow__item--low .flow__desc--top {
    order: 0;
    margin-top: 12px;
    margin-bottom: 0;
  }

  /* ---------- 16-06. SCENE（SP） ---------- */
  .section#scene {
    padding: 31vw 0 0;
  }

  .scene .head_band {
    margin-bottom: 3vw;
  }

  .scene__list {
    grid-template-columns: 1fr;
    gap: 4vw;
  }

  .scene__head {
    padding-right: 9.3vw;
  }

  .scene__ttl {
    font-size: 5.8vw;
  }

  .scene__head img {
    width: 14.6vw;
    height: 14.6vw;
  }

  .scene__desc {
    font-size: 3.7vw;
  }

  /* ---------- 16-07. STRENGTHS（SP） ---------- */
  .section#strength {
    padding: 24vw 0 0;
  }

  .strengths .head_band {
    margin-bottom: 6.6vw;
  }

  .strengths__grid {
    grid-template-columns: 1fr;
    gap: 6.6vw;
  }

  .strength_card__ttl {
    font-size: 4.1vw;
    margin-bottom: 0.2em;
  }

  .strength_card__body {
    padding: 3.2vw 5vw;
    display: flex;
    align-items: center;
    gap: 2vw;
    min-height: unset;
  }

  .strength_card__body .strength_card__text {
    font-size: 3.6vw;
  }

  /* ---------- 16-08. WORKS（SP） ---------- */
  /* ▼【カード高さを揃えるモード】現在OFF。下の2ルールのコメントを外すとONになる
       ON にすると：全カードが一番高いカード（実測 284.95px）に揃う。
                    中身は上詰めなので、短いカードはその分だけ下に余白ができる。
       OFF（現在）：カードごとに高さが変わる（実測 252〜285px）。下の余白は出ない。
                    .slick-track は 08 の align-items:center が効き、カードは上下中央に置かれる。
       ※ PC側は触らないこと。中央以外のカードを transform:scale(0.596) で縮小する都合で
          align-items:center が必要なため、この切り替えはSP専用にしている。
       ※ 高さの差はタイトルの行数だけでなく画像の縦横比にも起因するので、
          .work_card__ttl に min-height を足しても揃わない（1行のゴジラが2行のDEWPOINTより高い）
    #worksCarousel .slick-track {
      align-items: stretch;
    }

    #worksCarousel .slick-slide {
      height: auto;
    }
  */

  /* SPはcenterMode:falseで1枚のみ表示のため、縮小をかけない
     （08 の .work_card:not(.is-center) を打ち消す。詳細度を揃えるため同じセレクタにしている） */

  .section#works {
    padding: 25vw 0 10vw;
  }

  .work_card:not(.is-center) {
    transform: none;
  }

  .work_card__ttl {
    font-size: 3.4vw;
  }

  .work_card__copy {
    font-size: 2.8vw;
    margin-top: 1em;
  }

  .work_card__img img {
    max-height: 43.2vw;
  }

  .carousel__nav {
    width: 35px;
    height: 35px;
    font-size: 1.2rem;
  }

  .carousel__nav--prev {
    left: 8px;
  }

  .carousel__nav--next {
    right: 8px;
  }

  .carousel__dots {
    margin-top: 15px;
  }

  /* ---------- 16-09. FAQ（SP） ---------- */
  .faq .head_band {
    margin-bottom: 6.6vw;
  }

  .faq__list {
    gap: 6.6vw;
  }

  .faq__item {
    padding: 3.2vw 3.7vw;
  }

  .faq__q {
    font-size: 3.7vw;
    gap: unset;
    padding-left: 8vw;
  }

  .faq__q::before {
    width: 6.6vw;
    height: 6.6vw;
  }

  .faq__a {
    gap: unset;
    margin-top: 3.2vw;
    font-size: 3.2vw;
    padding-left: 8vw;
    padding-top: 3.2vw;
    border-top: dotted 1px var(--ink);
  }

  .faq__a::before {
    width: 6.6vw;
    height: 6.6vw;
  }

  /* ---------- 16-10. CONTACT（SP） ---------- */
  .contact .head_band {
    margin-bottom: 6.6vw;
  }

  .contact__form_area {
    min-height: unset;
  }

  /* SPは実測1206px（375px幅）に余裕を持たせた値。
     iframeの中身は別ドキュメントで画面幅に比例して縮まないため、
     ここは例外的にvwではなくpxで指定している */
  .contact__form_area iframe {
    height: 1250px;
  }

  /* ---------- 16-11. Footer（SP） ---------- */
  .site_footer {
    padding: 6.4vw 0;
  }

  .site_footer__inner {
    flex-direction: row;
    justify-content: space-between;
    gap: 1.4rem;
    width: 90%;
  }

  .site_footer__logo {
    width: 26.6vw;
    height: 5.3vw;
  }

  .site_footer__sns {
    margin-left: 0;
    gap: 3.7vw;
    flex-shrink: 0;
  }

  .site_footer__sns a {
    width: 7.4vw;
    height: 7.4vw;
  }

  .site_footer__sns a:hover {
    opacity: 1;
  }

  /* ---------- 16-12. Floating CTA（SP） ---------- */
  .float_contact {
    display: none !important;
  }

  /* ---------- 16-13. 波形帯（SP） ---------- */
  .wave_band .wave_pc,
  .fv__wave .wave_pc {
    display: none;
  }

  .wave_band .wave_sp,
  .fv__wave .wave_sp {
    display: block;
  }

  .wave--service {
    top: 149vw;
  }

  .wave--scene {
    top: 170vw;
  }

  .wave--strengths {
    top: 197vw;
  }

  .wave--works {
    top: 112vw;
  }

  .wave--faq {
    top: 286vw;
  }

  .fv__wave {
    display: none;
  }

  /* ---------- 16-15. Thanks page（SP） ---------- */
  .thanks_hero {
    min-height: 75vw;
    padding: calc(var(--header-h) + 8vw) 0 24vw;
  }

  .thanks_hero__wave .wave_pc {
    display: none;
  }

  .thanks_hero__wave .wave_sp {
    display: block;
  }

  .thanks_body {
    padding: 12vw 0;
  }

  .thanks_body__lead {
    font-size: 3.7vw;
    line-height: 1.9;
    margin-bottom: 12vw;
  }

  .thanks_body__back {
    width: 100%;
    text-align: center;
    font-size: 4.2vw;
    padding: 1.1em 0;
  }
}

/* ==========================================================================
   17. アニメ無効化（prefers-reduced-motion）
   ========================================================================== */
@media (prefers-reduced-motion:reduce) {
  * {
    animation: none !important;
  }

  .anim_b .anim_b_mask,
  .anim_b .anim_b_mask .anim_b_inn {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .head_band__row,
  .fv__catch_band {
    clip-path: inset(0 0 0 0) !important;
  }

  .wave_band img,
  .fv__wave img {
    clip-path: inset(0 0 0 0) !important;
  }
}