/* crosshack.jp のスタイル（2026-11-11 整理）
   構成：1. 書体  2. 共通の値（変数）  3. 土台  4. 部品（ヘッダー〜フッター）  5. 区画ごとの設定  6. スマホの並び替え
         7. ヘッダー・フッターのスマホの形（979px まで）  8. タブレット縦（768〜979px）
   - 同じ種類の要素は、同じ部品・同じ変数で決まるようにしてある。値を変えるときは「2. 共通の値」か「5. 区画ごとの設定」を直す。
   - PC は Wix のデスクトップ版（幅 980px の枠）の寸法。スマホは Wix のモバイル版（幅 320px 基準）の寸法で、
     1rem = 「320px 幅のときの 10px」として画面幅に比例して拡大する。スマホの値は、変数を上書きするだけで切り替わる。
   - タブレット縦（768〜979px）は、ボディが PC（横幅だけ詰める）、ヘッダーとフッターがスマホの形（2026-11-12）。
   - 行の間隔は、Mac で見た Wix の実際の間隔に合わせてある（Wix は指定値より広く表示されることがあるため。2026-11-10 測定） */

/* ========== 1. 書体 ========== */
/* 英字だけ Helvetica を使い、日本語は端末の標準フォントにする（Wix と同じ見え方）。
   Wix の英字は Helvetica（Neue ではない）。Helvetica Neue は字の幅が約4%狭く詰まって見えるので、Mac の Helvetica を先に使う。
   （2026-11-10 Mac で幅を実測：Wix 709.9px／Helvetica 709.2px／Helvetica Neue 682.0px） */
@font-face { font-family: "XH Latin"; font-weight: 400; src: local("Helvetica-Light"), local("Helvetica Light"), local("HelveticaNeue-Light"), local("Helvetica Neue Light");
  unicode-range: U+0000-024F, U+2000-206F, U+20A0-20CF, U+2100-214F; }
@font-face { font-family: "XH Latin"; font-weight: 700; src: local("Helvetica-Bold"), local("Helvetica Bold"), local("HelveticaNeue-Bold"), local("Helvetica Neue Bold");
  unicode-range: U+0000-024F, U+2000-206F, U+20A0-20CF, U+2100-214F; }
/* 細字だけを持つ書体名。太字指定にすると、ブラウザが細字を太らせて表示する（Wix のヘッダーのメニューと同じ見え方） */
@font-face { font-family: "XH Latin Light"; font-weight: 400; src: local("Helvetica-Light"), local("Helvetica Light"), local("HelveticaNeue-Light"), local("Helvetica Neue Light");
  unicode-range: U+0000-024F, U+2000-206F, U+20A0-20CF, U+2100-214F; }
/* 標準の太さの Helvetica（Wix の会社概要〈日本語〉のステートメントと事業概要で使われている） */
@font-face { font-family: "XH Latin Roman"; font-weight: 400; src: local("Helvetica"), local("HelveticaNeue"), local("Helvetica Neue");
  unicode-range: U+0000-024F, U+2000-206F, U+20A0-20CF, U+2100-214F; }

/* ========== 2. 共通の値（PC。スマホの値は 6. の先頭で上書き） ========== */
:root {
  /* 書体 */
  --ff-ja: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  --ff: "XH Latin", Helvetica, "Helvetica Neue", Arial, var(--ff-ja);
  --ff-nav: "XH Latin Light", Helvetica, "Helvetica Neue", Arial, var(--ff-ja);
  --ff-roman: "XH Latin Roman", Helvetica, "Helvetica Neue", Arial, var(--ff-ja);

  /* 色 */
  --green: #537e1e;                          /* rgb(83,126,30) */
  --band-white: rgba(255, 255, 255, .25);
  --band-gray: rgba(204, 204, 204, .25);
  --band-green: rgba(83, 126, 30, .25);

  /* 文字の大きさ／行の間隔（役割ごと） */
  --hero-size: 48px;   --hero-lh: 74px;    /* キービジュアルのキャッチフレーズ（英語は 5. で 71px） */
  --title-size: 36px;  --title-lh: 50.4px; /* 区画の見出し（h2）・お問い合わせのページ見出し（h1） */
  --sub-size: 24px;    --sub-lh: 36px;     /* 小見出し：カード・プランの見出し、会社名、代表者名 */
  --lead-size: 20px;   --lead-lh: 32px;    /* 導入文 */
  --cta-size: 20px;    --cta-lh: 30px;     /* ページ下の誘導文 */
  --body-size: 18px;   --body-lh: 27px;    /* 本文（会社概要の表、略歴） */
  --card-size: 18px;   --card-lh: 27.5px;  /* カードの本文 */
  --plan-size: 18px;   --plan-lh: 34px;    /* 料金プランの箇条書き */
  --statement-size: 24px; --statement-lh: 36px; /* 会社概要のミッション・ビジョン */
  --btn-size: 20px;

  /* 余白 */
  --header-h: 80px;
  --band-pt: 76px;     --band-pb: 50px;    /* 区画の上下 */
  --title-gap: 51px;                       /* 区画の見出しの下（区画によって 5. で変える） */
  --cards-gap: 20px;
  --card-pad: 19px 20px 22px;
  --icon-size: 60px;
  --icon-gap: 5px;                         /* アイコン → カードの本文 */
  --line: 1px solid #000;
}

/* ========== 3. 土台 ========== */
*, *::before, *::after { box-sizing: border-box; }
/* Mac の文字の描き方を Wix と同じにする（指定が無いと、Mac では文字が太めに描かれる） */
html { font-size: 10px; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; font-family: var(--ff); font-weight: 400; color: #000; background: #fff; min-width: 980px; }
h1, h2, h3, p, ul { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea { font-family: inherit; }  /* ボタンや入力欄は、指定しないとページの書体を引き継がない */
a { color: inherit; }
.latin-roman { font-family: var(--ff-roman); }   /* 英字を標準の太さにする（会社概要〈日本語〉のステートメントと事業概要） */
.sp-only { display: none; }
.tab-only { display: none; }   /* タブレット縦（768〜979px）だけで効かせる改行など */

/* 固定の背景（砂紋の写真）。Wix と同じく、スクロールしても動かない */
.page-bg { position: fixed; inset: 0; z-index: -1; background: #fff; }
.page-bg::before { content: ""; position: absolute; inset: 0; background: url(/assets/img/bg-sand.jpg) center top / cover no-repeat; opacity: .2; }

/* ========== 4. 部品 ========== */

/* ---------- ヘッダー ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--header-h); background: rgba(255, 255, 255, .5); }
.site-header__inner { position: relative; width: 980px; height: 100%; margin: 0 auto; }
/* 国旗が右端で切れない幅のときは、ヘッダーの中身だけ左に寄せる（Wix も同じ動き） */
@media (min-width: 980px) and (max-width: 1199px) { .site-header__inner { margin-left: max(0px, min(calc((100vw - 980px) / 2), calc(100vw - 1100px))); } }
.site-header__logo { position: absolute; left: 0; top: 24px; width: 288px; height: 32px; }
.site-header__logo img { width: 288px; height: 32px; }
.gnav { position: absolute; right: 152px; top: 15px; display: flex; gap: 10px; margin-right: 25px; }
.gnav a { font-family: var(--ff-nav); display: block; height: 50px; padding: 0 10px; font-size: 20px; font-weight: 700; line-height: 50px; text-decoration: none; text-align: center; white-space: nowrap; }
.gnav a:hover, .gnav a[aria-current="page"] { color: var(--green); }
.menu-toggle, .sp-menu { display: none; }
/* 三本線のボタンと、メニューの × ボタン（同じ位置・大きさ） */
.menu-toggle, .sp-menu__close { position: absolute; right: 0.6rem; top: 0.5rem; width: 5rem; height: 5rem; padding: 0; border: 0; background: transparent; cursor: pointer; }

/* 日英の切り替え（国旗）。PC はヘッダーの中身の幅（980px）の右外に置く（Wix と同じ位置） */
.lang-switch { display: flex; gap: 21px; }
.lang-switch a { display: block; width: 24px; height: 24px; border-radius: 50%; }
.lang-switch img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.lang-switch--pc { position: absolute; left: 1011px; top: 28px; }
.lang-switch--sp { display: none; }

main { padding-top: var(--header-h); }
.is-home main { padding-top: 0; }

/* ---------- 黒いボタン（ヘッダーの「お問い合わせ」も同じ部品） ---------- */
/* マウスを乗せたとき：背景は透明、枠と文字は黒（Wix と同じ） */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 280px; height: 60px; background: #000; border: 2px solid #000; color: #fff;
  font-size: var(--btn-size); font-weight: 700; text-decoration: none; }
.btn:hover { background: transparent; color: #000; }
.btn svg { width: 20px; height: 20px; fill: currentColor; }
.btn--small { width: 250px; height: 50px; }
.btn--header { position: absolute; right: 0; top: 17px; width: 152px; height: 45px; font-size: 18px; }

/* ---------- キービジュアル ---------- */
.hero { position: relative; display: flex; align-items: center; justify-content: center; height: 240px; background: #ccc center / cover no-repeat; color: #fff; text-align: center; }
/* 影は背景に対して読みやすくするため（Wix と同じ値） */
.hero h1 { font-size: var(--hero-size); font-weight: 700; line-height: var(--hero-lh); text-shadow: 0 4px 5px rgba(0, 0, 0, .4); }
.hero--home { height: 560px; padding-top: var(--header-h); background-color: #000; overflow: hidden; }
/* ホームの画像は Wix と同じく、画面の高さいっぱいの大きさで中央を切り取り、スクロールに合わせてゆっくり動かす
   （画像は見出しの5分の1の速さで上に動く。動きは site.js が --hero-shift に入れる） */
.hero--home::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100vh; background: url(/assets/img/hero-home.jpg) center / cover no-repeat;
  transform: translateY(var(--hero-shift, 0px)); will-change: transform; }
.hero--home h1 { position: relative; }
.hero--plans { background-image: url(/assets/img/hero-plans.jpg); }
.hero--projects { background-image: url(/assets/img/hero-projects.jpg); }
.hero--company { background-image: url(/assets/img/hero-company.jpg); }

/* ---------- 区画（帯）・見出し・導入文 ---------- */
.band { padding: var(--band-pt) 0 var(--band-pb); text-align: center; }
.band--white { background: var(--band-white); }
.band--gray { background: var(--band-gray); }
.band--green { background: var(--band-green); }
.band__inner { width: 880px; margin: 0 auto; }
/* 区画の見出し（h2）とお問い合わせのページ見出し（h1）は同じ見た目 */
.band h2, .contact-page h1 { font-size: var(--title-size); font-weight: 700; line-height: var(--title-lh); }
.band h2 { margin-bottom: var(--title-gap); }
.lead { font-size: var(--lead-size); line-height: var(--lead-lh); }
h2 + .lead { margin-top: -21px; margin-bottom: 51px; }
.lead + h2 { margin-top: 49px; }
.band--intro { padding-top: 50px; }
.band--intro .lead { margin-bottom: 57px; }

/* 小見出し（カード・プランの見出し、会社名、代表者名、お問い合わせ下の会社名）は同じ見た目 */
.card h3, .plan h3, .profile__name, .bio__name, .contact-company { font-size: var(--sub-size); font-weight: 700; line-height: var(--sub-lh); }

/* ---------- 誘導の帯（説明文＋黒いボタン） ---------- */
/* cta = ページの途中の誘導（灰色）、cta--contact = ページ下のお問い合わせへの誘導（緑） */
.cta { padding: 52px 0 52px; text-align: center; }
.cta--contact { padding: 43px 0 54px; }
.cta p { font-size: var(--cta-size); line-height: var(--cta-lh); margin-bottom: 27px; }

/* ---------- カード ---------- */
/* card          = 基本（枠・見出し・本文）。アイコン付きのカードは中に card__icon を置く
   card--text    = 文字だけのカード（会社概要のバリュー・事業概要。事業概要は改行を固定しているため、左右の内側の余白を狭くして幅を確保している）
   card--project = プロジェクト事例（アイコン＋箇条書き）
   card--service = トップの「特徴的なサービス」（バナー付き） */
.cards { display: grid; gap: var(--cards-gap); justify-content: center; text-align: center; }
.cards--3 { grid-template-columns: repeat(3, 280px); }
.cards--2 { grid-template-columns: repeat(2, 430px); }
.card { border: var(--line); padding: var(--card-pad); }
.card p, .card ul { font-size: var(--card-size); line-height: var(--card-lh); }
.card ul { padding-left: 21px; text-align: left; }
.card ul li { margin-bottom: 0; }
.card__icon { width: var(--icon-size); height: var(--icon-size); margin: 8px auto 0; }
.card__icon + p, .card__icon + ul { margin-top: var(--icon-gap); }
.card--text p { margin-top: 11px; }
.card--project { padding-left: 10px; padding-right: 10px; }  /* 2列のカードは左右 10px（3列は 20px） */
.card--project ul { padding-left: 31px; }  /* 箇条書きの書き出しの位置はほかのカードと同じ */

.card--service { padding: 13px 13px 31px; }
/* 本文の行数が左右で違っても「詳しく見る」の高さがそろうよう、ボタンを箱の下端に置く（本文が長いほうの余白は今のまま） */
.card--service { display: flex; flex-direction: column; }
.card--service .btn { align-self: center; margin-top: auto; }
.card--service h3 { margin: 19px 7px 0; }  /* 文字の左右は枠から 20px（箇条書きでない本文の箱。バナーは 15px のまま） */
.card--service p { margin: 9px 7px 20px; }
.svc__banner { display: block; position: relative; width: 400px; height: 80px; margin: 0 auto; }
.svc__banner > img { width: 400px; height: 80px; object-fit: cover; }
.svc__banner .svc__logo { position: absolute; left: 53px; top: 24px; width: 294px; height: 32px; }

/* ---------- 料金プラン ---------- */
.plan { width: 880px; margin: 0 auto 38px; border: var(--line); padding: 19px 20px 17px; text-align: left; }
.plan:last-child { margin-bottom: 0; }
h2 + .lead + .plan { margin-top: 45px; }
.plan h3 { text-align: center; padding-bottom: 8px; border-bottom: var(--line); }
.plan__body { display: flex; gap: 0; margin-top: 17px; }
.plan__body img { flex: none; width: var(--icon-size); height: var(--icon-size); margin-right: 6px; }
.plan__body ul { padding-left: 21px; font-size: var(--plan-size); line-height: var(--plan-lh); margin-top: 0; }
.plan__body li { padding-left: 1px; margin-bottom: 0.6px; }

/* ---------- 会社概要 ---------- */
.statement .band__inner { text-align: left; }
.statement--right .band__inner { text-align: right; }
.statement p { font-size: var(--statement-size); line-height: var(--statement-lh); }

.profile__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; margin-top: 29px; font-size: var(--body-size); line-height: var(--body-lh); }
.profile__grid > :nth-child(odd) { text-align: right; }
.profile__grid > :nth-child(even) { text-align: left; }
.profile__gap { margin-top: 23px; }
.profile__grid a { text-decoration: none; }  /* 電話・メールは Wix と同じく下線なし */

.bio__name { position: relative; display: inline-block; }
/* 名前の右の LinkedIn。リンクに大きさを持たせないと、Safari では画像の幅が 0 になって消える */
.bio__name a { position: absolute; left: calc(100% + 54px); top: 8px; display: block; width: 20px; height: 20px; }
.bio__name img { width: 20px; height: 20px; max-width: none; }
.bio__text { width: 720px; margin: 39px auto 0; text-align: left; font-size: var(--body-size); line-height: var(--body-lh); }
.bio__text p + p { margin-top: 30px; }
.biz a { text-decoration: none; }  /* Wix と同じく下線なし */

/* ---------- お問い合わせ ---------- */
.contact-page { padding: 100px 0 0; text-align: center; }
.contact-page .lead { margin-top: 61px; }
.cform { width: 521px; margin: 52px auto 0; padding: 21px 31px 60px; text-align: left; }
.cform__row { display: flex; gap: 20px; }
.cform__row > * { flex: 1; }
.cform label { display: block; margin-bottom: 9px; font-size: 16px; line-height: 16px; }
.cform label .req { margin-left: 2px; }
.cform input, .cform textarea { display: block; width: 100%; margin-bottom: 20px; padding: 8px 10px; border: var(--line); border-radius: 0; background: #fff;
  font: 400 14px/19.6px var(--ff); color: #000; }
.cform input { height: 40px; }
.cform textarea { height: 120px; resize: vertical; }
.cform input::placeholder, .cform textarea::placeholder { color: #a3a3a3; }
.cform .btn { width: 100%; margin-top: 25px; }
.cform__done { margin-top: 16px; font-size: 16px; text-align: center; }
.cform__hp { position: absolute; left: -9999px; }
.contact-company { margin-top: 0; padding: 24.5px 0 25.5px; background: var(--band-green); }

/* ---------- フッター ---------- */
.site-footer { background: #000; color: #fff; text-align: center; }
.site-footer__inner { position: relative; width: 980px; height: 148px; margin: 0 auto; }
.to-top { position: absolute; left: 475px; top: 14px; width: 30px; height: 14px; }
.to-top svg { display: block; width: 30px; height: 14px; fill: #fff; }
.site-footer__logos { position: absolute; left: 0; right: 0; top: 63px; display: flex; justify-content: space-between; align-items: center; }
.site-footer__logos img { height: 24px; width: auto; }
.site-footer small { position: absolute; left: 0; right: 0; top: 112px; font-size: 13px; letter-spacing: .04em; font-weight: 400; }

/* ========== 5. 区画ごとの設定（Wix で区画ごとに違う値。PC とスマホを並べて書く） ========== */
html[lang="en"] { --hero-lh: 71px; }
.statement { --title-gap: 25px; }
.value     { --title-gap: 25px; }
.value .card { min-height: 195px; padding-bottom: 22px; }
.profile   { --title-gap: 40px; }
.bio       { --title-gap: 40px; }
.biz       { --title-gap: 25px; }
.biz .card { padding: 19px 10px 20px; }

@media (max-width: 767px) {
  html[lang="en"] { --hero-lh: 3rem; }
  .statement { --band-pt: 3.3rem; --band-pb: 2.2rem; --title-gap: 1.1rem; }
  .value     { --title-gap: 2rem; }
  .value .card { min-height: 0; padding: 1.05rem 1rem 1.05rem; }
  .profile   { --title-gap: 1.2rem; }
  .bio       { --title-gap: 1.2rem; }
  .biz       { --band-pb: 2.2rem; --title-gap: 2rem; }
  .biz .card { padding: 1.05rem 0.5rem 1.05rem; }
}

/* ========== 6. スマホ（Wix のモバイル版：幅 320px 基準） ========== */
@media (max-width: 767px) {
  html { font-size: calc(100vw / 32); }
  :root {
    --hero-size: 2rem;     --hero-lh: 3.1rem;
    --title-size: 1.8rem;  --title-lh: 2.52rem;
    --sub-size: 1.6rem;    --sub-lh: 2.4rem;
    --lead-size: 1.3rem;   --lead-lh: 2.05rem;
    --cta-size: 1.3rem;    --cta-lh: 2.1rem;
    --body-size: 1.3rem;   --body-lh: 1.95rem;
    --card-size: 1.2rem;   --card-lh: 1.8rem;
    --plan-size: 1.2rem;   --plan-lh: 2.3rem;
    --statement-size: 1.5rem; --statement-lh: 2.25rem;
    --btn-size: 1.63rem;
    --header-h: 6rem;
    --band-pt: 3.1rem;     --band-pb: 2.1rem;
    --title-gap: 2rem;
    --cards-gap: 2rem;
    --card-pad: 2.1rem 1rem 2rem;
    --icon-size: 6rem;
    --icon-gap: 0.4rem;
  }
  body { min-width: 0; }
  .pc-only { display: none !important; }
  .sp-only { display: block; }

  /* キービジュアル */
  .hero { height: 11.8rem; }
  .hero h1 { padding: 0 1.5rem; text-shadow: 0 0.4rem 0.5rem rgba(0, 0, 0, .4); }
  .is-home main { padding-top: var(--header-h); }
  .hero--home { height: 24rem; padding-top: 0; }
  .hero--home h1 { padding: 0; }
  .hero--home::before { height: 100%; transform: none; }  /* スマホは Wix も動かさず、帯の中で中央を切り取る */
  html[lang="en"] .hero--plans, html[lang="en"] .hero--projects { height: 14.7rem; }

  /* 区画・導入文 */
  .band__inner { width: auto; padding: 0 2rem; }
  .band--intro { padding-top: 3rem; }
  .band--intro .lead { margin-bottom: 0; }
  .lead + h2 { margin-top: 2.35rem; }
  h2 + .lead { margin-top: -0.6rem; margin-bottom: 2rem; }

  /* 誘導の帯・ボタン */
  .cta, .cta--contact { padding: 2.1rem 0 2.1rem; }
  .cta p { margin: 0 2rem 2.2rem; }
  .btn { width: 28rem; height: 4.2rem; }
  .btn--small { width: 15rem; height: 3rem; font-size: 1.4rem; gap: 0.6rem; }
  .btn svg { width: 1.4rem; height: 1.4rem; }

  /* カード */
  .cards, .cards--3, .cards--2 { grid-template-columns: 28rem; }
  .card__icon { margin-top: 0.4rem; }
  .card ul { padding-left: 2.6rem; }
  .card--text p { margin-top: 1.05rem; }
  .card--project { padding: 2.1rem 1rem 2rem; }
  .card--project ul { padding-left: 2.2rem; }
  .card--service { padding: 1rem 1rem 2rem; }
  .card--service h3 { margin: 1.4rem 0 0; }
  .card--service p { margin: 1.1rem 0 1.4rem; }
  .svc__banner { width: 26rem; height: 5rem; }
  .svc__banner > img { width: 26rem; height: 5rem; }
  .svc__banner .svc__logo { left: 2.5rem; top: 1.3rem; width: 21rem; height: 2.3rem; }

  /* 料金プラン */
  .plan { width: auto; margin: 0 0 2rem; padding: 1.1rem 1rem 1.9rem; }
  h2 + .lead + .plan { margin-top: 2.4rem; }
  .plan h3 { padding-bottom: 0.6rem; }
  .plan__body { flex-direction: column; align-items: center; margin-top: 1.1rem; }
  .plan__body img { margin: 0 0 1.2rem; }
  .plan__body ul { align-self: stretch; padding: 0 0 0 1.9rem; }
  .plan__body li { margin-bottom: 0; }

  /* 会社概要 */
  .statement .band__inner, .statement--right .band__inner { text-align: center; }
  .profile__grid { display: block; margin-top: 1.2rem; }
  .profile__grid > * { text-align: center !important; }
  .profile__grid > * + * { margin-top: 1rem; }
  .profile__gap { margin-top: 1rem; }
  .profile__grid a[href^="mailto:"] { display: block; margin-top: 1rem; }  /* スマホの Wix は電話とメールの間が 10px 空いている */
  .bio__name a { left: calc(100% + 3.7rem); top: 0.2rem; width: 2rem; height: 2rem; }
  .bio__name img { width: 2rem; height: 2rem; }
  .bio__text { width: auto; margin-top: 1.2rem; }
  .bio__text p + p { margin-top: 2rem; }

  /* お問い合わせ */
  .contact-page { padding-top: 3.2rem; }
  .contact-page .lead { margin: 2.1rem 2rem 0; }
  .cform { width: auto; margin: 2.3rem 2.2rem 0 1.8rem; padding: 1rem 1rem 5.3rem; }
  .cform__row { display: block; }
  .cform label { font-size: 1.3rem; line-height: 1.3rem; margin-bottom: 1rem; }
  .cform input, .cform textarea { font-size: 1.3rem; line-height: 1.82rem; margin-bottom: 1rem; padding: 0.4rem 0.8rem; }
  .cform input { height: 2.8rem; }
  .cform textarea { height: 10.2rem; }
  .cform .btn { width: 100%; height: 4rem; margin-top: 1rem; }
  .contact-company { padding: 2rem 0; }
}

/* ========== 7. ヘッダーとフッターの「スマホの形」（スマホとタブレット縦：幅 979px まで） ========== */
/* 寸法は rem。スマホは 1rem = 画面幅 / 32、タブレットは 1rem = 13.5px（8. で指定） */
@media (max-width: 979px) {
  /* ヘッダー・メニュー */
  .site-header__inner { width: auto; }
  .site-header__logo { left: 2rem; top: 1.8rem; width: 21.3rem; height: 2.4rem; }
  .site-header__logo img { width: 21.3rem; height: 2.4rem; }
  .gnav, .btn--header, .lang-switch--pc { display: none; }
  .menu-toggle { display: block; }
  .menu-toggle span { position: absolute; left: 1.4rem; width: 2.2rem; height: 0.2rem; background: #000; transition: transform .2s, opacity .2s; }
  .menu-toggle span:nth-child(1) { top: 1.5rem; }
  .menu-toggle span:nth-child(2) { top: 2.4rem; }
  .menu-toggle span:nth-child(3) { top: 3.3rem; }
  /* メニューは右から出る引き出し（Wix と同じ形。左側は暗くなる） */
  .sp-menu { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .55); }
  .menu-open .sp-menu { display: block; }
  .menu-open, .menu-open body { overflow: hidden; }
  .sp-menu__panel { position: absolute; top: 0; right: 0; bottom: 0; width: 21.5rem; background: rgba(238, 238, 238, .95); }
  .sp-menu__close span { position: absolute; left: 1.4rem; top: 2.4rem; width: 2.2rem; height: 0.2rem; background: #000; }
  .sp-menu__close span:nth-child(1) { transform: rotate(45deg); }
  .sp-menu__close span:nth-child(2) { transform: rotate(-45deg); }
  .lang-switch--sp { display: flex; position: absolute; left: 2.3rem; top: 2.95rem; gap: 2.2rem; }
  .lang-switch--sp a { width: 2.2rem; height: 2.2rem; }
  .sp-menu ul { list-style: none; margin: 0; padding: 8.9rem 0 0 2rem; text-align: left; }
  .sp-menu ul a { display: block; font-size: 1.7rem; font-weight: 700; line-height: 3.8rem; text-decoration: none; }
  .sp-menu ul a[aria-current="page"] { color: var(--green); }

  /* フッター */
  .site-footer__inner { width: auto; height: 10.4rem; }
  .to-top { left: 50%; margin-left: -1.5rem; top: 1.4rem; width: 3rem; height: 1.4rem; }
  .to-top svg { width: 3rem; height: 1.4rem; }
  .site-footer__logos { top: 4.2rem; justify-content: center; }
  .site-footer__logos img { height: 1.8rem; }
  .site-footer small { top: 7.5rem; font-size: 1rem; letter-spacing: 0.04rem; }
}

/* ========== 8. タブレット縦（幅 768〜979px）：ボディは PC、ヘッダーとフッターはスマホの形（2026-11-12） ========== */
/* ボディは PC の文字サイズのまま、横幅だけ画面に合わせて詰める */
@media (min-width: 768px) and (max-width: 979px) {
  html { font-size: 13.5px; }   /* ヘッダーのロゴが PC と同じ幅（288px）になる大きさ */
  :root { --header-h: 6rem; }
  body { min-width: 0; }
  .site-footer .pc-only { display: none; }
  .tab-only { display: inline; }

  .band__inner { width: auto; margin: 0 24px; }
  .cta p, .contact-page .lead { margin-left: 24px; margin-right: 24px; }   /* 枠（band__inner）の外にある文も、左右を同じだけ空ける */
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
  .cards--2 { grid-template-columns: repeat(2, 1fr); }
  .svc__banner, .svc__banner > img { width: 100%; height: auto; aspect-ratio: 5 / 1; }
  .svc__banner .svc__logo { left: 13.25%; top: 30%; width: 73.5%; height: 40%; }
  .plan { width: auto; }
  .bio__text { width: auto; max-width: 720px; }
  .cform { width: auto; max-width: 521px; }
}