/*
Theme Name: Choritz
Description: CHORITZ - 中国輸入・OEM生産サービスサイト
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: choritz
*/

/* ============================================
   ベースリセット
   （ブラウザごとの表示差をなくす）
   ============================================ */

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

html {
  scroll-behavior: smooth;
}

/* ページ全体ラッパー（::before bg-patternのY軸はみ出しをクリップ） */
.page-wrapper {
  overflow: clip;
}

/* ============================================
   CSS変数（サイト全体で使う共通の値）
   ============================================ */
:root {
  --site-padding-pc: 283px;    /* PC（1920px）の左右余白 */
  --site-padding-laptop: 79px; /* ノートPC（14インチ）の左右余白 */
  --site-padding-sp: 20px;     /* スマホの左右余白 */
}

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  color: #333;
  line-height: 1.8;
  background-color: #fff;
}

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

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

ul, ol {
  list-style: none;
}

/* SP専用改行: PC版では非表示 */
.sp-only {
  display: none;
}

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

/* ============================================
   ヘッダー
   ============================================ */

/* ヘッダーラッパー: 白い四角 + お問い合わせボタンを横並びにする */
.header-wrapper {
  position: fixed;       /* 画面上部に固定する */
  top: 25px;             /* 上から25px下げる（浮かせる） */
  left: 50%;             /* 左端を画面中央に置く */
  transform: translateX(-50%); /* 自分の幅の半分だけ左に戻して中央配置 */
  width: calc(100% - 40px); /* 左右に20pxずつ余白をつける */
  z-index: 1000;         /* 他の要素より手前に表示 */
  display: flex;         /* 白い四角とボタンを横並びにする */
  align-items: center;   /* 縦方向の中央揃え */
  justify-content: center; /* 全体を中央揃え */
  gap: 0;                /* 隙間なし（白い四角とボタンをくっつける） */
}

/* ヘッダー本体（白い四角い部分） */
.site-header {
  background: #FFF;
  width: 1172px;         /* 白い四角の幅 */
  max-width: 100%;       /* 画面が狭い時は縮む */
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.08); /* 影：全方向にぼかし24px */
  border-radius: 18px;   /* 角を丸くする */
  flex-shrink: 1;        /* 画面が狭い時は縮む */
}

/* ヘッダー内側: ロゴとナビを横並びにする */
.header-inner {
  padding: 0 40px;       /* 左右に余白 */
  display: flex;         /* 横並びにする（フレックスボックス） */
  align-items: center;   /* 縦方向の中央揃え */
  justify-content: flex-start; /* 左詰めにする */
  height: 80px;          /* ヘッダーの高さ */
}

/* ロゴとナビの間の余白 */
.header-logo {
  margin-right: 105px;   /* ロゴからナビまでの余白 */
}

/* ロゴ */
.header-logo a {
  display: flex;
  align-items: center;
}

/* ロゴ画像 */
.header-logo-img {
  width: 262.699px;          /* ロゴの横幅 */
  height: 36px;              /* ロゴの高さ */
}

/* ナビゲーション: リンクを横並びにする */
.header-nav ul {
  display: flex;         /* 横並び */
  align-items: center;
  gap: 32px;             /* リンク同士の間隔 */
  flex-wrap: nowrap;     /* 折り返さない */
}

/* ナビのリンクを改行させない */
.header-nav li {
  white-space: nowrap;
}

/* 最後の項目（よくあるご質問）の右余白 */
.header-nav li:last-child {
  margin-right: 21px;    /* 61px - 40px(右padding) = 21px 追加 */
}

/* ナビのリンク */
.header-nav a {
  color: #000;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 28.35px;       /* 202.5% */
  letter-spacing: 0.56px;
  transition: color 0.3s;     /* 色の変化をなめらかに */
}

/* ナビのリンク: マウスを乗せたとき */
.header-nav a:hover {
  color: #e8546a;        /* Figmaのピンク系カラー */
}

/* お問い合わせボタン（四角の外側） */
.nav-contact-btn {
  width: 182px;
  height: 80px;
  border-radius: 55.125px;
  background: #F22D4F;
  color: #FFF !important;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 28.35px;
  letter-spacing: 0.56px;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-contact-btn:hover {
  background: #d9263f;         /* 少し暗くする */
  color: #fff !important;
}

/* ヘッダー固定による余白補正 */
/* ヘッダーが固定＋浮遊しているので、その分の余白を追加 */
/* 80px（ヘッダー高さ）+ 16px（上の余白）+ 16px（下の余白） = 112px */
body {
  padding-top: 112px;
}

/* ============================================
   メインビジュアル（トップページの一番上の大きなエリア）
   ============================================ */

/* メインビジュアル全体 */
.section-mv {
  height: 100vh;
  padding: 0;
  margin-top: -112px;
  position: relative;
  overflow: hidden;
}

/* MVコンテナ */
.mv-sticky {
  position: relative;
  height: 100%;
  overflow: hidden;
}

/* WordPress管理バー表示時の補正 */
.admin-bar .section-mv {
  margin-top: -32px;
  padding-top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .section-mv {
    margin-top: -46px;
    padding-top: 46px;
  }
}

/* テキスト + ロゴ（中央配置） */
.mv-content {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  opacity: 0;
  transition: opacity 1s ease-out;
}

/* メインテキストSVG */
.mv-main-text {
  display: block;
  width: clamp(14.625rem, 12.49rem + 8.76vw, 23rem);
  max-width: none;
  height: auto;
  margin: 0 auto clamp(0.875rem, 0.748rem + 0.52vw, 1.375rem);
}

/* 赤ロゴ */
.mv-logo-mark {
  width: clamp(15.938rem, 13.61rem + 9.55vw, 25.068rem);
  max-width: none;
  height: auto;
  margin: 0 auto;
}

/* === 写真コンテナ === */
.mv-photos {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* 各写真の共通スタイル */
.mv-photo {
  position: absolute;
  border-radius: 16px;
  overflow: hidden;
  /* 初期状態: 中心に小さく、透明 */
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3);
  top: 50%;
  left: 50%;
  transition: none;
}
.mv-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* アニメーション中のトランジション */
.mv-photo.is-animating {
  transition: opacity 1.2s ease-out, transform 1.2s ease-out, top 1.2s ease-out, left 1.2s ease-out;
}

/* ふわふわ浮遊アニメーション（配置完了後に適用） */
@keyframes mv-float-1 {
  0%, 100% { transform: translate(-50%, -50%) scale(1) translateY(0); }
  50% { transform: translate(-50%, -50%) scale(1) translateY(-8px); }
}
@keyframes mv-float-2 {
  0%, 100% { transform: translate(-50%, -50%) scale(1) translateY(0); }
  50% { transform: translate(-50%, -50%) scale(1) translateY(-6px); }
}
@keyframes mv-float-3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1) translateY(0); }
  50% { transform: translate(-50%, -50%) scale(1) translateY(-10px); }
}
.mv-photo.is-floating {
  transition: none;
}
.mv-photo-1.is-floating { animation: mv-float-1 3.5s ease-in-out infinite; }
.mv-photo-2.is-floating { animation: mv-float-2 4s ease-in-out infinite; }
.mv-photo-3.is-floating { animation: mv-float-3 3.8s ease-in-out infinite; }
.mv-photo-4.is-floating { animation: mv-float-2 4.2s ease-in-out infinite; }
.mv-photo-5.is-floating { animation: mv-float-1 3.6s ease-in-out infinite; }
.mv-photo-6.is-floating { animation: mv-float-3 4s ease-in-out infinite; }

/* === 各写真の最終位置（PC） === */
/* 写真1: 左上（握手） - はみ出し */
.mv-photo-1 {
  width: clamp(16rem, 12rem + 16.67vw, 28.625rem);
  height: clamp(12rem, 9rem + 13.54vw, 22.063rem);
  border-radius: 20px;
}
.mv-photo-1.is-placed {
  opacity: 1;
  top: 30%;
  left: 10%;
  transform: translate(-50%, -50%) scale(1);
}

/* 写真2: 上中央（色見本） - 上にはみ出し */
.mv-photo-2 {
  width: clamp(10rem, 7.5rem + 10.42vw, 19.375rem);
  height: clamp(7rem, 5.25rem + 7.29vw, 12.75rem);
  border-radius: 20px;
}
.mv-photo-2.is-placed {
  opacity: 0.9;
  top: 14%;
  left: 35%;
  transform: translate(-50%, -50%) scale(1);
}

/* 写真3: 右上（貿易港） - 右にはみ出し */
.mv-photo-3 {
  width: clamp(22rem, 32.19vw, 38.625rem);
  height: auto;
  aspect-ratio: 38.625 / 25.813;
  border-radius: 20px;
}
.mv-photo-3.is-placed {
  opacity: 1;
  top: 19%;
  left: 84%;
  transform: translate(-50%, -50%) scale(1);
}

/* 写真4: 左下（ニット服） - 左にはみ出し */
.mv-photo-4 {
  width: clamp(19rem, 28.18vw, 33.813rem);
  height: auto;
  aspect-ratio: 33.813 / 22.688;
  border-radius: 20px;
}
.mv-photo-4.is-placed {
  opacity: 1;
  top: 75%;
  left: 16%;
  transform: translate(-50%, -50%) scale(1);
}

/* 写真5: 下中央（ミシン） */
.mv-photo-5 {
  width: clamp(9rem, 13.33vw, 16rem);
  height: auto;
  aspect-ratio: 16 / 9.688;
  border-radius: 20px;
}
.mv-photo-5.is-placed {
  opacity: 1;
  top: 77%;
  left: 46%;
  transform: translate(-50%, -50%) scale(1);
}

/* 写真6: 右下（箱詰め） - 右にはみ出し */
.mv-photo-6 {
  width: clamp(20rem, 29.17vw, 35rem);
  height: auto;
  aspect-ratio: 35 / 23;
  border-radius: 20px;
}
.mv-photo-6.is-placed {
  opacity: 1;
  top: 78%;
  left: 88%;
  transform: translate(-50%, -50%) scale(1);
}

/* ロゴマーク（写真展開後にフェードイン） */
.mv-image-last {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(13rem, 9.75rem + 13.54vw, 24rem);
  height: auto;
  z-index: 10;
  opacity: 0;
  transition: opacity 1.5s ease-out;
}
.mv-image-last.is-visible {
  opacity: 1;
}

/* CTAボタン */
.mv-cta {
  position: absolute;
  bottom: clamp(4rem, 3rem + 4.17vw, 7rem);
  right: clamp(2rem, 1.5rem + 2.08vw, 3.5rem);
  z-index: 15;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.mv-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.mv-cta:hover {
  opacity: 0.85;
}

.mv-cta img {
  display: block;
  width: clamp(14rem, 10.5rem + 14.58vw, 30rem);
  height: auto;
  max-width: none;
}

/* 中間コンテンツ全体の背景色 */
.front-page {
  position: relative;
  background: #FEF7F8;
  overflow-x: clip;
  isolation: isolate;
}

/* 背景装飾SVG
   isolation: isolate で作ったスタッキングコンテキスト内で
   z-index: -1 にすることで、セクションには一切触れずに背面表示 */
/* 1枚目 */
.front-page::before {
  content: '';
  position: absolute;
  top: calc(100vh + 100px);
  left: 0;
  width: 100%;
  height: 5950px;
  background: url('assets/images/bg-pattern.svg') no-repeat center top;
  background-size: 100% auto;
  -webkit-mask-image: linear-gradient(to bottom, black 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 86%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}
/* 2枚目 */
.front-page::after {
  content: '';
  position: absolute;
  top: calc(100vh + 100px + 5950px + 500px);
  left: 0;
  width: 100%;
  height: 5950px;
  background: url('assets/images/bg-pattern.svg') no-repeat center top;
  background-size: 100% auto;
  -webkit-mask-image: linear-gradient(to bottom, black 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 86%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

/* トップページのbody背景（お問い合わせセクション部分は透明にする） */
body.home,
body.page-template-front-page {
  background-color: #FEF7F8;
}

/* トップページ: SP時のみbody余白を除去してMV写真が上端まで表示されるように */

/* ============================================
   セクション共通
   ============================================ */

/* 各セクションに余白をつける */
section {
  padding: 80px 20px;
}

/* サービスセクション→特徴セクション間の余白拡大（160+80=240px） */
.section-service {
  padding-top: 100px;
  padding-bottom: 80px;
}


/* ============================================
   進行の流れ切り替えスイッチ
   ============================================ */

.flow-switch {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.flow-switch.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.flow-switch-item {
  width: 48px;
  height: 252px;
  position: relative;
}

.flow-switch-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 252px;
  height: 48px;
  transform: translate(-50%, -50%) rotate(90deg);
  border: none;
  border-radius: 18px 18px 0 0;
  cursor: pointer;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: background 0.3s, opacity 0.3s, box-shadow 0.3s;
}

.flow-switch-btn.is-active {
  background: #F22D4F;
  box-shadow: 0 3.15px 18.9px 0 rgba(0, 0, 0, 0.25);
  opacity: 1;
}

.flow-switch-btn:not(.is-active) {
  background: #595959;
  opacity: 0.5;
}

/* 買付フローセクション: 特徴セクションとの間を180pxに（80+100） */
.section-flow {
  overflow: visible;
}

.flow-sticky {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;
  gap: clamp(1rem, 0.809rem + 0.78vw, 1.75rem);
}

/* ============================================
   セクション見出し（共通パーツ）
   アイコン + 英語ラベル + 日本語タイトル + 説明文
   ============================================ */

.sec-heading {
  text-align: center;
}

/* 赤い三角形アイコン: PC=115.51px, SP=69px */
.sec-heading-icon {
  display: block;
  width: clamp(4.313rem, 3.572rem + 3.04vw, 7.219rem);
  height: auto;
  margin: 0 auto clamp(0.5rem, 0.437rem + 0.26vw, 0.75rem);
}

/* 英語ラベル（OUR SERVICESなど）: PC=20px, SP=12px */
.sec-heading-label {
  display: block;
  color: #F22D4F;
  text-align: center;
  -webkit-text-stroke-width: 0.25px;
  -webkit-text-stroke-color: #F22D4F;
  font-family: "Century Gothic", sans-serif;
  font-size: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: clamp(0.96px, 0.797px + 0.042vw, 1.6px);
  margin-bottom: clamp(0.625rem, 0.53rem + 0.39vw, 1rem);
}

/* 日本語タイトル: PC=38px, SP=24px */
.sec-heading-title {
  color: #000;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: clamp(1.5rem, 1.276rem + 0.92vw, 2.375rem);
  font-weight: 600;
  line-height: normal;
  letter-spacing: clamp(0.96px, 0.817px + 0.037vw, 1.52px);
  margin-bottom: clamp(0.875rem, 0.78rem + 0.39vw, 1.25rem);
}

/* 説明文: PC=18px/32px, SP=14px/24px */
.sec-heading-desc {
  color: #000;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: clamp(0.875rem, 0.812rem + 0.26vw, 1.125rem);
  font-weight: 400;
  line-height: clamp(1.5rem, 1.373rem + 0.52vw, 2rem);
  letter-spacing: clamp(0.56px, 0.519px + 0.011vw, 0.72px);
}

/* ============================================
   サービスの特徴・強み 背景カード
   ============================================ */

.feature-card {
  width: 1512px;
  max-width: 100%;
  height: 1161px;
  margin: 0 auto;
  padding: clamp(1.25rem, 0.293rem + 3.92vw, 5rem);
  border-radius: 54px;
  background: #FFF;
  box-shadow: 0 6px 60px 0 rgba(242, 45, 79, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* feature-card内の子要素が縮まないよう幅100%を確保 */
.feature-card > * {
  width: 100%;
}

/* 上段: 4つの主要特徴（縦線区切り） */
.feature-items {
  display: flex;
  margin-top: clamp(2rem, 1.682rem + 1.31vw, 3.25rem);
}

.feature-item {
  flex: 1;
  text-align: center;
  padding: 0 clamp(1rem, 0.682rem + 1.31vw, 2.25rem);
  border-right: 1px dashed #000;
}

.feature-item:last-child {
  border-right: none;
}

.feature-item-icon {
  width: clamp(3rem, 2.682rem + 1.31vw, 4.25rem);
  height: auto;
  margin: 0 auto clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);
}

.feature-item-title {
  color: #000;
  font-family: Inter, sans-serif;
  font-size: clamp(1.25rem, 1.123rem + 0.52vw, 1.75rem);
  font-weight: 600;
  line-height: normal;
  letter-spacing: 1.12px;
  margin-bottom: clamp(0.5rem, 0.437rem + 0.26vw, 0.75rem);
  position: relative;
  z-index: 1;
  display: inline-block;
}

/* タイトル下のピンクアンダーライン（不透明度25%） */
.feature-item-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: clamp(1rem, 0.873rem + 0.52vw, 1.5rem);
  background: #F22D4F;
  opacity: 0.25;
  z-index: -1;
}

.feature-item-desc {
  color: #000;
  font-family: Inter, sans-serif;
  font-size: clamp(0.875rem, 0.843rem + 0.13vw, 1rem);
  font-weight: 400;
  line-height: clamp(1.5rem, 1.468rem + 0.13vw, 1.625rem);
  letter-spacing: 0.48px;
}

/* 下段: 6つのサブ特徴（縦線区切り） */
.feature-sub-items {
  display: flex;
  margin-top: clamp(1.5rem, 1.246rem + 1.05vw, 2.5rem);
  padding-top: clamp(1.5rem, 1.246rem + 1.05vw, 2.5rem);
  border-top: 1px dashed #000;
}

.feature-sub-item {
  flex: 1;
  text-align: center;
  padding: 0 0.5rem;
  border-right: 1px dashed #000;
}

.feature-sub-item:last-child {
  border-right: none;
}

.feature-sub-text {
  color: #000;
  font-family: Inter, sans-serif;
  font-size: clamp(1rem, 0.936rem + 0.26vw, 1.25rem);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.8px;
}

/* CTAボタン2つ横並び */
.feature-buttons {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 0.682rem + 1.31vw, 2.25rem);
  margin-top: 72px;
}

/* 赤ピルボタン（共通パーツ・他セクションでも再利用可） */
.feature-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 340px;
  max-width: 100%;
  height: 53px;
  border-radius: 28.35px;
  background: #F22D4F;
  color: #FFF;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 1.08px;
  text-align: center;
  transition: opacity 0.3s;
}

.feature-btn:hover {
  opacity: 0.85;
  color: #FFF;
}

.feature-btn-arrow {
  margin-left: 0.75rem;
  font-size: 18px;
  font-weight: 600;
}

/* ============================================
   アパレルOEM セクション（sticky + translateX 横スクロール）
   ============================================ */

.section-oem {
  overflow: visible;
  padding-bottom: clamp(2rem, 1.682rem + 1.31vw, 3.25rem);
}

.oem-sticky {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 0.809rem + 0.78vw, 1.75rem);
}

/* ============================================
   買付・輸入代行の進行の流れ
   ============================================ */

/* 5ステップ横並び */
.flow-steps {
  display: flex;
  align-items: stretch;
  gap: clamp(0.5rem, 0.403rem + 0.4vw, 0.881rem);
  max-width: 1600px;
  margin: clamp(2rem, 1.682rem + 1.31vw, 3.25rem) auto 0;
}

/* 買付フロー */
.section-flow .flow-steps {
  max-width: none;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  scroll-snap-type: none;
  padding-left: calc(50vw - 130px);
  padding-right: calc(50vw - 130px);
  padding-top: 30px;
  padding-bottom: 30px;
  margin-top: -30px;
  margin-bottom: -30px;
}
.section-flow .flow-steps::-webkit-scrollbar {
  display: none;
}

.section-flow .flow-step {
  flex: 0 0 260px;
  min-width: 260px;
}

.section-flow .flow-step-title {
  color: #000;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 25.987px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 1.039px;
}

.section-flow .flow-step-desc {
  color: #000;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.64px;
  max-width: 242.55px;
  margin-inline: auto;
}

/* 買付フロー: 三角形SVGを更新 */
.section-flow .flow-step:not(:last-child)::after {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60' fill='none'%3E%3Cpath d='M42.168 30.0008L24.4199 41.7571L24.4199 18.2445L42.168 30.0008Z' fill='%23F22D4F'/%3E%3C/svg%3E") no-repeat center / 100%;
}

/* ステップカード */
.flow-step {
  flex: 1;
  max-width: 17.995rem;
  min-height: clamp(12.5rem, 9.919rem + 10.59vw, 22.625rem);
  background: #fff;
  border-radius: clamp(0.75rem, 0.654rem + 0.39vw, 1.125rem);
  padding: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  text-align: center;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 下の丸: シャドウ付き（カードの背面・影は右側のみ） */
.flow-step:not(:last-child)::before {
  content: '';
  position: absolute;
  right: clamp(-1.875rem, -1.091rem - 0.65vw, -1.25rem);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(2.5rem, 2.181rem + 1.31vw, 3.75rem);
  height: clamp(2.5rem, 2.181rem + 1.31vw, 3.75rem);
  border-radius: 50%;
  background: #fff;
  box-shadow: 12px 0 16px rgba(0, 0, 0, 0.05);
}

/* 上の丸: シャドウなし＋赤三角 */
.flow-step:not(:last-child)::after {
  content: '';
  position: absolute;
  right: clamp(-1.875rem, -1.091rem - 0.65vw, -1.25rem);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(2.5rem, 2.181rem + 1.31vw, 3.75rem);
  height: clamp(2.5rem, 2.181rem + 1.31vw, 3.75rem);
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='24' viewBox='0 0 18 24' fill='none'%3E%3Cpath d='M17.748 12.001L0 23.757L0 0.244L17.748 12.001Z' fill='%23F22D4F'/%3E%3C/svg%3E") no-repeat center / 40%;
}

/* 画像エリア */
.flow-step-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: clamp(0.5rem, 0.437rem + 0.26vw, 0.75rem);
  background: #f0f0f0;
  margin-bottom: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  z-index: 3;
}

/* カード本体のz-index（左が上）— 買付5枚 + OEM6枚対応 */
.flow-step:nth-child(1)  { z-index: 7; }
.flow-step:nth-child(3)  { z-index: 6; }
.flow-step:nth-child(5)  { z-index: 5; }
.flow-step:nth-child(7)  { z-index: 4; }
.flow-step:nth-child(9)  { z-index: 3; }
.flow-step:nth-child(11) { z-index: 2; }
.flow-step:nth-child(13) { z-index: 1; }

.flow-step-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ステップタイトル */
.flow-step-title {
  color: #000;
  font-family: Inter, sans-serif;
  font-size: clamp(1.125rem, 0.998rem + 0.52vw, 1.624rem);
  font-weight: 600;
  line-height: normal;
  letter-spacing: 1.039px;
  margin-bottom: clamp(0.5rem, 0.437rem + 0.26vw, 0.75rem);
}

/* ステップ説明文 */
.flow-step-desc {
  color: #000;
  font-family: Inter, sans-serif;
  font-size: clamp(0.875rem, 0.843rem + 0.13vw, 1rem);
  font-weight: 400;
  line-height: clamp(1.5rem, 1.468rem + 0.13vw, 1.625rem);
  letter-spacing: 0.64px;
}

/* 旧矢印要素（非表示） */
.flow-arrow {
  display: none;
}

/* OEMフロー */
.flow-steps--scroll {
  max-width: none;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  scroll-snap-type: none;
  padding-left: calc(50vw - 144px);
  padding-right: calc(50vw - 144px);
  padding-top: 30px;
  padding-bottom: 30px;
  margin-top: -30px;
  margin-bottom: -30px;
}
.flow-steps--scroll::-webkit-scrollbar {
  display: none;
}

.flow-steps--scroll .flow-step {
  flex: 0 0 288px;
  min-width: 288px;
  height: 400px;
  border-radius: 18px;
}

.flow-steps--scroll .flow-step-image {
  width: 253px;
  height: 177px;
  aspect-ratio: auto;
  margin: 0 auto clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);
}

.flow-steps--scroll .flow-step-title {
  color: #000;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 25.987px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 1.039px;
}

.flow-steps--scroll .flow-step-desc {
  color: #000;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.64px;
  max-width: 242.55px;
  margin-inline: auto;
}

/* OEMフロー: 三角形SVGを更新 */
.flow-steps--scroll .flow-step:not(:last-child)::after {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60' fill='none'%3E%3Cpath d='M42.168 30.0008L24.4199 41.7571L24.4199 18.2445L42.168 30.0008Z' fill='%23F22D4F'/%3E%3C/svg%3E") no-repeat center / 100%;
}

/* CTAボタンエリア */
.flow-button {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 1.364rem + 2.61vw, 4.5rem);
}

/* 点線セパレーター（最大1200px・中央配置） */
.flow-separator {
  max-width: 1200px;
  margin: clamp(1rem, 0.809rem + 0.78vw, 1.75rem) auto 0;
  border-top: 1px dashed #000;
}

/* ============================================
   アパレルOEMの実績紹介
   ============================================ */

/* 実績セクション下余白 */
.section-works {
  padding-bottom: 100px;
}

/* カテゴリフィルターボタン */
.works-filter {
  display: flex;
  justify-content: center;
  gap: clamp(0.625rem, 0.498rem + 0.52vw, 1.125rem);
  margin-top: 88px;
  margin-bottom: 85px;
}

.works-filter-btn {
  width: 240px;
  height: 53px;
  border-radius: 28.35px;
  border: 2px solid #F22D4F;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #F22D4F;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 1.08px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.works-filter-btn:hover {
  background: #FEF0F2;
}

.works-filter-btn.is-active {
  background: #F22D4F;
  color: #fff;
  border-color: #F22D4F;
}

.works-filter-btn.is-active:hover {
  background: #d9264a;
}

/* フィルターボタン モバイル */
@media (max-width: 1024px) {
  .works-filter {
    gap: clamp(0.375rem, 0.107rem + 1.10vw, 0.813rem);
    margin-top: clamp(1.875rem, -0.355rem + 9.15vw, 5.5rem);
    margin-bottom: clamp(4.125rem, 3.394rem + 3.00vw, 5.313rem);
  }
  .works-filter-btn {
    width: clamp(6.875rem, 1.878rem + 20.5vw, 15rem);
    height: clamp(2.25rem, 1.597rem + 2.68vw, 3.313rem);
    border-radius: 50px;
    border-width: 1px;
    font-size: clamp(0.75rem, 0.518rem + 0.95vw, 1.125rem);
    line-height: clamp(0.8rem, 0.061rem + 3.03vw, 2rem);
    letter-spacing: 0.72px;
    padding-top: 2px;
  }
}

/* フィルター時の非表示 */
.works-card.is-hidden {
  display: none;
}

/* 4列×2行のグリッド（最大1224px = 288px×4 + 24px×3） */
.works-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem 0.875rem;
  max-width: 1224px;
  margin: clamp(2rem, 1.682rem + 1.31vw, 3.25rem) auto 0;
  padding: 0 clamp(1rem, 0.682rem + 1.31vw, 2.25rem);
}

/* 実績カード */
.works-card {
  display: block;
  position: relative;
  aspect-ratio: 288 / 315;
  border-radius: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

/* 画像がないカード（空要素）は自動で非表示 */
.works-card:empty {
  display: none;
}

/* プレースホルダー（画像差し替え前の仮表示） */
.works-card-placeholder {
  width: 100%;
  height: 100%;
  background: #f0f0f0;
}

/* 実績カード: ベース画像（直接の子のimgのみ対象） */
.works-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* ============================================
   実績カード: ホバーオーバーレイ
   ============================================ */

/* オーバーレイコンテナ（通常時は非表示） */
.works-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 0.436rem + 0.26vw, 0.75rem);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* ホバー時にオーバーレイ表示 */
.works-card:hover .works-card-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* 暗い背景レイヤー（半透明ブラック） */
.works-card-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

/* 仕様書画像 */
.works-card-spec {
  position: relative;
  z-index: 1;
  width: 88.87%;
  aspect-ratio: 151 / 105;
  object-fit: contain;
}

/* オーバーレイ: タイトル */
.works-card-overlay-title {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: clamp(0.75rem, 0.686rem + 0.26vw, 1rem);
  font-weight: 700;
  text-align: center;
  margin: 0;
}

/* オーバーレイ: 詳しく見るリンク */
.works-card-overlay-link {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: clamp(0.688rem, 0.640rem + 0.20vw, 0.875rem);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.works-card-overlay-link-text {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.works-card-overlay-link:hover {
  opacity: 0.8;
}

/* ============================================
   お客様の声
   ============================================ */

/* --- 共通: 星評価 --- */
.voice-stars {
  color: #E8A400;
  font-size: clamp(1rem, 0.936rem + 0.26vw, 1.25rem);
  letter-spacing: 2px;
}

/* --- 上段: メインの声 --- */
.voice-main {
  display: flex;
  gap: clamp(1.5rem, 1.118rem + 1.57vw, 3rem);
  max-width: 1200px;
  margin: 134px auto 0;
  padding: 0 clamp(1rem, 0.682rem + 1.31vw, 2.25rem);
}

/* 左側: 写真エリア */
.voice-main-image {
  flex: 0 0 auto;
  width: clamp(15rem, 10.98rem + 16.47vw, 30.813rem);
}

.voice-main-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: #d9d3d5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='white'%3E%3Ccircle cx='32' cy='22' r='10'/%3E%3Cpath d='M14 54c0-12 8-20 18-20s18 8 18 20H14z'/%3E%3C/svg%3E") no-repeat center 55%;
  background-size: 30%;
  border-radius: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);
}

.voice-main-image img {
  width: 100%;
  aspect-ratio: 493 / 450;
  object-fit: cover;
  border-radius: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);
  display: block;
}

/* 右側: テキストエリア */
.voice-main-content {
  flex: 1;
}

/* 名前 + 肩書き */
.voice-main-header {
  display: flex;
  align-items: baseline;
  gap: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);
  flex-wrap: wrap;
}

.voice-main-name {
  font-family: Inter, sans-serif;
  font-size: clamp(1rem, 0.936rem + 0.26vw, 1.25rem);
  font-weight: 500;
  color: #000;
  letter-spacing: 0.8px;
}

.voice-main-role {
  font-family: Inter, sans-serif;
  font-size: clamp(0.875rem, 0.843rem + 0.13vw, 1rem);
  font-weight: 400;
  color: #000;
  line-height: clamp(1.375rem, 1.311rem + 0.26vw, 1.625rem);
  letter-spacing: 0.64px;
}

/* 星 + 利用期間 */
.voice-main-rating {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(0.5rem, 0.437rem + 0.26vw, 0.75rem);
}

.voice-main-since {
  font-family: Inter, sans-serif;
  font-size: clamp(0.875rem, 0.843rem + 0.13vw, 1rem);
  font-weight: 400;
  color: #595959;
  line-height: clamp(1.375rem, 1.311rem + 0.26vw, 1.625rem);
  letter-spacing: 0.64px;
}

/* タグリスト（2×2グリッド、白背景ボックス） */
.voice-main-tags {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.5rem, 0.437rem + 0.26vw, 0.75rem) clamp(1rem, 0.682rem + 1.31vw, 2.25rem);
  background: #fff;
  border-radius: clamp(0.5rem, 0.468rem + 0.13vw, 0.625rem);
  padding: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem) clamp(1rem, 0.809rem + 0.78vw, 1.75rem);
  margin-top: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);
  list-style: none;
}

.voice-main-tags li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: Inter, sans-serif;
  font-size: clamp(0.75rem, 0.718rem + 0.13vw, 0.875rem);
  font-weight: 400;
  color: #000;
  line-height: clamp(1.125rem, 1.091rem + 0.14vw, 1.26rem);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* チェックマークアイコン（SVG） */
.voice-main-tags li::before {
  content: '';
  display: inline-block;
  width: clamp(1.125rem, 1.077rem + 0.20vw, 1.313rem);
  height: clamp(1.125rem, 1.077rem + 0.20vw, 1.313rem);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M19.0667 9.60281V10.4001C19.0657 12.269 18.4605 14.0875 17.3415 15.5844C16.2225 17.0813 14.6496 18.1763 12.8574 18.7062C11.0652 19.2361 9.14969 19.1725 7.39661 18.5248C5.64352 17.8771 4.14677 16.6801 3.12956 15.1123C2.11236 13.5444 1.62922 11.6898 1.75218 9.82495C1.87515 7.9601 2.59764 6.18496 3.81191 4.76427C5.02617 3.34359 6.66715 2.35347 8.4901 1.9416C10.313 1.52973 12.2203 1.71817 13.9274 2.47881M19.0667 3.46681L10.4001 12.1421L7.80007 9.54214' stroke='%23595959' stroke-width='1.89' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='20.8' height='20.8' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat center / contain;
  flex-shrink: 0;
}

/* 本文エリア（折りたたみ） */
.voice-main-body {
  position: relative;
  max-height: 11rem;
  overflow: hidden;
  margin-top: clamp(1rem, 0.809rem + 0.78vw, 1.75rem);
}

/* 展開時: 全文表示 */
.voice-main-body.is-open {
  max-height: none;
  overflow: visible;
}

/* 本文テキスト */
.voice-main-text {
  font-family: Inter, sans-serif;
  font-size: clamp(0.875rem, 0.843rem + 0.13vw, 1rem);
  font-weight: 400;
  color: #000;
  line-height: clamp(1.375rem, 1.311rem + 0.26vw, 1.625rem);
  letter-spacing: 0.64px;
}

.voice-main-text + .voice-main-text {
  margin-top: 0.75rem;
}

/* 「続きを読む / 閉じる」ボタン */
.voice-main-more {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0;
  border: none;
  background: none;
  font-family: Inter, sans-serif;
  font-size: clamp(0.875rem, 0.843rem + 0.13vw, 1rem);
  font-weight: 500;
  color: #000;
  letter-spacing: 0.64px;
  cursor: pointer;
}

.voice-main-more:hover {
  opacity: 0.7;
}

/* --- 下段: サブの声 3枚カード --- */
.voice-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.809rem + 0.78vw, 1.75rem);
  max-width: 1200px;
  margin: 100px auto 0;
  padding: 0 clamp(1rem, 0.682rem + 1.31vw, 2.25rem);
}

.voice-card-avatar {
  width: 376px;
  height: 205px;
  background: #E9E2E3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='87' height='86' viewBox='0 0 87 86' fill='none'%3E%3Cpath d='M86.612 85.7692V74.9427C86.612 69.2 84.3307 63.6925 80.27 59.6317C76.2093 55.571 70.7017 53.2897 64.959 53.2897H21.653C15.9103 53.2897 10.4027 55.571 6.34202 59.6317C2.28129 63.6925 0 69.2 0 74.9427V85.7692' fill='white'/%3E%3Cpath d='M43.306 43.306C55.2646 43.306 64.959 33.6116 64.959 21.653C64.959 9.69438 55.2646 0 43.306 0C31.3474 0 21.653 9.69438 21.653 21.653C21.653 33.6116 31.3474 43.306 43.306 43.306Z' fill='white'/%3E%3C/svg%3E") no-repeat center center;
  border-radius: 18px;
}

.voice-card-header {
  display: flex;
  align-items: baseline;
  gap: clamp(0.375rem, 0.344rem + 0.13vw, 0.5rem);
  flex-wrap: wrap;
  margin-top: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);
}

.voice-card-name {
  font-family: Inter, sans-serif;
  font-size: clamp(1rem, 0.936rem + 0.26vw, 1.25rem);
  font-weight: 500;
  color: #000;
  letter-spacing: 0.8px;
}

.voice-card-role {
  font-family: Inter, sans-serif;
  font-size: clamp(0.875rem, 0.843rem + 0.13vw, 1rem);
  font-weight: 400;
  color: #000;
  line-height: clamp(1.375rem, 1.311rem + 0.26vw, 1.625rem);
  letter-spacing: 0.64px;
}

.voice-card .voice-stars {
  margin-top: 0.375rem;
  font-size: clamp(0.875rem, 0.843rem + 0.13vw, 1rem);
}

.voice-card-text {
  font-family: Inter, sans-serif;
  font-size: clamp(0.875rem, 0.843rem + 0.13vw, 1rem);
  font-weight: 400;
  color: #000;
  line-height: clamp(1.375rem, 1.311rem + 0.26vw, 1.625rem);
  letter-spacing: 0.64px;
  margin-top: clamp(0.5rem, 0.437rem + 0.26vw, 0.75rem);
}

/* ============================================
   よくあるご質問（FAQ カード形式）
   ============================================ */

.section-faq {
  padding-top: 120px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 1200px;
  margin: clamp(2rem, 1.682rem + 1.31vw, 3.25rem) auto 0;
  padding: 0 clamp(1rem, 0.682rem + 1.31vw, 2.25rem);
}

/* カード（1200×180px） */
.faq-card {
  background: #fff;
  border-radius: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);
  padding: clamp(0.875rem, 0.811rem + 0.26vw, 1.125rem) clamp(1.5rem, 1.182rem + 1.31vw, 2.75rem);
}

/* Q. / A. 共通ラベル（28px, weight 500） */
.faq-label {
  font-family: Inter, sans-serif;
  font-size: clamp(1.375rem, 0.379rem + 1.45vw, 1.75rem);
  font-weight: 500;
  color: #000;
  letter-spacing: 1.2px;
  line-height: 1;
  flex-shrink: 0;
}

/* A. ラベル: 不透明度50% */
.faq-label--a {
  opacity: 0.5;
  position: relative;
  top: 0.219rem;
}

/* 質問行 */
.faq-question {
  display: flex;
  align-items: baseline;
  gap: clamp(0.5rem, 0.437rem + 0.26vw, 0.75rem);
}

/* 質問テキスト（18px, weight 500） */
.faq-q-text {
  font-family: Inter, sans-serif;
  font-size: clamp(0.875rem, 0.811rem + 0.26vw, 1.125rem);
  font-weight: 500;
  color: #000;
  line-height: clamp(1.375rem, 1.279rem + 0.39vw, 1.75rem);
  letter-spacing: 0.72px;
}

/* 回答行 */
.faq-answer {
  display: flex;
  align-items: baseline;
  gap: clamp(0.5rem, 0.437rem + 0.26vw, 0.75rem);
  margin-top: 0.25rem;
}

/* 回答テキスト（16px, weight 400） */
.faq-a-text {
  font-family: Inter, sans-serif;
  font-size: clamp(0.813rem, 0.765rem + 0.2vw, 1rem);
  font-weight: 400;
  color: #000;
  line-height: clamp(1.5rem, 1.404rem + 0.39vw, 1.875rem);
  letter-spacing: 1.28px;
}

/* ============================================
   2つの主要サービス カード
   ============================================ */

/* カード2枚を横並び（PC: 582px×2 + gap） */
.service-cards {
  display: flex;
  gap: 36px;
  max-width: 1208px;
  margin: clamp(2rem, 1.682rem + 1.31vw, 3.25rem) auto 0;
}

/* カード本体（画像とテキストを重ねる） */
.service-card {
  position: relative;
  flex: 1;
  max-width: 582px;
  aspect-ratio: 582 / 610;
  border-radius: clamp(1rem, 0.809rem + 0.78vw, 1.75rem);
  overflow: hidden;
}

/* カード画像エリア（カード全体を覆う） */
.service-card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 下半分に白グラデーション */
.service-card-image::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 65%;
  background: linear-gradient(to bottom, transparent, #fff);
  pointer-events: none;
}

.service-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* カードテキストエリア（画像の下半分に重ねる） */
.service-card-body {
  position: absolute;
  top: 45%;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2.5rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* カードタイトル */
.service-card-title {
  color: #000;
  font-family: Inter, sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 1.12px;
  margin-bottom: 1.25rem;
}

/* カード説明文 */
.service-card-desc {
  color: #000;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.625rem;
  letter-spacing: 0.64px;
  margin-bottom: 2.5rem;
}

/* タグリスト（チェックマーク付き） */
.service-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  list-style: none;
}

.service-card-tags li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #F22D4F;
  font-family: Inter, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.575rem;
  letter-spacing: 1.08px;
}

/* チェックマークアイコン（CSS疑似要素） */
.service-card-tags li::before {
  content: "";
  display: block;
  width: 1.625rem;
  height: 1.625rem;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26' fill='none'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M23.1001 11.634V12.6C23.0988 14.8642 22.3656 17.0674 21.0099 18.8809C19.6542 20.6944 17.7485 22.0211 15.5772 22.6631C13.4059 23.3051 11.0852 23.228 8.96129 22.4433C6.83736 21.6586 5.02398 20.2084 3.79161 18.3089C2.55923 16.4094 1.97388 14.1625 2.12286 11.9031C2.27184 9.6438 3.14717 7.49315 4.61829 5.77193C6.08942 4.05071 8.07752 2.85116 10.2861 2.35216C12.4947 1.85316 14.8054 2.08146 16.8736 3.003M23.1001 4.2L12.6001 14.7105L9.4501 11.5605' stroke='%23595959' stroke-width='2.3625' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='25.2' height='25.2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat center / contain;
}

/* ============================================
   固定ページ共通
   ============================================ */

/* ページ全体の余白 */
.page-main {
  padding: 80px 20px;
}

/* 中身を中央寄せ・最大幅制限 */
.page-inner {
  max-width: 900px;
  margin: 0 auto;
}

/* ページタイトル */
.page-title {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 16px;
  border-bottom: 3px solid #e8546a;
}

/* ページ本文 */
.page-content {
  font-size: 1rem;
  line-height: 2;
}

/* ============================================
   お問い合わせセクション（フッター上部・ピンクカード）
   contactページ以外で表示
   ============================================ */

.section-contact {
  padding: 120px 20px 650px;     /* 上余白120px + 下余白でグレー滑り込みの距離を確保 */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background: transparent;
}

/* 上側の流れる文字アニメーション（カード外側） */
.contact-marquee-top {
  width: 100vw;
  margin-left: -20px;
  margin-right: -20px;
  height: 103px;              /* SVGの高さ */
  overflow: hidden;
  margin-bottom: 0;           /* カードにぴったり沿う */
}

.contact-marquee-top .contact-marquee-inner {
  animation: marquee 20s linear infinite;
}

.contact-card {
  position: relative;
  width: 1416px;              /* 1920px〜1512pxは固定、余白だけ縮む */
  max-width: 100%;
  height: 625px;
  padding: 121px 40px 0;
  border-radius: 54px;
  background: #F22D4F;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 上から配置 */
  align-items: center;        /* 子要素を横方向中央揃え（横幅維持） */
  overflow: hidden;           /* はみ出した文字を非表示 */
}

.contact-label {
  font-family: "Century Gothic", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1.6px;
  -webkit-text-stroke-width: 0.25px;
  -webkit-text-stroke-color: #FFF;
  opacity: 0.75;
  margin-bottom: 20px;
}

.contact-title {
  font-family: Inter, sans-serif;
  font-size: 38px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 1.52px;
  width: 717.412px;
  max-width: 100%;
  margin-bottom: 28px;
}

.contact-desc {
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.72px;
  margin-bottom: 44px;
}

.contact-btn {
  position: relative;         /* 矢印の位置基準 */
  display: flex;
  align-items: center;
  justify-content: center;    /* テキストを中央に */
  flex-shrink: 0;             /* 縮小させない */
  width: 488px;
  height: 53px;
  border-radius: 28.3px;
  background: #FFF;
  color: #F22D4F;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 1.08px;
  text-align: center;         /* 折り返し時に中央揃え */
  white-space: normal;        /* 自動で折り返し */
  transition: opacity 0.3s;
}

.contact-btn:hover {
  opacity: 0.9;
}

.contact-btn-text {
  display: flex;
  width: 308.542px;
  height: 24.522px;
  flex-direction: column;
  justify-content: center;
  color: #F22D4F;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: 1.08px;
}

.contact-btn-arrow {
  position: absolute;         /* 右端に固定 */
  right: 24px;                /* 右から24px */
  font-size: 20px;
}

/* 流れる文字アニメーション（マーキー） */
.contact-marquee {
  position: absolute;
  bottom: 0;                  /* 一番下に配置 */
  left: 0;
  width: 100%;
  height: 102px;              /* SVGの高さ */
  overflow: hidden;
  pointer-events: none;       /* クリックを透過 */
}

.contact-marquee-inner {
  display: flex;
  gap: 40px;                  /* SVG間の余白 */
  animation: marquee 20s linear infinite;
}

.contact-marquee-inner img {
  width: 609px;               /* SVGの幅 */
  height: 102px;              /* SVGの高さ */
  flex-shrink: 0;             /* 縮まないようにする */
}

/* 右から左へ流れるアニメーション */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 20px));  /* 半分 + gap半分 移動してループ */
  }
}

/* ============================================
   代表者紹介セクション
   ============================================ */

.section-ceo {
  position: relative;
  z-index: 1;
  padding: clamp(80px, 3.725rem + 5.23vw, 160px) 20px 0 clamp(8.438rem, -43.679rem + 55.15vw, 22.5rem);
  overflow-x: hidden;
}

.ceo-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  gap: 20px 60px;
  align-items: start;
}

.ceo-image {
  grid-column: 1;
  grid-row: 1 / 3;
  width: clamp(350px, 20.951rem + 3.79vw, 408px);
}

.ceo-header {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  color: #fff;
  margin-top: 10px;
}

.ceo-body {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  color: #fff;
}

.ceo-image img {
  width: 100%;
  height: clamp(328px, 18.558rem + 7.97vw, 450px);
  border-radius: clamp(10.8px, 0.561rem + 0.47vw, 18px);
  background: #D0D5D8;
  object-fit: cover;          /* 画像を枠に合わせてトリミング */
  object-position: center calc(50% + clamp(33px, 1.873rem + 0.78vw, 45px)); /* 人物が中心に来るように上にずらす */
  display: block;
}

.ceo-logo {
  margin-bottom: 8px;
}

.ceo-logo img {
  width: clamp(77px, 3.984rem + 3.4vw, 129px);
  height: auto;
}

.ceo-title {
  color: #FFF;
  font-family: Inter, sans-serif;
  font-size: clamp(1.425rem, 1.247rem + 0.73vw, 2.125rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: clamp(0.912px, 0.047rem + 0.04vw, 1.52px);
  margin-bottom: 8px;
}

.ceo-name {
  margin-bottom: clamp(1.25rem, 1.123rem + 0.52vw, 1.75rem);
}

.ceo-name-main {
  color: #FFF;
  font-family: Inter, sans-serif;
  font-size: clamp(1.25rem, 1.123rem + 0.52vw, 1.75rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: clamp(0.8px, 0.045rem + 0.021vw, 1.12px);
}

.ceo-name-reading {
  color: #FFF;
  font-family: Inter, sans-serif;
  font-size: clamp(0.875rem, 0.812rem + 0.26vw, 1.125rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: clamp(0.56px, 0.032rem + 0.011vw, 0.72px);
  margin-left: 15px;
}

.ceo-motto {
  color: #FFF;
  font-family: Inter, sans-serif;
  font-size: clamp(1rem, 0.937rem + 0.26vw, 1.25rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: clamp(0.64px, 0.037rem + 0.011vw, 0.8px);
  margin-bottom: clamp(0.75rem, 0.687rem + 0.26vw, 1rem);
}

.ceo-desc {
  color: #FFF;
  font-family: Inter, sans-serif;
  font-size: clamp(0.875rem, 0.843rem + 0.13vw, 1rem);
  font-style: normal;
  font-weight: 400;
  line-height: clamp(1.5rem, 1.373rem + 0.52vw, 2rem);
  letter-spacing: clamp(0.56px, 0.034rem + 0.005vw, 0.64px);
  margin-bottom: 37px;
}

.ceo-sns {
  display: flex;
  gap: 20px;
}

.sns-btn {
  display: block;
  flex-shrink: 1;
  min-width: 0;
  transition: opacity 0.3s;
}

.sns-btn:hover {
  opacity: 0.8;
}

.sns-btn img {
  height: auto;
}

/* WeChat PNG: 元のSVGと同じ表示サイズに制限 */
.sns-wechat img {
  width: 260px;
}

/* ============================================
   フッター本体
   ============================================ */

.site-footer {
  background: #595959;
  color: #fff;
  padding: 0 20px;
  margin-top: -415px;             /* セクションの下余白に415px入り込む */
  padding-top: 415px;             /* コンテンツは元の位置を維持 */
  min-height: clamp(1398px, 118.826rem - 26.21vw, 1799px);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* フッター背景装飾 */
.site-footer::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(85.156rem, 64.396rem + 85.17vw, 166.602rem);
  height: clamp(19.168rem, 14.495rem + 19.17vw, 37.5rem);
  background: url('assets/images/footer-bg.svg') no-repeat center / contain;
  pointer-events: none;
  z-index: 0;
}

.site-footer .copyright {
  margin-top: auto;
  position: relative;
  z-index: 1;
}

/* contactページ: お問い合わせセクションがないためフッターの重なり余白を解除 */
.site-footer--no-overlap {
  margin-top: 0 !important;
  padding-top: 0 !important;
  min-height: clamp(983px, 92.889rem - 26.21vw, 1384px);
}

.footer-inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  padding: 140px clamp(8.438rem, -43.679rem + 55.15vw, 22.5rem) clamp(31.5px, 1.611rem + 1.47vw, 54px);
}

.footer-left {
  flex: 1;
}

.footer-logo {
  margin-bottom: clamp(48.5px, 2.529rem + 2.06vw, 80px);
}

.footer-logo img {
  width: clamp(8.625rem, 7.16rem + 6.01vw, 14.375rem);
  height: clamp(4.598rem, 3.816rem + 3.21vw, 7.662rem);
  aspect-ratio: 212 / 113;
}

.footer-company-name {
  margin-bottom: clamp(14px, 0.716rem + 0.65vw, 24px);
}

.footer-company-name img {
  height: 22px;
  width: auto;
}

.footer-company-desc {
  color: #FFF;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.64px;
  margin-bottom: clamp(20px, 1.106rem + 0.59vw, 29px);
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-contact-info p {
  color: #FFF;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 19.5px;
  letter-spacing: 0.48px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-icon {
  display: flex;
  align-items: center;
}

.footer-icon svg {
  flex-shrink: 0;
}

/* WeChatモーダル */
.wechat-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.wechat-modal.is-open {
  display: flex;
}
.wechat-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.wechat-modal-content {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 20px 32px 32px;
  max-width: 360px;
  width: 90%;
  text-align: center;
}
.wechat-modal-close {
  position: absolute;
  top: 10px;
  right: 16px;
  background: none;
  border: none;
  font-size: 28px;
  color: #999;
  cursor: pointer;
  line-height: 1;
}
.wechat-modal-close:hover {
  color: #333;
}
.wechat-modal-qr {
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: 8px;
  margin-top: -12px;
}
.wechat-modal-text {
  margin-top: -8px;
  font-size: 13px;
  line-height: 1.5;
  color: #333;
}

.footer-right {
  flex-shrink: 0;
}

.footer-nav ul {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 28px;
}

.footer-nav a {
  color: #FFF;
  text-align: right;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.72px;
  transition: opacity 0.3s;
}

.footer-nav a:hover {
  opacity: 0.7;
}

.copyright {
  text-align: center;
  padding: 24px 0;
  color: #FFF;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.48px;
}

/* ============================================
   ハンバーガーメニュー（スマホ用の三本線ボタン）
   ============================================ */

/* PCでは非表示にする */
.hamburger-menu {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

/* ハンバーガーアイコン画像 */
.hamburger-icon {
  width: 56.679px;
  height: 16px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* バツアイコン（通常は非表示・回転用の初期状態） */
.close-icon {
  display: none;
  width: 57px;
  height: 16px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ============================================
   ドロワーメニュー（スマホ用・下に伸びるメニュー）
   ============================================ */


/* ドロワーメニュー（PCでは非表示） */
.drawer-menu {
  display: none;
}

/* ドロワー内のナビゲーション */
.drawer-nav li {
  /* アンダーバーなし */
}

.drawer-nav a {
  display: block;
  padding: 16px 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #333;
}

.drawer-nav a:hover {
  color: #e8546a;
}

/* 下部の装飾画像（PCでは非表示） */
.drawer-bottom-image {
  display: none;
}

@media (max-width: 1024px) {
  .drawer-bottom-image {
    display: block;
  }
}

.drawer-bottom-image img {
  width: 100%;
  height: auto;
}

/* オーバーレイ（ドロワーメニューの後ろの暗い背景） */
.menu-overlay {
  display: none;             /* 通常は非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
  z-index: 1500;             /* ヘッダーとドロワーの間 */
}

/* オーバーレイが表示された状態 */
.menu-overlay.is-active {
  display: block;
}

/* ============================================
   レスポンシブ対応（画面幅1512px以下 = ノートPC・タブレット）
   余白を滑らかに変化させる
   ============================================ */

@media (max-width: 1512px) {

  /* CTAボタン: 右下配置（レスポンシブ） */
  .mv-cta {
    right: clamp(1.5rem, -1rem + 3.64vw, 3rem);
    bottom: clamp(3rem, 1rem + 5.45vw, 6rem);
  }

  .mv-cta img {
    width: clamp(14rem, 8rem + 17.27vw, 23.5rem);
  }

  /* === MV写真 1512px調整 === */
  .mv-photo-1 {
    width: clamp(15rem, 10rem + 15vw, 26rem);
    height: auto;
    aspect-ratio: 28.625 / 22.063;
  }
  .mv-photo-1.is-placed {
    top: 27%;
  }
  .mv-photo-2 {
    height: auto;
    aspect-ratio: 19.375 / 12.75;
  }
  .mv-photo-2.is-placed {
    left: 40%;
    top: 17%;
  }
  .mv-photo-3.is-placed {
    left: 91%;
  }
  .mv-photo-4 {
    width: clamp(22rem, 16rem + 32vw, 33.813rem);
  }
  .mv-photo-5 {
    width: clamp(13rem, 18vw, 24rem);
  }
  .mv-photo-5.is-placed {
    left: 52%;
  }
  .mv-photo-6 {
    width: clamp(23rem, 17rem + 33vw, 35rem);
  }
  .mv-photo-6.is-placed {
    top: 75%;
    left: 91%;
  }

  /* ヘッダーの左右余白を滑らかに変化
     1100px: 80px（合計）, 1512px: 158px（合計） */
  .header-wrapper {
    width: calc(100% - clamp(5rem, -8.016rem + 18.932vw, 9.875rem));
  }

  /* ロゴ〜ナビ間の余白を滑らかに変化
     1100px: 8px, 1512px: 105px */
  .header-logo {
    margin-right: clamp(0.5rem, -15.686rem + 23.544vw, 6.563rem);
  }

  /* ロゴサイズを滑らかに変化
     1100px: 240px, 1512px: 262.699px */
  .header-logo-img {
    width: clamp(15rem, 11.213rem + 5.509vw, 16.419rem);
    height: auto;
  }

  /* ナビ項目間の余白を滑らかに変化
     1100px: 12px, 1512px: 32px */
  .header-nav ul {
    gap: clamp(0.75rem, -2.587rem + 4.854vw, 2rem);
  }

  /* 最後の項目の右余白を縮める */
  .header-nav li:last-child {
    margin-right: 0;
  }

  /* 左右の内側余白を滑らかに変化
     1100px: 16px, 1512px: 40px */
  .header-inner {
    padding: 0 clamp(1rem, -3.005rem + 5.825vw, 2.5rem);
  }

  /* サービスカード テキスト（1512px以下でclamp開始）
     計算範囲: 1024px〜1512px — 1512px以上ではPC値固定 */
  .service-card {
    aspect-ratio: auto;
  }

  .service-card-body {
    position: relative;
    top: auto;
    bottom: auto;
    padding: clamp(1.25rem, -2.076rem + 4.843vw, 2.5rem);
    padding-top: 47%;
    padding-bottom: 2.5rem;
  }

  .service-card-title {
    font-size: clamp(1.25rem, -0.081rem + 1.937vw, 1.75rem);
    margin-bottom: clamp(0.75rem, -0.581rem + 1.937vw, 1.25rem);
  }

  .service-card-desc {
    font-size: clamp(0.875rem, 0.543rem + 0.484vw, 1rem);
    line-height: clamp(1.5rem, 1.168rem + 0.484vw, 1.625rem);
    margin-bottom: clamp(1.25rem, -0.746rem + 2.906vw, 2rem);
  }

  .service-card-tags li {
    font-size: clamp(0.875rem, 0.209rem + 0.969vw, 1.125rem);
    line-height: clamp(1.25rem, 0.385rem + 1.259vw, 1.575rem);
  }

  .service-card-tags li::before {
    width: clamp(1.375rem, 0.709rem + 0.969vw, 1.625rem);
    height: clamp(1.375rem, 0.709rem + 0.969vw, 1.625rem);
  }

  /* カードが582pxで固定されている範囲はPC値を維持 */
  @media (min-width: 1250px) {
    .service-card {
      aspect-ratio: 582 / 610;
    }
    .service-card-body {
      position: absolute;
      top: 45%;
      bottom: 0;
      padding: 2.5rem;
    }
    .service-card-title {
      font-size: 1.75rem;
      margin-bottom: 1.25rem;
    }
    .service-card-desc {
      font-size: 1rem;
      line-height: 1.625rem;
      margin-bottom: 2rem;
    }
    .service-card-tags li {
      font-size: 1.125rem;
      line-height: 1.575rem;
    }
    .service-card-tags li::before {
      width: 1.625rem;
      height: 1.625rem;
    }
  }

  /* お問い合わせカード（1512px以下でclamp開始）
     1512px: 1920pxと同じ値、390px: モバイル値 */
  .contact-card {
    width: clamp(21.875rem, -1.284rem + 95.01vw, 88.5rem);
    height: clamp(26.5rem, 22.134rem + 17.91vw, 39.063rem);
    padding: clamp(3.75rem, 2.424rem + 5.44vw, 7.563rem) 40px 0;
    border-radius: clamp(1.5rem, 0.849rem + 2.67vw, 3.375rem);
  }

  .contact-label {
    font-size: clamp(0.75rem, 0.577rem + 0.71vw, 1.25rem);
    margin-bottom: clamp(0.75rem, 0.577rem + 0.71vw, 1.25rem);
  }

  .contact-title {
    font-size: clamp(1.5rem, 1.195rem + 1.25vw, 2.375rem);
    margin-bottom: clamp(1rem, 0.739rem + 1.07vw, 1.75rem);
  }

  .contact-desc {
    font-size: clamp(0.875rem, 0.787rem + 0.36vw, 1.125rem);
    line-height: clamp(1.5rem, 1.327rem + 0.71vw, 2rem);
    margin-bottom: clamp(1.875rem, 1.570rem + 1.25vw, 2.75rem);
  }

  .contact-btn {
    width: 488px;
    height: 53px;
    border-radius: 28.3px;
    background: #FFF;
    font-size: clamp(1rem, 0.956rem + 0.18vw, 1.125rem);
  }

  /* 代表者紹介・フッター本体の左右余白
     1512px: 135px（+site-footer 20px = 155px）、1100px: 20px */
  .section-ceo {
    padding-left: clamp(1.25rem, -17.938rem + 27.91vw, 8.438rem);
  }

  .footer-inner {
    padding-left: clamp(1.25rem, -17.938rem + 27.91vw, 8.438rem);
    padding-right: clamp(1.25rem, -17.938rem + 27.91vw, 8.438rem);
  }

  /* 特徴カード: 高さをコンテンツに合わせる */
  .feature-card {
    height: auto;
  }

  /* 特徴セクション→買付フロー間の余白 */
  .section-feature {
    padding-bottom: 100px;
  }

  .section-flow {
    padding-top: 50px;
  }

  .flow-sticky {
    padding-top: 45px;
  }

  .oem-sticky {
    padding-top: 20px;
    gap: 0.5rem;
  }

  /* OEM見出し内の余白縮小 */
  .oem-sticky .sec-heading-icon {
    margin-bottom: 0.25rem;
  }
  .oem-sticky .sec-heading-label {
    margin-bottom: 0.25rem;
  }
  .oem-sticky .sec-heading-title {
    margin-bottom: 0.5rem;
  }

  /* 点線セパレーター: ボタンとの余白拡大 */
  .flow-separator {
    margin-top: 150px;
    margin-bottom: 100px;
  }

  /* OEMセクション→実績セクション間の余白 */
  .section-oem {
    padding-bottom: 30px;
  }

  .section-works {
    padding-top: 200px;
    padding-bottom: 150px;
  }

  /* 実績→お客様の声 間の余白縮小 */
  .section-voice {
    padding-top: 50px;
  }

  /* FAQセクション: 上余白縮小 */
  .section-faq {
    padding-top: 100px;
  }

  /* お問い合わせセクション: 上余白縮小（FAQ下80px + 150px = 230px） */
  .section-contact {
    padding-top: 150px;
  }

  /* お客様の声: タイトル→コンテンツ間の余白縮小 */
  .voice-main {
    margin-top: 80px;
  }

  /* お客様の声 下段カード: アバターを可変幅に（376px固定→100%）*/
  .voice-card-avatar {
    width: 100%;
    height: auto;
    aspect-ratio: 376 / 205;
  }

}

/* ============================================
   レスポンシブ対応（画面幅768px以下 = スマホ・小さいタブレット）
   ============================================ */

@media (max-width: 1024px) {

  /* トップページ: SP時のみbody余白を除去してMV写真が上端まで表示 */
  body.home,
  body.page-template-front-page {
    padding-top: 0;
    overflow-x: hidden;
  }
  body.home .page-wrapper,
  body.page-template-front-page .page-wrapper {
    overflow: visible;
  }

  /* MVセクション: SP用の高さ調整 + overflow解除で写真を上端まで表示 */
  .section-mv {
    height: clamp(45rem, 40.05rem + 20.31vw, 54rem);
    overflow: visible;
  }
  .mv-sticky {
    overflow: visible;
  }

  /* MV写真: SP用配置 */
  .mv-photo {
    border-radius: 10px;
  }

  /* 写真1: 左上（握手） */
  .mv-photo-1 {
    width: 40%;
    max-width: 14rem;
    height: auto;
    aspect-ratio: 4 / 5;
  }
  .mv-photo-1.is-placed {
    top: 23%;
    left: 18%;
  }

  /* 写真2: 上中央（色見本） - 上にはみ出し */
  .mv-photo-2 {
    width: 38%;
    max-width: 13rem;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .mv-photo-2.is-placed {
    top: -3%;
    left: 35%;
  }

  /* 写真3: 右上（貿易港） */
  .mv-photo-3 {
    width: 75%;
    max-width: 25rem;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .mv-photo-3.is-placed {
    top: 16%;
    left: 88%;
  }

  /* 写真4: 左下（ニット服） */
  .mv-photo-4 {
    width: 50%;
    max-width: 17rem;
    height: auto;
    aspect-ratio: 3 / 4;
  }
  .mv-photo-4.is-placed {
    top: 91%;
    left: 15%;
  }

  /* 写真5: 下中央（ミシン） */
  .mv-photo-5 {
    width: 30%;
    max-width: 10rem;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .mv-photo-5.is-placed {
    top: 72%;
    left: 58%;
  }

  /* 写真6: 右下（箱詰め） */
  .mv-photo-6 {
    width: 55%;
    max-width: 19rem;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .mv-photo-6.is-placed {
    top: 90%;
    left: 82%;
  }

  /* ロゴマーク: SP用サイズ */
  .mv-content {
    top: 50%;
  }
  .mv-image-last {
    width: clamp(12rem, 9.541rem + 10.09vw, 16rem);
    top: 50%;
  }
  .mv-main-text {
    width: clamp(11rem, 8.541rem + 10.09vw, 15rem);
  }
  .mv-logo-mark {
    width: clamp(12.5rem, 10.041rem + 10.09vw, 16.5rem);
  }

  /* ヘッダー位置（滑らかにスケール）
     390px: top=32px, 1024px: top=25px */
  .header-wrapper {
    top: clamp(1.563rem, 2.241rem - 0.99vw, 2rem);
    /* 390px: 左右余白28px×2=56px, 1024px: 左右余白20px×2=40px */
    width: calc(100% - clamp(1.25rem, 2.025rem - 1.128vw, 1.75rem) * 2);
  }

  /* ヘッダー本体 */
  .site-header {
    position: relative;
    width: 100%;
    height: 60px;
    border-radius: 14px;
    background: #FFF;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
    overflow: hidden;
  }

  /* ヘッダー内側
     390px: padding=28px, 1024px: padding=20px */
  .header-inner {
    height: 60px;
    padding: 0 clamp(1.25rem, 2.025rem - 1.128vw, 1.75rem);
    position: relative;
  }

  /* ロゴサイズ（滑らかにスケール）
     390px: 161px, 1024px: 140px */
  .header-logo-img {
    width: clamp(8.75rem, 10.784rem - 2.962vw, 10.063rem);
    height: auto;
  }

  /* ロゴの右余白をなくす */
  .header-logo {
    margin-right: 0;
  }

  /* PCのナビゲーションを非表示にする */
  .header-nav {
    display: none;
  }

  /* PCのお問い合わせボタンを非表示にする */
  .nav-contact-btn {
    display: none;
  }

  /* ハンバーガーメニューを表示する */
  .hamburger-menu {
    display: flex;
  }

  /* ヘッダー固定の余白を調整
     390px〜1024px: 130px固定 */
  body {
    padding-top: 130px !important;
  }

  /* ドロワーメニュー（スマホ用） */
  .drawer-menu {
    display: none;                    /* 通常は非表示 */
    position: absolute;
    top: 73px;                        /* ロゴから73px下 */
    left: 0;
    width: 100%;
    background: transparent;
    padding: 0;
    flex-direction: column;
  }

  /* メニューが開いた時のヘッダー本体 */
  .site-header.is-open {
    position: relative;               /* 装飾画像の位置基準 */
    height: 619px;
    border-radius: 14px;
    background: #FFF;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
    transition: height 0.3s ease;
    overflow: hidden;                 /* はみ出した部分を非表示 */
  }

  /* メニューが開いた時のドロワー表示 */
  .site-header.is-open .drawer-menu {
    display: flex;
  }

  /* ハンバーガーボタン内のアイコンを重ねて配置 */
  .hamburger-menu {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(calc(-50% + 2px));
    z-index: 10;
    width: 57px;
    height: 16px;
    overflow: hidden;                 /* はみ出し部分を隠す */
  }

  /* 両方のアイコンを同じ位置に重ねる */
  .hamburger-icon,
  .close-icon {
    position: absolute;
    left: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  /* ハンバーガーアイコン：通常状態 */
  .hamburger-icon {
    display: block !important;
    opacity: 1;
    top: 0;
    transform: translateY(0);
  }

  /* バツアイコン：通常状態（上に隠れている） */
  .close-icon {
    display: block !important;
    opacity: 0;
    top: 0;
    transform: translateY(-20px);     /* 上に隠れている */
  }

  /* メニューが開いた時：ハンバーガーを下にスライドして消す */
  .site-header.is-open .hamburger-icon {
    opacity: 0;
    transform: translateY(20px);      /* 下に消える */
  }

  /* メニューが開いた時：バツを上から下にスライドして表示 */
  .site-header.is-open .close-icon {
    opacity: 1;
    transform: translateY(0);         /* 元の位置に */
  }

  /* スマホではオーバーレイを使わない（背景を暗くしない） */
  .menu-overlay {
    display: none !important;
  }

  /* ドロワーナビのスタイル */
  .drawer-nav {
    list-style: none;
    padding: 0 28px;                  /* 左右の余白28px */
    margin: 0;
  }

  /* 下部の装飾画像（スマホ用・通常は非表示） */
  .drawer-bottom-image {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    pointer-events: none;             /* クリックを透過 */
    opacity: 0;                       /* 最初は透明 */
    visibility: hidden;               /* 閉じる時は即座に消える */
  }

  /* メニューが開いた時に装飾画像をフェードイン */
  .site-header.is-open .drawer-bottom-image {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease 0.2s; /* 開く時は0.2秒遅れてフェードイン */
  }

  .drawer-nav li {
    /* アンダーバーなし */
  }

  .drawer-nav a {
    display: block;
    padding: clamp(0.875rem, 0.703rem + 0.71vw, 1.188rem) 0;
    color: #000;
    font-family: Inter, sans-serif;
    font-size: clamp(0.875rem, 0.703rem + 0.71vw, 1.188rem);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.56px;
  }

  /* ============================================
     フッターのレスポンシブ対応（1024px以下）
     ============================================ */

  /* お問い合わせセクション */
  .section-contact {
    padding: clamp(1.875rem, 1.359rem + 2.12vw, 2.813rem) clamp(1.25rem, 0.906rem + 1.41vw, 1.875rem) clamp(13.125rem, 9.515rem + 14.81vw, 19.688rem);
    background: transparent;
  }

  /* ボタン（スマホ版） */
  .contact-btn {
    width: 286px;
    height: 68px;
    border-radius: 50px;
    background: #FFF;
  }

  /* ボタン内テキスト（スマホ版） */
  .contact-btn-text {
    display: flex;
    width: 195px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    color: #F22D4F;
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.96px;
  }

  /* マーキー（上側・カード外） */
  .contact-marquee-top {
    height: clamp(3.813rem, 3.091rem + 2.96vw, 5.125rem);
    margin-bottom: 0;         /* カードにぴったり */
    margin-left: calc(-1 * clamp(1.25rem, 0.906rem + 1.41vw, 1.875rem));
    margin-right: calc(-1 * clamp(1.25rem, 0.906rem + 1.41vw, 1.875rem));
    width: 100vw;
  }

  .contact-marquee-top .contact-marquee-inner {
    animation-delay: -5s;     /* 文字2個分ずらす */
  }

  .contact-marquee-top .contact-marquee-inner img {
    width: clamp(22.813rem, 18.412rem + 18.05vw, 30.813rem);
    height: clamp(3.813rem, 3.091rem + 2.96vw, 5.125rem);
  }

  /* マーキー（下側・カード内） */
  .contact-marquee {
    height: clamp(3.813rem, 3.091rem + 2.96vw, 5.125rem);
  }

  .contact-marquee-inner img {
    width: clamp(22.813rem, 18.412rem + 18.05vw, 30.813rem);
    height: clamp(3.813rem, 3.091rem + 2.96vw, 5.125rem);
  }

  /* フッター: 滑り込み距離を縮小（SP） */
  .site-footer {
    margin-top: clamp(-14.063rem, -6.797rem - 10.58vw, -9.375rem);
    padding-top: clamp(9.375rem, 6.797rem + 10.58vw, 14.063rem);
  }

  /* フッター本体（1024px以下で縦並び・左寄せ） */
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: clamp(6.25rem, 4.531rem + 7.05vw, 9.375rem) 0 clamp(4.375rem, 3.172rem + 4.93vw, 6.563rem) 0;
    gap: 0;
  }

  .footer-left {
    order: 1;
    padding: 0 20px 0 clamp(0.813rem, 0.572rem + 0.99vw, 1.25rem);
  }

  .footer-right {
    order: 2;
    align-self: stretch;
    padding-top: 0;
    margin-top: clamp(5rem, 3.625rem + 5.64vw, 7.5rem);
  }

  .footer-nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.75rem, 1.269rem + 1.97vw, 2.625rem) clamp(1.563rem, 1.133rem + 1.76vw, 2.344rem);
  }

  .footer-nav a {
    text-align: center;
    font-size: clamp(0.875rem, 0.738rem + 0.56vw, 1.125rem);
    letter-spacing: 0.56px;
  }

  /* 代表者紹介セクション */
  .section-ceo {
    padding-left: 0;
    padding-right: 0;
  }

  .ceo-inner {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: clamp(2rem, 1.450rem + 2.26vw, 3rem);
  }

  .ceo-header {
    order: 1;
    grid-column: auto;
    grid-row: auto;
    align-self: stretch;
    padding: 0 clamp(0.813rem, 0.572rem + 0.99vw, 1.25rem);
  }

  .ceo-logo img {
    margin: 0 auto;
  }

  .ceo-image {
    order: 2;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
  }

  .ceo-image img {
    object-position: center 20%;
  }

  .ceo-body {
    order: 3;
    grid-column: auto;
    grid-row: auto;
    text-align: left;
    padding: 0 clamp(0.813rem, 0.572rem + 0.99vw, 1.25rem);
  }

  .ceo-title {
    margin-bottom: 0;
  }


  .ceo-motto {
    line-height: clamp(1.75rem, 1.406rem + 1.41vw, 2.375rem);
  }


  .ceo-sns {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* SNSボタン: SP版は全て同じ幅に統一 */
  .sns-btn img {
    width: 237px;
  }

  .footer-logo img,
  .footer-company-name img {
    margin: 0;
  }

  .footer-company-name img {
    height: clamp(1.063rem, 0.891rem + 0.71vw, 1.375rem);
    width: clamp(9.25rem, 7.738rem + 6.21vw, 12rem);
  }

  .footer-company-desc {
    text-align: left;
    font-size: clamp(0.875rem, 0.806rem + 0.28vw, 1rem);
    line-height: clamp(1.5rem, 1.431rem + 0.28vw, 1.625rem);
    letter-spacing: 0.56px;
    width: clamp(18.375rem, 10.296rem + 33.15vw, 33.063rem);
  }

  .footer-contact-info {
    align-items: flex-start;
  }
  .footer-contact-info p {
    font-size: 11px;
    letter-spacing: 0.2px;
    gap: 4px;
    white-space: nowrap;
  }

  /* CTAボタン（SP: 中央配置） */
  .mv-cta {
    right: auto;
    left: 50%;
    bottom: clamp(0rem, -0.5rem + 2vw, 2rem);
    transform: translateX(-50%) translateY(20px);
  }
  .mv-cta.is-visible {
    transform: translateX(-50%) translateY(0);
  }

  .mv-cta img {
    width: 19.375rem;
  }

  /* サービスカード（SP: 縦並び・中央揃え） */
  .service-cards {
    flex-direction: column;
    align-items: center;
  }

  .service-card {
    width: 100%;
    aspect-ratio: auto;
  }

  /* サービスカード タイトル（SP） */
  .service-card-title {
    font-size: clamp(1.25rem, 1.009rem + 0.99vw, 1.688rem);
    font-weight: 600;
    letter-spacing: 0.8px;
  }

  /* サービスカード 説明文（SP） */
  .service-card-desc {
    font-size: clamp(0.75rem, 0.613rem + 0.56vw, 1rem);
    font-weight: 500;
    line-height: clamp(1.188rem, 0.947rem + 0.99vw, 1.625rem);
    letter-spacing: 0.48px;
    flex-grow: 0;
  }

  /* サービスカード テキストエリア（SP: コンテンツ連動） */
  .service-card-body {
    position: relative;
    top: auto;
    bottom: auto;
    padding-top: 42%;
    padding-bottom: clamp(2rem, 1.614rem + 1.58vw, 3rem);
  }

  /* サービスカード タグ（SP） */
  .service-card-tags li {
    font-size: clamp(0.875rem, 0.738rem + 0.56vw, 1.125rem);
    font-weight: 500;
    line-height: clamp(0.945rem, 0.599rem + 1.42vw, 1.575rem);
    letter-spacing: 0.84px;
  }

  /* サービスカード チェックマーク（SP: 15.12px） */
  .service-card-tags li::before {
    width: clamp(0.945rem, 0.571rem + 1.53vw, 1.625rem);
    height: clamp(0.945rem, 0.571rem + 1.53vw, 1.625rem);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg clip-path='url(%23clip0_234_4346)'%3E%3Cpath d='M13.8598 6.98041V7.56001C13.859 8.91856 13.4191 10.2405 12.6056 11.3286C11.7922 12.4167 10.6488 13.2127 9.34604 13.5979C8.04325 13.9831 6.65084 13.9368 5.37648 13.466C4.10212 12.9952 3.0141 12.1251 2.27467 10.9854C1.53524 9.84568 1.18403 8.49749 1.27342 7.14189C1.36281 5.78629 1.88801 4.4959 2.77068 3.46317C3.65336 2.43044 4.84622 1.71071 6.17137 1.41131C7.49651 1.11191 8.88293 1.24889 10.1239 1.80181M13.8598 2.52002L7.55977 8.82632L5.66977 6.93632' stroke='%23595959' stroke-width='1.4175' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_234_4346'%3E%3Crect width='15.12' height='15.12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  }

  /* サービスセクション（SP: 上下余白調整） */
  .section-service {
    padding-top: clamp(12rem, 10.5rem + 6.15vw, 14.75rem);
    padding-bottom: 100px;
  }

  /* 特徴セクション（SP: 余白調整） */
  .section-feature {
    padding-top: clamp(1.25rem, 0.906rem + 1.41vw, 1.875rem);
  }

  /* 特徴カード（SP: フル幅・高さ自動） */
  .feature-card {
    width: 100vw;
    max-width: none;
    height: auto;
    padding-top: 90px;
    padding-bottom: 80px;
    border-radius: clamp(2rem, 1.656rem + 1.41vw, 2.625rem);
    box-shadow: 0 3.6px 36px 0 rgba(242, 45, 79, 0.35);
    margin-left: 50%;
    transform: translateX(-50%);
  }

  /* 特徴上段（SP: 2×2グリッド） */
  .feature-items {
    flex-wrap: wrap;
  }

  .feature-item {
    flex: 0 0 50%;
    border: none;
    padding: 1rem 0.75rem;
    position: relative;
  }

  /* 横線: 一本通し */
  .feature-item:nth-child(1),
  .feature-item:nth-child(2) {
    border-bottom: 1px dashed #000;
  }

  /* 縦線: 分割（高さ80%で中央） */
  .feature-item:nth-child(odd)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    border-right: 1px dashed #000;
  }

  /* 特徴アイテム タイトル（SP） */
  .feature-item-title {
    font-size: clamp(1.038rem, 0.838rem + 0.82vw, 1.4rem);
    letter-spacing: 0.664px;
  }

  /* 特徴アイテム 説明文（SP） */
  .feature-item-desc {
    font-size: clamp(0.75rem, 0.613rem + 0.56vw, 1rem);
    font-weight: 500;
    line-height: clamp(1.188rem, 0.947rem + 0.99vw, 1.625rem);
    letter-spacing: 0.36px;
  }

  /* 特徴下段（SP: 3×2グリッド） */
  .feature-sub-items {
    flex-wrap: wrap;
  }

  .feature-sub-item {
    flex: 0 0 33.333%;
    border: none;
    padding: 0.75rem 0.5rem;
    position: relative;
  }

  /* 横線: 一本通し */
  .feature-sub-item:nth-child(1),
  .feature-sub-item:nth-child(2),
  .feature-sub-item:nth-child(3) {
    border-bottom: 1px dashed #000;
  }

  /* 縦線: 分割（高さ80%で中央） */
  .feature-sub-item:nth-child(3n+1)::after,
  .feature-sub-item:nth-child(3n+2)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    border-right: 1px dashed #000;
  }

  /* サブ特徴テキスト（SP） */
  .feature-sub-text {
    display: inline-block;
    font-size: clamp(0.875rem, 0.669rem + 0.85vw, 1.25rem);
    line-height: 1.3;
    letter-spacing: 0.56px;
  }

  /* CTAボタン（SP: 縦並び） */
  .feature-buttons {
    flex-direction: column;
    align-items: center;
    margin-top: clamp(3.25rem, 2.562rem + 2.82vw, 4.5rem);
  }

  .feature-btn {
    width: clamp(17.875rem, 16.019rem + 7.62vw, 21.25rem);
    max-width: none;
    height: 60px;
    border-radius: 50px;
    font-size: clamp(1rem, 0.931rem + 0.28vw, 1.125rem);
    line-height: clamp(1.5rem, 1.225rem + 1.13vw, 2rem);
    letter-spacing: 0.96px;
  }

  .sp-only {
    display: inline;
  }

  .pc-only {
    display: none;
  }

  /* 特徴セクションのボタンのみ2行折り返し */
  .feature-buttons .feature-btn {
    height: auto;
    padding: clamp(0.75rem, 0.544rem + 0.85vw, 1.125rem) clamp(1.5rem, 1.088rem + 1.69vw, 2.25rem);
    text-align: center;
    position: relative;
  }

  .feature-buttons .feature-btn .feature-btn-arrow {
    position: absolute;
    right: clamp(1.5rem, 1.088rem + 1.69vw, 2.25rem);
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(1rem, 0.931rem + 0.28vw, 1.125rem);
    line-height: 19.2px;
    letter-spacing: 0.96px;
    margin-left: 0;
  }

  .feature-btn .feature-btn-arrow {
    font-size: clamp(1rem, 0.931rem + 0.28vw, 1.125rem);
    line-height: 19.2px;
    letter-spacing: 0.96px;
  }

  /* flow-button内ボタンも2行折り返し */
  .flow-button .feature-btn {
    height: auto;
    padding: clamp(0.75rem, 0.544rem + 0.85vw, 1.125rem) clamp(1.5rem, 1.088rem + 1.69vw, 2.25rem);
    text-align: center;
    position: relative;
  }

  .flow-button .feature-btn .feature-btn-arrow {
    position: absolute;
    right: clamp(1.5rem, 1.088rem + 1.69vw, 2.25rem);
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
  }

  /* フロースイッチ（SP: サイズ縮小） */
  .flow-switch-item {
    width: clamp(2.25rem, 1.838rem + 1.69vw, 3rem);
    height: clamp(9.063rem, 5.384rem + 15.09vw, 15.75rem);
  }

  .flow-switch-btn {
    width: clamp(9.063rem, 5.384rem + 15.09vw, 15.75rem);
    height: clamp(2.25rem, 1.838rem + 1.69vw, 3rem);
    border-radius: clamp(0.743rem, 0.532rem + 0.86vw, 1.125rem) clamp(0.743rem, 0.532rem + 0.86vw, 1.125rem) 0 0;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 16.632px;
    letter-spacing: 0.84px;
  }

  .flow-switch-btn.is-active {
    box-shadow: 0 2.079px 12.474px 0 rgba(0, 0, 0, 0.25);
  }

  .section-flow {
    margin-top: -80px;
    margin-bottom: 0;
    overflow: visible;
  }

  .section-oem {
    margin-bottom: -50px;
    overflow: visible;
  }

  /* 点線セパレーター（SP: 余白縮小） */
  .flow-separator {
    margin-top: 35px;
    margin-bottom: 25px;
  }

  .flow-sticky {
    padding-top: clamp(2.5rem, 1.812rem + 2.82vw, 3.75rem);
  }

  .oem-sticky {
    padding-top: clamp(1rem, 0.725rem + 1.13vw, 1.5rem);
  }

  /* フロー見出し→カード間の余白拡大 */
  .flow-sticky .sec-heading {
    margin-bottom: 20px;
  }

  /* OEM見出し→カード間の余白拡大 */
  .oem-sticky .sec-heading {
    margin-bottom: 30px;
  }

  /* 実績カード（SP: サイズ変更） */
  .works-grid {
    grid-template-columns: repeat(2, clamp(10.625rem, 7.875rem + 11.28vw, 15.625rem));
    justify-content: center;
  }

  .section-works .flow-button {
    margin-top: clamp(3.75rem, 2.719rem + 4.23vw, 5.625rem);
  }

  .section-works {
    padding-top: 90px;
    padding-bottom: clamp(3.75rem, -1.063rem + 19.75vw, 12.5rem);
  }

  .works-card {
    width: clamp(10.625rem, 7.875rem + 11.28vw, 15.625rem);
    aspect-ratio: 288 / 315;
    border-radius: clamp(0.625rem, 0.522rem + 0.42vw, 0.813rem);
  }

  .works-card > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }

  /* 実績カード ホバーオーバーレイ（SP） */
  .works-card-spec {
    width: clamp(9.465rem, 6.867rem + 10.66vw, 14.188rem);
    height: clamp(6.553rem, 4.760rem + 7.36vw, 9.813rem);
    aspect-ratio: auto;
  }

  .works-card-overlay-title {
    font-family: Inter, sans-serif;
    font-size: clamp(0.875rem, 0.738rem + 0.56vw, 1.125rem);
    font-weight: 600;
    line-height: clamp(1.188rem, 0.947rem + 0.99vw, 1.625rem);
    letter-spacing: 0.84px;
  }

  .works-card-overlay-link {
    font-family: Inter, sans-serif;
    font-size: clamp(0.75rem, 0.681rem + 0.28vw, 0.875rem);
    font-weight: 500;
    line-height: clamp(0.961rem, 0.836rem + 0.51vw, 1.188rem);
    letter-spacing: 0.72px;
    text-decoration: underline;
  }

  /* FAQカード（SP） */
  .faq-list {
    gap: clamp(0.625rem, 0.281rem + 1.41vw, 1.25rem);
    align-items: center;
    padding: 0;
  }

  .faq-card {
    width: clamp(21.875rem, 16.959rem + 20.17vw, 30.813rem);
    margin: 0 auto;
    border-radius: clamp(0.625rem, 0.522rem + 0.42vw, 0.813rem);
    padding: clamp(1rem, 0.931rem + 0.28vw, 1.125rem) clamp(1.25rem, 0.906rem + 1.41vw, 1.875rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .faq-label {
    font-size: clamp(1.125rem, 0.713rem + 1.69vw, 1.875rem);
    letter-spacing: 0.72px;
  }

  .faq-q-text,
  .faq-a-text {
    width: auto;
    max-width: 100%;
    font-size: clamp(0.875rem, 0.738rem + 0.56vw, 1.125rem);
    font-weight: 500;
    line-height: clamp(1.5rem, 1.294rem + 0.85vw, 1.875rem);
    letter-spacing: 0.56px;
  }

  .faq-a-text {
    font-weight: 400;
  }

  /* フローステップ: JS自動横スクロール（SP） */
  .flow-steps {
    overflow-x: visible;
    overflow-y: visible;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: auto;
    scrollbar-width: none;
    width: 100%;
    max-width: 100%;
    will-change: transform;
  }

  .flow-steps::-webkit-scrollbar {
    display: none;
  }

  /* 買付フロー・OEM共通: 横スクロール（SP） */
  .section-flow .flow-steps,
  .section-oem .flow-steps--scroll {
    opacity: 1 !important;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    transform: none !important;
    transition: none !important;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-top: -30px;
    margin-bottom: -30px;
    width: 100vw;
    max-width: none;
    margin-left: calc(-50vw + 50%);
    align-self: center;
    scrollbar-width: none;
  }

  .section-flow .flow-steps::-webkit-scrollbar,
  .section-oem .flow-steps--scroll::-webkit-scrollbar {
    display: none;
  }

  /* フローカード共通（SP） */
  .flow-step {
    scroll-snap-align: center;
    padding-bottom: clamp(1.5rem, 1.156rem + 1.41vw, 2.125rem);
  }

  .flow-step-title {
    font-size: clamp(1rem, 0.656rem + 1.41vw, 1.625rem);
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.64px;
  }

  .flow-step-desc {
    font-size: clamp(0.75rem, 0.613rem + 0.56vw, 1rem);
    font-weight: 500;
    line-height: clamp(1.188rem, 0.947rem + 0.99vw, 1.625rem);
    letter-spacing: 0.48px;
  }

  /* 買付フローカード（SP）: JS制御のためpadding不要 */
  .section-flow .flow-steps {
    padding-left: 0;
    padding-right: 0;
  }

  .section-flow .flow-step {
    flex: 0 0 clamp(11.858rem, 9.442rem + 9.91vw, 16.25rem);
    min-width: clamp(11.858rem, 9.442rem + 9.91vw, 16.25rem);
    max-width: clamp(11.858rem, 9.442rem + 9.91vw, 16.25rem);
    height: clamp(17.188rem, 13.751rem + 14.1vw, 23.438rem);
    padding-bottom: clamp(1.25rem, 0.906rem + 1.41vw, 1.875rem);
  }

  .section-flow .flow-step-image {
    margin-bottom: clamp(0.75rem, 0.578rem + 0.7vw, 1.063rem);
  }

  /* 買付フロー: PC用テキストサイズをSP用clampに戻す */
  .section-flow .flow-step-title {
    font-size: clamp(1rem, 0.656rem + 1.41vw, 1.625rem);
    letter-spacing: 0.64px;
  }

  .section-flow .flow-step-desc {
    font-size: clamp(0.75rem, 0.613rem + 0.56vw, 1rem);
    line-height: clamp(1.188rem, 0.947rem + 0.99vw, 1.625rem);
    max-width: none;
  }

  /* OEMフローカード（SP）: JS制御のためpadding不要 */
  .flow-steps--scroll {
    padding-left: 0;
    padding-right: 0;
  }

  .flow-steps--scroll .flow-step {
    flex: 0 0 clamp(11.858rem, 9.442rem + 9.91vw, 16.25rem);
    min-width: clamp(11.858rem, 9.442rem + 9.91vw, 16.25rem);
    max-width: clamp(11.858rem, 9.442rem + 9.91vw, 16.25rem);
    height: clamp(18.5rem, 13.618rem + 20.03vw, 27.375rem);
    padding-bottom: clamp(1.25rem, 0.906rem + 1.41vw, 1.875rem);
    border-radius: clamp(0.625rem, 0.350rem + 1.13vw, 1.125rem);
    background: #fff;
  }

  .flow-steps--scroll .flow-step-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    margin: 0 auto clamp(0.75rem, 0.578rem + 0.7vw, 1.063rem);
  }

  .flow-steps--scroll .flow-step-title {
    font-size: clamp(1rem, 0.657rem + 1.41vw, 1.624rem);
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.64px;
  }

  .flow-steps--scroll .flow-step-desc {
    font-size: clamp(0.75rem, 0.613rem + 0.56vw, 1rem);
    font-weight: 500;
    line-height: clamp(1.188rem, 0.947rem + 0.99vw, 1.625rem);
    letter-spacing: 0.48px;
    max-width: none;
  }

  /* 矢印は非表示 */
  .flow-arrow {
    display: none;
  }

  /* お客様の声（SP: 縦並び・中央揃え） */
  .voice-main {
    flex-direction: column;
    align-items: center;
    margin-top: 25px;
    padding: 0;
  }

  .voice-main-image {
    width: 100%;
    max-width: clamp(21.875rem, 16.959rem + 20.17vw, 30.813rem);
  }

  .voice-main-image img {
    width: 100%;
    height: clamp(12.5rem, 9.062rem + 14.10vw, 18.75rem);
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center 10%;
    border-radius: clamp(0.625rem, 0.522rem + 0.42vw, 0.813rem);
  }

  .voice-main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    width: 100%;
  }

  .voice-main-body {
    margin-top: 20px;
  }

  .voice-main-text {
    max-width: clamp(21.875rem, 16.959rem + 20.17vw, 30.813rem);
    line-height: 1.5rem;
    letter-spacing: 0.56px;
    padding: 0 16px;
  }

  .voice-main-more {
    width: clamp(21.875rem, 16.959rem + 20.17vw, 30.813rem);
    max-width: 100%;
    text-align: left;
    margin-top: 20px;
    padding: 0 16px;
  }

  .voice-main-header {
    justify-content: flex-start;
    width: 100%;
    max-width: clamp(21.875rem, 16.959rem + 20.17vw, 30.813rem);
    padding-left: 16px;
  }

  .voice-main-rating {
    width: 100%;
    max-width: clamp(21.875rem, 16.959rem + 20.17vw, 30.813rem);
    justify-content: flex-start;
    padding-left: 16px;
  }

  .voice-main-name {
    font-size: clamp(1.125rem, 1.056rem + 0.28vw, 1.25rem);
    font-weight: 500;
    letter-spacing: 0.72px;
  }

  .voice-main-role {
    font-size: clamp(0.75rem, 0.613rem + 0.56vw, 1rem);
    font-weight: 500;
    line-height: 26px;
    letter-spacing: 0.48px;
  }

  .voice-main-rating .voice-stars {
    font-size: 29.6px;
    line-height: 29.6px;
    letter-spacing: 0;
  }

  .voice-main-since {
    font-size: clamp(0.875rem, 0.806rem + 0.28vw, 1rem);
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0.56px;
  }

  .voice-main-tags {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: clamp(21.875rem, 16.959rem + 20.17vw, 30.813rem);
    min-height: clamp(10.563rem, 7.640rem + 11.99vw, 15.875rem);
    border-radius: clamp(0.625rem, 0.522rem + 0.42vw, 0.813rem);
    background: #fff;
    margin-top: 24px;
  }

  .voice-main-tags li {
    font-size: 14px;
    font-weight: 400;
    line-height: clamp(1.109rem, 1.026rem + 0.34vw, 1.26rem);
    letter-spacing: 0.84px;
  }

  .voice-main-tags li::before {
    width: clamp(1.188rem, 1.119rem + 0.28vw, 1.313rem);
    height: clamp(1.188rem, 1.119rem + 0.28vw, 1.313rem);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 19 19' fill='none'%3E%3Cg clip-path='url(%23clip0_234_4839)'%3E%3Cpath d='M16.7787 8.45037V9.15203C16.7778 10.7967 16.2452 12.3969 15.2605 13.7142C14.2758 15.0314 12.8916 15.995 11.3145 16.4613C9.73735 16.9277 8.05173 16.8717 6.50901 16.3017C4.9663 15.7318 3.64915 14.6784 2.75402 13.2987C1.85888 11.919 1.43371 10.2869 1.54192 8.64586C1.65013 7.00479 2.28593 5.44267 3.35448 4.19246C4.42303 2.94226 5.86709 2.07096 7.47128 1.70851C9.07548 1.34607 10.7539 1.51189 12.2561 2.18126M16.7787 3.0507L9.15206 10.685L6.86406 8.39699' stroke='%23595959' stroke-width='1.6632' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_234_4839'%3E%3Crect width='18.304' height='18.304' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat center / contain;
  }

  .voice-cards {
    grid-template-columns: 1fr;
    max-width: clamp(21.875rem, 16.959rem + 20.17vw, 30.813rem);
    margin-top: clamp(2.5rem, 0.437rem + 8.46vw, 6.25rem);
    padding: 0;
  }

  .section-faq {
    padding-top: 30px;
  }

  .voice-card-avatar {
    width: 100%;
    max-width: clamp(21.875rem, 16.959rem + 20.17vw, 30.813rem);
    height: clamp(7.563rem, 4.675rem + 11.85vw, 12.813rem);
    border-radius: clamp(0.625rem, 0.350rem + 1.13vw, 1.125rem);
    background: #E9E2E3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='51' viewBox='0 0 52 51' fill='none'%3E%3Cpath d='M51.1258 50.6283V44.2376C51.1258 40.8477 49.7792 37.5967 47.3822 35.1997C44.9852 32.8027 41.7342 31.4561 38.3443 31.4561H12.7814C9.3916 31.4561 6.14058 32.8027 3.7436 35.1997C1.34661 37.5967 0 40.8477 0 44.2376V50.6283' fill='white'/%3E%3Cpath d='M25.5629 25.5629C32.6219 25.5629 38.3443 19.8404 38.3443 12.7814C38.3443 5.72245 32.6219 0 25.5629 0C18.5039 0 12.7814 5.72245 12.7814 12.7814C12.7814 19.8404 18.5039 25.5629 25.5629 25.5629Z' fill='white'/%3E%3C/svg%3E") no-repeat center center;
    background-size: 56px auto;
  }

  .voice-card-header {
    padding-left: 16px;
  }

  .voice-card-name {
    font-size: clamp(1.125rem, 1.056rem + 0.28vw, 1.25rem);
    font-weight: 500;
    letter-spacing: 0.72px;
  }

  .voice-card-role {
    font-size: clamp(0.75rem, 0.613rem + 0.56vw, 1rem);
    font-weight: 500;
    line-height: 26px;
    letter-spacing: 0.48px;
  }

  .voice-card .voice-stars {
    font-size: 29.6px;
    line-height: 29.6px;
    letter-spacing: 0;
    padding-left: 12px;
  }

  .voice-card-text {
    max-width: clamp(21.875rem, 16.959rem + 20.17vw, 30.813rem);
    font-size: clamp(0.875rem, 0.806rem + 0.28vw, 1rem);
    font-weight: 400;
    line-height: clamp(1.5rem, 1.431rem + 0.28vw, 1.625rem);
    letter-spacing: 0.56px;
    padding: 0 16px;
  }
}

/* ============================================
   料金表ページ（page-price）
   ============================================ */

/* 料金表ページの背景もピンクにする */
.page-price {
  position: relative;
  background: #FEF7F8;
  overflow-x: clip;
  isolation: isolate;
}

body.page-price-body {
  background-color: #FEF7F8;
}

/* 背景装飾SVG（スクロール連動パララックス） */
.page-price::before {
  content: '';
  position: absolute;
  top: 1200px;
  left: 0;
  width: 100%;
  height: 8385px;
  background: url('assets/images/bg-pattern.svg') no-repeat center top;
  background-size: 150% auto;
  -webkit-mask-image: linear-gradient(to bottom, black 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 86%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

/* タイトルセクション — 他ページ（feature, flow, works）と同じpadding-top */
.price-hero {
  padding-top: clamp(7.5rem, 6.577rem + 3.79vw, 11.125rem);
  padding-bottom: 0;
}

/* サービス別料金一覧セクション: 白ボックスからの余白 SP=60px / PC=160px */
.price-table-section {
  padding-top: clamp(3.75rem, 2.156rem + 6.54vw, 10rem);
}

/* サービス別料金一覧: 説明文は余白20pxで注釈に繋がる */
.price-table-section .sec-heading-desc {
  margin-bottom: 20px;
}

.price-note {
  /* SP=310px / PC=1200px */
  max-width: clamp(19.375rem, 5.196rem + 58.17vw, 75rem);
  margin-left: auto;
  margin-right: auto;
}

/* 説明文の幅制約: SP=310px / PC=600px */
.price-hero .sec-heading-desc {
  max-width: clamp(19.375rem, 14.756rem + 18.95vw, 37.5rem);
  margin-left: auto;
  margin-right: auto;
}

/* 料金ハイライト（会員費・初回手数料・代行手数料） */
.price-highlights {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1.875rem, 0.215rem + 6.81vw, 8.388rem);
  width: 100%;
  max-width: 1200px;
  /* 上68px / 下48.8px（1920px時） */
  padding: clamp(2.5rem, 2.054rem + 1.83vw, 4.25rem) 0 clamp(1.875rem, 1.576rem + 1.23vw, 3.05rem);
  /* SP=48px / PC=83px */
  margin: clamp(3rem, 2.442rem + 2.29vw, 5.188rem) auto 0;
  border-radius: clamp(0.75rem, 0.654rem + 0.39vw, 1.125rem);
  background: #FFF;
}

.price-highlight-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.price-highlight-label {
  color: #595959;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: clamp(0.875rem, 0.812rem + 0.26vw, 1.125rem);
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 1.44px;
}

.price-highlight-value {
  color: #000;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(1.5rem, 1.309rem + 0.78vw, 2.25rem);
  font-weight: 700;
  line-height: normal;
}

/* 為替レート注釈（PC版） */
.price-note {
  text-align: center;
  color: #595959;
  font-family: Inter, sans-serif;
  font-size: clamp(0.75rem, 0.718rem + 0.13vw, 0.875rem);
  font-weight: 400;
  line-height: clamp(1.25rem, 1.155rem + 0.39vw, 1.625rem);
  letter-spacing: 0.48px;
  margin-top: 0;
}

/* 料金カテゴリーグリッド */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.745rem + 1.05vw, 2rem);
  max-width: 1200px;
  margin: 80px auto 0;
}

/* 下段2つを中央寄せ */
.price-category:nth-child(4) {
  grid-column: 1 / 2;
}
.price-category:nth-child(5) {
  grid-column: 2 / 3;
}

/* カテゴリーヘッダー（ピンクバー）: PC=383×50px, SP=350×35px */
.price-category-header {
  background: #F22D4F;
  color: #FFF;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: clamp(1.125rem, 1.029rem + 0.39vw, 1.5rem);
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.72px;
  height: clamp(2.188rem, 1.949rem + 0.98vw, 3.125rem);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: clamp(0.625rem, 0.498rem + 0.52vw, 1.125rem);
  margin-bottom: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);
}

/* 料金リスト: 3列グリッド（チェック | 項目名 | 価格） */
.price-category-list {
  list-style: none;
  padding: 12px 0 0;
  margin: 0;
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: clamp(0.5rem, 0.437rem + 0.26vw, 0.75rem) clamp(0.375rem, 0.311rem + 0.26vw, 0.625rem);
  align-items: baseline;
  font-family: Inter, sans-serif;
  font-size: clamp(1rem, 0.936rem + 0.26vw, 1.25rem);
  font-weight: 400;
  line-height: clamp(0.945rem, 0.814rem + 0.54vw, 1.458rem);
  letter-spacing: 0.96px;
  color: #000;
}

.price-category-list li {
  display: contents;
}

/* チェックマーク: PC=26×26px, SP=16×16px */
.price-category-list li::before {
  content: '';
  width: clamp(1rem, 0.841rem + 0.65vw, 1.625rem);
  height: clamp(1rem, 0.841rem + 0.65vw, 1.625rem);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26' fill='none'%3E%3Cg clip-path='url(%23clip0_176_4516)'%3E%3Cpath d='M23.8333 12.003V12.9997C23.832 15.3358 23.0755 17.6089 21.6767 19.48C20.278 21.3511 18.3119 22.7199 16.0716 23.3822C13.8313 24.0446 11.437 23.9651 9.24564 23.1555C7.05428 22.3459 5.18333 20.8496 3.91183 18.8898C2.64033 16.9301 2.0364 14.6118 2.19011 12.2807C2.34382 9.94963 3.24693 7.73071 4.76476 5.95485C6.28259 4.17899 8.33381 2.94135 10.6125 2.42652C12.8912 1.91168 15.2752 2.14722 17.4091 3.09802M23.8333 4.33302L13 15.1772L9.74997 11.9272' stroke='%23595959' stroke-width='2.3625' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_176_4516'%3E%3Crect width='26' height='26' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat center / contain;
  align-self: center;
}

.price-item-name {
  white-space: nowrap;
}

.price-item-value {
  white-space: nowrap;
  font-weight: 600;
  color: #F22D4F;
  letter-spacing: 0.96px;
}

/* 「無料」の強調表示 */
.price-free {
  color: #F22D4F;
  font-weight: 600;
}

.price-item-value small {
  font-size: 0.85em;
  font-weight: 400;
  color: #F22D4F;
}

/* ============================================
   他社との料金比較セクション
   ============================================ */
.price-comparison-section {
  padding-top: clamp(4.375rem, 4.344rem + 0.13vw, 4.5rem);
  padding-bottom: 150px;
}

/* 比較カード: PC=1200px, border-radius=18px */
.comparison-card {
  max-width: clamp(21.875rem, 8.332rem + 55.56vw, 75rem);
  margin: 3rem auto 0;
  background: #FFF;
  border-radius: clamp(0.75rem, 0.654rem + 0.39vw, 1.125rem);
  padding: clamp(1.25rem, 0.931rem + 1.31vw, 2.5rem) clamp(1.25rem, 0.772rem + 1.96vw, 3.125rem) clamp(2.5rem, 1.862rem + 2.61vw, 5rem);
}

/* 比較テーブル */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
  padding: clamp(0.875rem, 0.812rem + 0.26vw, 1.125rem) clamp(0.5rem, 0.309rem + 0.78vw, 1.25rem);
  text-align: center;
  font-family: Inter, 'Noto Sans JP', sans-serif;
}

.comparison-table thead th {
  padding-bottom: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);
}

.comparison-table tbody tr {
  border-bottom: 1px solid #E8E8E8;
}

.comparison-table tbody tr:last-child {
  border-bottom: none;
}

/* バッジ: PC=432×50px, border-radius=18px */
.comparison-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(2.188rem, 1.949rem + 0.98vw, 3.125rem);
  border-radius: clamp(0.625rem, 0.498rem + 0.52vw, 1.125rem);
  font-family: Inter, sans-serif;
  font-size: clamp(0.875rem, 0.780rem + 0.39vw, 1.25rem);
  font-weight: 600;
  color: #FFF;
  letter-spacing: 0.8px;
}

.comparison-badge--choritz {
  background: #F22D4F;
}

.comparison-badge--other {
  background: #595959;
}

/* テーブル行: ラベル（PC=18px, #000） */
.comparison-label {
  text-align: left;
  font-size: clamp(0.875rem, 0.811rem + 0.26vw, 1.125rem);
  font-weight: 400;
  color: #000;
  white-space: nowrap;
  letter-spacing: 0.72px;
}

/* テーブル行: CHORITZ列（PC=22px, #F22D4F） */
.comparison-choritz {
  color: #F22D4F;
  font-weight: 600;
  font-size: clamp(1rem, 0.905rem + 0.39vw, 1.375rem);
  line-height: 25.2px;
  letter-spacing: 1.32px;
}

.comparison-circle {
  -webkit-text-stroke: 2px #F22D4F;
}

/* テーブル行: 競合列（PC=20px, #595959） */
.comparison-other {
  color: #595959;
  font-weight: 400;
  font-size: clamp(0.875rem, 0.811rem + 0.26vw, 1.25rem);
  line-height: 25.2px;
  letter-spacing: 1.2px;
}

/* 結果ハイライト */
.comparison-result {
  text-align: center;
  padding-top: clamp(1rem, 0.745rem + 1.05vw, 2rem);
}

/* 三角矢印: PC=140×28px SVG */
.comparison-result-arrow {
  width: clamp(5rem, 4.046rem + 3.92vw, 8.75rem);
  height: clamp(1rem, 0.809rem + 0.78vw, 1.75rem);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='122' height='21' viewBox='0 0 122 21' fill='none'%3E%3Cpath d='M60.6218 21L0 0L121.244 0L60.6218 21Z' fill='%23F22D4F'/%3E%3C/svg%3E") no-repeat center / contain;
  margin: 0 auto clamp(0.5rem, 0.373rem + 0.52vw, 1rem);
}

/* タイトル: PC=24px, #000, 赤マーカー下線 */
.comparison-result-title {
  font-family: Inter, sans-serif;
  font-size: clamp(1rem, 0.873rem + 0.52vw, 1.5rem);
  font-weight: 600;
  color: #000;
  letter-spacing: 1.44px;
  line-height: clamp(1.5rem, 1.309rem + 0.78vw, 2.25rem);
  display: inline;
  background: linear-gradient(transparent 55%, rgba(242, 45, 79, 0.25) 55%);
}

/* 説明テキスト: PC=20px, #000, line-height=36px */
.comparison-result-desc {
  font-family: Inter, sans-serif;
  font-size: clamp(0.75rem, 0.654rem + 0.39vw, 1.25rem);
  font-weight: 400;
  color: #000;
  line-height: clamp(1.75rem, 1.623rem + 0.52vw, 2.25rem);
  letter-spacing: 1.2px;
  margin-top: clamp(0.5rem, 0.373rem + 0.52vw, 1rem);
}

/* ドットインジケーター: デスクトップでは非表示 */
.comparison-scroll-dots {
  display: none;
}

/* ============================================
   お支払い方法 & 配送オプション
   PC: カード582×338px, ヘッダー542×50px
   ============================================ */
.info-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 0.681rem + 1.31vw, 2.25rem);
  max-width: clamp(21.875rem, 8.332rem + 55.56vw, 75rem);
  margin: clamp(3.75rem, 3.114rem + 2.61vw, 6.25rem) auto 0;
}

/* カード: PC=582×338px, border-radius=18px */
.info-card {
  background: #FFF;
  border-radius: clamp(0.75rem, 0.654rem + 0.39vw, 1.125rem);
  padding: clamp(0.75rem, 0.559rem + 0.78vw, 1.5rem) clamp(0.75rem, 0.559rem + 0.78vw, 1.25rem);
}

/* ヘッダーバー: PC=542×50px, 中央配置・角丸 */
.info-card-header {
  background: #555;
  color: #FFF;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: clamp(1rem, 0.873rem + 0.52vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.96px;
  height: clamp(2.188rem, 1.949rem + 0.98vw, 3.125rem);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: clamp(0.625rem, 0.498rem + 0.52vw, 1.125rem);
  margin: 0;
}

.info-card-list {
  list-style: none;
  padding: clamp(1rem, 0.809rem + 0.78vw, 1.75rem) clamp(0.5rem, 0.182rem + 1.31vw, 1.75rem);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.625rem, 0.498rem + 0.52vw, 1.125rem);
}

/* リスト項目: PC=20px, チェックマーク26×26px */
.info-card-list li {
  font-family: Inter, sans-serif;
  font-size: clamp(0.875rem, 0.780rem + 0.39vw, 1.25rem);
  font-weight: 400;
  color: #000;
  line-height: 25.2px;
  letter-spacing: 1.2px;
  padding-left: clamp(1.75rem, 1.495rem + 1.05vw, 2.75rem);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26' fill='none'%3E%3Cg clip-path='url(%23c)'%3E%3Cpath d='M23.8333 12.003V12.9997C23.832 15.3358 23.0755 17.6089 21.6767 19.48C20.278 21.3511 18.3119 22.7199 16.0716 23.3822C13.8313 24.0446 11.437 23.9651 9.24564 23.1555C7.05428 22.3459 5.18333 20.8496 3.91183 18.8898C2.64033 16.9301 2.0364 14.6118 2.19011 12.2807C2.34382 9.94963 3.24693 7.73071 4.76476 5.95485C6.28259 4.17899 8.33381 2.94135 10.6125 2.42652C12.8912 1.91168 15.2752 2.14722 17.4091 3.09802M23.8333 4.33302L13 15.1772L9.74997 11.9272' stroke='%23595959' stroke-width='2.3625' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Crect width='26' height='26' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat left center / clamp(1rem, 0.841rem + 0.65vw, 1.625rem);
}

/* 料金ページ: お客様の声・FAQ余白調整 */

/* 料金ページ: スマホ版 */
@media (max-width: 1024px) {
  /* 料金ハイライト: 比較カードと同じ幅に制限 */
  .price-highlights {
    max-width: clamp(21.875rem, 8.332rem + 55.56vw, 75rem);
    padding-top: 30px;
    padding-bottom: 34px;
  }

  .price-highlight-item {
    gap: 4px;
  }

  /* 見出しエリアの幅制約: SP=310px */
  .price-table-section .sec-heading {
    max-width: 310px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 為替レート注釈（SP版） */
  .price-note {
    color: #000;
    font-size: 0.875rem;
    line-height: 2rem;
    letter-spacing: 0.56px;
    margin-top: 20px;
  }

  /* 料金カテゴリー: 1列レイアウト */
  .price-grid {
    grid-template-columns: 1fr;
    max-width: clamp(21.875rem, 16.959rem + 20.17vw, 30.813rem);
    margin-left: auto;
    margin-right: auto;
    gap: 39px;
  }

  .price-category:nth-child(4),
  .price-category:nth-child(5) {
    grid-column: auto;
  }

  /* ヘッダーバー: SP=350×35px */
  .price-category-header {
    height: 35px;
    font-size: 1.125rem;
    border-radius: 10px;
    letter-spacing: 0.72px;
    margin-bottom: 20px;
  }

  /* リスト: SP固定値 */
  .price-category-list {
    font-size: 1rem;
    line-height: 15.12px;
    letter-spacing: 0.96px;
    gap: 15px 8px;
    padding-left: 16px;
  }

  /* チェックマーク: SP=16×16px */
  .price-category-list li::before {
    width: 16px;
    height: 16px;
  }

  /* 値テキスト */
  .price-item-value {
    letter-spacing: 0.96px;
  }

  .price-comparison-section {
    min-height: auto;
    padding-bottom: 0;
  }

  .comparison-sticky {
    position: static;
  }

  .comparison-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .comparison-table {
    min-width: 500px;
    will-change: auto;
    backface-visibility: visible;
  }

  /* ドットインジケーター: スクロール連動に変更のため非表示 */
  .comparison-scroll-dots {
    display: none;
  }

  .comparison-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D9D9D9;
    transition: background 0.3s;
  }

  .comparison-dot.active {
    background: #F22D4F;
  }

  /* バッジ: SP=201×52px, border-radius=10px */
  .comparison-badge {
    height: 52px;
    border-radius: 10px;
    font-size: 1rem;
    letter-spacing: 0.64px;
  }

  /* ラベル: SP=14px */
  .comparison-label {
    font-size: 0.875rem;
    line-height: 15.12px;
    letter-spacing: 0.84px;
  }

  /* CHORITZ値: SP=18px */
  .comparison-choritz {
    font-size: 1.125rem;
    line-height: 15.12px;
    letter-spacing: 1.08px;
  }

  /* 競合値: SP=16px */
  .comparison-other {
    font-size: 1rem;
    line-height: 15.12px;
    letter-spacing: 0.96px;
  }

  /* 結果テキスト: SP版 */
  .comparison-result-title {
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: 0.84px;
  }

  .comparison-result-desc {
    font-size: 0.875rem;
    line-height: 1.5rem;
    letter-spacing: 0.84px;
  }

  /* 比較セクション見出し幅制約 */
  .price-comparison-section {
    padding-bottom: 60px;
  }

  .price-comparison-section .sec-heading {
    max-width: 310px;
    margin-left: auto;
    margin-right: auto;
  }

  /* お支払い・配送カード: 1列 */
  .info-cards {
    grid-template-columns: 1fr;
    align-items: start;
    max-width: clamp(21.875rem, 16.959rem + 20.17vw, 30.813rem);
    gap: 32px;
  }

  /* カード: レスポンシブ, border-radius=10px */
  .info-card {
    width: 100%;
    height: auto;
    border-radius: 10px;
  }

  /* ヘッダーバー: レスポンシブ */
  .info-card-header {
    width: 93%;
    height: 35px;
    border-radius: 10px;
    font-size: 1.125rem;
    letter-spacing: 0.72px;
    margin: 0 auto;
  }

  /* リスト: ヘッダーから21.5px、項目間14px */
  .info-card-list {
    padding-top: 21.5px;
    gap: 14px;
  }

  /* リスト項目: SP=16px */
  .info-card-list li {
    font-size: 1rem;
    line-height: 15.12px;
    letter-spacing: 0.96px;
    padding-left: 24px;
    background-size: 15.6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg clip-path='url(%23clip0_249_8176)'%3E%3Cpath d='M14.3001 7.20162V7.79962C14.2993 9.20129 13.8454 10.5652 13.0061 11.6878C12.1669 12.8105 10.9872 13.6317 9.64303 14.0292C8.29888 14.4266 6.86227 14.3789 5.54745 13.8931C4.23264 13.4073 3.11007 12.5096 2.34717 11.3337C1.58427 10.1578 1.22191 8.76686 1.31414 7.36822C1.40636 5.96959 1.94823 4.63823 2.85893 3.57272C3.76963 2.5072 5.00036 1.76462 6.36757 1.45571C7.73478 1.14681 9.16522 1.28814 10.4456 1.85862M14.3001 2.59962L7.80005 9.10612L5.85005 7.15612' stroke='%23595959' stroke-width='1.4175' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_249_8176'%3E%3Crect width='15.6' height='15.6' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  }
}

/* ============================================
   特徴・強みページ（page-feature）
   ============================================ */

/* ページ全体 */
.feature-page {
  position: relative;
  background: #FEF7F8;
  overflow-x: clip;
  isolation: isolate;
}

/* 背景装飾SVG（スクロール連動パララックス） */
.feature-page::before {
  content: '';
  position: absolute;
  top: 1200px;
  left: 0;
  width: 100%;
  height: 8385px;
  background: url('assets/images/bg-pattern.svg') no-repeat center top;
  background-size: 150% auto;
  -webkit-mask-image: linear-gradient(to bottom, black 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 86%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

body.page-slug-feature,
body.page-template-page-feature,
body.page-feature {
  background-color: #FEF7F8;
}

/* --- ヒーローセクション --- */
.feature-hero {
  padding-top: clamp(7.5rem, 6.577rem + 3.79vw, 11.125rem);
  padding-bottom: clamp(2.5rem, 2.181rem + 1.31vw, 3.75rem);
}

/* --- 統計数字エリア --- */
/* Figma: 1200×160, border-radius: 18px */
.feature-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 134px;
  width: 1200px;
  max-width: 100%;
  height: 160px;
  /* 説明文→統計ボックス間: PC 83px / SP 48px */
  margin: clamp(3rem, 2.442rem + 2.29vw, 5.188rem) auto 0;
  border-radius: 18px;
  background: #FFF;
}

.feature-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

/* Figma: ラベル枠 157×28 */
.feature-stat-label {
  color: #595959;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 1.44px;
}

/* Figma: 数字枠 112.8×43.2, font-size: 36px */
.feature-stat-value {
  color: #000;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: normal;
}

/* 単位（年, %）— 数字と同じサイズ */
.feature-stat-unit {
  font-size: 36px;
  font-weight: 700;
}

/* +記号 — 数字と同じ高さに見えるよう大きめに */
.feature-stat-plus {
  font-size: 44px;
  font-weight: 700;
}

/* --- 特徴一覧セクション（ページ版） --- */
/* 10項目を4列グリッドで統一サイズに配置 */
.section-feature--page {
  display: grid;
  grid-template-columns: repeat(4, 304px);
  grid-auto-rows: 1fr;
  justify-content: center;
  max-width: 1216px;
  margin: 0 auto;
  padding: clamp(3rem, 2.523rem + 1.96vw, 4.875rem) 0 0;
}

/* コンテナをグリッドに透過させる */
.section-feature--page .feature-items,
.feature-detail-items {
  display: contents;
}

/* 上段4項目: 横線 + 縦線切り離し */
.section-feature--page .feature-item {
  border-right: none;
  border-bottom: 1px dashed #000;
  padding-bottom: clamp(1rem, 0.682rem + 1.31vw, 2.25rem);
  position: relative;
}

/* 上段: 縦線（::after で横線と切り離し） */
.section-feature--page .feature-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  border-right: 1px dashed #000;
}

/* --- 詳細特徴（6項目・点線区切り） --- */
/* 各セル: グリッドで統一幅・統一高さ */
.feature-detail-item {
  text-align: center;
  padding: 32px 30px;
  position: relative;
}

/* 縦線: ::after で横線と切り離し（各行の1〜3列目） */
.feature-detail-item:nth-child(4n+1)::after,
.feature-detail-item:nth-child(4n+2)::after,
.feature-detail-item:nth-child(4n+3)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  border-right: 1px dashed #000;
}

/* 4列目の縦線なし */
.feature-detail-item:nth-child(4n)::after {
  content: none;
}

/* 横の点線: 1行目（1〜4番目）の下 — 一本の直線 */
.feature-detail-item:nth-child(-n+4) {
  border-bottom: 1px dashed #000;
}

/* タイトル: Figma 28px / 600 / 各行に赤アンダーライン */
.feature-detail-title {
  color: #000;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 1.12px;
  /* display: inline で margin-bottom が効かないため、desc 側で余白をとる */
  display: inline;
  background: linear-gradient(to top, rgba(242, 45, 79, 0.25) 54%, transparent 54%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 説明文: Figma 16px / 26px / max-width 242.55px */
.feature-detail-desc {
  color: #000;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.48px;
  max-width: 242.55px;
  margin: 12px auto 0;
}

/* --- 他社との違いセクション --- */
/* 他社との違いの三角ロゴ: PC版は非表示 */
.comparison-icon {
  display: none;
}

.section-comparison {
  padding-top: clamp(5.625rem, 5.147rem + 1.96vw, 7.5rem);
}

.section-comparison .sec-heading {
  margin-bottom: clamp(3.75rem, 3.431rem + 1.31vw, 5rem);
}

.section-comparison .sec-heading-desc {
  max-width: 724px;
  margin-left: auto;
  margin-right: auto;
}

.comparison-columns {
  display: flex;
  justify-content: center;
  gap: 36px;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- 各カード: 582×450, padding 20px --- */
.comparison-col {
  width: 582px;
  height: 450px;
  padding: 20px;
  border-radius: 18px;
  background: #FFF;
  box-sizing: border-box;
}

/* --- タイトルバー: 542px = 582 - 20*2 --- */
.comparison-col-title {
  height: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 36px;
  color: #FFF;
  font-family: Inter, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 1.12px;
}

.comparison-col--choritz .comparison-col-title {
  background: #F22D4F;
}

.comparison-col--other .comparison-col-title {
  background: #595959;
}

/* --- リスト --- */
.comparison-list {
  display: flex;
  flex-direction: column;
  padding: 0 0 0 24px;
  margin: 0;
  list-style: none;
}

/* --- 各項目 --- */
.comparison-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
}

/* チェックアイコン */
.comparison-item::before {
  content: '';
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-right: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26' fill='none'%3E%3Cg clip-path='url(%23clip0_176_3546)'%3E%3Cpath d='M23.8333 12.0034V13.0001C23.832 15.3362 23.0755 17.6093 21.6767 19.4804C20.278 21.3514 18.3119 22.7202 16.0716 23.3826C13.8313 24.045 11.437 23.9654 9.24564 23.1559C7.05428 22.3463 5.18333 20.85 3.91183 18.8902C2.64033 16.9304 2.0364 14.6121 2.19011 12.2811C2.34382 9.95 3.24693 7.73108 4.76476 5.95522C6.28259 4.17936 8.33381 2.94172 10.6125 2.42688C12.8912 1.91204 15.2752 2.14759 17.4091 3.09839M23.8333 4.33339L13 15.1776L9.74997 11.9276' stroke='%23595959' stroke-width='2.3625' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_176_3546'%3E%3Crect width='26' height='26' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat center / contain;
}

/* ラベル */
.comparison-item-label {
  color: #000;
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: 1.44px;
}

/* 値 */
.comparison-item-value {
  color: #000;
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: 1.44px;
  margin-left: 0.5em;
}

/* CHORITZ強調値（赤色） */
.comparison-item-value--highlight {
  color: #F22D4F;
  font-weight: 600;
}

/* CTAボタン */
.comparison-button {
  display: flex;
  justify-content: center;
  margin-top: clamp(3.75rem, 2.795rem + 3.92vw, 7.5rem);
}

/* --- feature ページ内のお客様の声・FAQ余白調整 --- */
.feature-page .section-voice {
  padding-top: 150px;
}

.feature-page .section-faq {
  padding-top: clamp(5rem, 4.204rem + 3.27vw, 8.125rem);
}

/* ============================================
   特徴・強みページ レスポンシブ（1512px以下）
   ============================================ */
@media (max-width: 1512px) {

  /* 特徴一覧: 列幅 304px→260px にクランプ */
  .section-feature--page {
    grid-template-columns: repeat(4, clamp(16.25rem, 8.908rem + 10.68vw, 19rem));
    padding-left: 20px;
    padding-right: 20px;
  }

  /* 詳細特徴の説明文: 固定max-width解除 */
  .feature-detail-desc {
    max-width: none;
  }
}

/* ============================================
   特徴・強みページ レスポンシブ（1024px以下）
   ============================================ */
@media (max-width: 1024px) {

  /* 他社との違い: 三角ロゴをスマホ版で表示 */
  .comparison-icon {
    display: block;
  }

  /* ヒーロー */
  .feature-hero {
    padding-top: clamp(6.25rem, 5.219rem + 4.23vw, 8.125rem);
    padding-bottom: clamp(1.25rem, 0.906rem + 1.41vw, 1.875rem);
  }

  /* ヒーロー見出し: 390px=310px → 1024px=500px で折り返し */
  .feature-hero .sec-heading {
    max-width: clamp(19.375rem, 12.843rem + 26.80vw, 31.25rem);
    margin-left: auto;
    margin-right: auto;
  }

  /* 統計数字: 390px=350×127, 1024px=650×150 */
  .feature-stats {
    width: clamp(21.875rem, 11.562rem + 42.31vw, 40.625rem);
    height: auto;
    gap: clamp(0.938rem, -0.610rem + 6.35vw, 3.75rem);
    align-items: flex-start;
    padding: 28px 0 20px;
    margin: clamp(3rem, 2.244rem + 3.10vw, 4.375rem) auto 0;
    border-radius: clamp(0.625rem, 0.522rem + 0.42vw, 0.813rem);
  }

  .feature-stat-item:last-child .feature-stat-value {
    margin-top: 5px;
  }

  /* ラベル: 390px=14px, 1024px=16px */
  .feature-stat-label {
    font-family: Inter, sans-serif;
    font-size: clamp(0.875rem, 0.807rem + 0.28vw, 1rem);
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 1.12px;
    color: #595959;
  }

  /* 数値: 390px=24px, 1024px=30px */
  .feature-stat-value {
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(1.5rem, 1.293rem + 0.85vw, 1.875rem);
    font-weight: 700;
    color: #000;
  }

  .feature-stat-unit {
    font-size: clamp(1.5rem, 1.293rem + 0.85vw, 1.875rem);
    font-weight: 700;
  }

  .feature-stat-plus {
    font-size: clamp(1.813rem, 1.537rem + 1.13vw, 2.313rem);
    font-weight: 700;
  }

  /* 特徴一覧（ページ版: 2列グリッドに変更） */
  /* 上余白: hero下20px + ここ40px = 合計60px（390px時） */
  .section-feature--page {
    grid-template-columns: repeat(2, 1fr);
    max-width: clamp(21.875rem, 11.562rem + 42.31vw, 40.625rem);
    margin: 0 auto;
    padding: clamp(2.5rem, 1.125rem + 5.64vw, 5rem) 0 0;
  }

  /* 上段4項目: ベースのボーダーをリセットして2列用に再設定 */
  .section-feature--page .feature-item {
    border: none;
    padding: 1rem 0.75rem;
    position: relative;
  }

  /* 上段: 全行の下に横線（小ロット行の上にも線が入る） */
  .section-feature--page .feature-item {
    border-bottom: 1px dashed #000;
  }

  /* 上段: 左列（奇数）のみ縦線 */
  .section-feature--page .feature-item:nth-child(odd)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    border-right: 1px dashed #000;
  }

  /* 上段: 右列（偶数）の縦線を削除 */
  .section-feature--page .feature-item:nth-child(even)::after {
    content: none;
  }

  /* タイトル: 390px=18px, 1024px=22px */
  .section-feature--page .feature-item-title {
    font-size: clamp(1.125rem, 0.989rem + 0.56vw, 1.375rem);
    font-weight: 600;
    letter-spacing: 0.72px;
  }

  .section-feature--page .feature-item-desc {
    font-size: clamp(0.75rem, 0.613rem + 0.56vw, 1rem);
    font-weight: 500;
    line-height: clamp(1.188rem, 0.947rem + 0.99vw, 1.625rem);
    letter-spacing: 0.36px;
  }

  /* 詳細特徴（モバイル: 2列×3行） */
  .feature-detail-item {
    border: none !important;
    padding: clamp(0.75rem, 0.544rem + 0.85vw, 1.125rem) clamp(0.5rem, 0.294rem + 0.85vw, 0.875rem);
    position: relative;
  }

  /* 横線: 上2行（1-4番目）の下 */
  .feature-detail-item:nth-child(-n+4) {
    border-bottom: 1px dashed #000 !important;
  }

  /* 縦線: 左列（奇数番目）のみ */
  .feature-detail-item:nth-child(odd)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    border-right: 1px dashed #000;
  }

  /* 右列（偶数番目）の縦線を削除 */
  .feature-detail-item:nth-child(even)::after {
    content: none;
  }

  .feature-detail-title {
    /* 390px: 15px → 1024px: 22px */
    font-size: clamp(0.938rem, 0.696rem + 0.99vw, 1.375rem);
  }

  .feature-detail-desc {
    font-size: clamp(0.75rem, 0.681rem + 0.28vw, 0.875rem);
    line-height: clamp(1.25rem, 1.112rem + 0.56vw, 1.5rem);
    max-width: none;
  }

  /* 他社との違い: 390px=60px, 1024px=80px */
  /* 390px=140px, 1024px=180px */
  .feature-page .section-comparison {
    padding-top: clamp(8.75rem, 7.375rem + 5.64vw, 11.25rem);
  }

  /* 見出し余白: 390px=60px → 1024px=80px */
  .section-comparison .sec-heading {
    margin-bottom: clamp(3.75rem, 3.062rem + 2.82vw, 5rem);
  }

  .section-comparison .sec-heading-desc {
    max-width: clamp(19.375rem, 12.843rem + 26.80vw, 31.25rem);
  }

  .comparison-columns {
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 0.793rem + 0.85vw, 1.375rem);
    padding: 0;
  }

  /* カード: 390px=padding12,radius10 → 1024px=padding20,radius14 */
  .comparison-col {
    width: clamp(21.875rem, 16.717rem + 21.16vw, 31.25rem);
    height: auto;
    padding: clamp(0.75rem, 0.475rem + 1.13vw, 1.25rem);
    border-radius: clamp(0.625rem, 0.488rem + 0.56vw, 0.875rem);
  }

  /* タイトルバー: 390px=radius10 → 1024px=radius14 */
  .comparison-col-title {
    font-size: clamp(1.125rem, 1.057rem + 0.28vw, 1.25rem);
    font-weight: 600;
    letter-spacing: 0.72px;
    height: clamp(2.188rem, 1.844rem + 1.41vw, 2.813rem);
    margin-bottom: clamp(0.75rem, 0.544rem + 0.85vw, 1.125rem);
    border-radius: clamp(0.625rem, 0.488rem + 0.56vw, 0.875rem);
  }

  /* リスト左余白: 390px=26.4px → 1024px=40px */
  .comparison-list {
    padding-left: clamp(1.65rem, 1.182rem + 1.92vw, 2.5rem);
  }

  /* 項目余白: 390px=6px → 1024px=10px */
  .comparison-item {
    padding: clamp(0.375rem, 0.238rem + 0.56vw, 0.625rem) 0;
  }

  /* チェックマーク: 390px=16px → 1024px=18px */
  .comparison-item::before {
    width: clamp(1rem, 0.932rem + 0.28vw, 1.125rem);
    height: clamp(1rem, 0.932rem + 0.28vw, 1.125rem);
    margin-right: clamp(0.5rem, 0.362rem + 0.56vw, 0.75rem);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg clip-path='url(%23clip0_249_7276)'%3E%3Cpath d='M14.3001 7.20199V7.79998C14.2993 9.20166 13.8454 10.5655 13.0061 11.6882C12.1669 12.8108 10.9872 13.6321 9.64303 14.0295C8.29888 14.4269 6.86227 14.3792 5.54745 13.8935C4.23264 13.4077 3.11007 12.51 2.34717 11.3341C1.58427 10.1582 1.22191 8.76723 1.31414 7.36859C1.40636 5.96995 1.94823 4.6386 2.85893 3.57308C3.76963 2.50757 5.00036 1.76498 6.36757 1.45608C7.73478 1.14718 9.16522 1.2885 10.4456 1.85899M14.3001 2.59999L7.80005 9.10649L5.85005 7.15649' stroke='%23595959' stroke-width='1.4175' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_249_7276'%3E%3Crect width='15.6' height='15.6' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  }

  /* ラベル: 390px=16px → 1024px=18px */
  .comparison-item-label {
    font-size: clamp(1rem, 0.931rem + 0.28vw, 1.125rem);
    font-weight: 400;
    line-height: 15.12px;
    letter-spacing: 0.96px;
  }

  /* 値: 390px=16px → 1024px=18px */
  .comparison-item-value {
    font-size: clamp(1rem, 0.931rem + 0.28vw, 1.125rem);
    font-weight: 600;
    line-height: 15.12px;
    letter-spacing: 0.96px;
  }

  .comparison-col--other .comparison-item-value {
    font-weight: 400;
  }

  .comparison-item-value--highlight {
    font-size: clamp(1rem, 0.931rem + 0.28vw, 1.125rem);
    font-weight: 600;
    line-height: 15.12px;
    letter-spacing: 0.96px;
  }

  /* ボタン余白: 390px=60/70 → 1024px=80/100 */
  .comparison-button {
    margin-top: clamp(3.75rem, 3.062rem + 2.82vw, 5rem);
    margin-bottom: clamp(4.375rem, 3.344rem + 4.23vw, 6.25rem);
  }

  /* ボタン: 390px=286×52 → 1024px=380×64 */
  .comparison-button .feature-btn {
    width: clamp(17.875rem, 14.643rem + 13.26vw, 23.75rem);
    height: clamp(3.25rem, 2.838rem + 1.69vw, 4rem);
    border-radius: 50px;
    background: #F22D4F;
    font-family: Inter, sans-serif;
    font-size: clamp(1rem, 0.931rem + 0.28vw, 1.125rem);
    font-weight: 600;
    line-height: 19.2px;
    letter-spacing: 0.96px;
    color: #FFF;
    text-align: center;
    padding: 0;
    white-space: nowrap;
  }

  .comparison-button .feature-btn .sp-only {
    display: none;
  }

  /* feature ページ内のお客様の声・FAQ余白調整 */
  .feature-page .section-voice {
    padding-top: 0;
  }

  .feature-page .section-faq {
    padding-top: clamp(2.5rem, 1.812rem + 2.82vw, 3.75rem);
  }

  .feature-page .voice-main {
    margin-top: clamp(2.5rem, 1.812rem + 2.82vw, 3.75rem);
  }

  .feature-page .voice-cards {
    margin-top: clamp(2.5rem, 1.812rem + 2.82vw, 3.75rem);
  }
}


/* ============================================
   進行の流れページ（page-flow）
   ============================================ */

/* ページ全体 */
.flow-page {
  position: relative;
  background: #FEF7F8;
  overflow-x: clip;
  isolation: isolate;
  padding-bottom: 120px;
}

/* 背景装飾SVG */
.flow-page::before {
  content: '';
  position: absolute;
  top: 1200px;
  left: 0;
  width: 100%;
  height: 8385px;
  background: url('assets/images/bg-pattern.svg') no-repeat center top;
  background-size: 150% auto;
  -webkit-mask-image: linear-gradient(to bottom, black 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 86%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

body.page-slug-flow,
body.page-template-page-flow,
body.page-flow {
  background-color: #FEF7F8;
}

/* --- ヒーローセクション --- */
.flow-hero {
  padding-top: clamp(7.5rem, 6.577rem + 3.79vw, 11.125rem);
  padding-bottom: clamp(2.5rem, 2.181rem + 1.31vw, 3.75rem);
}

/* --- フロー詳細セクション --- */
.flow-detail-section {
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 0.931rem + 1.31vw, 2.5rem);
}

.flow-detail-section + .flow-detail-section {
  margin-top: 12.5rem;
}

/* 白いカード: 1200×2166, radius=18 */
.flow-detail-card {
  width: 75rem;
  max-width: 100%;
  min-height: 135.375rem;
  margin: 0 auto;
  background: #FFF;
  border-radius: 1.125rem;
  border: none;
  padding: 7.5rem 4.5rem clamp(6.25rem, 5.612rem + 2.61vw, 8.75rem) 4.5rem;
}

/* カードヘッダー */
.flow-detail-header {
  text-align: center;
  padding-bottom: 6.25rem;
}

/* タイトル: w728, #F22D4F, Inter 28px, weight 600 */
.flow-detail-header-title {
  font-family: Inter, sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  color: #F22D4F;
  letter-spacing: 1.12px;
  line-height: normal;
  max-width: 728px;
  margin: 0 auto clamp(0.5rem, 0.373rem + 0.52vw, 1rem);
}

/* 説明文: w832, #000, Inter 18px, weight 400, line-height 32px */
.flow-detail-header-desc {
  font-family: Inter, sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  color: #000;
  line-height: 2rem;
  letter-spacing: 0.72px;
  max-width: 832px;
  margin: 0 auto;
}

/* --- ステップラッパー --- */
.flow-detail-step-wrapper {
  margin-bottom: 5rem;
}

.flow-detail-step-wrapper:first-of-type {
  padding-top: 0;
}

.flow-detail-step-wrapper:last-of-type {
  margin-bottom: 0;
}

/* ステップ番号 + ライン（テキスト開始位置に揃える） */
.flow-detail-step-num {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);
  font-family: Inter, sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: #F22D4F;
  line-height: 2rem;
  letter-spacing: 0.72px;
  margin-bottom: clamp(1rem, 0.809rem + 0.78vw, 1.75rem);
  margin-left: 24.25rem;
}

.flow-detail-step-num::after {
  content: '';
  flex: 1;
  height: 0;
  border-top: 1px solid #F22D4F;
  opacity: 0.5;
}

/* --- 各ステップ --- */
.flow-detail-step {
  display: flex;
  align-items: center;
  gap: 3rem;
}

/* ステップ画像 */
.flow-detail-step-img {
  flex-shrink: 0;
  width: 21.25rem;
}

.flow-detail-step-img img {
  width: 100%;
  height: auto;
  border-radius: clamp(0.5rem, 0.437rem + 0.26vw, 0.75rem);
  object-fit: cover;
}

/* ステップ本文 */
.flow-detail-step-body {
  flex: 1;
}

/* ステップタイトル: Inter 25.987px, weight 600 */
.flow-detail-step-title {
  font-family: Inter, sans-serif;
  font-size: 1.624rem;
  font-weight: 600;
  color: #000;
  letter-spacing: 1.039px;
  line-height: normal;
  margin-bottom: clamp(0.5rem, 0.373rem + 0.52vw, 1rem);
}

/* ステップ説明文: Inter 16px, weight 400, line-height 26px, w591 */
.flow-detail-step-desc {
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #000;
  line-height: 1.625rem;
  letter-spacing: 0.64px;
  max-width: 591px;
  margin-bottom: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);
}

/* チェックリスト: Inter 18px, weight 500, line-height 25.2px */
.flow-detail-step-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.375rem, 0.311rem + 0.26vw, 0.625rem);
}

.flow-detail-step-list li {
  display: flex;
  align-items: center;
  font-family: Inter, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  color: #000;
  line-height: 1.575rem;
  letter-spacing: 1.08px;
}

/* チェックアイコン: 25.2×25.2 */
.flow-detail-step-list li::before {
  content: '';
  flex-shrink: 0;
  width: 1.575rem;
  height: 1.575rem;
  margin-right: clamp(0.5rem, 0.437rem + 0.26vw, 0.75rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26' fill='none'%3E%3Cpath d='M23.1 11.6338V12.5998C23.0987 14.864 22.3655 17.0672 21.0098 18.8807C19.6541 20.6942 17.7484 22.0209 15.5771 22.6629C13.4058 23.3048 11.0851 23.2278 8.96117 22.4431C6.83724 21.6584 5.02386 20.2082 3.79148 18.3087C2.55911 16.4092 1.97376 14.1622 2.12274 11.9029C2.27172 9.64355 3.14704 7.4929 4.61817 5.77169C6.0893 4.05047 8.0774 2.85091 10.286 2.35191C12.4945 1.85292 14.8053 2.08121 16.8735 3.00276M23.1 4.19976L12.6 14.7103L9.44998 11.5603' stroke='%23595959' stroke-width='2.3625' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ============================================
   進行の流れページ レスポンシブ（1024px以下）
   ============================================ */
@media (max-width: 1024px) {

  /* ヒーロー */
  .flow-hero {
    padding-top: clamp(6.25rem, 5.219rem + 4.23vw, 8.125rem);
    padding-bottom: clamp(1.25rem, 0.906rem + 1.41vw, 1.875rem);
  }

  /* セクション間の余白: 140px@390 → 180px@1024 */
  .flow-detail-section + .flow-detail-section {
    margin-top: clamp(8.75rem, 7.375rem + 5.64vw, 11.25rem);
  }

  /* 白カード: 350px@390→500px@810, border-radius 10px */
  .flow-detail-card {
    width: clamp(21.875rem, 13.171rem + 35.71vw, 31.25rem);
    max-width: 100%;
    margin: 0 auto;
    border-radius: clamp(0.625rem, 0.489rem + 0.56vw, 0.875rem);
    min-height: auto;
    padding: clamp(3.75rem, 3.062rem + 2.82vw, 5rem) clamp(1.75rem, 1.338rem + 1.69vw, 2.5rem);
    padding-bottom: clamp(3.75rem, 3.062rem + 2.82vw, 5rem);
  }

  /* カードヘッダー余白: 48px@390 → 64px@1024 */
  .flow-detail-header {
    padding-bottom: clamp(3rem, 2.449rem + 2.26vw, 4rem);
  }

  /* 赤タイトル: 20px@390 → 24px@1024 */
  .flow-detail-header-title {
    font-size: clamp(1.25rem, 1.113rem + 0.56vw, 1.5rem);
    letter-spacing: 0.8px;
  }

  /* ヘッダー説明文: 14px@390 → 16px@1024, line-height 24px→28px */
  .flow-detail-header-desc {
    font-size: clamp(0.875rem, 0.806rem + 0.28vw, 1rem);
    line-height: clamp(1.5rem, 1.363rem + 0.56vw, 1.75rem);
    letter-spacing: 0.56px;
  }

  /* ステップラッパー: flexで並び替え可能に */
  .flow-detail-step-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: clamp(2rem, 1.313rem + 2.82vw, 3.25rem);
  }

  /* display:contentsで子要素をwrapperの直接flex子にする */
  .flow-detail-step {
    display: contents;
  }

  /* 画像: order 1（最上部）, 100%幅, aspect-ratio 243/170 */
  .flow-detail-step-img {
    order: 1;
    width: 100%;
  }

  .flow-detail-step-img img {
    aspect-ratio: 243 / 170;
    width: 100%;
  }

  /* ステップ番号: order 2（画像の下に移動）, 14px@390 → 16px@1024 */
  .flow-detail-step-num {
    order: 2;
    margin-left: 0;
    font-size: clamp(0.875rem, 0.806rem + 0.28vw, 1rem);
    line-height: clamp(1.2rem, 1.104rem + 0.39vw, 1.375rem);
    letter-spacing: 0.56px;
    margin-top: clamp(2.5rem, 2.088rem + 1.69vw, 3.25rem);
    margin-bottom: clamp(1.25rem, 0.975rem + 1.13vw, 1.75rem);
  }

  /* 横棒: 実機でも視認できるサイズに */
  .flow-detail-step-num::after {
    border-top-width: 1px;
  }

  /* 本文エリア: order 3（ステップ番号の下） */
  .flow-detail-step-body {
    order: 3;
    flex: none;
  }

  /* ステップタイトル: 20px@390 → 24px@1024 */
  .flow-detail-step-title {
    font-size: clamp(1.25rem, 1.113rem + 0.56vw, 1.5rem);
    letter-spacing: 0.8px;
  }

  /* ステップ説明文: 14px@390 → 16px@1024, line-height 24px→28px, 上12px 下28px */
  .flow-detail-step-desc {
    font-size: clamp(0.875rem, 0.806rem + 0.28vw, 1rem);
    line-height: clamp(1.5rem, 1.363rem + 0.56vw, 1.75rem);
    letter-spacing: 0.56px;
    max-width: none;
    margin-top: clamp(0.75rem, 0.614rem + 0.56vw, 1rem);
    margin-bottom: clamp(1.75rem, 1.475rem + 1.13vw, 2.25rem);
  }

  /* チェックリスト: 項目間 14px@390 → 18px@1024 */
  .flow-detail-step-list {
    gap: clamp(0.875rem, 0.739rem + 0.56vw, 1.125rem);
  }

  /* チェック項目: 16px@390 → 18px@1024 */
  .flow-detail-step-list li {
    align-items: flex-start;
    font-size: clamp(1rem, 0.932rem + 0.28vw, 1.125rem);
    line-height: 1.6;
    letter-spacing: 0.96px;
  }

  /* チェックマーク: 15.6px@390 → 18px@1024, SVG差し替え */
  .flow-detail-step-list li::before {
    width: clamp(0.975rem, 0.893rem + 0.34vw, 1.125rem);
    height: clamp(0.975rem, 0.893rem + 0.34vw, 1.125rem);
    margin-top: 0.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M14.3001 7.2026V7.8006C14.2993 9.20227 13.8454 10.5661 13.0061 11.6888C12.1669 12.8114 10.9872 13.6327 9.64303 14.0301C8.29888 14.4276 6.86227 14.3798 5.54745 13.8941C4.23264 13.4083 3.11007 12.5106 2.34717 11.3347C1.58427 10.1588 1.22191 8.76784 1.31414 7.3692C1.40636 5.97056 1.94823 4.63921 2.85893 3.57369C3.76963 2.50818 5.00036 1.76559 6.36757 1.45669C7.73478 1.14779 9.16522 1.28911 10.4456 1.8596M14.3001 2.6006L7.80005 9.1071L5.85005 7.1571' stroke='%23595959' stroke-width='1.4175' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}


/* ============================================
   OEM実績紹介ページ（page-works）
   ============================================ */

/* ページ全体 */
.page-works {
  position: relative;
  background: #FEF7F8;
  overflow-x: clip;
  isolation: isolate;
}

body.page-works-body {
  background-color: #FEF7F8;
}

/* 背景装飾SVG（スクロール連動パララックス） */
.page-works::before {
  content: '';
  position: absolute;
  top: 400px;
  left: 0;
  width: 100%;
  height: 8385px;
  background: url('assets/images/bg-pattern.svg') no-repeat center top;
  background-size: 150% auto;
  -webkit-mask-image: linear-gradient(to bottom, black 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 86%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

/* --- ヒーローセクション --- */
.works-hero {
  padding-top: clamp(7.5rem, 6.577rem + 3.79vw, 11.125rem);
  padding-bottom: 0;
}

/* --- カルーセルセクション --- */
.works-carousel-section {
  padding-top: 0;
  padding-bottom: 160px;
}

/* カルーセルコンテナ */
.works-carousel {
  position: relative;
}

/* 各ページ（非アクティブは非表示） */
.works-page {
  display: none;
}

.works-page.is-active {
  display: block;
  animation: worksFadeIn 0.4s ease;
}

@keyframes worksFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* グリッド: TOPページと同じ 4列×2行 */
.works-carousel-section .works-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem 0.875rem;
  max-width: 1224px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 0.682rem + 1.31vw, 2.25rem);
}

/* カード: TOPページと同じスタイル */
.works-carousel-section .works-card {
  position: relative;
  aspect-ratio: 288 / 315;
  border-radius: clamp(0.75rem, 0.623rem + 0.52vw, 1.25rem);
  overflow: hidden;
  cursor: pointer;
}

.works-carousel-section .works-card:empty {
  display: none;
}

.works-carousel-section .works-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* --- ページネーション --- */
.works-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 100px;
  margin-top: 84px;
}

.works-pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 53px;
  height: 53px;
  border-radius: 28.35px;
  border: none;
  background: #595959;
  opacity: 0.5;
  cursor: pointer;
  color: #FFF;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  padding-top: 2px;
  transition: opacity 0.2s;
}

.works-pagination-btn:hover {
  opacity: 1;
}

.works-pagination-btn:disabled {
  opacity: 0.2;
  cursor: default;
}

.works-pagination-btn:disabled:hover {
  opacity: 0.2;
}

.works-pagination-indicator {
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #595959;
  line-height: 32px;
  letter-spacing: 1.08px;
  text-align: center;
  width: 30px;
}

/* ============================================
   OEM実績紹介ページ レスポンシブ（1024px以下）
   ============================================ */
@media (max-width: 1024px) {
  .works-hero {
    padding-top: clamp(6.25rem, 5.219rem + 4.23vw, 8.125rem);
    padding-bottom: 0;
  }

  /* グリッド: 2列に変更 */
  .works-carousel-section .works-grid {
    grid-template-columns: repeat(2, clamp(10.625rem, 7.875rem + 11.28vw, 15.625rem));
    gap: 10px;
    justify-content: center;
  }

  .works-carousel-section {
    padding-bottom: 140px;
  }

  .works-carousel-section .works-card {
    width: clamp(10.625rem, 7.875rem + 11.28vw, 15.625rem);
    aspect-ratio: 288 / 315;
    border-radius: clamp(0.625rem, 0.522rem + 0.42vw, 0.813rem);
  }

  /* ページネーション: SP版 */
  .works-pagination {
    gap: 0;
    justify-content: space-between;
    max-width: 390px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 80px;
  }

  .works-pagination-btn {
    width: 40px;
    height: 40px;
    border-radius: 22.68px;
  }

  .works-pagination-btn svg {
    width: 13px;
    height: 13px;
  }

  .works-pagination-indicator {
    width: 44px;
    font-size: 16px;
    line-height: 25.6px;
    letter-spacing: 0.96px;
  }
}


/* ============================================
   OEM実績 詳細ページ（single-works）
   ============================================ */

/* ページ全体 */
.single-works-page {
  position: relative;
  background: #FEF7F8;
  overflow-x: clip;
  isolation: isolate;
}

body.single-works-body {
  background-color: #FEF7F8;
}

/* 背景装飾SVG（スクロール連動パララックス） */
.single-works-page::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 0;
  width: 100%;
  height: 8385px;
  background: url('assets/images/bg-pattern.svg') no-repeat center top;
  background-size: 150% auto;
  -webkit-mask-image: linear-gradient(to bottom, black 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 86%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

/* --- メインコンテンツ 2カラム --- */
.works-detail {
  padding: clamp(7.5rem, 6.577rem + 3.79vw, 11.125rem) 0 80px;
}

.works-detail-inner {
  display: flex;
  gap: 60px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--site-padding-sp);
}

/* --- 左カラム: ギャラリー --- */
.works-gallery {
  flex-shrink: 0;
  width: 400px;
}

.works-gallery-main {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 7;
  border-radius: 18px;
  overflow: hidden;
  background: #f0f0f0;
}

.works-gallery-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.works-gallery-placeholder {
  width: 100%;
  height: 100%;
  background: #f0f0f0;
}

/* 矢印ナビゲーション */
.works-gallery-arrow {
  position: absolute;
  bottom: 16px;
  width: 32px;
  height: 32px;
  border-radius: 17px;
  border: none;
  background: #595959;
  opacity: 0.5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
  z-index: 2;
}

.works-gallery-arrow:hover,
.works-gallery-arrow:active {
  opacity: 1;
}

.works-gallery-arrow-text {
  color: #FFF;
  text-align: right;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 19.2px;
  letter-spacing: 0.72px;
}

.works-gallery-prev {
  left: 12px;
}

.works-gallery-next {
  right: 12px;
}

/* サムネイル一覧 */
.works-gallery-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  overflow: hidden;
  width: 100%;
}
.works-gallery-thumb {
  flex-shrink: 0;
  width: calc((100% - 10px * 3) / 4);
  height: 94px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  background: none;
  transition: border-color 0.2s ease;
}

.works-gallery-thumb.is-active {
  border-color: #F22D4F;
}

.works-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- 右カラム: 詳細情報 --- */
.works-detail-content {
  flex: 1;
  min-width: 0;
}

/* Worksラベル + 赤線 */
.works-detail-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.works-detail-number {
  color: #F22D4F;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0.72px;
  white-space: nowrap;
}

.works-detail-line {
  flex: 1;
  height: 1px;
  background: #F22D4F;
  opacity: 0.5;
}

/* タイトル */
.works-detail-title {
  font-size: 25.987px;
  font-weight: 600;
  color: #000;
  letter-spacing: 1.039px;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* 説明文 */
.works-detail-desc {
  max-width: 591px;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.64px;
  color: #333;
  margin-bottom: 32px;
}

.works-detail-desc p {
  margin-bottom: 1em;
}

.works-detail-desc p:last-child {
  margin-bottom: 0;
}

/* 商品詳細ボックス */
.works-detail-specs {
  width: 656px;
  max-width: 100%;
  min-height: 220px;
  background: #fff;
  border-radius: 18px;
  padding: 28px 32px;
  margin-bottom: 48px;
}

.works-detail-specs-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 25.2px;
  letter-spacing: 1.08px;
  color: #333;
  margin-bottom: 8px;
}

.works-detail-specs-body {
  font-size: 16px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: 0.96px;
  color: #333;
}

/* CTAボタン */
.works-detail-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 656px;
  max-width: 100%;
  height: 75px;
  background: #F22D4F;
  border-radius: 48px;
  text-decoration: none;
  transition: opacity 0.2s ease;
  margin-bottom: 16px;
}

.works-detail-cta:hover {
  opacity: 0.85;
}

.works-detail-cta-text {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 25.2px;
  letter-spacing: 1.08px;
}

.works-detail-cta-arrow {
  color: #fff;
  font-size: 18px;
  margin-left: 8px;
}

/* 注記 */
.works-detail-note {
  max-width: 591px;
  color: #595959;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.56px;
}

/* --- その他のOEM実績紹介 --- */
.works-related {
  padding: 200px 0 135px;
}

.works-related-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 48px;
}

.works-related-icon {
  width: clamp(4.313rem, 3.572rem + 3.04vw, 7.219rem);
  height: auto;
}

.works-related-title {
  width: 506.362px;
  max-width: 100%;
  color: #000;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 38px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 1.52px;
}

.works-related-grid {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 0 var(--site-padding-sp);
}

/* 関連カードのリンク化 */
.works-related-grid .works-card {
  display: block;
  width: 288px;
  text-decoration: none;
}

/* ============================================
   single-works レスポンシブ: ラップトップ
   ============================================ */
@media (max-width: 1512px) {
  .works-detail-inner {
    padding: 0 var(--site-padding-laptop);
  }

  .works-related-grid {
    padding: 0 var(--site-padding-laptop);
  }
}

/* ============================================
   single-works レスポンシブ: タブレット〜ノートPC
   ============================================ */
@media (max-width: 1200px) {
  .works-detail-inner {
    gap: 40px;
  }

  .works-gallery {
    width: 340px;
  }

  .works-gallery-thumb {
    height: 77px;
  }

  .works-detail-specs {
    width: 100%;
  }

  .works-detail-cta {
    width: 100%;
  }
}

/* ============================================
   single-works レスポンシブ: モバイル
   ============================================ */
@media (max-width: 1024px) {
  .works-detail {
    padding: 62px 0 48px;
  }

  .works-detail-inner {
    flex-direction: column;
    gap: 66px;
    width: clamp(21.875rem, 13.171rem + 35.71vw, 31.25rem);
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--site-padding-sp);
  }

  .works-gallery {
    flex-shrink: 1;
    width: 100%;
  }

  .works-gallery-main {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 7;
    border-radius: clamp(0.75rem, 0.623rem + 0.52vw, 1.125rem);
  }

  .works-gallery-thumbs {
    gap: 8px;
    width: 100%;
  }

  .works-gallery-thumb {
    width: calc((100% - 8px * 3) / 4);
    height: 82px;
    border-radius: 6px;
  }

  .works-gallery-arrow {
    width: 48px;
    height: 48px;
    border-radius: 24px;
  }

  .works-gallery-prev {
    left: 8px;
  }

  .works-gallery-next {
    right: 8px;
  }

  .works-detail-label,
  .works-detail-title,
  .works-detail-desc {
    padding: 0 8px;
  }

  .works-detail-desc {
    margin-bottom: 24px;
  }

  .works-detail-specs {
    width: 100%;
    min-height: auto;
    padding: 20px 24px;
    border-radius: 14px;
  }

  .works-detail-specs-title {
    font-size: 16px;
  }

  .works-detail-specs-body {
    font-size: 14px;
  }

  .works-detail-cta {
    width: 100%;
    height: clamp(3.75rem, 3.517rem + 0.95vw, 4.188rem);
    border-radius: 40px;
  }

  .works-detail-cta-text {
    font-size: clamp(0.875rem, 0.823rem + 0.21vw, 0.969rem);
  }

  .works-detail-note {
    width: 100%;
    color: #595959;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0.56px;
    padding: 0 8px;
  }

  /* 関連実績 */
  .works-related {
    padding: 90px 0 80px;
  }

  .works-related-title {
    font-size: clamp(1.375rem, 1.11rem + 1.09vw, 1.875rem);
    letter-spacing: 1px;
  }

  .works-related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: clamp(21.875rem, 13.171rem + 35.71vw, 31.25rem);
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--site-padding-sp);
  }

  .works-related-grid .works-card {
    width: 100%;
  }
}

/* ============================================
   お問い合わせページ（page-contact.php）
   ============================================ */

body.page-contact-body {
  background-color: #FEF7F8;
}

.page-contact {
  position: relative;
  overflow-x: clip;
  isolation: isolate;
  background-color: #FEF7F8;
}

.page-contact::before {
  content: '';
  position: absolute;
  top: 300px;
  left: 0;
  width: 100%;
  height: 8385px;
  background: url('assets/images/bg-pattern.svg') no-repeat center top;
  background-size: 150% auto;
  -webkit-mask-image: linear-gradient(to bottom, black 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 86%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

/* --- ヒーローセクション --- */
.contact-hero {
  padding-top: 95px;
  padding-bottom: 3.75rem;
}

.contact-hero .sec-heading-desc {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #000;
  text-align: center;
  line-height: 32px;
  letter-spacing: 0.72px;
  max-width: 810px;
  margin: 0 auto;
}

/* --- 連絡方法カード（3枚） --- */
.contact-methods {
  padding: 0 var(--site-padding-pc);
  margin-bottom: 60px;
}

.contact-methods-inner {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  max-width: 75rem;
  margin: 0 auto;
}

.contact-method-card {
  width: 392px;
  max-width: 100%;
  height: 98px;
  border-radius: 18px;
  background: #FFF;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  box-sizing: border-box;
  flex-shrink: 1;
}

.contact-method-icon {
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  border-radius: 8px;
  background: rgba(242, 45, 79, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-method-icon svg {
  width: auto;
  height: auto;
}

.contact-method-wechat-img {
  width: 40px;
  height: auto;
}

.contact-method-text {
  display: flex;
  flex-direction: column;
}

.contact-method-label-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.contact-method-label {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #000;
  line-height: 25.2px;
  letter-spacing: 1.08px;
}

.contact-method-sub {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #595959;
  line-height: 25.2px;
  letter-spacing: 0.84px;
}

.contact-method-value {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #F22D4F;
  line-height: 25.2px;
  letter-spacing: 0.96px;
  text-decoration: underline;
  text-underline-position: from-font;
}

a.contact-method-value {
  display: inline-block;
}

/* --- メインコンテンツ（2カラム） --- */
.contact-content {
  padding: 0 var(--site-padding-pc);
  padding-bottom: 200px;
}

.contact-content-inner {
  display: grid;
  grid-template-columns: 600px 552px;
  gap: 3rem;
  justify-content: center;
}

/* --- フォームカード --- */
.contact-form-card {
  width: 600px;
  max-width: 100%;
  min-height: 935px;
  background: #FFF;
  border-radius: 18px;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.contact-form-card .contact-form-title,
.contact-form-card .contact-form {
  width: 440px;
  max-width: 100%;
}

/* メインタイトル: お問い合わせフォーム */
.contact-form-title {
  font-family: 'Inter', sans-serif;
  font-size: 25.987px;
  font-weight: 600;
  color: #000;
  letter-spacing: 1.039px;
  margin-bottom: 2.25rem;
}

/* フォームグループ */
.form-group {
  margin-bottom: 1.75rem;
}

/* ラベル（タイトル） */
.form-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #000;
  line-height: 25.2px;
  letter-spacing: 0.96px;
  margin-bottom: 0.5rem;
}

/* バッジ共通 */
.form-badge {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: 0.84px;
}

/* 必須 */
.form-badge--required {
  color: #F22D4F;
}

/* 任意 */
.form-badge--optional {
  color: #595959;
}

/* 入力フィールド・セレクト・テキストエリア */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  height: 42px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  line-height: 25.2px;
  letter-spacing: 0.84px;
  background: #FFF;
  border: 1px solid rgba(89, 89, 89, 0.25);
  border-radius: 6px;
  padding: 0 1rem;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #F22D4F;
}

/* プレースホルダー（枠内文字） */
.form-input::placeholder,
.form-textarea::placeholder {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #595959;
  line-height: 20px;
  letter-spacing: 0.72px;
}

.form-select-wrap {
  position: relative;
}

.form-select-wrap::after {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9' viewBox='0 0 18 9' fill='none'%3E%3Cpath d='M0.75 0.75L8.75 7.75L16.75 0.75' stroke='%231E1E1E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  pointer-events: none;
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.5rem;
}

.form-textarea {
  height: 100px;
  min-height: 100px;
  resize: vertical;
  padding: 0.75rem 1rem;
}

/* --- 送信ボタン --- */
.form-submit-wrap {
  margin-top: 2.25rem;
}

.form-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 60px;
  background: #F22D4F;
  color: #FFF;
  border: none;
  border-radius: 48px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.form-submit-btn:hover {
  opacity: 0.9;
}

.form-submit-btn-text {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #FFF;
  line-height: 25.2px;
  letter-spacing: 1.08px;
  text-align: center;
}

.form-submit-btn-arrow {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #FFF;
}

/* --- 注意書き（送信ボタン下テキスト） --- */
.form-note {
  margin-top: -20px;
  margin-bottom: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #595959;
  line-height: 24px;
  letter-spacing: 0.56px;
}

/* --- Contact Form 7 対応 --- */

/* CF7フォーム全体の幅を既存デザインに合わせる */
.contact-form-card .wpcf7,
.contact-form-card .wpcf7-form {
  width: 440px;
  max-width: 100%;
}

/* CF7のラッパー要素: ブロック表示 + 余白除去 */
.contact-form-card .wpcf7-form-control-wrap {
  display: block;
  margin: 0;
  padding: 0;
}

/* CF7ラベルの余白を元のデザインに合わせる */
.contact-form-card .form-label {
  margin-bottom: 0.5rem;
}

/* CF7送信ボタン（input[type="submit"]） */
.wpcf7-form .form-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60px;
  background: #F22D4F;
  color: #FFF;
  border: none;
  border-radius: 48px;
  cursor: pointer;
  transition: opacity 0.2s;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1.08px;
}

.wpcf7-form .form-submit-btn:hover {
  opacity: 0.9;
}

/* CF7バリデーションエラーメッセージ（絶対配置でレイアウト崩れ防止） */
.wpcf7-form-control-wrap {
  position: relative;
}

.wpcf7-not-valid-tip {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 4px;
  font-size: 13px;
  color: #F22D4F;
  white-space: nowrap;
}

/* CF7フォーム送信後のレスポンスメッセージ */
.wpcf7 .wpcf7-response-output {
  margin: 1.25rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
}

/* CF7送信中のスピナー */
.wpcf7 .wpcf7-spinner {
  display: block;
  margin: 1rem auto 0;
}

/* --- サイドバー（FAQカード3枚） --- */
.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-sidebar-heading {
  font-family: 'Inter', sans-serif;
  font-size: 25.987px;
  font-weight: 600;
  color: #000;
  letter-spacing: 1.039px;
  margin-bottom: 0;
  margin-left: 10px;
}

/* お問い合わせページ用FAQオーバーライド */
.contact-sidebar .faq-card {
  width: 552px;
  max-width: 100%;
}

.contact-sidebar .faq-label {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #000;
  letter-spacing: 1.032px;
}

.contact-sidebar .faq-q-text {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #000;
  line-height: 24.08px;
  letter-spacing: 0.64px;
}

.contact-sidebar .faq-a-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  line-height: 24px;
  letter-spacing: 1.12px;
}

/* --- 営業時間カード --- */
.contact-hours-card {
  width: 552px;
  max-width: 100%;
  height: 190px;
  border-radius: 18px;
  background: rgba(242, 45, 79, 0.05);
  margin-top: 10px;
  padding: 28px 32px;
  box-sizing: border-box;
}

.contact-hours-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #000;
  line-height: 25.2px;
  letter-spacing: 1.08px;
  margin-bottom: 12px;
}

.contact-hours-body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #000;
  line-height: 25.2px;
  letter-spacing: 0.96px;
  margin-bottom: 12px;
}

.contact-hours-note {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #595959;
  line-height: 24px;
  letter-spacing: 0.56px;
}

/* ============================================
   お問い合わせページ レスポンシブ（タブレット）
   ============================================ */
@media (max-width: 1512px) {
  .contact-methods {
    padding: 0 var(--site-padding-laptop);
  }

  .contact-hero {
    padding-bottom: clamp(2.5rem, 1.764rem + 1.93vw, 3.75rem);
  }

  .contact-methods-inner {
    gap: clamp(1rem, -0.331rem + 1.94vw, 1.5rem);
  }

  .contact-method-card {
    width: clamp(21.875rem, 14.89rem + 10.17vw, 24.5rem);
    height: clamp(4.875rem, 1.549rem + 4.84vw, 6.125rem);
    flex-shrink: 1;
  }

  .contact-method-icon {
    width: clamp(3.4rem, 1.138rem + 3.29vw, 4.25rem);
    height: clamp(3.4rem, 1.138rem + 3.29vw, 4.25rem);
  }

  .contact-method-label {
    font-size: clamp(1rem, 0.668rem + 0.48vw, 1.125rem);
  }

  .contact-method-sub {
    font-size: clamp(0.75rem, 0.418rem + 0.48vw, 0.875rem);
  }

  .contact-method-value {
    font-size: clamp(0.875rem, 0.543rem + 0.48vw, 1rem);
  }

  .contact-content {
    padding: 0 var(--site-padding-laptop);
    padding-bottom: 200px;
  }

  .contact-content-inner {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 1.412rem + 1.55vw, 3rem);
    max-width: 75rem;
    margin: 0 auto;
  }

  .contact-form-card {
    width: 100%;
    padding: clamp(2rem, 1.412rem + 1.55vw, 3rem);
  }

  .contact-sidebar .faq-card,
  .contact-hours-card {
    width: 100%;
  }

  .contact-form-title {
    margin-bottom: clamp(1.5rem, 1.059rem + 1.16vw, 2.25rem);
  }

  .form-group {
    margin-bottom: clamp(1.25rem, 0.956rem + 0.77vw, 1.75rem);
  }

  .wpcf7-not-valid-tip {
    margin-top: -2px;
    font-size: 12px;
  }

  .form-submit-wrap {
    margin-top: clamp(1.5rem, 1.059rem + 1.16vw, 2.25rem);
  }

  .contact-sidebar {
    gap: clamp(1rem, 0.706rem + 0.77vw, 1.5rem);
  }
}

/* ============================================
   お問い合わせページ レスポンシブ（スマホ）
   ============================================ */
@media (max-width: 1024px) {
  .contact-hero {
    padding-top: 88px;
    padding-bottom: 48px;
  }

  .contact-hero .sec-heading-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.5rem, 1.362rem + 0.56vw, 1.75rem);
    font-weight: 600;
    color: #000;
    text-align: center;
    letter-spacing: 0.96px;
  }

  .contact-hero .sec-heading-desc {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.875rem, 0.806rem + 0.28vw, 1rem);
    font-weight: 400;
    color: #000;
    text-align: center;
    line-height: 24px;
    letter-spacing: 0.56px;
    max-width: min(clamp(19.375rem, 12.843rem + 26.8vw, 31.25rem), calc(100vw - 40px));
    margin: 0 auto;
  }

  .contact-methods {
    padding: 0 var(--site-padding-sp);
    margin-bottom: clamp(1.5rem, 1.156rem + 1.41vw, 2.125rem);
  }

  .contact-methods-inner {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .contact-method-card {
    width: min(clamp(21.875rem, 13.28rem + 35.26vw, 37.5rem), calc(100vw - 40px));
    height: clamp(4.875rem, 4.187rem + 2.82vw, 6.125rem);
    border-radius: 10px;
    padding: 0 16px;
    gap: 12px;
    box-sizing: border-box;
  }

  .contact-method-icon {
    width: clamp(3.4rem, 2.932rem + 1.92vw, 4.25rem);
    height: clamp(3.4rem, 2.932rem + 1.92vw, 4.25rem);
    border-radius: 6.4px;
  }

  .contact-method-icon svg {
    width: 24px;
    height: 24px;
  }

  .contact-method-wechat-img {
    width: 32px;
  }

  .contact-method-label {
    font-size: clamp(1rem, 0.931rem + 0.28vw, 1.125rem);
    font-weight: 500;
    line-height: 20.16px;
    letter-spacing: 0.96px;
  }

  .contact-method-sub {
    font-size: clamp(0.75rem, 0.681rem + 0.28vw, 0.875rem);
    font-weight: 400;
    color: #595959;
    line-height: 20.16px;
    letter-spacing: 0.72px;
  }

  .contact-method-value {
    font-size: clamp(0.875rem, 0.806rem + 0.28vw, 1rem);
    font-weight: 500;
    color: #F22D4F;
    line-height: 20.16px;
    letter-spacing: 0.84px;
    text-decoration: underline;
    text-underline-position: from-font;
  }

  .contact-content {
    padding: 0 var(--site-padding-sp);
    padding-bottom: 130px;
  }

  .contact-content-inner {
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 1.078rem + 0.7vw, 1.563rem);
    justify-items: center;
  }

  .contact-form-card {
    width: min(clamp(21.875rem, 13.28rem + 35.26vw, 37.5rem), calc(100vw - 40px));
    min-height: auto;
    border-radius: 10px;
    padding: 24px 20px 60px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .contact-form-card .contact-form-title,
  .contact-form-card .contact-form,
  .contact-form-card .wpcf7,
  .contact-form-card .wpcf7-form {
    width: min(clamp(18.375rem, 13.356rem + 20.59vw, 27.5rem), 100%);
  }

  .contact-form-title {
    font-size: clamp(1.25rem, 1.044rem + 0.84vw, 1.624rem);
    margin-bottom: 20px;
    text-align: center;
  }

  .form-label {
    font-size: clamp(0.875rem, 0.806rem + 0.28vw, 1rem);
    font-weight: 500;
    line-height: 20.16px;
    letter-spacing: 0.96px;
    margin-bottom: 1rem;
  }

  .form-badge {
    font-size: clamp(0.75rem, 0.681rem + 0.28vw, 0.875rem);
    line-height: 20.16px;
    letter-spacing: 0.72px;
  }

  .form-badge--required {
    color: #F22D4F;
  }

  .form-badge--optional {
    color: #595959;
  }

  .form-input,
  .form-select,
  .form-textarea {
    width: 100%;
    height: clamp(3.25rem, 2.975rem + 1.13vw, 3.75rem);
    border-radius: 8px;
    border: 1px solid rgba(89, 89, 89, 0.25);
    font-size: clamp(0.875rem, 0.806rem + 0.28vw, 1rem);
    line-height: 20.16px;
    letter-spacing: 0.84px;
  }

  /* iOS Safari: position:relative + ::afterで上辺が欠けるため、矢印をselect自体のbackgroundで描画 */
  .form-select-wrap {
    position: static;
    width: 100%;
  }

  .form-select-wrap::after {
    display: none;
  }

  .form-select {
    background: #FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9' viewBox='0 0 18 9' fill='none'%3E%3Cpath d='M0.75 0.75L8.75 7.75L16.75 0.75' stroke='%231E1E1E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center;
    background-size: 18px 9px;
  }

  .form-textarea {
    height: clamp(5.375rem, 4.894rem + 1.97vw, 6.25rem);
  }

  .form-input::placeholder,
  .form-textarea::placeholder {
    font-size: clamp(0.875rem, 0.806rem + 0.28vw, 1rem);
    line-height: 20.16px;
    letter-spacing: 0.84px;
    color: #595959;
  }

  .form-submit-btn {
    width: min(clamp(18.375rem, 13.356rem + 20.59vw, 27.5rem), 100%);
    height: clamp(3rem, 2.587rem + 1.69vw, 3.75rem);
    border-radius: 38.4px;
    display: block;
    margin: 0 auto;
  }

  .form-submit-btn-text {
    font-size: clamp(0.9rem, 0.776rem + 0.51vw, 1.125rem);
    font-weight: 600;
    line-height: 20.16px;
    letter-spacing: 0.864px;
  }

  .form-note {
    width: min(clamp(16rem, 11.737rem + 17.49vw, 23.75rem), 100%);
    font-size: clamp(0.7rem, 0.604rem + 0.39vw, 0.875rem);
    font-weight: 400;
    line-height: 19.2px;
    letter-spacing: 0.448px;
    color: #595959;
    margin-top: -20px;
    margin-left: auto;
    margin-right: auto;
  }

  /* --- モバイル版 サイドバー --- */
  .contact-sidebar-heading {
    text-align: center;
    margin-left: 0;
  }

  .contact-sidebar {
    align-items: center;
    margin-top: 80px;
  }

  .contact-sidebar .faq-card {
    width: min(clamp(21.875rem, 14.93rem + 28.49vw, 34.5rem), calc(100vw - 40px));
    height: auto;
    border-radius: 10px;
    background: #FFF;
    box-sizing: border-box;
    padding-top: 22px;
    padding-bottom: 16px;
  }

  .contact-sidebar .faq-label {
    font-size: clamp(1.125rem, 0.857rem + 1.1vw, 1.613rem);
    font-weight: 500;
    color: #000;
    letter-spacing: 0.72px;
  }

  .contact-sidebar .faq-q-text {
    width: min(clamp(16.313rem, 11.534rem + 19.61vw, 25rem), 100%);
    font-size: clamp(0.875rem, 0.806rem + 0.28vw, 1rem);
    font-weight: 500;
    color: #000;
    line-height: 24px;
    letter-spacing: 0.56px;
  }

  .contact-sidebar .faq-a-text {
    width: min(clamp(16.313rem, 11.534rem + 19.61vw, 25rem), 100%);
    font-size: clamp(0.875rem, 0.806rem + 0.28vw, 1rem);
    font-weight: 400;
    color: #000;
    line-height: 24px;
    letter-spacing: 0.56px;
  }

  /* --- モバイル版 営業時間カード --- */
  .contact-hours-card {
    width: min(clamp(21.875rem, 14.93rem + 28.49vw, 34.5rem), calc(100vw - 40px));
    height: auto;
    border-radius: 10px;
    background: rgba(242, 45, 79, 0.05);
    margin-top: 48px;
  }

  .contact-hours-title {
    font-size: clamp(1.125rem, 0.857rem + 1.1vw, 1.613rem);
    font-weight: 500;
    line-height: 25.2px;
    letter-spacing: 1.08px;
    color: #000;
  }

  .contact-hours-body {
    font-size: clamp(0.875rem, 0.806rem + 0.28vw, 1rem);
    font-weight: 400;
    line-height: 25.2px;
    letter-spacing: 0.96px;
    color: #000;
  }

  .contact-hours-note {
    width: min(clamp(18.25rem, 12.818rem + 22.28vw, 28.125rem), 100%);
    font-size: clamp(0.75rem, 0.681rem + 0.28vw, 0.875rem);
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.48px;
    color: #595959;
  }
}

/* ============================================
   お問い合わせ完了ページ（page-contact-thanks）
   ============================================ */

.page-contact-thanks {
  position: relative;
  overflow-x: clip;
  isolation: isolate;
  background-color: #FEF7F8;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 175px 20px 200px;
}

.page-contact-thanks::before {
  content: '';
  position: absolute;
  top: 200px;
  left: 0;
  width: 100%;
  height: 8385px;
  background: url('assets/images/bg-pattern.svg') no-repeat center top;
  background-size: 150% auto;
  -webkit-mask-image: linear-gradient(to bottom, black 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 86%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

.thanks-content {
  text-align: center;
  max-width: 810px;
}

.thanks-icon {
  display: block;
  width: clamp(4.313rem, 3.572rem + 3.04vw, 7.219rem);
  height: auto;
  margin: 0 auto clamp(1.25rem, 1.059rem + 0.78vw, 2rem);
}

.thanks-title {
  color: #000;
  font-family: Inter, sans-serif;
  font-size: clamp(1.5rem, 1.276rem + 0.92vw, 2.375rem);
  font-weight: 600;
  line-height: normal;
  letter-spacing: 1.52px;
  margin-bottom: clamp(1rem, 0.872rem + 0.52vw, 1.5rem);
}

.thanks-desc {
  color: #000;
  font-family: Inter, sans-serif;
  font-size: clamp(0.875rem, 0.812rem + 0.26vw, 1.125rem);
  font-weight: 400;
  line-height: clamp(1.5rem, 1.373rem + 0.52vw, 2rem);
  letter-spacing: clamp(0.56px, 0.519px + 0.011vw, 0.72px);
  margin-bottom: clamp(2rem, 1.745rem + 1.05vw, 3rem);
}

.thanks-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: clamp(17.5rem, 14.95rem + 10.46vw, 27.5rem);
  height: clamp(3.25rem, 3.123rem + 0.52vw, 3.75rem);
  border-radius: 48px;
  background: #F22D4F;
  color: #FFF;
  font-family: Inter, sans-serif;
  font-size: clamp(0.875rem, 0.812rem + 0.26vw, 1.125rem);
  font-weight: 600;
  line-height: 25.2px;
  letter-spacing: 1.08px;
  text-decoration: none;
  transition: opacity 0.3s;
}

.thanks-btn:hover {
  opacity: 0.9;
}

.thanks-btn-arrow {
  font-size: 1.2em;
}

/* --- SP版 --- */
@media (max-width: 1024px) {
  .page-contact-thanks {
    min-height: auto;
    padding-top: clamp(5rem, 3.778rem + 5.01vw, 7.219rem);
    padding-bottom: 130px;
  }

  .thanks-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 34px;
    letter-spacing: 0.96px;
  }

  .thanks-desc {
    width: 310px;
    max-width: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.56px;
  }

  .thanks-btn {
    width: 294px;
    max-width: 100%;
    height: 48px;
    border-radius: 38.4px;
    font-size: 14.4px;
    font-weight: 600;
    line-height: 20.16px;
    letter-spacing: 0.864px;
  }
}

/* ============================================
   404エラーページ（page-404）
   ============================================ */

.page-404 {
  position: relative;
  overflow-x: clip;
  isolation: isolate;
  background-color: #FEF7F8;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 175px 20px 200px;
}

.page-404::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 4000px);
  background: url('assets/images/bg-pattern.svg') repeat-y center top;
  background-size: 100% auto;
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

.error-code {
  color: #F22D4F;
  font-family: Inter, sans-serif;
  font-size: clamp(4rem, 3.393rem + 2.49vw, 6.375rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 4px;
  margin-bottom: clamp(1rem, 0.872rem + 0.52vw, 1.5rem);
}

@media (max-width: 1024px) {
  .page-404 {
    min-height: auto;
    padding-top: clamp(5rem, 3.778rem + 5.01vw, 7.219rem);
    padding-bottom: 130px;
  }

  .error-code {
    font-size: 48px;
    letter-spacing: 2px;
  }
}

/* ============================================
   スマホ版: 背景パターンSVGのサイズ拡大（全ページ共通）
   100% → 150% で1パターンの高さが約1.5倍に
   ============================================ */
@media (max-width: 1024px) {
  .front-page::before {
    top: calc(100vh + 300px);
    height: 3416px;
    background: url('assets/images/bg-pattern-sp.svg') no-repeat center top;
    background-size: 110% auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .front-page::after {
    top: 6500px;
    height: 3416px;
    background: url('assets/images/bg-pattern-sp.svg') no-repeat center top;
    background-size: 110% auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* モバイル: SVGの代わりにclip-pathで斜め形状を再現 */
@media (max-width: 1024px) {
  .front-page::before,
  .front-page::after {
    background: rgba(242, 45, 79, 0.1);
    background-image: none;
    clip-path: polygon(0% 5.96%, 100% 0%, 100% 94.04%, 0% 100%);
  }
  .feature-page::before,
  .flow-page::before,
  .single-works-page::before,
  .page-price::before,
  .page-works::before,
  .page-contact::before,
  .page-contact-thanks::before {
    background: rgba(242, 45, 79, 0.1);
    background-image: none;
    clip-path: polygon(0% 5.96%, 100% 0%, 100% 94.04%, 0% 100%);
  }
}

@media (max-width: 1024px) {
  .feature-page::before {
    top: 1600px;
    height: 3416px;
    background: url('assets/images/bg-pattern-sp.svg') no-repeat center top;
    background-size: 110% auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .page-price::before {
    top: 1700px;
    height: 3416px;
    background: url('assets/images/bg-pattern-sp.svg') no-repeat center top;
    background-size: 110% auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .flow-page::before {
    top: 1700px;
    height: 3416px;
    background: url('assets/images/bg-pattern-sp.svg') no-repeat center top;
    background-size: 110% auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .page-works::before {
    top: 400px;
    height: 3416px;
    background: url('assets/images/bg-pattern-sp.svg') no-repeat center top;
    background-size: 110% auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .single-works-page::before {
    top: 400px;
    height: 3416px;
    background: url('assets/images/bg-pattern-sp.svg') no-repeat center top;
    background-size: 110% auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .page-contact::before {
    top: 300px;
    height: 3416px;
    background: url('assets/images/bg-pattern-sp.svg') no-repeat center top;
    background-size: 110% auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .page-contact-thanks::before {
    top: 200px;
    height: 3416px;
    background: url('assets/images/bg-pattern-sp.svg') no-repeat center top;
    background-size: 110% auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}