/* ============================================
   ScentAurum LLC — Corporate Site v4
   International Trading Company · Restrained Luxury
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Noto+Serif+JP:wght@200;300;400;500;600;700&family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');

/* ─── Design Tokens ─── */
:root {
  /* Warm palette */
  --ivory:       #f8f6f1;
  --ivory-deep:  #f0ece4;
  --warm-gray:   #e6e1d8;
  --mid-warm:    #b5ad9e;
  --stone:       #8a8275;
  --charcoal:    #3d3830;
  --ink:         #2a2520;
  --deep:        #1e1a16;

  /* Accent — aged brass */
  --brass:       #9e8c6c;
  --brass-light: #b8a88a;

  /* Fonts */
  --font-display: 'Cormorant Garamond', 'Shippori Mincho', serif;
  --font-body:    'Noto Serif JP', 'Shippori Mincho', serif;

  /* Layout */
  --header-height: 80px;
  --section-padding: 140px;
  --container: 1160px;
  --narrow:    780px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Reset ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background: var(--ivory);
  color: var(--ink);
  line-height: 1.9;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }

/* ─── Layout ─── */
.container        { max-width: var(--container); margin: 0 auto; padding: 0 48px; }
.container-narrow { max-width: var(--narrow);   margin: 0 auto; padding: 0 48px; }

/* ─── Scroll Reveal ─── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.4s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }
.reveal-delay-4 { transition-delay: 0.48s; }
.reveal-delay-5 { transition-delay: 0.60s; }

/* ============================================
   SPLASH SCREEN
   ============================================ */
.splash {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;       /* フォールバック（古いブラウザ用） */
  height: 100dvh;      /* スマホブラウザのアドレスバー等を除いた実画面高さ */
  background: var(--deep);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.splash.fade-out {
  opacity: 0;
  pointer-events: none;
}

.splash-logo {
  width: 260px;
  max-width: 50vw;
  opacity: 0;
  animation: splashLogoIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

@keyframes splashLogoIn {
  0%   { opacity: 0;    transform: translateY(6px) scale(0.98); filter: blur(8px); }
  25%  { opacity: 0.35; filter: blur(3px); }
  70%  { opacity: 0.9;  filter: blur(0.5px); }
  100% { opacity: 1;    transform: translateY(0) scale(1);     filter: blur(0px); }
}

/* ============================================
   HEADER
   ============================================ */
.header {
  position: fixed; top: 0; left: 0; width: 100%;
  height: var(--header-height);
  z-index: 1000;
  background: rgba(248, 246, 241, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--warm-gray);
  transition: box-shadow 0.5s ease;
}

.header.scrolled {
  box-shadow: 0 1px 40px rgba(42, 37, 32, 0.04);
}

.header-inner {
  max-width: 100%;
  margin: 0; padding: 0 40px;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
}

.header-logo { margin-right: auto; }

.header-logo-img { height: 38px; width: auto; }

.nav-list {
  display: flex; list-style: none; gap: 40px;
  margin-left: auto;
}

.nav-link {
  font-family: var(--font-display);
  font-size: 0.84rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  position: relative;
  padding: 4px 0;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute; bottom: -2px; left: 0;
  width: 100%; height: 1px;
  background: var(--brass);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease);
}

.nav-link:hover { color: var(--brass); }
.nav-link:hover::after,
.nav-link.current::after {
  transform: scaleX(1); transform-origin: left;
}

/* ── Hamburger ── */
/* ── 暖簾（のれん）風メニューボタン：縦線3本 ── */
.hamburger {
  display: none; flex-direction: row; gap: 4px;
  align-items: center; justify-content: center;
  cursor: pointer; z-index: 1001; padding: 10px 8px;
}
.hamburger span {
  display: block; width: 1px; height: 22px;
  background: var(--ink);
  transition: transform 0.5s var(--ease), opacity 0.4s ease, height 0.5s var(--ease);
}
/* 暖簾らしく、中央の線をわずかに長く（垂れ感） */
.hamburger span:nth-child(2) { height: 26px; }
/* 開いたとき：暖簾が左右に分かれるように割れる */
.hamburger.active span:nth-child(1) { transform: translateX(-4px) scaleY(0.7); opacity: 0.4; }
.hamburger.active span:nth-child(2) { transform: scaleY(0.5); opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateX(4px) scaleY(0.7); opacity: 0.4; }

/* ── Mobile Menu：暖簾が上から下りてくる演出 ── */
.mobile-menu {
  display: none; position: fixed; top: 0; left: 0;
  width: 100%; height: 100vh; height: 100dvh;
  background: var(--ivory);
  z-index: 999;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 36px;
  pointer-events: none;
  /* 暖簾のように上から下りてくる（初期は上に畳まれている） */
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transition: clip-path 0.7s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.4s ease;
}
.mobile-menu.active {
  clip-path: inset(0 0 0% 0);
  opacity: 1;
  pointer-events: all;
}
.mobile-link {
  font-family: var(--font-display);
  font-size: 1.3rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--charcoal);
  transition: color 0.3s ease;
  /* 各項目が下から静かにフェードイン（初期状態） */
  opacity: 0;
  transform: translateY(16px);
}
.mobile-menu.active .mobile-link {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s var(--ease), color 0.3s ease;
}
/* 項目を一つずつ時間差で（暖簾が下りきってから順に） */
.mobile-menu.active .mobile-link:nth-child(1) { transition-delay: 0.35s; }
.mobile-menu.active .mobile-link:nth-child(2) { transition-delay: 0.44s; }
.mobile-menu.active .mobile-link:nth-child(3) { transition-delay: 0.53s; }
.mobile-menu.active .mobile-link:nth-child(4) { transition-delay: 0.62s; }
.mobile-menu.active .mobile-link:nth-child(5) { transition-delay: 0.71s; }
.mobile-menu.active .mobile-link:nth-child(6) { transition-delay: 0.80s; }
.mobile-menu.active .mobile-link:nth-child(7) { transition-delay: 0.89s; }
.mobile-link:hover { color: var(--brass); }

/* ============================================
   HERO (TOP PAGE)
   ============================================ */
.hero {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  background: var(--ivory);
}

.hero-content {
  text-align: center; z-index: 2; padding: 0 40px;
}

.hero-logo {
  width: 600px; max-width: 82vw;
  margin: 0 auto 44px;
  opacity: 0;
  animation: heroLogoReveal 2.0s cubic-bezier(0.16, 1, 0.3, 1) 1.8s forwards;
}

@keyframes heroLogoReveal {
  0%   { opacity: 0;    transform: translateY(4px) scale(0.98); filter: blur(12px); }
  20%  { opacity: 0.25; filter: blur(5px); }
  55%  { opacity: 0.85; filter: blur(0.8px); }
  100% { opacity: 1;    transform: translateY(0) scale(1);      filter: blur(0px); }
}

.hero-statement {
  font-family: var(--font-body);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  line-height: 2.3;
  color: var(--stone);
  max-width: 500px;
  margin: 0 auto 20px;
  opacity: 0;
  animation: heroIn 1.8s cubic-bezier(0.16, 1, 0.3, 1) 3.2s forwards;
}

/* Business tagline below hero statement */
.hero-tagline-biz {
  font-family: var(--font-display);
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  color: var(--stone);
  max-width: 720px;
  margin: 0 auto 44px;
  opacity: 0;
  animation: heroIn 1.8s cubic-bezier(0.16, 1, 0.3, 1) 3.6s forwards;
}
.hero-tagline-biz span {
  display: inline-block;
  white-space: nowrap;
  position: relative;
  padding: 0 1.4em;
}
.hero-tagline-biz span:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  width: 1px;
  height: 0.9em;
  background: currentColor;
  opacity: 0.35;
  transform: translateY(-50%);
}

.hero-cta {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--charcoal);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 4px;
  opacity: 0;
  animation: heroIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) 4.0s forwards;
  transition: color 0.3s ease;
}
.hero-cta:hover { color: var(--brass); }

.scroll-indicator {
  position: absolute; bottom: 40px; left: 0;
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0; animation: heroIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 4.4s forwards;
}
.scroll-indicator span {
  font-family: var(--font-display);
  font-size: 0.70rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--mid-warm);
}
.scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, var(--stone), transparent);
  animation: scrollPulse 2.4s ease-in-out infinite;
}

@keyframes heroIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.8; }
}

/* ============================================
   SECTIONS — base
   ============================================ */
.section { padding: var(--section-padding) 0; }
.section-warm  { background: var(--ivory-deep); }
.section-dark  { background: var(--deep); color: var(--ivory-deep); }
.section-light { background: var(--ivory-deep); }

.section-title {
  font-family: var(--font-display);
  font-size: 0.78rem; letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 16px;
}

.section-heading {
  font-family: var(--font-body);
  font-size: 1.8rem; font-weight: 300;
  letter-spacing: 0.08em; line-height: 1.7;
  color: var(--ink);
  margin-bottom: 24px;
}

.section-body {
  font-size: 0.88rem; line-height: 2.1;
  color: var(--charcoal);
  /* 日本語の文節単位で改行し、最終行に1〜2文字だけ残らないようにする */
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;
}

.section-dark .section-heading { color: var(--ivory-deep); }
.section-dark .section-body    { color: var(--mid-warm); }
.section-dark .section-title   { color: var(--brass-light); }

.section-divider {
  width: 36px; height: 1px;
  background: var(--brass);
  margin: 36px 0;
}
.section-dark .section-divider { background: var(--brass-light); }

/* Feature statement */
.feature-statement {
  font-family: var(--font-body);
  font-size: 1.45rem; font-weight: 300;
  line-height: 2.2; letter-spacing: 0.06em;
  text-align: center;
  max-width: 860px; margin: 0 auto;
}

/* ============================================
   INTRO (TOP)
   ============================================ */
.intro-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}

.intro-image { width: 100%; overflow: hidden; }
.intro-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================
   TRUST PILLARS (新規)
   ============================================ */
.trust-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--warm-gray);
}

.trust-item {
  padding: 44px 32px;
  background: var(--deep);
  text-align: left;
}

.trust-icon {
  font-family: var(--font-display);
  font-size: 0.70rem; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(248,246,241,0.1);
}

.trust-heading {
  font-family: var(--font-body);
  font-size: 1rem; font-weight: 400;
  color: var(--ivory-deep);
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.trust-body {
  font-size: 0.78rem; line-height: 1.95;
  color: var(--mid-warm);
}

/* ============================================
   SERVICES
   ============================================ */
.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--warm-gray);
}

.services-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.service-card {
  padding: 56px 40px;
  background: var(--ivory);
  transition: background 0.5s ease;
}
/* ホバーはマウス操作デバイスのみ（スマホのタッチで色が変わるのを防ぐ） */
@media (hover: hover) {
  .service-card:hover { background: var(--ivory-deep); }
}

.service-number {
  font-family: var(--font-display);
  font-size: 0.76rem; letter-spacing: 0.22em;
  color: var(--brass);
  margin-bottom: 28px;
}

.service-card-title {
  font-family: var(--font-body);
  font-size: 1.05rem; font-weight: 400;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  line-height: 1.6;
}

.service-card-body {
  font-size: 0.82rem; line-height: 2;
  color: var(--charcoal);
}

.service-card-link {
  font-family: var(--font-display);
  font-size: 0.68rem; letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-block;
  margin-top: 20px;
  transition: color 0.3s ease;
}
@media (hover: hover) {
  .service-card-link:hover { color: var(--ink); }
}

/* ============================================
   BRANDS
   ============================================ */
.brands-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--warm-gray);
}

.brand-card {
  display: block; padding: 48px 48px;
  background: var(--ivory);
  text-decoration: none; color: var(--ink);
  transition: background 0.5s ease, color 0.5s ease;
}
@media (hover: hover) {
  .brand-card:hover { background: var(--deep); color: var(--ivory-deep); }
}

/* Coming Soon（準備中）状態のブランドカード：hover効果を無効化 */
.brand-card.brand-card-coming { cursor: default; }
.brand-card.brand-card-coming:hover {
  background: var(--ivory);
  color: var(--ink);
}
.brand-card.brand-card-coming:hover .brand-desc { color: var(--charcoal); }
.brand-card.brand-card-coming:hover .brand-link-text-coming { color: var(--stone); }
.brand-link-text-coming {
  color: var(--stone) !important;
  letter-spacing: 0.22em;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 400;
  letter-spacing: 0.1em; margin-bottom: 14px;
}

.brand-name-jp {
  font-family: var(--font-body);
  font-size: 1.35rem; font-weight: 400;
  letter-spacing: 0.15em; margin-bottom: 14px;
}

.brand-desc {
  font-size: 0.82rem; line-height: 1.95;
  color: var(--charcoal);
  margin-bottom: 24px;
  transition: color 0.5s ease;
}
@media (hover: hover) {
  .brand-card:hover .brand-desc { color: var(--mid-warm); }
}

.brand-link-text {
  font-family: var(--font-display);
  font-size: 0.78rem; letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brass);
  transition: color 0.5s ease;
}
@media (hover: hover) {
  .brand-card:hover .brand-link-text { color: var(--brass-light); }
}

/* ============================================
   BUTTONS / CTA
   ============================================ */
.btn-primary {
  display: inline-flex; align-items: center;
  padding: 14px 48px;
  background: var(--ink);
  color: var(--ivory);
  border: none;
  font-family: var(--font-display);
  font-size: 0.74rem; letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.4s ease;
  text-decoration: none;
}
.btn-primary:hover { background: var(--charcoal); }

.btn-outline {
  display: inline-flex; align-items: center;
  padding: 14px 48px;
  background: transparent;
  color: var(--ivory);
  border: 1px solid rgba(248,246,241,0.3);
  font-family: var(--font-display);
  font-size: 0.74rem; letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.4s ease, border-color 0.4s ease;
  text-decoration: none;
}
.btn-outline:hover { background: rgba(248,246,241,0.08); border-color: rgba(248,246,241,0.5); }

/* Legacy alias */
.form-submit {
  display: inline-flex; align-items: center;
  padding: 15px 48px;
  background: var(--ink);
  color: var(--ivory);
  border: none;
  font-family: var(--font-display);
  font-size: 0.74rem; letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.4s ease;
}
.form-submit:hover { background: var(--charcoal); }

/* ============================================
   ABOUT
   ============================================ */
.about-values {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}

.about-value-title {
  font-family: var(--font-display);
  font-size: 0.76rem; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 20px; padding-bottom: 20px;
  border-bottom: 1px solid var(--warm-gray);
}

.about-value-heading {
  font-family: var(--font-body);
  font-size: 1.1rem; font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.7;
  margin-bottom: 16px;
  color: var(--ink);
}

.about-value-body {
  font-size: 0.82rem; line-height: 2;
  color: var(--charcoal);
}

/* Why this business — 4-column grid */
.business-scope-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--warm-gray);
  margin-top: 56px;
}

.business-scope-item {
  padding: 36px 28px;
  background: var(--ivory-deep);
}

.business-scope-num {
  font-family: var(--font-display);
  font-size: 0.72rem; letter-spacing: 0.22em;
  color: var(--brass);
  margin-bottom: 16px;
}

.business-scope-title {
  font-family: var(--font-body);
  font-size: 0.95rem; font-weight: 400;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  color: var(--ink);
  line-height: 1.5;
}

.business-scope-body {
  font-size: 0.78rem; line-height: 1.9;
  color: var(--charcoal);
}

.info-table { width: 100%; border-collapse: collapse; }
.info-table tr { border-bottom: 1px solid var(--warm-gray); }
.info-table th,
.info-table td {
  padding: 20px 0; text-align: left;
  font-weight: 400; font-size: 0.88rem; vertical-align: top;
}
.info-table th {
  width: 160px; color: var(--stone);
  font-size: 0.82rem; letter-spacing: 0.04em;
}

/* ============================================
   CONTACT
   ============================================ */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
}

/* Inquiry type selector */
.inquiry-types {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--warm-gray);
  margin-bottom: 40px;
}

.inquiry-type-btn {
  padding: 16px 20px;
  background: var(--ivory);
  border: none;
  font-family: var(--font-body);
  font-size: 0.8rem; letter-spacing: 0.04em;
  color: var(--charcoal);
  cursor: pointer;
  text-align: left;
  transition: background 0.3s ease, color 0.3s ease;
  position: relative;
}
.inquiry-type-btn::before {
  content: '';
  display: inline-block;
  width: 5px; height: 1px;
  background: var(--brass);
  margin-right: 10px;
  vertical-align: middle;
}
.inquiry-type-btn:hover { background: var(--ivory-deep); color: var(--ink); }
.inquiry-type-btn.active {
  background: var(--ink);
  color: var(--ivory-deep);
}
.inquiry-type-btn.active::before { background: var(--brass-light); }

.form-group { margin-bottom: 32px; }

.form-label {
  display: block; font-size: 0.76rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--stone); margin-bottom: 12px;
  font-family: var(--font-display);
}

.form-input,
.form-textarea {
  width: 100%; padding: 12px 0;
  border: none; border-bottom: 1px solid var(--warm-gray);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.92rem; color: var(--ink);
  outline: none;
  transition: border-color 0.3s ease;
}
.form-input:focus,
.form-textarea:focus { border-bottom-color: var(--brass); }
.form-textarea { min-height: 120px; resize: vertical; }

.form-select {
  width: 100%; padding: 12px 0;
  border: none; border-bottom: 1px solid var(--warm-gray);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.92rem; color: var(--ink);
  outline: none; cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.3s ease;
}
.form-select:focus { border-bottom-color: var(--brass); }

.contact-info-item { margin-bottom: 40px; }

.contact-info-label {
  font-family: var(--font-display);
  font-size: 0.76rem; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass); margin-bottom: 12px;
}

.contact-info-value { font-size: 0.92rem; line-height: 1.9; }

/* Contact guide boxes */
.contact-guide {
  padding: 28px 32px;
  border: 1px solid var(--warm-gray);
  margin-bottom: 16px;
}

.contact-guide-title {
  font-family: var(--font-display);
  font-size: 0.80rem; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 8px;
}

.contact-guide-body {
  font-size: 0.8rem; line-height: 1.9;
  color: var(--charcoal);
}

/* ============================================
   BUSINESS DETAIL PAGE
   ============================================ */
.business-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
/* 節ごとに本文列と画像列を左右入れ替える(01は画像=右, 02は画像=左 …) */
/* grid-row: 1 を明示しないと、DOM順で後にある要素が自動配置で2行目に落ちる */
.business-detail-media-right > .business-detail-text  { grid-column: 1; grid-row: 1; }
.business-detail-media-right > .business-detail-media { grid-column: 2; grid-row: 1; }
.business-detail-media-left  > .business-detail-text  { grid-column: 2; grid-row: 1; }
.business-detail-media-left  > .business-detail-media { grid-column: 1; grid-row: 1; }
/* media列 = 画像（以前はご相談ボックスとの縦積み） */
.business-detail-media {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* CTA直前の添え書き: 誰が相談してよいかを一行で示す */
.business-cta-note {
  margin-top: 56px;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.9;
  color: var(--mid-warm);
  text-wrap: balance;
  word-break: auto-phrase;
  line-break: strict;
}
.business-cta-note + .business-cta-row {
  margin-top: 20px;
  padding-top: 0;
  border-top: none;
}
/* picture はインライン要素のため、指定しないと画像が親の高さまで伸びない */
.business-detail-image picture {
  display: block;
  width: 100%;
  height: 100%;
}
/* Brands: 専門知識セクションの画像を大きく(列比を4:6にして画像側を広く) */
.brands-expertise-grid {
  grid-template-columns: 4fr 6fr;
  gap: 64px;
  align-items: center;
}
/* 現れる瞬間だけ、わずかに引いた状態からゆっくり定まる(一度きり・その後は静止) */
.brands-expertise-grid .business-detail-image img {
  transform: scale(1.08);
  transition: transform 2.6s var(--ease);
}
.brands-expertise-grid .business-detail-image.active img {
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .brands-expertise-grid .business-detail-image img { transform: none; transition: none; }
}
@media (max-width: 1024px) {
  .brands-expertise-grid { grid-template-columns: 1fr; }
  /* 1列時はボタンを中央に（左寄せのままだと余白が偏って見えるため） */
  .brands-expertise-cta { text-align: center; }
}

/* CTAはグリッドの下に全幅で。細い区切り線でセクションを締める */
.business-detail-grid + .business-cta-note {
  padding-top: 40px;
  border-top: 1px solid var(--warm-gray);
}


.business-detail-number {
  font-family: var(--font-display);
  font-size: 0.76rem; letter-spacing: 0.26em;
  color: var(--brass);
  margin-bottom: 12px;
}

.business-detail-list {
  list-style: none;
  margin-top: 24px;
}

.business-detail-list li {
  font-size: 0.82rem; line-height: 1.8;
  color: var(--charcoal);
  padding: 10px 0 10px 20px;
  border-bottom: 1px solid var(--warm-gray);
  position: relative;
}
.business-detail-list li::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 1px;
  background: var(--brass);
}

/* 事業のリード文: 3秒で本質が伝わる一文。本文より一回り大きく、墨色で主役に */
.business-lead {
  /* 1行に収まる字数(約24字)で書く前提。中間幅では折り返すため文節単位で改行 */
  font-size: 1.15rem;
  line-height: 1.85;
  color: var(--deep);
  margin-top: 28px;
  margin-bottom: 20px;
  letter-spacing: 0.02em;
  text-wrap: balance;
  word-break: auto-phrase;
  line-break: strict;
}
/* 補足本文は一段淡くし、リード文との主従を明確に */
.business-detail-text .section-body {
  font-size: 0.84rem;
  color: var(--mid-warm);
}

/* 本文→対応内容リストの切り替わりを小見出しで明示 */
.business-detail-list-label {
  margin-top: 40px;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
}
.business-detail-list-label + .business-detail-list { margin-top: 12px; }
/* リストの行間をわずかに広げ、罫線を一段淡く */
.business-detail-text .business-detail-list li {
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom-color: rgba(230, 225, 216, 0.75);
}

/* 事業内容の目次(ページ内ジャンプ) */
.biz-jump {
  /* 均等幅の4列。文字数の差で幅がばらついたり、最後の1つだけ折り返すのを防ぐ */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 44px;
}
.biz-jump-link {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 9px;
  padding: 13px 8px;
  border: 1px solid var(--warm-gray);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  /* セル内で2行に折り返さない（文言は1行で収まる長さに保つ） */
  white-space: nowrap;
  color: var(--charcoal);
  text-decoration: none;
  transition: border-color 0.35s ease, color 0.35s ease;
}
.biz-jump-link:hover { border-color: var(--brass); color: var(--deep); }
.biz-jump-num {
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--brass);
}
/* 固定ヘッダーの高さぶん着地位置を下げる */
#agarwood, #tea, #cars, #consulting {
  scroll-margin-top: calc(var(--header-height) + 24px);
}





.business-cta-row {
  display: flex; gap: 16px; align-items: center;
  margin-top: 32px;
}


/* 中間幅(タブレット〜小さめのPC窓)では列が細くなり文章が縦に伸びるため1列に切替 */
@media (max-width: 1024px) {
  /* 中間幅では1列に。どの節も 本文 → 画像 の順で流す */
  .business-detail-grid { grid-template-columns: 1fr; gap: 48px; }
  .business-detail-grid > .business-detail-text  { grid-column: 1; grid-row: auto; order: 1; }
  .business-detail-grid > .business-detail-media { grid-column: 1; grid-row: auto; order: 2; }
  /* 1列時は画像が巨大化しないよう上限を設けて中央に(直接置かれるBrands等の画像も対象) */
  .business-detail-grid .business-detail-image {
    aspect-ratio: 4 / 3;
    height: auto;
    min-height: 0;
    width: 100%;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
  .business-cta-note { margin-top: 48px; }
  .biz-jump { grid-template-columns: repeat(2, 1fr); }
  /* 六国カードは3列だと1行の文字数が少なくなりすぎるため2列に */
  .rikoku-grid { grid-template-columns: repeat(2, 1fr); }
}
/* 副ボタン: 真鍮の輪郭線タイプ(主ボタンと同サイズ・別色) */
.btn-brass {
  display: inline-flex;
  align-items: center;
  padding: 13px 47px;
  background: transparent;
  color: var(--brass);
  border: 1px solid var(--brass);
  font-family: var(--font-display);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.4s ease, color 0.4s ease;
  text-decoration: none;
}
.btn-brass:hover { background: var(--brass); color: var(--ivory); }

/* CTAは中央に配置し、ボタンを大きく(枠線ぶん1px引いて主ボタンと同じ高さに) */
.business-cta-row { justify-content: center; }
.business-cta-row .btn-primary {
  padding: 20px 64px;
  font-size: 0.82rem;
}
.business-cta-row .btn-brass {
  padding: 19px 63px;
  font-size: 0.82rem;
}


.business-detail-accent {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 60px 40px;
  background: var(--warm-gray);
  min-height: 280px;
}

.business-detail-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}
.business-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease);
}
.business-detail-image:hover img {
  transform: scale(1.04);
}

.business-accent-kanji {
  font-family: var(--font-body);
  font-size: 5rem; font-weight: 200;
  color: var(--charcoal); opacity: 0.25;
  line-height: 1;
  margin-bottom: 16px;
}

.business-accent-en {
  font-family: var(--font-display);
  font-size: 0.65rem; letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass);
}

/* ============================================
   PAGE HERO (Inner pages)
   ============================================ */
.page-hero {
  min-height: 44vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  /* 左右余白がないと、狭い画面で説明文が画面端で切れる */
  padding-left: 28px;
  padding-right: 28px;
  padding-top: var(--header-height);
  /* 下端の装飾線(::after)と本文が重ならないよう余白を確保 */
  padding-bottom: 64px;
  background: var(--ivory);
  position: relative;
}
.page-hero::after {
  content: '';
  position: absolute; bottom: -24px; left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, var(--brass), transparent);
}

.page-hero-title {
  font-family: var(--font-display);
  font-size: 2.5rem; font-weight: 300;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink);
  opacity: 0; animation: heroIn 2s var(--ease) 0.3s forwards;
}

.page-hero-sub {
  font-family: var(--font-body);
  font-size: 0.92rem; color: var(--stone);
  margin-top: 14px; letter-spacing: 0.08em;
  opacity: 0; animation: heroIn 2s var(--ease) 0.6s forwards;
}

.page-hero-desc {
  font-size: 0.8rem; color: var(--mid-warm);
  margin-top: 16px; max-width: 460px;
  letter-spacing: 0.04em; line-height: 1.9;
  opacity: 0; animation: heroIn 2s var(--ease) 0.9s forwards;
  /* 見出し下の説明文も同様に行長を均等化 */
  text-wrap: balance;
  word-break: auto-phrase;
  line-break: strict;
}

/* ============================================
   NEWS
   ============================================ */
.news-item {
  padding: 40px 0;
  border-bottom: 1px solid var(--warm-gray);
}
.news-item:first-child { padding-top: 0; }

.news-date {
  font-family: var(--font-display);
  font-size: 0.80rem; letter-spacing: 0.12em;
  color: var(--stone); margin-bottom: 8px;
}

.news-tag {
  display: inline-block;
  font-size: 0.65rem; letter-spacing: 0.1em;
  color: var(--brass);
  border: 1px solid var(--brass);
  padding: 2px 14px; margin-bottom: 12px;
}

.news-title {
  font-family: var(--font-body);
  font-size: 1.05rem; font-weight: 400;
  letter-spacing: 0.05em; margin-bottom: 10px;
}

.news-excerpt {
  font-size: 0.82rem; line-height: 2;
  color: var(--charcoal);
}

/* ============================================
   AGARWOOD
   ============================================ */
.rikoku-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--warm-gray);
}

.rikoku-item {
  padding: 40px 32px; text-align: center;
  background: var(--ivory);
  transition: background 0.5s ease, color 0.5s ease;
}
@media (hover: hover) {
  .rikoku-item:hover { background: var(--deep); color: var(--ivory-deep); }
}

.rikoku-kanji {
  font-family: var(--font-body);
  font-size: 2.2rem; font-weight: 200;
  letter-spacing: 0.15em; margin-bottom: 8px;
}

.rikoku-name {
  font-family: var(--font-display);
  font-size: 0.68rem; letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--brass); margin-bottom: 16px;
  transition: color 0.5s ease;
}
@media (hover: hover) {
  .rikoku-item:hover .rikoku-name { color: var(--brass-light); }
}

.rikoku-desc {
  font-size: 0.78rem; line-height: 1.9;
  color: var(--charcoal);
  transition: color 0.5s ease;
  /* 各行の長さを均等化し「類。」のような孤立行が出ないようにする */
  text-wrap: balance;
  /* 日本語の文節単位で改行(対応ブラウザのみ・非対応環境では無視される) */
  word-break: auto-phrase;
  /* 句読点・小書き文字が行頭に来ないようにする */
  line-break: strict;
  /* 列が広くても1行が伸びすぎないよう上限を設けて中央に置く */
  max-width: 20em;
  margin-left: auto;
  margin-right: auto;
}
@media (hover: hover) {
  .rikoku-item:hover .rikoku-desc { color: var(--mid-warm); }
}

.gomi-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; background: var(--warm-gray);
  max-width: 640px; margin: 0 auto;
}

.gomi-item {
  text-align: center; padding: 28px 16px;
  background: var(--ivory);
}

.gomi-label {
  font-family: var(--font-body);
  font-size: 1.8rem; font-weight: 200; margin-bottom: 8px;
}

.gomi-name {
  font-family: var(--font-display);
  font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--brass);
}

.enjoy-list { display: flex; flex-direction: column; }

.enjoy-item {
  display: flex; gap: 32px;
  padding: 40px 0;
  border-bottom: 1px solid var(--warm-gray);
}
.enjoy-item:first-child { padding-top: 0; }
.enjoy-item:last-child  { border-bottom: none; }

.enjoy-number {
  font-family: var(--font-display);
  font-size: 0.72rem; letter-spacing: 0.2em;
  color: var(--brass); flex-shrink: 0; padding-top: 4px;
}

.enjoy-title {
  font-family: var(--font-body);
  font-size: 1.05rem; font-weight: 400;
  letter-spacing: 0.08em; margin-bottom: 10px;
}

/* ============================================
   LEGAL / PRIVACY
   ============================================ */
.legal-content { line-height: 2.1; }

.legal-intro {
  font-size: 0.88rem; line-height: 2.1;
  color: var(--charcoal);
  margin-bottom: 48px; padding-bottom: 48px;
  border-bottom: 1px solid var(--warm-gray);
}

.legal-section { margin-bottom: 40px; }

.legal-heading {
  font-family: var(--font-body);
  font-size: 0.95rem; font-weight: 500;
  letter-spacing: 0.04em; margin-bottom: 12px;
  color: var(--ink);
}

.legal-body {
  font-size: 0.84rem; line-height: 2.1;
  color: var(--charcoal);
}

.legal-date {
  font-size: 0.78rem; color: var(--stone);
  margin-top: 60px; padding-top: 40px;
  border-top: 1px solid var(--warm-gray);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--deep);
  color: var(--ivory-deep);
  padding: 80px 0 48px;
}

.footer-inner {
  max-width: var(--container);
  margin: 0 auto; padding: 0 48px;
}

.footer-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(248, 246, 241, 0.08);
}

.footer-logo { margin-bottom: 0; }

.footer-logo-img {
  height: 48px; width: auto;
  filter: invert(1) brightness(1.15);
  margin-bottom: 20px;
}

.footer-desc {
  font-size: 0.84rem; line-height: 2;
  color: var(--stone);
}

.footer-nav-title {
  font-family: var(--font-display);
  font-size: 0.74rem; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin-bottom: 20px;
}

.footer-nav-list { list-style: none; }
.footer-nav-item { margin-bottom: 10px; }

.footer-nav-link {
  font-size: 0.82rem;
  color: var(--mid-warm);
  transition: color 0.3s ease;
}
a.footer-nav-link:hover { color: var(--ivory-deep); }

/* Coming Soon（準備中）状態のフッターリンク：クリック不可、控えめ */
.footer-nav-link-coming {
  cursor: default;
  opacity: 0.6;
}
.footer-nav-link-coming small {
  font-size: 0.72em;
  letter-spacing: 0.04em;
  margin-left: 4px;
  opacity: 0.8;
}

.footer-bottom {
  padding-top: 36px;
  display: flex; justify-content: space-between; align-items: center;
}

.footer-copyright {
  font-family: var(--font-display);
  font-size: 0.78rem; letter-spacing: 0.08em;
  color: var(--stone);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  :root { --section-padding: 100px; }
  .intro-grid { gap: 40px; }
  .services-grid { grid-template-columns: 1fr; background: none; gap: 0; }
  .services-grid .service-card { border-bottom: 1px solid var(--warm-gray); }
  .services-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: 1fr; background: none; gap: 0; }
  .trust-grid .trust-item { border-bottom: 1px solid rgba(248,246,241,0.30); }
  .trust-grid .trust-item:last-child { border-bottom: none; }
  .business-scope-grid { grid-template-columns: repeat(2, 1fr); }
  .about-values { gap: 40px; }
  .business-detail-grid { grid-template-columns: 1fr; gap: 40px; }
  .business-detail-media { gap: 40px; }
  .business-cta-note { margin-top: 40px; padding-top: 32px; }
  .business-detail-accent { min-height: 180px; }
  .business-accent-kanji { font-size: 3.5rem; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* ============================================
   RESPONSIVE TEXT SWITCH (pc-only / sp-only)
   ============================================ */
.sp-only { display: none; }

/* 言語切替(モバイル/タブレット): ハンバーガー内ではなくヒーロー右上に静かに置く */
.hero-lang-link {
  display: none;
  position: absolute;
  z-index: 3;
  top: calc(var(--header-height) + 18px);
  right: 40px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  text-decoration: none;
  border-bottom: 1px solid rgba(158, 140, 108, 0.45);
  padding-bottom: 2px;
}
@media (max-width: 880px) {
  .hero-lang-link { display: inline-block; }
}
@media (max-width: 768px) {
  .hero-lang-link { right: 22px; }
}

/* 言語切替(EN): ナビ項目とは区切り線で分け、真鍮色で別の道具であることを示す */
.nav-lang {
  border-left: 1px solid var(--warm-gray);
  padding-left: 28px;
  margin-left: -12px;
}
.nav-link-lang { color: var(--brass); }
.nav-link-lang:hover { color: var(--deep); }
.mobile-link-lang { color: var(--brass); }

/* ナビ7項目対応：中間幅では間隔を詰め、880px以下でハンバーガーへ切替 */
@media (max-width: 1100px) {
  .nav-list { gap: 24px; }
}
@media (max-width: 880px) {
  .nav-list { display: none; }
  .hamburger { display: flex; }
  .mobile-menu { display: flex; }
}
@media (max-width: 768px) {
  :root { --section-padding: 72px; --header-height: 64px; }
  .pc-only { display: none; }
  .sp-only { display: revert; }
  .container, .container-narrow { padding: 0 28px; }
  .header-inner { padding: 0 22px; }
  .nav-list { display: none; }
  .hamburger { display: flex; }
  .mobile-menu { display: flex; }

  /* 装飾的な改行をスマホでは無効化（PC向けの<br>を消す） */
  /* 意味のある改行はクラス単位で明示的に保持する */
  br { display: none; }
  br.keep,
  td br,
  .contact-info-value br,
  .section-heading br,
  .service-card-title br,
  .trust-heading br,
  .about-value-heading br,
  .hero-statement br,
  .feature-statement br,
  .feature-statement-wide br,
  .brand-desc br,
  .brand-name-jp br,
  .page-hero-desc br,
  .legal-body br { display: revert; }

  /* ヒーロー */
  .hero-content { padding: 0 22px; }
  .hero-logo { width: 380px; max-width: 88vw; margin-bottom: 34px; }
  .hero-statement {
    font-size: 0.92rem; line-height: 1.95; letter-spacing: 0.04em;
    margin-bottom: 16px;
  }
  .hero-tagline-biz {
    font-size: 0.72rem; letter-spacing: 0.14em;
    margin-bottom: 32px;
  }
  .hero-tagline-biz span { padding: 0 0.9em; }
  .hero-cta { font-size: 0.78rem; letter-spacing: 0.24em; }
  .scroll-indicator { bottom: 32px; }
  .scroll-indicator span { font-size: 0.62rem; }

  /* 見出し・本文（間延びを抑える） */
  .section-title { font-size: 0.72rem; letter-spacing: 0.2em; margin-bottom: 14px; }
  .section-heading {
    font-size: 1.3rem; letter-spacing: 0.04em; line-height: 1.6;
    margin-bottom: 20px;
  }
  .section-body { font-size: 0.92rem; line-height: 1.95; }
  .feature-statement {
    font-size: 1.1rem; line-height: 1.95; letter-spacing: 0.03em;
  }
  .section-divider { margin: 28px 0; }

  /* グリッド1カラム化 */
  .intro-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  /* 本文だけは中央寄せを解除し、左寄せで可読性を確保 */
  .intro-grid .section-body { text-align: left; }
  /* 連続する本文段落の間に息継ぎの余白 */
  .section-body + .section-body { margin-top: 1.2em; }
  .trust-grid { grid-template-columns: 1fr; background: none; gap: 0; }
  .trust-item {
    padding: 28px 24px;
    border-bottom: 1px solid rgba(248,246,241,0.30);
  }
  .trust-item:last-child { border-bottom: none; }
  .trust-icon { margin-bottom: 16px; padding-bottom: 12px; }
  .trust-heading { font-size: 0.98rem; line-height: 1.55; letter-spacing: 0.03em; }
  .trust-body { display: none; }

  .services-grid-4 { grid-template-columns: 1fr; background: none; gap: 0; }
  .services-grid-4 .service-card { border-bottom: 1px solid var(--warm-gray); }
  .service-card { padding: 44px 28px; }
  .service-card-title { font-size: 1rem; letter-spacing: 0.04em; line-height: 1.55; }
  .service-card-body { font-size: 0.86rem; line-height: 1.9; }
  /* スマホ：スクロールで画面中央より少し下に来たら、PCのホバーと同じ色変化 */
  .service-card.in-view { background: var(--ivory-deep); }

  .about-values { grid-template-columns: 1fr; }
  .business-scope-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .inquiry-types { grid-template-columns: 1fr; }

  .brands-grid { grid-template-columns: 1fr; background: none; gap: 0; }
  .brand-card { padding: 32px 28px; border-bottom: 1px solid var(--warm-gray); }
  .brand-name { font-size: 1.25rem; letter-spacing: 0.06em; }
  .brand-name-jp { font-size: 1.25rem; }
  .brand-desc { display: none; }

  /* Coming Soon要素のスマホ最適化 */
  .brand-link-text-coming { letter-spacing: 0.16em; font-size: 0.72rem; }
  .footer-nav-link-coming small { font-size: 0.68em; margin-left: 3px; }

  .rikoku-grid { grid-template-columns: repeat(2, 1fr); }
  /* 五味は5項目のため3列だと6マス目が空く。6分割にして各項目を2マス分使い、
     2段目の2項目は中央に寄せる。空マスの灰色が出ないよう区切りは枠線で描く */
  .gomi-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    background: transparent;
  }
  .gomi-item { grid-column: span 2; }
  .gomi-item:nth-child(4) { grid-column: 2 / span 2; }
  .gomi-item:nth-child(5) { grid-column: 4 / span 2; }
  /* 縦の区切り線(各段の2番目以降の項目の左側) */
  .gomi-item:nth-child(2),
  .gomi-item:nth-child(3),
  .gomi-item:nth-child(5) { border-left: 1px solid var(--warm-gray); }
  /* 横の区切り線(1段目の下) */
  .gomi-item:nth-child(-n+3) { border-bottom: 1px solid var(--warm-gray); }
  .enjoy-item { flex-direction: column; gap: 12px; }
  /* 画面が狭いぶん、要素間の間隔を広げて詰まりを解消 */
  .business-lead { font-size: 1.02rem; line-height: 1.8; margin-top: 30px; margin-bottom: 22px; }
  .business-detail-text .section-body { font-size: 0.88rem; }
  .business-detail-list-label { margin-top: 40px; }
  .business-detail-list-label + .business-detail-list { margin-top: 16px; }
  .business-detail-text .business-detail-list li { padding-top: 15px; padding-bottom: 15px; }
  .section-divider { margin-top: 28px; }
  /* 中間幅・スマホでは2列（2×2）に。奇数の余りが出ない形を保つ */
  .biz-jump { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 36px; }
  .biz-jump-link { padding: 11px 6px; font-size: 0.72rem; gap: 7px; letter-spacing: 0.02em; }
  .business-cta-row { flex-direction: column; align-items: center; }
  /* 縦積み時は2つのボタンの幅を揃える（文字数の差で幅がずれないように） */
  .business-cta-row .btn-primary,
  .business-cta-row .btn-brass {
    width: 100%;
    max-width: 320px;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
    text-align: center;
  }

  /* page-hero */
  /* 極小画面(320px級)では目次を1列に。横に詰めて文字が溢れるのを防ぐ */
  @media (max-width: 360px) {
    .biz-jump { grid-template-columns: 1fr; }
  }
  .page-hero { min-height: 32vh; padding-bottom: 32px; }
  /* スマホでは装飾の縦線が説明文に被るため非表示 */
  .page-hero::after { display: none; }
  .page-hero-title { font-size: 1.6rem; letter-spacing: 0.12em; }
  .page-hero-sub { font-size: 0.85rem; margin-top: 10px; letter-spacing: 0.04em; }
  .page-hero-desc { font-size: 0.78rem; margin-top: 14px; line-height: 1.85; }

  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .info-table th { width: 110px; }
}

@media (max-width: 480px) {
  :root { --section-padding: 60px; }
  .container, .container-narrow { padding: 0 24px; }
  .header-inner { padding: 0 18px; }

  .hero-logo { width: 300px; max-width: 86vw; margin-bottom: 30px; }
  .hero-statement { font-size: 0.88rem; line-height: 1.9; margin-bottom: 14px; }
  .hero-tagline-biz {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    margin-bottom: 28px;
    /* 案B: 親の一括フェードをやめ、各行が上から順に浮かび上がるようにする */
    opacity: 1;
    animation: none;
  }
  .hero-tagline-biz span {
    padding: 0;
    opacity: 0;
    animation: heroIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .hero-tagline-biz span:nth-child(1) { animation-delay: 3.5s; }
  .hero-tagline-biz span:nth-child(2) { animation-delay: 3.7s; }
  .hero-tagline-biz span:nth-child(3) { animation-delay: 3.9s; }
  .hero-tagline-biz span:nth-child(4) { animation-delay: 4.1s; }
  /* 区切りをPC版の縦線から真鍮色の中点に置き換え（各行の下に付く） */
  .hero-tagline-biz span:not(:last-child)::after {
    content: '・';
    position: static;
    display: block;
    width: auto;
    height: auto;
    background: none;
    transform: none;
    color: var(--brass);
    opacity: 0.55;
    line-height: 1;
    margin-top: 6px;
  }
  .hero-cta { font-size: 0.74rem; }

  .section-heading { font-size: 1.2rem; line-height: 1.55; }
  .feature-statement { font-size: 1rem; line-height: 1.85; }
  .section-body { font-size: 0.9rem; }
  .section-divider { margin: 24px 0; }

  .trust-item { padding: 24px 22px; }
  .service-card { padding: 36px 22px; }
  .brand-card { padding: 28px 22px; }

  .page-hero { min-height: 28vh; }
  .page-hero-title { font-size: 1.35rem; letter-spacing: 0.1em; }
  .page-hero-sub { font-size: 0.78rem; }

  .rikoku-grid { grid-template-columns: 1fr; }
  .info-table th { width: 90px; }
}


.feature-statement-wide {
  max-width: 100%;
  white-space: nowrap;
  font-size: 1.3rem;
}

@media (max-width: 1024px) {
  .feature-statement-wide {
    white-space: normal;
    font-size: 1.15rem;
  }
}
@media (max-width: 768px) {
  .feature-statement-wide {
    font-size: 1rem;
  }
}


/* ============================================
   MOBILE-FIRST MODERN ENHANCEMENTS (v7)
   トップページの「今っぽい」演出
   ※ .hero のレイアウト(中央寄せ flex)は元定義を尊重し、
     ここでは上書きしない
   ============================================ */

/* ② ヒーロー背景の動き：淡い金グラデーションがゆっくり流れる */
/* 既存の .hero { display:flex; justify-content:center } を壊さないよう、
   ::before の擬似要素のみ追加し、中身(.hero-content)には触れない */
.hero::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: 0;
  background:
    radial-gradient(ellipse 50% 40% at 30% 30%, rgba(158, 140, 108, 0.08), transparent 60%),
    radial-gradient(ellipse 45% 35% at 70% 65%, rgba(184, 168, 138, 0.07), transparent 60%);
  background-size: 200% 200%, 200% 200%;
  animation: heroGradientFlow 18s ease-in-out infinite;
  pointer-events: none;
}
/* .hero-content は元々 z-index:2 なので背景より前面。追加指定不要 */

@keyframes heroGradientFlow {
  0%   { background-position: 0% 0%, 100% 100%; }
  50%  { background-position: 100% 50%, 0% 50%; }
  100% { background-position: 0% 0%, 100% 100%; }
}

/* 案A: スマホ(縦長)ではヒーロー背景の光を対角(左上・右下)に組み直し、わずかに強める */
/* PC用の横構図(左30%・右70%)は縦長画面ではほぼ視界に入らないため */
@media (max-width: 768px) {
  .hero::before {
    background:
      radial-gradient(ellipse 72% 30% at 24% 16%, rgba(158, 140, 108, 0.11), transparent 66%),
      radial-gradient(ellipse 78% 34% at 76% 84%, rgba(184, 168, 138, 0.10), transparent 66%);
    background-size: 200% 200%, 200% 200%;
  }
}

/* ④ タップ反応：カード・ボタンを押した瞬間の質感 */
.service-card,
.brand-card,
.trust-item {
  transition: background 0.3s ease, transform 0.25s var(--ease), box-shadow 0.3s ease;
}
.hero-cta,
.btn-primary,
.btn-outline,
.form-submit {
  transition: color 0.3s ease, background 0.3s ease, transform 0.2s var(--ease), box-shadow 0.3s ease;
}
.hero-cta:active,
.btn-primary:active,
.btn-outline:active,
.form-submit:active {
  transform: scale(0.96);
}

/* ⑨ 追従お問い合わせボタン（スマホのみ） */
.floating-contact {
  display: none;
}
@media (max-width: 768px) {
  .floating-contact {
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    right: 18px;
    bottom: 22px;
    z-index: 900;
    padding: 14px 22px;
    background: var(--deep);
    color: var(--ivory-deep);
    font-family: var(--font-display);
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-decoration: none;
    border: 1px solid var(--brass);
    border-radius: 2px;
    box-shadow: 0 6px 24px rgba(30, 26, 22, 0.28);
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }
  .floating-contact.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .floating-contact.hidden-at-footer {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
  }
  .floating-contact-icon {
    color: var(--brass-light);
    font-size: 0.9rem;
  }
}

/* アクセシビリティ：動きを減らす設定の人には控えめに */
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
  .reveal { transition-duration: 0.4s; }
}

/* ============================================
   WHO WE ARE : 背景全面 + 中央オーバーレイ (v8)
   ============================================ */
.intro-hero-section {
  position: relative;
  overflow: hidden;
  padding: 0;
  /* 下に余白を足し、下端グラデーションが地の色に溶けきってから次の黒セクションへ */
  padding-bottom: 120px;
  background: var(--ivory);
}
/* V1を背景全面に敷く（アニメーションSVGをobjectで埋め込み） */
/* 背景は下の余白ぶんを除いた範囲に留める（余白はアイボリーの余韻に） */
.intro-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 120px;
  z-index: 0;
  overflow: hidden;
}
.intro-hero-bg-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
}
/* PC=通常SVG / スマホ=金箔チップ縮小版SVG を切り替え（既定はPC表示） */
.intro-hero-bg-sp { display: none; }
/* 文字背後の霞：セクション全幅に広げ、左右端も自然に消えるように（縦の境界線を防ぐ） */
.intro-hero-haze {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 74% 82% at 50% 50%,
    rgba(248, 246, 241, 0.96) 0%,
    rgba(248, 246, 241, 0.94) 30%,
    rgba(248, 246, 241, 0.86) 46%,
    rgba(248, 246, 241, 0.68) 60%,
    rgba(248, 246, 241, 0.44) 74%,
    rgba(248, 246, 241, 0.22) 86%,
    rgba(248, 246, 241, 0.08) 94%,
    rgba(248, 246, 241, 0) 100%
  );
}
/* 背景の上端・下端を地の色(アイボリー)に溶け込ませ、セクション境界をぼかす */
.intro-hero-bg::before,
.intro-hero-bg::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 120px;
  pointer-events: none;
  z-index: 1;
}
.intro-hero-bg::before {
  top: 0;
  background: linear-gradient(
    to bottom,
    var(--ivory) 0%,
    rgba(248, 246, 241, 0.6) 45%,
    rgba(248, 246, 241, 0) 100%
  );
}
.intro-hero-bg::after {
  bottom: 0;
  background: linear-gradient(
    to top,
    var(--ivory) 0%,
    rgba(248, 246, 241, 0.6) 45%,
    rgba(248, 246, 241, 0) 100%
  );
}
/* 中央に配置する文章コンテンツ */
.intro-hero-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 140px 40px;
}
/* 中央揃えなので、見出し下の区切り線も中央に */
.intro-hero-content .section-divider {
  margin-left: auto;
  margin-right: auto;
}
/* 本文は読みやすさのため左寄せ気味にしたいが、中央構成なので少し幅を絞る */
.intro-hero-content .section-body {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.intro-hero-content .section-body + .section-body {
  margin-top: 1.2em;
}

/* タブレット・スマホ */
@media (max-width: 768px) {
  .intro-hero-content {
    padding: 88px 24px;
    max-width: 100%;
  }
  /* スマホでは本文を左寄せにして読みやすく（霞は残す） */
  .intro-hero-content .section-body {
    text-align: left;
  }
  /* タブレット幅では霞を横に広げて文字全体をカバー（左右は自然に消える） */
  .intro-hero-haze {
    background: radial-gradient(
      ellipse 72% 72% at 50% 50%,
      rgba(248, 246, 241, 0.93) 0%,
      rgba(248, 246, 241, 0.88) 28%,
      rgba(248, 246, 241, 0.72) 48%,
      rgba(248, 246, 241, 0.48) 66%,
      rgba(248, 246, 241, 0.22) 84%,
      rgba(248, 246, 241, 0) 100%
    );
  }
  /* 背景をスマホでも自然に見せる（objectのSVGがpreserveAspectRatioで自動調整） */
  /* スマホでは金箔チップを縮小したSP用SVGに切り替え、文章が背景に収まるように */
  .intro-hero-bg-pc { display: none; }
  .intro-hero-bg-sp { display: block; }
}
@media (max-width: 480px) {
  .intro-hero-content {
    padding: 72px 20px;
  }
  /* 小さい画面では霞をやや強め・縦長にして文字の可読性を確保（左右も自然に消える） */
  .intro-hero-haze {
    background: radial-gradient(
      ellipse 82% 66% at 50% 50%,
      rgba(248, 246, 241, 0.95) 0%,
      rgba(248, 246, 241, 0.90) 32%,
      rgba(248, 246, 241, 0.72) 54%,
      rgba(248, 246, 241, 0.45) 72%,
      rgba(248, 246, 241, 0.18) 88%,
      rgba(248, 246, 241, 0) 100%
    );
  }
}