/* 3サイト共通のスタイル（crosshack.jp・startupsuccess.jp・datadrivenux.jp。2026-11-15 に crosshack.jp の site.css から切り出し）
   ※ このファイルは3つのリポジトリ（xh・ss・ddx）で中身を同じにする。直したら3つにそろえ、_tools/common/check_common.py で確かめる。
   ※ 読み込みは common.css → site.css の順。各サイトだけの部品・区画ごとの値は site.css に書く（2サイト以上で使う部品はここに入れる）。
   構成：1. 書体  2. 共通の値（変数）  3. 土台  4. 部品（ヘッダー〜フッター）  6. スマホ
         7. ヘッダー・フッターのスマホの形（979px まで）  8. タブレット縦（768〜979px）
   （番号は site.css と合わせてある。5. 区画ごとの設定は各サイトの site.css にだけある）
   - 同じ種類の要素は、同じ部品・同じ変数で決まるようにしてある。値を変えるときは「2. 共通の値」を直す。
   - 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. の先頭で上書き。各サイトの値は site.css で上書きしてよい） ========== */
: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;
  --logo-w: 288px;     --logo-h: 32px;     /* ヘッダーのロゴ（PC） */
  --header-btn-w: 152px;                   /* ヘッダーの「お問い合わせ」の幅（ナビはこの左に並ぶ） */
  --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: var(--logo-w); height: var(--logo-h); }
.site-header__logo img { width: var(--logo-w); height: var(--logo-h); }
.gnav { position: absolute; right: var(--header-btn-w); 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: var(--header-btn-w); height: 45px; font-size: 18px; }
.btn--header svg { width: 18px; height: 18px; }

/* ---------- キービジュアル（下層ページの画像 hero--〇〇 は各サイトの site.css） ---------- */
.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; }

/* ---------- 区画（帯）・見出し・導入文 ---------- */
.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）など、同じ見た目の見出しは各サイトの site.css で同じ値を使う */
.band h2 { 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__inner > .lead:last-child { margin-bottom: 0; }   /* 導入文で区画が終わるとき（見出し→導入文だけの区画） */
.band--intro { padding-top: 50px; }
.band--intro .lead { margin-bottom: 57px; }

/* 小見出し（カードの見出し）。同じ見た目の小見出しは各サイトの site.css で同じ値を使う */
.card h3 { 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; }
.cta p a { text-decoration: none; }   /* 誘導の文の中のリンク（「クロスハック株式会社」など）は Wix と同じく下線なし */

/* ---------- カード ---------- */
/* card          = 基本（枠・見出し・本文）。アイコン付きのカードは中に card__icon を置く
   card--text    = 文字だけのカード（会社概要のバリュー・事業概要。事業概要は改行を固定しているため、左右の内側の余白を狭くして幅を確保している）
   card--project = プロジェクト事例（アイコン＋箇条書き）
   （card--service〈crosshack.jp トップの「特徴的なサービス」〉は crosshack.jp の site.css） */
.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; }  /* 箇条書きの書き出しの位置はほかのカードと同じ */

/* ---------- 矢印と結論（カードの下に、下向きの矢印・見出し・本文。startupsuccess.jp・datadrivenux.jp のトップ） ---------- */
/* 見出しは Wix と同じく標準の太さの Helvetica を太字にしたもの（--ff-roman） */
.summary { margin-top: 32px; }
.chevron { display: block; width: 60px; height: 10px; margin: 0 auto; fill: none; stroke: #000; stroke-width: 1; }
.summary h3 { margin-top: 33px; font-family: var(--ff-roman); font-size: var(--sub-size); font-weight: 700; line-height: var(--sub-lh); }
.summary p { margin-top: 20px; font-size: var(--card-size); line-height: var(--card-lh); }

/* ---------- 横長の箱（見出し＋下線、左にアイコン、右に箇条書き） ---------- */
/* crosshack.jp の料金プラン、startupsuccess.jp の実行プログラム。見出しはカードの見出しと同じ見た目 */
.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 { font-size: var(--sub-size); font-weight: 700; line-height: var(--sub-lh); 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; }

/* ---------- 404 ページ（build.py が作る。見た目は crosshack.jp のお問い合わせのページ見出しと同じ） ---------- */
.notfound { padding: 100px 0 0; text-align: center; }
.notfound h1 { font-size: var(--title-size); font-weight: 700; line-height: var(--title-lh); }
.notfound .lead { margin-top: 61px; }

/* ---------- フッター ---------- */
.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; }

/* ========== 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 も動かさず、帯の中で中央を切り取る */

  /* 区画・導入文 */
  .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; }
  .notfound { padding-top: 3.2rem; }
  .notfound .lead { margin: 2.1rem 2rem 0; }
  .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; }

  /* 矢印と結論 */
  .summary { margin-top: 1.5rem; }
  .chevron { width: 4rem; height: 1rem; }
  .summary h3 { margin-top: 1.5rem; }
  .summary p { margin-top: 1rem; }

  /* 横長の箱 */
  .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; }

}

/* ========== 7. ヘッダーとフッターの「スマホの形」（スマホとタブレット縦：幅 979px まで） ========== */
/* 寸法は rem。スマホは 1rem = 画面幅 / 32、タブレットは 1rem = 13.5px（8. で指定） */
@media (max-width: 979px) {
  /* ヘッダー・メニュー */
  .site-header__inner { width: auto; }
  .site-header__logo { left: 2rem; top: var(--logo-top-sp, 1.8rem); width: var(--logo-w-sp, 21.3rem); height: var(--logo-h-sp, 2.4rem); }
  .site-header__logo img { width: var(--logo-w-sp, 21.3rem); height: var(--logo-h-sp, 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, .notfound .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); }
  .plan { width: auto; }
}