/* common.css ================================================
   全ページ共通スタイル
   ============================================================ */

/* リセット ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* CSS変数 -------------------------------------------------- */
/* 値の出典: figma-dump/file.json の font_color_set（node 1:17）の実測。
   Figma のスタイル名を併記する。名前はアミッケ共通テーマの変数名を維持し、
   本案件で追加が必要な色だけ別枠で足している。 */
:root {
  /* カラー（アミッケ共通テーマの変数枠） */
  --color_main:   #B80003; /* Figma main_color */
  --color_sub:    #FFEDED; /* Figma main_color_light */
  --color_dark:   #111111; /* Figma txt_color（本文色） */
  --color_gray:   #D2D2D2; /* Figma gray */
  --color_light:  #F6F6F6; /* Figma base_color */
  --color_orange: #DA3106; /* 要確認：Figma に橙の単色指定は無く、CTAグラデーションの明側の色を暫定で入れている */
  --color_kv:     #FFEDED; /* 要確認：下層ヒーロー(.page-hero)の背景色。Figma の page_title(node 99:1231) は cta_gr グラデーション＋白文字のため、下層デザイン確定時に差し替えが必要 */
  --color_muted:  #717171; /* Figma txt_color2 */

  /* カラー（本案件で追加・Figma 実測） */
  --color_main_dark:  #7C0002; /* Figma main_color_dark */
  --color_main_light: #FFEDED; /* Figma main_color_light */
  --color_base2:      #F2F2F2; /* Figma base_color2 */
  --color_line:       #EAEAEA; /* Figma line_color */
  --color_link:       #1560A0; /* Figma link_color */

  /* フォント */
  --font_jp:       "Noto Sans JP", sans-serif;      /* Figma 実測・出現1543件（主体） */
  --font_eng:      "Roboto", sans-serif;            /* Figma 実測・出現125件 */
  --font_eng_cond: "Roboto Condensed", sans-serif;  /* Figma 実測・出現39件 */
  --font_accent:   var(--font_jp); /* 要確認：Figma に明朝・アクセント書体の使用が無いため日本語書体にフォールバック（共通テーマ既定の Shippori Mincho は本案件では未使用） */

  /* レイアウト */
  --sectionWidth:      1200px; /* Figma 実測：h2/h3/bread/footer_link の内容幅 */
  --sectionWidth_wide: 1440px; /* Figma 実測：カンプ全体幅 */
  --header_height:     8rem;   /* Figma 実測：header(node 99:314) 1440×80 */
  --footer_height:     31.6rem; /* 要確認：Figma footer(node 99:324) 1440×316 の実測。SP のフッター高さはカンプが無く未確定 */

  /* その他 */
  --gradient:   linear-gradient(90deg, #DA3106, #B80003); /* Figma cta_gr 実測（page_title / contact で49箇所・水平方向） */
  --transition: all .3s ease;
}
@media (max-width: 768px) {
  :root {
    --header_height: 8.8rem; /* Figma 実測：sp_header(node 173:760 配下) 375×88 */
  }
}

/* スマートフォンだけで効かせる改行 -------------------------
   `<br class="br-sp">` と書くと、パソコン表示では改行されず SP でだけ改行される。 */
.br-sp { display: none; }
@media (max-width: 768px) {
  .br-sp { display: inline; }
}

/* フォントサイズ基準 --------------------------------------- */
html { font-size: 62.5%; }
body {
  font-size: 1.6rem;
  line-height: 1.8;
  font-family: var(--font_jp);
  color: var(--color_dark);
}

/* WP管理バーを下部に移動 ----------------------------------- */
#wpadminbar { top: unset !important; bottom: 0; }
html { margin-top: 0 !important; }

/* main オフセット（固定ヘッダー分） ------------------------ */
main { padding-top: var(--header_height); }

/* .section / .section__inner ------------------------------- */
.section { padding: clamp(6rem, 6.88vw, 10rem) 0; }
.section__inner {
  max-width: var(--sectionWidth);
  margin: 0 auto;
  padding: 0 clamp(2rem, 2.7778vw, 4rem); /* 1440px でちょうど 40px（40÷14.4） */
}

/* .section__head ------------------------------------------- */
.section__head { text-align: center; margin-bottom: 6rem; }
.section__label {
  font-size: clamp(1.5rem, 1.24vw, 1.8rem);
  color: var(--color_main);
  letter-spacing: 0.1em;
}
.section__title {
  font-family: var(--font_eng);
  font-size: clamp(3.6rem, 4.40vw, 6.4rem);
  font-weight: 700;
  line-height: 1.0;
}

/* .page-hero ----------------------------------------------- */
.page-hero {
  background: var(--color_kv);
  padding: 5rem 0;
  text-align: center;
}

/* .breadcrumb-wrap ----------------------------------------- */
.breadcrumb-wrap {
  background: #fff; /* カンプは塗りなし。ページ地と同じ白のため見た目は変わらず明示のみ */
  padding-block: clamp(2.4rem, 2.7778vw, 4rem); /* 1440px でちょうど 40px（40÷14.4） */
  /* 値はすべて Figma カンプ実測（bread ノード・12箇所すべて同一）。
     2026-08-13 に CEO 指示でカンプ厳密一致へ修正 */
  font-size: clamp(1.3rem, .9722vw, 1.4rem); /* 1440px でちょうど 14px（14÷14.4） */
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .05em;
}

/* .btn ----------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 1.2rem 2.8rem;
  border-radius: 5rem;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border: 2px solid transparent;
  white-space: nowrap;
  transition: var(--transition);
  cursor: pointer;
  text-decoration: none;
}
.btn.btn--solid-main {
  background: var(--color_main);
  color: #fff;
  border-color: var(--color_main);
}
.btn.btn--solid-main:hover {
  background: transparent;
  color: var(--color_main);
}
.btn.btn--outline-main {
  background: transparent;
  color: var(--color_main);
  border-color: var(--color_main);
}
.btn.btn--outline-main:hover {
  background: var(--color_main);
  color: #fff;
}
@media (max-width: 768px) {
  .btn { padding: 1.4rem 3.2rem; }
}

/* ヘッダー ------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header_height);
  z-index: 100;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.header__logo img {
  height: clamp(5rem, 5.51vw, 8rem);
  width: auto;
}
.header__nav {
  display: flex;
  align-items: center;
  gap: 2.8rem;
}
.header__list {
  display: flex;
  gap: 2.8rem;
  list-style: none;
}
.header__list a {
  font-family: var(--font_eng);
  font-size: 1.6rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--color_dark);
  transition: var(--transition);
}
.header__list a:hover { color: var(--color_main); }
.header__drawer-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: .6rem;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.header__drawer-btn span {
  display: block;
  width: 2.8rem;
  height: 2px;
  background: var(--color_dark);
  transition: var(--transition);
}
.header__drawer-btn.header__drawer-btn--close span:nth-child(1) { transform: translateY(.8rem) rotate(45deg); }
.header__drawer-btn.header__drawer-btn--close span:nth-child(2) { opacity: 0; }
.header__drawer-btn.header__drawer-btn--close span:nth-child(3) { transform: translateY(-.8rem) rotate(-45deg); }
@media (max-width: 768px) {
  .header__drawer-btn { display: flex; }
  .header__nav {
    position: fixed;
    top: var(--header_height);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 2rem;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow-y: auto;
  }
  .header__nav.header__nav--open {
    opacity: 1;
    visibility: visible;
  }
  .header__list {
    flex-direction: column;
    gap: 0;
  }
  .header__list a {
    display: block;
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--color_gray);
  }
  .header__nav .btn {
    width: 100%;
    padding: 1.6rem;
    text-align: center;
    margin-top: 2rem;
  }
}

/* フッター ------------------------------------------------- */
.footer {
  background: var(--color_main);
  padding: 6rem 0 0;
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  padding-bottom: clamp(4rem, 3.30vw, 4.8rem);
}
.footer__left {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  flex: 0 0 auto;
  max-width: 32rem;
}
.footer__logo img {
  height: 8rem;
  width: auto;
}
.footer__company {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .4rem;
}
.footer__address,
.footer__tel,
.footer__mail {
  font-size: 1.3rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.8;
}
.footer__sns {
  display: flex;
  gap: 1.6rem;
}
.footer__sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.75);
  transition: var(--transition);
}
.footer__sns-link:hover { color: #fff; opacity: .65; } /* 2026-08-26 CEO 指示: ホバーが効いているか分かるよう .8/.85 → .65 に統一 */
.footer__right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.footer__list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  list-style: none;
}
.footer__list a {
  font-size: 1.3rem;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: var(--transition);
}
.footer__list a:hover { color: #fff; }
.copyright {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.6);
  padding: 1.4rem 1.6rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  text-align: center;
}
@media (max-width: 768px) {
  .footer__inner { flex-direction: column; gap: 4rem; }
  .footer__left { max-width: 100%; }
  .footer__right { justify-content: flex-start; }
  .footer__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
  }
}

/* ページトップボタン --------------------------------------- */
.pagetop {
  position: fixed;
  bottom: 3.2rem;
  right: 3.2rem;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background: var(--color_main);
  color: #fff;
  text-decoration: none;
  font-size: 1.6rem;
}
@media (max-width: 768px) {
  .pagetop {
    width: 5.2rem;
    height: 5.2rem;
    bottom: 1.6rem;
    right: 1.6rem;
  }
}

/* NEWS ----------------------------------------------------- */
.news__list {
  margin-bottom: 4rem;
}
.news__item {
  border-bottom: 1px solid var(--color_gray);
}
.news__item a {
  display: flex;
  align-items: baseline;
  gap: 2.4rem;
  padding: 1.6rem 0;
  text-decoration: none;
  color: var(--color_dark);
  transition: var(--transition);
}
.news__item a:hover { opacity: .7; }
.news__date {
  flex-shrink: 0;
  min-width: 11rem;
  font-size: 1.4rem;
  color: var(--color_muted);
}
.news__title {
  font-size: 1.6rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* WORKS ---------------------------------------------------- */
.works__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.2rem;
  margin-bottom: 4rem;
}
.works__card a {
  display: block;
  text-decoration: none;
  color: var(--color_dark);
  transition: var(--transition);
}
.works__card a:hover { opacity: .65; } /* 2026-08-26 CEO 指示: ホバーが効いているか分かるよう .8/.85 → .65 に統一 */
.works__thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: .8rem;
  background: var(--color_light);
}
.works__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.works__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 1.2rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media (max-width: 768px) {
  .works__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .news__date { min-width: 9rem; }
}

/* ページネーション ----------------------------------------- */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .8rem;
  margin-top: 5rem;
  flex-wrap: wrap;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: .4rem;
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--color_gray);
  color: var(--color_dark);
  transition: var(--transition);
}
.pagination .page-numbers:hover {
  border-color: var(--color_main);
  color: var(--color_main);
}
.pagination .page-numbers.current {
  background: var(--color_main);
  border-color: var(--color_main);
  color: #fff;
}
.pagination .prev.page-numbers,
.pagination .next.page-numbers {
  font-size: 1.8rem;
  color: var(--color_muted);
  border-color: var(--color_gray);
}
/* 上の指定は `.pagination .page-numbers:hover` と詳細度が同じで、後に書いてあるぶん勝つため
   前へ・次への矢印だけホバーが効いていなかった（2026-08-20 実ブラウザで計測して確認）。
   数字と同じ見え方にそろえる。 */
.pagination .prev.page-numbers:hover,
.pagination .next.page-numbers:hover {
  border-color: var(--color_main);
  color: var(--color_main);
}

/* コンテンツ内見出し（固定ページ・投稿共通）--------------------- */
.page__body h1, .single__body h1,
.page__body h2, .single__body h2,
.page__body h3, .single__body h3,
.page__body h4, .single__body h4 {
  font-weight: 700;
  line-height: 1.4;
  margin-top: 4rem;
  margin-bottom: 1.5rem;
}
.page__body h1, .single__body h1 {
  font-size: clamp(2.4rem, 2.2vw, 3.2rem);
}
.page__body h2, .single__body h2 {
  font-size: clamp(2rem, 1.84vw, 2.6rem);
  border-left: 4px solid var(--color_main);
  padding-left: .75em;
}
.page__body h3, .single__body h3 {
  font-size: clamp(1.8rem, 1.65vw, 2.2rem);
}
.page__body h4, .single__body h4 {
  font-size: 1.8rem;
  color: var(--color_muted);
}
.page__body p, .single__body p {
  margin-bottom: 1.5em;
}
.page__body ul, .single__body ul,
.page__body ol, .single__body ol {
  padding-left: 1.8em;
  margin-bottom: 1.5em;
}
.page__body li, .single__body li {
  margin-bottom: .5em;
}


/* 本文汎用（追記）--------------------------------------------------------
   出典：テスト環境（amichetest）の公開済みコラム 69 件の post_content を
   全数走査した実測（2026-08-11・読み取りのみ）。上の節が面倒を見ている
   見出し・段落・リスト以外で、実データに出てくる要素を足す。
   実測のタグ内訳：
     strong 311 / img 146 / a 79 / h3 75 / p 75 / td 70 / h2 63 / div 43 /
     tr 26 / h4 19 / col 14 / u 11 / li 9 / section 6 / span 6 /
     table 5（3記事）/ colgroup 5 / tbody 5 / ol 4 / hr 1
     blockquote・iframe・font・br・h1 は 0 件
   固定ページ（.page__body）と投稿（.single__body）の両方に同じ指定を当て、
   どちらの本文でも同じ見え方になるようにする。
   余白は 1440px カンプ基準のリキッド（実測px / 14.4 = vw）。本文まわりは
   カンプに指定が無いため、値は当方設計（各所にコメントで明記）。
   ------------------------------------------------------------------------ */

/* リンク（実測 a 79件・32記事）。色は Figma link_color を使う */
.page__body a, .single__body a {
  color: var(--color_link);
  text-decoration: underline;
  transition: var(--transition);
}
.page__body a:hover, .single__body a:hover {
  color: var(--color_main);
}

/* 画像（実測 img 146件・56記事）。max-width:100% と display:block は
   冒頭のリセット済みなので、ここでは上下の余白だけを足す。
   余白 32px はカンプに本文画像の指定が無いため当方設計 */
.page__body img, .single__body img {
  margin-top: clamp(2rem, 2.22vw, 3.2rem);
  margin-bottom: clamp(2rem, 2.22vw, 3.2rem);
}

/* 強調・下線（実測 strong 311件・56記事 / u 11件・2記事）*/
.page__body strong, .single__body strong {
  font-weight: 700;
}
.page__body u, .single__body u {
  text-decoration: underline;
}

/* WordPress クラシックエディター由来のクラス。
   実データには alignnone / size-medium / wp-image-NNN しか出ていないが、
   今後の追記で align 系とキャプションが付いても崩れないよう先に当てる */
.page__body .aligncenter, .single__body .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.page__body .alignleft, .single__body .alignleft {
  float: left;
  margin-right: clamp(1.6rem, 1.66vw, 2.4rem);
  margin-bottom: clamp(1.6rem, 1.66vw, 2.4rem);
}
.page__body .alignright, .single__body .alignright {
  float: right;
  margin-left: clamp(1.6rem, 1.66vw, 2.4rem);
  margin-bottom: clamp(1.6rem, 1.66vw, 2.4rem);
}
/* float の解除。これが無いと本文の下（「一覧へ戻る」等）へ回り込んで崩れる */
.page__body::after, .single__body::after {
  content: "";
  display: block;
  clear: both;
}
.page__body .wp-caption, .single__body .wp-caption {
  max-width: 100%;
}
.page__body .wp-caption-text, .single__body .wp-caption-text {
  margin-top: .8rem;
  font-size: clamp(1.3rem, 0.97vw, 1.4rem); /* 1440px で 14px。キャプションは本文より小さくする（当方設計）*/
  color: var(--color_muted);
  text-align: center;
}

/* 区切り線（実測 hr 1件）*/
.page__body hr, .single__body hr {
  border: 0;
  border-top: 1px solid var(--color_line); /* 1本の細線は太さを可変にすると端末により消える／太るため固定 1px */
  margin: clamp(3rem, 3.33vw, 4.8rem) 0;   /* 1440px で 48px（当方設計）*/
}

/* 表（実測 table 5件・記事ID 48 / 70 / 78。いずれも比較表で 2〜3 列。
   本文には border="1" cellpadding="0" 等の古い属性が残っているが、
   クラス指定のこちらが優先されるため打ち消しの記述は不要）*/
.page__body table, .single__body table {
  width: 100%;
  margin-bottom: 1.5em;
  border-collapse: collapse;
}
.page__body th, .single__body th,
.page__body td, .single__body td {
  border: 1px solid var(--color_line); /* セルの罫線も 1px 固定（細線はリキッド化になじまない）*/
  padding: clamp(1rem, 1.11vw, 1.6rem); /* 1440px で 16px（当方設計）*/
  text-align: left;
  vertical-align: top;
}
.page__body th, .single__body th {
  background: var(--color_light);
  font-weight: 700;
}

/* 引用（実測 0 件。今後入っても素の見た目にならないよう最小限だけ置く）*/
.page__body blockquote, .single__body blockquote {
  margin-bottom: 1.5em;
  padding: clamp(1.6rem, 1.66vw, 2.4rem);
  background: var(--color_light);
  border-left: 4px solid var(--color_gray); /* 見出し h2 の縦線と同じ 4px 固定で揃える */
}

/* 埋め込み（実測 0 件。地図・動画が入ったときに横へはみ出さないように）*/
.page__body iframe, .single__body iframe {
  max-width: 100%;
}

/* 旧サイト（www.earphone-guide.jp）から本文ごと持ち込まれたクラスの後始末。
   実測：-w-text 21 / -w-image-text-wrapper 10 / -w-subtitle-text-wrapper 10 /
        -w-contents-wrapper 8 / bold 5 / mt50 2 / -w-title2-wrapper 1 / -w-image 1
   -w-* の入れ子は
     div.-w-contents-wrapper > div.-w-image-text-wrapper
       > div.-w-subtitle-text-wrapper > div.-w-text
   という「箱が4重」の構造で、中身は段落・画像・strong だけ。
   新サイトの CSS にこれらの定義は無く、div の既定（縦積みの箱）で素通しになるため
   見た目は壊れない。旧サイトの画像とテキストの横並びを再現すると新しい装飾を
   増やすことになるので、意図的に無指定のままにする。
   打ち消しが要るのは下の2件だけ。 */

/* 中身が空の見出し（記事ID 262 の <h2 class="-w-title2-wrapper"></h2> 1件）。
   上の節で h2 に赤い縦線と上下余白が付くため、空でも線と余白だけが出てしまう */
.page__body h1:empty, .single__body h1:empty,
.page__body h2:empty, .single__body h2:empty,
.page__body h3:empty, .single__body h3:empty,
.page__body h4:empty, .single__body h4:empty {
  display: none;
}

/* 旧サイトの太字クラス（span.bold・記事ID 165 / 177 の計5件）。
   新サイトに定義が無いと太字にならず、書き手の意図（小見出し）が消えるため足す */
.page__body .bold, .single__body .bold {
  font-weight: 700;
}
/* 旧サイトの上余白クラス（p.mt50・記事ID 95 / 98 の計2件）。
   旧サイトは margin-top:50px。装飾ではなく余白だけなのでリキッドで再現する */
.page__body .mt50, .single__body .mt50 {
  margin-top: clamp(2.5rem, 3.47vw, 5rem);
}

@media (max-width: 768px) {
  /* 回り込みは SP では読みにくいので解除して中央に置く */
  .page__body .alignleft, .single__body .alignleft,
  .page__body .alignright, .single__body .alignright {
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
  /* 表は 2〜3 列あり SP 幅では潰れて読めないので横スクロールにする。
     display:block だけだとセル内で折り返して縮むだけでスクロールが出ないため、
     折り返しを止めて実際にはみ出させる（実データの最長セルは23文字）*/
  .page__body table, .single__body table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}


/* ==========================================================================
   共通パーツ・共通コンポーネント（ヘッダー／フッター／ドロワー／画面下固定CTA／
   ボタン・矢印・見出し・タグ・ラジオ）
   Figma 実測。上の実物テンプレート由来の値（赤一色フッター・丸型ピルの .btn・
   ヘッダー影）を意図的に上書きするため、必ずこの順序で置く。
   ========================================================================== */

/* parts-common.css ==========================================
   共通パーツ（ヘッダー / SPドロワー / フッター / 画面下固定CTA）と
   共通コンポーネント（ボタン・矢印・見出し・タグ・フッターリンク・ラジオ・下層ページタイトル）

   ■ 結合順（重要）
   本ファイルは common.css（アミッケ共通テーマ実物）の値を Figma の値に
   上書きする記述を含む。結合は必ず common.css → parts-common.css の順。
   逆順にすると赤一色フッター等、実物の値が残る。
   実物と単一クラスで衝突する箇所のうち、見た目の破綻が大きい .footer だけは
   順序が入れ替わっても効くようクラス2重指定にしている。

   ■ 数値の出典（推測なし）
   figma-dump/inspect/01_header.txt（header node 99:314・1440×80）
   figma-dump/inspect/12_footer.txt（footer node 99:324・1440×316）
   figma-dump/inspect/sp_menu.txt（sp_header node 173:765・375×88 / menu node 173:1032・375×756）
   figma-dump/inspect/sp_floating.txt（contact node 490:4257・1440×120）
   figma-dump/デザイン規約.md「コンポーネント」（node 99:1343）と file.json の実測

   ■ SP の扱い
   SP カンプがあるのは「ヘッダー」「ドロワー」だけ。
   フッターSP・画面下固定CTAのSPはカンプ無し・当方設計（該当箇所にコメントで明記）。

   ■ 文字の共通則（Figma 実測）
   letter-spacing は本文・見出しとも 0.05em（例 14px→0.7 / 16px→0.8 / 34px→1.7）。
   例外は heading-01 のラベル（Roboto 15px / letterSpacing 1.5 = 0.1em）。
   ============================================================ */


/* ============================================================
   1. 矢印 7種（Figma ar / ar_white / ar_down / ar_2 / ar_2_white /
      ar_2_down / ar_3・node 99:1551 ほか）
   Figma から書き出した SVG をそのまま背景画像に使う（線の形・太さがカンプ一致）。
   ファイル名は Figma 書き出し時のセクション名が付いているため対応を明記する。
     ar        24×24 赤 → finduse_arrow_a.svg
     ar_white  24×24 白 → finduse_arrow_white_btn.svg
     ar_2      16×16 赤 → finduse_arrow2_a.svg
     ar_2_white 16×16 白 → usecases_arrow2_white_a.svg
     ar_3      10×10 赤 → footer_link_arrow.svg
   下向き（ar_down / ar_2_down）は書き出しが無いため右向きを90度回転させる。
   使い方は `class="ar ar--white"` のように基底クラス併記（実装契約の取り決め）。
   ============================================================ */
.ar,
.ar--white,
.ar--down,
.ar--2,
.ar--2-white,
.ar--2-down,
.ar--3 {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
}
.ar,
.ar--white,
.ar--down {
  width: 2.4rem;
  height: 2.4rem;
  background-size: 2.4rem 2.4rem;
}
.ar,
.ar--down {
  background-image: url("../images/finduse_arrow_a.svg");
}
.ar--white {
  background-image: url("../images/finduse_arrow_white_btn.svg");
}
.ar--2,
.ar--2-white,
.ar--2-down {
  width: 1.6rem;
  height: 1.6rem;
  background-size: 1.6rem 1.6rem;
}
.ar--2,
.ar--2-down {
  background-image: url("../images/finduse_arrow2_a.svg");
}
.ar--2-white {
  background-image: url("../images/usecases_arrow2_white_a.svg");
}
.ar--3 {
  width: 1rem;
  height: 1rem;
  background-size: 1rem 1rem;
  background-image: url("../images/footer_link_arrow.svg");
}
/* 下向き。ボタン内など transform を併用する場所で使う場合は
   セクション側で translate と rotate を1つの transform にまとめること */
.ar--down,
.ar--2-down {
  transform: rotate(90deg);
}


/* ============================================================
   2. ボタン 5種（Figma btn 320×60 / btn2 180×60 / btn3 100×40 /
      btn4 185×52 / btn5 185×52）
   幅はコンポーネント既定値。セクション側で実インスタンス幅
   （例 news の btn4 は 160px）に合わせる場合はセクションCSSで width を上書きする。
   矢印は絶対配置（Figma も ABSOLUTE 配置・右10px、btn4 のみ右8px）。
   ============================================================ */
.btn,
.btn--2,
.btn--3,
.btn--4,
.btn--5 {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 0;
  font-family: var(--font_jp);
  letter-spacing: .05em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition);
}
.btn .ar,
.btn .ar--white,
.btn--2 .ar,
.btn--2 .ar--2,
.btn--3 .ar,
.btn--3 .ar--2,
.btn--4 .ar,
.btn--4 .ar--2,
.btn--5 .ar,
.btn--5 .ar--2-white {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
}
.btn--4 .ar,
.btn--4 .ar--2 {
  right: .8rem;
}

/* btn（node 4:156）320×60・#111111・影 0 10 30 rgba(0,0,0,.2) */
.btn {
  width: 32rem;
  height: 6rem;
  padding: 0 5rem 0 3rem;
  background: var(--color_dark);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}
/* hover はトップの同じ濃い地のボタン（top.css 760行・Figma node 569:5027 実測 #111111→#323232）と
   同じ語彙。#000 は #111 との差が目で見て分からないため 2026-08-20 CEO 指摘により変更。 */
.btn:hover {
  background: #323232;
}

/* btn2（node 18:640）180×60・#F6F6F6 */
.btn--2 {
  width: 18rem;
  height: 6rem;
  padding: 0 5rem 0 3rem;
  background: var(--color_light);
  color: var(--color_dark);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
}
/* 元の指定 background: var(--color_base2) は base(#F6F6F6) との差が
   ほぼ無く、カーソルを乗せても変化が見えなかった（2026-08-20 実測）。
   文字色を主色にして押せることを示す（`.btn--3` と同じ語彙）。 */
.btn--2:hover {
  background: var(--color_base2);
  box-shadow: inset 0 0 0 2px var(--color_main); /* 使う場所によって文字が元から赤のことがあり、
    文字色だけでは差が出なかった（2026-08-20 実測）。白〜薄いグレーの面の既定ホバーと同じ枠にする。 */
}

/* btn3（node 26:236）100×40・白地＋1px #EAEAEA・幅は内容依存 */
.btn--3 {
  height: 4rem;
  padding: 0 3.6rem 0 2rem;
  background: #fff;
  border: 1px solid var(--color_line);
  color: var(--color_dark);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
}
.btn--3:hover {
  border-color: var(--color_main);
  color: var(--color_main);
}

/* btn4（node 117:1087）185×52・白地・影 0 5 20 rgba(89,30,27,.1)
   高さは Figma の 52px 固定。Figma の pad 上下20px は文字の実寸(12px)基準のため
   CSS の行高(22.4px)で組むと 62px になり合わない。高さ固定で合わせている。 */
.btn--4 {
  width: 18.5rem;
  height: 5.2rem;
  padding: 0 3rem 0 2rem;
  background: #fff;
  color: var(--color_dark);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 5px 20px rgba(89, 30, 27, .1);
}
/* hover は Figma hover フレーム（白ボタン node 569:5013）の 2px 赤枠追加に合わせる。
   サイズを動かさないため inset の box-shadow で表現する。 */
.btn--4:hover {
  box-shadow: 0 5px 20px rgba(89, 30, 27, .1), inset 0 0 0 2px var(--color_main);
}

/* btn5（node 158:687）185×52・#B80003・影 0 5 20 rgba(89,30,27,.1） */
.btn--5 {
  width: 18.5rem;
  height: 5.2rem;
  padding: 0 3rem 0 2rem;
  background: var(--color_main);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 5px 20px rgba(89, 30, 27, .1);
}
/* hover は Figma hover フレーム（node 569:5042）の #7C0002 に合わせる */
.btn--5:hover {
  background: var(--color_main_dark);
}


/* ============================================================
   3. 見出し
   h2（node 99:1305）= .section__head ＋ .section__title
   h3（node 99:1311）= .heading3 ／ h3_2（node 489:10515）= .heading3--2
   head_01（node 110:1890）= .heading-01
   sub_head（node 111:426）= .sub-head
   ※ .section__head / .section__title は common.css（実物）の英字見出し用の値を
     本案件の Figma 値に差し替えている。
   ============================================================ */
.section__head {
  margin-bottom: 4rem;
  text-align: center;
}
.section__title {
  padding: 2.3rem 2.5rem 1.9rem; /* 下は 4px ボーダー分を差し引き（枠内ストローク） */
  background: #fff;
  border-bottom: 4px solid var(--color_main);
  color: var(--color_dark);
  font-family: var(--font_jp);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}

.heading3,
.heading3--2 {
  margin-bottom: 3rem;
  padding: .8rem 2rem;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .05em;
}
.heading3 {
  background: var(--color_main);
}
.heading3--2 {
  background: var(--color_dark);
}

.heading-01 {
  padding-bottom: 1.6rem;
  text-align: center;
}
.heading-01__title {
  color: var(--color_dark);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}
.heading-01__label {
  margin-top: .8rem;
  color: var(--color_main);
  font-family: var(--font_eng);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .1em; /* Figma 実測 15px / 1.5 = 0.1em（他の文字と異なる） */
}

.sub-head {
  display: flex;
  justify-content: center;
  padding-bottom: 5rem;
}
.sub-head__text {
  padding: 1.1rem 2.7rem; /* 1px ボーダー分を差し引き（Figma 枠内ストローク） */
  border: 1px solid var(--color_main);
  color: var(--color_main);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: center;
}

/* SP は専用カンプ（node 507:4423）の実測に合わせる。PC の値をそのまま縮めずに置き換える。
     head_01   345×63（見出し 18px・英字ラベル 10px・下 16px）
     sub_head  枠 345×56（横幅いっぱい・pad 8/10・文字 14px・テキスト幅 325px） */
@media (max-width: 768px) {
  .heading-01__title {
    font-size: 1.8rem; /* Figma SP 18px（PC は 32px） */
  }
  .heading-01__label {
    font-size: 1rem; /* Figma SP 10px（PC は 15px） */
  }
  .sub-head__text {
    width: 100%;
    padding: .7rem .9rem; /* Figma SP pad(8,10,8,10) から 1px ボーダー分を差し引き。テキスト幅が 325px になる */
    font-size: 1.4rem; /* Figma SP 14px（PC は 16px） */
  }
}


/* ============================================================
   4. タグ（Figma tag_icon_01 / 02 / 03・45×25・角丸2px）
   幅は内容依存（Figma も HUG。実インスタンスは 108px / 133px などばらつく）
   ============================================================ */
.tag-icon,
.tag-icon--2,
.tag-icon--3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  padding: 0 1rem;
  border-radius: 2px;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
  white-space: nowrap;
}
.tag-icon {
  background: var(--color_main);
  color: #fff;
}
.tag-icon--2 {
  padding: 0 .9rem; /* 1px ボーダー分を差し引き（Figma 枠内ストロークで幅 45px） */
  background: #fff;
  border: 1px solid var(--color_main);
  color: var(--color_main);
}
.tag-icon--3 {
  background: var(--color_dark);
  color: #fff;
}


/* ============================================================
   5. フッターリンク（Figma footer_link・node 117:615・165×18）
   矢印 ar_3（10×10）＋ gap 5px ＋ 13px テキスト
   ※ common.css の `.footer__list a`（白文字）に勝つため2クラス指定にしている
   ============================================================ */
.footer__link,
.footer__list .footer__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--color_dark);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
  text-decoration: none;
  transition: var(--transition);
}
.footer__link:hover,
.footer__list .footer__link:hover {
  color: var(--color_main); /* hover 指定はカンプに無し・主色に寄せた（要確認） */
}


/* ============================================================
   6. ラジオ（Figma radio・node 26:210・24×24）
   ※ 色（#616161 / #A1A1A1 / #E7E7E7）は Figma のコンポーネント既定色で、
     本案件のカラースタイルではない。フォームはスコープ外のため実測値のまま（要確認）
   ============================================================ */
.radio,
.radio--checked,
.radio--disabled {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #A1A1A1;
}
.radio--checked {
  background: #616161;
  border-color: #616161;
}
.radio--checked::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.2rem;
  height: 1.2rem;
  margin: -.6rem 0 0 -.6rem;
  border-radius: 50%;
  background: #fff;
}
.radio--disabled {
  background: var(--color_light);
  border-color: #E7E7E7;
}


/* ============================================================
   7. 下層ページ用（トップでは使わない）
   page_title（node 99:1231）1440×200・cta_gr グラデーション＋白文字
   page_title2（node 102:1671）1440×200・#D2D2D2＋黒文字（カテゴリ＋タイトル）
   bread（node 99:1246）1200×102
   想定マークアップ:
     <div class="page-title"><h1 class="page-title__title">…</h1></div>
     <div class="page-title page-title--2">
       <p class="page-title__cat">…</p><h1 class="page-title__title">…</h1></div>
   ============================================================ */
/* 高さ・文字サイズはコラムページで初めて使うためリキッドに直した。
   上限は 1440px カンプの実測（帯200px・タイトル40px・カテゴリー20px・--2 のタイトル30px）で、
   vw は「実測px / 14.4」。下限（帯120px・タイトル24px・カテゴリー15px・--2 のタイトル22px）は
   SP のカンプが無いため当方設計。 */
.page-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: clamp(12rem, 13.89vw, 20rem);
  padding: 0 2rem;
  background: var(--gradient);
  color: #fff;
  text-align: center;
}
.page-title__title {
  font-size: clamp(2.4rem, 2.78vw, 4rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}
.page-title__cat {
  margin-bottom: 1rem;
  font-size: clamp(1.5rem, 1.39vw, 2rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
}
.page-title--2 {
  background: var(--color_gray);
  color: var(--color_dark);
}
.page-title--2 .page-title__title {
  font-size: clamp(2.2rem, 2.09vw, 3rem);
  font-weight: 500;
}

.bread {
  /* 内容幅1200pxの内側の枠。文字サイズ等は .breadcrumb-wrap 側に集約（二重管理防止） */
  max-width: calc(var(--sectionWidth) + 8rem);
  margin: 0 auto;
  padding: 0 clamp(2rem, 2.7778vw, 4rem); /* 1440px でちょうど 40px＝内容幅 1200px */
}

/* パンくずのリンクにホバーの指定が無く、押せることが分からなかったため
   2026-08-20 に追加。文字リンクの既定（ヘッダーのGナビ等と同じ主色）にそろえる。 */
.bread a {
  transition: var(--transition, all .3s ease);
}

.bread a:hover {
  color: var(--color_main);
}


/* ============================================================
   8. ヘッダー（PC・Figma header node 99:314・1440×80）
   ロゴ左20px / 右端10px、gnavi と CTA の間 30px、区切り線 1px×20px #EAEAEA
   カンプに影は無いため common.css の box-shadow は消している
   ============================================================ */
.header {
  background: #fff;
  box-shadow: none;
}
.header__inner {
  max-width: var(--sectionWidth_wide);
  margin: 0 auto;
  padding: 0 1rem 0 2rem;
}
.header__brand {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.header__tagline {
  color: var(--color_dark);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
}
.header__logo {
  font-size: 1rem; /* h1 の既定サイズを無効化（中身は画像のみ） */
  line-height: 1;
}
/* common.css の `.header__logo img`（height clamp）に勝たせるため a を挟んだ指定 */
.header__logo a img {
  width: 22.8rem;
  height: 3.8rem;
  object-fit: cover; /* 元画像 352×80。Figma も横幅基準で上下を切っている */
}
.header__nav {
  gap: clamp(1.6rem, 2.08vw, 3rem); /* 1440px で Figma の 30px */
}
.header__list {
  align-items: center;
  gap: clamp(.8rem, 1.04vw, 1.4rem); /* 1440px で Figma の 14px */
}
.header__item {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 1.04vw, 1.4rem);
}
.header__item + .header__item::before {
  content: "";
  flex: 0 0 auto;
  width: 1px;
  height: 2rem;
  background: var(--color_line);
}
/* SP ドロワー限定の項目（2026-08-24 追加の「お知らせ」・header.php の 'sp_only'）。
   ケンネット様のご依頼がドロワーとフッターの2か所のため、PC 幅では出さない。
   併せて実測（Chrome・Noto Sans JP 読み込み済み）したところ、7項目にすると
   PC 幅の下限＝9. の切替幅 1330px の直上でロゴ帯とナビの間隔が 9px まで詰まり、
   カンプの 20px を割り込む（1440px なら 115px 余る）。この点でも PC には足さない。
   ドロワーで出す指定は 9.（@media max-width: 1329px）側に置いている。
   区切り線は項目自身の ::before なので、非表示にすれば線も一緒に消える。 */
.header__item--sp {
  display: none;
}
/* common.css の `.header__list a` に勝つため2クラス指定 */
.header__list .header__link {
  color: var(--color_dark);
  font-family: var(--font_jp);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
  text-decoration: none;
  transition: var(--transition);
}
.header__list .header__link:hover {
  color: var(--color_main); /* Figma hover フレーム node 569:4948 */
}

/* ヘッダーCTA（Figma btn node 1:93・290×60・白地＋2px #B80003＋影 0 5 20 rgba(0,0,0,.1)） */
.header__cta {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 1.8rem;
  width: 29rem;
  height: 6rem;
  padding-left: 2.1rem; /* Figma 実測 23px から枠線 2px を差し引き */
  background: #fff;
  border: 2px solid var(--color_main);
  color: var(--color_main);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
  text-decoration: none;
  box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
  transition: var(--transition);
}
.header__cta-icon {
  flex: 0 0 auto;
  width: 3.2rem;
  height: 3.2rem;
  background-color: currentColor;
  -webkit-mask: url("../images/header_mail_icon.svg") no-repeat center / contain;
  mask: url("../images/header_mail_icon.svg") no-repeat center / contain;
}
/* hover は Figma hover フレーム node 569:4969（塗り反転） */
.header__cta:hover {
  background: var(--color_main);
  color: #fff;
}

/* ドロワーボタン（SP のみ表示・Figma menu_btn node 173:771・70×64／バー 30×4 間隔12） */
.header__drawer-btn {
  gap: 1.2rem;
  width: 7rem;
  height: 6.4rem;
  align-items: center;
}
.header__drawer-btn .header__bar {
  display: block;
  width: 3rem;
  height: .4rem;
  background: var(--color_main);
  transition: var(--transition);
}
/* 開いた状態（common.js が付与する header__drawer-btn--close）。
   Figma の × は同じ2本を中心へ寄せて ±45度。
   common.css は3本構成で2本目を opacity:0 にするため、
   結合順に関わらず勝つよう3クラス＋擬似クラスで指定している。 */
.header__drawer-btn.header__drawer-btn--close .header__bar:nth-child(1) {
  opacity: 1;
  transform: translateY(.8rem) rotate(45deg);
}
.header__drawer-btn.header__drawer-btn--close .header__bar:nth-child(2) {
  opacity: 1;
  transform: translateY(-.8rem) rotate(-45deg);
}


/* ============================================================
   9. ヘッダー（SP・Figma sp_header node 173:765・375×88）と
      ドロワー（Figma menu node 173:1032・375×756）
   上部 24px にキャッチ帯（下1px #EAEAEA）、下段 64px にロゴとメニューボタン

   ■ 切替幅 1329px について（要確認）
   PC ヘッダーは Figma 実測どおりに並べると横 1330px 必要
   （左20＋ロゴ298＋余白20＋gnavi661＋30＋CTA290＋右10）。
   1329px 以下では文字が2行に折れて崩れるため、その幅から SP と同じ
   ドロワー表示に切り替えている。カンプは 1440 と 375 の2種しかなく
   タブレット幅の指定が無いため、この切替幅は当方判断。
   併せて --header_height も 8.8rem に切り替える（main の上余白と連動）。
   ============================================================ */
@media (max-width: 1329px) {
  :root {
    --header_height: 8.8rem;
  }
  .header__tagline {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.4rem;
    background: #fff;
    border-bottom: 1px solid var(--color_line);
  }
  .header__inner {
    height: 6.4rem;
    margin-top: 2.4rem;
    padding: 0 0 0 1rem;
  }
  .header__brand {
    gap: 0;
  }
  .header__logo a img {
    width: 21rem;
    height: 3.5rem;
  }
  .header__drawer-btn {
    display: flex; /* 769px 以上でも 1329px までは出す（common.css は 768px 以下のみ） */
  }

  /* ドロワー本体。開閉は common.js が .header__nav--open を toggle。
     common.css の同等指定は 768px 以下だけなので、ここで全て定義する */
  .header__nav {
    position: fixed;
    top: var(--header_height);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: var(--gradient); /* Figma cta_gr（#DA3106→#B80003・水平） */
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .header__nav.header__nav--open {
    opacity: 1;
    visibility: visible;
  }
  .header__list {
    flex-direction: column;
    align-items: stretch; /* PC の align-items:center を解除（列方向では左右中央寄せになる） */
    gap: 1.6rem;
    margin: 5rem 2rem 3rem; /* Figma link フレーム pad 50/20/30/20 */
  }
  .header__item,
  .header__item + .header__item {
    display: block;
    padding-bottom: 1.5rem; /* Figma pad 16px から枠内ストローク 1px を差し引き（1行 40px） */
    border-bottom: 1px solid rgba(255, 255, 255, .2);
  }
  .header__item + .header__item::before {
    content: none; /* PC の区切り線は出さない */
  }
  .header__item--sp {
    display: block; /* 8. の display:none を解除。ドロワーでは他の項目と同じ扱いで出す */
  }
  .header__list .header__link {
    position: relative;
    display: block;
    min-height: 2.4rem; /* Figma の1行は矢印(24px)基準。文字の行高 22.4px より高い */
    padding: 0 0 0 2.9rem; /* 矢印 24px ＋ gap 5px */
    color: #fff;
    font-size: 1.6rem;
    line-height: 1.4;
    border-bottom: 0;
  }
  /* 行頭の白矢印（Figma ar_white 24×24・node 183:1044。
     書き出し sp_menu_arrow_white.svg と同一図形のため ar_white の素材を共用） */
  .header__list .header__link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2.4rem;
    height: 2.4rem;
    background: url("../images/finduse_arrow_white_btn.svg") no-repeat center / 2.4rem 2.4rem;
  }
  .header__cta {
    display: none; /* SP は sp-menu.php の2ボタンを使う */
  }
}


/* ============================================================
   10. ドロワー内のボタン2本（template-parts/sp-menu.php）
   Figma btn_area node 324:2196（295×170・gap 10）
   1本目 295×80 #7C0002・アイコン56×56（左12px）・白矢印（右10px）
   2本目 295×80 白地・アイコン46×46（左17px）・赤矢印（右10px）
   ============================================================ */
.sp-menu {
  display: none;
}
/* 切替幅はヘッダー（9.）と同じ 1329px */
@media (max-width: 1329px) {
  .sp-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0 2rem 3rem;
  }
  .sp-menu__btn {
    position: relative;
    display: flex;
    align-items: center;
    width: 29.5rem;
    max-width: 100%;
    height: 8rem;
    padding: 0 3.4rem 0 7rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .05em;
    text-decoration: none;
    transition: var(--transition);
  }
  .sp-menu__btn--rental {
    background: var(--color_main_dark);
    color: #fff;
  }
  .sp-menu__btn--contact {
    background: #fff;
    color: var(--color_main);
  }
  .sp-menu__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: currentColor;
  }
  .sp-menu__icon--device {
    left: 1.2rem;
    width: 5.6rem;
    height: 5.6rem;
    -webkit-mask: url("../images/sp_menu_phone_icon.svg") no-repeat center / contain;
    mask: url("../images/sp_menu_phone_icon.svg") no-repeat center / contain;
  }
  .sp-menu__icon--mail {
    left: 1.7rem;
    width: 4.6rem;
    height: 4.6rem;
    -webkit-mask: url("../images/sp_menu_mail_icon.svg") no-repeat center / contain;
    mask: url("../images/sp_menu_mail_icon.svg") no-repeat center / contain;
  }
  .sp-menu__btn .ar,
  .sp-menu__btn .ar--white {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
  }
}


/* ============================================================
   11. フッター（Figma footer node 99:324・1440×316）
   白地＋文字 #111111、コピーライト帯だけ #B80003＋白文字。
   内容幅 1200px（左ブロック 484px ／ リンク2列 gap 30px・各列右に 1px #EAEAEA）
   ※ common.css は赤一色フッターのため background と padding を上書きする。
     結合順が入れ替わっても効くよう .footer は2重クラス指定にしている。
   ============================================================ */
.footer.footer {
  background: #fff;
  /* 画面下固定 CTA（.floating-cta・PC 12rem／SP 6.4rem）が最下部に重なるため、
     その高さ分の余白を下に確保する。確保しないとフッターの SNS や
     コピーライト帯が帯の下に隠れる。SP 値は下のメディアクエリで上書き。
     CTA の高さがリキッド（clamp）なので、同じ式で追随させる。 */
  padding: 0 0 clamp(8rem, 8.3333vw, 12rem);
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: calc(var(--sectionWidth) + 8rem);
  margin: 0 auto;
  padding: 5rem 4rem; /* 1280px 以上で内容幅がカンプどおり 1200px になる */
}
.footer__brand {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}
.footer__logo {
  margin-bottom: .8rem;
}
/* common.css の `.footer__logo img`（height 8rem）に勝たせるため a を挟んだ指定 */
.footer__logo a img {
  width: 26.2rem;
  height: 5.9rem;
  object-fit: cover; /* 元画像 352×80 */
}
.footer__info {
  margin-bottom: 2rem;
}
.footer__info .footer__address,
.footer__info .footer__tel {
  color: var(--color_dark);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
}
.footer__sns {
  display: flex;
  gap: 0;
}
.footer__sns .footer__sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  color: inherit;
  transition: var(--transition);
}
.footer__sns .footer__sns-link:hover {
  opacity: .7;
}
.footer__sns .footer__sns-link img {
  width: 3.3rem;
  height: 3.3rem;
}
.footer__sns .footer__sns-link--x img {
  width: 5rem;
  height: 5rem; /* X は 50×50 で書き出し済み（枠内の余白を含む） */
}
.footer__nav {
  display: flex;
  align-items: stretch;
  gap: 3rem;
}
.footer__list {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding-right: 1.9rem; /* Figma pad 20px から枠内ストローク 1px を差し引き（列幅 157px） */
  border-right: 1px solid var(--color_line);
}
/* li を flex にして body 由来の行高（1.8）が行の高さを膨らませるのを防ぐ。
   Figma の1行は 18px（13px × 1.4） */
.footer__list li {
  display: flex;
}
.copyright {
  padding: 1rem 1.6rem;
  background: var(--color_main);
  border-top: 0;
  color: #fff;
  font-family: var(--font_eng);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: center;
}

/* <small> はブラウザ既定で 0.8 倍・太さ 400 になる。
   Figma の copyright（12px / 行高16.8 / 字送り0.6 / 太さ500）に戻す。
   2026-08-13 CEO 指示のカンプ厳密一致で発見（実測 10px・太さ400 になっていた） */
.copyright small {
  font-size: inherit;
  font-weight: inherit;
}
/* 🚨 769〜1199px のフッター（2026-08-26 CEO 指摘で修正）。
   .footer__brand が flex:0 0 auto ＝縮まない指定だったため、幅が足りなくなると
   しわ寄せが全部リンク列（.footer__nav）へ行き、1199px を下回るあたりから
   「イヤホンガイド／とは」どころか1文字ずつ折り返す状態になっていた（769px で実測）。
   リンク列は中身の幅を保ち（flex:0 0 auto）、余った幅の調整は住所側で吸収させる
   （住所は折り返して問題ない文字列）。768px 以下は下の縦積みが引き継ぐ。 */
@media (max-width: 1199px) {
  /* 左右の余白を 4rem→2rem に詰めて、ロゴ（262px）が縮まないだけの幅を残す */
  .footer__inner {
    padding-inline: 2rem;
  }
  .footer__brand {
    flex: 0 1 auto;
    min-width: 0;
  }
  .footer__nav {
    flex: 0 0 auto;
  }
}


/* SP フッターはカンプ無し・当方設計（PC の要素を縦積みにするだけ） */
@media (max-width: 768px) {
  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 4rem;
    padding: 4rem 2rem;
  }
  .footer__logo a img {
    width: 21rem;
    height: 4.8rem;
  }
  /* 2列を左右で等分にする（2026-08-18 CEO 指示「50 / 50 にして」）。
     幅を中身まかせにすると、文字数の多い右列が広がり左列の項目が
     「イヤホンガイド／とは」のように折り返してバランスが崩れる。 */
  .footer__nav {
    display: grid;              /* 2列をきっちり半分ずつにする（flex だと余白の差で列幅がずれる） */
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    width: 100%;
  }
  .footer__list {
    gap: 1.2rem;
    padding-right: 1.6rem;
    min-width: 0;  /* 長い項目で列がはみ出さないための下限解除 */
  }
  .footer__list:last-child {
    border-right: 0;
    padding-right: 0; /* 区切り線が無い列は右の余白も要らない。項目名に使える幅を広げる */
  }
}


/* ============================================================
   12. 画面下固定CTA（Figma contact node 490:4257・1440×120）
   デザイナー指示（Figma memo node 569:5122）
   「ある程度画面スクロールしたら表示。（画面下固定）」
   閾値はカンプに記載がないためページトップボタンと同じ 300px を採用（要確認）。
   表示切替は assets/js/floating-cta.js が .floating-cta--show を付与する。
   ============================================================ */
.floating-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90; /* ヘッダー(100) より下・ページトップ(50) より上 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 2.0833vw, 3rem); /* 1440px で Figma の 30px */
  height: clamp(8rem, 8.3333vw, 12rem); /* 1440px で Figma の 120px */
  padding: clamp(1.2rem, 1.3889vw, 2rem) clamp(1.6rem, 5.8333vw, 8.4rem);
  background: var(--color_main_light);
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: transform .4s ease, opacity .4s ease, visibility .4s ease;
}
.floating-cta--show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.floating-cta__tel {
  flex: 0 0 auto; /* Figma title-wrap node 490:4258 は 262px。幅は中身（3行の最長行）に任せる */
  white-space: nowrap; /* カンプは3行とも1行。折り返させない */
}
.floating-cta__tel-label {
  color: var(--color_dark);
  font-size: clamp(1.1rem, .8333vw, 1.2rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}
.floating-cta__tel-num {
  display: flex;
  align-items: center;
  gap: clamp(.2rem, .2778vw, .4rem);
  color: var(--color_main);
  font-family: var(--font_eng); /* Figma node 490:4274 は Roboto 700 */
  font-size: clamp(2rem, 2.0833vw, 3rem); /* 1440px で Figma の 30px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .05em;
}
.floating-cta__tel-icon {
  flex: 0 0 auto;
  width: clamp(2.2rem, 2.2222vw, 3.2rem);
  height: clamp(2.2rem, 2.2222vw, 3.2rem);
  background-color: currentColor;
  /* Figma 書き出し名は floating_mail_icon_small.svg だが中身は電話アイコン（node 490:4264） */
  -webkit-mask: url("../images/floating_mail_icon_small.svg") no-repeat center / contain;
  mask: url("../images/floating_mail_icon_small.svg") no-repeat center / contain;
}
.floating-cta__tel-hours {
  color: var(--color_dark);
  font-size: clamp(1.1rem, .8333vw, 1.2rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
}
.floating-cta__btns {
  display: flex;
  flex: 1 1 auto;
  gap: clamp(1rem, 1.3889vw, 2rem);
  max-width: 98rem; /* Figma wrap node 490:4277 の 980px（480＋20＋480） */
}
.floating-cta__btn {
  position: relative;
  display: flex;
  flex: 1 1 50%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* アイコン（左）と矢印（右）は絶対配置のため、その専有幅を左右均等の padding で
     確保する。アイコンの左位置・幅と同じ式で算出しているので、幅が変わっても
     テキストがアイコン・矢印の下へ潜り込むことがない。左右均等のため
     1440px でのテキストの中央位置はカンプのまま変わらない。 */
  padding: 0 calc(clamp(1rem, 1.3889vw, 2rem) + clamp(3.6rem, 3.75vw, 5.4rem) + .8rem);
  max-width: 48rem;
  height: clamp(6rem, 5.5556vw, 8rem);
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3);
  text-decoration: none;
  transition: var(--transition);
}
.floating-cta__btn--rental {
  background: var(--color_main);
  color: #fff;
}
.floating-cta__btn--rental:hover {
  background: var(--color_main_dark); /* Figma hover フレーム node 569:4991 に合わせる */
}
.floating-cta__btn--contact {
  background: #fff;
  color: var(--color_main);
}
.floating-cta__btn--contact:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px var(--color_main);
}
.floating-cta__title {
  font-size: clamp(1.4rem, 1.3889vw, 2rem); /* 1440px で Figma の 20px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}
.floating-cta__sub {
  margin-top: clamp(.6rem, .6944vw, 1rem);
  font-size: clamp(1.1rem, .9028vw, 1.3rem); /* 1440px で Figma の 13px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}
.floating-cta__icon {
  position: absolute;
  left: clamp(1rem, 1.3889vw, 2rem);
  top: 50%;
  width: clamp(3.6rem, 3.75vw, 5.4rem);
  height: clamp(3.6rem, 3.75vw, 5.4rem);
  transform: translateY(-50%);
  background-color: currentColor;
}
.floating-cta__icon--device {
  -webkit-mask: url("../images/floating_phone_icon.svg") no-repeat center / contain;
  mask: url("../images/floating_phone_icon.svg") no-repeat center / contain;
}
.floating-cta__icon--mail {
  -webkit-mask: url("../images/floating_mail_icon.svg") no-repeat center / contain;
  mask: url("../images/floating_mail_icon.svg") no-repeat center / contain;
}
.floating-cta__btn .ar,
.floating-cta__btn .ar--white {
  position: absolute;
  top: 50%;
  right: clamp(1rem, 1.3889vw, 2rem);
  transform: translateY(-50%);
}
/* ページトップボタンは固定CTAと同じ 300px で出るため、常に帯の上へ逃がす */
.pagetop {
  bottom: calc(clamp(8rem, 8.3333vw, 12rem) + 1.6rem); /* 固定CTAの高さ＋16px */
  /* ページ最下部ではコピーライト帯（背景 --color_main）と重なる位置に来る。
     ボタンも同色のため、白い縁を1本回して溶けないようにする。
     白背景の上では見えないので、他のスクロール位置での見た目は変わらない。 */
  box-shadow: 0 0 0 2px #fff;
}
/* 1219px 以下：ボタンの実幅が補足文の1行分に足りなくなり2行に折れるため、
   補足文を落として「アイコン＋見出し＋矢印」にする。 */
@media (max-width: 1219px) {
  .floating-cta__sub {
    display: none;
  }
}
/* 1023px 以下：電話ブロックを置く幅が無くなるため、2ボタン横並びの簡易版に切り替える
   （カンプ無し・当方設計。従来 768px 以下で使っていたものを、この幅から適用する）。 */
@media (max-width: 1023px) {
  /* 簡易版の固定 CTA の高さに合わせてフッターの下余白も同じ式で追随させる。 */
  .footer.footer {
    padding-bottom: clamp(6.4rem, 8.3333vw, 8.6rem);
  }
  .floating-cta {
    gap: 0;
    height: clamp(6.4rem, 8.3333vw, 8.6rem); /* 1023px で PC 版と同じ高さになり段差が出ない */
    padding: 0;
  }
  .floating-cta__tel {
    display: none;
  }
  .floating-cta__btns {
    flex: 1 1 auto;
    gap: 0;
    max-width: none;
  }
  .floating-cta__btn {
    flex: 1 1 50%;
    max-width: none;
    height: clamp(6.4rem, 8.3333vw, 8.6rem);
    padding: 0 .8rem 0 calc(clamp(2.4rem, 3.75vw, 3.84rem) + .8rem); /* 375px で従来と同じ 3.2rem */
    box-shadow: none;
  }
  .floating-cta__title {
    font-size: clamp(1.3rem, 1.7vw, 1.8rem);
    line-height: 1.3;
    letter-spacing: 0; /* 375px 幅で「お問い合わせ・見積相談」が1行に収まる範囲 */
    text-align: center;
  }
  .floating-cta__icon {
    left: .8rem;
    width: clamp(2.4rem, 3.75vw, 3.84rem); /* 1023px で PC 版と同じ大きさ */
    height: clamp(2.4rem, 3.75vw, 3.84rem);
  }
  .floating-cta__btn .ar,
  .floating-cta__btn .ar--white {
    display: none;
  }
  .pagetop {
    bottom: calc(clamp(6.4rem, 8.3333vw, 8.6rem) + 1.6rem);
  }
}
/* 769〜1023px（タブレット横〜小さめのPCウインドウ）：
   ボタンが1本あたり 400px 前後まで広がるため、アイコンを左端に絶対配置したままだと
   見出しから大きく離れて見える。この幅だけアイコンを見出しの隣に並べて中央に寄せる。
   768px 以下（従来のSP）は見た目を変えないため、この指定の対象外にしている。 */
@media (min-width: 769px) and (max-width: 1023px) {
  .floating-cta__btn {
    flex-direction: row;
    gap: clamp(.8rem, 1.2vw, 1.6rem);
    padding: 0 1.6rem;
  }
  .floating-cta__icon {
    position: static;
    flex: 0 0 auto;
    transform: none;
  }
}