/**
 * DASULLAR — ダスラーについて（ブランド紹介）ページ (page-about.php) 専用スタイル
 * 共通トークン（色・フォント・余白・イージング・.pill ボタン等）は
 * assets/css/base.css をそのまま利用し、ここではこのページ固有の
 * レイアウトのみを定義しています。
 *
 * クラス名はすべて .brand- 接頭辞とし、トップページ ABOUT セクションの
 * 既存クラス（.about ...）と衝突しないようにしています。
 */

.brand-section{
  padding: clamp(64px,8vw,120px) var(--pad-x);
}
.brand-container{
  max-width:680px;
  margin:0 auto;
  text-align:center;
}

/* ---------- 1. HERO ---------- */
.brand-hero{
  background:#fff;
  padding: clamp(96px,12vw,160px) var(--pad-x) clamp(64px,8vw,110px);
}
.brand-hero h1{
  margin-top:16px;
  font-size:clamp(2.1rem,4.2vw,3.2rem);
  line-height:1.5;
  color:var(--ink);
}
.brand-hero p{
  margin:clamp(24px,3vw,32px) auto 0;
  max-width:36em;
  font-size:16.5px;
  line-height:2;
  color:#3E4B45;
}

/* ---------- 2. OUR VALUES ---------- */
.brand-values{
  background:var(--paper);
}
.brand-values h2{
  margin-top:14px;
  font-size:clamp(1.9rem,3.4vw,2.6rem);
  line-height:1.5;
  color:var(--ink);
}
.brand-values__grid{
  max-width:980px;
  margin: clamp(44px,5vw,64px) auto 0;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0 clamp(28px,3.4vw,44px);
}
.brand-value{
  padding-top: clamp(24px,2.6vw,30px);
  border-top:1px solid rgba(21,32,27,.14);
  text-align:left;
}
.brand-value__num{
  display:block;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.06em;
  color:var(--green-strong);
}
.brand-value h3{
  margin-top:12px;
  font-size:17px;
  line-height:1.6;
  font-weight:700;
  color:var(--ink);
}
.brand-value p{
  margin-top:10px;
  font-size:14.5px;
  line-height:1.85;
  color:#3E4B45;
}
@media (max-width:820px){
  .brand-values__grid{ grid-template-columns:1fr; gap:28px; max-width:520px; }
}

/* ---------- 3. COMMUNITY / 4. ENVIRONMENT （共通の文章主体レイアウト） ---------- */
.brand-community{ background:var(--mint); }
.brand-environment{ background:var(--sand); }

.brand-community h2,
.brand-environment h2{
  margin-top:14px;
  font-size:clamp(1.9rem,3.4vw,2.6rem);
  line-height:1.5;
  color:var(--ink);
}
.brand-community p,
.brand-environment p{
  margin:clamp(20px,2.6vw,28px) auto 0;
  max-width:38em;
  font-size:16px;
  line-height:2;
  color:#3E4B45;
  text-align:left;
}

/* ---------- 共通のテキストリンク（→ 付き、既存 .link-more 系と同じ見た目） ---------- */
.brand-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:clamp(24px,2.8vw,32px);
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.06em;
  color:var(--green-deep);
  border-bottom:1px solid rgba(8,122,75,.4);
  padding-bottom:4px;
  transition: border-color .3s var(--ease), opacity .3s var(--ease);
}
.brand-link:hover{ border-color:var(--green-deep); }
.brand-link:focus-visible{
  outline: 2px solid var(--green-deep);
  outline-offset: 3px;
}

/* ---------- 5. OUR IDENTITY ---------- */
.brand-identity{ background:#fff; }
.brand-identity__inner{
  max-width:900px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(32px,4vw,48px);
}
.brand-identity__text{ text-align:center; }
.brand-identity h2{
  margin-top:14px;
  font-size:clamp(1.9rem,3.4vw,2.6rem);
  line-height:1.5;
  color:var(--ink);
}
.brand-identity__heading-line{ display:block; white-space:nowrap; }
.brand-identity__text p{
  margin:clamp(20px,2.6vw,28px) auto 0;
  max-width:38em;
  font-size:16px;
  line-height:2;
  color:#3E4B45;
}
.brand-identity__links{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.brand-identity__accent{
  width:120px;
  flex-shrink:0;
}
.brand-identity__accent img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
@media (min-width:861px){
  .brand-identity__inner{ flex-direction:row; text-align:left; }
  .brand-identity__text{ text-align:left; flex:1 1 auto; }
  .brand-identity__text p{ margin-left:0; }
  .brand-identity__links{ align-items:flex-start; }
}

/* ---------- 6. CLOSING MESSAGE ---------- */
.brand-closing{
  background:var(--green-deep);
  color:var(--mint);
}
.brand-closing .eyebrow{ color:#BEEAD3; }
.brand-closing .eyebrow::before{ background:#BEEAD3; }
.brand-closing h2{
  margin-top:14px;
  font-size:clamp(1.9rem,3.4vw,2.6rem);
  line-height:1.5;
  color:#fff;
}
.brand-closing p{
  margin:clamp(20px,2.6vw,28px) auto 0;
  max-width:38em;
  font-size:16px;
  line-height:2;
  color:var(--mint);
}
.brand-closing__actions{
  margin-top:clamp(28px,3.2vw,36px);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
}
.brand-closing__actions .pill.outline{
  border-color:#fff;
  color:#fff;
}
.brand-closing__actions .pill.outline:hover{
  background:rgba(255,255,255,.12);
}

@media (prefers-reduced-motion: reduce){
  .brand-hero *, .brand-values *, .brand-community *, .brand-environment *,
  .brand-identity *, .brand-closing *{ animation:none !important; transition:none !important; }
}