/* ==========================================================================
   三和通商 コーポレートサイト  style.css
   Figma: 三和通商｜サイトワイヤー・ロゴ案 (Brand System)
   PC基準幅 1440px / コンテンツ幅 1240px / SP基準幅 750px(=375px実寸)
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --color-navy: #153a5b;        /* フォント / TRUST NAVY */
  --color-navy-2: #173b55;      /* 見出し */
  --color-navy-3: #163a58;
  --color-green-1: #2e8b59;     /* 緑１ */
  --color-green-2: #72ab4d;     /* 緑２ */
  --color-teal: #4f8c83;        /* CARE TEAL */
  --color-footer: #477866;
  --color-text: #263238;
  --color-text-sub: #40515b;
  --color-ivory: #f7f8f5;
  --color-bg-cream: #fcfcf8;
  --color-bg-beige: #f6f2ea;
  --color-bg-mint: #f3f8f7;
  --color-bg-product: #f9f9f3;
  --color-border-cream: #dcdcc7;
  --color-gold: #cab07c;

  --font-mincho: 'Hina Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --font-sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --font-inter: 'Inter', 'Noto Sans JP', sans-serif;
  --font-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;

  --w-content: 1240px;
  --w-base: 1440px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: #fff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, li, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
time { display: inline-block; }

/* ---------- Common: utility ---------- */
.sp-only, .sp-block { display: none; }
.is-fixed { overflow: hidden; }
@media (max-width: 767px) { .sp-only { display: inline; } .sp-block { display: block; } .pc-only, .pc-only-block { display: none; } }

/* ---------- Common: arrow (Figma "Polygon" 三角形: 上向き三角を-30°回転) ---------- */
.arrow {
  display: inline-block;
  width: 12.33px;
  height: 12.33px;
  flex: 0 0 auto;
  position: relative;
}
.arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 9px;
  height: 9px;
  background: currentColor;
  clip-path: polygon(50% 0, 93.3% 75%, 6.7% 75%);
  transform: rotate(-30deg);
}
.arrow--down::before { transform: rotate(180deg); }
.arrow--white { color: #fff; }
.arrow--green { color: var(--color-green-1); }
.arrow--s { width: 10.93px; height: 10.93px; }
.arrow--s::before { width: 8px; height: 8px; }
.arrow--m { width: 13.66px; height: 13.66px; }
.arrow--m::before { width: 10px; height: 10px; }

/* ---------- Common: buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 32px;
  border-radius: 100px;
  font-family: var(--font-inter);
  font-size: 18px;
  line-height: 22px;
  white-space: nowrap;
  box-shadow: inset 0 0 0 .5px var(--btn-stroke, transparent);   /* Figma 0.5px stroke inside → 高さ39 */
  transition: opacity .25s ease;
}
/* ホバーで色反転 (塗り ⇄ 白地緑文字)。矢印は currentColor なので色は自動で追従 */
.btn { transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
.btn--fill:hover { background: #fff; --btn-stroke: var(--color-green-1); color: var(--color-green-1); }
.btn--outline:hover { background: var(--color-green-1); --btn-stroke: #fff; color: #fff; }
.btn .arrow--white, .btn .arrow--green { color: currentColor; }
.btn--fill {
  background: var(--color-green-1);
  --btn-stroke: #fff;
  color: #fff;
}
.btn--outline {
  background: #fff;
  --btn-stroke: var(--color-green-1);
  color: var(--color-green-1);
}

/* 詳細を見る (テキストリンク + 下線) */
.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 113px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-green-1);
  font-family: var(--font-inter);
  font-size: 18px;
  line-height: 22px;
  color: var(--color-green-1);
  white-space: nowrap;
}
.text-link .arrow { width: 13.2px; height: 13.2px; }
.text-link .arrow::before { width: 9.66px; height: 9.66px; }

/* ---------- Common: section heading ---------- */
.section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: center;
}
.section-heading__en {
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  color: var(--color-green-1);
  white-space: nowrap;
}
.section-heading__en--social {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 1.44px;
  color: var(--color-footer);
}
.section-heading__ja {
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: 44px;
  line-height: 64px;
  color: var(--color-navy-2);
}
.section-heading__lead {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-sub);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;   /* スクロールしても上部に固定 (レイアウト上の高さはそのまま) */
  top: 0;
  z-index: 100;
  background: #fff;
  transition: box-shadow .3s ease;
}
.site-header.is-scrolled { box-shadow: 0 2px 16px rgba(20,59,92,.08); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  padding: 0 80px;
  max-width: var(--w-base);
  margin: 0 auto;
}
.site-header__logo img { width: 202px; height: 70px; }
.site-header__controls { display: flex; align-items: center; gap: 40px; }

.global-nav__list { display: flex; align-items: center; gap: 10px; }
.global-nav__item a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 10px;
  font-family: var(--font-mincho);
  font-size: 16px;
  line-height: 23px;
  color: var(--color-navy);
  white-space: nowrap;
  position: relative;
}
.global-nav__item a::after {
  content: "";
  display: block;
  width: 100%;   /* 文字幅いっぱい (Figma: 4文字=64px) */
  height: 0.5px;
  margin-top: 4px;
  background: var(--color-green-2);
  opacity: 0;
  transition: opacity .2s;
}
.global-nav__item.is-current a { color: var(--color-green-1); }
.global-nav__item.is-current a::after,
.global-nav__item a:hover::after { opacity: 1; }
/* 下線分の高さ変化を防ぐ: 非カレント時も高さを確保 */
.global-nav__item a { padding-bottom: 8px; }

.site-header__actions { display: flex; align-items: center; gap: 16px; }
.btn-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border: 1px solid var(--color-green-2);
  border-radius: 100px;
  background: #fff;
  font-size: 16px;
  line-height: 23px;
  color: var(--color-green-2);
  white-space: nowrap;
}
.btn-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 100px;
  background: var(--color-green-1);
  font-family: var(--font-mincho);
  font-size: 16px;
  line-height: 23px;
  color: #fff;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--color-green-1);
  transition: background .25s, color .25s;
}
.btn-contact:hover { background: #fff; color: var(--color-green-1); }
.btn-contact .arrow { color: currentColor; }
.btn-contact__icon { display: block; width: 20px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220.000%22 height=%2216.000%22 viewBox=%220 0 20.000 16.000%22 fill=%22none%22%3E %3Cpath transform=%22translate%280.000,0.000%29%22 d=%22M19.2857 0L0.714286 0C0.524845 0 0.343164 0.0766233 0.209209 0.213013C0.0752549 0.349404 6.34413e-16 0.534388 0 0.727273L0 15.2727C3.17207e-16 15.4656 0.0752549 15.6506 0.209209 15.787C0.343164 15.9234 0.524845 16 0.714286 16L19.2857 16C19.4752 16 19.6568 15.9234 19.7908 15.787C19.9247 15.6506 20 15.4656 20 15.2727L20 0.727273C20 0.534388 19.9247 0.349404 19.7908 0.213013C19.6568 0.0766233 19.4752 0 19.2857 0ZM10.4384 9.30136C10.313 9.40059 10.1588 9.45445 10 9.45445C9.84122 9.45445 9.68696 9.40059 9.56161 9.30136L2.5692 3.76409L3.44598 2.61591L10 7.80591L16.554 2.61591L17.4308 3.76409L10.4384 9.30136Z%22 fill=%22%23ffffff%22 fill-rule=%22nonzero%22/%3E %3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220.000%22 height=%2216.000%22 viewBox=%220 0 20.000 16.000%22 fill=%22none%22%3E %3Cpath transform=%22translate%280.000,0.000%29%22 d=%22M19.2857 0L0.714286 0C0.524845 0 0.343164 0.0766233 0.209209 0.213013C0.0752549 0.349404 6.34413e-16 0.534388 0 0.727273L0 15.2727C3.17207e-16 15.4656 0.0752549 15.6506 0.209209 15.787C0.343164 15.9234 0.524845 16 0.714286 16L19.2857 16C19.4752 16 19.6568 15.9234 19.7908 15.787C19.9247 15.6506 20 15.4656 20 15.2727L20 0.727273C20 0.534388 19.9247 0.349404 19.7908 0.213013C19.6568 0.0766233 19.4752 0 19.2857 0ZM10.4384 9.30136C10.313 9.40059 10.1588 9.45445 10 9.45445C9.84122 9.45445 9.68696 9.40059 9.56161 9.30136L2.5692 3.76409L3.44598 2.61591L10 7.80591L16.554 2.61591L17.4308 3.76409L10.4384 9.30136Z%22 fill=%22%23ffffff%22 fill-rule=%22nonzero%22/%3E %3C/svg%3E") center / contain no-repeat; }   /* 文字色に追従 (ホバー反転用) */

.hamburger { display: none; }
.sp-nav { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  height: 824px;
  background: var(--color-bg-cream);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 120px;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .8;
  pointer-events: none;
}
.hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: 750px;
  text-align: center;
  color: var(--color-navy);
}
.hero__title {
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: 72px;
  line-height: 1.25;
}
.hero__lead {
  width: 650px;
  font-size: 18px;
  line-height: 1.9;
  letter-spacing: 0.9px;
}
/* 商品画像: 横に流れるマーキー (配置の初期値は Figma の座標と一致) */
.hero__products {
  --s: 1;                 /* 画像の倍率 (SPで .63) */
  --row-h: 327px;         /* 段の高さ = 一番大きい画像 */
  position: absolute;
  top: 462px;             /* Figma: 一番上の商品(GHSQ6616)の y */
  left: 0;
  right: 0;
  height: var(--row-h);
  overflow: hidden;
  pointer-events: none;
}
.hero__marquee {
  position: absolute;
  top: 0;
  left: calc(50% - 720px - 24px);   /* t=0 で Figma と同じ位置 (1枚目 x=-24) */
  display: flex;
  align-items: flex-start;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  /* 速度: 40px/秒 (--speed で調整)。--shift = 1セット分の幅(JSが計算) */
  --speed: 40;
  animation: hero-marquee calc(var(--shift, 1487) * var(--s) / var(--speed) * 1s) linear infinite;
}
.hero__marquee--reverse { animation-direction: reverse; }
.hero__marquee--top, .hero__marquee--bottom { display: none; }   /* SP用の2段 (JSが生成) */
.hero__item {
  flex: none;
  width: calc(var(--w) * var(--s) * 1px);
  height: calc(var(--h) * var(--s) * 1px);
  margin-top: calc((var(--dy) - var(--dy0, 0)) * var(--s) * 1px);
  margin-left: calc(var(--ml) * var(--s) * 1px);
}
.hero__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Figma DROP_SHADOW 10/10/blur10 — 透過PNGの形に沿わせるため filter で描く */
  filter: drop-shadow(calc(10px * var(--s)) calc(10px * var(--s)) calc(5px * var(--s)) rgba(0,0,0,.1));
}
.hero__item[data-noshadow] img { filter: none; }
@keyframes hero-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--shift, 1487) * var(--s) * -1px), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__marquee { animation: none; }
}

/* ==========================================================================
   Category
   ========================================================================== */
.category { background: #fff; }
.category__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  width: var(--w-content);
  margin: 0 auto;
  padding: 120px 0;
}
.category__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 24px;
  width: 100%;
  height: 245px;
}
.category-card { justify-self: start; }
.category-card a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.category-card__circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
  border-radius: 90px;
  background: var(--color-bg-cream);
  border: 1px solid var(--color-border-cream);
  overflow: hidden;
  transition: transform .3s ease;
}
.category-card__circle img,
.category-card__overlay {
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);   /* ホバーで商品画像がふわっと拡大 */
  will-change: transform;
}
@media (hover: hover) {   /* タッチ端末ではホバーを無効化 */
  .category-card a:hover .category-card__circle img,
  .category-card a:hover .category-card__overlay { transform: scale(1.12); }
  .category-card a:hover .category-card__overlay img { transform: none; }
  .category-card a:hover .category-card__name { color: var(--color-green-1); }
}
.category-card__name { transition: color .3s ease; }
.category-card__circle img { width: 130px; height: 145px; object-fit: contain; }
.category-card__circle img.is-body { width: 108px; height: 120px; }
.category-card__circle img.is-full { width: 180px; height: 180px; }
.category-card__circle--health { }   /* 画像の背景円を透過化したので通常の枠+背景を使う */
.category-card__overlay {
  position: absolute;
  left: 43.33px;
  top: -13px;
  width: 92px;
  height: 174.58px;
  overflow: hidden;
}
.category-card__overlay img {
  position: absolute;
  top: 0;
  left: -58.27%;
  width: 213.39%;
  height: 112.45%;
  max-width: none;
}
.category-card__name {
  font-family: var(--font-mincho);
  font-size: 18px;
  line-height: 26px;
  color: var(--color-navy-2);
  text-align: center;
}

/* ==========================================================================
   New Products
   ========================================================================== */
.new-products {
  position: relative;
  min-height: 793px;
  overflow: hidden;
}
.new-products__bg { position: absolute; inset: 0; pointer-events: none; }
.new-products__bg-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 701.67px;
  object-fit: fill;
  opacity: .8;
  transform: rotate(180deg);
}
.new-products__bg-bottom {
  position: absolute;
  top: 702px;
  left: 0;
  width: 100%;
  height: 91px;
  object-fit: fill;
  opacity: .8;
  transform: rotate(180deg) scaleY(-1);
}
.new-products__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
  width: var(--w-content);
  margin: 0 auto;
  padding: 112px 0;
}
.product-list {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.product-card a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 292px;
  height: 361px;
  padding: 12px 0;
  background: #fff;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.07));
  transition: transform .3s ease;
}
.product-card a:hover { transform: translateY(-4px); }
.product-card__thumb {
  position: relative;
  display: block;
  width: 259px;
  height: 165px;
  background: var(--color-bg-product);
}
.product-card__thumb img {
  position: absolute;
  left: 67px;
  top: 7px;
  width: 125px;
  height: 152px;
  object-fit: contain;
}
.product-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 20px 12px;
}
.product-card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 16px;
  border-radius: 50px;
  background: var(--color-green-2);
  font-family: var(--font-inter);
  font-size: 16px;
  line-height: 19px;
  color: #fff;
  white-space: nowrap;
}
.product-card__name {
  font-family: var(--font-mincho);
  font-size: 20px;
  line-height: 29px;
  letter-spacing: 1px;
  color: var(--color-navy);
  white-space: nowrap;
}
.product-card__desc {
  font-family: var(--font-inter);
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: .8px;
  color: var(--color-navy);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;   /* WP: 長いキャッチコピーは省略 */
}

/* ==========================================================================
   Brands
   ========================================================================== */
.brands { background: #fff; }
.brands__inner {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: var(--w-content);
  margin: 0 auto;
  padding: 112px 0;
}
.brand-list {
  display: flex;
  flex-direction: column;
  gap: 56px;
  width: 100%;
}
.brand-feature {
  display: flex;
  align-items: center;
  height: 470px;
  width: 100%;
  overflow: hidden;
}
.brand-feature__image { flex: 0 0 560px; width: 560px; height: 470px; }
.brand-feature__image img { width: 100%; height: 100%; object-fit: cover; }
.brand-feature__story {
  position: relative;
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  height: 420px;
  padding: 64px;
  overflow: hidden;
}
.brand-feature__story--beige { background: var(--color-bg-beige); }
.brand-feature__story--mint { background: var(--color-bg-mint); }
.brand-feature__title {
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.5;
  color: var(--color-navy-3);
  width: 100%;
}
.brand-feature__logo { height: 63px; width: auto; object-fit: cover; }
.brand-feature__text {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .8px;
  color: var(--color-text-sub);
  width: 100%;
}
.brand-feature__watermark {
  position: absolute;
  left: 340px;
  top: 339px;
  font-family: var(--font-mincho);
  font-size: 56px;
  line-height: 81px;
  white-space: nowrap;
  pointer-events: none;
}
.brand-feature__watermark--beige { color: #cec3af; }
.brand-feature__watermark--mint { color: #a4c0b6; left: 358px; }
.brand-feature__watermark--oral2 { left: 329px; }

/* ==========================================================================
   News
   ========================================================================== */
.news { background: var(--color-bg-mint); }
.news__inner {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 80px;
  padding: 100px 0;
}
.news__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  white-space: nowrap;
}
.news__heading-en {
  font-size: 12px;
  line-height: 17px;
  color: var(--color-footer);
}
.news__heading-ja {
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: 44px;
  line-height: 64px;
  color: var(--color-navy-3);
}
.news__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
.news-list { width: 918px; }
.news-item { border-bottom: 1px solid var(--color-border-cream); }
.news-item a {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 32px 0 31px;
  width: 100%;
  transition: opacity .25s;
}
.news-item a:hover { opacity: .75; }
.news-item__thumb {
  flex: 0 0 240px;
  width: 240px;
  height: 160px;
  border-radius: 0;
  overflow: hidden;
}
.news-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-item__content {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.news-item__meta { display: flex; align-items: center; gap: 24px; }
.news-item__meta time {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-sub);
  opacity: .8;
  white-space: nowrap;
}
.news-item__cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 16px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 12px;
  line-height: 17px;
  color: #fff;
  white-space: nowrap;
  background: var(--color-green-1);
}
.news-item__cat--press { background: var(--color-green-2); }
.news-item__cat--media { background: #a0522d; }
.news-item__cat--company { background: var(--color-navy); }
.news-item__title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: .36px;
  color: var(--color-navy);
}

/* ==========================================================================
   Instagram
   ========================================================================== */
.instagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 96px 80px;
  background: rgba(255,253,248,.9);
}
.instagram .section-heading__ja { color: var(--color-navy-3); }
.instagram__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
.instagram__grid {
  display: grid;
  grid-template-columns: repeat(3, 210px);
  column-gap: 26px;
  row-gap: 29px;
  width: 682px;
}
.instagram__grid li {
  width: 210px;
  height: 210px;
  background: #d9d9d9;
  overflow: hidden;
}
.instagram__grid li img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   CTA (その他事業 / 採用)
   ========================================================================== */
.cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 35px;
  padding: 100px 0 200px;
}
.cta-card {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 520px;
  padding: 12px 24px;
  border-radius: 0;
  transition: opacity .25s;
}
.cta-card:hover { opacity: .85; }
.cta-card--beige { background: var(--color-bg-beige); }
.cta-card--mint { background: var(--color-bg-mint); }
.cta-card__image { flex: 0 0 215px; width: 215px; height: 185px; }
.cta-card__image img { width: 100%; height: 100%; object-fit: cover; }
.cta-card__body {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 40px;
  height: 167px;
}
.cta-card__title {
  align-self: stretch;
  font-family: var(--font-mincho);
  font-size: 24px;
  line-height: 35px;
  color: var(--color-navy);
  white-space: nowrap;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  position: relative;
  background: var(--color-footer);
  color: #fff;
}
.site-footer__wave {
  /* 直前セクションの背景色で波形を描く (--footer-wave-color をページ側で指定) */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;          /* 1440超の画面でも端まで波形を伸ばす (preserveAspectRatio=none) */
  height: 56px;
  pointer-events: none;
  color: var(--footer-wave-color, #fff);
  display: block;
}
.page-company { --footer-wave-color: var(--color-bg-mint); }
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 80px;
  max-width: var(--w-base);
  margin: 0 auto;
  padding: 120px 120px 64px;
}
.site-footer__grid { display: flex; gap: 360px; align-items: flex-start; }
.site-footer__left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 400px;
}
.site-footer__logo img { width: 245px; height: 84px; }
.site-footer__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-mincho);
}
.site-footer__tagline { font-size: 18px; line-height: 26px; color: #fff; opacity: .9; }
.site-footer__desc { font-size: 14px; line-height: 22px; color: #e8f1ed; opacity: .8; }

.footer-cta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding: 24px;
  border-radius: 0;
  background: #fff;
}
.footer-cta__text {
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
  color: #334e44;
  text-align: center;
}
.footer-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 32px;
  border-radius: 6px;
  background: var(--color-gold);
  font-weight: 700;
  font-size: 14px;
  line-height: 17px;
  color: #fff;
  white-space: nowrap;
  transition: opacity .25s;
}
.footer-cta__btn { box-shadow: inset 0 0 0 1px var(--color-gold); transition: background .25s, color .25s; }
.footer-cta__btn:hover { background: #fff; color: var(--color-gold); }
.footer-cta__btn .arrow { color: currentColor; }

.site-footer__right { display: flex; flex-direction: column; gap: 40px; }
.footer-nav { display: flex; gap: 64px; width: 400px; }
.footer-nav__col { flex: 1 0 0; display: flex; flex-direction: column; gap: 4px; }
.footer-nav__col a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-size: 16px;
  line-height: 23px;
  color: #fff;
}
.footer-nav__col a > span:first-child { width: 168px; white-space: nowrap; }
.footer-nav__col a:hover { opacity: .8; }

.footer-sns { display: flex; flex-direction: column; gap: 25px; width: 389px; }
.footer-sns__title { font-weight: 700; font-size: 16px; line-height: 23px; color: #bfd8cd; }
.footer-sns__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 151px;
  row-gap: 11px;
}
.footer-sns__list a { display: flex; align-items: center; gap: 16px; font-size: 16px; color: #fff; }
.footer-sns__list img { position: relative; z-index: 1; width: 45px; height: 45px; transition: filter .25s; }
/* ホバー反転: 白い円+白アイコン → 白地の円に緑アイコン。白い円は a::before で下に敷き、img は filter で緑に */
.footer-sns__list a { position: relative; transition: color .25s; }
.footer-sns__list a::before { content: ""; position: absolute; left: 0; top: 50%; width: 45px; height: 45px; margin-top: -22.5px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .25s; }
.footer-sns__list a:hover::before { opacity: 1; }
.footer-sns__list a:hover img { filter: brightness(0) saturate(100%) invert(44%) sepia(20%) saturate(1100%) hue-rotate(100deg) brightness(90%) contrast(88%); }

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.site-footer__bottom::before {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  background: rgba(255,255,255,.3);
}
.site-footer__bottom > * {
  font-size: 13px;
  line-height: 16px;
  color: #e8f1ed;
  opacity: .8;
  white-space: nowrap;
}
.site-footer__copyright,
.site-footer__lang { }
.site-footer__bottom {
  /* copyright row: 2要素を両端配置 */
}
.site-footer__bottom .site-footer__copyright { order: 1; }
.site-footer__bottom .site-footer__lang { order: 2; }
@supports (display: grid) {
  .site-footer__bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "priv priv" "line line" "copy lang";
    row-gap: 20px;
    align-items: center;
  }
  .site-footer__privacy { grid-area: priv; justify-self: start; margin-bottom: -4px; }   /* PC: SPと同じく区切り線の上に配置 */
  .site-footer__privacy:hover { text-decoration: underline; }
  .site-footer__bottom::before { grid-area: line; }
  .site-footer__copyright { grid-area: copy; }
  .site-footer__lang { grid-area: lang; }
}

/* ==========================================================================
   Tablet (768px〜1439px): 1440px基準のレイアウトを等比縮小
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1439px) {
  body { zoom: calc(100vw / 1440px); }
}
/* 376px〜767px (大きめスマホ・スマホ横向き・小型タブレット): 375px基準のSPレイアウトを等比拡大
   SPデザインは 375px 幅の座標で組んでいるため、そのまま広げると配置が崩れる。PC側と同じ方針で拡大して Figma と同じ見た目を保つ */
@media (min-width: 376px) and (max-width: 767px) {
  body { zoom: calc(100vw / 375px); }
}

/* ==========================================================================
   SP (〜767px)  Figma SP基準幅 750px → CSS値は 1/2
   ========================================================================== */
@media (max-width: 767px) {
  :root { --w-content: 100%; --w-base: 100%; }

  /* ---- common ---- */
  .btn { width: 120.5px; height: 31.5px; padding: 0; font-size: 14px; line-height: 17px; gap: 5px; }
  .btn .arrow { width: 10.93px; height: 10.93px; }
  .btn .arrow::before { width: 8px; height: 8px; }
  .text-link { width: auto; font-size: 14px; padding-bottom: 2px; }
  .text-link .arrow { width: 10.93px; height: 10.93px; }
  .text-link .arrow::before { width: 8px; height: 8px; }

  .section-heading { gap: 12px; }
  .section-heading__en { font-size: 10px; }
  .section-heading__ja { font-size: 24px; color: var(--color-navy); }
  .section-heading__lead { font-size: 16px; line-height: 1.6; letter-spacing: .8px; }

  /* ---- header ---- */
  .site-header { position: sticky; top: 0; }
  .site-header__inner { height: 72px; padding: 0 17.5px; }
  .site-header__logo img { width: 128.5px; height: 44.5px; }
  .site-header__controls { gap: 9px; }
  .global-nav { display: none; }
  .site-header__actions { gap: 9px; }
  .site-header__actions .btn-contact { display: none; }
  .site-header__actions .btn-lang { padding: 3px 8px; font-size: 16px; }
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 12px;
    position: relative;
    z-index: 2;
  }
  .hamburger span {
    display: block;
    width: 24px;
    height: 1px;
    background: var(--color-navy);
    transition: transform .3s, opacity .3s;
  }
  .is-menu-open .hamburger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .is-menu-open .hamburger span:nth-child(2) { opacity: 0; }
  .is-menu-open .hamburger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  /* ---- SP menu (Figma Brand System "menu" 750px → 1/2) ---- */
  .sp-nav {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(180deg, #5d8f7a 0%, #3e6b5b 100%);
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .3s, transform .3s, visibility .3s;
  }
  .is-menu-open .sp-nav { opacity: 1; visibility: visible; transform: none; }
  .is-fixed { overflow: hidden; }
  .sp-nav__inner { position: relative; min-height: 100%; padding: 0 0 21px; overflow: hidden; }
  /* 装飾の円 */
  .sp-nav__inner::before,
  .sp-nav__inner::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
  .sp-nav__inner::before { top: -30.5px; right: -80.5px; width: 230px; height: 230px; background: #77a690; opacity: .2; }
  .sp-nav__inner::after { top: 489.5px; left: -74.5px; width: 210px; height: 210px; background: #315b4c; opacity: .18; }
  .sp-nav__inner > * { position: relative; z-index: 1; }
  .sp-nav__top { display: flex; align-items: flex-start; justify-content: space-between; height: 98px; padding: 13px 25px 0 27.5px; }
  .sp-nav__logo { display: block; margin-top: 8px; }
  .sp-nav__logo img { display: block; width: 100px; height: 34.5px; }
  .sp-nav__close { display: flex; flex-direction: column; align-items: center; gap: 4.5px; padding: 0; width: 37px; }
  .sp-nav__close-icon { position: relative; width: 31px; height: 31px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.14); }
  .sp-nav__close-icon::before,
  .sp-nav__close-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 1.2px; background: #fff; transform: translate(-50%,-50%) rotate(45deg); }
  .sp-nav__close-icon::after { transform: translate(-50%,-50%) rotate(-45deg); }
  .sp-nav__close-label { font-family: var(--font-sans); font-size: 12px; line-height: 14.5px; color: #e8f1ed; }
  .sp-nav__lead { padding: 0 24.5px; font-family: var(--font-serif); font-size: 15px; line-height: 23px; color: #fff; }
  .sp-nav__list { margin: 22px 23.5px 0 24.5px; border-top: 1px solid rgba(220,234,227,.7); }
  .sp-nav__list li { border-bottom: 1px solid rgba(220,234,227,.7); }
  .sp-nav__list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13.5px 8.5px 13.5px 8px;
    font-family: var(--font-inter);
    font-size: 16px;
    line-height: 19.5px;
    color: #fff;
  }
  .sp-nav__list li a .arrow { width: 13.5px; height: 13.5px; }
  .sp-nav__list li a .arrow::before { width: 10px; height: 10px; }
  .sp-nav__cta { display: flex; flex-direction: column; align-items: center; margin: 22px 19.5px 0 25.5px; padding: 20px 0 20px; border-radius: 8px; background: #fff; }
  .sp-nav__cta-text { font-family: var(--font-serif); font-size: 15px; line-height: 22px; text-align: center; color: #334e44; }
  .sp-nav__cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15.5px;
    width: 224.5px;
    height: 35.5px;
    margin-top: 3.5px;
    border-radius: 4px;
    background: var(--color-gold);
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
    color: #fff;
    white-space: nowrap;
  }
  .sp-nav__cta-btn .arrow { width: 11.5px; height: 11.5px; }
  .sp-nav__cta-btn .arrow::before { width: 8.5px; height: 8.5px; }
  .sp-nav__sns { margin: 22px 0 0 33px; }
  .sp-nav__sns-title { font-family: var(--font-sans); font-size: 14px; line-height: 17px; color: #bfd8cd; }
  .sp-nav__sns-list { display: grid; grid-template-columns: 161px 1fr; row-gap: 7px; margin-top: 12.5px; }
  .sp-nav__sns-list a { display: flex; align-items: center; gap: 8.5px; font-family: var(--font-sans); font-size: 14px; line-height: 17px; color: #fff; }
  .sp-nav__sns-list img { display: block; width: 29px; height: 29px; }

  /* ---- hero (Figma TOP-2 750px → 1/2) ---- */
  .hero { height: 683.5px; padding-top: 218px; overflow: hidden; }
  .hero__bg { left: -325px; top: 0; width: 1025px; max-width: none; height: 683.5px; object-fit: fill; transform: none; }
  .hero__copy { width: 100%; padding: 0 20px; gap: 0; }
  .hero__title { font-size: 32px; line-height: 46.5px; white-space: nowrap; }
  .hero__lead {
    width: auto;
    margin-top: 21px;
    font-size: 16px;
    line-height: 25.6px;
    letter-spacing: .8px;
  }
  /* マーキー: SPは2段 (上段=data-row="top", 下段="bottom")。JSが振り分ける */
  .hero__products { --s: .63; top: 25.5px; height: 640px; }
  .hero__marquee--all { display: none; }
  .hero__marquee--top { display: flex; left: calc(10px - 35px * .63); }      /* 上段 1枚目 x=10 (先頭 --ml:35 分を戻す) */
  .hero__marquee--bottom { display: flex; top: 441.5px; left: -20px; }   /* 下段 y=467, 1枚目 x=-20 */

  /* ---- section heading (SP共通) ---- */
  .section-heading { gap: 18px; }
  .section-heading__en { font-size: 10px; line-height: 12px; }
  .section-heading__ja { font-size: 24px; line-height: 35px; color: var(--color-navy); }
  .section-heading__lead { font-size: 16px; line-height: 25.6px; letter-spacing: .8px; }
  .section-heading__en + .section-heading__ja { margin-top: -13px; } /* en/ja の間は 5px */

  /* ---- category ---- */
  .category { background: #fff; }
  .category__inner {
    width: 100%;
    gap: 41.5px;
    padding: 60px 20.5px 60px 33.5px;
    background: rgba(255,255,255,.4);
  }
  .category__inner .section-heading { gap: 12px; margin-bottom: 10px; }
  .category__inner .section-heading__en { font-weight: 700; }
  .category__inner .section-heading__en + .section-heading__ja { margin-top: -7px; }
  .category__list {
    grid-template-columns: repeat(3, 97px);
    justify-content: space-between;
    column-gap: 15px;
    row-gap: 35px;
    height: auto;
  }
  .category-card { justify-self: center; }
  .category-card a { gap: 12px; }
  .category-card__circle { width: 97px; height: 97px; border-radius: 50%; border-width: .5px; overflow: visible; }
  .category-card__circle img { position: absolute; max-width: none; object-fit: fill; }
  .category-card:nth-child(1) .category-card__circle img,
  .category-card:nth-child(4) .category-card__circle img { object-fit: cover; }
  .category-card:nth-child(1) .category-card__circle img { left: 8.5px;  top: 13px;  width: 76.5px; height: 76.5px; }
  .category-card:nth-child(2) .category-card__circle img { left: 21px;   top: 5px;   width: 55.5px; height: 92px; }
  .category-card:nth-child(3) .category-card__circle img { left: 20.5px; top: 4.5px; width: 55.5px; height: 88px; }
  .category-card:nth-child(4) .category-card__circle img { left: 20px;   top: 19px;  width: 52.5px; height: 64px; }
  .category-card:nth-child(5) .category-card__circle img { left: 0;      top: 0;     width: 97px;   height: 97px; }
  .category-card:nth-child(6) .category-card__circle img { left: 18.5px; top: 5px;   width: 56px;   height: 86.5px; }
  .category-card__overlay { display: none; }
  .category-card__name { font-size: 16px; line-height: 23px; color: var(--color-navy); white-space: nowrap; }
  .category .btn--fill { background: #fff; --btn-stroke: var(--color-green-1); color: var(--color-green-1); }
  .category .btn--fill .arrow { color: var(--color-green-1); }

  /* ---- new products ---- */
  .new-products { min-height: 0; }
  .new-products__bg-main { height: 100%; transform: none; }
  .new-products__bg-bottom { display: none; }
  .new-products__inner { width: 100%; padding: 60px 19.5px 31.5px; gap: 24px; }
  .new-products .section-heading { width: 266px; }
  .new-products .section-heading__en { font-weight: 300; }
  .new-products .section-heading__lead { line-height: 19px; }
  .product-list { flex-wrap: wrap; gap: 20px 16px; width: 100%; }
  .product-card { width: calc(50% - 8px); }
  .product-card a { width: 100%; height: 264.5px; justify-content: flex-start; padding: 18px; filter: drop-shadow(0 5px 14px rgba(0,0,0,.07)); }
  .product-card__thumb { flex: 0 0 auto; width: 120px; height: 105.5px; }
  .product-card__thumb img { left: 18px; top: 9.5px; transform: none; width: 74px; height: 90.5px; }
  .product-card__body { padding: 6.5px 0 0; gap: 6.5px; }
  .product-card__tag { padding: 2px 8px; font-size: 10px; line-height: 12px; }
  .product-card__name { font-size: 15px; line-height: 21.5px; letter-spacing: .75px; }
  .product-card__desc { width: 114px; font-size: 12px; line-height: 16.8px; letter-spacing: .6px; white-space: normal; }
  .product-card .text-link { width: 94px; margin: 5.5px auto 0; padding-bottom: 3px; font-size: 14px; line-height: 17px; gap: 9.5px; }
  .product-card .text-link .arrow { width: 11px; height: 11px; }
  .product-card .text-link .arrow::before { width: 8px; height: 8px; }

  /* ---- brands ---- */
  .brands { overflow: hidden; }
  .brands__inner { width: 100%; padding: 60px 0; gap: 42px; }
  .brands .section-heading { width: 100%; gap: 18px; }
  .brands .section-heading__en { font-weight: 300; }
  .brands .section-heading__ja { letter-spacing: 1.2px; }
  .brands .section-heading__lead { font-family: var(--font-mincho); line-height: 23px; }
  .brand-list { gap: 44px; }
  .brand-feature, .brand-feature--reverse {
    position: relative;
    display: block;
    width: 100%;
    height: 300px;
    overflow: visible;
  }
  .brand-feature__image {
    position: absolute;
    top: 29.5px;
    left: 237px;
    width: 140px;
    height: 190px;
    z-index: 1;
  }
  .brand-feature--reverse .brand-feature__image { left: 0; }
  .brand-feature__story {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 300px;
    height: 300px;
    justify-content: flex-start;
    padding: 46.5px 0 0 18.5px;
    gap: 12px;
    overflow: visible;
  }
  .brand-feature--reverse .brand-feature__story { left: auto; right: 0; padding: 41px 0 0 86px; gap: 16px; }
  .brand-feature:nth-child(3) .brand-feature__story { padding-top: 43.5px; gap: 16px; }
  .brand-feature__title { font-family: var(--font-serif); font-weight: 500; font-size: 19px; line-height: 27.5px; width: 207px; white-space: nowrap; }
  .brand-feature__logo { width: 200px; height: auto; }
  .brand-feature__text { width: 188px; font-size: 14px; line-height: 21.4px; letter-spacing: .7px; color: #000; }   /* Figma SP: 5行で214px */
  .brand-feature--reverse .brand-feature__text { width: 208px; line-height: 22.5px; }
  .brand-feature:nth-child(3) .brand-feature__text { width: 205px; line-height: 22.5px; }
  .brand-feature__story .btn { margin-top: 8px; }
  .brand-feature--reverse .brand-feature__story .btn,
  .brand-feature:nth-child(3) .brand-feature__story .btn { margin-top: 0; }
  .brand-feature__watermark,
  .brand-feature__watermark--mint,
  .brand-feature__watermark--oral2 { left: 11px; top: 246.5px; bottom: auto; right: auto; font-size: 32px; line-height: 46.5px; }
  .brand-feature__watermark--mint { left: 116px; top: 253.5px; }
  .brand-feature__watermark--oral2 { left: 12px; top: 257.5px; }

  /* ---- news ---- */
  .news__inner { flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; padding: 60px 19px 60px 21px; }   /* Figma: 670幅 @x42 */
  .news__heading { align-items: flex-start; width: auto; gap: 5px; }
  .news__heading-en { font-weight: 300; font-size: 10px; line-height: 12px; }
  .news__heading-ja { font-size: 24px; line-height: 35px; }
  .news__body { align-items: center; width: 100%; gap: 30px; }
  .news-list { width: 100%; }
  .news-item { border-bottom: 0; background: linear-gradient(var(--color-border-cream), var(--color-border-cream)) bottom / 100% 1px no-repeat; }   /* 行高 98.5 (線は高さ0) */
  .news-item a { gap: 12px; padding: 16px 0; align-items: flex-start; }
  .news-item__thumb { flex: 0 0 100px; width: 100px; height: 66.5px; }
  .news-item__content { gap: 6px; }
  .news-item__meta { gap: 12px; }
  .news-item__meta time { font-size: 11px; line-height: 13px; }
  .news-item__cat { padding: 2px 8px; font-size: 9px; line-height: 11px; }
  .news-item__title { font-size: 14px; line-height: 22.4px; letter-spacing: .7px; }
  .news-item__title br { display: none; }
  .news .btn--fill { background: #fff; --btn-stroke: var(--color-green-1); color: var(--color-green-1); }
  .news .btn--fill .arrow { color: var(--color-green-1); }

  /* ---- instagram ---- */
  .instagram { padding: 60px 16px; gap: 14.5px; background: #fff; }   /* Figma SP: 背景なし(白) */
  .instagram .section-heading { gap: 0; }
  .instagram .section-heading__en { display: none; }
  .instagram .section-heading__ja { font-size: 26px; line-height: 37.5px; margin-top: 0; }
  .instagram__body { width: 100%; gap: 30px; }
  .instagram__grid {
    grid-template-columns: repeat(3, 105px);
    justify-content: space-between;
    column-gap: 13px;
    row-gap: 14.5px;
    width: 100%;
  }
  .instagram__grid li { width: 105px; height: 105px; }
  .instagram .btn { width: 152px; height: 31.5px; font-size: 16px; line-height: 19.5px; }

  /* ---- cta ---- */
  .cta { flex-direction: column; gap: 19.5px; padding: 0 18px 31px; }
  .cta-card { width: 100%; padding: 16px 12px; gap: 10px; border-radius: 0; }
  .cta-card__image { flex: 0 0 107.5px; width: 107.5px; height: 92.5px; }
  .cta-card__body { flex: 1 1 auto; height: 83.5px; justify-content: flex-end; align-items: flex-end; gap: 20px; padding: 0; }
  .cta-card__title { width: 100%; font-size: 18px; line-height: 26px; }
  .cta-card .text-link { width: 94px; padding-bottom: 3px; font-size: 14px; line-height: 17px; gap: 9.5px; }
  .cta-card .text-link .arrow { width: 11px; height: 11px; }
  .cta-card .text-link .arrow::before { width: 8px; height: 8px; }

  /* ---- footer (Figma TOP/商品一覧/news SP 共通) ---- */
  .site-footer__wave { width: 100%; height: 28.3px; }
  .site-footer__inner { padding: 80px 21.5px 56.5px; gap: 0; }   /* 左右対称 (375px幅で Figma と一致、広い画面では全幅に追従) */
  .site-footer__grid { flex-direction: column; gap: 32px; }
  .site-footer__left { width: 100%; gap: 0; }
  .site-footer__logo img { width: 131.5px; height: 49px; }
  .site-footer__copy { gap: 0; margin-top: 9.5px; width: 100%; max-width: 300px; }
  .site-footer__tagline { font-size: 15px; line-height: 23px; color: #e8f1ed; opacity: 1; }
  .site-footer__desc { margin-top: 9.5px; font-size: 15px; line-height: 23px; opacity: 1; }
  .footer-cta { width: 100%; margin: 16px 0 0; padding: 20px 24px; gap: 3.5px; border-radius: 0; align-items: center; }
  .footer-cta__text { width: auto; white-space: nowrap; font-family: var(--font-serif); font-weight: 400; font-size: 15px; line-height: 22px; text-align: center; color: #334e44; }
  .footer-cta__btn { width: 224.5px; height: 35.5px; padding: 0; justify-content: center; border-radius: 4px; font-size: 16px; line-height: 23px; gap: 15.5px; }
  .footer-cta__btn .arrow { width: 11.5px; height: 11.5px; }
  .footer-cta__btn .arrow::before { width: 8.5px; height: 8.5px; }
  .site-footer__right { width: 100%; gap: 30px; margin-top: -5px; }
  .footer-nav { display: flex; flex-direction: column; width: 100%; margin-left: 0; gap: 0; border-top: 1px solid rgba(255,255,255,.3); }
  .footer-nav__col { display: contents; }
  .footer-nav__col li { order: 0; }
  .footer-nav__col:nth-child(1) li:nth-child(3) { order: 5; }
  .footer-nav__col:nth-child(2) li:nth-child(2) { order: 3; }
  .footer-nav__col:nth-child(2) li:nth-child(1) { order: 4; }
  .footer-nav__col a {
    justify-content: space-between;
    gap: 12px;
    width: auto;
    margin: 0 8.5px 0 8px;
    padding: 13.5px 0;
    font-family: var(--font-inter);
    font-size: 16px;
    line-height: 19.5px;
    opacity: 1;
  }
  .footer-nav__col li { border-bottom: 1px solid rgba(255,255,255,.3); }
  .footer-nav__col a > span:first-child { width: auto; flex: 1; }
  .footer-nav__col a .arrow { width: 13.5px; height: 13.5px; }
  .footer-nav__col a .arrow::before { width: 10px; height: 10px; }
  .footer-sns { width: 100%; max-width: 300px; margin: 0 auto; padding-left: 8px; gap: 12.5px; }
  .footer-sns__title { font-weight: 400; font-size: 14px; line-height: 17px; }
  .footer-sns__list { display: grid; grid-template-columns: 1fr 1fr; row-gap: 7px; column-gap: 0; }
  .footer-sns__list a { gap: 8px; font-size: 14px; line-height: 17px; }
  .footer-sns__list img { display: block; width: 29px; height: 29px; }
  .footer-sns__list a::before { width: 29px; height: 29px; margin-top: -14.5px; }
  .site-footer__bottom { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: 20px; width: 100%; text-align: left; }
  .site-footer__bottom::before { display: none; }
  .site-footer__bottom > * { opacity: 1; }
  .site-footer__privacy { display: block; order: 0; height: 21.5px; box-sizing: border-box; border-bottom: 1px solid rgba(255,255,255,.3); font-size: 8px; line-height: 11.5px; }
  .site-footer__copyright { font-size: 7px; line-height: 8.5px; margin-top: 14px; }
  .site-footer__lang { font-size: 7px; line-height: 8.5px; margin-top: -8.5px; text-align: right; }
}

/* ==========================================================================
   Google翻訳 (JP/EN ボタンで切替。Google の標準UIは隠す)
   ========================================================================== */
.gt-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body { top: 0 !important; }                       /* 翻訳バーで body が押し下げられるのを防ぐ */
.goog-te-banner-frame, .skiptranslate iframe, #goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
font[style] { background: none !important; box-shadow: none !important; }   /* 翻訳箇所のハイライト無効化 */
html.translated-ltr .js-lang, html.translated-rtl .js-lang { font-weight: 600; }
.js-lang .is-dim { opacity: .45; }

/* ==========================================================================
   スクロールで表示されるアニメーション (JS: main.js の「スクロールアニメーション」が対象を自動で選ぶ)
   ========================================================================== */
html.js-reveal .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
}
html.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   ローディング画面 (TOP) : 白地にキャッチコピー → 緑地にロゴ → フェードアウト
   html.is-loading の間だけ表示。JS 無効時は表示されない (html に is-loading を付けるのは JS)
   ========================================================================== */
.loader { display: none; }
html.is-loading { overflow: hidden; }
html.is-loading .loader {
  display: block;
  position: fixed; inset: 0; z-index: 2000;
  background: #fff;
}
.loader__screen {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .6s ease;
}
.loader__screen--copy { background: #fff; }
.loader__screen--logo { background: var(--color-footer); }
.loader__copy {
  font-family: var(--font-mincho);
  font-size: 32px; line-height: 1.8; letter-spacing: 2px;
  color: var(--color-teal);
  text-align: center;
  transform: translateY(12px);
  transition: transform .9s cubic-bezier(.22,1,.36,1);
}
.loader__logo {
  display: block; width: 245px; height: 84px;
  transform: scale(.94);
  transition: transform .9s cubic-bezier(.22,1,.36,1);
}
/* 段階: copy → logo → done */
.loader.is-copy .loader__screen--copy { opacity: 1; }
.loader.is-copy .loader__copy { transform: none; }
.loader.is-logo .loader__screen--logo { opacity: 1; }
.loader.is-logo .loader__logo { transform: none; }
.loader.is-done { transition: opacity .7s ease; opacity: 0; pointer-events: none; }
@media (max-width: 767px) {
  .loader__copy { font-size: 20px; letter-spacing: 1px; }
  .loader__logo { width: 160px; height: 55px; }
}
@media (prefers-reduced-motion: reduce) {
  .loader__screen, .loader__copy, .loader__logo, .loader.is-done { transition: none; }
}