@charset "UTF-8";

/* ===================================================
   ベース・リセット
=================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --font-serif-en: 'Cormorant Garamond', Georgia, serif;
  --font-serif-jp: 'Shippori Mincho', 'Noto Serif JP', serif;
  --color-black: #111111;
  --color-text: #2a2a2a;
  --color-subtext: #555555;
  --color-accent-red: #D72626;
  --color-line: #b0b0b0;
  --color-line-light: #e0e0e0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-serif-jp);
  color: var(--color-text);
  background-color: #ffffff;
  line-height: 2.1;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
}

h2 {
  line-height: 1.2;
}

a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s ease;
}
a:hover {
  opacity: 0.7;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.container {
  width: 90%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

/* ===================================================
   ヘッダー (Header)
=================================================== */
.header {
  padding: 48px 0 80px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.logo {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* SVG画像のサイズ指定 */
.logo-img {
  width: auto;
  height: 22px;       /* 表示したいロゴの高さ（好みに応じて 20px〜28px 程度で微調整してください） */
  display: block;
  object-fit: contain;
}

/* ===================================================
   ヘッダーナビゲーション（縦並び & PRODUCTS アコーディオン）
=================================================== */

/* 1. ナビゲーション全体リスト */
.nav ul,
.nav-list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 16px; /* 通常時のメニュー間隔（HOME, SERVICE, PRODUCTS...） */
}

/* 2. メインリンク */
.nav a,
.nav-dropdown-trigger {
  display: inline-block;
  font-family: var(--font-serif-en, "Cormorant Garamond", serif);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: var(--color-black, #111111);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.25s ease;
}

/* メインリンクのホバー（赤色化） */
.nav a:hover,
.nav-item-dropdown:hover > a,
.nav-item-dropdown:hover > .nav-dropdown-trigger {
  color: var(--color-accent-red, #D72626);
}

/* ---------------------------------------------------
   3. PRODUCTS ドロップダウン（アコーディオン）
--------------------------------------------------- */
.nav-item-dropdown {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
}

/* サブメニュー外枠（通常時は完全に高さ0・完全不可視） */
.nav-submenu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  transform: translateY(-6px);
  /* 閉じる時のトランジション */
  transition: max-height 0.35s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.2s ease,
              transform 0.3s ease,
              visibility 0.35s;
}

/* ホバー時の展開（ぬるっと高さを開いて下を押し下げる） */
.nav-item-dropdown:hover .nav-submenu {
  max-height: 180px; /* 3項目が余裕で収まる高さ */
  opacity: 1;
  visibility: visible;
  padding-top: 16px !important;    /* PRODUCTSとの間隔 */
  padding-bottom: 6px !important;  /* COMPANYとの間隔 */
  transform: translateY(0);
  /* 開く時のトランジション */
  transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.3s ease 0.05s,
              transform 0.35s ease 0.05s;
}

/* ---------------------------------------------------
   4. サブメニュー内のテキスト（01. 特殊産業糸 など）
--------------------------------------------------- */
.nav-submenu li {
  margin: 0;
  padding: 0;
}

.nav-submenu a {
  display: flex;
  align-items: baseline;
  text-decoration: none;
  gap: 8px;
  transition: color 0.25s ease, transform 0.25s ease;
}

.nav-submenu a:hover {
  transform: translateX(4px);
}

/* 番号（01. 02. 03.） */
.nav-submenu .sub-num {
  font-family: var(--font-serif-jp, "Shippori Mincho", serif);
  font-size: 13px;
  color: #333333;
  letter-spacing: 0.05em;
  transition: color 0.25s ease;
}

/* 日本語テキスト */
.nav-submenu .sub-text {
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 13px;
  font-weight: 400;
  color: #333333;
  letter-spacing: 0.08em;
  transition: color 0.25s ease;
}

/* サブメニュー項目のホバー時赤色化 */
.nav-submenu a:hover .sub-text,
.nav-submenu a:hover .sub-num {
  color: var(--color-accent-red, #D72626);
}

/* ===================================================
   ヒーローステートメント
=================================================== */
.hero-statement {
  padding: 70px 0 60px;
}

.hero-title {
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
  color: var(--color-black);
}

.hero-text p {
  font-size: 0.95rem;
  color: var(--color-subtext);
  line-height: 2.2;
}

/* フルブリードイメージ */
.hero-visual {
  width: 100%;
  margin-bottom: 110px;
}

.hero-visual .full-bleed {
  width: 100%;
  height: 520px;
  filter: grayscale(85%) contrast(1.05); /* デザインカンプ特有の硬派なモノトーン調 */
}

/* ===================================================
   コンセプト (巻き屋じゃない)
=================================================== */
.concept {
  padding-bottom: 80px;
}

.concept-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  column-gap: 60px;
  align-items: flex-start;
}

.concept-title {
  font-size: 1.75rem;
  line-height: 1.6;
  font-weight: 500;
  color: var(--color-black);
}

.concept-desc p {
  font-size: 0.95rem;
  color: var(--color-subtext);
  line-height: 2.1;
  margin-bottom: 16px;
}

/* ===================================================
   縦の仕切りライン ＋ 赤ドット（遅延連動版）
=================================================== */
.divider-vertical {
  margin: 70px auto 0;
  position: relative;
  width: 9px;
  height: 99px;
}

/* 縦の直線 */
.divider-vertical .line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 90px;
  background-color: var(--color-line);
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  /* 4.8秒待ってから、1.1秒かけてピヨーんと伸びる */
  transition: transform 1.1s cubic-bezier(0.34, 1.3, 0.64, 1) 6.5s;
}

/* 赤いドット */
.divider-vertical .red-dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--color-accent-red);
  opacity: 0;
  transform: translate(-50%, 0) scale(0.6);
  /* 線と同じく4.8秒待ってから落下開始 */
  transition: transform 1.1s cubic-bezier(0.34, 1.3, 0.64, 1) 4.8s,
              opacity 0.3s ease 6.5s;
}

/* ---------------------------------------------------
   画面内に入った時
--------------------------------------------------- */
.divider-vertical.is-visible .line {
  transform: translateX(-50%) scaleY(1);
}

.divider-vertical.is-visible .red-dot {
  opacity: 1;
  transform: translate(-50%, 90px) scale(1);
}

/* ===================================================
   OUR SERVICE
=================================================== */
.service {
  padding: 80px 0 130px;
}

.service-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  column-gap: 50px;
  align-items: center;
}

.section-heading h2 {
  font-family: var(--font-serif-en, "Cormorant Garamond", serif);
  font-size: 2.2rem;
  letter-spacing: 0.13em;
  font-weight: 500;
  color: var(--color-black, #111111);
  margin: 0;
}

.section-heading .sub {
  display: block;
  font-size: 0.78rem;
  color: var(--color-subtext, #777777);
  letter-spacing: 0.08em;
  margin-top: 6px;
}

/* ---------------------------------------------------
   サービスリスト & ホバーアクション
--------------------------------------------------- */
.service-list {
  list-style: none;
  margin-top: 48px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.service-list li {
  margin: 0;
  padding: 0;
}

/* リスト全体のリンク */
.service-item-link {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* ○───── のカスタムマーカー外枠（横幅58pxで固定） */
.service-list .marker {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 58px; /* 丸(14px) + バー(44px) */
  height: 14px;
  flex-shrink: 0;
}

/* バー（右側に44px配置） */
.service-list .bar {
  position: absolute;
  left: 10px; /* 丸の中心付近からスタート */
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 1px;
  background-color: #999999;
/* バーの伸縮アニメーション */
  transition: width 0.35s cubic-bezier(0.25, 1, 0.5, 1),
              background-color 0.25s ease;
}

/* 丸（初期位置：左端） */
.service-list .circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  border: 1px solid #777777;
  border-radius: 50%;
  background-color: #ffffff;
  box-sizing: border-box;
  z-index: 1;
  /* スライド移動・色変化のトランジション */
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
              background-color 0.25s ease,
              border-color 0.25s ease;
}

/* テキストラベル */
.service-list .label {
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  color: var(--color-black, #111111);
  display: inline-block;
  transform: translateX(0);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
              color 0.25s ease;
}

/* ---------------------------------------------------
   ホバー時：丸のスライド＆赤化 ＋ テキスト右スライド
--------------------------------------------------- */
/* 1. 丸が右端へスライド（58px - 14px = 44px 移動）し、赤色に */
.service-item-link:hover .circle {
  transform: translateX(50px);
  background-color: var(--color-accent-red, #D72626);
  border-color: var(--color-accent-red, #D72626);
}

/* 2. 線が短く見えないよう、ホバー時に長さを 44px → 54px へ伸ばす */
.service-item-link:hover .bar {
  width: 54px; /* 丸の向こう側まで少し線が突き抜ける/伸びることで長さをキープ */
}

/* 2. テキストが右へ 5px スライドし、赤色に */
.service-item-link:hover .label {
  transform: translateX(5px);
  color: var(--color-accent-red, #D72626);
}

/* ---------------------------------------------------
   右側画像エリア
--------------------------------------------------- */
.service-right .image-wrapper {
  display: block;
  height: 360px;
  overflow: hidden;
  filter: grayscale(70%) contrast(1.05);
  transition: filter 0.4s ease;
}

.service-right .image-wrapper:hover {
  filter: grayscale(20%) contrast(1.02); /* ホバー時に少し色味を戻す */
}

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


/* ===================================================
   OUR PRODUCTS
=================================================== */
.products {
  padding-bottom: 180px;
}

.products .section-heading {
  margin-bottom: 50px;
}

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

.product-thumb {
  height: 220px;
  margin-bottom: 22px;
  overflow: hidden;
  filter: grayscale(80%) contrast(1.1);
  transition: filter 0.4s ease;
}


.product-name {
  text-align: center;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--color-black);
}

/* ===================================================
   下からふわっと浮上するフェードインエフェクト
=================================================== */
.fade-in-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.0s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================================
   リンク・ホバー演出
=================================================== */

/* 1. サービス画像のホバー拡大エフェクト */
.service-right .image-wrapper {
  display: block;
  overflow: hidden;
  text-decoration: none;
}
.service-right .image-wrapper img {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.service-right .image-wrapper:hover img {
  transform: scale(1.04);
}

/* 2. プロダクトカードリンク */
.products-grid .product-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s ease;
}
.products-grid .product-card:hover {
  transform: translateY(-4px);
}
.products-grid .product-thumb {
  overflow: hidden;
}
.products-grid .product-thumb img {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.products-grid .product-card:hover .product-thumb img {
  transform: scale(1.05);
}
.products-grid .product-card:hover .product-name {
  color: var(--color-accent-red, #D72626);
}

/* 3. VIEW MORE リンク（上品な矢印付き） */
.section-more-link {
  margin-top: 36px;
}
.section-more-link.center {
  margin-top: 48px;
  text-align: center;
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif-en, "Cormorant Garamond", serif);
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  color: var(--color-black, #111111);
  text-decoration: none;
  transition: color 0.3s ease, gap 0.3s ease;
}
.link-arrow svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}
.link-arrow:hover {
  color: var(--color-accent-red, #D72626);
  gap: 16px;
}
.link-arrow:hover svg {
  transform: translateX(4px);
}

/* ===================================================
   CTA（お問い合わせ導線）
=================================================== */
.cta {
  padding: 100px 0 140px;
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.cta-text {
  flex-shrink: 0;
  max-width: 580px;
}

.cta-bold {
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-black, #111111);
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.cta-sub {
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 13px;
  color: #666666;
  line-height: 1.9;
  letter-spacing: 0.04em;
  margin: 0;
}

/* ---------------------------------------------------
   左から右へピヨーんと伸びる水平ライン ＋ 赤ドット
--------------------------------------------------- */
.cta-divider {
  position: relative;
  flex: 1; /* テキストとボタンの隙間いっぱいに広がる */
  height: 9px; /* 赤ドットの直径に合わせる */
  min-width: 80px;
  display: flex;
  align-items: center;
}

/* 水平の線（左端を基点に右へ伸びる） */
.cta-divider .h-line {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  width: 100%;
  height: 1px;
  background-color: var(--color-line, #e0e0e0);
  /* 0.4秒後に0.9秒かけて弾性イージングで伸長 */
  transition: transform 0.9s cubic-bezier(0.34, 1.3, 0.64, 1) 0.4s;
}

/* 赤いドット（左端から右端へ走る） */
.cta-divider .red-dot {
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--color-accent-red, #D72626);
  opacity: 0;
  transform: translateY(-50%) scale(0.6);
  /* 線と同期して右端へ走る */
  transition: left 0.9s cubic-bezier(0.34, 1.3, 0.64, 1) 0.4s,
              transform 0.9s cubic-bezier(0.34, 1.3, 0.64, 1) 0.4s,
              opacity 0.25s ease 0.4s;
}

/* 画面内に入った時（.is-visible が付与された時） */
.cta.is-visible .cta-divider .h-line {
  transform: translateY(-50%) scaleX(1);
}

.cta.is-visible .cta-divider .red-dot {
  opacity: 1;
  left: calc(100% - 9px); /* 右端まで移動 */
  transform: translateY(-50%) scale(1);
}

/* ---------------------------------------------------
   CONTACT ボタン
--------------------------------------------------- */
.cta-button-box {
  flex-shrink: 0;
}

.btn-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  padding: 16px 36px;
  background-color: #111111;
  color: #ffffff;
  border: 1px solid #111111;
  font-family: var(--font-serif-en, "Cormorant Garamond", serif);
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.25s ease;
}

.btn-contact:hover {
  background-color: var(--color-accent-red, #D72626);
  border-color: var(--color-accent-red, #D72626);
  transform: translateY(-2px);
}

/* ---------------------------------------------------
   レスポンシブ対応
--------------------------------------------------- */
@media (max-width: 960px) {
  .cta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .cta-divider {
    width: 100%;
  }
  .cta-button-box {
    align-self: flex-start;
  }
}

/* ===================================================
   フッター (Footer)
=================================================== */
.footer {
  padding: 60px 0 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid transparent;
}

.footer-nav {
  list-style: none;
  display: flex;
  gap: 48px;
}

.footer-nav a {
  font-family: var(--font-serif-en);
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  color: var(--color-black);
  transition: color 0.25s ease, opacity 0.25s ease;
}

/* マウスオーバー時に赤色にする */
.footer-nav a:hover {
  color: var(--color-accent-red);
  opacity: 1; /* 全体のリンクで指定していた半透明化を解除し、赤色を鮮明に見せる */
}
/* ===================================================
   レスポンシブ (タブレット・スマートフォン対応)
=================================================== */
@media (max-width: 900px) {
  .concept-grid,
  .service-grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .service-right .image-wrapper {
    height: 300px;
  }

  .products-grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .cta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .cta-divider {
    display: none; /* スマホではラインを非表示にして整列 */
  }

  .btn-contact {
    width: 100%;
  }

  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
  }

  .footer-nav {
    flex-wrap: wrap;
    gap: 24px;
  }
}


/* ===================================================
   ヒーロービジュアル（タイトル SERVICE）
=================================================== */
.service-hero {
  position: relative;
  width: 100%;
  margin-bottom: 90px;
}

.service-hero-img-wrap {
  position: relative;
  width: 100%;
  height: 380px;
}

.service-hero-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(85%) contrast(1.1);
}

.service-hero-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
}

.service-hero-title {
  font-family: var(--font-serif-en);
  font-size: 2.4rem;
  letter-spacing: 0.2em;
  color: #ffffff;
  font-weight: 400;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}


/* 外枠のサイズ */
.stripe-animation-wrap {
  width: 30px;
  height: 300px;
  display: inline-block;
  overflow: hidden;
}

.stripe-lines-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 全ラインの共通設定 */
.s-line {
stroke-width: 2px;
  transition: stroke 0.15s ease;
  animation: scanLine 2.4s infinite ease-in-out;
}

/* 1本だけが赤になり、すぐグレーに戻るキーフレーム */
@keyframes scanLine {
  0%, 8% {
    stroke: #D72626; /* 赤 */
  }
  16%, 100% {
    stroke: #999999; /* グレー */
  }
}

/* 
   上から下へ降りて、下から上へ戻る（往復）ディレイ設定
   全12本：片道約1.1秒、折り返し往復
*/
.l-1  { animation-delay: 0.0s; }
.l-2  { animation-delay: 0.1s; }
.l-3  { animation-delay: 0.2s; }
.l-4  { animation-delay: 0.3s; }
.l-5  { animation-delay: 0.4s; }
.l-6  { animation-delay: 0.5s; }
.l-7  { animation-delay: 0.6s; }
.l-8  { animation-delay: 0.7s; }
.l-9  { animation-delay: 0.8s; }
.l-10 { animation-delay: 0.9s; }
.l-11 { animation-delay: 1.0s; }
.l-12 { animation-delay: 1.1s; }
/* ===================================================
   事業内容 目次リスト
=================================================== */
.service-index {
  padding-bottom: 120px;
}

.service-index-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-black);
  margin-bottom: 36px;
  letter-spacing: 0.08em;
}

.service-bullet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.service-bullet-list li {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 0.95rem;
  color: var(--color-black);
}

.bullet-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.bullet-dot.is-red {
  background-color: var(--color-accent-red);
}

.bullet-dot.is-gray {
  background-color: #555555;
}

/* ===================================================
   事業内容 目次リスト（ホバーアクション）
=================================================== */

/* リスト項目全体をホバー可能にし、カーソルをポインターに */
.service-bullet-list li {
  cursor: pointer;
}

/* ドットの色変化を滑らかにする */
.bullet-dot {
  transition: background-color 0.25s ease;
}

/* テキストのスライド変化を滑らかにする */
.service-bullet-list .text {
  display: inline-block; /* transformを適用するためにインラインブロック化 */
  transition: transform 0.25s ease, color 0.25s ease;
	padding-left: 10px;
}

/* ---------------------------------
   ホバー時（li:hover）の挙動
--------------------------------- */

/* ドットを赤色に変化 */
.service-bullet-list li:hover .bullet-dot {
  background-color: var(--color-accent-red); /* または #D72626 */
}

/* テキストを右へ5pxスライド（お好みで文字色も濃く） */
.service-bullet-list li:hover .text {
  transform: translateX(5px);
  color: var(--color-black);
}
/* ===================================================
   サービス詳細ブロック（重なりグラフィック＋テキスト）
=================================================== */
.service-details {
  display: flex;
  flex-direction: column;
  gap: 160px;
  padding-bottom: 20px;
}

.service-block {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  column-gap: 80px;
  align-items: center;
}

/* 偶数番目のブロックは左右反転 */
.service-block.is-reverse {
  grid-template-columns: 1.6fr 1fr;
}
.service-block.is-reverse .service-block-graphic {
  order: 2;
}
.service-block.is-reverse .service-block-content {
  order: 1;
}



/* ===================================================
   サービスグラフィック（SVG読み込み用）
=================================================== */
.service-block-graphic {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.service-graphic-img {
  width: 250px;      /* デザインカンプに合わせた適正サイズ */
  height: auto;
  display: block;
}

/* スマホ表示時 */
@media (max-width: 900px) {
  .service-graphic-img {
    width: 200px;    /* モバイル画面に合わせて少し縮小 */
  }
}


/* 縦書き指定 */
.keyword-text.vertical-rl {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

/* テキスト部分 */
.service-item-title {
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--color-black);
  margin-bottom: 24px;
  letter-spacing: 0.06em;
}

.service-item-title .num {
  font-family: var(--color-black);
  font-size: 1.8rem;
  margin-right: 6px;
}

.service-lead {
  font-size: 1.05rem;
  color: #333333;
  margin-bottom: 16px;
  font-weight: 500;
}

.service-body p {
  font-size: 0.88rem;
  color: var(--color-subtext);
  line-height: 2.2;
  margin-bottom: 14px;
}

/* ===================================================
   COMPANY（会社概要）
=================================================== */
.company {
  padding-bottom: 140px;
}

.company-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  column-gap: 60px;
  align-items: center;
}

.company-name {
  font-size: 1.05rem;
  font-weight: 500;
  margin: 36px 0 32px;
  color: var(--color-black);
  letter-spacing: 0.08em;
}

.company-address-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.address-item {
  display: flex;
  font-size: 0.88rem;
  color: var(--color-subtext);
  line-height: 1.8;
}

.address-item dt {
  width: 90px;
  color: var(--color-black);
}

.company-photo .image-wrapper {
  height: 260px;
  filter: grayscale(90%) contrast(1.1);
}

/* ===================================================
   コピーライト (Copyright)
=================================================== */
.copyright {
  padding: 0 0 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 左寄せにして並べる */
  gap: 24px;
  flex-wrap: wrap;
}

.copyright p {
  font-size: 0.65rem;
  color: dimgray;
  letter-spacing: 0.08em;
  margin: 0;
  display: flex;
  align-items: center;
}

.copyright p:last-child::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 9px;
  background-color: #cccccc;
  margin-right: 24px;
}

.copyright p a {
  color: dimgray;
  text-decoration: none;
  transition: color 0.25s ease;
}

.copyright p a:hover {
  color: var(--color-accent-red, #D72626);
}

@media (max-width: 768px) {
  .copyright {
    gap: 16px;
    padding-bottom: 40px;
  }

  .copyright p:last-child::before {
    margin-right: 16px;
  }
}

/* ---------------------------------------------------
   レスポンシブ（スマホ対応）
--------------------------------------------------- */
@media (max-width: 768px) {
  .copyright {
    gap: 16px;
    padding-bottom: 40px;
  }

  .copyright p:last-child::before {
    margin-right: 16px;
  }
}

/* ---------------------------------------------------
   レスポンシブ対応（スマホ画面）
--------------------------------------------------- */
@media (max-width: 768px) {
  .copyright {
    flex-direction: column-reverse; /* スマホではポリシーを上、コピーライトを下にしてバランスを整える場合 */
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 40px;
  }
}

/* ===================================================
   レスポンシブ (スマホ・タブレット)
=================================================== */
@media (max-width: 900px) {
  .service-block,
  .service-block.is-reverse {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .service-block.is-reverse .service-block-graphic {
    order: 0;
  }
  .service-block.is-reverse .service-block-content {
    order: 1;
  }

  .diagonal-stripes {
    display: none;
  }

  .company-grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
}

/* ===================================================
   事業内容 目次リストのフェードインアニメーション
=================================================== */
/* セクション見出し（h2）のフェードイン準備 */
.service-index-title {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

/* 各リスト項目（li）の初期状態 */
.service-bullet-list li {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), 
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* 表示状態（親要素に .is-visible が付与されたとき） */
.service-index.is-visible .service-index-title {
  opacity: 1;
  transform: translateY(0);
}

.service-index.is-visible .service-bullet-list li {
  opacity: 1;
  transform: translateY(0);
}

/* 1項目ずつ順番に遅れて動くディレイ設定 */
.service-index.is-visible .service-bullet-list li:nth-child(1) {
  transition-delay: 0.15s;
}
.service-index.is-visible .service-bullet-list li:nth-child(2) {
  transition-delay: 0.3s;
}
.service-index.is-visible .service-bullet-list li:nth-child(3) {
  transition-delay: 0.45s;
}
.service-index.is-visible .service-bullet-list li:nth-child(4) {
  transition-delay: 0.6s;
}

/* ===================================================
   事業詳細01〜04タイプライター風テキストアニメーション
=================================================== */

.typewriter-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  will-change: opacity, transform;
  /* 0.4秒かけて柔らかく着地 */
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 表示時 */
.service-block.is-visible .typewriter-char,
.hero-statement.is-visible .typewriter-char,
.concept-grid.is-visible .typewriter-char {
  opacity: 1;
  transform: translateY(0);
}

/* 必要に応じてカーソルの点滅をつけたい場合（オプション） */
.typewriter-target.is-typing::after {
  content: "|";
  display: inline-block;
  margin-left: 2px;
  color: var(--color-accent-red);
  animation: blinkCursor 0.7s infinite;
}

@keyframes blinkCursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ===================================================
   SERVICE SVGグラフィックのフェードインアニメーション
=================================================== */

/* 1. 01 & 03（通常：SVGが左側にあるブロック）
   初期状態：透明 ＋ 左に40pxズレ */
.service-block .service-block-graphic {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* 2. 02 & 04（反転：SVGが右側にあるブロック）
   初期状態：透明 ＋ 下に40pxズレ */
.service-block.is-reverse .service-block-graphic {
  transform: translateY(40px);
}

/* 3. 画面内に入った時（.is-visible が付与された時）
   元の位置（0, 0）に戻り、不透明度を 1 にする */
.service-block.is-visible .service-block-graphic {
  opacity: 1;
  transform: translate(0, 0);
}
/* ===================================================
   水たまりカーソル & 波紋エフェクト
=================================================== */
.cursor-puddle {
  position: fixed;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  pointer-events: none;
  z-index: 9999;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  background: radial-gradient(
    circle at 35% 35%,
    rgba(215, 38, 38, 0.08) 0%,
    rgba(230, 235, 240, 0.45) 50%,
    rgba(200, 210, 220, 0.25) 100%
  );
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.8),
    0 8px 20px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(2px);
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
  animation: puddleMorph 6s infinite ease-in-out;
  opacity: 0;
}

@keyframes puddleMorph {
  0% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  34% {
    border-radius: 40% 60% 65% 35% / 40% 45% 55% 60%;
  }
  67% {
    border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
  }
  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
}

.cursor-puddle.is-hover {
  width: 75px;
  height: 75px;
  background: radial-gradient(
    circle at 35% 35%,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(215, 225, 235, 0.5) 60%,
    rgba(180, 195, 210, 0.3) 100%
  );
}

.water-ripple {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  border: 1px solid rgba(0, 0, 0, 0.2); /* ← ここを変更（上品な半透明の黒/グレー） */
  transform: translate(-50%, -50%) scale(0);
  animation: rippleExpand 0.75s ease-out forwards;
}

@keyframes rippleExpand {
  0% {
    width: 20px;
    height: 20px;
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(0.2);
  }
  100% {
    width: 120px;
    height: 120px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (hover: none) and (pointer: coarse) {
  .cursor-puddle, .water-ripple {
    display: none !important;
  }
}

/* ヘッダーナビ上にカーソルがある時は小さく目立たなくする */
.cursor-puddle.is-mini {
  width: 20px;
  height: 20px;
  opacity: 0.6; /* 邪魔にならないよう透明度も少し上げる */
  background: rgba(200, 210, 220, 0.4);
  box-shadow: none; /* 影を消して文字の視認性を確保 */
}
/* ===================================================
   COMPANY ページ専用スタイル
=================================================== */

.company-page-content {
  padding-top: 100px;
  padding-bottom: 160px;
}

/* 各セクション */
.company-section {
  margin-bottom: 120px;
}
.company-section:last-child {
  margin-bottom: 0;
}

/* セクション見出し（会社概要 / 協力工場） */
.company-section-title {
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-text, #111111);
  letter-spacing: 0.1em;
  line-height: 1.2;
  margin: 0;
  padding-bottom: 24px;
  border-bottom: 1px solid #e0e0e0; /* 見出し下の極細仕切り線 */
}

/* テーブルを右側にオフセットするラッパー */
.company-table-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* 情報テーブル本体（定義リスト） */
.company-info-table {
  width: 82%; /* カンプ画像に合わせた左余白のバランス（約18%空ける） */
  margin: 0;
  padding: 0;
}

/* 各行のスタイル */
.company-info-table .table-row {
  display: flex;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid #eeeeee; /* 行間の淡いグレーの境界線 */
}

/* 項目名（左カラム） */
.company-info-table dt {
  width: 32%;
  min-width: 160px;
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  letter-spacing: 0.05em;
  margin: 0;
}

/* 内容（右カラム） */
.company-info-table dd {
  flex: 1;
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 14px;
  font-weight: 400;
  color: #222222;
  letter-spacing: 0.04em;
  line-height: 1.8;
  margin: 0;
}

/* ---------------------------------------------------
   レスポンシブ対応（タブレット・スマートフォン）
--------------------------------------------------- */
@media (max-width: 768px) {
  .company-page-content {
    padding-top: 60px;
    padding-bottom: 100px;
  }

  .company-section {
    margin-bottom: 80px;
  }

  .company-section-title {
    font-size: 19px;
    padding-bottom: 16px;
  }

  .company-table-wrap {
    margin-top: 16px;
  }

  .company-info-table {
    width: 100%; /* スマホでは全幅に広げる */
  }

  .company-info-table .table-row {
    flex-direction: column; /* 縦並びにする */
    padding: 16px 0;
    gap: 6px;
  }

  .company-info-table dt {
    width: 100%;
    font-size: 13px;
    color: #777777; /* 見出しを少し控えめに */
  }

  .company-info-table dd {
    font-size: 14px;
  }
}

/* ===================================================
   PRODUCTS ページ専用スタイル
=================================================== */

.products-page-content {
  padding-top: 100px;
  padding-bottom: 160px;
}

/* ページ見出し（製品情報） */
.products-page-title {
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-text, #111111);
  letter-spacing: 0.1em;
  margin: 0;
  padding-bottom: 24px;
  border-bottom: 1px solid #e0e0e0;
}

/* 01. 特殊産業糸 セクション */
.products-section {
  margin-top: 70px;
}

#special-yarn,
#import-yarn,
#overseas-procurement,
.products-section {
  scroll-margin-top: 100px; /* 固定ヘッダーの高さ（約70〜80px）＋ 余白分（約20〜30px） */
}

.products-category-title {
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 22px;
  font-weight: 400;
  color: #111111;
  letter-spacing: 0.08em;
  margin-bottom: 24px;
}

.products-category-title .num {
  font-family: var(--font-serif-jp, "Shippori Mincho", serif);
  font-size: 28px;
  margin-right: 4px;
}

.category-lead-text p {
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 14px;
  color: #333333;
  line-height: 2.1;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.category-lead-text p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------
   アコーディオン（自社開発・自社生産）
--------------------------------------------------- */
.product-accordion-list {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 32px; /* ブロック同士の間隔 */
}

.product-accordion-item {
  background-color: #ECEEEF; /* カンプのライトグレー背景 */
  transition: background-color 0.3s ease;
}

/* クリックするバー（ヘッダー） */
.product-accordion-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 32px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.accordion-title {
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 16px;
  font-weight: 400;
  color: #111111;
  letter-spacing: 0.08em;
  transition: color 0.25s ease;
}

.product-accordion-header:hover .accordion-title {
  color: var(--color-accent-red, #D72626);
}

/* 矢印アイコン */
.accordion-arrow {
  width: 32px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.accordion-arrow svg {
  width: 100%;
  height: 100%;
}

/* 開いた状態の矢印（180度回転） */
.product-accordion-item.is-open .accordion-arrow {
  transform: rotate(180deg);
}

/* ---------------------------------------------------
   ぬるっと広がる展開領域（CSS Grid 方式）
--------------------------------------------------- */
.product-accordion-body {
  display: grid;
  grid-template-rows: 0fr; /* 初期状態は高さ0 */
  transition: grid-template-rows 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.product-accordion-item.is-open .product-accordion-body {
  grid-template-rows: 1fr; /* 開いた時は中身の高さへ */
}

.product-accordion-inner {
  min-height: 0;
  overflow: hidden;
}

/* 開いた中身のレイアウト */
.product-detail-card {
  display: flex;
  gap: 40px;
  padding: 10px 32px 36px 32px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.35s ease;
}

.product-accordion-item.is-open .product-detail-card {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

/* 左：画像プレースホルダー（正方形〜縦長） */
.product-image-box {
  width: 280px;
  height: 200px;
  flex-shrink: 0;
  background-color: #7A8996; /* カンプ画像通りのブルーグレー */
  overflow: hidden;
}

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

/* 右：説明文エリア */
.product-info-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.product-info-box p {
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 14px;
  color: #222222;
  line-height: 2;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.product-info-box p:last-child {
  margin-bottom: 0;
}

/* 主な用途のタグ */
.product-tag-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}

.product-tag-label {
  display: inline-block;
  padding: 4px 12px;
  background-color: #555B62; /* 濃いグレーのバッジ */
  color: #ffffff;
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 12px;
  letter-spacing: 0.06em;
	white-space: nowrap; /* テキストの折り返しを禁止 */
  flex-shrink: 0;      /* 横幅が狭められるのを防ぐ */
}

.product-tag-desc {
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 13px;
  color: #333333;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------
   レスポンシブ対応（スマホ・タブレット）
--------------------------------------------------- */
@media (max-width: 768px) {
  .product-accordion-header {
    padding: 18px 20px;
  }
  .product-detail-card {
    flex-direction: column;
    padding: 8px 20px 28px 20px;
    gap: 20px;
  }
  .product-image-box {
    width: 100%;
    height: 200px;
  }
  .product-tag-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* 注釈文（※マーク） */
.product-annotation {
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 12px !important;
  color: #666666 !important;
  margin-top: 14px !important;
  line-height: 1.6 !important;
}

/* セクション間の間隔（01と02の間） */
.products-section + .products-section {
  margin-top: 100px;
}

/* ===================================================
   CONTACT ページ専用スタイル
=================================================== */

.contact-page-content {
  padding-top: 30px;
  padding-bottom: 160px;
}

.contact-section-title {
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-text, #111111);
  letter-spacing: 0.1em;
  margin: 0;
  padding-bottom: 24px;
  border-bottom: 1px solid #e0e0e0;
}

/* フォームを右側にインデント配置 */
.contact-form-wrap {
	width: 100%;
	max-width: 760px;
	margin: 40px auto 0;
  }

.contact-lead {
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 14px;
  color: #555555;
  line-height: 2;
  letter-spacing: 0.04em;
  margin-bottom: 48px;
}

/* ---------------------------------------------------
   各入力行（テーブル調の極細ボーダー分割）
--------------------------------------------------- */
.form-row {
  display: flex;
  align-items: flex-start;
  padding: 24px 0;
  border-bottom: 1px solid #eeeeee;
}

.form-label {
  width: 30%;
  min-width: 160px;
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.05em;
  padding-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 必須・任意バッジ */
.badge-required {
  font-size: 10px;
  color: #ffffff;
  background-color: var(--color-accent-red, #D72626);
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 0.05em;
}

.badge-optional {
  font-size: 10px;
  color: #777777;
  background-color: #f0f0f0;
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 0.05em;
}

.form-input-wrap {
  flex: 1;
}

/* 入力フィールドのベーススタイル */
.form-input-wrap input[type="text"],
.form-input-wrap input[type="email"],
.form-input-wrap input[type="tel"],
.form-input-wrap select,
.form-input-wrap textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #dddddd;
  background-color: #fafafa;
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 14px;
  color: #222222;
  box-sizing: border-box;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.form-input-wrap input:focus,
.form-input-wrap select:focus,
.form-input-wrap textarea:focus {
  outline: none;
  border-color: #111111;
  background-color: #ffffff;
}

.form-input-wrap textarea {
  resize: vertical;
}

/* ---------------------------------------------------
   reCAPTCHA & 送信ボタン
--------------------------------------------------- */
.form-row-recaptcha {
  border-bottom: none;
  padding-top: 32px;
}

.form-privacy {
  margin-top: 24px;
  text-align: center;
}

.privacy-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 13px;
  color: #444444;
  cursor: pointer;
}

.privacy-label a {
  color: #111111;
  text-decoration: underline;
}

.form-submit-wrap {
  margin-top: 40px;
  text-align: center;
}

.submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 60px;
  background-color: #111111;
  color: #ffffff;
  border: 1px solid #111111;
  font-family: var(--font-serif-en, "Cormorant Garamond", serif);
  font-size: 1.15rem;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

.submit-button svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.submit-button:hover {
  background-color: var(--color-accent-red, #D72626);
  border-color: var(--color-accent-red, #D72626);
}

.submit-button:hover svg {
  transform: translateX(4px);
}

/* ---------------------------------------------------
   レスポンシブ（スマートフォン・タブレット）
--------------------------------------------------- */
@media (max-width: 768px) {
  .contact-page-content {
    padding-top: 60px;
    padding-bottom: 100px;
  }

  .contact-form-wrap {
    width: 100%;
    max-width: 760px; /* 横に広がりすぎず、読みやすい適度な横幅に制限 */
  　margin: 40px auto 0; /* 左右 auto で完全中央配置 */
  }

  .form-row {
    flex-direction: column;
    gap: 10px;
    padding: 18px 0;
  }

  .form-label {
    width: 100%;
    padding-top: 0;
  }

  .form-row-recaptcha .form-label {
    display: none;
  }
.form-row-recaptcha .form-input-wrap {
  display: flex;
  justify-content: center;
}
  .submit-button {
    width: 100%;
  }
}

/* ===================================================
   トップへ戻るボタン（右下固定・ミニマル）
=================================================== */

/* ページ全体のスクロール挙動をスムーズに設定 */
html {
  scroll-behavior: smooth;
}

.page-top-btn {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--color-black, #111111);
  text-decoration: none;
  /* 初期状態：透明＆少し下へオフセット */
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              visibility 0.4s,
              color 0.25s ease;
}

/* スクロールして表示された状態 */
.page-top-btn.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 上向きの繊細な矢印アイコン */
.page-top-arrow {
  display: block;
  width: 12px;
  height: 18px;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.page-top-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 「TOP」英字ラベル */
.page-top-text {
  font-family: var(--font-serif-en, "Cormorant Garamond", serif);
  font-size: 11px;
  letter-spacing: 0.15em;
  font-weight: 400;
}

/* ---------------------------------------------------
   ホバー時：赤化 ＆ 矢印が少し上に浮く
--------------------------------------------------- */
.page-top-btn:hover {
  color: var(--color-accent-red, #D72626);
}

.page-top-btn:hover .page-top-arrow {
  transform: translateY(-4px);
}

/* ---------------------------------------------------
   レスポンシブ対応
--------------------------------------------------- */
@media (max-width: 768px) {
  .page-top-btn {
    right: 20px;
    bottom: 24px;
  }
}
/* ===================================================
   PRIVACY POLICY ページスタイル
=================================================== */

.page-privacy {
  background-color: var(--color-bg, #ffffff);
  color: var(--color-text, #333333);
}

/* ヒーローエリア */
.privacy-hero {
  padding-top: 10px;
  padding-bottom: 30px;
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-text, #111111);
  letter-spacing: 0.1em;
  border-bottom: 1px solid #e0e0e0;
}
.privacy-subtitle {
  font-family: var(--font-serif-en, "Cormorant Garamond", serif);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: #888888;
  margin-bottom: 8px;
}

.privacy-title {
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-black, #111111);
}

/* 本文エリア */
.privacy-content {
  padding-top: 60px;
  padding-bottom: 120px;
}

.privacy-inner {
  max-width: 800px;
  margin: 0 auto;
}

.privacy-lead {
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 14px;
  line-height: 2.1;
  color: #555555;
  letter-spacing: 0.03em;
  margin-bottom: 50px;
}

/* 各条項セクション */
.privacy-section {
  margin-bottom: 44px;
}

.privacy-h2 {
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-black, #111111);
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.privacy-h2 .num {
  font-family: inherit; /* 数字のフォントブレを防止 */
  font-size: 14px;
  color: #888888;
}

.privacy-section p {
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 13.5px;
  line-height: 2;
  color: #555555;
  letter-spacing: 0.03em;
  margin-bottom: 12px;
}

/* 箇条書き */
.privacy-list {
  list-style: none;
  padding-left: 0;
  margin: 12px 0;
}

.privacy-list li {
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 13px;
  line-height: 1.9;
  color: #555555;
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
}

.privacy-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: #888888;
}

/* 窓口ブロック */
.privacy-contact-box {
  background-color: #fafafa;
  padding: 30px 32px;
  border: 1px solid #eeeeee;
  margin-top: 50px;
}

.privacy-address {
  margin-top: 16px;
}

.privacy-address p {
  margin-bottom: 6px;
  font-size: 13px;
}

.privacy-address a {
  color: #111111;
  text-decoration: underline;
  transition: color 0.25s ease;
}

.privacy-address a:hover {
  color: var(--color-accent-red, #D72626);
}

/* 制定日表示 */
.privacy-date {
  margin-top: 60px;
  text-align: right;
  font-family: var(--font-serif-jp, "Shippori Mincho", "Noto Serif JP", serif);
  font-size: 12.5px;
  color: #888888;
  line-height: 1.8;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .privacy-hero {
    padding-top: 20px;
    padding-bottom: 40px;
  }
  .privacy-title {
    font-size: 22px;
  }
  .privacy-content {
    padding-top: 40px;
    padding-bottom: 80px;
  }
  .privacy-contact-box {
    padding: 24px 20px;
  }
}