/* ==========================================================================
   会社案内のページだけの CSS（キャンバス案E v51 の AboutE。/about/）
   --------------------------------------------------------------------------
   このページでだけ読む（inc/assets.php の planart_page_styles() の 'about'。style.css のあと）。
   色・余白・角丸・影はトークンだけを使う（verify_site.py が見張る）。

   ■ このページの段のうち、共通の部品で組めた物（見た目は style.css）
     ヒーロー（型3・数字の組3つ）＝22章・15章／英字の帯＝12章／モットーの頭＝27章／大切にしていること＝24章（'cards'）／
     段の見出し＝7章／相談の帯＝10章。
   ■ ここに書いた物（このページにしか無い組み方）
     1. （このページだけのトークンは、style.css の 0章へ移した。2026-11-03 まとめ。名前はそのまま）
     2. 代表メッセージ（小さいラベルの見出し＋大きな一文＋写真の枠＋文）
     3. モットーの中身（PLAN&ART と、その意味。parts/about-motto.php）
     4. 4つの仕事のカード（parts/about-business.php）
     5. 会社概要の表
     6. アクセス（住所・電話・受付時間・Googleマップで開く・地図の埋め込み）
     7. 動き（矢印が右へ少し動く・カードの色がなめらかに変わる。style.css 28章と同じ決まり）
   ========================================================================== */

/* ---- 2. 代表メッセージ ---- */
.p-about-message__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-statement-head);
}

/* 見出しの型B（7章の小さいラベル）を左寄せで */
.p-about-message__heading {
  justify-content: flex-start;
  text-align: left;
}

.p-about-message__statement {
  max-width: 20em;
  color: var(--c-ink);
  font-size: var(--fs-statement-md);
  line-height: 1.5;
  font-weight: 700;
  font-feature-settings: 'palt';
  text-wrap: balance;
}

.p-about-message__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-32) var(--sp-split-gap);
}

/* 代表の写真の枠（縦 5：横 4）。写真が無いあいだは、枠ごと出さない（作業台も本番も。2026-11-09。page-about.php） */
.p-about-message__photo {
  position: relative;
  box-sizing: border-box;
  flex: 0 1 380px;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-card-md);
  background: var(--c-frame);
}

.p-about-message__body {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-20);
}

.p-about-message__text {
  color: var(--c-text);
  font-size: clamp(16px, 1.3cqi, 18px);
  line-height: 2;
}

.p-about-message__sign {
  padding-top: var(--s-8);
  color: var(--c-ink);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 700;
}

/* ---- 3. モットーの中身（黒い面の中。parts/about-motto.php） ---- */
.p-about-motto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-20) var(--sp-split-gap);
  padding-top: var(--sp-stack-sm);
  border-top: 1px solid var(--c-dark-line);
}

/* 大きな PLAN&ART（読み上げない飾り） */
.p-about-motto__mark {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 0 0.22em;
  color: var(--c-on-dark);
  font-size: clamp(48px, 6.6cqi, 100px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.p-about-motto__amp {
  color: var(--c-green-bright);
}

.p-about-motto__body {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
}

.p-about-motto__title {
  color: var(--c-on-dark);
  font-size: clamp(20px, 1.8cqi, 26px);
  line-height: 1.5;
  font-weight: 700;
  font-feature-settings: 'palt';
}

.p-about-motto__text {
  color: var(--c-on-dark-sub-2);
  font-size: 16px;
  line-height: 1.8;
}

/* ---- 4. 4つの仕事のカード（parts/about-business.php。2列・幅 760px 以下は1列＝2章の .u-grid2） ---- */
.p-about-biz {
  gap: var(--s-12);
}

.p-about-biz__item {
  min-width: 0;
}

.p-about-biz__card {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
  padding: var(--sp-biz-card);
  border-radius: var(--r-card);
  background: var(--c-surface);
  color: var(--c-ink);
  text-decoration: none;
}

.p-about-biz__card:hover {
  background: var(--c-biz-hover);
}

.p-about-biz__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-6) var(--s-12);
}

/* 番号は読み上げない飾り（--c-muted のまま。CLAUDE.md 4章） */
.p-about-biz__num {
  color: var(--c-muted);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.p-about-biz__en {
  color: var(--c-green);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.p-about-biz__new {
  padding-inline: var(--s-8);
  border-radius: var(--r-pill);
  background: var(--c-green);
  color: var(--c-on-dark);
  font-size: 11px;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.p-about-biz__title {
  margin-top: var(--s-4);
  color: var(--c-ink);
  font-size: var(--fs-h3-lg);
  line-height: 1.4;
  font-weight: 700;
  font-feature-settings: 'palt';
}

.p-about-biz__catch {
  color: var(--c-text);
  font-size: clamp(16px, 1.3cqi, 18px);
  line-height: 1.6;
  font-weight: 700;
}

.p-about-biz__menu {
  color: var(--c-sub);
  font-size: 15px;
  line-height: 1.8;
}

/* 「くわしく見る」（カードのいちばん下にそろえる） */
.p-about-biz__more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: auto;
  padding-top: var(--s-6);
  color: var(--c-green);
  font-size: 15px;
  font-weight: 600;
}

.p-about-biz__more svg {
  display: block;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}

/* ---- 5. 会社概要の表（白い角丸の面。幅 920px・真ん中。面の余白は料金の表と同じ値） ---- */
.p-about-outline {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--w-table);
  margin-inline: auto;
  padding-block: var(--sp-price-table-block);
  padding-inline: var(--sp-price-table-inline);
  border-radius: var(--r-card);
  background: var(--c-bg);
}

.p-about-outline__table {
  width: 100%;
  border-collapse: collapse;
  color: var(--c-ink);
  font-size: 16px;
  line-height: 1.8;
}

.p-about-outline__row {
  border-bottom: 1px solid var(--c-line-soft);
}

.p-about-outline__row:last-child {
  border-bottom: 0;
}

.p-about-outline__th {
  width: clamp(5.5em, 16cqi, 9em);
  padding-block: var(--s-20);
  padding-inline: 0 var(--s-16);
  color: var(--c-sub);
  font-weight: 700;
  text-align: left;
  vertical-align: top;
}

.p-about-outline__td {
  padding-block: var(--s-20);
  vertical-align: top;
}

/* 電話の数字の押せる範囲：行（28.8px）の上に 16px（欄の上の余白 20px の中）広げて 44.8px。
   負の margin で打ち消すので、行の高さと文字の位置は変わらない（style.css 1章の■の1）。
   下は広げない（すぐ下の「受付時間」の行が上に重なり、広げた分が押せないため） */
.p-about-outline__tel {
  display: inline-block;
  margin-top: calc(-1 * var(--s-16));
  padding-top: var(--s-16);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.p-about-outline__hours {
  display: block;
  color: var(--c-sub);
  font-size: 14px;
  line-height: 1.7;
}

.p-about-outline__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.p-about-outline__item {
  display: flex;
  gap: var(--s-10);
}

.p-about-outline__dot {
  flex: 0 0 auto;
  color: var(--c-green);
  font-weight: 700;
}

.p-about-outline__item-text {
  min-width: 0;
}

/* ---- 6. アクセス ---- */
.p-about-access {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--s-24) var(--sp-access-gap);
}

.p-about-access__info {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-18);
}

.p-about-access__address {
  color: var(--c-ink);
  font-size: clamp(20px, 1.8cqi, 26px);
  line-height: 1.6;
  font-weight: 700;
  font-feature-settings: 'palt';
}

.p-about-access__dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-8) var(--s-18);
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.7;
}

.p-about-access__dt {
  color: var(--c-sub);
  font-weight: 700;
}

/* 電話の数字の押せる範囲：行（25.5px）の上に 11px（住所との間 18px の中）・下に 8px（受付時間の行との間）広げて 44.5px（style.css 1章の■の1） */
.p-about-access__tel {
  display: inline-block;
  margin-block: calc(-1 * var(--s-11)) calc(-1 * var(--s-8));
  padding-block: var(--s-11) var(--s-8);
  color: var(--c-ink);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* 外枠つきボタン（5章の c-btn--outline）を、キャンバスの「Googleマップで開く」の形に（間 10px・右の余白 18px・斜めの矢印 15px） */
.p-about-access__map-link {
  align-self: flex-start;
  gap: var(--s-10);
  padding-inline: var(--s-22) var(--s-18);
}

.p-about-access__map-link svg {
  display: block;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

/* 地図の枠（横 16：縦 10。Googleマップの iframe を枠いっぱいに）。最小の高さはキャンバスの .pe-card と同じ 250px（幅 760px 以下は 0） */
.p-about-access__map {
  position: relative;
  flex: 1.4 1 420px;
  min-width: 0;
  max-width: 100%;
  min-height: 250px;
  aspect-ratio: 16 / 10;
  overflow: clip;
  border-radius: var(--r-card);
  background: var(--c-frame);
}

.p-about-access__iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@container (max-width: 760px) {
  .p-about-access__map {
    min-height: 0;
  }
}

/* ---- 7. 動き（style.css 28章と同じ決まり：動きを減らす設定でない人だけ・.is-motion のときだけ） ---- */
@media (prefers-reduced-motion: no-preference) {
  /* 4つの仕事のカードの面の色が、なめらかに変わる（キャンバスの .pe-biz） */
  .is-motion .p-about-biz__card {
    transition: background-color .25s ease;
  }

  /* 矢印が右へ少し動く（キャンバスの .pe-link:hover svg。5章のボタンとリンクと同じ） */
  .is-motion :is(.p-about-biz__more, .p-about-access__map-link) svg {
    transition: translate .25s ease;
  }

  .is-motion .p-about-biz__card:hover .p-about-biz__more svg,
  .is-motion .p-about-access__map-link:hover svg {
    translate: 3px 0;
  }
}