/* ==========================================================================
   株式会社Bloom 公式サイト
   デザイン: 案A「FRAME」を編集的に発展（White / Gray / Black）
   - 色は無彩色のみ。グラデーション・角丸・影は使わない
   - 大きな文字と小さな文字の対比、余白、罫線で情報を整理する
   - 番号（01〜04）は事業専用。セクションには付けない
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color（コントラスト比は背景 Paper / Black に対する値） */
  --c-paper: #F5F5F2;        /* 背景 */
  --c-white: #FFFFFF;        /* 面 */
  --c-mist: #E7E7E3;         /* 写真枠などの面 */
  --c-ink: #1B1B19;          /* 文字 15.8:1 */
  --c-sub: #5B5B57;          /* 補助文字 6.2:1 */
  --c-stone: #8A8A85;        /* 24px 以上の大きな数字のみ 3.2:1 */
  --c-line: #D6D6D1;         /* 罫線 */
  --c-black: #121211;        /* 黒セクション・フッター */
  --c-on-black: #F5F5F2;     /* 黒上の文字 17.2:1 */
  --c-on-black-sub: #A3A39E; /* 黒上の補助文字 7.4:1 */
  --c-black-line: #34342F;   /* 黒上の罫線 */

  /* Type */
  --font-base: "Schibsted Grotesk", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
  --font-en: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  --fs-hero: min(30vw, 520px);
  --fs-display: clamp(64px, 11.5vw, 188px);
  --fs-contact: clamp(56px, 8.4vw, 136px);
  --fs-lead: clamp(24px, 2.8vw, 40px);
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-label: 12px;

  /* Space */
  --gutter: clamp(20px, 4.4vw, 72px);
  --col-gap: clamp(16px, 2.2vw, 32px);
  --sec-space: clamp(96px, 12vw, 192px);
  --header-h: 72px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 767px) {
  :root {
    --fs-body: 15px;
    --header-h: 60px;
  }
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

address {
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--c-ink);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: 500;
  line-height: 1.4;
  font-feature-settings: "palt";
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

::selection {
  color: var(--c-paper);
  background: var(--c-ink);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 見出しの改行位置を文節でそろえる（phrase の途中では改行しない） */
.phrase {
  display: inline-block;
}

.container {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 未確定の情報（[情報入力待ち] / [要確認]）。公開前にすべて解消する */
.pending {
  display: inline-block;
  margin-inline: 0.4em;
  padding: 0.1em 0.5em;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--c-sub);
  white-space: nowrap;
  vertical-align: middle;
  border: 1px dashed currentColor;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 200;
  padding: 8px 16px;
  color: var(--c-paper);
  background: var(--c-ink);
}

.skip-link:focus {
  top: 8px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--c-line);
}

/* 左・中央・右の 3 列。中央のナビは左右の幅に関係なく常にページの中央に来る */
.site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  min-height: var(--header-h);
}

.site-logo {
  display: inline-block;
  justify-self: start;
  padding-block: 14px;
  font-family: var(--font-en);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
  text-decoration: none;
}

.global-nav__list {
  display: flex;
  gap: clamp(28px, 3.4vw, 56px);
  align-items: center;
}

.global-nav__link {
  position: relative;
  display: inline-block;
  padding-block: 12px;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  text-decoration: none;
}

.global-nav__link::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}

.global-nav__link:hover::after,
.global-nav__link[aria-current]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-contact {
  display: inline-block;
  justify-self: end;
  padding: 13px 22px;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
  text-decoration: none;
  border: 1px solid var(--c-ink);
  transition: color 0.3s ease, background-color 0.3s ease;
}

.header-contact:hover,
.header-contact[aria-current] {
  color: var(--c-paper);
  background: var(--c-ink);
}

.menu-button {
  display: none;
  justify-self: end;
  min-width: 88px;
  min-height: 44px;
  padding: 0 16px;
  font-family: var(--font-en);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 1px solid currentColor;
}

.menu-button:focus-visible {
  outline-offset: -6px;
}

/* スマートフォン・タブレット: JavaScript が動くときだけメニューボタンに切り替える */
@media (max-width: 899px) {
  .site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .js .global-nav,
  .js .header-contact {
    display: none;
  }

  .js .menu-button {
    display: inline-block;
  }

  /* JavaScript が動かないとき: ナビを 2 行目に並べる */
  html:not(.js) .global-nav {
    grid-row: 2;
    grid-column: 1 / -1;
    padding-bottom: 12px;
  }

  html:not(.js) .global-nav__list {
    flex-wrap: wrap;
    gap: 4px 24px;
  }
}

/* 全画面メニュー */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  color: var(--c-on-black);
  background: var(--c-black);
}

.site-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
}

.site-menu__list {
  padding-block: 16px 48px;
}

.site-menu__list a {
  display: grid;
  gap: 2px;
  padding-block: 18px;
  text-decoration: none;
  border-bottom: 1px solid var(--c-black-line);
}

.site-menu__en {
  font-family: var(--font-en);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.site-menu__ja {
  font-size: var(--fs-label);
  color: var(--c-on-black-sub);
}

.is-menu-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  min-height: calc(100svh - var(--header-h));
  padding-block: clamp(40px, 6vw, 96px) clamp(12px, 1.6vw, 24px);
}

/* 抽象グラフィック（PC では右側に大きく置き、BLOOM の背後まで広げる） */
.hero__visual {
  position: absolute;
  top: 44%;
  right: calc(var(--gutter) - 3vw);
  z-index: 0;
  width: min(50vw, 82svh);
  aspect-ratio: 1;
  pointer-events: none;
  transform: translateY(-50%);
}

.bloom-graphic {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--c-ink);
}

.bloom-petal,
.bloom-envelope {
  stroke-width: 0.8;
}

.bloom-envelope {
  stroke-dasharray: 1;
  stroke-opacity: 0.5;
}

.bloom-envelope--faint {
  stroke-opacity: 0.22;
}

.hero__statement {
  position: relative;
  z-index: 1;
  display: grid;
  grid-row: 1;
  grid-column: 1 / span 6;
  gap: 32px;
  align-content: start;
}

.hero__lead {
  font-size: clamp(28px, 3.3vw, 48px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-feature-settings: "palt";
}

.hero__lead .pending,
.about__message .pending {
  font-size: 11px;
}

.hero__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  font-family: var(--font-en);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  color: var(--c-sub);
}

/* 区切りのスラッシュは前の項目に付け、折り返したときに行頭に来ないようにする */
.hero__fields li:not(:last-child)::after {
  margin-inline: 0.9em;
  content: "/";
}

.hero__title {
  position: relative;
  z-index: 1;
  grid-row: 3;
  grid-column: 1 / -1;
  align-self: end;
  margin-top: 48px;
}

.hero__word {
  display: block;
  margin-left: -0.04em;
  font-family: var(--font-en);
  font-size: min(19vw, 330px);
  font-weight: 500;
  line-height: 0.78;
  letter-spacing: -0.02em;
}

/* タブレット・スマートフォン: グラフィックを文章と BLOOM の間に置く */
@media (max-width: 1023px) {
  .hero__inner {
    grid-template-rows: auto auto auto;
    min-height: 0;
  }

  .hero__statement {
    grid-column: 1 / -1;
  }

  .hero__visual {
    position: relative;
    top: auto;
    right: auto;
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 560px);
    margin-top: clamp(8px, 4vw, 32px);
    transform: none;
  }

  .hero__title {
    margin-top: 0;
  }

  /* BLOOM を画面幅いっぱいに組む */
  .hero__word {
    font-size: 25.5vw;
  }
}

@media (max-width: 767px) {
  .hero__statement {
    gap: 24px;
  }
}

/* --------------------------------------------------------------------------
   Section（左に見出しの柱、右に本文）
   -------------------------------------------------------------------------- */
.sec {
  padding-block: calc(var(--sec-space) / 2);
}

.sec--dark {
  padding-block: var(--sec-space);
  color: var(--c-on-black);
  background: var(--c-black);
}

.sec--contact {
  padding-bottom: var(--sec-space);
}

.sec__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px var(--col-gap);
  padding-top: 24px;
}

/* セクション上端の罫線（スクロールで左から伸びる） */
.sec__grid::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  content: "";
  background: var(--c-line);
  transform-origin: left center;
}

.sec--dark .sec__grid::before {
  background: var(--c-black-line);
}

.sec__head {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  grid-column: 1 / span 3;
  align-self: start;
}

.sec__title {
  display: grid;
  gap: 8px;
}

.sec__en {
  font-family: var(--font-en);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

.sec__ja {
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--c-sub);
  letter-spacing: 0.08em;
}

.sec--dark .sec__ja {
  color: var(--c-on-black-sub);
}

.sec__body {
  display: grid;
  grid-column: 4 / -1;
  gap: clamp(36px, 4.4vw, 64px);
  min-width: 0;
}

.sec__intro {
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  letter-spacing: 0.04em;
}

@media (max-width: 1023px) {
  .sec__head {
    position: static;
    grid-column: 1 / -1;
  }

  .sec__title {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    align-items: baseline;
  }

  .sec__body {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   Components
   -------------------------------------------------------------------------- */
.lead {
  max-width: 24em;
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.6;
  font-feature-settings: "palt";
}

.note {
  font-size: var(--fs-label);
  line-height: 1.8;
  color: var(--c-sub);
}

.sec--dark .pending {
  color: var(--c-on-black-sub);
}

/* 矢印付きのテキストリンク（上の余白はタップしやすくするためのもの） */
.link-arrow {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  justify-self: start;
  padding-top: 10px;
  padding-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.link-arrow::after {
  font-family: var(--font-en);
  content: "→";
  transition: transform 0.4s var(--ease-out);
}

.link-arrow--external::after {
  content: "↗";
}

.link-arrow:hover::after {
  transform: translateX(6px);
}

.link-arrow--external:hover::after {
  transform: translate(3px, -3px);
}

.sample-note {
  padding: 10px 14px;
  font-size: var(--fs-label);
  color: var(--c-sub);
  border: 1px dashed var(--c-sub);
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  gap: 40px clamp(32px, 5vw, 96px);
  align-items: center;
}

/* Bloom グラフィックの中心部を切り取ったディテール */
.about__visual {
  margin: 0;
  aspect-ratio: 1;
  background: var(--c-white);
}

.about__visual .bloom-graphic {
  overflow: hidden;
}

.about__text {
  display: grid;
  gap: clamp(28px, 3.2vw, 44px);
  align-content: center;
}

.about__message {
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-feature-settings: "palt";
}

/* 本文: メインコピーの考えを補足する説明文。罫線で区切り、小さく静かに添える */
.about__body {
  max-width: 30em;
  padding-top: clamp(24px, 2.6vw, 36px);
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: 0.05em;
  color: var(--c-sub);
  border-top: 1px solid var(--c-line);
}

/* スマートフォン: メインコピーを先に読ませ、図は最後に小さく右へ置いて締めくくる */
@media (max-width: 767px) {
  .about {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .about__text {
    order: -1;
  }

  .about__visual {
    justify-self: end;
    width: min(62%, 260px);
  }
}

/* --------------------------------------------------------------------------
   Business（4 事業を罫線で区切った 2×2 のマトリクス）
   -------------------------------------------------------------------------- */
.biz-grid {
  --biz-pad: clamp(20px, 2.8vw, 48px);

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--c-ink);
}

.biz {
  position: relative;
  container-type: inline-size;
  display: grid;
  gap: 16px;
  align-content: start;
  padding-block: clamp(28px, 3vw, 44px) clamp(36px, 3.6vw, 56px);
  border-bottom: 1px solid var(--c-line);
}

.biz:nth-child(odd) {
  padding-right: var(--biz-pad);
  border-right: 1px solid var(--c-line);
}

.biz:nth-child(even) {
  padding-left: var(--biz-pad);
}

.biz__no {
  font-family: var(--font-en);
  font-size: clamp(36px, 3.4vw, 52px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-stone);
  font-variant-numeric: tabular-nums;
}

.biz__title {
  margin-top: clamp(8px, 1.4vw, 20px);
}

.biz__link {
  display: grid;
  gap: 10px;
  text-decoration: none;
}

/* セル全体をクリックできるようにする（リンク文字列は事業名だけにする） */
.biz__link::after {
  position: absolute;
  inset: 0;
  content: "";
}

.biz__link:focus-visible {
  outline: none;
}

.biz__link:focus-visible::after {
  outline: 2px solid var(--c-ink);
  outline-offset: -2px;
}

.biz__en {
  font-family: var(--font-en);
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.biz__ja {
  justify-self: start;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.3s ease;
}

.biz:hover .biz__ja {
  text-decoration-color: currentColor;
}

.biz__summary {
  max-width: 32em;
  font-size: 15px;
  line-height: 1.9;
}

.biz__facts {
  display: grid;
  margin-top: 4px;
  font-size: var(--fs-small);
  line-height: 1.7;
  border-top: 1px solid var(--c-line);
}

.biz__facts > div {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  gap: 12px;
  padding-block: 10px;
  border-bottom: 1px solid var(--c-line);
}

.biz__facts dt {
  color: var(--c-sub);
}

/* セルが狭いときは項目名を上に積み、項目の途中で改行しないだけの幅を確保する */
@container (max-width: 400px) {
  .biz__facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

.biz__arrow {
  position: absolute;
  top: clamp(28px, 3vw, 44px);
  right: 0;
  font-family: var(--font-en);
  font-size: 22px;
  line-height: 1;
  transition: transform 0.4s var(--ease-out);
}

.biz:nth-child(odd) .biz__arrow {
  right: var(--biz-pad);
}

.biz:hover .biz__arrow {
  transform: translateX(6px);
}

@media (max-width: 767px) {
  .biz-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .biz:nth-child(odd),
  .biz:nth-child(even) {
    padding-inline: 0;
    border-right: 0;
  }

  .biz:nth-child(odd) .biz__arrow {
    right: 0;
  }

  .biz__summary {
    font-size: 14.5px;
  }
}

/* --------------------------------------------------------------------------
   Brands（黒セクション）
   -------------------------------------------------------------------------- */
.brand {
  display: grid;
  gap: 16px;
}

.brand__category {
  font-family: var(--font-en);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--c-on-black-sub);
}

.brand__name {
  font-family: var(--font-en);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: 0.01em;
}

.brand__kana {
  font-size: var(--fs-label);
  letter-spacing: 0.3em;
  color: var(--c-on-black-sub);
}

.brand__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 28px var(--col-gap);
  align-items: start;
  margin-top: clamp(24px, 3.4vw, 48px);
  padding-top: 28px;
  border-top: 1px solid var(--c-black-line);
}

.brand__copy {
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.55;
  font-feature-settings: "palt";
}

.brand__text {
  display: grid;
  gap: 28px;
}

.brand__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
}

@media (max-width: 767px) {
  .brand__cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   News
   -------------------------------------------------------------------------- */
.news-list {
  border-top: 1px solid var(--c-line);
}

.news-row {
  display: grid;
  grid-template-columns: 8em 9em minmax(0, 1fr) 2em;
  gap: 16px;
  align-items: baseline;
  padding-block: 24px;
  text-decoration: none;
  border-bottom: 1px solid var(--c-line);
}

.news-row__date {
  font-family: var(--font-en);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.news-row__cat {
  font-size: var(--fs-label);
  color: var(--c-sub);
}

.news-row__title {
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.3s ease;
}

.news-row:hover .news-row__title {
  text-decoration-color: currentColor;
}

.news-row__arrow {
  font-family: var(--font-en);
  text-align: right;
  transition: transform 0.4s var(--ease-out);
}

.news-row:hover .news-row__arrow {
  transform: translateX(6px);
}

@media (max-width: 767px) {
  .news-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px 16px;
    padding-block: 20px;
  }

  .news-row__title {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .news-row__arrow {
    grid-row: 1;
    grid-column: 3;
  }
}

/* --------------------------------------------------------------------------
   Company
   -------------------------------------------------------------------------- */
.company-table {
  display: grid;
  border-top: 1px solid var(--c-line);
}

.company-table > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--col-gap);
  padding-block: 17px;
  border-bottom: 1px solid var(--c-line);
}

.company-table dt {
  font-size: var(--fs-small);
  color: var(--c-sub);
}

.company-table dd {
  overflow-wrap: anywhere;
}

.company-table__line {
  display: block;
}

@media (max-width: 767px) {
  .company-table > div {
    grid-template-columns: 6.5em minmax(0, 1fr);
    gap: 12px;
    padding-block: 16px;
    font-size: 14px;
  }
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 24px;
  align-items: end;
  padding-block: clamp(28px, 3.4vw, 48px);
  text-decoration: none;
  border-block: 1px solid var(--c-ink);
}

.contact-link__en {
  font-family: var(--font-en);
  font-size: var(--fs-contact);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.contact-link__ja {
  grid-row: 2;
  font-size: 14px;
  color: var(--c-sub);
}

.contact-link__arrow {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-family: var(--font-en);
  font-size: clamp(40px, 5vw, 80px);
  line-height: 1;
  transition: transform 0.5s var(--ease-out);
}

.contact-link:hover .contact-link__arrow {
  transform: translateX(12px);
}

.contact-info > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  align-items: baseline;
}

.contact-info dt {
  font-family: var(--font-en);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--c-sub);
}

.contact-info a {
  display: inline-block;
  padding-block: 8px;
  font-family: var(--font-en);
  font-size: clamp(17px, 1.6vw, 22px);
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: clamp(64px, 8vw, 112px) 32px;
  font-size: var(--fs-small);
  color: var(--c-on-black);
  background: var(--c-black);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 56px var(--col-gap);
}

.site-footer__brand {
  display: grid;
  grid-column: 1 / span 4;
  gap: 16px;
  align-content: start;
}

.site-footer__name {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
}

.site-footer__address {
  line-height: 1.9;
  color: var(--c-on-black-sub);
}

.site-footer__address a {
  color: var(--c-on-black);
}

/* 2 列目（BUSINESS）は、いちばん長い事業名「デジタルマーケティング事業」（約 13.5em）が 1 行に収まる 14em を下限にする。
   ただし他の列がつぶれないよう、下限はメニュー幅の 40%（スマートフォンは 65%）まで。それでも足りないときは言葉のまとまりで折り返す */
.site-footer__nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(min(14em, 40%), 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-column: 5 / -1;
  gap: 32px var(--col-gap);
}

.footer-col {
  display: grid;
  gap: 12px;
  align-content: start;
}

.footer-col__head {
  justify-self: start;
  padding-block: 4px;
  font-family: var(--font-en);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-decoration: none;
}

.footer-col__head:hover,
.footer-col__list a:hover {
  text-decoration: underline;
}

.footer-col__ja {
  color: var(--c-on-black-sub);
}

.footer-col__list {
  display: grid;
}

.footer-col__list a {
  display: inline-block;
  padding-block: 4px;
  color: var(--c-on-black-sub);
  text-decoration: none;
  /* 語の途中では折り返さず、<wbr>（言葉の区切り）でだけ折り返す。極端に狭い場合もはみ出さないよう最後の手段で折り返す */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 12px 32px;
  align-items: center;
  padding-top: 24px;
  font-size: var(--fs-label);
  color: var(--c-on-black-sub);
  border-top: 1px solid var(--c-black-line);
}

.site-footer__bottom a {
  display: inline-block;
  padding-block: 6px;
  text-decoration: none;
}

.site-footer__bottom a:hover {
  color: var(--c-on-black);
}

.site-footer__top {
  margin-left: auto;
  font-family: var(--font-en);
  letter-spacing: 0.12em;
}

@media (max-width: 1023px) {
  .site-footer__brand,
  .site-footer__nav {
    grid-column: 1 / -1;
  }
}

/* スマートフォン: 2 列目（BUSINESS）を広くし、事業名を 1 行に収める */
@media (max-width: 767px) {
  .site-footer__nav {
    grid-template-columns: minmax(0, 1fr) minmax(min(14em, 65%), 1.5fr);
  }
}

/* --------------------------------------------------------------------------
   下層ページ共通: ページ見出し・パンくずリスト
   -------------------------------------------------------------------------- */
.page-head__inner {
  display: grid;
  gap: clamp(48px, 6vw, 96px);
  padding-block: clamp(20px, 2.4vw, 32px) clamp(64px, 9vw, 144px);
}

.breadcrumb ol {
  display: flex;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
  font-family: var(--font-en);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  color: var(--c-sub);
}

.breadcrumb li:not(:last-child)::after {
  margin-inline: 0.9em;
  content: "/";
}

.breadcrumb a {
  display: inline-block;
  padding-block: 6px;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb [aria-current] {
  padding-block: 6px;
  color: var(--c-ink);
}

.page-head__title {
  display: grid;
  gap: 16px;
}

.page-head__en {
  font-family: var(--font-en);
  font-size: clamp(56px, 9vw, 144px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.page-head__ja {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--c-sub);
}

.sec--page {
  padding-bottom: var(--sec-space);
}

/* --------------------------------------------------------------------------
   ABOUT: PHILOSOPHY（メインコピー ＞ 結び ＞ 本文 の主従）
   -------------------------------------------------------------------------- */
.philosophy {
  display: grid;
  gap: clamp(48px, 6vw, 88px);
}

.philosophy__copy {
  font-size: clamp(32px, 4vw, 58px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.04em;
  font-feature-settings: "palt";
}

/* 本文: 1 行が長くなりすぎないよう 36 文字前後に抑え、段落の間をしっかり空ける */
.philosophy__text {
  display: grid;
  gap: 2.2em;
  max-width: 36em;
  font-size: 16px;
  line-height: 2.2;
  letter-spacing: 0.05em;
}

/* 結び: 短い罫線で区切り、本文より少し強く見せる */
.philosophy__closing {
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.06em;
  font-feature-settings: "palt";
}

.philosophy__closing::before {
  display: block;
  width: 40px;
  height: 1px;
  margin-bottom: clamp(28px, 3vw, 40px);
  content: "";
  background: var(--c-ink);
}

@media (max-width: 767px) {
  .philosophy__text {
    gap: 2em;
    font-size: 15px;
    line-height: 2.1;
  }
}

/* --------------------------------------------------------------------------
   下層ページ見出しのメッセージ（page_head() に $leadHtml を渡したとき）
   -------------------------------------------------------------------------- */
.page-head__main {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
}

.page-head__lead {
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.04em;
  font-feature-settings: "palt";
}

.page-head__lead .pending {
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   BUSINESS: 4 事業のインデックス（番号と事業名だけ）
   -------------------------------------------------------------------------- */
.biz-index {
  padding-bottom: clamp(48px, 6vw, 96px);
}

.biz-index__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--c-ink);
}

.biz-index__list li + li {
  border-left: 1px solid var(--c-line);
}

.biz-index__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-content: start;
  height: 100%;
  padding: 20px clamp(12px, 1.6vw, 24px) 24px;
  text-decoration: none;
}

.biz-index__list li:first-child .biz-index__link {
  padding-left: 0;
}

.biz-index__no {
  font-family: var(--font-en);
  font-size: var(--fs-small);
  color: var(--c-sub);
  font-variant-numeric: tabular-nums;
}

.biz-index__arrow {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--font-en);
  transition: transform 0.4s var(--ease-out);
}

.biz-index__en {
  grid-column: 1 / -1;
  margin-top: 12px;
  font-family: var(--font-en);
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.06em;
}

.biz-index__ja {
  grid-column: 1 / -1;
  font-size: var(--fs-label);
  color: var(--c-sub);
}

.biz-index__link:hover .biz-index__arrow {
  transform: translateY(4px);
}

.biz-index__link:hover .biz-index__en {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* タブレット: 2×2 に並べ、事業名が語の途中で折り返さない幅を確保する */
@media (max-width: 1023px) {
  .biz-index__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .biz-index__list li:nth-child(n) {
    border-left: 0;
  }

  .biz-index__list li:nth-child(even) {
    border-left: 1px solid var(--c-line);
  }

  .biz-index__list li:nth-child(n + 3) {
    border-top: 1px solid var(--c-line);
  }

  .biz-index__list li:nth-child(odd) .biz-index__link {
    padding-left: 0;
  }
}

/* スマートフォン: 番号・事業名・矢印を 1 行にした縦のリスト */
@media (max-width: 767px) {
  .biz-index__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .biz-index__list li:nth-child(n) {
    border-left: 0;
  }

  .biz-index__list li:nth-child(n + 2) {
    border-top: 1px solid var(--c-line);
  }

  .biz-index__link,
  .biz-index__list li:first-child .biz-index__link {
    grid-template-columns: 2.6em minmax(0, 1fr) auto;
    gap: 2px 8px;
    align-items: baseline;
    padding: 16px 0;
  }

  .biz-index__no {
    grid-row: 1 / span 2;
  }

  .biz-index__en {
    grid-column: 2;
    margin-top: 0;
    font-size: 14px;
  }

  .biz-index__ja {
    grid-column: 2;
  }

  .biz-index__arrow {
    grid-column: 3;
  }
}

/* --------------------------------------------------------------------------
   BUSINESS: 各事業（左の柱に番号、本文に事業名・説明・事業内容のまとまり）
   -------------------------------------------------------------------------- */
.biz-sec__rail {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  grid-column: 1 / span 3;
  align-self: start;
}

.biz-sec__no {
  font-family: var(--font-en);
  font-size: clamp(64px, 8vw, 128px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--c-stone);
  font-variant-numeric: tabular-nums;
}

.biz-sec__title {
  display: grid;
  gap: 14px;
}

.biz-sec__en {
  font-family: var(--font-en);
  font-size: clamp(34px, 4.4vw, 68px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.biz-sec__ja {
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 500;
  letter-spacing: 0.08em;
}

.biz-sec__lead {
  max-width: 34em;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 2;
  letter-spacing: 0.04em;
}

.biz-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 4.4vw, 64px) clamp(24px, 3vw, 48px);
}

@media (min-width: 768px) {
  .biz-groups[data-count="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.biz-group {
  display: grid;
  gap: 18px;
  align-content: start;
  padding-top: 18px;
  border-top: 1px solid var(--c-ink);
}

.biz-group__title {
  display: grid;
  gap: 6px;
}

.biz-group__en {
  font-family: var(--font-en);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16em;
  color: var(--c-sub);
}

.biz-group__ja {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.biz-group__list {
  font-size: 14.5px;
  line-height: 1.7;
  border-top: 1px solid var(--c-line);
}

.biz-group__list li {
  padding-block: 10px;
  border-bottom: 1px solid var(--c-line);
}

/* 関連ブランドへの控えめな導線 */
.biz-sec__related {
  display: grid;
  gap: 12px;
  justify-items: start;
  max-width: 34em;
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
}

.biz-sec__related-label {
  font-family: var(--font-en);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--c-sub);
}

.biz-sec__related-text {
  font-size: 14.5px;
}

.biz-cta__text {
  font-size: 15px;
  color: var(--c-sub);
}

@media (max-width: 1023px) {
  .biz-sec__rail {
    position: static;
    grid-column: 1 / -1;
  }

  .biz-sec__no {
    font-size: clamp(48px, 10vw, 72px);
  }
}

@media (max-width: 767px) {
  .biz-groups {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .biz-sec__lead {
    font-size: 15px;
  }
}

/* 事業内容のまとまりは少しずつ時間差で表示（TOP より控えめ） */
@media (prefers-reduced-motion: no-preference) {
  .js .biz-group:nth-child(2) { transition-delay: 0.08s; }
  .js .biz-group:nth-child(3) { transition-delay: 0.16s; }
  .js .biz-group:nth-child(4) { transition-delay: 0.24s; }
}

/* --------------------------------------------------------------------------
   BRANDS: 導入（Bloom から生まれたブランドを紹介する、という一文だけ）
   -------------------------------------------------------------------------- */
.brand-intro {
  padding-bottom: clamp(64px, 8vw, 128px);
}

.brand-intro__text {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 2;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   BRANDS: 1 ブランド = 1 つの大きなセクション
   白の面・細い線・大きなブランド名・縦組みのコンセプトで、企業情報より世界観を見せる
   -------------------------------------------------------------------------- */
.brand-feature {
  padding-block: clamp(72px, 9vw, 152px);
  background: var(--c-white);
}

/* ブランド名は枠の幅いっぱいに組む（幅に合わせて文字の大きさが変わる）
   NELMEA の字面の幅は約 4.12em（字間 0.04em 込み）。100 / 4.12 ≒ 24.2 から少し小さくし、右端が切れないようにする。左端は N の余白 0.08em を詰めてそろえる */
.brand-feature__lockup {
  container-type: inline-size;
}

.brand-feature__name {
  font-family: var(--font-en);
  font-size: 22vw;
  font-size: 24.1cqi;
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: 0.04em;
}

.brand-feature__letters {
  display: block;
  margin-left: -0.08em;
  overflow: hidden;
  white-space: nowrap;
}

.brand-feature__letter {
  display: inline-block;
}

.brand-feature__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  margin-top: clamp(20px, 2.4vw, 36px);
  font-size: var(--fs-small);
  color: var(--c-sub);
}

.brand-feature__kana {
  letter-spacing: 0.42em;
}

.brand-feature__category {
  font-family: var(--font-en);
  letter-spacing: 0.2em;
}

.brand-feature__body {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 56px var(--col-gap);
  margin-top: clamp(48px, 6vw, 96px);
  padding-top: clamp(48px, 5.6vw, 96px);
}

.brand-feature__body::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  content: "";
  background: var(--c-line);
  transform-origin: left center;
}

/* コンセプト: 縦組み。2 行目を少し下げて、言葉の間に余韻を持たせる */
.brand-feature__copy {
  grid-column: 1 / span 5;
  justify-self: start;
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 400;
  line-height: 2.2;
  letter-spacing: 0.32em;
  writing-mode: vertical-rl;
}

.brand-feature__copy .phrase {
  display: block;
}

.brand-feature__copy .phrase + .phrase {
  padding-inline-start: 3.5em;
}

/* 説明と詳細ページへの導線（VIEW BRAND）をまとめて右下に置く */
.brand-feature__text {
  grid-column: 7 / -1;
  align-self: end;
}

.brand-feature__summary {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 2.4;
  letter-spacing: 0.1em;
}

.brand-feature__more {
  margin-top: clamp(28px, 3vw, 44px);
}

/* 説明の書き出しを示す短い線（ABOUT の結びと同じ表現） */
.brand-feature__summary::before {
  display: block;
  width: 40px;
  height: 1px;
  margin-bottom: clamp(24px, 2.6vw, 36px);
  content: "";
  background: var(--c-ink);
}

@media (max-width: 767px) {
  .brand-feature__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .brand-feature__copy,
  .brand-feature__text {
    grid-column: 1;
  }
}

/* ブランド名の文字が下から順に現れる（動きを減らす設定・JavaScript なしでは最初から表示） */
@media (prefers-reduced-motion: no-preference) {
  .js .brand-feature__name[data-reveal] {
    opacity: 1;
    transform: none;
  }

  .js .brand-feature__letter {
    transform: translateY(105%);
    transition: transform 1.3s var(--ease-out) calc(var(--i) * 0.07s);
  }

  .js .brand-feature__name.is-in .brand-feature__letter {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   BRANDS: 事業・お問い合わせへの控えめな導線
   -------------------------------------------------------------------------- */
.brand-links {
  padding-block: clamp(64px, 8vw, 128px) var(--sec-space);
}

.brand-links__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--c-ink);
}

.brand-links__list li + li {
  border-left: 1px solid var(--c-line);
}

.brand-links__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 16px;
  align-items: end;
  height: 100%;
  padding-block: clamp(28px, 3.4vw, 48px);
  text-decoration: none;
}

.brand-links__list li:first-child .brand-links__link {
  padding-right: clamp(20px, 3vw, 48px);
}

.brand-links__list li + li .brand-links__link {
  padding-left: clamp(20px, 3vw, 48px);
}

.brand-links__en {
  font-family: var(--font-en);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}

.brand-links__ja {
  grid-row: 2;
  font-size: var(--fs-small);
  color: var(--c-sub);
}

.brand-links__arrow {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-family: var(--font-en);
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1;
  transition: transform 0.5s var(--ease-out);
}

.brand-links__link:hover .brand-links__arrow {
  transform: translateX(8px);
}

@media (max-width: 767px) {
  .brand-links__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .brand-links__list li + li {
    border-top: 1px solid var(--c-line);
    border-left: 0;
  }

  .brand-links__list li:first-child .brand-links__link,
  .brand-links__list li + li .brand-links__link {
    padding-inline: 0;
  }
}

/* --------------------------------------------------------------------------
   BRAND DETAIL（/brands/nelmea/）: HERO
   白の面。ヘッダーの下から細い線が下り、縦組みのコンセプトにつながる。ブランド名は下に大きく
   PC はブランド名（左 9 列）とコンセプト（右 3 列）を並べ、1 画面にブランド名・カテゴリー・コンセプトが収まるようにする
   -------------------------------------------------------------------------- */
.nelmea-hero {
  background: var(--c-white);
}

.nelmea-hero__inner {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  min-height: calc(100svh - var(--header-h));
  padding-bottom: clamp(24px, 3vw, 48px);
}

.nelmea-hero .breadcrumb {
  grid-row: 1;
  grid-column: 1 / span 9;
  padding-top: clamp(20px, 2.4vw, 32px);
}

/* 線とコンセプト。1 行目（パンくずの高さ）から最下段までを使い、線が残りの高さを埋める */
.nelmea-hero__concept {
  display: grid;
  grid-template-rows: minmax(48px, 1fr) auto;
  grid-row: 1 / -1;
  grid-column: 10 / -1;
  justify-self: end;
  justify-items: end;
  margin-right: clamp(0px, 2vw, 32px);
  font-size: clamp(26px, 2.8vw, 40px);
}

/* 1 列目（右の列）の中心に合わせる。縦組みの列の幅 = line-height 2.2em */
.nelmea-hero__thread {
  width: 1px;
  margin-right: 1.1em;
  margin-bottom: 0.6em;
  background: var(--c-stone);
  transform-origin: top center;
}

.nelmea-hero__copy {
  font-weight: 400;
  line-height: 2.2;
  letter-spacing: 0.3em;
  writing-mode: vertical-rl;
}

.nelmea-hero__copy .phrase {
  display: block;
}

.nelmea-hero__copy .phrase + .phrase {
  padding-inline-start: 3.5em;
}

.nelmea-hero__foot {
  grid-row: 3;
  grid-column: 1 / span 9;
  align-self: end;
  padding-top: clamp(40px, 5vw, 72px);
}

.nelmea-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  margin-bottom: clamp(16px, 2vw, 28px);
  font-size: var(--fs-small);
  color: var(--c-sub);
}

.nelmea-hero__category {
  font-family: var(--font-en);
  letter-spacing: 0.2em;
}

.nelmea-hero__kana {
  letter-spacing: 0.42em;
}

/* ブランド名は枠の幅いっぱいに組む（BRANDS と同じ計算: 字面の幅 約 4.12em、N の左の余白 0.08em を詰める） */
.nelmea-hero__lockup {
  container-type: inline-size;
}

.nelmea-hero__name {
  font-family: var(--font-en);
  font-size: 16vw;
  font-size: 24.1cqi;
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: 0.04em;
}

.nelmea-hero__letters {
  display: block;
  margin-left: -0.08em;
  overflow: hidden;
  white-space: nowrap;
}

.nelmea-hero__letter {
  display: inline-block;
}

/* タブレット・スマートフォン: コンセプトを右上に、ブランド名を画面幅いっぱいに */
@media (max-width: 1023px) {
  .nelmea-hero__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .nelmea-hero .breadcrumb {
    grid-column: 1;
  }

  .nelmea-hero__concept {
    grid-row: 1 / span 2;
    grid-column: 2;
    margin-right: 0;
    font-size: clamp(22px, 3.4vw, 30px);
  }

  .nelmea-hero__foot {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   BRAND DETAIL: 各セクション（余白を少し広く、文章は 1 行が長くなりすぎない幅に）
   -------------------------------------------------------------------------- */
.nelmea-sec {
  padding-block: clamp(64px, 8vw, 128px);
}

.nelmea-sec--white {
  background: var(--c-white);
}

/* INTRODUCTION: 短いブランド説明と、ブランドの基本情報 */
.nelmea-intro__text {
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.08em;
}

.nelmea-intro__profile {
  max-width: 34em;
  font-size: 14px;
  border-top: 1px solid var(--c-line);
}

.nelmea-intro__profile > div {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding-block: 14px;
  border-bottom: 1px solid var(--c-line);
}

.nelmea-intro__profile dt {
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  color: var(--c-sub);
}

/* BRAND STORY: 書き出し ＞ 本文 ＞ コンセプトにつながる一節 ＞ 結び の文字サイズ差でリズムを作る */
.nelmea-story__text {
  display: grid;
  gap: 2.4em;
  max-width: 36em;
  font-size: 16px;
  line-height: 2.3;
  letter-spacing: 0.06em;
}

.nelmea-story__lead {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 2.1;
}

.nelmea-story__emphasis {
  margin-block: 0.6em;
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.08em;
  font-feature-settings: "palt";
}

.nelmea-story__closing {
  display: grid;
  gap: 1.2em;
}

.nelmea-story__closing::before {
  display: block;
  width: 40px;
  height: 1px;
  margin-bottom: 1.2em;
  content: "";
  background: var(--c-ink);
}

/* OUR THOUGHTS: 縦組み（右の列から読む）。白の面の中央に静かに置く */
.nelmea-thoughts__text {
  justify-self: center;
  font-size: clamp(15px, 4.4vw, 21px);
  font-weight: 400;
  line-height: 2.3;
  letter-spacing: 0.18em;
  writing-mode: vertical-rl;
}

.nelmea-thoughts__text p + p {
  margin-block-start: 2em;
}

/* MESSAGE: 3 つの言葉を細い罫線で区切り、少しずつ下げて並べる */
.nelmea-message__body {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  max-width: 36em;
  line-height: 2.2;
}

.nelmea-message__voices {
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-line);
}

.nelmea-message__voices li {
  padding-block: clamp(16px, 2vw, 26px);
  font-size: clamp(19px, 2vw, 27px);
  line-height: 1.6;
  letter-spacing: 0.06em;
  font-feature-settings: "palt";
  border-bottom: 1px solid var(--c-line);
}

.nelmea-message__voices li:nth-child(2) {
  padding-left: 1.5em;
}

.nelmea-message__voices li:nth-child(3) {
  padding-left: 3em;
}

.nelmea-message__close {
  display: grid;
  gap: 1.4em;
}

/* BRANDS へ戻る控えめな導線 */
.nelmea-back {
  padding-block: clamp(48px, 6vw, 96px) var(--sec-space);
}

.nelmea-back__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px clamp(16px, 2vw, 28px);
  align-items: center;
  padding-block: clamp(24px, 3vw, 40px);
  text-decoration: none;
  border-block: 1px solid var(--c-ink);
}

.nelmea-back__arrow {
  grid-row: 1 / span 2;
  font-family: var(--font-en);
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1;
  transition: transform 0.5s var(--ease-out);
}

.nelmea-back__en {
  font-family: var(--font-en);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}

.nelmea-back__ja {
  font-size: var(--fs-small);
  color: var(--c-sub);
}

.nelmea-back__link:hover .nelmea-back__arrow {
  transform: translateX(-8px);
}

@media (max-width: 767px) {
  .nelmea-story__text {
    font-size: 15px;
  }

  .nelmea-message__voices li:nth-child(2) {
    padding-left: 1em;
  }

  .nelmea-message__voices li:nth-child(3) {
    padding-left: 2em;
  }
}

/* HERO の動き: 線が下り → 縦組みの言葉が上から現れ → ブランド名が 1 文字ずつ下から現れる（動きを減らす設定・JavaScript なしでは最初から表示） */
@media (prefers-reduced-motion: no-preference) {
  .js .nelmea-hero__thread[data-reveal] {
    opacity: 1;
    transform: scaleY(0);
    transition: transform 1.4s var(--ease-out) 0.2s;
  }

  .js .nelmea-hero__copy[data-reveal] {
    transition-delay: 0.9s;
  }

  .js .nelmea-hero__meta[data-reveal] {
    transition-delay: 1.4s;
  }

  .js .nelmea-hero__name[data-reveal] {
    opacity: 1;
    transform: none;
  }

  .js .nelmea-hero__letter {
    transform: translateY(105%);
    transition: transform 1.4s var(--ease-out) calc(0.4s + var(--i) * 0.08s);
  }

  .js .nelmea-hero__name.is-in .nelmea-hero__letter {
    transform: none;
  }

  /* 縦組みの想いは、上から下へゆっくり現れる */
  .js .nelmea-thoughts__text[data-reveal] {
    transition-duration: 2.2s;
  }
}

/* --------------------------------------------------------------------------
   COMPANY: 会社情報。表ではなく、罫線で区切った 2 列のグリッドに「英語の項目名＋日本語の項目名＋内容」を置く
   英語の項目名はデザイン上のラベルで、正式な英語社名ではない
   -------------------------------------------------------------------------- */
.company-sec {
  padding-bottom: clamp(64px, 8vw, 128px);
}

.company-profile {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 48px);
}

.company-profile__item {
  display: grid;
  gap: 14px;
  align-content: start;
  padding-block: clamp(24px, 2.6vw, 36px) clamp(28px, 3vw, 44px);
  border-top: 1px solid var(--c-line);
}

/* 1 段目はセクション上端の罫線を上の区切りとして使い、左の見出しと高さをそろえる。最下段にも罫線を引く */
.company-profile__item:nth-child(-n + 2) {
  padding-top: 0;
  border-top: 0;
}

.company-profile__item:nth-last-child(-n + 2) {
  border-bottom: 1px solid var(--c-line);
}

.company-profile__label {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
}

.company-profile__en {
  font-family: var(--font-en);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
}

.company-profile__ja {
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--c-sub);
}

.company-profile__value {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.9;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

.company-profile__item--name .company-profile__value {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.5;
}

/* 英語表記（Bloom Co., Ltd.）は日本語の商号の下に小さく添える */
.company-profile__name-en {
  display: block;
  margin-top: 4px;
  font-family: var(--font-en);
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--c-sub);
}

.company-profile__role {
  margin-right: 1em;
  font-size: var(--fs-small);
  color: var(--c-sub);
}

.company-profile__line {
  display: block;
}

/* メールアドレスは押しやすい高さを取り、行の高さは変えない */
.company-profile__mail {
  display: inline-block;
  margin-block: -6px;
  padding-block: 6px;
}

.company-profile__business {
  display: grid;
  gap: 4px;
  padding: 0;
  list-style: none;
}

.company-profile__business li {
  display: flex;
  gap: 14px;
  align-items: baseline;
}

.company-profile__no {
  font-family: var(--font-en);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--c-sub);
  font-variant-numeric: tabular-nums;
}

.company-profile__more {
  margin-top: 20px;
}

.company-cta__text {
  font-size: 15px;
  color: var(--c-sub);
}

/* スマートフォン: 1 列にし、項目名の下に内容を置く（長い住所・メールアドレスも画面内で折り返す） */
@media (max-width: 767px) {
  .company-profile {
    grid-template-columns: minmax(0, 1fr);
  }

  .company-profile__item {
    gap: 10px;
    padding-block: 22px 24px;
  }

  .company-profile__item:nth-child(2) {
    padding-top: 22px;
    border-top: 1px solid var(--c-line);
  }

  .company-profile__item:nth-last-child(2) {
    border-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   CONTACT: お問い合わせフォーム
   入力欄は細い罫線の四角（角丸・影なし）。項目名は常に表示し、必須 / 任意は文字で示す
   エラーは文と太い枠で示す（色だけに頼らない）
   -------------------------------------------------------------------------- */
.contact-sec {
  padding-bottom: clamp(64px, 8vw, 128px);
}

.contact-intro {
  display: grid;
  gap: 14px;
  max-width: 40em;
}

.contact-intro__text {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 2;
  letter-spacing: 0.04em;
}

.contact-intro__text .pending {
  font-size: 11px;
}

.contact-intro__note {
  font-size: var(--fs-small);
  color: var(--c-sub);
}

/* エラーの一覧（フォームの上）。各エラーから入力欄へ移動できる */
.form-summary {
  display: grid;
  gap: 10px;
  max-width: 720px;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--c-ink);
}

.form-summary[hidden] {
  display: none;
}

.form-summary__title {
  font-weight: 600;
}

.form-summary__text {
  font-size: 14px;
  line-height: 1.9;
}

.form-summary__list {
  display: grid;
  padding: 0;
  list-style: none;
  font-size: 14px;
  word-break: auto-phrase;
}

.form-summary__list:empty {
  display: none;
}

.form-summary__list a {
  display: inline-block;
  padding-block: 6px;
}

.contact-form {
  display: grid;
  gap: clamp(32px, 3.4vw, 44px);
  max-width: 720px;
}

/* honeypot: 人には見えず、キーボードでも移動しない入力欄 */
.form-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-field {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form-field__label {
  display: block;
  padding: 0;
  line-height: 1.6;
}

.form-field__en {
  margin-right: 12px;
  font-family: var(--font-en);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
}

.form-field__ja {
  margin-right: 10px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.form-field__tag {
  display: inline-block;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  vertical-align: 2px;
  border: 1px solid var(--c-ink);
}

.form-field__tag--optional {
  color: var(--c-sub);
  border-color: var(--c-line);
}

.form-field__input {
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  font: inherit;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--c-ink);
  background: var(--c-white);
  /* 入力欄の境目が分かる濃さ（stone: 背景 3.2:1・入力欄の面 3.5:1） */
  border: 1px solid var(--c-stone);
  border-radius: 0;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field__input:hover {
  border-color: var(--c-sub);
}

.form-field__input:focus {
  border-color: var(--c-ink);
}

.form-field__input:focus-visible {
  outline-offset: 2px;
}

.form-field__input--textarea {
  min-height: 240px;
  line-height: 1.9;
  resize: vertical;
}

.form-field__input[aria-invalid="true"] {
  border-color: var(--c-ink);
  box-shadow: inset 0 0 0 1px var(--c-ink);
}

.form-field__hint {
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--c-sub);
}

.form-field__count.is-over {
  font-weight: 600;
  color: var(--c-ink);
}

.form-field__error {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  word-break: auto-phrase;
}

.form-field__error::before {
  flex: none;
  width: 12px;
  height: 2px;
  content: "";
  background: var(--c-ink);
  transform: translateY(-4px);
}

/* お問い合わせ種別（ラジオボタン）: 罫線で区切った一覧。行全体を押せる */
.form-field--choice > legend {
  margin-bottom: 14px;
}

.form-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  border-top: 1px solid var(--c-line);
}

.form-field--choice:has([aria-invalid="true"]) .form-choices {
  border-top-color: var(--c-ink);
}

.form-choice {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 56px;
  padding-block: 12px;
  font-size: 15px;
  line-height: 1.6;
  border-bottom: 1px solid var(--c-line);
  cursor: pointer;
}

.form-choice input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--c-ink);
  cursor: pointer;
}

/* プライバシーポリシーへの同意: 行全体を押せる。リンクは新しいタブで開く（↗ で示す） */
.form-choice--consent {
  flex-wrap: nowrap;
  border-top: 1px solid var(--c-line);
}

.form-field--consent:has([aria-invalid="true"]) .form-choice--consent {
  border-color: var(--c-ink);
}

.form-consent__link {
  display: inline-block;
  padding-block: 4px;
  white-space: nowrap;
}

.form-consent__link::after {
  margin-left: 2px;
  font-family: var(--font-en);
  font-size: 0.85em;
  content: "↗" / "";
}

.form-consent__nowrap {
  margin-right: 10px;
  white-space: nowrap;
}

.form-submit {
  padding-top: 8px;
}

.form-submit__button {
  display: inline-flex;
  gap: 48px;
  align-items: center;
  justify-content: space-between;
  min-width: min(100%, 320px);
  min-height: 64px;
  padding: 0 24px 0 28px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--c-ink);
  background: transparent;
  border: 1px solid var(--c-ink);
  border-radius: 0;
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.form-submit__arrow {
  font-family: var(--font-en);
  font-size: 20px;
  line-height: 1;
  transition: transform 0.4s var(--ease-out);
}

.form-submit__button:hover {
  color: var(--c-paper);
  background: var(--c-ink);
}

.form-submit__button:hover .form-submit__arrow {
  transform: translateX(6px);
}

.form-submit__button[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.6;
}

/* メールでのお問い合わせ（フォームより控えめに） */
.contact-direct__mail {
  display: inline-block;
  padding-block: 8px;
  font-family: var(--font-en);
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

/* 送信完了 */
.contact-thanks__text {
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
  font-feature-settings: "palt";
}

@media (max-width: 767px) {
  .form-choices {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-submit__button {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   PRIVACY POLICY: 左に目次、右に本文（1 行が長くなりすぎない幅）。各項目は細い罫線で区切る
   -------------------------------------------------------------------------- */
.privacy-sec {
  padding-bottom: var(--sec-space);
}

.privacy-toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  grid-column: 1 / span 3;
  align-self: start;
}

.privacy-toc__title {
  margin-bottom: 12px;
  font-family: var(--font-en);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
}

.privacy-toc__list {
  display: grid;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  line-height: 1.6;
}

.privacy-toc__list a {
  display: flex;
  gap: 10px;
  padding-block: 7px;
  color: var(--c-sub);
  text-decoration: none;
}

.privacy-toc__list a:hover {
  color: var(--c-ink);
  text-decoration: underline;
}

.privacy-toc__no {
  flex: none;
  min-width: 1.2em;
  font-family: var(--font-en);
  font-variant-numeric: tabular-nums;
}

.privacy {
  max-width: 640px;
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: 0.04em;
}

.privacy__intro {
  font-size: clamp(15px, 1.2vw, 17px);
}

.privacy-article {
  display: grid;
  gap: 1.1em;
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--c-line);
}

.privacy-article__title {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.privacy-article__no {
  flex: none;
  min-width: 1.2em;
  font-family: var(--font-en);
  font-size: var(--fs-small);
  color: var(--c-sub);
  font-variant-numeric: tabular-nums;
}

.privacy-list {
  display: grid;
  gap: 4px;
  padding: 0;
  list-style: none;
}

.privacy-list li {
  position: relative;
  padding-left: 1.3em;
}

.privacy-list li::before {
  position: absolute;
  left: 0;
  content: "・";
}

.privacy-list--numbered {
  counter-reset: privacy;
}

.privacy-list--numbered li {
  padding-left: 2.8em;
  counter-increment: privacy;
}

.privacy-list--numbered li::before {
  content: "（" counter(privacy) "）";
}

.privacy-table {
  font-size: 14px;
  line-height: 1.9;
  border-top: 1px solid var(--c-line);
}

.privacy-table > div {
  display: grid;
  grid-template-columns: 8.5em minmax(0, 1fr);
  gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--c-line);
}

.privacy-table dt {
  color: var(--c-sub);
}

.privacy-table dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

.privacy-table__en {
  display: block;
  font-family: var(--font-en);
  font-size: var(--fs-small);
  color: var(--c-sub);
}

.privacy-table__line {
  display: block;
}

/* URL・メールアドレスは途中で折り返さず、ひとまとまりで次の行へ送る（行より長い場合だけ折り返す） */
.privacy__mail,
.privacy__url {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.privacy__date {
  padding-top: 8px;
  font-size: 14px;
  color: var(--c-sub);
}

@media (max-width: 1023px) {
  .privacy-toc {
    position: static;
    grid-column: 1 / -1;
  }

  .privacy-toc__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}

@media (max-width: 767px) {
  .privacy-toc__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .privacy-table > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* --------------------------------------------------------------------------
   404: 下層ページと同じ見出し＋短い案内＋TOP へ戻る大きな導線（.contact-link を使う）
   -------------------------------------------------------------------------- */
.notfound__text {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 2;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   下層ページの仮レイアウト（各ページの本実装までの骨組み）
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--sec-space);
}

.section h1 {
  margin-bottom: 16px;
  font-size: var(--fs-lead);
}

/* --------------------------------------------------------------------------
   Motion
   動きがなくても成立するデザインにし、prefers-reduced-motion では止める
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* ヒーロー: グラフィックが育ったあとに言葉が静かに現れる（BLOOM は最初から表示） */
  .hero__lead {
    animation: bloom-drop 1.4s var(--ease-out) 1.4s both;
  }

  .hero__fields {
    animation: bloom-fade 1.6s ease 2.4s both;
  }

  /* スクロール演出（main.js が画面に入った要素に .is-in を付ける）。要素ごとに動き方を変える */
  /* 既定: 下から少し上がって現れる */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  }

  /* drop: 見出し・短い言葉が、わずかに上から現れる */
  .js [data-reveal="drop"] {
    transform: translateY(-12px);
    transition-duration: 1.1s;
  }

  /* fade: 位置を変えずに透明度だけ */
  .js [data-reveal="fade"] {
    transform: none;
    transition: opacity 1.4s ease 0.2s;
  }

  /* clip: 上から下へ切り抜きが開く（大きな文字・グラフィック） */
  .js [data-reveal="clip"] {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.4s var(--ease-out);
  }

  .js [data-reveal="clip"].is-in {
    clip-path: inset(0 0 0 0);
  }

  /* line: セクション上端の罫線が左から伸びる */
  .js [data-reveal="line"] {
    opacity: 1;
    transform: none;
  }

  .js [data-reveal="line"]::before {
    transform: scaleX(0);
    transition: transform 1.6s var(--ease-out);
  }

  .js [data-reveal="line"].is-in::before {
    transform: scaleX(1);
  }

  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  /* 下層ページの見出し（ファーストビュー）は読み込み直後から表示し、わずかな位置の動きだけ残す（LCP を遅らせない） */
  .js .page-head [data-reveal] {
    opacity: 1;
  }

  /* 4 事業は少しずつ時間差で表示 */
  .js .biz:nth-child(2) { transition-delay: 0.1s; }
  .js .biz:nth-child(3) { transition-delay: 0.2s; }
  .js .biz:nth-child(4) { transition-delay: 0.3s; }

  .site-menu:not([hidden]) {
    animation: bloom-fade 0.25s ease both;
  }
}

@keyframes bloom-drop {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
}

@keyframes bloom-fade {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}