/* =====================================================================
   gnmd テイスト（gnmd.com を数値化した共通スタイル） v0.1  2026-10-18
   正本の数値と経緯：ONE-X_HP/参考サイト分析_gnmd.md
   書体は無料の代替（Google Fonts）。HTML の <head> に次の1行を入れる：
   <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@800;900&family=Inter+Tight:wght@400;500;700;800&family=Noto+Sans+JP:wght@400;500;700;900&family=Baskervville:wght@700&display=swap" rel="stylesheet">
   ===================================================================== */

/* ---------- 1. 色・書体・基本の値 ---------- */
:root {
  /* 色（取得した値そのまま） */
  --g-bg: #f1f1f1;        /* ページの地。真っ白ではない */
  --g-ink: #0d0d0d;       /* 文字、黒い面 */
  --g-black: #010101;     /* いちばん深い黒 */
  --g-accent: #ceff00;    /* 差し色。面と点だけに使う（文字色にしない） */
  --g-gray-1: #969696;    /* タグの地、ボタンの枠 */
  --g-gray-2: #2b2b2b;
  --g-gray-3: #e1e1e1;    /* 薄い線 */
  --g-gray-4: #eaeaea;
  --g-gray-5: #363636;
  --g-slot: #242424;      /* 黒地に沈める巨大文字 */
  --g-ice: #b5b6c0;
  --g-dim: .4;            /* 選ばれていないものの薄さ */

  /* 角丸はほぼ四角 */
  --g-r-s: 2px;
  --g-r-m: 3px;

  /* 書体（本物 → 代替）
     Helvetica Now Display → Inter Tight
     A1ゴシック Medium     → Noto Sans JP 500
     Baskerville Display PT → Baskervville 700 */
  --f-en: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --f-ja: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --f-serif: "Baskervville", "Times New Roman", serif;
  /* ロゴ one-x だけは HP と全く同じ（2026-10-18 本人）：Red Hat Display、小文字、- は横 55% */
  --f-logo: "Red Hat Display", Inter, sans-serif;

  --ls-ja: -.025em;       /* 日本語は少し詰める（palt と併用） */
  --ls-en: -.02em;
  --lh-body: 1.7;

  /* なめらかな動き */
  --ease-out: cubic-bezier(.19, 1, .22, 1);   /* expo.out 相当。せり上がり */
  --ease-line: cubic-bezier(.6, .3, 0, 1);    /* 線が引かれる動き */

  /* 配置（スマホ：基準幅 393px） */
  --vw: 1vw;
  --gutter: 15px;
  --header-h: 45px;
  --center: calc(100vw - 30px);
  --side: 100%;
  --right: 100%;
}
@media (min-width: 769px) {
  :root {
    /* PC：基準幅 1440px。中央の柱 452px と右の列の左端が、いつも同じ縦線にそろう */
    --gutter: 20px;
    --header-h: 70px;
    --center: max(452px, 100vw * 452 / 1440);
    --right: calc((100vw - 40px + var(--center)) / 2);
    --side: calc(100vw - 40px - var(--right));
  }
}

/* ---------- 2. 文字の大きさ（PC / スマホ） ---------- */
:root {
  --t-display: calc(100vw * 50 / 393);    /* 英語の大見出し */
  --t-display-m: calc(100vw * 46 / 393);  /* About / Work with Us */
  --t-display-s: calc(100vw * 24 / 393);  /* Our Mission のような小さめの英見出し */
  --t-contact: calc(100vw * 40 / 393);
  --t-ja-display: calc(100vw * 36 / 393); /* 日本語の大見出し（gnmd にはない。ONE-X 用に足した） */
  --t-ja-title: calc(100vw * 30 / 393);   /* 使命の一文 */
  --t-lead: 16px;
  --t-body-l: 15px;
  --t-body: 14px;
  --t-caption: 12px;
  --t-label: 12px;
  --t-serif: 14px;
}
@media (min-width: 769px) {
  :root {
    --t-display: max(90px, 100vw * 90 / 1440);
    --t-display-m: max(75px, 100vw * 75 / 1440);
    --t-display-s: max(40px, 100vw * 40 / 1440);
    --t-contact: max(75px, 100vw * 75 / 1440);
    --t-ja-display: max(64px, 100vw * 64 / 1440);
    --t-ja-title: max(68px, 100vw * 68 / 1440);
    --t-lead: 20px;
    --t-body-l: 18px;
    --t-body: 16px;
    --t-caption: 14px;
    --t-label: 18px;
    --t-serif: 18px;
  }
}

/* ---------- 3. 土台 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-feature-settings: "palt" 1; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--g-bg);
  color: var(--g-ink);
  font-family: var(--f-ja);
  font-weight: 500;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-ja);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }

/* HP と同じロゴの組み：one<span class="dash">-</span>x */
.dash { display: inline-block; transform: scaleX(.55); margin-inline: -.06em; }
.g-en { font-family: var(--f-en); font-weight: 700; letter-spacing: var(--ls-en); }
.g-up { text-transform: uppercase; }
.g-dark { background: var(--g-ink); color: var(--g-bg); }
.g-light { background: var(--g-bg); color: var(--g-ink); }

/* ---------- 4. 配置のしくみ ---------- */
.g-ctr { padding-left: var(--gutter); padding-right: var(--gutter); }
.g-center { width: var(--center); margin-left: auto; margin-right: auto; }
@media (min-width: 769px) {
  .g-grid { display: flex; justify-content: space-between; }
  .g-grid > .g-side { width: var(--side); padding-right: calc(100vw * 66 / 1440); }
  .g-grid > .g-main { width: var(--right); }
  .g-side-sticky { position: sticky; top: calc(var(--header-h) + 0px); }
}
.g-section { padding: 110px 0 70px; }
@media (min-width: 769px) { .g-section { padding: 90px 0; } }

/* ---------- 5. ヘッダー ---------- */
.g-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  color: var(--g-bg);
  transition: color .3s ease;
}
.g-header.is-ink { color: var(--g-ink); }
.g-header_logo { font-family: var(--f-logo); font-weight: 800; font-size: 22px; letter-spacing: -.02em; line-height: 1; width: 174px; }
@media (min-width: 769px) { .g-header_logo { width: min(203px, 100vw * 203 / 1440); font-size: 26px; } }
.g-header_nav { display: none; }
@media (min-width: 769px) {
  .g-header_nav {
    display: flex; gap: 22px;
    position: absolute; left: 50%; transform: translateX(-50%);
    width: var(--center);
  }
  .g-header_nav a { font-family: var(--f-en); font-weight: 500; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; line-height: 1; transition: opacity .3s ease; }
  .g-header_nav a:hover { opacity: var(--g-dim); }
  .g-header_nav { transition: opacity .4s ease, transform .6s var(--ease-out); }
  /* 最初の画面を過ぎたらナビは消え、ロゴとメニューだけが残る */
  .g-header.is-scrolled .g-header_nav { opacity: 0; transform: translate(-50%, -12px); pointer-events: none; }
}
.g-header_icons { display: flex; gap: 5px; }
.g-header_icons button { width: 40px; height: 30px; display: grid; place-items: center; }

/* ---------- 6. 最初の画面と、写真の上を流れる文章 ---------- */
.g-hero { position: relative; color: var(--g-bg); }
/* 写真は区画の中だけで止まる（外側を absolute、写真を sticky。overflow は clip にする。hidden だと止まらない） */
.g-hero_bg { position: absolute; inset: 0; overflow: clip; }
.g-hero_bg img { position: sticky; top: 0; width: 100%; height: 100vh; height: 100svh; object-fit: cover; }
.g-hero_bg::after { content: ""; position: absolute; inset: 0; background: rgba(13, 13, 13, var(--hero-shade, .25)); }
.g-hero_first { position: relative; height: 100vh; height: 100svh; display: grid; place-items: center; }
.g-wordmark { font-family: var(--f-logo); font-weight: 900; letter-spacing: -.045em; line-height: 1; font-size: calc(100vw * 64 / 393); }
@media (min-width: 769px) { .g-wordmark { font-size: max(80px, 100vw * 80 / 1440); } }
.g-hero_intro { position: relative; padding: 0 0 50vh; }
.g-mission { display: flex; flex-direction: column; gap: 60px; }
@media (min-width: 769px) { .g-mission { gap: max(120px, 100vw * 120 / 1440); } }
.g-mission_label { font-family: var(--f-en); font-weight: 700; font-size: var(--t-display-s); line-height: 1; letter-spacing: var(--ls-en); }
/* 左端は柱にそろえたまま、右へは右の列の幅まで伸ばしてよい（日本語は1行が長くなるため。gnmd は1行6文字ほど） */
.g-mission_title { font-size: var(--t-ja-title); line-height: 1.3; letter-spacing: var(--ls-ja); font-weight: 500; margin-top: 16px; width: max-content; max-width: min(var(--right), calc(100vw - var(--gutter) * 2)); word-break: keep-all; line-break: strict; }
@media (min-width: 769px) { .g-mission_title { line-height: 1.2; } }
.g-mission_txts { display: flex; flex-direction: column; gap: 1.2em; font-size: var(--t-lead); line-height: 1.8; }
.g-mission_txts p { opacity: var(--g-dim); transition: opacity .6s ease; }
.g-mission_txts p.is-lit { opacity: 1; }    /* 読む位置に来た段落だけ明るくなる */

/* ---------- 7. 左の見出し（止まる目次） ---------- */
.g-side_head { position: relative; padding: 6px 0; width: calc(100vw * 174 / 393); }
@media (min-width: 769px) { .g-side_head { width: 204px; } }
.g-side_head::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: currentColor; transform-origin: left; }
.g-side_ttl { font-family: var(--f-en); font-weight: 700; font-size: var(--t-label); line-height: 1.1; letter-spacing: var(--ls-en); }
.g-side_nav { display: none; }
@media (min-width: 769px) {
  .g-side_nav { display: flex; flex-direction: column; gap: 10px; margin-top: 40vh; }
  .g-side_nav a { font-family: var(--f-en); font-weight: 700; font-size: 16px; line-height: 1; opacity: var(--g-dim); transition: opacity .3s ease; }
  .g-side_nav a.is-current, .g-side_nav a:hover { opacity: 1; }
}

/* ---------- 8. 見出しの組み ---------- */
.g-kicker { display: flex; gap: 14px; align-items: baseline; font-family: var(--f-serif); font-weight: 700; font-size: var(--t-serif); line-height: 1; }
.g-display { font-family: var(--f-en); font-weight: 700; font-size: var(--t-display); line-height: .9; letter-spacing: var(--ls-en); margin-top: 14px; padding-bottom: 14px; }
.g-display-m { font-family: var(--f-en); font-weight: 700; font-size: var(--t-display-m); line-height: .9; letter-spacing: var(--ls-en); }
/* 日本語の大見出し（英語を使わないとき） */
.g-display.-ja, .g-display-m.-ja { font-family: var(--f-ja); font-weight: 700; font-size: var(--t-ja-display); line-height: 1.15; letter-spacing: -.04em; }
.g-display_sub { display: block; font-family: var(--f-ja); font-weight: 500; font-size: var(--t-caption); letter-spacing: var(--ls-ja); line-height: 1.4; margin-top: 10px; }
.g-intro { font-size: var(--t-body-l); line-height: 1.7; }

/* ---------- 9. 事業ブロック（大きな写真＋文＋小さな写真3つ） ---------- */
.g-block + .g-block { margin-top: 80px; }
@media (min-width: 769px) { .g-block + .g-block { margin-top: 80px; } }
.g-media { position: relative; overflow: hidden; aspect-ratio: 926 / 520; background: var(--g-gray-3); }
.g-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.5s var(--ease-out); }
.g-media.is-in img { transform: scale(1); }
.g-block_body { display: grid; gap: 20px; margin-top: 14px; }
@media (min-width: 769px) {
  .g-block_body { grid-template-columns: 1fr 125px; gap: 0 30px; align-items: start; }
  .g-block_body .g-line-to { position: relative; }
}
.g-block_txt { font-size: var(--t-body); line-height: 1.6; max-width: 761px; }
.g-thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 3px; margin-top: 30px; }
@media (min-width: 769px) { .g-thumbs { grid-template-columns: repeat(3, 235px); gap: 4px; } }
.g-thumb_img { aspect-ratio: 235 / 133; overflow: hidden; border-radius: var(--g-r-s); background: var(--g-gray-3); }
.g-thumb_img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.g-thumb:hover .g-thumb_img img { transform: scale(1.04); }
.g-thumb_ttl { font-size: var(--t-caption); line-height: 1.2; margin-top: 4px; }

/* ---------- 10. ボタン ---------- */
/* 小さなボタン（View more）：黒地、灰色の細い枠、白い小さな四角 */
.g-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0 6px;
  width: 125px; min-height: 40px;
  border: 1px solid var(--g-gray-1); border-radius: var(--g-r-s);
  background: var(--g-ink); color: var(--g-bg);
  font-family: var(--f-en); font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: .02em; text-transform: uppercase;
}
.g-btn_icon { width: 8px; height: 8px; border-radius: 1px; background: var(--g-bg); overflow: hidden; display: grid; place-items: center; }
.g-btn_icon::after { content: ""; width: 100%; height: 100%; background: var(--g-ink); transform: scale(0); transition: transform .5s var(--ease-out); }
.g-btn:hover .g-btn_icon::after { transform: scale(1) rotate(90deg); }
.g-btn.-ja { font-family: var(--f-ja); font-weight: 700; letter-spacing: 0; text-transform: none; width: auto; padding: 0 16px; }

/* 大きなボタン（写真つき）：幅 454 × 高さ 90、右に差し色の四角 */
.g-cta {
  position: relative; display: flex; align-items: center; gap: 0 15px;
  width: 100%; height: calc(100vw * 90 / 393); padding: calc(100vw * 5 / 393); padding-right: 50px;
  border-radius: var(--g-r-s); background: var(--g-ink); color: var(--g-bg);
}
@media (min-width: 769px) { .g-cta { width: max(454px, 100vw * 454 / 1440); height: max(90px, 100vw * 90 / 1440); padding: 5px 50px 5px 5px; } }
.g-cta_thumb { flex-shrink: 0; width: calc(100vw * 120 / 393); aspect-ratio: 120 / 80; overflow: hidden; }
@media (min-width: 769px) { .g-cta_thumb { width: max(120px, 100vw * 120 / 1440); } }
.g-cta_thumb img { width: 100%; height: 100%; object-fit: cover; }
.g-cta_txts { display: flex; flex-direction: column; gap: 2px; }
.g-cta_en { font-family: var(--f-en); font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: var(--ls-en); }
.g-cta_ja { font-size: 16px; line-height: 1.2; font-weight: 700; }
@media (min-width: 769px) { .g-cta_en { font-size: 14px; } .g-cta_ja { font-size: 18px; } }
.g-cta_icon { position: absolute; right: 10px; width: 30px; height: 30px; border-radius: var(--g-r-s); background: var(--g-accent); color: var(--g-ink); display: grid; place-items: center; transition: transform .5s var(--ease-out); }
.g-cta:hover .g-cta_icon { transform: translateX(-4px); }

/* ---------- 11. 黒い帯（沈んだ巨大文字が流れる） ---------- */
.g-slot { display: flex; justify-content: center; overflow: hidden; color: var(--g-slot); aspect-ratio: 393 / 330; }
@media (min-width: 769px) { .g-slot { aspect-ratio: 1440 / 547; } }
.g-slot_col { display: flex; flex-direction: column; font-family: var(--f-logo); font-weight: 900; line-height: .82; letter-spacing: -.045em; font-size: calc(100vw * 120 / 393); will-change: transform; }
@media (min-width: 769px) { .g-slot_col { font-size: calc(100vw * 210 / 1440); } }

/* ---------- 12. 細い線の図（同心円・軌道・重なる円） ---------- */
.g-orbit { width: min(100%, 360px); margin: 40px auto; color: var(--g-gray-1); }
.g-orbit circle.ring { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 1 3; }
.g-orbit .path { fill: none; stroke: var(--g-bg); stroke-width: 1; }
.g-orbit .core { fill: var(--g-bg); }
.g-orbit .moon { fill: var(--g-accent); }

/* ---------- 13. お知らせのカード ---------- */
.g-news { display: grid; gap: 30px 0; }
@media (min-width: 769px) { .g-news { grid-template-columns: repeat(2, 385px); gap: 60px 30px; } }
.g-news_item { display: grid; grid-template-columns: 174px 1fr; gap: 0 20px; }
@media (min-width: 769px) { .g-news_item { grid-template-columns: 1fr; gap: 20px 0; } }
.g-news_img { aspect-ratio: 385 / 215; overflow: hidden; background: var(--g-gray-3); }
.g-news_img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.g-news_item:hover .g-news_img img { transform: scale(1.04); }
.g-news_meta { display: flex; gap: 8px; align-items: center; }
.g-news_date { font-family: var(--f-en); font-weight: 500; font-size: 12px; line-height: 1.1; letter-spacing: var(--ls-en); }
.g-tag { padding: 2px 6px; border-radius: var(--g-r-s); background: var(--g-gray-1); color: var(--g-bg); font-family: var(--f-en); font-weight: 400; font-size: 12px; line-height: 1; text-transform: uppercase; }
.g-tag.-ja { font-family: var(--f-ja); font-weight: 500; text-transform: none; }
.g-news_ttl { font-size: var(--t-body); line-height: 1.5; margin-top: 12px; }

/* ---------- 14. 写真の上の大きな呼びかけ（白黒写真） ---------- */
.g-feature { position: relative; color: var(--g-bg); }
.g-feature_bg { position: absolute; inset: 0; overflow: clip; }
.g-feature_bg img { position: sticky; top: 0; width: 100%; height: 100vh; height: 100svh; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(.55); }
.g-feature_copy { position: relative; height: 100vh; height: 100svh; display: grid; place-items: center; padding: 0 var(--gutter); }
.g-ticker { font-family: var(--f-en); font-weight: 700; font-size: 12px; line-height: 1.4; text-transform: uppercase; letter-spacing: -.02em; text-align: center; }
@media (min-width: 769px) { .g-ticker { font-size: 14px; } }
.g-ticker span { opacity: .3; transition: opacity .2s linear; }
.g-ticker span.is-lit { opacity: 1; }      /* 下へ読むほど文字が順に明るくなる */
.g-feature_main { position: relative; padding: 0 0 120px; }

/* ---------- 15. 問い合わせ（巨大な2行） ---------- */
.g-contact { padding: 100px 0; }
@media (min-width: 769px) { .g-contact { padding: 210px 0; } }
.g-contact_copy { font-family: var(--f-en); font-weight: 700; font-size: var(--t-contact); line-height: 1; letter-spacing: var(--ls-en); }
.g-contact_copy.-ja { font-family: var(--f-ja); font-size: var(--t-ja-display); letter-spacing: -.04em; line-height: 1.2; }
.g-contact_copy .ch { display: inline-block; transition: color .25s ease; }
.g-contact:hover .g-contact_copy .ch { color: var(--g-ink); }
.g-contact_copy .ch.is-hot { color: var(--g-ink); text-shadow: 0 0 0 var(--g-ink); background: linear-gradient(var(--g-accent), var(--g-accent)) 0 85% / 100% 30% no-repeat; }
.g-contact_sub { font-size: var(--t-body); margin-top: 24px; }

/* ---------- 16. フッター ---------- */
.g-footer { padding: 20px 0 30px; }
.g-footer_bc { font-family: var(--f-en); font-weight: 700; font-size: 12px; line-height: 1; padding-bottom: 12px; }
.g-footer_line { height: 1px; background: var(--g-ink); transform-origin: left; }
.g-footer_logo { font-family: var(--f-logo); font-weight: 900; letter-spacing: -.045em; line-height: .78; font-size: calc((100vw - 30px) * .2); margin: 30px 0 40px; white-space: nowrap; }
@media (min-width: 769px) { .g-footer_logo { font-size: calc((100vw - 40px) * .24); } }
.g-footer_cols { display: flex; flex-wrap: wrap; gap: 24px 60px; }
.g-footer_cols a { display: block; font-family: var(--f-en); font-weight: 700; font-size: 14px; line-height: 1.8; text-transform: uppercase; transition: opacity .3s ease; }
.g-footer_cols a:hover { opacity: var(--g-dim); }
.g-footer_bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-top: 60px; font-family: var(--f-en); font-weight: 700; font-size: 12px; line-height: 1.5; }
.g-footer_bottom .dim { opacity: var(--g-dim); }
.g-totop { width: 40px; height: 40px; background: var(--g-accent); color: var(--g-ink); display: grid; place-items: center; }

/* ---------- 17. 動き（gnmd.js と組み合わせる） ---------- */
/* 文字が下からせり上がる：外側で隠し、内側を 100% 下から 0 へ。1.3 秒、最初に速く最後はゆっくり */
.g-mask { display: block; overflow: hidden; overflow: clip; margin: -.1em 0; padding: .1em 0; }
.g-mask > .g-mask_in { display: block; transform: translateY(105%); transition: transform 1.3s var(--ease-out); transition-delay: calc(.2s + var(--i, 0) * .025s); }
.g-mask.is-in > .g-mask_in { transform: none; }
/* 線が左から引かれる */
.g-draw { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-line) .15s; }
.g-draw.is-in { transform: scaleX(1); }
/* ふわっと出る（文章の段落など） */
.g-fade { opacity: 0; transform: translateY(16px); transition: opacity .85s ease, transform .85s var(--ease-out); }
.g-fade.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .g-mask > .g-mask_in, .g-draw, .g-fade, .g-media img { transform: none !important; opacity: 1 !important; transition: none !important; }
  .g-mission_txts p, .g-ticker span { opacity: 1; }
}