:root {
  /* カラー設計 */

  /* ベースカラー */
  --color-white: #ffffff;
  --color-black: #000000;

  /* 透明度付き（10%刻み） */
  --color-black-10: rgba(0, 0, 0, 0.1);
  --color-black-20: rgba(0, 0, 0, 0.2);
  --color-black-30: rgba(0, 0, 0, 0.3);
  --color-black-40: rgba(0, 0, 0, 0.4);
  --color-black-50: rgba(0, 0, 0, 0.5);
  --color-black-60: rgba(0, 0, 0, 0.6);
  --color-black-70: rgba(0, 0, 0, 0.7);
  --color-black-80: rgba(0, 0, 0, 0.8);
  --color-black-90: rgba(0, 0, 0, 0.9);

  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-white-40: rgba(255, 255, 255, 0.4);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-white-70: rgba(255, 255, 255, 0.7);
  --color-white-80: rgba(255, 255, 255, 0.8);
  --color-white-90: rgba(255, 255, 255, 0.9);

  /* メインカラーと目的別カラー */
  --main-color: #0060b0;
  --main-color-light: #66a7d9;
  --main-color-dark: #022d52;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-accent: #17a2b8;
  --page-header-bg: #F7F7F7;
  --page-header-line: #b4b4b4;

  /* 識別カラー */
  /* 音響 */
  --color-acoustic: #ea5439;
  --icon-acoustic: url('/assets/images/common/icon_acoustic.svg');
  /* 振動 */
  --color-vibration: #d5aa63;
  --icon-vibration: url('/assets/images/common/icon_vibration.svg');
  /* 衝撃 */
  --color-shock: #8ec31e;
  --icon-shock: url('/assets/images/common/icon_shock.svg');
  /* 加速度 */
  --color-acceleration: #58bdec;
  --icon-acceleration: url('/assets/images/common/icon_acceleration.svg');
  /* 熱真空 */
  --color-thermal-vacuum: #f8b500;
  --icon-thermal-vacuum: url('/assets/images/common/icon_thermal-vacuum.svg');
  /* 電波・磁気（共通の背景色） */
  --color-radio-magnetic: #ba8dbd;
  --icon-radio: url('/assets/images/common/icon_radio.svg');
  --icon-magnetic: url('/assets/images/common/icon_magnetic.svg');
  --icon-radio-magnetic: url('/assets/images/common/icon_radio-magnetic.svg');

/* 機能・性能（共通の背景色） */
--color-function-performance: #00a29a;
--icon-function: url('/assets/images/common/icon_function.svg');
--icon-performance: url('/assets/images/common/icon_performance.svg');
--icon-function-performance: url('/assets/images/common/icon_function-performance.svg');


  /* フォントサイズ　PC */
  --h1: 2.5rem;      /* 40px */
  --h2: 1.875rem;    /* 30px */
  --h3: 1.5rem;      /* 24px */
  --h4: 1.25rem;     /* 20px */
  --h5: 1.125rem;    /* 18px */
  --h6: 1rem;        /* 16px */

  /* 行間設定 */
  --line-height-tight: 1.4;     /* 見出し用 */
  --line-height-normal: 1.7;    /* 本文用 */
  --line-height-relaxed: 1.9;   /* リード文用 */

  /* パーツ */
  --bg-base: var(--color-white);
  --text-primary: var(--color-black);

  /* 基本フォントサイズ（1rem = 15px） */
  --font-size-base: 1rem;
  /* = 15px */
  --font-size-small: 0.875rem;
  /* = 13.125px */
  --font-size-large: 1.125rem;
  /* = 16.875px */

  /* レイアウト最大幅 */
  --max-width-main: 1240px;
  /* BtoB用途に合わせた親会社仕様 */

  /* フォントファミリー（日本語） */
  --font-family-jp: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}

/* メディアクエリ：モバイル用フォントサイズ */
@media (max-width: 768px) {
  :root {
    --h1: 1.875rem;    /* 30px */
    --h2: 1.5rem;      /* 24px */
    --h3: 1.25rem;     /* 20px */
    --h4: 1.125rem;    /* 18px */
    --h5: 1rem;        /* 16px */
    --h6: 0.9375rem;   /* 15px */
  }
}

/* メディアクエリ：レスポンシブ対応 */
@media (max-width: 1038px) {
  .container {
    padding: 0 1rem;
  }
}

/* PCとSPの表示切替 */
@media (min-width: 769px){
  .sp{
    display: none !important;
  }
} 
@media (max-width: 768px) {
  .pc{
    display: none !important;
  }
}
body {
  font-family: var(--font-family-jp);
  font-size: var(--font-size-base);
  color: var(--color-black-90);
}

/* 見出しの行間 */
h1, h2, h3, h4, h5, h6 {
  line-height: var(--line-height-tight);
}

/* 本文の行間 */
p, li {
  line-height: var(--line-height-normal);
}

/* 余白ゼロ＆全幅の基本設定 */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* スクロールバーの表示で横ズレが出ないように */
html { overflow-y: scroll; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

.inner {
  max-width: var(--max-width-main);
  /* = 1038px */
  margin: 0 auto;
  padding: 0 1rem;
}

/* トップに戻るボタン */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  background-color: var(--main-color);
  color: #fff;
  border-radius: 50%;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 4px 12px rgba(11, 61, 145, 0.3);
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(11, 61, 145, 0.4);
}
.back-to-top:hover span{
  margin-bottom: 0.8rem;
  transition: 0.4s;
}
/* モバイル対応 */
@media (max-width: 768px) {
  .back-to-top {
    width: 45px;
    height: 45px;
    bottom: 1.5rem;
    right: 1.5rem;
    font-size: 1.125rem;
  }
}

/* メニュー構成 */
.header-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.header-menu a {
  text-decoration: none;
  color: var(--text-primary);
  font-weight: bold;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .header-menu {
    flex-direction: column;
  }
}

/* 各ページのページヘッダ ======================================*/
.page-header{
  background: var(--page-header-bg);
  border-bottom: 1px solid var(--page-header-line);
  margin-bottom: 3rem;
}

/* パンくずリスト */
.breadcrumb{
  margin-bottom: 4rem;
}
.breadcrumb ol{
  list-style: none;
  display: flex;
  gap: 0.2rem;
  margin-bottom: 2rem;
}
.breadcrumb li:after{
  content: ">";
}
.breadcrumb li:last-child:after{
  content: none;
}
.breadcrumb li{
  font-size: 90%;
}

/* ページのタイトル */
.page-title h1{
  font-size: var(--h1);
  padding-bottom: 50px;
  margin-bottom: 50px;
  position: relative;
}
.page-title h1:after,
.page-title h1:before{
  content: "";
  position: absolute;
  display: block;
  width: 37px;
  height: 12px;
}
.page-title h1::after{
    background: var(--main-color);
    bottom: 0;
    left: 0;
}
.page-title h1::before{
  background: var(--color-black);
  bottom: 0;
  left: 37px;
}
.page-description{
  font-size: var(--h5);
  line-height: var(--line-height-relaxed);
  margin-bottom: 3rem;
}


/* 汎用コンテンツボックス */
.content-box {
  margin-bottom: 48px;
  border-left: 1px solid #ccc; /* グレーの細い線 */
  padding: 20px 23px; /* 線とコンテンツの間隔 */
}

.content-box__title {
  position: relative;
  font-size: var(--h2);
  font-weight: 600;
  color: #333;
  margin: 0 0 24px;
  padding-left: 0px;
  line-height: var(--line-height-tight);
  opacity: 0; /* 初期状態：透明 */
  transform: translateY(20px); /* 初期位置：少し下 */
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
.content-box__content p{
  margin-bottom: 1rem;
}

/* Figure Layout Styles */
/* 中央配置 - 最大80%表示（小さい画像は元サイズのまま） */
.content-box__content figure.img-center {
  width: 100%;
  margin: 2rem auto;
  text-align: center;
}

.content-box__content figure.img-center img {
  max-width: 80%;
  height: auto;
  max-height: 600px;
}

.content-box__content figure.img-center figcaption {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: #666;
  text-align: center;
}

/* 左配置 - PC: 40%, Mobile: 100% */
.content-box__content figure.img-left {
  width: 100%;
  margin: 1rem 0;
}

.content-box__content figure.img-left img {
  max-width: 100%;
  max-height: 400px;
}

.content-box__content figure.img-left figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #666;
}

/* 右配置 - PC: 40%, Mobile: 100% */
.content-box__content figure.img-right {
  width: 100%;
  margin: 1rem 0;
  text-align: center;
}

.content-box__content figure.img-right img {
  max-width: 100%;
  max-height: 400px;
}

.content-box__content figure.img-right figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #666;
}

/* テキスト+画像 横並びレイアウト（タイトルと画像上端揃え） */
.content-box--side-by-side {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.content-box--side-by-side .content-box__main {
  flex: 1;
}

.content-box--side-by-side .content-box__side-image {
  flex: 0 0 45%;
  max-width: 45%;
  margin: 0;
}

.content-box--side-by-side .content-box__side-image img {
  width: 100%;
  height: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@media (max-width: 968px) {
  .content-box--side-by-side {
    flex-direction: column;
    gap: 24px;
  }

  .content-box--side-by-side .content-box__side-image {
    flex: none;
    max-width: 100%;
    order: -1; /* モバイルでは画像を上に */
  }
}

/* ====================================
   区切り線付きレイアウト
   ==================================== */
.content-box--with-divider {
  position: relative;
  padding-bottom: 60px;
  margin-bottom: 60px;
}

.content-box--with-divider::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 1px;
  background-color: var(--color-black);
}

@media (max-width: 768px) {
  .content-box--with-divider {
    padding-bottom: 40px;
    margin-bottom: 40px;
  }
  
  .content-box--with-divider::after {
    width: 150px;
  }
}

/* テキスト+画像 横並びレイアウト */
.content-box__content--with-image {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.content-box__content--with-image .content-box__text {
  flex: 1;
}

.content-box__content--with-image .content-box__image {
  flex: 0 0 45%;
  max-width: 45%;
  margin: 0;
}

.content-box__content--with-image .content-box__image img {
  width: 100%;
  height: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .content-box__content--with-image {
    flex-direction: column;
    gap: 24px;
  }

  .content-box__content--with-image .content-box__image {
    flex: none;
    max-width: 100%;
    order: -1; /* モバイルでは画像を上に */
  }
}

/* PC表示 */
@media (min-width: 769px) {
  /* 左配置 */
  .content-box__content figure.img-left {
    float: left;
    width: 40%;
    margin: 0.5rem 2rem 1rem 0;
  }
  
  /* 右配置 */
  .content-box__content figure.img-right {
    float: right;
    width: 40%;
    margin: 0.5rem 0 1rem 2rem;
  }

  /* 複数画像を縦に並べるパターン（div でラップ） */
  .content-box__content div.img-left {
    float: left;
    width: 40%;
    margin: 0.5rem 2rem 1rem 0;
  }

  .content-box__content div.img-right {
    float: right;
    width: 40%;
    margin: 0.5rem 0 1rem 2rem;
  }

  .content-box__content div.img-left figure,
  .content-box__content div.img-right figure {
    margin: 0 0 1rem 0;
    width: 100%;
  }

  .content-box__content div.img-left figure img,
  .content-box__content div.img-right figure img {
    width: auto;
    max-width: 100%;
    height: auto;
  }

  .content-box__content div.img-left figure:last-child,
  .content-box__content div.img-right figure:last-child {
    margin-bottom: 0;
  }
  
  /* floatクリア用 */
  .content-box__content::after {
    content: "";
    display: table;
    clear: both;
  }
}

/* スマホ表示：div.img-left / div.img-right を通常配置に */
@media (max-width: 768px) {
  .content-box__content div.img-left,
  .content-box__content div.img-right {
    float: none;
    width: 100%;
    margin: 1rem 0;
  }

  .content-box__content div.img-left figure img,
  .content-box__content div.img-right figure img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* img-center もスマホでは 100% */
  .content-box__content figure.img-center img {
    max-width: 100%;
  }
}

/* 回り込みクリア（手動で挿入用） */
.clearfix {
  clear: both;
}


/* ========================================
   仕様テーブル (.spec-table)
   共通スタイル - 設備詳細、その他ページで使用
   ======================================== */
.spec-table {
  width: 100%;
  max-width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  margin: 24px 0 48px;
  font-size: 0.95rem;
  line-height: 1.6;
  background: var(--color-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

/* ヘッダーセル（大項目） */
.spec-table__header {
  background: #313131;
  color: var(--color-white);
  font-weight: 600;
  text-align: left;
  padding: 14px 20px;
  border: 1px solid #454545;
  vertical-align: middle;
  white-space: nowrap;
  width: 1%;
}

/* 英語版: ヘッダーを小文字に */
html[lang="en"] .spec-table__header {
  text-transform: lowercase;
}

/* サブヘッダーセル（小項目）- ヘッダーと同じ色 */
.spec-table__subheader {
  background: #313131;
  color: var(--color-white);
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
  border: 1px solid #454545;
  vertical-align: middle;
  white-space: nowrap;
  width: 1%;
}

/* データセル */
.spec-table__data {
  background: var(--color-white);
  color: #333;
  padding: 12px 16px;
  border: 1px solid #d0d0d0;
  vertical-align: middle;
}

/* 上付き文字の調整 */
.spec-table sup {
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
}

/* スマホ: 横スクロール対応 */
.spec-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .spec-table {
    font-size: 0.85rem;
    margin: 16px 0 32px;
  }

  .spec-table__header {
    padding: 10px 12px;
    min-width: 100px;
  }

  .spec-table__subheader {
    padding: 8px 10px;
    min-width: 80px;
  }

  .spec-table__data {
    padding: 8px 10px;
  }
}

@media (max-width: 640px) {
  .spec-table-wrapper {
    margin: 16px -16px 32px;
    padding: 0 16px;
  }

  .spec-table {
    min-width: 500px;
  }
}


/* スマホ表示 */
@media (max-width: 768px) {
  .content-box__content figure.img-center,
  .content-box__content figure.img-left,
  .content-box__content figure.img-right {
    width: 100%;
    float: none;
    margin: 1.5rem 0;
  }
}

.content-box__title.is-visible {
  opacity: 1; /* 不透明に */
  transform: translateY(0); /* 元の位置に */
}

/* 汎用スクロールアニメーション：下から上へフェードイン */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* 青い太い部分（スライドする） */
.content-box__title::before {
  content: "";
  position: absolute;
  left: -23px; /* content-box の border 位置 */
  top: -106px; /* 上の見えない位置から開始 */
  width: 5px; /* 太め */
  height: 55px;
  background: #0b3d91;
  opacity: 0; /* 初期状態：透明 */
  transform: translateY(0);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.content-box__title.is-visible::before {
  transform: translateY(100px); /* h2の横まで降りてくる */
  opacity: 1; /* 不透明（青）になる */
}

/* セクション見出し h3（.terms-box内には適用しない） */
.content-box__content h3:not(.terms-box__title) {
  display: flex;
  align-items: center;
  font-size: var(--h3);
  font-weight: 700;
  color: #333;
  margin: 32px 0 16px;
}

.content-box__content h3:not(.terms-box__title)::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 12px;
  background-color: #0b3d91;
  margin-right: 12px;
  flex-shrink: 0;
}

/* h3の後ろに伸びる線 */
.content-box__content h3:not(.terms-box__title)::after {
  content: "";
  flex: 1;
  height: 2px;
  background-color: #333;
  margin-left: 16px;
}

/* 本文中のリスト（ul） */
.content-box__content ul {
  margin: 12px 0 20px 1.5em;
  padding: 0;
  list-style: disc;
}

/* 装飾付きリストは list-style を無効化 */
.content-box__content ul.kana-list {
  list-style: none;
  margin-left: 0;
}

.content-box__content ul li {
  margin-bottom: 8px;
  line-height: 1.7;
}

/* 本文中のリスト（ol） */
.content-box__content ol {
  margin: 12px 0 20px 2em;
  padding: 0;
}

.content-box__content ol li {
  margin-bottom: 6px;
  line-height: 1.7;
}

/* ===================================
   装飾付きリスト（ol）
   =================================== */

/* 第1レベルのリスト（1. 2. 3...） */
.numbered-list,
.terms-list {
  list-style: none;
  counter-reset: numbered-counter;
  padding-left: 0;
  margin: 12px 0;
}

.numbered-list > li,
.terms-list > li {
  counter-increment: numbered-counter;
  margin-bottom: 20px;
  padding-left: 2em;
  position: relative;
}

.numbered-list > li::before,
.terms-list > li::before {
  content: counter(numbered-counter) ".";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--main-color, #0060b0);
}

/* 第2レベルのリスト（(1) (2) (3)...） */
.paren-list,
.terms-sublist {
  list-style: none;
  counter-reset: paren-counter;
  padding-left: 0;
  margin: 12px 0;
}

.paren-list > li,
.terms-sublist > li {
  counter-increment: paren-counter;
  margin-bottom: 12px;
  padding-left: 2.5em;
  position: relative;
}

.paren-list > li::before,
.terms-sublist > li::before {
  content: "(" counter(paren-counter) ")";
  position: absolute;
  left: 0;
  font-weight: 500;
}

/* 第3レベルのリスト（(ア)(イ)(ウ)...） */
.kana-list,
.terms-sublist--kana {
  list-style: none;
  padding-left: 0;
  margin: 8px 0;
}

.kana-list > li,
.terms-sublist--kana > li {
  margin-bottom: 6px;
  padding-left: 2.5em;
  position: relative;
}

.kana-list > li:nth-child(1)::before,
.terms-sublist--kana > li:nth-child(1)::before { content: "(ア)"; }
.kana-list > li:nth-child(2)::before,
.terms-sublist--kana > li:nth-child(2)::before { content: "(イ)"; }
.kana-list > li:nth-child(3)::before,
.terms-sublist--kana > li:nth-child(3)::before { content: "(ウ)"; }
.kana-list > li:nth-child(4)::before,
.terms-sublist--kana > li:nth-child(4)::before { content: "(エ)"; }
.kana-list > li:nth-child(5)::before,
.terms-sublist--kana > li:nth-child(5)::before { content: "(オ)"; }
.kana-list > li:nth-child(6)::before,
.terms-sublist--kana > li:nth-child(6)::before { content: "(カ)"; }
.kana-list > li:nth-child(7)::before,
.terms-sublist--kana > li:nth-child(7)::before { content: "(キ)"; }
.kana-list > li:nth-child(8)::before,
.terms-sublist--kana > li:nth-child(8)::before { content: "(ク)"; }
.kana-list > li:nth-child(9)::before,
.terms-sublist--kana > li:nth-child(9)::before { content: "(ケ)"; }
.kana-list > li:nth-child(10)::before,
.terms-sublist--kana > li:nth-child(10)::before { content: "(コ)"; }

.kana-list > li::before,
.terms-sublist--kana > li::before {
  position: absolute;
  left: 0;
  font-weight: 500;
}

/* 参考文献リスト（[1] [2] [3]...） */
.reference-list {
  margin: 12px 0 20px 2em;
  padding: 0;
  list-style: none;
  counter-reset: ref-counter;
}

.reference-list > li {
  counter-increment: ref-counter;
  margin-bottom: 8px;
  padding-left: 0;
  position: relative;
  font-size: 0.9rem;
  line-height: 1.6;
}

.reference-list > li::before {
  content: "[" counter(ref-counter) "]";
  position: absolute;
  left: -2em;
  font-weight: 500;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .numbered-list > li,
  .terms-list > li {
    padding-left: 1.8em;
  }

  .paren-list > li,
  .terms-sublist > li {
    padding-left: 2em;
  }
}

/* ===================================
   Image Modal Gallery
   =================================== */

/* �摜���N���b�N�”\�� */
.content-box__content figure img[data-gallery] {
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.content-box__content figure img[data-gallery]:hover {
  opacity: 0.85;
}

/* ���[�_���w�i */
.image-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

/* モーダル内容 */
.image-modal__content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  background: var(--color-white);
  padding: 1rem;
}

.image-modal__image {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* キャプション */
.image-modal__caption {
  position: static;
  color: #fff;
  font-size: 0.95rem;
  text-align: center;
  max-width: 90%;
  line-height: 1.5;
  background: rgba(0, 0, 0, 0.6);
  padding: 10px 20px;
  border-radius: 6px;
}

/* �‚���{�^�� */
.image-modal__close {
  position: absolute;
  top: 20px;
  right: 30px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  z-index: 10001;
}

.image-modal__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* �O�֎��փ{�^�� */
.image-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  z-index: 10001;
}

.image-modal__nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.image-modal__nav--prev {
  left: 20px;
}

.image-modal__nav--next {
  right: 20px;
}

.image-modal__nav.hidden {
  display: none;
}

/* �X�}�z�Ή� */
@media (max-width: 768px) {
  .image-modal__close {
    top: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
    font-size: 20px;
  }

  .image-modal__nav {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .image-modal__nav--prev {
    left: 10px;
  }

  .image-modal__nav--next {
    right: 10px;
  }

  .image-modal__caption {
    font-size: 0.85rem;
    padding: 8px 12px;
  }

  .image-modal__image {
    max-height: 65vh;
  }
}

/* より小さい画面対応 */
@media (max-width: 480px) {
  .image-modal__caption {
    font-size: 0.8rem;
    padding: 6px 10px;
  }

  .image-modal__image {
    max-height: 60vh;
  }
}

/* =============================================
   英語版用スタイル調整
   ============================================= */

/* 英語版フォントファミリー */
html[lang="en"] {
  --font-family-en: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Noto Sans JP";
}

html[lang="en"] body {
  font-family: var(--font-family-en);
}

/* 英語版フォントサイズ調整（PC）
   日本語より約5-10%小さめに設定 */
html[lang="en"] {
  --h1: 2.25rem;     /* 36px (日本語: 40px) */
  --h2: 1.75rem;     /* 28px (日本語: 30px) */
  --h3: 1.375rem;    /* 22px (日本語: 24px) */
  --h4: 1.125rem;    /* 18px (日本語: 20px) */
  --h5: 1rem;        /* 16px (日本語: 18px) */
  --h6: 0.9375rem;   /* 15px (日本語: 16px) */
}

/* 英語版行間調整
   英語は日本語より狭めでOK */
html[lang="en"] {
  --line-height-tight: 1.3;     /* 見出し用 */
  --line-height-normal: 1.6;    /* 本文用 */
  --line-height-relaxed: 1.75;  /* リード文用 */
}

/* 英語版：レタースペーシング調整 */
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3 {
  letter-spacing: 0.01em;
}

html[lang="en"] p,
html[lang="en"] li {
  letter-spacing: 0.02em;
}

/* 英語版フォントサイズ調整（モバイル） */
@media (max-width: 768px) {
  html[lang="en"] {
    --h1: 1.75rem;     /* 28px (日本語: 30px) */
    --h2: 1.375rem;    /* 22px (日本語: 24px) */
    --h3: 1.125rem;    /* 18px (日本語: 20px) */
    --h4: 1rem;        /* 16px (日本語: 18px) */
    --h5: 0.9375rem;   /* 15px (日本語: 16px) */
    --h6: 0.875rem;    /* 14px (日本語: 15px) */
  }
}

/* =============================================
   Detail Link（共通コンポーネント）
   ============================================= */

.link-area {
  margin-top: 24px;
}

.detail-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 280px;
  padding: 8px 10px 8px;
  border: 1px solid var(--color-black);
  background-color: var(--color-black);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
  gap: 40px;
  margin-top: 16px;
}

.detail-link:hover {
  background-color: #fff;
  color: #333;
}

.detail-link:hover .detail-arrow {
  background-color: #333;
}

.detail-link:hover .detail-arrow::after {
  background-color: #333;
}

/* CSS矢印 */
.detail-arrow {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 1px;
  background-color: #fff;
  animation: detail-arrow-slide 1.5s ease-in-out infinite;
}

.detail-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 10px;
  height: 1px;
  background-color: #fff;
  transform: rotate(35deg);
  transform-origin: right center;
}

/* 矢印アニメーション */
@keyframes detail-arrow-slide {
  0% {
    transform: translateX(-10px);
    opacity: 0.5;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-10px);
    opacity: 0.5;
  }
}

/* レスポンシブ */
@media (max-width: 768px) {
  .detail-link {
    min-width: auto;
    width: 100%;
    font-size: 14px;
    gap: 20px;
  }

  .detail-arrow {
    width: 80px;
  }
}