/* ============================================
   top.css — トップページ固有スタイル（Hero含む）
   ============================================ */

/* ============================================
   Hero（全面写真 × 左紙面エリア × 斜め面）
   ============================================ */

.hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background-color: var(--color-bg);
}

/* ---- 写真パネル（右 68%・アーチ造形 + ::before ソフトフェード） ---- */
.hero__photo-wrap {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 68%;
  z-index: 1;
  overflow: hidden;
  /* 左側に建具の開口を想起させるアーチ形状（案A：弧を強化） */
  border-top-left-radius: 46% 30%;
  border-bottom-left-radius: 46% 30%;
}

/* アーチに寄り添う cream ソフトフェード — 中間高さの境界をなじませる */
.hero__photo-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 20%;
  background: linear-gradient(to right, var(--color-bg) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.hero__photo-ph {
  position: absolute;
  inset: 0;
  min-height: unset;
  border-radius: 0;
  background:
    linear-gradient(170deg, rgba(255,255,255,0.06) 0%, transparent 45%, rgba(0,0,0,0.18) 100%),
    linear-gradient(145deg, #D6C9BA 0%, #C5B8A8 35%, #B8AC9E 65%, #ABA097 100%);
}

/* PHOTOラベル（img-placeholder 削除時に自動消滅） */
.hero__photo-ph::after {
  content: 'PHOTO';
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: rgba(180, 165, 148, 0.38);
  position: absolute;
  right: 18%;
  top: 50%;
  transform: translateY(-50%);
}

/* 実画像差し替え後 */
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 実画像差し替え後のオブジェクト位置調整 */
.hero__photo {
  object-position: 70% center; /* PC：扉が右側に来るよう右寄せ */
}

/* 下部ニュースパネルの可読性補助（最小限） */
.hero__photo-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to top, rgba(250, 248, 245, 0.12), transparent);
  pointer-events: none;
}

/* img-placeholder ラベル */
.msvc-photo .img-placeholder::after               { content: '製品写真'; }

/* ---- テキスト面オーバーレイ（写真左縁の softening と干渉ゾーン） ---- */
.hero__paper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  /* 写真が 32% から現れるので、そこでピーク。テキスト可読性を保つ */
  background: linear-gradient(
    110deg,
    rgba(250, 248, 245, 0) 0%,
    rgba(250, 248, 245, 0) 20%,
    rgba(250, 248, 245, 0.92) 30%,
    rgba(250, 248, 245, 0.30) 46%,
    transparent 56%
  );
  display: flex;
  align-items: flex-start;
}

/* ---- テキストコンテンツ ---- */
.hero__content {
  padding-left: clamp(72px, 11vw, 160px);
  padding-right: var(--space-sm);
  padding-top: calc(var(--header-height) + 72px);
  padding-bottom: var(--space-lg);
  max-width: 600px;
}

/* タイトル */
.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.2vw, 3.8rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--color-dark);
  margin-bottom: var(--space-sm);
  word-break: keep-all;
  text-shadow: 0 0 20px rgba(250, 248, 245, 0.88);
  opacity: 0;
  animation: heroFadeUp 0.8s ease 0.2s forwards;
}

/* 扉のグリーン強調 */
.hero__em {
  font-style: normal;
  color: var(--color-green);
}

/* リード文 */
.hero__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-lg);
  opacity: 0;
  animation: heroFadeUp 0.8s ease 0.45s forwards;
}

/* CTA */
.hero__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: nowrap;
  align-items: center;
  opacity: 0;
  animation: heroFadeUp 0.8s ease 0.65s forwards;
}

/* ---- 下部バー（NEWS のみ） ---- */
.hero__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline: clamp(16px, 3vw, 52px);
}

/* スクロールインジケーター（縦ライン型・左カラム下部に絶対配置） */
.hero__scroll {
  position: absolute;
  bottom: 80px;
  left: 25%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--color-text-muted);
  user-select: none;
  pointer-events: none;
  opacity: 0;
  animation: heroFadeIn 0.8s ease 1.0s forwards;
}

.hero__scroll-line {
  display: block;
  width: 1px;
  height: 28px;
  background: rgba(91, 155, 112, 0.4);
  flex-shrink: 0;
}

/* NEWS導線：明るい画像向けガラス風ピルパネル */
.hero__news-lead {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(250, 248, 245, 0.52);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(200, 190, 178, 0.5);
  border-radius: var(--radius-full);
  padding: 8px 22px;
  min-width: 0;
  opacity: 0;
  animation: heroFadeIn 0.8s ease 1.2s forwards;
}

.hero__news-label {
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--color-green-dark);
  white-space: nowrap;
  flex-shrink: 0;
}

.hero__news-sep {
  display: block;
  width: 1px;
  height: 14px;
  background: rgba(26, 26, 26, 0.2);
  flex-shrink: 0;
}

.hero__news-date {
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.hero__news-text {
  font-size: var(--text-xs);
  color: var(--color-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: color var(--transition-base);
}

.hero__news-text:hover {
  color: var(--color-green-dark);
}

/* ---- アニメーション ---- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- eyebrow ラベル ---- */
.hero__label {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
  opacity: 0;
  animation: heroFadeIn 0.6s ease 0s forwards;
}

/* ---- タイトル下ゴールドバー ---- */
.hero__title-rule {
  display: block;
  width: 28px;
  height: 2px;
  background-color: var(--color-accent);
  margin-bottom: var(--space-md);
  opacity: 0;
  animation: heroFadeIn 0.6s ease 0.35s forwards;
}

/* ---- 中景：扉縁アクセントライン ---- */
.hero__door-edge {
  position: absolute;
  left: clamp(280px, 41vw, 580px);
  top: calc(var(--header-height) + 40px);
  height: 46%;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(200, 169, 110, 0.65) 20%,
    rgba(200, 169, 110, 0.50) 75%,
    transparent 100%
  );
  box-shadow: 1px 0 8px rgba(200, 169, 110, 0.16);
  z-index: 4;
  transform: rotate(-0.6deg);
  opacity: 0;
  animation: heroFadeIn 0.8s ease 0.9s forwards;
}

/* ============================================
   Hero PC: ヘッダー・CTA 調整（top.css のみ有効）
   ============================================ */

/* ハンバーガー：PCでも表示・濃いグリーン正方形 */
.header__hamburger {
  display: flex;
  width: 52px;
  height: 52px;
  background-color: #0F4A34;
  border-radius: 4px;
  gap: 6px;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.header__hamburger span {
  width: 20px;
  background-color: rgba(255, 255, 255, 0.88);
}

/* Hero内 CTA：深いグリーン */
.hero {
  --hero-green: #0F4A34;
  --hero-green-dk: #0B3D2E;
}

.hero .btn--green {
  background-color: var(--hero-green);
  border-color: var(--hero-green);
}

.hero .btn--green:hover {
  background-color: var(--hero-green-dk);
  border-color: var(--hero-green-dk);
}

.hero .btn {
  padding: 12px 28px;
}


/* ============================================
   （Statement セクション削除済み）
   ============================================ */




/* ============================================
   Main Service（深緑プロダクト紹介セクション）
   ============================================ */

.section--service-main {
  display: block;
  background-color: var(--color-green-deep);
  overflow: hidden;
}

/* ---- メインコンテンツ ---- */
.msvc-content {
  display: flex;
  flex-direction: column;
}

/* ---- パネル（深緑 | 写真 | アイテム） ---- */
.msvc-panel {
  display: grid;
  grid-template-columns: clamp(280px, 36vw, 500px) 1fr clamp(200px, 22vw, 300px);
  min-height: clamp(420px, 46vw, 600px);
}

/* ---- 左：深緑テキストエリア ---- */
.msvc-green {
  background-color: var(--color-green-deep);
  padding: clamp(var(--space-xl), 5vw, 72px) clamp(var(--space-lg), 3.5vw, 52px);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.msvc-green__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(var(--space-md), 3vw, 36px);
}

.msvc-green__num {
  font-family: var(--font-en);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.38);
}

.msvc-green__dash {
  display: block;
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}

.msvc-green__kw {
  font-family: var(--font-en);
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
}

/* ---- 見出し ---- */
.msvc-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin-bottom: clamp(var(--space-md), 3vw, var(--space-lg));
}

.msvc-em {
  font-style: normal;
  color: var(--color-accent);
}

/* ---- リード文 ---- */
.msvc-lead {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.85;
  margin-bottom: 0;
  flex: 1;
}

/* ---- 製品名 ---- */
.msvc-product {
  margin-top: clamp(var(--space-lg), 4vw, var(--space-xl));
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.msvc-product__name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 6px;
}

.msvc-product__en {
  font-family: var(--font-en);
  font-size: 0.46rem;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  line-height: 1.7;
}

/* ---- 中央：写真エリア ---- */
.msvc-photo {
  position: relative;
  overflow: hidden;
}

.msvc-photo__ph {
  position: absolute;
  inset: 0;
  min-height: unset;
  border-radius: 0;
  background: linear-gradient(160deg, #C8B9A4 0%, #B5A591 45%, #9E8F80 100%);
}

.msvc-photo__ph::before {
  content: '';
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(91, 79, 65, 0.12);
  pointer-events: none;
}

.msvc-photo .img-placeholder::after {
  content: 'PHOTO';
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-en);
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: rgba(91, 79, 65, 0.3);
}

/* 写真差し替え後 */
.msvc-photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- 右：01/02 アイテム ---- */
.msvc-items {
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
}

.msvc-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(var(--space-lg), 3.5vw, var(--space-xl)) clamp(var(--space-md), 2.5vw, var(--space-lg));
  border-left: 1px solid rgba(232, 226, 217, 0.7);
}

.msvc-item + .msvc-item {
  border-top: 1px solid rgba(232, 226, 217, 0.55);
}

.msvc-item__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(91, 155, 112, 0.08);
  border-radius: var(--radius-xs);
  color: var(--color-green);
  margin-bottom: 12px;
  line-height: 0;
  flex-shrink: 0;
}
.msvc-item__icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

.msvc-item__num {
  display: block;
  font-family: var(--font-en);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--color-accent);
  font-weight: 500;
  margin-bottom: 6px;
}

.msvc-item__title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-dark);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.msvc-item__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin: 0;
}

/* ---- 補足サービス ---- */
.msvc-sub {
  background-color: var(--color-bg);
  padding: 0 clamp(var(--space-lg), 5vw, var(--space-xl));
  border-top: 1px solid var(--color-border);
}

.msvc-sub__header {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-md), 3vw, var(--space-lg));
  padding: clamp(var(--space-lg), 3vw, var(--space-xl)) 0;
}

.msvc-sub__header::before,
.msvc-sub__header::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
}

.msvc-sub__intro {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  margin: 0;
  flex-shrink: 0;
}

.msvc-sub__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-bottom: clamp(var(--space-lg), 3vw, var(--space-xl));
}

.msvc-sub__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: 0 clamp(var(--space-md), 3vw, var(--space-lg));
}

.msvc-sub__item:first-child {
  padding-left: 0;
}

.msvc-sub__item + .msvc-sub__item {
  border-left: 1px solid var(--color-border);
}

.msvc-sub__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--color-green);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: 2px;
}

.msvc-sub__title {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-dark);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-sm);
  line-height: 1.4;
}

.msvc-sub__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin: 0;
}

/* ---- 下段フッター ---- */
.msvc-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(var(--space-lg), 4vw, var(--space-xl));
  padding: clamp(var(--space-lg), 3vw, var(--space-xl)) clamp(var(--space-lg), 5vw, var(--space-xl));
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.msvc-footer__copy {
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--color-dark);
  margin: 0;
  white-space: nowrap;
}

.msvc-footer__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin: 0;
}

.msvc-footer .btn--primary {
  background-color: var(--color-green-deep);
  border-color: var(--color-green-deep);
  white-space: nowrap;
}

.msvc-footer .btn--primary:hover {
  background-color: var(--color-green-dark);
  border-color: var(--color-green-dark);
}



/* ============================================
   Trust / Certification セクション
   ============================================ */

.section--trust {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg);
}

.trst-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  padding-top: var(--section-padding);
  padding-bottom: var(--space-xl);
}

/* ---- 上段：情報 + ビジュアル ---- */
.trst-top {
  display: grid;
  grid-template-columns: clamp(280px, 34vw, 460px) 1fr;
  min-height: clamp(240px, 26vw, 340px);
  border-bottom: 1px solid var(--color-border);
}

.trst-info {
  padding: clamp(var(--space-xl), 6vw, 80px) clamp(var(--space-lg), 4vw, var(--space-xl));
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-border);
}

.trst-info__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(var(--space-md), 3vw, var(--space-lg));
}

.trst-info__num {
  font-family: var(--font-en);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

.trst-info__dash {
  display: block;
  width: 28px;
  height: 1px;
  background: var(--color-border);
  flex-shrink: 0;
}

.trst-info__kw {
  font-family: var(--font-en);
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.trst-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-dark);
  margin-bottom: clamp(var(--space-md), 3vw, var(--space-lg));
}

.trst-lead {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.85;
  margin: 0;
}

/* ---- 右：ビジュアル ---- */
.trst-visual {
  position: relative;
  overflow: hidden;
}

.trst-visual__ph {
  position: absolute;
  inset: 0;
  min-height: unset;
  border-radius: 0;
  background: linear-gradient(120deg, #EAE4DA 0%, #DAD2C0 45%, #C8BCAA 100%);
}

.trst-visual__ph::after {
  content: 'CERTIFICATE PHOTO';
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-en);
  font-size: 0.46rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: rgba(91, 79, 65, 0.28);
  white-space: nowrap;
}

.trst-visual__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- 中段：3カテゴリ ---- */
.trst-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--color-border);
}

.trst-cat {
  padding: clamp(var(--space-lg), 3vw, var(--space-xl)) clamp(var(--space-md), 2.5vw, var(--space-lg));
  border-right: 1px solid var(--color-border);
}

.trst-cat:last-child {
  border-right: none;
}

.trst-cat__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(91, 155, 112, 0.07);
  border-radius: var(--radius-xs);
  color: var(--color-green);
  margin-bottom: var(--space-md);
  line-height: 0;
  flex-shrink: 0;
}

.trst-cat__title {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-dark);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.trst-cat__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin: 0;
}

/* ---- 下部CTAストリップ ---- */
.trst-cta-strip {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) max(var(--container-padding), calc((100% - var(--container-max)) / 2 + var(--container-padding)));
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-dark);
  transition: background-color 0.18s ease;
}

.trst-cta-strip:hover {
  background-color: var(--color-bg);
}

.trst-cta-strip__icon {
  color: var(--color-green);
  line-height: 0;
  flex-shrink: 0;
}

.trst-cta-strip__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex: 1;
}

.trst-cta-strip__arrow {
  font-family: var(--font-en);
  font-size: var(--text-sm);
  color: var(--color-green);
  flex-shrink: 0;
}



/* ---- 背景：年数タイポグラフィアンカー ---- */
.trst-year-bg {
  position: absolute;
  right: 0;
  bottom: -0.08em;
  z-index: 0;
  font-family: var(--font-en);
  font-size: clamp(120px, 20vw, 240px);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1;
  color: rgba(200, 169, 110, 0.13);
  pointer-events: none;
  user-select: none;
  padding-right: var(--container-padding);
}

/* ---- セクションヘッダー ---- */
.trst-header {
  margin-bottom: var(--space-xl);
  max-width: 560px;
}

/* ---- 実績リスト ---- */
.trst-achv-list {
  list-style: none;
  border-top: 1px solid var(--color-border);
  margin-bottom: 0;
}

.trst-achv-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 0 var(--space-md);
  align-items: start;
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border);
}

.trst-achv-badge {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-accent-dark);
  background: rgba(200, 169, 110, 0.10);
  border-radius: 3px;
  padding: 4px 7px;
  white-space: nowrap;
  margin-top: 3px;
  text-align: center;
}

.trst-achv-title {
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--color-dark);
  margin-bottom: var(--space-xs);
}

.trst-achv-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0;
}

.trst-achv-year {
  font-family: var(--font-en);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  text-align: right;
  letter-spacing: 0.04em;
  padding-top: 5px;
  line-height: 1.6;
}

.trst-achv-year small {
  display: block;
  font-size: 0.62rem;
  color: var(--color-border);
  letter-spacing: 0.02em;
}


/* ============================================
   Conceptセクション（紙面型）
   ============================================ */

.section--concept {
  display: block;
  background-color: var(--color-bg);
  overflow: hidden;
}

/* ---- セクションメタ（ラベル行）---- */
.cncpt-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(var(--space-md), 3vw, var(--space-lg));
}

.cncpt-meta__num {
  font-family: var(--font-en);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

.cncpt-meta__dash {
  display: block;
  width: 28px;
  height: 1px;
  background: var(--color-border);
  flex-shrink: 0;
}

.cncpt-meta__kw {
  font-family: var(--font-en);
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

/* ---- メインコンテンツ ---- */
.cncpt-body {
  display: flex;
  flex-direction: column;
}

/* ---- 上段：テキスト（左） + 写真（右） ---- */
.cncpt-upper {
  display: grid;
  grid-template-columns: 1fr minmax(0, 52%);
  min-height: clamp(320px, 38vw, 520px);
  border-bottom: 1px solid var(--color-border);
}

/* 上段：テキストエリア（左） */
.cncpt-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(var(--space-lg), 4vw, var(--space-xl)) clamp(var(--space-lg), 4vw, var(--space-xl));
  border-right: 1px solid var(--color-border);
}

.cncpt-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 3.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-dark);
  margin-bottom: var(--space-md);
}

.cncpt-em {
  font-style: normal;
  color: var(--color-green);
}

.cncpt-lead {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.9;
  margin-bottom: var(--space-md);
}

.cncpt-text__more {
  font-family: var(--font-en);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--color-green);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 上段：写真エリア（右） */
.cncpt-photo {
  position: relative;
  overflow: hidden;
}

.cncpt-photo__ph {
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: linear-gradient(145deg, #DAD0C3 0%, #C8BAA8 50%, #B5A898 100%);
}

.cncpt-photo__ph::before {
  content: '';
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(91, 79, 65, 0.14);
  pointer-events: none;
}

.cncpt-photo__ph::after {
  content: 'PHOTO';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-en);
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  color: rgba(91, 79, 65, 0.28);
  pointer-events: none;
}

.cncpt-photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- アニメーション ---- */
.cncpt-text.js-reveal {
  transition-delay: 0.12s;
}



/* ============================================
   実績 / お知らせ / CTA
   ============================================ */

.section--works {
  display: block;
  background-color: var(--color-bg);
  overflow: hidden;
}

/* ---- News：紙面型お知らせセクション ---- */
.section--news {
  display: block;
  background-color: var(--color-bg);
  overflow: hidden;
}

/* メインコンテンツ */
.nws-content {
  display: flex;
  flex-direction: column;
}

/* パネル（左：セクション情報 | 右：ニュースリスト） */
.nws-panel {
  display: grid;
  grid-template-columns: minmax(320px, 35%) 1fr;
}

/* 左：セクション情報 */
.nws-info {
  padding: clamp(var(--space-xl), 5vw, 80px) clamp(var(--space-lg), 5vw, var(--space-xl));
  display: flex;
  flex-direction: column;
}

.nws-info__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(var(--space-sm), 2vw, var(--space-md));
}

.nws-info__num {
  font-family: var(--font-en);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

.nws-info__dash {
  display: block;
  width: 28px;
  height: 1px;
  background: var(--color-border);
  flex-shrink: 0;
}

.nws-info__kw {
  font-family: var(--font-en);
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.nws-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.2vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-dark);
  margin-bottom: var(--space-sm);
  line-height: 1.25;
}

.nws-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin-bottom: 0;
}

.nws-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(232, 226, 217, 0.45);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-green);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.nws-link:hover {
  color: var(--color-green-dark);
}

/* 右：ニュースリスト（パネル内） */
.section--news .news-list {
  border-top: none;
  padding: clamp(var(--space-xl), 5vw, 80px) clamp(var(--space-md), 3vw, var(--space-lg));
}

.section--news .news-item {
  border-bottom: 1px solid rgba(232, 226, 217, 0.38);
}

.section--news .news-item:first-child {
  border-top: 1px solid rgba(232, 226, 217, 0.38);
}

/* 行の高さを引き締める */
.section--news .news-item__link {
  padding-block: 14px;
}

/* 日付を少し控えめに */
.section--news .news-item__date {
  font-size: 0.75rem;
}

/* タイトルのウェイトとサイズを落として静かに */
.section--news .news-item__title {
  font-size: 0.875rem;
  font-weight: 400;
}

/* バッジをアウトライン型・角丸を抑えて上品に */
.section--news .badge {
  background-color: transparent;
  border-radius: 2px;
  font-size: 0.6rem;
  padding: 2px 7px;
  font-weight: 400;
  letter-spacing: 0.06em;
  border: 1px solid rgba(122, 114, 104, 0.4);
  color: var(--color-text-muted);
}

.section--news .badge--notice {
  border-color: rgba(160, 120, 64, 0.4);
  color: var(--color-accent-dark);
}

.section--news .badge--service {
  border-color: rgba(160, 120, 64, 0.4);
  color: var(--color-accent-dark);
}

.section--news .badge--achievement {
  border-color: rgba(92, 86, 78, 0.4);
  color: #5C564E;
}

.section--news .badge--important {
  border-color: rgba(26, 26, 26, 0.5);
  color: var(--color-dark);
}

/* 横長カード（1件表示） */
.nws-card-wrap {
  padding: clamp(var(--space-xl), 5vw, 80px) clamp(var(--space-lg), 5vw, var(--space-xl));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nws-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: var(--space-lg) clamp(var(--space-md), 3vw, var(--space-lg));
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}

.nws-card__date {
  font-family: var(--font-en);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.nws-card__badge {
  flex-shrink: 0;
}

.nws-card__title {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--color-dark);
  line-height: var(--leading-normal);
  margin: 0;
}

.nws-card__arrow {
  font-size: 0.8rem;
  color: var(--color-green);
  flex-shrink: 0;
}

/* ---- Works：軽量版 ---- */

.wks-content {
  display: flex;
  flex-direction: column;
}

/* 上部ヘッダー */
.wks-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: clamp(var(--space-lg), 4vw, var(--space-xl));
  padding: clamp(var(--space-xl), 6vw, 80px) clamp(var(--space-lg), 5vw, var(--space-xl));
}

.wks-header__body {
  display: flex;
  flex-direction: column;
}

.wks-header__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(var(--space-md), 2.5vw, var(--space-lg));
}

.wks-header__num {
  font-family: var(--font-en);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

.wks-header__dash {
  display: block;
  width: 28px;
  height: 1px;
  background: var(--color-border);
  flex-shrink: 0;
}

.wks-header__kw {
  font-family: var(--font-en);
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.wks-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-dark);
  line-height: 1.3;
  margin: 0;
}

.wks-lead {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin: 0;
  max-width: 340px;
  align-self: end;
  padding-bottom: 4px;
}

/* 事例グリッド：メイン（左） + サブ2件（右） */
.wks-grid {
  display: grid;
  grid-template-columns: 58% 1fr;
  gap: clamp(var(--space-md), 2vw, var(--space-lg));
  min-height: clamp(320px, 38vw, 480px);
  padding: 0 clamp(var(--space-lg), 5vw, var(--space-xl));
  margin-bottom: var(--space-sm);
}

/* メイン事例（写真＋オーバーレイ） */
.wks-main {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xs);
}

.wks-main__pickup {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  font-family: var(--font-en);
  font-size: 0.46rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--color-surface);
  background-color: var(--color-green);
  padding: 4px 10px;
  text-transform: uppercase;
  z-index: 2;
}

.wks-main__ph {
  position: absolute;
  inset: 0;
  min-height: unset;
  border-radius: 0;
  background: linear-gradient(145deg, #C8B9A4 0%, #B5A591 45%, #9E8F80 100%);
}

.wks-main__ph::after {
  content: none;
}

.wks-main__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wks-main__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(var(--space-md), 3vw, var(--space-lg));
  background: linear-gradient(to top, rgba(20,20,20,0.72) 0%, rgba(20,20,20,0.18) 60%, transparent 100%);
  z-index: 1;
}

.wks-main__cat {
  font-family: var(--font-en);
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.72);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.wks-main__title {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.45;
  margin-bottom: var(--space-sm);
  letter-spacing: -0.01em;
}

.wks-main__desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.82);
  line-height: var(--leading-normal);
  margin: 0;
}

/* サブ事例2件（縦積み・各カード内は横並び） */
.wks-subs {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-md), 2vw, var(--space-lg));
}

.wks-sub {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.wks-sub__ph {
  width: 44%;
  flex-shrink: 0;
  min-height: unset;
  border-radius: 0;
  background: linear-gradient(145deg, #C8B9A4 0%, #B5A591 45%, #9E8F80 100%);
}

.wks-sub__img {
  width: 44%;
  flex-shrink: 0;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wks-sub__body {
  flex: 1;
  padding: var(--space-md);
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wks-sub__cat {
  font-family: var(--font-en);
  font-size: 0.46rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--color-green);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.wks-sub__title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-dark);
  line-height: 1.55;
  margin: 0;
}

/* 下部CTAストリップ */
.wks-cta-strip {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) clamp(var(--space-lg), 5vw, var(--space-xl));
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-dark);
  transition: background-color 0.18s ease;
}

.wks-cta-strip:hover {
  background-color: var(--color-bg);
}

.wks-cta-strip__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex: 1;
}

.wks-cta-strip__arrow {
  font-family: var(--font-en);
  font-size: var(--text-sm);
  color: var(--color-green);
  flex-shrink: 0;
}

/* ============================================
   お知らせセクション強化
   ============================================ */

/* align を center に変更してバッジ・矢印を揃える */
.news-item__link {
  align-items: center;
}

/* タイトル + 矢印のラッパー（矢印を常に右端に固定） */
.news-item__main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  min-width: 0;
}

/* 矢印 */
.news-item__arrow {
  flex-shrink: 0;
  color: var(--color-green);
  font-size: var(--text-base);
  line-height: 1;
  transition: transform var(--transition-base);
}

.news-item__link:hover .news-item__arrow {
  transform: translateX(5px);
}


/* ---- Contact：横長パネル型CV導線 ---- */
.section--contact {
  background-color: var(--color-bg);
  padding: clamp(var(--space-lg), 4vw, 64px) 0 0;
}

/* containerを全幅に解放してパネルを画面幅いっぱいに広げる */
.section--contact .container {
  max-width: none;
  padding-inline: 0;
}

.cntct-panel {
  display: grid;
  grid-template-columns: 54% 46%;
  overflow: hidden;
}

/* 左：テキストエリア */
.cntct-body {
  padding: clamp(var(--space-lg), 4.5vw, 72px) clamp(var(--space-lg), 5vw, var(--space-xl));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cntct-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-md);
}

.cntct-meta__num {
  font-family: var(--font-en);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

.cntct-meta__dash {
  display: block;
  width: 28px;
  height: 1px;
  background: var(--color-border);
  flex-shrink: 0;
}

.cntct-meta__kw {
  font-family: var(--font-en);
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.cntct-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--color-dark);
  margin-bottom: var(--space-md);
}

.cntct-heading__em {
  font-style: normal;
  color: var(--color-green);
}

.cntct-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-lg);
}

.cntct-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* テキストリンクCTA */
.cntct-form-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-green);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color var(--transition-base);
}

.cntct-form-link:hover {
  color: var(--color-green-dark);
}

/* 電話CTAボタン */
.cntct-tel-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  border: 1px solid rgba(91, 155, 112, 0.45);
  border-radius: var(--radius-sm);
  padding: 10px var(--space-md);
  text-decoration: none;
  gap: 2px;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}

.cntct-tel-btn:hover {
  background-color: var(--color-green-light);
  border-color: var(--color-green);
}

.cntct-tel-btn__label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.cntct-tel-btn__num {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-dark);
  font-variant-numeric: tabular-nums;
}

/* 右：写真エリア */
.cntct-visual {
  position: relative;
  min-height: 300px;
}

/* 写真左端のフェード（背景色→透明で自然に溶け込む） */
.cntct-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--color-bg) 0%, rgba(250, 248, 245, 0) 45%);
  z-index: 1;
  pointer-events: none;
}

.cntct-visual__ph {
  position: absolute;
  inset: 0;
  min-height: unset;
  border-radius: 0;
}

.cntct-visual__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}




/* ============================================
   Header：背景 / 右グループ / ナビフェード
   ============================================ */

/* スクロール後も透明を維持（common.css の is-scrolled 背景を上書き） */
.header.is-scrolled {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* headerだけ画面幅いっぱいに使う（containerの制約を解除） */
.header .container {
  max-width: none;
  padding-inline: clamp(24px, 3vw, 48px);
  justify-content: flex-end;
}

/* 右グループ（ナビ＋CTA＋Menuボタン） */
.header__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* PCナビ：スクロール後にフェードアウト */
.header__nav {
  transition: opacity 0.3s ease, visibility 0s linear 0s;
  margin-right: clamp(28px, 3.5vw, 52px);
}

/* ナビフォント：上品な字間・細め */
.header__nav-list a {
  font-weight: 400;
  letter-spacing: 0.1em;
  font-size: 0.82rem;
}

.header.is-scrolled .header__nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* お問い合わせCTAボタン */
.header__cta-btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 22px;
  background-color: var(--color-green-dark);
  color: var(--color-surface);
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color var(--transition-base);
}

.header__cta-btn:hover {
  background-color: var(--color-green-deep);
}

/* Menuボタン（横長・枠線スタイル） */
.header__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(26, 26, 26, 0.3);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  color: var(--color-dark);
  flex-shrink: 0;
  transition: border-color var(--transition-base);
}

.header__menu-btn:hover {
  border-color: rgba(26, 26, 26, 0.6);
}

/* ハンバーガーアイコン（2本線） */
.header__menu-btn__icon {
  position: relative;
  width: 16px;
  height: 9px;
  flex-shrink: 0;
}

.header__menu-btn__icon::before,
.header__menu-btn__icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
}

.header__menu-btn__icon::before { top: 0; }
.header__menu-btn__icon::after  { bottom: 0; }

/* Menuラベル */
.header__menu-btn__label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}


/* ============================================
   固定ブランドレール：index.html body オフセット
   ブランドレール要素スタイルは common.css に移動済み
   ============================================ */
@media (min-width: 1025px) {
  body {
    padding-left: var(--brand-rail-width);
  }
}

/* ============================================
   ドロワー背景 / 右サイドドロワー
   ============================================ */

/* ブラー付き半透明背景 */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
  z-index: 200;
  cursor: pointer;
}

.drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}

/* 右側ドロワーパネル */
.header__drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(400px, 85vw);
  height: 100vh;
  background: var(--color-surface);
  padding: calc(var(--header-height) + var(--space-lg)) clamp(var(--space-lg), 5vw, var(--space-xl)) var(--space-xl);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 210;
  overflow-y: auto;
  border-left: 1px solid rgba(232, 226, 217, 0.5);
}

.header__drawer.is-open {
  transform: translateX(0);
}

/* ドロワー内ナビリスト */
.drawer__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.drawer__link {
  display: block;
  padding: clamp(10px, 1.5vw, 16px) 0;
  font-size: clamp(0.875rem, 1.4vw, 1.05rem);
  font-weight: 400;
  color: var(--color-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 226, 217, 0.28);
  letter-spacing: 0.08em;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.drawer__link:first-child {
  border-top: 1px solid rgba(232, 226, 217, 0.28);
}

.drawer__link:hover {
  color: var(--color-green-dark);
  padding-left: 8px;
}

/* スクロールロック */
body.is-drawer-open {
  overflow: hidden;
}

/* ドロワー内ブランドリンク（スマホ・タブレット用トップページ導線） */
.drawer__brand-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  text-decoration: none;
  color: var(--color-dark);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.drawer__brand-link:hover {
  opacity: 1;
}

.drawer__brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-green);
  font-family: var(--font-serif);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-green);
  flex-shrink: 0;
}

.drawer__brand-name {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-dark);
}


/* ============================================
   Scroll Reveal 拡張スタイル
   scroll-reveal.js が注入する .js-reveal / .is-visible を、
   セクションごとに高特異度ルールで上書きし多彩な動きにする。
   ============================================ */

/* 左からフェードイン（Concept ラベル・見出しなど） */
.js-reveal.reveal-left {
  transform: translateX(-18px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}
.js-reveal.reveal-left.is-visible {
  transform: translateX(0);
}

/* スケールフェード（写真・ビジュアルエリア） */
.js-reveal.reveal-scale {
  transform: scale(1.025);
  transform-origin: center;
  transition: opacity 1.0s ease-out, transform 1.0s ease-out;
}
.js-reveal.reveal-scale.is-visible {
  transform: scale(1);
}

/* 下からフェードイン（デフォルトより控えめな移動量） */
.js-reveal.reveal-up {
  transform: translateY(20px);
  transition: opacity 0.85s ease-out, transform 0.85s ease-out;
}
.js-reveal.reveal-up.is-visible {
  transform: translateY(0);
}

/* stagger: Trust 実績リスト */
.trst-achv-list .trst-achv-item:nth-child(2) { transition-delay: 0.12s; }
.trst-achv-list .trst-achv-item:nth-child(3) { transition-delay: 0.24s; }

/* stagger: Main Service 2アイテム */
.msvc-items .msvc-item:nth-child(2) { transition-delay: 0.15s; }

/* stagger: Works サブ事例 */
.wks-subs .wks-sub:nth-child(2) { transition-delay: 0.12s; }

/* prefers-reduced-motion 対応 */
@media (prefers-reduced-motion: reduce) {
  .js-reveal.reveal-left,
  .js-reveal.reveal-scale,
  .js-reveal.reveal-up {
    transform: none;
    transition: none;
  }
  .trst-achv-list .trst-achv-item:nth-child(2),
  .trst-achv-list .trst-achv-item:nth-child(3),
  .msvc-items .msvc-item:nth-child(2),
  .wks-subs .wks-sub:nth-child(2) {
    transition-delay: 0s;
  }
}