/* ============================================================
   JAPANDY / 久米商店株式会社  スタイルシート
   基調色：ホワイト × ダークグレー
   ============================================================ */

/* ---------- カスタムプロパティ（色・余白など） ---------- */
:root {
  --color-bg:        #ffffff;
  --color-bg-gray:   #f4f4f2;   /* セクション背景のグレー */
  --color-dark:      #2b2b2b;   /* ダークグレー（基調） */
  --color-text:      #333333;
  --color-text-sub:  #7a7a7a;
  --color-line:      #e2e2e0;
  --color-accent:    #4a5d4e;   /* 差し色（お茶を思わせる深緑・必要に応じて変更） */
  --color-white:     #ffffff;

  --font-en:      "Jost", sans-serif;             /* 英語：モダンで少し太めの欧文（Jost） */
  --font-jp:      "Noto Serif JP", serif;          /* 日本語：明朝体 */
  --font-jp-sans: "Noto Sans JP", sans-serif;      /* 補助（必要時のみ） */
  --font-base:    "Jost", "Noto Serif JP", serif;  /* 本文：欧文=Jost / 和文=明朝 */

  --header-h: 84px;
  --container: 1160px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  font-weight: 300;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { font-weight: 400; margin: 0; }
button { font-family: inherit; cursor: pointer; }

/* ---------- 言語切替：表示制御 ---------- */
/* HTML内の日本語テキストはデフォルト。英語はJSがdata属性から差し込む */
[data-i18n] { transition: opacity .2s ease; }

/* ---------- 共通レイアウト ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.section { padding: 120px 0; }
.section--gray { background: var(--color-bg-gray); }

.section-label {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .32em;
  color: var(--color-accent);
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 12px;
}
.section-title {
  font-family: var(--font-jp);
  font-size: clamp(24px, 4vw, 34px);
  text-align: center;
  letter-spacing: .08em;
  margin: 0 0 56px;
  color: var(--color-dark);
}
.section-more { text-align: center; margin-top: 56px; }

/* ---------- ボタン ---------- */
.btn {
  display: inline-block;
  font-size: 14px;
  letter-spacing: .15em;
  padding: 16px 40px;
  border: 1px solid transparent;
  transition: all .35s var(--ease);
  white-space: nowrap;
}
.btn--sm { padding: 11px 26px; font-size: 13px; }
.btn--dark {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}
.btn--dark:hover { background: transparent; color: var(--color-dark); }
.btn--light {
  background: rgba(255,255,255,.92);
  color: var(--color-dark);
  border-color: rgba(255,255,255,.92);
}
.btn--light:hover { background: transparent; color: #fff; border-color: #fff; }
.btn--outline {
  background: transparent;
  color: var(--color-dark);
  border-color: var(--color-dark);
}
.btn--outline:hover { background: var(--color-dark); color: #fff; }

/* ============================================================
   ヘッダー
============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: var(--header-h);
  z-index: 1000;
  transition: background .4s ease, box-shadow .4s ease;
}
/* ヒーロー上では背景透明・白文字、スクロール後は白背景・濃文字 */
.site-header { color: #fff; }
.site-header.is-scrolled {
  background: rgba(255,255,255,.96);
  color: var(--color-dark);
  box-shadow: 0 1px 0 var(--color-line);
  height: 68px;
}
.header-inner {
  max-width: var(--container);
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo { display: flex; flex-direction: row; align-items: center; gap: 12px; line-height: 1.2; }
.logo-img { height: 50px; width: auto; display: block; transition: height .4s ease; }
/* ヒーロー上では白ロゴ。白背景（スクロール後）では濃グレーに反転 */
.site-header.is-scrolled .logo-img { filter: invert(0.83); height: 44px; }
.logo-company { font-size: 11px; letter-spacing: .16em; opacity: .85; }

.global-nav { display: flex; align-items: center; gap: 26px; }
.global-nav > ul { display: flex; gap: 22px; }
.global-nav a {
  font-size: 13px;
  letter-spacing: .1em;
  position: relative;
  padding: 6px 0;
}
.global-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width .3s var(--ease);
}
.global-nav a:hover::after { width: 100%; }

.header-right { display: flex; align-items: center; gap: 22px; }

/* 言語切替 */
.lang-switch { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .08em; }
.lang-switch button {
  background: none; border: none; color: inherit;
  font-size: 13px; letter-spacing: .08em; padding: 2px; opacity: .55;
  transition: opacity .25s;
}
.lang-switch button.is-active { opacity: 1; font-weight: 500; }
.lang-switch button:hover { opacity: 1; }
.lang-switch--mobile { display: none; }

/* ハンバーガー */
.hamburger {
  display: none;
  width: 30px; height: 22px;
  background: none; border: none;
  position: relative;
}
.hamburger span {
  position: absolute; left: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  transition: transform .35s var(--ease), opacity .25s ease;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger span:nth-child(3) { bottom: 0; }
.hamburger.is-open span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* ============================================================
   ① ヒーロー
============================================================ */
.hero {
  position: relative;
  height: 84vh;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
}
.hero-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* 動画/画像が未設定でも成立するようダークグレーのグラデを敷く */
  background: linear-gradient(135deg, #3a3a3a, #1f1f1f);
}
.hero-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.35);
}
.hero-content { position: relative; z-index: 2; padding: 0 20px; }
.hero-sub {
  font-family: var(--font-jp);
  font-size: clamp(13px, 2vw, 16px);
  letter-spacing: .3em;
  margin: 0 0 22px;
  opacity: 0;
  animation: fadeUp 1s var(--ease) .3s forwards;
}
.hero-title {
  font-family: var(--font-en);
  font-size: clamp(52px, 11vw, 118px);
  letter-spacing: .16em;
  font-weight: 600;
  line-height: 1;
  margin: 0 0 40px;
  opacity: 0;
  animation: fadeUp 1s var(--ease) .5s forwards;
}
.hero-logo {
  width: clamp(260px, 46vw, 460px);
  height: auto;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 8px 40px rgba(0,0,0,.42));
}
.hero-lead {
  font-size: clamp(13px, 2vw, 15px);
  letter-spacing: .1em;
  margin: 0 0 40px;
  opacity: 0;
  animation: fadeUp 1s var(--ease) .7s forwards;
}
.hero .btn {
  opacity: 0;
  animation: fadeUp 1s var(--ease) .9s forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* スクロール誘導 */
.scroll-down {
  position: absolute; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.scroll-down span {
  display: block; width: 1px; height: 54px;
  background: rgba(255,255,255,.6);
  position: relative; overflow: hidden;
}
.scroll-down span::after {
  content: ""; position: absolute; top: -54px; left: 0;
  width: 100%; height: 100%;
  background: #fff;
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0% { transform: translateY(0); }
  100% { transform: translateY(108px); }
}

/* ============================================================
   ② ブランドメッセージ
============================================================ */
.brand { text-align: center; }
/* 背景に写真を敷いたブランドメッセージ（トップページ②） */
.brand--photo {
  position: relative;
  margin-top: 90px;               /* ヒーローとの間に余白 */
  background-color: #2b2b2b;
  background-image: url("../assets/images/about-hero.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;   /* スクロールでゆっくり見える演出 */
}
.brand--photo::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.52);
}
.brand--photo .container { position: relative; z-index: 1; }
.brand--photo .section-label { color: #fff; opacity: .85; }
.brand--photo .section-title { color: #fff; }
.brand--photo .brand-tagline,
.brand--photo .brand-body p,
.brand--photo .brand-closing { color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.55); }

/* ブランドメッセージ本文 */
.brand-tagline {
  font-family: var(--font-jp);
  font-size: clamp(17px, 2.6vw, 23px);
  letter-spacing: .08em;
  line-height: 1.9;
  margin: 0 auto 36px;
}
.brand-body { max-width: 720px; margin: 0 auto; text-align: center; }
.brand-body p {
  font-size: clamp(14px, 1.9vw, 16px);
  line-height: 2.15;
  letter-spacing: .04em;
  margin: 0 0 1.4em;
}
.brand-body p:last-child { margin-bottom: 0; }
.brand-closing {
  font-family: var(--font-jp);
  font-size: clamp(16px, 2.3vw, 20px);
  letter-spacing: .08em;
  line-height: 1.8;
  margin: 34px auto 42px;
}
.brand-message {
  font-family: var(--font-jp);
  font-size: clamp(15px, 2.2vw, 19px);
  line-height: 2.4;
  letter-spacing: .06em;
  color: var(--color-text);
  margin: 0 auto 48px;
  max-width: 760px;
}

/* ============================================================
   ③ 取扱商品
============================================================ */
/* 商品グループ（1種類＝2グレードを横並び） */
.product-group { max-width: 880px; margin: 0 auto; }
.product-group + .product-group { margin-top: 72px; padding-top: 72px; border-top: 1px solid var(--color-line); }
.product-group__head { text-align: center; margin-bottom: 34px; }
.product-group__title {
  font-family: var(--font-jp);
  font-size: clamp(20px, 3vw, 25px);
  letter-spacing: .1em;
  color: var(--color-dark);
  margin: 0;
}
.product-group__en {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 8px 0 0;
}
.product-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 2グレードを横並び */
  gap: 32px;
}
.product-card { background: var(--color-white); }
.product-card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #e9e9e6;
}
.product-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.product-card:hover .product-card__media img { transform: scale(1.06); }
.product-card__body { padding: 24px 20px 30px; text-align: center; }
.product-card__title {
  font-family: var(--font-jp);
  font-size: 17px;
  letter-spacing: .05em;
  margin: 0 0 12px;
  color: var(--color-dark);
}
.product-card__text {
  font-size: 13px;
  color: var(--color-text-sub);
  line-height: 1.9;
  margin: 0 0 22px;
  min-height: 3em;
}

/* ============================================================
   ④ お知らせ
============================================================ */
.news-list { max-width: 820px; margin: 0 auto; }
.news-item { border-bottom: 1px solid var(--color-line); }
.news-item:first-child { border-top: 1px solid var(--color-line); }
.news-item a {
  display: block;
  padding: 30px 8px;
  transition: background .3s ease, padding .3s ease;
}
.news-item a:hover { background: var(--color-bg-gray); padding-left: 20px; }
.news-item__meta { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.news-item__meta time {
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: .08em;
  color: var(--color-text-sub);
}
.news-cat {
  font-size: 11px;
  letter-spacing: .12em;
  padding: 3px 12px;
  border: 1px solid var(--color-line);
  color: var(--color-text-sub);
}
.news-item__title {
  font-family: var(--font-jp);
  font-size: 17px;
  letter-spacing: .04em;
  color: var(--color-dark);
  margin: 0 0 6px;
}
.news-item__abstract {
  font-size: 13px;
  color: var(--color-text-sub);
  margin: 0;
}

/* ============================================================
   ⑤ ギャラリー（自動横スライド）
============================================================ */
.gallery { padding: 120px 0; overflow: hidden; }
.gallery-slider {
  margin-top: 8px;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.gallery-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: gallerySlide 60s linear infinite;
}
.gallery-slider:hover .gallery-track { animation-play-state: paused; }
.gallery-item {
  margin: 0;
  flex: 0 0 auto;
  height: 360px;               /* 高さを揃え、幅は写真の比率に応じて可変（縦横とも切れない） */
  overflow: hidden;
  background: #e9e9e6;
}
.gallery-item img { height: 100%; width: auto; display: block; }
@keyframes gallerySlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }  /* JSでトラックを2倍に複製するため -50% で無限ループ */
}

/* ============================================================
   フッター
============================================================ */
.site-footer {
  background: var(--color-dark);
  color: rgba(255,255,255,.85);
  padding: 70px 0 0;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 56px;
}
.footer-logo {
  font-family: var(--font-en);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: .26em;
  margin: 0 0 10px;
  color: #fff;
}
.footer-company { font-size: 13px; letter-spacing: .1em; margin: 0 0 6px; }
.footer-address { font-size: 12px; color: rgba(255,255,255,.5); margin: 0; }
.footer-nav ul { display: flex; flex-direction: column; gap: 16px; }
.footer-nav a { font-size: 13px; letter-spacing: .08em; transition: opacity .25s; }
.footer-nav a:hover { opacity: .6; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 22px 24px;
  text-align: center;
}
.footer-bottom small { font-size: 11px; letter-spacing: .12em; color: rgba(255,255,255,.45); }

/* ============================================================
   下層ページ用（共通の見出し帯など）
============================================================ */
.page-hero {
  height: 46vh;
  min-height: 320px;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  position: relative;
  background: linear-gradient(135deg, #3a3a3a, #1f1f1f);
}
.page-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.3); }
.page-hero__inner { position: relative; z-index: 1; }
.page-hero__en {
  font-family: var(--font-en);
  font-size: clamp(34px, 7vw, 60px);
  font-weight: 600;
  letter-spacing: .14em;
  margin: 0 0 8px;
}
.page-hero__ja { font-size: 13px; letter-spacing: .25em; }
.page-body { padding: 90px 0; }
.page-body p { max-width: 760px; margin: 0 auto 1.6em; }

/* ============================================================
   ヘッダーのお問合せボタン（nav-cta）
============================================================ */
.nav-cta a {
  border: 1px solid currentColor;
  padding: 9px 22px !important;
  font-size: 12px;
  letter-spacing: .12em;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.nav-cta a::after { display: none !important; }
.site-header.is-scrolled .nav-cta a:hover,
.page-hero ~ * .nav-cta a:hover { background: var(--color-dark); color: #fff; border-color: var(--color-dark); }

/* フッターのお問合せボタン */
.footer-cta { margin-top: 28px; }

/* ============================================================
   ABOUT JAPANDY ページ
============================================================ */
/* A. キーメッセージ（お茶畑の背景・白文字） */
.about-hero {
  position: relative;
  min-height: 76vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 140px 24px;
  background-color: #2b2b2b;
  /* 元素材の明るさを活かすため、暗くするオーバーレイは最小限に */
  background-image: linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
                    url("../assets/images/about-hero.jpg"); /* 急須と茶葉の写真 */
  background-size: cover;
  background-position: center;
}
.about-hero__inner { max-width: 720px; }
.about-hero__key {
  font-family: var(--font-jp);
  font-size: clamp(26px, 5vw, 44px);
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.7;
  margin: 0 0 30px;
  text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.about-hero__text {
  font-family: var(--font-jp);
  font-size: clamp(14px, 2vw, 16px);
  line-height: 2.4;
  letter-spacing: .06em;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 20px rgba(0,0,0,.7);
}

/* B. 3人の声（写真＋メッセージ） */
.voices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  max-width: 1000px;
  margin: 0 auto;
}
.voice { text-align: center; }
.voice__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #e9e9e6;
  margin: 0 0 22px;
}
.voice__role {
  font-family: var(--font-jp);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--color-accent);
  margin: 0 0 8px;
}
.voice__name {
  font-family: var(--font-jp);
  font-size: 18px;
  letter-spacing: .05em;
  color: var(--color-dark);
  margin: 0 0 16px;
}
.voice__msg {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text);
  text-align: left;
  margin: 0;
}

/* C. インタビュー記事 */
.interview-article { max-width: 760px; margin: 0 auto; }
.interview-article > h3 {
  font-family: var(--font-jp);
  font-size: clamp(19px, 3vw, 24px);
  letter-spacing: .06em;
  line-height: 1.7;
  color: var(--color-dark);
  margin: 56px 0 22px;
}
.interview-article > p {
  font-size: 15px;
  line-height: 2.2;
  letter-spacing: .04em;
  margin: 0 0 1.6em;
  max-width: none;
}
.interview-figure { margin: 40px 0; }
.interview-figure img { width: 100%; height: auto; display: block; background: #e9e9e6; }
.interview-figure figcaption {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--color-text-sub);
  margin-top: 12px;
  text-align: center;
}
.interview-quote {
  font-family: var(--font-jp);
  font-size: clamp(18px, 3vw, 24px);
  line-height: 1.9;
  letter-spacing: .06em;
  color: var(--color-dark);
  text-align: center;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: 44px 0;
  margin: 52px 0;
}

/* D. お問合せCTAバンド */
.cta-band { text-align: center; padding: 96px 24px; }
.cta-band__text {
  font-family: var(--font-jp);
  font-size: clamp(16px, 2.4vw, 20px);
  letter-spacing: .08em;
  color: var(--color-dark);
  margin: 0 0 34px;
}
.cta-band--dark { background: var(--color-dark); }
.cta-band--dark .cta-band__text { color: #fff; }

/* ============================================================
   会社概要（COMPANY）ページ
============================================================ */
/* A. ヒーロー（ジャパンディ調イメージ画像） */
.page-hero--company {
  height: 60vh;
  min-height: 380px;
  background-image: url("../assets/images/company-hero.svg");
  background-size: cover;
  background-position: center;
}
.page-hero--company::before { background: rgba(0,0,0,.22); }

/* B. 会社情報（定義リスト） */
.profile { max-width: 860px; margin: 0 auto; }
.profile__row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  border-bottom: 1px solid var(--color-line);
}
.profile__row:first-child { border-top: 1px solid var(--color-line); }
.profile__key {
  font-family: var(--font-jp);
  font-size: 15px;
  letter-spacing: .08em;
  color: var(--color-dark);
  padding: 26px 20px 26px 4px;
}
.profile__val {
  font-size: 15px;
  line-height: 2;
  color: var(--color-text);
  padding: 26px 4px 26px 20px;
}
.profile__val .val-lead { color: var(--color-dark); font-size: 16px; letter-spacing: .04em; }
.profile__val small { display: block; font-size: 13px; color: var(--color-text-sub); }

/* 事業内容など、内容が長い行はラベルを上、本文を全幅で表示（右寄り解消） */
.profile__row--block { grid-template-columns: 1fr; }
.profile__row--block .profile__key { padding: 26px 4px 6px; }
.profile__row--block .profile__val { padding: 6px 4px 30px; }
.profile__row--block .biz-list { max-width: 760px; }

/* 事業内容：番号付きリスト＋補足 */
.biz-list { counter-reset: biz; }
.biz-list__item { position: relative; padding-left: 34px; margin-bottom: 22px; }
.biz-list__item:last-child { margin-bottom: 0; }
.biz-list__item::before {
  counter-increment: biz;
  content: counter(biz);
  position: absolute;
  left: 0; top: 2px;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en);
  font-size: 12px;
  color: #fff;
  background: var(--color-accent);
  border-radius: 50%;
}
.biz-list__head { color: var(--color-dark); font-size: 15px; letter-spacing: .03em; }
.biz-detail {
  margin: 12px 0 0;
  padding: 16px 18px;
  background: var(--color-bg-gray);
  font-size: 13px;
  line-height: 1.95;
  color: var(--color-text-sub);
}
.biz-detail dt { color: var(--color-dark); font-size: 13px; letter-spacing: .04em; margin-top: 10px; }
.biz-detail dt:first-child { margin-top: 0; }
.biz-detail dd { margin: 2px 0 0; }

/* C. ビジョン・ミッション（イメージ帯・白文字） */
.vision {
  position: relative;
  text-align: center;
  padding: 130px 24px;
  background-color: #2b2b2b;
  background-image: url("../assets/images/company-hero.svg");
  background-size: cover;
  background-position: center 38%;
}
.vision::before { content: ""; position: absolute; inset: 0; background: rgba(43,43,43,.62); }
.vision__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.vision .section-label { color: #fff; opacity: .85; }
.vision__statement {
  font-family: var(--font-jp);
  font-size: clamp(21px, 3.4vw, 32px);
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 2;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}

/* D. お問い合わせ（会社ページ用の連絡先） */
.contact-info {
  max-width: 620px;
  margin: 0 auto;
  display: grid;
  gap: 0;
}
.contact-info__row {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 24px 4px;
  border-bottom: 1px solid var(--color-line);
}
.contact-info__row:first-child { border-top: 1px solid var(--color-line); }
.contact-info__label {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-accent);
  min-width: 88px;
}
.contact-info__value {
  font-family: var(--font-jp);
  font-size: clamp(17px, 2.6vw, 21px);
  letter-spacing: .04em;
  color: var(--color-dark);
}
.contact-info__value a { transition: opacity .25s; }
.contact-info__value a:hover { opacity: .6; }

@media (max-width: 640px) {
  .profile__row { grid-template-columns: 1fr; gap: 0; }
  .profile__key { padding: 20px 4px 4px; }
  .profile__val { padding: 4px 4px 22px; }
  .contact-info__row { flex-direction: column; gap: 6px; }
}

/* ============================================================
   ABOUT JAPANDY ページ（ナラティブ）
============================================================ */
.aj-body { max-width: 720px; margin: 0 auto; text-align: center; }
.aj-body p {
  font-size: clamp(14px, 1.9vw, 16px);
  line-height: 2.2;
  letter-spacing: .04em;
  color: var(--color-text);
  margin: 0 0 1.5em;
}
.aj-body p:last-child { margin-bottom: 0; }
.aj-body strong { font-weight: 500; color: var(--color-dark); }
.aj-body .aj-emphasis {
  font-family: var(--font-jp);
  font-size: clamp(17px, 2.6vw, 21px);
  line-height: 1.9;
  letter-spacing: .06em;
  color: var(--color-dark);
  margin: 1.4em 0 0;
}

/* 3つの共通する価値観 */
.aj-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 760px;
  margin: 48px auto;
}
.aj-value {
  text-align: center;
  padding: 34px 18px;
  border: 1px solid var(--color-line);
  background: var(--color-white);
}
.aj-value__no {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--color-accent);
  margin: 0 0 14px;
}
.aj-value__text {
  font-family: var(--font-jp);
  font-size: 15px;
  letter-spacing: .05em;
  line-height: 1.6;
  color: var(--color-dark);
  margin: 0;
}

/* 中央寄せの図版 */
.aj-figure { max-width: 860px; margin: 56px auto 0; }
.aj-figure img { width: 100%; height: auto; display: block; background: #e9e9e6; }
.aj-figure figcaption {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--color-text-sub);
  margin-top: 12px;
  text-align: center;
}

/* インタビュー導入の見出し */
.aj-interview-head { text-align: center; margin-bottom: 32px; }
.aj-interview-head .section-label { margin-bottom: 14px; }
.aj-interview-lead { margin-bottom: 56px; }
.aj-interview-head__title {
  font-family: var(--font-jp);
  font-size: clamp(19px, 3vw, 26px);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.6;
  color: var(--color-dark);
  margin: 0;
}

@media (max-width: 600px) {
  .aj-values { grid-template-columns: 1fr; gap: 12px; }
  .aj-value { padding: 24px 18px; }
}

/* ============================================================
   お知らせ 記事ページ
============================================================ */
.news-article { max-width: 760px; margin: 0 auto; }
.news-article__head {
  text-align: center;
  padding-bottom: 40px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--color-line);
}
.news-article__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}
.news-article__meta time {
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: .08em;
  color: var(--color-text-sub);
}
.news-article__title {
  font-family: var(--font-jp);
  font-size: clamp(22px, 3.6vw, 32px);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.6;
  color: var(--color-dark);
}
.news-article__body p {
  font-size: 15px;
  line-height: 2.2;
  letter-spacing: .04em;
  color: var(--color-text);
  margin: 0 0 1.6em;
}
.news-article__body p.is-lead {
  font-family: var(--font-jp);
  font-size: clamp(16px, 2.2vw, 18px);
  line-height: 2;
  color: var(--color-dark);
}
.news-article__body p.is-emphasis {
  font-family: var(--font-jp);
  font-size: clamp(17px, 2.6vw, 21px);
  line-height: 1.9;
  letter-spacing: .06em;
  color: var(--color-dark);
  text-align: center;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: 36px 0;
  margin: 44px 0;
}

/* 4つの軸（SIMPLE / NATURAL / …） */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 36px 0 44px;
}
.pillar {
  text-align: center;
  padding: 30px 12px;
  background: var(--color-bg-gray);
}
.pillar__en {
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--color-accent);
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-line);
}
.pillar__ja {
  font-family: var(--font-jp);
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--color-dark);
  margin: 0;
}

.news-article__back { text-align: center; margin-top: 60px; }

@media (max-width: 560px) {
  .pillars { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   OEM商品開発のご相談 ページ
============================================================ */
.page-hero--oem {
  background-image: url("../assets/images/about-hero.jpg");
  background-size: cover;
  background-position: center;
}

/* イントロのリード文 */
.oem-lead {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(15px, 2vw, 17px);
  line-height: 2.2;
  letter-spacing: .04em;
  color: var(--color-text);
}
.oem-lead strong {
  display: block;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(18px, 2.6vw, 22px);
  letter-spacing: .06em;
  color: var(--color-dark);
  margin-bottom: 24px;
}

/* サービス（2ブロック） */
.oem-services { max-width: 900px; margin: 0 auto; }
.oem-service { padding: 44px 0; }
.oem-service + .oem-service { border-top: 1px solid var(--color-line); }
.oem-service__label {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 10px;
}
.oem-service__title {
  font-family: var(--font-jp);
  font-size: clamp(19px, 3vw, 25px);
  letter-spacing: .06em;
  line-height: 1.6;
  color: var(--color-dark);
  margin: 0 0 20px;
}
.oem-service__text {
  font-size: 15px;
  line-height: 2.15;
  letter-spacing: .03em;
  color: var(--color-text);
  margin: 0 0 1.2em;
}
.oem-service__text:last-child { margin-bottom: 0; }

/* チェックリスト（こんなご相談に対応しています） */
.oem-check-block { max-width: 860px; margin: 0 auto; }
.oem-check-intro { text-align: center; font-size: 15px; line-height: 2.1; color: var(--color-text); margin: 0 0 40px; }
.oem-check {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 40px;
  margin: 0 0 44px;
}
.oem-check li {
  position: relative;
  padding-left: 40px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-dark);
  min-height: 26px;
  display: flex;
  align-items: center;
}
.oem-check li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='%234a5d4e'/><path fill='white' d='M9.2 16.2 5 12l-1.4 1.4 5.6 5.6L21 7.6 19.6 6.2z'/></svg>");
}
.oem-check-closing {
  text-align: center;
  font-family: var(--font-jp);
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 2;
  letter-spacing: .05em;
  color: var(--color-dark);
  margin: 0;
}

/* 事例紹介 */
.oem-case {
  max-width: 940px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.oem-case__media { background: #e9e9e6; }
.oem-case__media img { width: 100%; height: auto; display: block; }
.oem-case__cat {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 12px;
}
.oem-case__title {
  font-family: var(--font-jp);
  font-size: clamp(20px, 3vw, 26px);
  letter-spacing: .05em;
  line-height: 1.5;
  color: var(--color-dark);
  margin: 0 0 6px;
}
.oem-case__client { font-size: 14px; color: var(--color-text-sub); letter-spacing: .06em; margin: 0 0 24px; }
.oem-case__text { font-size: 15px; line-height: 2.15; letter-spacing: .03em; color: var(--color-text); margin: 0 0 1.2em; }
.oem-case__text:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
  .oem-check { grid-template-columns: 1fr; gap: 14px; }
  .oem-case { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   お問合せフォーム
============================================================ */
.contact-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
  font-size: 15px;
  line-height: 2.1;
  color: var(--color-text);
}
.form { max-width: 640px; margin: 0 auto; }
.form__row { margin-bottom: 26px; }
.form__label {
  display: block;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--color-dark);
  margin-bottom: 10px;
}
.form__label .req {
  font-size: 11px;
  color: #b23b3b;
  margin-left: 8px;
  letter-spacing: .05em;
}
.form__control {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 0;
  padding: 14px 16px;
  transition: border-color .25s ease;
  -webkit-appearance: none;
          appearance: none;
}
.form__control::placeholder { color: #b8b8b6; }
.form__control:focus { outline: none; border-color: var(--color-dark); }
textarea.form__control { min-height: 170px; resize: vertical; line-height: 1.9; }
/* セレクトボックスの矢印 */
.form__select-wrap { position: relative; }
.form__select-wrap::after {
  content: "";
  position: absolute;
  top: 50%; right: 18px;
  width: 8px; height: 8px;
  border-right: 1px solid var(--color-dark);
  border-bottom: 1px solid var(--color-dark);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.form__submit { text-align: center; margin-top: 40px; }
.form__submit .btn { min-width: 260px; padding: 18px 40px; }
.form__note {
  text-align: center;
  font-size: 12px;
  color: var(--color-text-sub);
  margin-top: 22px;
  line-height: 1.9;
}

/* 送信完了メッセージ */
.form-thanks { display: none; text-align: center; padding: 30px 0 10px; }
.form-thanks.is-visible { display: block; animation: fadeUp .8s var(--ease) forwards; }
.form-thanks__title {
  font-family: var(--font-jp);
  font-size: clamp(20px, 3vw, 27px);
  letter-spacing: .06em;
  color: var(--color-dark);
  margin: 0 0 22px;
}
.form-thanks__text {
  font-size: 15px;
  line-height: 2.1;
  color: var(--color-text);
  margin: 0 0 36px;
}

/* ============================================================
   レスポンシブ
============================================================ */
@media (max-width: 960px) {
  .product-pair { gap: 24px; }
  .section { padding: 90px 0; }
}

@media (max-width: 1024px) {
  :root { --header-h: 64px; }
  .site-header { height: var(--header-h); background: rgba(255,255,255,.96); color: var(--color-dark); box-shadow: 0 1px 0 var(--color-line); }
  .site-header.is-scrolled { height: var(--header-h); }

  /* ハンバーガー表示、ナビをドロワー化 */
  .hamburger { display: block; }
  .lang-switch--desktop { display: none; }
  .lang-switch--mobile { display: flex; margin-top: 34px; }

  .global-nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    width: min(78vw, 320px);
    height: calc(100vh - var(--header-h));
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 40px 32px;
    transform: translateX(100%);
    transition: transform .4s var(--ease);
    box-shadow: -8px 0 30px rgba(0,0,0,.08);
    overflow-y: auto;
  }
  .global-nav.is-open { transform: translateX(0); }
  .global-nav > ul { flex-direction: column; gap: 0; width: 100%; }
  .global-nav > ul li { width: 100%; border-bottom: 1px solid var(--color-line); }
  .global-nav a { display: block; padding: 18px 0; font-size: 15px; color: var(--color-dark); }
  .global-nav a::after { display: none; }

  .hero { height: 78vh; }
  .brand--photo { background-attachment: scroll; margin-top: 54px; }  /* モバイルはfixed非対応が多い */
  /* モバイルはヘッダーが常に白背景 → ロゴは常に濃グレー表示 */
  .logo-img,
  .site-header.is-scrolled .logo-img { height: 40px; filter: invert(0.83); }
  .logo-company { font-size: 10px; }
  .footer-inner { flex-direction: column; gap: 32px; }

  /* お問合せボタンをドロワー内で強調表示 */
  .nav-cta { border-bottom: none !important; margin-top: 24px; }
  .nav-cta a {
    display: block;
    text-align: center;
    background: var(--color-dark);
    color: #fff !important;
    border-color: var(--color-dark);
    padding: 15px !important;
    font-size: 13px;
  }

  /* 3人の声：タブレットでも横並び維持（余白のみ調整） */
  .voices-grid { gap: 22px; }
  .voice__msg { font-size: 13px; line-height: 1.9; }
}

@media (max-width: 480px) {
  .container { padding: 0 20px; }
  /* スマホでも2グレードは横並びのまま。余白と文字を詰めて対応 */
  .product-pair { gap: 12px; }
  .product-card__body { padding: 16px 10px 22px; }
  .product-card__title { font-size: 15px; }
  .product-card__text { font-size: 12px; min-height: 0; margin-bottom: 16px; }
  .btn--sm { padding: 9px 16px; font-size: 12px; }
  /* 3人の声：スマホでも横並び3列を維持 */
  .voices-grid { gap: 12px; }
  .voice__photo { margin-bottom: 14px; }
  .voice__role { font-size: 10px; letter-spacing: .12em; }
  .voice__name { font-size: 14px; margin-bottom: 10px; }
  .voice__msg { font-size: 12px; line-height: 1.8; }
  .gallery-item { height: 240px; }
  .section { padding: 70px 0; }
  .brand-message { line-height: 2.1; }
}

/* アクセシビリティ：モーション低減設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  .gallery-track { animation: none; }
  .scroll-down span::after { animation: none; }
  html { scroll-behavior: auto; }
  [class*="fade"], .hero-title, .hero-sub, .hero-lead, .hero .btn { animation: none !important; opacity: 1 !important; }
}