/* Artlet Lab（事業）のサイト＝ルート直下 専用のスタイル
 * v3 §19-5・パッチ35 §HK・**パッチ36 §HM〜§HQ（見た目の作り込み）**
 *
 * **`/healthymap/` 配下は `style.css` を使う。こちらとは混ぜない。**
 * 分けている理由は、緑をヘルシーマップの色として切り離しておくと、
 * 2本目の製品を出したときにサイト全体を作り直さずに済むため（§HK-1）。
 *
 * ■ 守っている制約
 *  - 地はクリーム、文字は #3C3C3C。**緑を一切使わない**（リンクも）
 *  - **参考デザインの淡い青緑は採用しない**（§HN-1）。単色で構成する
 *  - 文字サイズは4段階だけ（--fs-1..4）。中間の大きさを増やさない
 *  - 区切りは「面の色の差」と「余白の量」で作る。罫線で区切らない
 *  - 影・角丸・グラデーションは使わない（0箇所）
 *  - 事業概要の表と法務ページは装飾しない（読みやすさだけ）
 *  - **JavaScript を書かない。スクロール連動の動きも付けない**（§HP-1）
 *  - 外部依存を持たない。Poppins は「あれば使う」だけで、無くても崩れない
 */

:root {
  --cream: #fcf3eb;   /* 地 */
  --panel: #fffdf8;   /* 面の差で区切るためのもう一段明るい面 */
  --ink: #3c3c3c;     /* 文字 */
  --ink-soft: #6b6459; /* 日本語の補足。緑を使わずに階層をつける */
  --line: #e5ded5;    /* 枠線・罫線（§HN-1） */

  /* 英字ラベル専用の薄いグレー（§HN-1）。
     **日本語の本文・補足には使わない**——クリーム地で 3.1:1 しか出ない。
     英字ラベルは同じ内容を日本語の見出しが必ず担うので、ここだけ許容する。 */
  --label: #8a8a8a;

  /* 文字サイズは4段階だけ。段差を大きく取る */
  --fs-1: clamp(2rem, 6.4vw, 3rem);      /* 32〜48px 見出し（最上位） */
  --fs-2: clamp(1.375rem, 3.2vw, 1.75rem); /* 22〜28px セクション見出し */
  --fs-3: 1.125rem;                       /* 18px 本文 */
  --fs-4: 0.875rem;                       /* 14px 補助・英字ラベル */

  /* 参考デザインの最大の特徴は余白の量。本文の行間（1.8 × 18px ≒ 32px）の
     8倍以上＝約 260px を、広い画面で確保する（§HM）。
     狭い画面では半分程度まで減らす（§HQ）。 */
  --gap-section: clamp(8rem, 22vw, 18rem);
  --measure: 40em; /* 本文の行長。全角40字程度で止める */
  --track: 0.08em; /* 見出しの字間（§HN-2）。日本語の見出しにも掛ける */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--cream);
  color: var(--ink);
  /* Poppins は「あれば使う」。無い環境でも崩れないよう素の指定に留める */
  font-family: Poppins, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Yu Gothic Medium", Meiryo, system-ui, sans-serif;
  font-size: var(--fs-3);
  font-weight: 400;
  line-height: 1.8;
  /* 日本語が不自然な位置で割れないようにする */
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
  /* 冒頭の記号は はみ出させて置くので、横スクロールを作らせない（§HQ） */
  overflow-x: hidden;
}

.wrap {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- 言語の切り替え（日本語 / English） ---------- */
/* 冒頭の余白を崩さないよう、右上に浮かせて置く。飾りは付けない */
.lang-switch {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  z-index: 1;
  font-size: var(--fs-4);
  letter-spacing: 0.08em;
}

.lang-switch a,
.lang-switch span { margin-left: 1rem; }
.lang-switch span { color: var(--ink-soft); }

body { position: relative; }

/* ---------- 冒頭（§HO-1） ---------- */

/* 画面の高さいっぱいを使い、中央に揃える。
   svh を使うのは、スマートフォンでアドレスバーが出入りしても
   Scroll の行が画面外へ押し出されないようにするため。 */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(4rem, 9vw, 6rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
}

/* 記号を大きく薄く1箇所だけ置く。色を増やさずに画面を持たせる手段（§HK-2）。
   **背景に置くのはここだけ**（§HO-1）。装飾ではなく地の一部として扱う。 */
.hero__mark {
  position: absolute;
  top: 50%;
  right: clamp(-6rem, -4vw, -2rem);
  transform: translateY(-50%);
  width: clamp(14rem, 36vw, 26rem);
  opacity: 0.055;
  pointer-events: none;
  user-select: none;
}

.hero__inner {
  margin: auto 0;   /* 上下の余りを均等に取り、中央に置く */
  position: relative;
  width: 100%;
}

.hero__logo {
  width: clamp(15rem, 46vw, 30rem);
  display: block;
  margin: 0 auto;
}

.hero__title {
  font-size: var(--fs-1);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: var(--track);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  /* 句点だけが次の行に落ちるのを防ぐ。効かない環境でも通常の折り返しになる */
  text-wrap: balance;
}

/* 言葉の切れ目（span）で折り返す。狭い画面で「そば／に、」のように割れないようにする */
.hero__title span { display: inline-block; }
/* 390px 前後では「ちょうどいい道具を。」が字間のぶんだけ入りきらないので、
   狭い画面に限って字間を詰める */
@media (max-width: 26rem) {
  .hero__title { letter-spacing: 0.02em; }
}

.hero__lead {
  margin: 1.75rem auto 0;
  max-width: var(--measure);
  color: var(--ink-soft);
}

/* 細い縦線と Scroll（§HM）。線は罫線ではなく「下に続く」ことの合図 */
.hero__scroll {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  flex: none;
}

.hero__scroll::before {
  content: "";
  width: 1px;
  height: clamp(3rem, 7vw, 4.5rem);
  background: var(--line);
}

.hero__scroll span {
  writing-mode: vertical-rl;
  font-size: var(--fs-4);
  letter-spacing: 0.3em;
  line-height: 1;
  color: var(--label);
}

/* ---------- セクション ---------- */

.section {
  margin-top: var(--gap-section);
}

/* 面の色を変えて区切る（罫線を引かない）。表や法務の本文は装飾しない */
.section--panel {
  background: var(--panel);
  padding: clamp(5rem, 11vw, 9rem) 0;
  margin-top: var(--gap-section);
}

/* 英字の小見出し（§HM）。色ではなく「字間・薄いグレー」で本文と区別する */
.label {
  display: block;
  font-size: var(--fs-4);
  font-weight: 500;
  letter-spacing: 0.3em;
  line-height: 1;
  color: var(--label);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

h2 {
  text-wrap: balance;
  font-size: var(--fs-2);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: var(--track);
}

h3 {
  font-size: var(--fs-3);
  font-weight: 600;
  letter-spacing: var(--track);
}

p {
  max-width: var(--measure);
  margin-top: 1.5rem;
}

.note {
  font-size: var(--fs-4);
  color: var(--ink-soft);
}

a {
  color: var(--ink);
  text-underline-offset: 0.22em;
  transition: color 0.2s, border-color 0.2s;
}

a:hover { color: var(--ink-soft); }

/* 本文中の遷移先を示すリンク。緑を使わずに、字の太さと下線で示す */
.link-more {
  display: inline-block;
  margin-top: 2rem;
  font-weight: 600;
  letter-spacing: var(--track);
}

/* ---------- 2カラム（§HO-2） ---------- */

.cols {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

/* 狭い画面では縦に積む。**文章が先、記号が後**（§HQ） */
@media (max-width: 48rem) {
  .cols { grid-template-columns: 1fr; }
  .cols__figure { order: 2; }
}

.cols__figure {
  display: flex;
  justify-content: center;
}

.cols__figure img {
  width: clamp(9rem, 26vw, 15rem);
}

/* ---------- カード（§HO-3。枠線1px・塗りなし・角丸なし） ---------- */

.card {
  border: 1px solid var(--line);
  padding: clamp(1.75rem, 5vw, 3rem);
  max-width: 38rem;
}

/* 製品が2つ以上のときは並べる。広い画面では横に、狭い画面では縦に積む。
   **枠を埋めるために数を合わせない**（実在する製品の数だけ置く。§HO-3） */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: clamp(2rem, 5vw, 3rem);
}

.cards .card { max-width: none; }

.card h3 { margin-top: 0; }
.card p:first-of-type { margin-top: 1.25rem; }

/* ---------- ボタン（§HO-5。塗りつぶさない） ---------- */

.btn {
  display: inline-block;
  border: 1px solid var(--line);
  padding: 1.1rem clamp(2.5rem, 8vw, 4.5rem);
  margin-top: clamp(2rem, 5vw, 3rem);
  font-size: var(--fs-4);
  letter-spacing: 0.2em;
  text-decoration: none;
}

.btn:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- 中央揃えの節（§HO-5） ---------- */

.center { text-align: center; }
.center p { margin-left: auto; margin-right: auto; text-wrap: balance; }

/* ---------- 事業概要の表（装飾しない。§HK-3・§HO-4） ---------- */

.facts {
  margin-top: 2.5rem;
  max-width: 48em;
}

/* 横罫のみ。縦罫も塗りも付けない（審査で読まれる箇所） */
.facts__row {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  gap: 0 2rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}

.facts__row:first-child { border-top: 1px solid var(--line); }

.facts__key {
  color: var(--ink-soft);
  font-size: var(--fs-4);
  /* 値の1行目と視覚的に揃える */
  padding-top: 0.28rem;
}

.facts__val { min-width: 0; }

/* 幅が足りない端末では1行＝1ブロックに積み替える（横スクロールさせない） */
@media (max-width: 34rem) {
  .facts__row {
    grid-template-columns: 1fr;
    gap: 0.1rem;
    padding: 0.85rem 0;
  }
  .facts__key { padding-top: 0; }
}

/* ---------- 法務ページ（装飾しない） ---------- */

/* 冒頭の見出し。英字ラベルは付けない——読みやすさだけを優先する箇所なので、
   意味を持たない飾りを増やさない。 */
.doc { padding-top: clamp(4rem, 10vw, 7rem); }
.doc h1 {
  font-size: var(--fs-1);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--track);
}
.doc h2 { margin-top: 3.5rem; }
.doc ul { margin-top: 1.5rem; padding-left: 1.35em; max-width: var(--measure); }
.doc li { margin-top: 0.6rem; }
.doc .facts { margin-top: 3rem; }

.doc__meta {
  margin-top: 3.5rem;
  font-size: var(--fs-4);
  color: var(--ink-soft);
}

/* ---------- フッター（§HO-6。中央揃え） ---------- */

.foot {
  margin-top: var(--gap-section);
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  font-size: var(--fs-4);
  color: var(--ink-soft);
  text-align: center;
}

.foot__logo {
  width: clamp(5rem, 13vw, 7rem);
  margin: 0 auto clamp(2rem, 5vw, 2.75rem);
  display: block;
}

.foot__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2rem;
}

.foot__copy {
  margin-top: 2rem;
  letter-spacing: 0.12em;
}

/* 狭い画面では、背景の記号がロゴと重なる位置に来る。
   消さずに、さらに薄くして右へ逃がす（地の一部として残す。§HO-1） */
@media (max-width: 40rem) {
  .hero__mark {
    right: -7rem;
    top: 62%;
    opacity: 0.04;
  }
}