/* ボノ株式会社（bono.co.jp）── ボノのあゆみと会社概要
   色・余白・文字の大きさは我楽田工房サイト（site/src/app/globals.css）の変数を写したもの */

:root {
  /* 色 */
  --kinari: #F4EFE4;      /* 地 */
  --kinari2: #EAE3D3;     /* 地（切り替え用） */
  --sumi: #24211D;        /* 本文 */
  --ai: #1F3A5F;          /* 見出し・線・リンク */
  --ai20: rgba(31, 58, 95, .2); /* 区切りの線 */
  --ai40: rgba(31, 58, 95, .4);
  --shu: #C2492A;         /* 主役のボタン（このページで1つだけ） */
  --ki: #E8C547;          /* 細部：年表の最後の印 */
  --muted: #5A554D;       /* 添え書きの文字 */
  --sora: #2AA7E0;        /* ボノのロゴの空色（年表のはじまり） */

  /* 余白（8段だけ） */
  --s1: 4px;
  --s2: 8px;
  --s3: 16px;
  --s4: 24px;
  --s5: 40px;
  --s6: 64px;
  --s7: 96px;
  --s8: 144px;

  /* PC の値（スマホは下のメディアクエリで差し替え） */
  --sec: var(--s7);       /* 区画の上下 */
  --ma: var(--s8);        /* 「間」 */
  --h-body: var(--s4);    /* 見出し→本文 */
  --body-fig: var(--s5);  /* 本文→絵・並び */
  --group: var(--s6);     /* まとまり→まとまり */
  --gutter: var(--s5);    /* 外枠の左右 */
  --col-gap: var(--s5);   /* 列の間 */

  /* 文字の大きさ（6段） */
  --fs-note: 13px;
  --fs-body: 16px;
  --fs-h3: 20px;
  --fs-h2: 32px;
  --fs-h1: 44px;
  --fs-vision: 56px;

  --wrap: 1120px;
  --read: 680px;

  /* 年表 */
  --rail: 56px;           /* 縦線から本文までの幅 */
  --dot: 22px;            /* 印の直径 */
}

@media (max-width: 767px) {
  :root {
    --sec: var(--s6);
    --ma: var(--s7);
    --h-body: var(--s3);
    --body-fig: var(--s4);
    --group: var(--s5);
    --gutter: var(--s4);
    --col-gap: var(--s4);
    --fs-body: 15px;
    --fs-h3: 18px;
    --fs-h2: 24px;
    --fs-h1: 30px;
    --fs-vision: 34px;
    --rail: 32px;
    --dot: 16px;
  }
}

/* ---------- 土台 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--kinari);
  color: var(--sumi);
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.9;
  font-feature-settings: "palt";
  line-break: strict;
  word-break: auto-phrase;      /* 文節で折り返して泣き別れを防ぐ */
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  font-weight: 700;
  color: var(--ai);
  letter-spacing: .02em;
  text-wrap: balance;
}
p, li, dd { text-wrap: pretty; }
a { color: var(--ai); }

.h1 { font-size: var(--fs-h1); line-height: 1.3; }
.h2 { font-size: var(--fs-h2); line-height: 1.4; }
.h3 { font-size: var(--fs-h3); line-height: 1.5; }
.mt-h { margin-top: var(--h-body); }
.nw { display: inline-block; }   /* 文節の途中で折り返さない */

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.sec { padding: var(--sec) 0; }
.sec--rule > .wrap { border-top: 1px solid var(--ai20); padding-top: var(--sec); }
.sec--rule { padding-top: 0; }

/* 絵は生成りになじませる */
.hero-fig img, .ch-fig img { mix-blend-mode: multiply; }

/* ---------- ボタン ---------- */
/* 朱：このページでは「我楽田工房のサイトへ」の1つだけ */
.btn {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 var(--s4);
  background: var(--shu);
  color: var(--kinari);
  border-radius: 2px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
}
.btn:hover { background: #A93C21; }

/* 藍の枠線 */
.btn-line {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--ai);
  border-radius: 2px;
  color: var(--ai);
  font-weight: 700;
  text-decoration: none;
  line-height: 1.4;
}
.btn-line:hover { background: var(--ai); color: var(--kinari); }

/* ---------- 上の帯 ---------- */
.site-header { padding: var(--s4) 0; }
.logo { display: inline-block; }
.logo img { width: 240px; height: auto; }

/* ---------- 冒頭 ---------- */
.hero { padding: var(--s5) 0 var(--sec); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--col-gap);
  align-items: center;
}
.hero-lead { margin-top: var(--h-body); font-size: 18px; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
  margin-top: var(--body-fig);
}
.domain { color: var(--muted); font-size: var(--fs-note); }

/* ---------- ボノのあゆみ（縦の年表） ---------- */
.ayumi {
  position: relative;
  margin-top: var(--body-fig);
  padding-left: var(--rail);
}
/* 縦線：空色 → 藍 */
.ayumi::before {
  content: "";
  position: absolute;
  left: calc(var(--dot) / 2 - 1.5px);
  top: calc(var(--dot) / 2);
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--sora), var(--ai));
}
.ch {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--col-gap);
  align-items: start;
}
.ch + .ch { margin-top: var(--group); }
/* 章の頭の印 */
.ch::before {
  content: "";
  position: absolute;
  left: calc(var(--rail) * -1);
  top: calc((1.5em - var(--dot)) / 2 + 2px);
  width: var(--dot);
  height: var(--dot);
  border: 4px solid var(--c);
  border-radius: 50%;
  background: var(--kinari);
  font-size: var(--fs-h3);
}
.ch--last::before { background: var(--ki); border-color: var(--ki); }

.ch-year {
  color: var(--c);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.5;
  letter-spacing: .02em;
}
.ch-text .h3 { margin-top: var(--s1); font-size: 24px; }
.ch-lead { margin-top: var(--s3); }
.rows { margin-top: var(--s4); }
.rows > div {
  display: grid;
  grid-template-columns: 5em minmax(0, 1fr);
  gap: var(--s3);
  padding: var(--s2) 0;
}
.rows dt { font-weight: 700; color: var(--ai); white-space: nowrap; }
.ch-fig img { width: 100%; }

/* 年表の締め：線の終わりのすぐ下、本文と同じ左位置 */
.ayumi-end {
  margin-top: var(--s5);
  padding-left: var(--rail);
}
.ayumi-end p { margin-top: var(--s3); }
.ayumi-end .end-actions { margin-top: var(--s4); }

/* ---------- もっと詳しく ---------- */
.more-actions { margin-top: var(--s4); }

/* ---------- 会社概要（箱にせず、細い線で区切った2列） ---------- */
.profile {
  display: grid;
  grid-template-columns: 8em minmax(0, 1fr);
  max-width: 820px;
  margin-top: var(--body-fig);
  border-top: 1px solid var(--ai20);
}
.profile dt, .profile dd { padding: var(--s3) 0; border-bottom: 1px solid var(--ai20); }
.profile dt { font-weight: 700; color: var(--ai); }

/* ---------- フッター ---------- */
.site-footer { padding: var(--s5) 0; }
.site-footer .wrap { border-top: 1px solid var(--ai20); padding-top: var(--s5); }
.copy { color: var(--muted); font-size: var(--fs-note); text-align: center; }

/* ---------- 中くらいの画面 ---------- */
@media (max-width: 1100px) {
  .ch { grid-template-columns: minmax(0, 1fr) 320px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* ---------- スマホ ---------- */
@media (max-width: 767px) {
  .logo img { width: 190px; }
  .hero { padding-top: var(--s4); }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-fig { width: 70%; margin: 0 auto; }
  .hero-lead { font-size: var(--fs-body); }

  .ch { grid-template-columns: 1fr; gap: var(--s4); }
  .ch-fig { width: 60%; }
  .ch-text .h3 { font-size: 20px; }
  .ch::before { border-width: 3px; }
  .rows > div { grid-template-columns: 4.6em minmax(0, 1fr); gap: var(--s2); }

  .profile { grid-template-columns: 6.5em minmax(0, 1fr); }
}