@charset "UTF-8";
/* ============================================================
   KYARA INNOVATE コーポレートサイト
   デザイン: Figma「コーポレート 3校」(1440px基準)
   ============================================================ */

:root {
  --ink: #161615;
  --bg: #f3f3f3;
  --card: #fafafa;
  --accent: #eb4517;
  --grey: #959090;
  --inset: clamp(16px, 4.17vw, 60px);
  --serif: "Zen Old Mincho", "Hiragino Mincho ProN", serif;
  --serif2: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --latin: "Crimson Text", serif;
  --geo: "Geologica", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* 横スクロール防止: bodyだけではiOS Safari等で効かないためhtmlにも指定
   (clip対応ブラウザではプログラムスクロールも含め完全に禁止される) */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--serif);
  color: var(--ink);
  /* ベージュの背景に若干のノイズ（ざらつき）を重ねる */
  background-color: var(--bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.09'/></feComponentTransfer></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
a, button { -webkit-tap-highlight-color: transparent; }

.container {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--inset);
}

/* ---------- 共通パーツ ---------- */

/* 縦書きテキスト */
.v-title {
  writing-mode: vertical-rl;
  font-size: clamp(26px, 2.78vw, 40px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .04em;
}

/* グローバルナビ（横書き / 翻訳プラグイン対応） */
.h-nav {
  display: flex;
  align-items: center;
}
.h-nav > li { margin-left: 38px; position: relative; }
.h-nav > li:first-child { margin-left: 0; }
.h-nav a {
  display: inline-block;
  position: relative;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .12em;
  transition: opacity .5s ease;
}
/* ホバーで横線が左から引かれる */
.h-nav > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.h-nav > li:hover > a::after,
.h-nav > li:focus-within > a::after,
.h-nav > li.is-open > a::after { transform: scaleX(1); }

/* メガメニュー（ホバーで下層ページを表示） */
.g-sub {
  position: absolute;
  top: 100%;
  right: -16px;
  transform: translateY(12px);
  padding-top: 24px; /* 項目とパネルの間もホバーが切れない透明ブリッジ */
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
  z-index: 20;
}
.h-nav > li:hover .g-sub,
.h-nav > li:focus-within .g-sub,
.h-nav > li.is-open .g-sub {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* パネル本体（ベージュ） */
.g-sub-in {
  background: var(--bg);
  color: var(--ink);
  display: flex;
  gap: 52px;
  padding: 38px 46px 42px;
  min-width: max-content;
}
.g-sub-head { padding-top: 2px; }
.g-sub-title {
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: .06em;
  white-space: nowrap;
}
.g-sub-label {
  margin-top: 6px;
  font-family: var(--latin);
  font-size: 12px;
  letter-spacing: .1em;
}
.g-sub-list { min-width: 230px; }
.g-sub-list li { margin: 0; }
.g-sub-list a {
  display: block;
  padding: 11px 2px;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: .06em;
  white-space: nowrap;
  border-bottom: 1px solid rgba(22, 22, 21, .28);
  transition: opacity .3s, padding-left .3s;
}
.g-sub-list li:first-child a { padding-top: 2px; }
.g-sub-list li:last-child a { border-bottom: none; padding-bottom: 2px; }
.g-sub-list a:hover { opacity: .5; padding-left: 8px; }

/* 英字ラベル（BUSINESS等） */
.latin-label {
  font-family: var(--latin);
  font-size: 15px;
  letter-spacing: .1em;
  line-height: 1.36;
}

/* 丸矢印 */
.circle-arrow {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.circle-arrow span {
  font-size: 10px;
  line-height: 1;
  transform: translateX(.5px);
}
.circle-arrow-white { background: #fff; color: var(--ink); }

/* 下線リンク（テキスト＋線＋丸矢印） */
.link-line {
  position: relative;
  display: block;
  width: min(472px, 100%);
  padding: 0 0 14px 7px;
  overflow: hidden;
}
/* 下線: ホバーで左から右へスイープ */
.link-line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
}
.link-line:hover::after {
  animation: lineSweep .8s cubic-bezier(.4, 0, .2, 1);
}
@keyframes lineSweep {
  0%   { transform: translateX(0); }
  49%  { transform: translateX(103%); }
  50%  { transform: translateX(-103%); }
  100% { transform: translateX(0); }
}
.link-line-text {
  font-size: 20px;
  line-height: 2.25;
  letter-spacing: .05em;
}
.link-line .circle-arrow {
  position: absolute;
  right: 18px;
  bottom: 26px;
}
.link-line-white { color: #fff; }
.link-line-white::after { background: #fff; }

/* 枠線ボタン */
.btn-line {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 256px;
  height: 52px;
  border: 1px solid var(--ink);
  border-radius: 26px;
  font-size: 15px;
  letter-spacing: .1em;
  transition: background .35s, color .35s;
}
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-geo { font-family: var(--geo); font-weight: 100; }

/* スクロール表示アニメーション（ふわっとフェード） */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease, transform .9s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* テキスト: 1行ずつ下から上にマスクが取れる出現 */
.txt-reveal .line { display: block; overflow: hidden; }
.txt-single { overflow: hidden; }

/* 縦書きタイトル: 右の列から順に、上から下へ1文字ずつなめらかに出現 */
.txt-type .ch { opacity: 0; }
/* 縦書き内の大文字英字(OEM等)は正立させる */
.txt-type .ch-latin { text-orientation: upright; }
.txt-type.is-visible .ch {
  opacity: 1;
  transition: opacity .9s ease;
  transition-delay: calc(var(--ci, 0) * .07s);
}
.txt-reveal .line-inner {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 1s cubic-bezier(.33, 0, .15, 1);
  transition-delay: calc(var(--i, 0) * .12s);
  will-change: transform;
}
.txt-reveal.is-visible .line-inner { transform: none; }
/* FV内のテキストは少し遅らせて出す */
.fv .txt-reveal .line-inner { transition-delay: calc(.5s + var(--i, 0) * .15s); }

/* 画像: 下から上に不透明マスクが取れる出現 */
.mask-reveal { position: relative; }
.mask-reveal::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: var(--mask-color, #fff);
  transition: transform 1.15s cubic-bezier(.65, 0, .2, 1);
  z-index: 1;
  pointer-events: none;
}
.mask-reveal.is-visible::after { transform: translateY(-102%); }
.mask-reveal img,
.mask-reveal video { transform: scale(1.08); }
.mask-reveal.is-visible img,
.mask-reveal.is-visible video { transform: none; }

/* 画像ホバーでゆっくり拡大 */
.biz-media img, .biz-media video,
.recruit-bg,
.story-thumb img,
.fv-banner-thumb img {
  transition: transform 1.3s cubic-bezier(.3, 0, .2, 1);
}
.biz-card:hover .biz-media img,
.biz-card:hover .biz-media video { transform: scale(1.05); }
.story-card:hover .story-thumb img { transform: scale(1.06); }
.recruit-card:hover .recruit-bg { transform: scale(1.04); }
.fv-banner:hover .fv-banner-thumb img { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .txt-reveal .line-inner { transform: none; transition: none; }
  .txt-type .ch { opacity: 1; transition: none; }
  .biz-line { transform: none; transition: none; animation: none; }
  .mask-reveal::after { display: none; }
  .mask-reveal img, .mask-reveal video { transform: none; transition: none; }
}

/* ============================================================
   FV（ファーストビュー）
   ============================================================ */
.fv {
  position: relative;
  height: 100svh;
  min-height: 620px;
  color: #fff;
}
.fv-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.fv-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fv-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .38);
}

/* ロゴ */
.fv-brand {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fvFade 1.6s .2s ease both;
}
.fv-brand-mark { width: 69px; }
.fv-brand-type { width: 93px; margin-top: 10px; }

/* 追従グローバルヘッダー */
.gnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px var(--inset) 0;
  color: #fff;
  z-index: 95;
  transition: opacity .45s ease, color .45s ease, transform .45s ease, background-color .35s ease, padding .35s ease;
  animation: fvFadePlain 1.6s .5s ease both;
}
.gnav.is-hidden { opacity: 0; pointer-events: none; }
/* スクロール後は薄い帯背景を付けて本文と重なっても読めるようにし、下スクロール中は隠す */
.gnav.is-scrolled {
  padding: 14px var(--inset);
  background: rgba(242, 242, 242, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
}
.gnav.is-scrolled .gnav-mark-w { opacity: 0; }
.gnav.is-scrolled .gnav-mark-b { opacity: 1; }
.gnav.gnav-hide { transform: translateY(-100%); pointer-events: none; }
/* 左端のロゴ（紋章+KYARA INNOVATE・常時表示・白/黒切替） */
.gnav-mark {
  position: relative;
  display: block;
  width: 74px;
}
.gnav-mark-w,
.gnav-mark-b {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  transition: opacity .45s ease;
}
.gnav-mark-b {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.gnav-mark-w img:first-child,
.gnav-mark-b img:first-child { width: 40px; }
.gnav-mark-w img:last-child,
.gnav-mark-b img:last-child { width: 72px; }
.gnav-dark { color: var(--ink); }
.gnav-dark .gnav-mark-w { opacity: 0; }
.gnav-dark .gnav-mark-b { opacity: 1; }
/* ホバー時は下線（h-navのa::after）のみ。紋章ポイントは廃止 */

/* Scroll Down */
.fv-scroll {
  position: absolute;
  left: clamp(16px, 3.4vw, 49px);
  top: 23.4%;
  writing-mode: vertical-rl;
  font-family: var(--latin);
  font-size: 20px;
  letter-spacing: -.03em;
  line-height: 1.47;
  animation: fvFade 1.6s .8s ease both;
}

/* タグライン */
.fv-tagline {
  position: absolute;
  top: 34.5%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
  text-align: center;
  font-family: var(--serif2);
  font-size: clamp(13px, 1.25vw, 18px);
  line-height: 2;
  letter-spacing: .05em;
}

/* キャッチコピー */
.fv-copy {
  position: absolute;
  left: clamp(20px, 4vw, 58px);
  /* aboutの白カードがFVに76px重なるため、下端基準で余白を確保して被りを防ぐ */
  bottom: 122px;
  font-size: clamp(38px, 5.56vw, 80px);
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: .02em;
}

.fv-brand, .fv-nav, .fv-scroll {
  animation-name: fvFadePlain;
}
@keyframes fvFadePlain {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fv-brand { transform: translateX(-50%); }

/* お知らせバナー */
.fv-banner {
  position: absolute;
  right: 37px;
  /* FVコピー(bottom:122px)の最終行の文字下端に下辺を揃える
     (コピーはline-height:1.47のため文字の下に0.235em分の余白がある) */
  bottom: calc(122px + clamp(38px, 5.56vw, 80px) * 0.235);
  width: 557px;
  height: 97px;
  background: #fff;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 15px 0 25px;
  transition: opacity .3s;
  animation: fvSlideIn 1.1s 1.5s cubic-bezier(.25, 0, .15, 1) both;
}
@keyframes fvSlideIn {
  from { transform: translateX(calc(100% + 60px)); }
  to   { transform: none; }
}
.fv-banner:hover { opacity: .85; }
.fv-banner-thumb {
  width: 111px;
  height: 74px;
  background: var(--grey);
  flex: none;
}
.fv-banner-text {
  flex: 1;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: .02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* OEM相談ボタン（スクエア・画面右下に追従）
   ※メニュー・ロゴと丸が続くため、丸以外の形に変更 */
.fv-cta {
  position: fixed;
  right: 37px;
  bottom: 37px;
  width: 128px;
  height: 128px;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 90;
  transition: transform .4s ease, opacity .4s ease;
  animation: fvFadePlain 1.8s 1.4s ease both;
}
.fv-cta:hover { transform: scale(1.06); }
/* 初回フェードイン完了後は animation を外して表示/非表示を transition で制御 */
.fv-cta.cta-ready { animation: none; }
/* フッター表示中はSNSアイコンと重なるため隠す */
.fv-cta.is-hidden { opacity: 0; pointer-events: none; }
.fv-cta-text {
  font-family: var(--serif2);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .1em;
  text-align: center;
}
.fv-cta-arrow {
  font-family: var(--serif2);
  font-size: 15px;
  line-height: 1;
  transform: rotate(90deg);
}

/* ============================================================
   私たちについて
   ============================================================ */
.about {
  padding: 0 var(--inset);
  position: relative;
  z-index: 2;
}
.about-card {
  position: relative;
  background: var(--card);
  margin-top: -76px;
  min-height: 899px;
  padding: 126px 60px 140px 175px;
}
.about-label {
  position: absolute;
  left: 116px;
  top: 135px;
  writing-mode: vertical-rl;
  font-family: var(--latin);
  font-size: 15px;
  letter-spacing: .1em;
  line-height: 1.36;
}
.about-titles > span {
  position: absolute;
  writing-mode: vertical-rl;
  font-size: clamp(26px, 2.78vw, 40px);
  line-height: 1.1;
  letter-spacing: .04em;
  white-space: nowrap;
  z-index: 1; /* 白いロゴ（紋章）より文字を前面に */
}
.about-title-1 { right: 257px; top: 135px; }
.about-title-2 { right: 358px; top: 238px; }

.about-body {
  width: min(620px, 100%);
  font-size: 17px;
  line-height: 2.2;
  letter-spacing: .03em;
}
.about-body p + p { margin-top: 2.2em; }

.about-link {
  margin: 158px 0 0 -63px;
  position: relative;
  z-index: 1; /* 紋章より前面に */
}
.about-body {
  position: relative;
  z-index: 1;
}

.about-mark {
  position: absolute;
  right: 80px;
  bottom: -80px;
  width: 557px;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   事業内容
   ============================================================ */
.business {
  position: relative;
}
.business-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1118px;
  overflow: hidden;
  pointer-events: none;
}
.business-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
}
.business .container { position: relative; }

.business-head {
  position: relative;
  padding-top: 275px;
  padding-bottom: 13px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.business-title { margin-left: 24px; }
.business-intro {
  width: min(446px, 100%);
  padding-top: 90px;
}
.business-intro-text {
  margin-top: 13px;
  /* 「私たちについて」本文と同じサイズ・行間 */
  font-size: 17px;
  line-height: 2.2;
  letter-spacing: .03em;
}

.biz-cards {
  display: flex;
  flex-direction: column;
  /* 紙芝居: 次のカードが重なってくるまでのスクロール距離（大きいほど遅く重なる） */
  gap: 45vh;
  /* カードの固定位置: 縦幅が十分なら中央寄せ、
     小さい画面ではボタンまで見える下端合わせを優先（画面下に48px余白） */
  --stack-top: min(calc(50vh - 390px), calc(100vh - 828px), 84px);
}
.biz-card {
  background: #fff;
  display: grid;
  grid-template-columns: 1fr 55.08%;
  min-height: 780px;
  /* 紙芝居のように重なるスタック（スクロールを戻すと戻る） */
  position: sticky;
  top: var(--stack-top);
}
.biz-card-body {
  position: relative;
  text-align: center;
  padding-right: 52px;
}
.biz-title {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  font-size: clamp(48px, 5.35vw, 77px);
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: .02em;
}
.biz-desc {
  position: absolute;
  top: 186px;
  left: 6%;
  right: 6%;
  font-family: var(--serif2);
  font-size: 16px;
  line-height: 2;
  letter-spacing: .02em;
  /* 句読点（、。）の後でだけ折り返す。行末が「対」、次の行が「応。」のように文の途中で切れないようにする（2026-09-25）。
     スマホ（ファイル末尾の共通ルール）は <br> を消して流し込むので、この指定は外す */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.biz-line {
  position: absolute;
  top: 448px;
  left: 50%;
  width: 1px;
  height: 112px;
  background: rgba(22, 22, 21, .6);
  /* 上から下へ落ちるように描画（リピート） */
  transform: scaleY(0);
}
.biz-line.is-visible {
  animation: lineDrop 2.8s cubic-bezier(.6, 0, .3, 1) infinite;
}
@keyframes lineDrop {
  0%   { transform: scaleY(0); transform-origin: top; }
  42%  { transform: scaleY(1); transform-origin: top; }
  58%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
.biz-logo {
  position: absolute;
  bottom: 106px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.biz-logo-inimu { width: 208px; }
.biz-logo-nirsi { width: 150px; }
.biz-card .btn-line {
  position: absolute;
  bottom: 54px;
  left: 50%;
  transform: translateX(-50%);
}
.biz-media {
  position: relative;
  overflow: hidden;
  background: #050505;
}
.biz-media img,
.biz-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.biz-media img { object-position: 47% 50%; }

/* ============================================================
   人と物語
   ============================================================ */
.story {
  padding: 252px 0 190px;
}
.story-head {
  position: relative;
  height: 272px;
}
.story-title-1,
.story-title-2 {
  position: absolute;
  white-space: nowrap;
}
.story-title-1 { left: calc(50% + 10px); top: 0; }
.story-title-2 { left: calc(50% - 41px); top: 104px; }
.story-label {
  position: absolute;
  left: 0;
  top: 176px;
}
.story .container { position: relative; }
.story-more {
  position: absolute;
  right: calc(var(--inset) + 89px);
  top: 179px;
  font-size: 20px;
  line-height: 1.64;
  letter-spacing: .04em;
  text-decoration: underline;
  text-underline-offset: .3em;
  transition: opacity .3s;
}
.story-more:hover { opacity: .55; }

.story-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.story-card { display: block; transition: opacity .3s; }
.story-card:hover { opacity: .7; }
/* カードは左から順番に表示 */
.story-card:nth-child(2) { --d: .18s; }
.story-card:nth-child(3) { --d: .36s; }
.story-card:nth-child(4) { --d: .54s; }
.story-card[data-reveal] { transition-delay: var(--d, 0s); }
.story-card:hover { transition-delay: 0s; }
.story-thumb.mask-reveal::after { transition-delay: var(--d, 0s); }
.story-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 315 / 280;
  background: #fff;
  overflow: hidden;
  --mask-color: var(--bg);
}
.story-card-title {
  margin-top: 28px;
  font-size: 20px;
  line-height: 1.64;
  letter-spacing: .02em;
  /* 長いタイトルは2行までで「…」省略（No.38。OEMページの .cases-grid 内も同じ） */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.story-card-cat {
  margin-top: 8px;
  min-height: 1.64em; /* 分類の無い記事もラベルの高さを空けて、カードのタイトルの高さをそろえる */
  color: var(--accent);
  font-size: 14px;
  line-height: 1.64;
}

/* ============================================================
   お知らせ
   ============================================================ */
.news {
  padding-top: 180px;
}
.news-inner {
  display: grid;
  grid-template-columns: 335px 1fr;
  align-items: start;
}
.news-label .latin-label { margin-top: 30px; }

.news-list { margin-right: 92px; }

.news-row {
  position: relative;
  display: block;
  padding: 28px 90px 34px 0;
  border-top: 1px solid var(--ink);
  transition: opacity .3s;
}
.news-row:hover { opacity: .6; }
.news-row-last { border-bottom: 1px solid var(--ink); }
.news-row-title {
  font-size: 24px;
  line-height: 1.64;
  letter-spacing: .02em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.news-row-date {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.64;
}
.news-row .circle-arrow {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}
.news-viewall {
  margin-top: 42px;
  text-align: right;
}
.news-viewall a {
  font-family: var(--latin);
  font-size: 15px;
  letter-spacing: .1em;
  text-decoration: underline;
  text-underline-offset: .35em;
  transition: opacity .3s;
}
.news-viewall a:hover { opacity: .55; }

/* ============================================================
   採用
   ============================================================ */
.recruit {
  padding: 91px var(--inset) 0;
}
.recruit-card {
  position: relative;
  max-width: 1320px;
  margin-inline: auto;
  height: 536px;
  overflow: hidden;
  color: #fff;
  margin-bottom: -231px;
  z-index: 2;
  --mask-color: var(--bg);
}
.recruit-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recruit-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 1;
}
.recruit-head,
.recruit-desc,
.recruit-link,
.recruit-vertical { z-index: 2; }

.recruit-head {
  position: absolute;
  left: 127px;
  top: 70px;
  display: flex;
  align-items: baseline;
  gap: 28px;
}
.recruit-head h2 {
  font-size: clamp(40px, 4.44vw, 64px);
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: .02em;
}
.recruit-desc {
  position: absolute;
  left: 133px;
  top: 192px;
  width: min(446px, 70%);
  font-size: 20px;
  line-height: 2.25;
  letter-spacing: .02em;
}
.recruit-link {
  position: absolute;
  left: 133px;
  top: 368px;
}
.recruit-vertical {
  position: absolute;
  right: 95px;
  top: 58px;
  writing-mode: vertical-rl;
  font-family: var(--serif2);
  font-size: 20px;
  line-height: 1.75;
  letter-spacing: .05em;
}

/* ============================================================
   フッター
   ============================================================ */
.footer {
  background: var(--ink);
  color: #fff;
  /* 採用バナー(.recruit-card)が231px食い込むため、上余白はその分を含める（見た目の隙間は約41px） */
  padding: 272px var(--inset) 0;
}
.footer-inner {
  position: relative;
  padding-inline: 0;
  padding-bottom: 48px;
}

.contact-pill {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 104px;
  /* 上の採用バナー(.recruit-card)と同じ幅に揃える */
  max-width: 1320px;
  margin-inline: auto;
  border: 1px solid #fff;
  border-radius: 999px;
  padding: 0 72px 0 84px;
}
/* ホバーで白が左から右へ */
.contact-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: translateX(-101%);
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}
.contact-pill:hover::before { transform: none; }
.contact-pill span {
  position: relative;
  transition: color .45s;
}
.contact-pill:hover span { color: var(--ink); }
.contact-pill-jp {
  font-size: clamp(20px, 1.94vw, 28px);
  letter-spacing: .05em;
}
.contact-pill-en {
  font-family: var(--serif2);
  font-size: 17px;
  letter-spacing: .05em;
}

/* 本体: ロゴ ／ ショップ・直営店 ／ ナビ・SNS の3カラム（余白少なめ） */
.f-body {
  margin-top: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "brand side"
    "info  side";
  gap: 44px 64px;
  align-items: start;
}
.f-brand { grid-area: brand; }
.f-info { grid-area: info; }
.f-side { grid-area: side; align-self: stretch; justify-content: space-between; }
.f-brand {
  width: fit-content;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity .3s;
}
.f-brand:hover { opacity: .7; }
.f-brand-mark { width: 82px; }
.f-brand-type { width: 111px; margin-top: 12px; }

.f-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 300px));
  gap: 32px 48px;
  font-family: var(--serif2);
}
.f-line {
  display: block;
  width: 40px;
  height: 1px;
  background: #fff;
}
.f-block-label {
  margin-top: 16px;
  font-family: var(--latin);
  font-size: 12px;
  letter-spacing: .22em;
  opacity: .6;
}
.f-shop {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 19px;
  line-height: 1.7;
}
.f-shop a { transition: opacity .3s; }
.f-shop a:hover { opacity: .6; }
.f-cart { width: 22px; }
.f-block-note {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.9;
  opacity: .75;
}
.f-store {
  margin-top: 10px;
  font-size: 19px;
  line-height: 1.7;
}
.f-address {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.9;
  opacity: .9;
}
.f-map { margin-top: 10px; }
.f-map a {
  font-size: 13px;
  line-height: 1.83;
  text-decoration: underline;
  text-underline-offset: .3em;
  transition: opacity .3s;
}
.f-map a:hover { opacity: .6; }

.f-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 40px;
}
.f-nav { position: static; }
.f-social {
  position: static;
  display: flex;
  align-items: center;
  gap: 26px;
}
.f-social img { height: 40px; width: auto; transition: opacity .3s; }
.f-social .f-ico-fb { height: 34px; }
.f-social .f-ico-x { height: 29px; }
.f-social a:hover img { opacity: .6; }

.f-bottom {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .25);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.f-copy {
  margin-top: 0;
  font-family: var(--serif2);
  font-size: 13px;
  line-height: 1.83;
  opacity: .8;
}

/* ============================================================
   ハンバーガーメニュー（スマホ）
   ============================================================ */
.menu-btn {
  display: none;
  position: fixed;
  top: 16px;
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(22, 22, 21, .88);
  border: none;
  cursor: pointer;
  z-index: 101;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.menu-btn span {
  display: block;
  width: 20px;
  height: 1px;
  background: #fff;
  transition: transform .35s, opacity .35s;
}
.menu-btn.open span:nth-child(1) { transform: translateY(4px) rotate(20deg); }
.menu-btn.open span:nth-child(2) { transform: translateY(-4px) rotate(-20deg); }

.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(22, 22, 21, .96);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 56px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
  color: #fff;
}
.menu-overlay.open { opacity: 1; pointer-events: auto; }
.menu-overlay-mark { width: 52px; flex: none; }
.menu-overlay nav { width: min(420px, 84vw); }

/* アコーディオン式メニュー（＋で下層を開閉） */
.m-nav {
  max-height: 62svh;
  overflow-y: auto;
  /* スクロールバーは見せない（スクロールは可能なまま） */
  scrollbar-width: none;
}
.m-nav::-webkit-scrollbar { display: none; }
.m-nav > li { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.m-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.m-row > a {
  flex: 1;
  display: block;
  padding: 15px 0;
}
.m-jp {
  display: block;
  font-size: 16px;
  letter-spacing: .12em;
}
.m-en {
  display: block;
  margin-top: 2px;
  font-family: var(--latin);
  font-size: 10px;
  letter-spacing: .18em;
  opacity: .5;
}
.m-toggle {
  width: 46px;
  height: 46px;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  flex: none;
}
.m-toggle span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 1px;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: transform .35s ease;
}
.m-toggle span:nth-child(2) { transform: translate(-50%, -50%) rotate(90deg); }
.m-nav li.open .m-toggle span:nth-child(2) { transform: translate(-50%, -50%) rotate(0deg); }
.m-sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height .45s ease;
}
.m-nav li.open .m-sub { max-height: 340px; }
.m-sub li a {
  display: block;
  padding: 10px 0 10px 16px;
  font-size: 13px;
  letter-spacing: .08em;
  opacity: .85;
}
.m-sub li:last-child a { padding-bottom: 18px; }

/* メニュー内のOEM相談ボタン */
.m-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: .14em;
}

/* ============================================================
   レスポンシブ
   ============================================================ */

/* ---- タブレット（〜1180px）: 数値をスケール ---- */
@media (max-width: 1180px) {
  /* FVコピー(左下)と重ならないよう、お知らせバナーを幅可変に */
  .fv-banner { width: min(557px, calc(54vw - 37px)); }

  .about-card { padding: 96px 40px 110px 120px; min-height: 0; }
  .about-label { left: 64px; top: 100px; }
  .about-title-1 { right: 120px; top: 100px; }
  .about-title-2 { right: 208px; top: 190px; }
  .about-body { width: min(500px, 55%); font-size: 15px; }
  .about-link { margin-left: 0; }
  .about-mark { width: 420px; right: 20px; bottom: -60px; }

  .business-head { padding-top: 190px; }
  .business-intro { padding-top: 40px; }
  .biz-cards { gap: 34px; }
  .biz-card { min-height: 0; grid-template-columns: 1fr 50%; }
  .biz-card,
  .biz-card:nth-of-type(2),
  .biz-card:nth-of-type(3) { position: relative; top: auto; }
  .biz-card-body {
    padding: 64px 32px 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .biz-title, .biz-desc, .biz-line, .biz-logo, .biz-card .btn-line {
    position: static;
    transform: none;
  }
  .biz-desc { margin-top: 40px; }
  .biz-line { margin-top: 56px; height: 110px; }
  .biz-logo { margin-top: 56px; }
  .biz-logo-inimu { width: 200px; }
  .biz-logo-nirsi { width: 150px; }
  .biz-card .btn-line { margin-top: 40px; }
  .biz-media { min-height: 560px; }

  .story { padding: 160px 0 130px; }
  .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .cases-grid.is-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-card-title { margin-top: 18px; }

  .news { padding-top: 120px; }
  .news-inner { grid-template-columns: 200px 1fr; }

  .recruit-head { left: 64px; }
  .recruit-desc { left: 70px; top: 170px; }
  .recruit-link { left: 70px; top: 340px; }
  .recruit-vertical { right: 48px; }

  .contact-pill { height: 96px; padding: 0 56px; }
  .f-body { grid-template-columns: 1fr; grid-template-areas: "brand" "info" "side"; gap: 40px; }
  .f-side { align-items: flex-start; gap: 28px; }
  .footer { padding-top: 272px; }
}

/* ---- スマホ（〜860px） ---- */
@media (max-width: 860px) {
  .menu-btn { display: flex; }

  /* FV */
  .fv-nav { display: none; }
  .gnav { padding: 16px 16px 0; }
  .gnav-mark { width: 58px; }
  .gnav-mark-w img:first-child,
  .gnav-mark-b img:first-child { width: 30px; }
  .gnav-mark-w img:last-child,
  .gnav-mark-b img:last-child { width: 54px; }
  .fv-brand-mark { width: 56px; }
  .fv-brand-type { width: 80px; }
  .fv-scroll { font-size: 15px; top: 21%; }
  .fv-tagline { line-height: 2.1; }
  /* コピーはお知らせバナー（bottom:110px・高さ84px）の上に px で置き、画面高さに関わらず重ならないようにする（No.33） */
  .fv-copy { top: auto; bottom: 212px; }
  .fv-banner {
    left: 16px;
    right: 16px;
    bottom: 110px;
    width: auto;
    height: 84px;
    padding: 0 14px 0 16px;
    gap: 14px;
  }
  .fv-banner-thumb { width: 90px; height: 60px; }
  .fv-banner-text { font-size: 12px; }
  .fv-cta {
    width: 92px;
    height: 92px;
    right: 14px;
    bottom: 14px;
    gap: 5px;
  }
  .fv-cta-text { font-size: 12px; }
  .fv-cta-arrow { font-size: 12px; }

  /* 私たちについて */
  .about-card {
    margin-top: -44px;
    padding: 72px 24px 88px;
  }
  .about-label {
    left: 10px;
    top: 76px;
  }
  .about-titles {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 22px;
    padding-right: 6px;
  }
  .about-titles > span { position: static; }
  .about-title-2 { margin-top: 64px; }
  .about-body {
    width: 100%;
    margin-top: 56px;
    padding-left: 16px;
    font-size: 15px;
    line-height: 2.1;
  }
  .about-link { margin: 72px 0 0 16px; }
  .about-mark { width: 280px; right: -30px; bottom: -50px; }

  /* 事業内容 */
  .business-bg { height: 760px; }
  .business-head {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    padding-top: 120px;
    padding-bottom: 48px;
  }
  .business-title { margin-left: 8px; grid-row: 1; grid-column: 1; }
  /* （BUSINESS)は右寄せ・開始高さを「事」と揃える */
  .business-intro { display: contents; }
  .business-intro .latin-label { grid-row: 1; grid-column: 2; justify-self: end; }
  .business-intro-text {
    grid-row: 2;
    grid-column: 1 / -1;
    margin-top: 36px;
    font-size: 15px;
    line-height: 2;
  }

  .biz-cards { gap: 24px; }
  .biz-card { grid-template-columns: 1fr; }
  .biz-media {
    order: -1;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .biz-card-body { padding: 48px 24px 64px; }
  .biz-desc { margin-top: 24px; font-size: 14px; }
  .biz-line { margin-top: 40px; height: 72px; }
  .biz-logo { margin-top: 40px; }
  .biz-logo-inimu { width: 160px; }
  .biz-logo-nirsi { width: 130px; }
  .biz-card .btn-line { margin-top: 32px; height: 48px; } /* 幅はファイル末尾のスマホ共通ルール（文字数に応じて可変） */

  /* 人と物語 */
  .story { padding: 120px 0 100px; }
  .story-head {
    height: auto;
    display: grid;
    grid-template-columns: 1fr auto auto 1fr;
    gap: 0 8px;
  }
  .story-title-1, .story-title-2 { position: static; }
  .story-title-1 { grid-column: 3; grid-row: 1; }
  .story-title-2 { grid-column: 2; grid-row: 1; margin-top: 64px; }
  .story-label { position: static; grid-column: 1 / -1; grid-row: 2; text-align: left; margin-top: 32px; }
  .story-more {
    position: static;
    display: block;
    width: fit-content;
    margin: 36px 0 0 auto;
    font-size: 16px;
  }
  .story-grid { margin-top: 48px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 12px; }
  .story-card-title { margin-top: 14px; font-size: 14px; }
  .story-card-cat { margin-top: 4px; font-size: 12px; }

  /* お知らせ */
  .news { padding-top: 100px; }
  .news-inner { grid-template-columns: 1fr; }
  /* （NEWS)は右端・開始高さを「お」と揃える */
  .news-label { display: flex; align-items: flex-start; justify-content: space-between; }
  .news-label .latin-label { margin: 0; }
  .news-list { margin-top: 32px; margin-right: 0; }
  .news-row { padding: 20px 56px 24px 0; }
  .nw-rows .news-row { grid-template-columns: 104px 1fr; gap: 14px; }
  .news-row-title { font-size: 16px; -webkit-line-clamp: 2; }
  .news-row-date { font-size: 12px; }
  .news-row .circle-arrow { right: 8px; }
  .news-viewall { margin-top: 32px; }

  /* 採用 */
  .recruit { padding-top: 72px; }
  .recruit-card {
    height: auto;
    min-height: 580px;
    margin-bottom: -120px;
    display: flex;
    flex-direction: column;
    padding: 56px 24px 64px;
  }
  .recruit-head,
  .recruit-desc,
  .recruit-link { position: relative; left: auto; top: auto; }
  .recruit-head { gap: 16px; }
  /* 縦書き「一緒に働く仲間を」を目立たせるため、説明とボタンは下へ */
  .recruit-desc { margin-top: 116px; width: min(446px, 82%); font-size: 15px; line-height: 2.1; }
  .recruit-link { margin-top: 72px; width: min(420px, 88%); }
  .recruit-vertical {
    right: 22px;
    top: 48px;
    font-size: 18px;
    line-height: 1.75;
  }

  /* フッター */
  .footer { padding-top: 168px; } /* スマホ: 食い込み120px + 隙間48px */
  .footer-inner { padding-bottom: 48px; }
  .contact-pill { height: 88px; padding: 0 32px; }
  .contact-pill-en { font-size: 14px; }
  .f-brand { margin-top: 64px; }
  .f-brand-mark { width: 64px; }
  .f-brand-type { width: 92px; }
  .f-nav { margin-top: 0; }
  .f-nav .h-nav {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 14px;
  }
  .f-nav .h-nav > li { margin: 0 13px; }
  .f-nav .h-nav a { font-size: 14px; }
  .f-info { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .f-shop { font-size: 17px; }
  .f-store { font-size: 16px; }
  .f-address { font-size: 13px; }
  .f-social { gap: 22px; }
  .f-social img { height: 34px; }
  .f-social .f-ico-fb { height: 29px; }
  .f-social .f-ico-x { height: 25px; }
  .f-bottom { margin-top: 36px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .f-copy { font-size: 12px; }
}

/* ---- スクリーンショット検証用（?sshot付きアクセス時のみ） ---- */
.sshot { scroll-behavior: auto; }
.sshot .fv { height: 1062px !important; min-height: 0 !important; }
.sshot [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
.sshot .fv-brand, .sshot .fv-nav, .sshot .fv-nav-mark, .sshot .fv-scroll,
.sshot .fv-tagline, .sshot .fv-copy, .sshot .fv-banner, .sshot .fv-cta { animation: none !important; }
.sshot .txt-reveal .line-inner { transform: none !important; transition: none !important; }
.sshot .txt-type .ch { opacity: 1 !important; transition: none !important; }
.sshot .biz-line { transform: none !important; animation: none !important; }
.sshot .mask-reveal::after { display: none !important; }
.sshot .mask-reveal img, .sshot .mask-reveal video { transform: none !important; }
.sshot .biz-card { position: relative !important; top: auto !important; }
.sshot .biz-cards { gap: 34px !important; }
/* 追従ボタンは全体キャプチャ時のみFV下端に置く */
.sshot .fv-cta { position: absolute; bottom: -20px; }
@media (max-width: 860px) {
  .sshot .fv { height: 812px !important; }
}

/* ---- 小さめスマホ（〜400px） ---- */
@media (max-width: 400px) {
  .fv-tagline { font-size: 12px; }
  .fv-copy { font-size: 34px; }
  .about-titles > span { font-size: 24px; }
  .biz-title { font-size: 48px; }
}

/* ============================================================
   下層ページ共通
   ============================================================ */
/* 下層ページのヘッダー色はJSが .gnav-dark を付与して制御
   （採用バナーなど暗い背景の上では白に切り替わる） */

/* ページヘッダー */
.l-hero {
  position: relative;
  padding: 190px 0 90px;
  /* 紋章が途切れないようoverflowは開放(横のはみ出しはbodyでクリップ) */
}
.l-hero .container { position: relative; }
.breadcrumb {
  position: relative;
  z-index: 1;
  font-size: 12px;
  letter-spacing: .08em;
  opacity: .65;
  text-align: right; /* パンくずは右寄せ */
}
.breadcrumb a { transition: opacity .3s; }
.breadcrumb a:hover { opacity: .5; }
.breadcrumb span { margin: 0 10px; }
.l-hero-label { margin-top: 56px; }
.l-hero-title {
  margin-top: 10px;
  font-size: clamp(38px, 4.44vw, 64px);
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: .04em;
}
.l-hero-sub {
  margin-top: 6px;
  font-size: 15px;
  letter-spacing: .08em;
  opacity: .8;
}
.l-hero-mark {
  position: absolute;
  right: -70px;
  top: auto;
  bottom: -70px; /* パンくず(右上)と被らないよう右下に配置 */
  width: 320px;
  pointer-events: none;
  z-index: -1; /* 次セクションのカード類より背面に */
}

/* 白カード（TOPのaboutカードと同じ#fafafaに統一） */
.l-card {
  position: relative;
  max-width: 1320px;
  margin-inline: auto;
  background: var(--card);
}

/* メッセージ */
.l-message { padding: 0 var(--inset); }
.l-message .l-card { padding: 110px 60px 120px 175px; }
.l-side-label {
  position: absolute;
  left: 116px;
  top: 110px;
  writing-mode: vertical-rl;
  font-family: var(--latin);
  font-size: 15px;
  letter-spacing: .1em;
  line-height: 1.36;
}
.l-vtitle { letter-spacing: .1em; }
.l-message .l-vtitle {
  position: absolute;
  right: 64px;
  top: 110px;
}
.l-message-grid {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 430px);
  gap: 72px;
}
.l-message-body {
  font-size: 17px;
  line-height: 2.2;
  letter-spacing: .03em;
  max-width: 620px;
}
.l-message-body p + p { margin-top: 2.2em; }
.l-message-sign { margin-top: 56px; font-size: 17px; letter-spacing: .1em; }
.l-message-media {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 150px;
}
.ph-media {
  aspect-ratio: 4 / 3;
  background: var(--bg);
  border: 1px solid rgba(22, 22, 21, .14);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph-media-video { aspect-ratio: 16 / 9; }
.ph-media span {
  font-size: 12px;
  letter-spacing: .12em;
  opacity: .5;
}
/* プレースホルダーに実写真を入れた場合は枠いっぱいに表示 */
.ph-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* YouTube埋め込み */
.yt-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #050505;
}
.yt-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 汎用セクション（縦見出し + コンテンツ） */
.l-section { padding-top: 130px; }
.l-grid {
  display: grid;
  grid-template-columns: 335px 1fr;
  align-items: start;
}
.l-side .latin-label { margin-top: 30px; }

/* 概要・沿革の表 */
.spec-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 24px;
  align-items: center;
  padding: 26px 8px 26px 0;
  border-bottom: 1px solid rgba(22, 22, 21, .35);
}
.spec-row:first-child { border-top: 1px solid rgba(22, 22, 21, .35); }
.spec dt {
  font-size: 15px;
  letter-spacing: .08em;
  opacity: .85;
}
.spec dd {
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .03em;
}
.history .spec-row { grid-template-columns: 120px 1fr; }
.history dt {
  font-family: var(--latin);
  font-size: 17px;
  letter-spacing: .1em;
}
/* 未確定項目のプレースホルダー */
.ph-bar {
  display: inline-block;
  height: 16px;
  width: 50%;
  background: rgba(22, 22, 21, .07);
  vertical-align: middle;
}

/* アクセス */
.l-address {
  font-size: 16px;
  line-height: 2.1;
  letter-spacing: .03em;
}
.l-map { margin-top: 36px; }
.l-map iframe {
  display: block;
  width: 100%;
  height: 440px;
  border: 0;
  filter: grayscale(1) contrast(.98);
}

/* 会社案内ダウンロード */
.l-pamphlet { padding: 150px var(--inset) 160px; }
.l-pamphlet-in {
  text-align: center;
  padding: 96px 24px 104px;
}
.l-pamphlet-title {
  margin-top: 14px;
  font-size: clamp(30px, 2.9vw, 42px);
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1.5;
}
.l-pamphlet-text {
  margin-top: 22px;
  font-size: 15px;
  line-height: 2.2;
  letter-spacing: .04em;
}
.l-pamphlet-btn { margin: 44px auto 0; }

/* 事業内容ページFV（TOPの事業内容ヘッダーを踏襲・煙の動画背景） */
.sv-hero { padding: 150px 0 70px; }
.sv-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sv-hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
}
.sv-hero .breadcrumb { position: relative; z-index: 1; }
.sv-hero-grid {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 70px;
  min-height: 380px;
}
.sv-hero-title { margin-left: 24px; }
.sv-hero-intro {
  width: min(446px, 100%);
  margin-top: 140px;
}
.sv-hero-text {
  margin-top: 13px;
  font-size: 17px;
  line-height: 2.2;
  letter-spacing: .03em;
}

/* 事業内容（Service）一覧 */
.sv-section { padding-top: 110px; }
.sv-section:first-of-type { padding-top: 70px; }
.sv-card {
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 46%);
  gap: 72px;
  padding: 64px;
  align-items: stretch;
}
.sv-body {
  grid-column: 1;
  grid-row: 1;
  padding: 12px 0 8px 16px;
  display: flex;
  flex-direction: column;
}
.sv-media {
  grid-column: 2;
  grid-row: 1;
  aspect-ratio: auto; /* ph-mediaの比率指定を無効化し、カードの高さにフィットさせる */
  height: auto;
  min-height: 440px;
  align-self: stretch;
  position: relative;
  overflow: hidden;
}
.sv-media video,
.sv-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.3s cubic-bezier(.3, 0, .2, 1);
}
.sv-card:hover .sv-media video,
.sv-card:hover .sv-media > img { transform: scale(1.05); }
/* タイトルは縦書き（左）、テキストは空間をあけて下に */
.sv-titlebox {
  position: relative; /* タイトル(左)と番号(右端)を同じ行ボックスに置く */
  min-height: 263px;  /* 番号の位置まで高さを確保し、下の本文と重ならないようにする */
}
.sv-title {
  writing-mode: vertical-rl;
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .14em;
}
/* 事業タイトルは日本語のまま横書きで表示 */
.sv-title-h { writing-mode: horizontal-tb; }
/* 番号は大きく、本文の右端に右揃え（高さは全カード共通＝01の位置基準） */
.sv-no {
  position: absolute;
  right: 0;
  top: 197px;
  font-family: var(--latin);
  font-size: clamp(44px, 4.6vw, 66px);
  line-height: 1;
  letter-spacing: .06em;
}
/* テキストとボタンはカード下側に寄せる（右端は番号と揃う） */
.sv-text {
  margin-top: auto;
  padding-top: 48px;
  font-size: 16px;
  line-height: 2.1;
  letter-spacing: .03em;
}
.sv-btn { margin-top: 40px; }

/* 会社案内・総合カタログ */
.sv-catalog { padding: 130px 0 160px; }
.sv-catalog-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.cat-card {
  padding: 64px 56px 72px;
  text-align: center;
}
.cat-title {
  margin-top: 12px;
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.5;
}
.cat-text {
  margin-top: 20px;
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: .04em;
}
.cat-btn { margin: 36px auto 0; }

/* 会社案内・カタログ ダウンロード（白枠なし・左右に散らす配置） */
.dlb {
  position: relative;
  max-width: 1320px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  padding: 40px 0 80px;
  min-height: 460px;
}
.dlb-head {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  gap: 22px;
  position: relative;
  z-index: 1;
  padding-left: 24px;
}
.dlb-head .v-title { font-size: clamp(30px, 3.2vw, 46px); }
.dlb-label {
  writing-mode: vertical-rl;
  font-family: var(--latin);
  font-size: 13px;
  letter-spacing: .12em;
  padding-top: 6px;
}
.dlb-body {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 1;
  justify-self: end;
  width: min(600px, 88%);
  margin-top: 120px;
}
.dlb-text {
  font-size: 16px;
  line-height: 2.2;
  letter-spacing: .04em;
  word-break: auto-phrase; /* 「製品ラ／インナップ」のような語の途中で折り返さない（対応ブラウザのみ） */
}
.dlb-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 56px;
}
/* ボタンを「会社案内」「総合カタログ」などのグループに分けて縦に並べる場合
   （.dlb-btns.dlb-btns-groups > .dlb-group > .dlb-group-title + .dlb-group-btns） */
.dlb-btns.dlb-btns-groups {
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
.dlb-group { max-width: 100%; }
.dlb-group-title {
  margin-bottom: 12px;
  font-size: 13px;
  letter-spacing: .12em;
  line-height: 1.6;
}
.dlb-group-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}
.dlb-mark {
  position: absolute;
  left: 90px;
  bottom: -60px;
  width: 440px;
  z-index: 0;
  pointer-events: none;
}

/* 自社ブランド事業 */
.bd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.bd-card {
  background: var(--card);
  padding: 40px 40px 52px;
}
/* ブランド名は横書き: [ロゴ] ブランド名 英字 の並び。下に写真→テキスト */
.bd-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 2px 4px 26px 4px;
}
.bd-logo {
  height: 42px;
  width: auto;
  align-self: center;
  flex: none;
}
.bd-name {
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .14em;
}
.bd-name-en {
  font-family: var(--latin);
  font-size: 12px;
  letter-spacing: .18em;
  opacity: .6;
}
/* タイトルをロゴ画像にする場合 */
.bd-name-logo img {
  height: 84px;
  width: auto;
  display: block;
}
/* 横長ワードマーク(PERFUMERS)は高さを抑えつつ、他カードと見出し高さを揃える */
.bd-name-logo-wide {
  display: flex;
  align-items: center;
  min-height: 84px;
}
.bd-name-logo-wide img { height: 56px; }
.bd-media {
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.bd-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.3s cubic-bezier(.3, 0, .2, 1);
}
.bd-card:hover .bd-media img { transform: scale(1.05); }
.bd-text {
  margin-top: 24px;
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: .03em;
}
.bd-btn {
  margin-top: 32px;
  width: 230px;
  height: 48px;
}

/* 関連する取り組み */
.rel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
}
/* 関連は白枠なし・ベージュ地に直置き */
.rel-card { padding: 8px 0 0; }
.rel-title {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.5;
}
.rel-text {
  margin-top: 14px;
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: .03em;
}
.rel-link {
  margin-top: 40px;
  width: 100%;
}
.rel-link .link-line-text { font-size: 17px; }

/* ECバンド（ダーク） */
.cta-band-wrap { padding-top: 150px; }
.cta-band {
  background: var(--ink);
  color: #fff;
  text-align: center;
  padding: 96px 24px 104px;
}
.cta-band-copy {
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: .1em;
  line-height: 1.8;
}
.cta-band-sub {
  margin-top: 18px;
  font-family: var(--serif2);
  font-size: 14px;
  letter-spacing: .08em;
  opacity: .85;
}
.cta-band-btn {
  margin: 48px auto 0;
  width: 280px;
  border-color: rgba(255, 255, 255, .8);
  color: #fff;
}
.cta-band-btn:hover { background: #fff; color: var(--ink); }

/* 共創OEMページ */
.btn-fill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 56px;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 15px;
  letter-spacing: .1em;
  transition: background .35s, color .35s;
}
.btn-fill:hover { background: transparent; color: var(--ink); }

/* FV: TOPのaboutカード構成を踏襲 */
.oem-hero { padding: 150px var(--inset) 0; }
.oem-hero .container { position: relative; z-index: 1; padding-inline: 0; }
.oem-fv-card {
  position: relative;
  max-width: 1320px;
  margin: 26px auto 0;
  padding: 120px 0 130px 115px;
  min-height: 860px;
}
.oem-fv-card .l-side-label { left: 0; top: 120px; }
.oem-catch > span {
  position: absolute;
  writing-mode: vertical-rl;
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .12em;
  white-space: nowrap;
  z-index: 1;
}
.oem-catch-1 { right: 70px; top: 110px; }
.oem-catch-2 { right: 176px; top: 110px; }
.oem-catch-3 { right: 282px; top: 110px; }
.oem-fv-body {
  position: relative;
  z-index: 1;
  width: min(520px, 55%);
  margin-top: 430px; /* リード文とボタンはFV下部に */
}
.oem-fv-sub {
  font-size: 17px;
  line-height: 2.5;
  letter-spacing: .04em;
}
.oem-fv-body .btn-fill { margin-top: 72px; }
.oem-fv-mark {
  position: absolute;
  right: 40px;
  bottom: -70px;
  width: 430px;
  z-index: 0;
  pointer-events: none;
}

/* 中央ステートメント */
.oem-stmt { padding-top: 180px; text-align: center; }
.oem-lead {
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 400;
  line-height: 2;
  letter-spacing: .1em;
}
.oem-lead-text {
  margin-top: 28px;
  font-size: 16px;
  line-height: 2.4;
  letter-spacing: .04em;
}

/* 横見出し（縦見出しと交互に使う） */
.h-head {
  display: flex;
  align-items: baseline;
  gap: 22px;
  margin-bottom: 48px;
}
.h-head h2 {
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.5;
}

/* 価値: 漢数字のナラティブ行（段違い） */
.val-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 28px;
  align-items: start;
  border-top: 1px solid rgba(22, 22, 21, .35);
  padding: 46px 8px 50px 0;
}
.val-row:last-of-type { border-bottom: 1px solid rgba(22, 22, 21, .35); }
.val-no {
  font-family: var(--latin);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.1;
}
.val-title {
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .08em;
}
/* 価値03: 香・体験創出事業への独立リンク（本文とは別行・下線付き） */
.val-link {
  display: inline-block;
  margin-top: 18px;
  padding-bottom: 5px;
  font-size: 14px;
  letter-spacing: .12em;
  border-bottom: 1px solid var(--ink);
  transition: opacity .3s;
}
.val-link:hover { opacity: .5; }
.val-text {
  margin-top: 14px;
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: .03em;
  max-width: 560px;
}
/* 帯: ダークで緩急 */
.stmt-band {
  margin-top: 64px;
  background: var(--ink);
  color: #fff;
  text-align: center;
  padding: 44px 20px;
  font-size: clamp(16px, 1.5vw, 22px);
  letter-spacing: .1em;
  line-height: 1.9;
}

/* これまでのOEMとの違い */
.diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.diff-col-title {
  font-size: 16px;
  letter-spacing: .1em;
  margin-bottom: 16px;
}
.diff-box {
  padding: 28px 30px;
  margin-bottom: 14px;
}
.diff-box h3 {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .06em;
}
.diff-box p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.9;
  opacity: .8;
}
.diff-col-old .diff-box { background: rgba(22, 22, 21, .05); }
.diff-col-old { opacity: .7; }
.diff-col-new .diff-box {
  background: var(--ink);
  color: #fff;
}
.diff-col-new .diff-box p { opacity: .75; }

/* 実績 */
.case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.case-card { background: var(--card); padding: 28px 28px 36px; }
.case-title {
  margin-top: 24px;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: .1em;
}
.case-text {
  margin-top: 10px;
  font-size: 14px;
  line-height: 2;
  letter-spacing: .03em;
}
.stat-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.stat-tile {
  background: var(--card);
  text-align: center;
  padding: 38px 16px 40px;
}
.stat-num {
  font-family: var(--latin);
  font-size: 36px;
  letter-spacing: .08em;
  line-height: 1.2;
}
.stat-cap {
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: .06em;
  opacity: .8;
}

/* 基盤 */
.base-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 5;
  --mask-color: var(--bg);
}
.base-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 共創OEMを支える循環: 生産者・職人 → 当社 → 店舗・EC → 消費者 → 反応（指摘 No.56） */
.base-lead {
  margin-top: 26px;
  font-size: 14px;
  line-height: 2.1;
  letter-spacing: .04em;
}
.base-cycle { margin-top: 26px; }
.cycle-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  list-style: none;
}
.cycle-node {
  position: relative;
  background: var(--card);
  text-align: center;
  padding: 28px 14px 30px;
}
.cycle-node.is-hub {
  background: var(--ink);
  color: #fff;
}
.cycle-node h3 {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .06em;
}
.cycle-node p {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .04em;
  opacity: .8;
}
/* ボックスの間の矢印（右向き） */
.cycle-node + .cycle-node::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -17px;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  transform: translateY(-50%) rotate(45deg);
  opacity: .5;
}
/* 消費者の反応が生産者へ戻る行 */
.cycle-back {
  margin-top: 18px;
  padding: 15px 20px;
  border: .5px dashed rgba(22, 22, 21, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cycle-back::before {
  content: "";
  width: 8px;
  height: 8px;
  border-bottom: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
  transform: rotate(45deg);
  opacity: .5;
}
.cycle-back-title { font-size: 14px; letter-spacing: .08em; }
.cycle-back-text { font-size: 12px; letter-spacing: .04em; opacity: .8; }
.base-note {
  margin-top: 22px;
  text-align: center;
  font-size: 13px;
  letter-spacing: .06em;
  opacity: .7;
}

/* 流れ: 和モダンなタイムライン（ライン+ドット+STEPカード） */
.flow-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  list-style: none;
}
.flow-grid::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: .5px;
  background: rgba(22, 22, 21, .4);
}
.flow-step {
  position: relative;
  padding-top: 32px;
}
.flow-dot {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink);
}
.flow-card {
  background: var(--card);
  text-align: center;
  padding: 28px 10px 30px;
  height: 100%;
}
.flow-step-label {
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: .24em;
  opacity: .55;
}
.flow-no {
  margin-top: 6px;
  font-family: var(--latin);
  font-size: 30px;
  letter-spacing: .08em;
  line-height: 1;
}
.flow-name {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: .04em;
}

/* 事例(CMS予定) */
.cases-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.story-card { min-width: 0; } /* グリッドの列を内容の幅で広げない */
.story-card-title { overflow-wrap: anywhere; } /* 長い英単語の題名でも折り返す */
.cases-grid .story-card-cat { margin: 20px 0 0; }
.cases-grid .story-card-title { margin-top: 8px; font-size: 17px; }
/* 共創OEM「実績」が 4 件のときは 1 列に 4 枚並べる（3 列だと 1 枚だけ次の段に落ちるため） */
/* 4 列は PC だけ（1180px 以下の 2 列指定より後ろにあるため、media で囲まないと上書きしてしまう。指摘 No.103） */
@media (min-width: 1181px) {
  .cases-grid.is-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* 香・体験創出「実績」: 件数を超えた分は「もっと見る」を押すまで隠す（script.js の .js-works-more） */
.story-card.is-more-hidden { display: none; }
.works-more { margin-top: 56px; display: flex; justify-content: center; }
.works-more .btn-line { background: none; font-family: inherit; color: var(--ink); cursor: pointer; }
.works-more .btn-line:hover { background: var(--ink); color: #fff; }

/* FAQ */
.faq-item { border-top: 1px solid rgba(22, 22, 21, .4); }
.faq-item:last-child { border-bottom: 1px solid rgba(22, 22, 21, .4); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: .05em;
  color: var(--ink);
  padding: 24px 4px;
}
.faq-toggle { position: relative; width: 40px; height: 40px; flex: none; display: block; }
.faq-toggle span { background: var(--ink); }
.faq-item.open .faq-toggle span:nth-child(2) { transform: translate(-50%, -50%) rotate(0deg); }
.faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height .45s ease;
}
.faq-item.open .faq-a { max-height: 220px; }
/* FAQ回答内のテキストリンク: 下線で押せることを明示 */
.faq-a p a {
  text-decoration: underline;
  text-underline-offset: .3em;
  text-decoration-thickness: .5px;
  transition: opacity .3s;
}
.faq-a p a:hover { opacity: .5; }
.faq-a p {
  padding: 0 48px 26px 4px;
  font-size: 15px;
  line-height: 2;
  letter-spacing: .03em;
}

/* 2カラム: 体験空間 × OEM相談（TOP紙芝居カード踏襲） */
.duo-wrap { padding: 150px 0 0; }
.duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 33px;
}
.duo-card {
  background: #fff;
  text-align: center;
  padding-bottom: 72px;
}
.duo-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: none;
}
.duo-media img,
.duo-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.3s cubic-bezier(.3, 0, .2, 1);
}
.duo-card:hover .duo-media img,
.duo-card:hover .duo-media video { transform: scale(1.05); }
.duo-title {
  margin-top: 56px;
  font-size: clamp(28px, 2.9vw, 42px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .06em;
}
.duo-text {
  margin-top: 26px;
  font-family: var(--serif2);
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: .03em;
  padding: 0 24px;
}
.duo-line {
  display: block;
  width: 1px;
  height: 64px;
  background: rgba(22, 22, 21, .6);
  margin: 40px auto 0;
}
.duo-card .btn-line { margin: 40px auto 0; }

/* 体験空間: できること */
.abl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 項目（イベント・POPUP 削除。指摘 No.74） */
  gap: 24px;
}
.abl-card { background: var(--card); }
.abl-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.abl-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.3s cubic-bezier(.3, 0, .2, 1);
}
.abl-card:hover .abl-media img { transform: scale(1.05); }
.abl-body { padding: 28px 32px 40px; }
.abl-no {
  font-family: var(--latin);
  font-size: 26px;
  letter-spacing: .1em;
  line-height: 1;
}
.abl-title {
  margin-top: 18px;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1.6;
}
.abl-text {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: .03em;
  opacity: .85;
}

/* クロスリンクの実画像 */
.cross-media-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.cross-media-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.3s cubic-bezier(.3, 0, .2, 1);
}
.cross-card:hover .cross-media-img img { transform: scale(1.05); }

/* 体験空間クロスリンク */
.cross-label {
  font-size: 15px;
  letter-spacing: .08em;
  opacity: .8;
}
.cross-card {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(300px, 44%) 1fr;
  gap: 56px;
  padding: 48px;
  align-items: center;
}
.cross-media { aspect-ratio: 16 / 9; }
.cross-text {
  font-size: 16px;
  line-height: 2.1;
  letter-spacing: .03em;
}
.cross-body .btn-line { margin-top: 36px; }

/* 人と物語 一覧 */
.st-hero { padding-bottom: 0; }
.st-hero .story-head { margin-top: 26px; }
.st-filter-wrap { padding-top: 48px; }
.st-filter-label {
  font-size: 12px;
  letter-spacing: .14em;
  opacity: .6;
}
.st-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0 30px;
}
.st-cat {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: .08em;
  color: var(--ink);
  background: none;
  border: 1px solid var(--ink); /* .5px だとスマホで枠の一部が消える（2026-09-24 先方指摘。サイト全体の .5px の線を 1px に） */
  border-radius: 999px;
  padding: 12px 28px;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.st-cat.is-active {
  background: var(--ink);
  color: #fff;
}
/* hover の黒塗りはマウスのある端末だけ（タッチ端末では押したあと黒いまま残るため） */
@media (hover: hover) {
  .st-cat:hover { background: var(--ink); color: #fff; }
}
.st-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.st-tag {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink);
  background: none;
  border: 1px solid rgba(22, 22, 21, .35);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  transition: border-color .3s, color .3s;
}
/* 絞り込みはリンク（<a>）。サーバー側で絞り込む */
a.st-cat,
a.st-tag { display: inline-block; text-decoration: none; }
.st-tag.is-active {
  border-color: var(--accent);
  color: var(--accent);
}
@media (hover: hover) {
  .st-tag:hover { border-color: var(--accent); color: var(--accent); }
}
.st-list { padding-top: 72px; }
.st-grid { row-gap: 56px; }
/* 新着の行は .nw-rows .news-row { display: grid } が後ろにあるため、同じ強さだと上書きされる（指摘 No.26） */
.st-item.is-hidden,
.nw-rows .news-row.st-item.is-hidden { display: none; }
/* 記事が0件のときに一覧の場所に出す一文（人と物語・お知らせの一覧） */
.st-empty {
  font-size: 16px;
  line-height: 2;
  letter-spacing: .04em;
  opacity: .7;
}

/* ニュース一覧 */
.nw-hero { padding-bottom: 0; }
.nw-head { margin-top: 26px; }
.nw-filter { padding-top: 44px; }
/* お知らせの記事検索（キーワード。/news/?q=…。サーバー側で絞り込む） */
.nw-search {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 560px;
  margin: 0 0 6px;
}
.nw-search-input {
  flex: 1;
  min-width: 0;
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: 12px 4px;
  -webkit-appearance: none;
  appearance: none;
}
.nw-search-input::placeholder { color: rgba(22, 22, 21, .45); }
.nw-search-input:focus { outline: none; border-bottom-color: var(--accent); }
.nw-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.nw-search-btn { flex: none; padding: 11px 26px; }
.st-tags + .st-search-label { margin-top: 30px; } /* 人と物語: タグの列のあとに検索欄が続くとき */
.nw-search-result {
  margin-top: 22px;
  font-size: 13px;
  letter-spacing: .06em;
  line-height: 1.8;
}
.nw-search-clear { margin-left: 1.2em; text-decoration: underline; text-underline-offset: .25em; opacity: .7; }
.nw-search-clear:hover { opacity: 1; }
@media (max-width: 860px) {
  .nw-search { max-width: none; }
  .nw-search-input { font-size: 16px; } /* iOS は 16px 未満の入力欄でページが拡大される */
}
.nw-list { padding-top: 56px; }
.nw-rows .news-row {
  padding-left: 4px;
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 32px;
  align-items: center;
}
.news-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #fff;
  position: relative;
  overflow: hidden;
  --mask-color: var(--bg);
}
.news-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.3s cubic-bezier(.3, 0, .2, 1);
}
.nw-rows .news-row:hover .news-thumb img { transform: scale(1.06); }
.news-row-body { display: block; }
.news-row-cat {
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--accent);
  margin-bottom: 6px;
}

/* ページネーション */
.pager {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 80px;
}
.pager a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--latin);
  font-size: 15px;
  border: 1px solid rgba(22, 22, 21, .4);
  transition: background .3s, color .3s, border-color .3s;
}
.pager-dots {
  display: flex;
  align-items: flex-end;
  padding-bottom: 8px;
  font-size: 14px;
  opacity: .6;
}
.pager a.is-current,
.pager a:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* 記事詳細（人と物語・ニュース共通テンプレート） */
.art-hero { padding-top: 150px; }
.art-head { margin-top: 34px; }
.art-cat {
  display: inline-block;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 7px 18px;
  transition: background .3s, color .3s;
}
.art-cat:hover { background: var(--accent); color: #fff; }
.art-cat + .art-cat { margin-left: 8px; } /* お知らせの記事で、カテゴリの横に掲載先のタグを並べるとき */
.art-title {
  margin-top: 22px;
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .06em;
}
.art-meta {
  margin-top: 14px;
  font-size: 14px;
  letter-spacing: .08em;
  opacity: .7;
}
.art-date { font-family: var(--latin); font-size: 15px; }
.art-sep { margin: 0 10px; }
.art-eyecatch {
  margin-top: 40px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 7;
}
.art-eyecatch img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.art-body {
  max-width: 840px;
  margin: 72px auto 0;
  padding: 0 var(--inset);
  font-size: 16px;
  line-height: 2.4;
  letter-spacing: .04em;
}
.art-body p + p { margin-top: 2em; }
/* WordPress本文用の見出しスタイル */
.art-body h2 {
  position: relative;
  margin: 3em 0 1.4em;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.8;
  padding-left: 24px;
}
.art-body h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  bottom: .3em;
  width: 1px;
  background: var(--ink);
}
.art-body h3 {
  margin: 2.6em 0 1.1em;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.8;
}
.art-body h3::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--ink);
  vertical-align: middle;
  margin-right: 14px;
}
.art-fig { margin: 2.6em 0; }
.art-fig-ph {
  display: flex;
  aspect-ratio: 16 / 9;
}
.art-fig img { width: 100%; display: block; }
/* CMS 本文の画像・埋め込み（旧サイトから移した記事を含む）。
   本文の <img> には width / height 属性が付いている（327 件中 237 件）。max-width: 100% だけだとスマホで幅だけ縮み、
   高さは属性の値のまま残って縦横比がずれるため、height: auto を付ける。
   キャプション付きの画像（.wp-caption）は style="width: 602px" が付くので、幅を画面に収める */
.art-body img { height: auto; }
.art-body img[style*="height"] { height: auto !important; } /* 本文に style="height: 400px" と直接書かれた画像 */
.art-body .wp-caption { max-width: 100% !important; margin: 2.2em auto; }
.art-body .wp-caption img { margin-inline: auto; }
.art-body .wp-caption-text,
.art-body figcaption {
  margin-top: .8em;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: .04em;
  text-align: center;
  opacity: .7;
}
.art-body .aligncenter { margin-left: auto; margin-right: auto; }
.art-body .alignleft { float: left; max-width: 50%; margin: .5em 2em 1.2em 0; }
.art-body .alignright { float: right; max-width: 50%; margin: .5em 0 1.2em 2em; }
.art-body::after { content: ""; display: block; clear: both; }
.art-body iframe,
.art-body embed,
.art-body object { max-width: 100%; }
.art-body iframe[src*="youtube"],
.art-body iframe[src*="youtu.be"],
.art-body iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.art-body table { max-width: 100%; border-collapse: collapse; }
.art-pdf a { text-decoration: underline; text-underline-offset: .25em; } /* [pdf-embedder] の代わりに出す PDF へのリンク */
@media (max-width: 860px) {
  /* スマホでは回り込みをやめて 1 列に（幅指定の回り込みは本文が細くなりすぎる） */
  .art-body .alignleft,
  .art-body .alignright { float: none; max-width: 100%; margin: 1.8em auto; }
  .art-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.art-fig figcaption {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .06em;
  opacity: .6;
}

/* この記事の商品 */
.art-goods { padding-top: 120px; }
.goods-card {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(280px, 40%) 1fr;
  gap: 52px;
  padding: 48px;
  align-items: center;
}
.goods-media { aspect-ratio: 16 / 10; }
.goods-media-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.goods-media-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.3s cubic-bezier(.3, 0, .2, 1);
}
.goods-card:hover .goods-media-img img { transform: scale(1.05); }
.art-news-rows { margin-top: 18px; }
.goods-tag {
  width: fit-content;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 6px 16px;
}
.goods-text {
  margin-top: 18px;
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: .03em;
}
.goods-btn { margin-top: 32px; width: 250px; height: 52px; }

/* 関連記事・一覧へ戻る */
.art-related { padding-top: 120px; }
.art-related-grid { margin-top: 18px; }
.back-band-wrap { padding-top: 110px; }
.back-band {
  text-align: center;
  padding: 24px 0 0;
}
.back-band-text {
  font-size: 16px;
  letter-spacing: .1em;
}
.back-band .btn-fill { margin: 32px auto 0; width: 250px; }

/* 下層: タブレット */
@media (max-width: 1180px) {
  .l-message .l-card { padding: 80px 40px 90px 120px; }
  .l-side-label { left: 64px; top: 80px; }
  .l-message .l-vtitle { right: 40px; top: 80px; }
  /* 中間幅は2カラムをやめて写真・動画を本文の下へ。本文は下げ、MESSAGEは上のまま本文の左ラインに揃える */
  .l-message-grid { grid-template-columns: 1fr; gap: 56px; margin-top: 150px; }
  .l-message .l-side-label { left: 120px; }
  .l-message-media { padding-top: 0; max-width: 520px; }
  .l-grid { grid-template-columns: 220px 1fr; }
  .sv-card { gap: 40px; padding: 40px; }
}

/* 下層: スマホ */
@media (max-width: 860px) {
  .l-hero { padding: 120px 0 48px; }
  .l-hero-label { margin-top: 30px; }
  .l-hero-sub { font-size: 13px; }
  .l-hero-mark { width: 190px; right: -46px; top: auto; bottom: -50px; }

  .l-message .l-card { padding: 64px 24px 72px; }
  .l-side-label { left: 10px; top: 64px; }
  /* 中間幅用の left:120px をスマホでは打ち消す */
  .l-message .l-side-label { left: 10px; }
  .l-message .l-vtitle {
    position: static;
    display: block;
    width: fit-content;
    margin-left: auto;
    padding-right: 6px;
  }
  .l-message-grid { grid-template-columns: 1fr; gap: 40px; margin-top: 40px; }
  .l-message-body { font-size: 15px; line-height: 2.1; padding-left: 16px; }
  .l-message-sign { margin-top: 40px; font-size: 15px; }
  .l-message-media { padding-top: 0; gap: 16px; }

  .l-section { padding-top: 88px; }
  .l-grid { grid-template-columns: 1fr; }
  /* 見出しは左、（ラベル)は右端・同じ高さ */
  .l-side {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .l-side .latin-label { margin-top: 0; }
  .l-content { margin-top: 36px; }

  .spec-row {
    grid-template-columns: 96px 1fr;
    gap: 14px;
    padding: 18px 4px 18px 0;
  }
  .spec dt { font-size: 13px; }
  .spec dd { font-size: 14px; }
  .history .spec-row { grid-template-columns: 72px 1fr; }
  .history dt { font-size: 15px; }

  .l-map { margin-top: 24px; }
  .l-map iframe { height: 300px; }

  /* 記事詳細 */
  .art-hero { padding-top: 104px; }
  .art-head { margin-top: 24px; }
  .art-title { line-height: 2; }
  .art-eyecatch { margin-top: 24px; aspect-ratio: 16 / 9; }
  .art-body { margin-top: 44px; font-size: 15px; line-height: 2.2; }
  .art-goods { padding-top: 80px; }
  .goods-card { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px 40px; }
  .goods-btn { height: 48px; }
  .art-related { padding-top: 80px; }
  .back-band-wrap { padding-top: 72px; }
  .back-band { padding: 8px 0 0; }

  /* 共創OEM */
  .oem-hero { padding-top: 104px; }
  .oem-fv-card { padding: 64px 24px 80px; min-height: 0; }
  .oem-fv-card .l-side-label { left: 10px; top: 64px; }
  .oem-catch { display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: 14px; padding-right: 4px; }
  .oem-catch > span { position: static; font-size: 22px; }
  .oem-catch-2 { margin-top: 0; }
  .oem-catch-3 { margin-top: 0; }
  .oem-fv-body { width: 100%; margin-top: 44px; padding-top: 0; }
  .oem-fv-sub { font-size: 15px; line-height: 2.2; }
  .oem-fv-body .btn-fill { margin-top: 40px; width: 250px; height: 50px; }
  .oem-fv-mark { width: 240px; right: -50px; bottom: -50px; }
  .oem-stmt { padding-top: 100px; text-align: left; }
  .oem-lead-text { font-size: 14px; line-height: 2.1; }
  .h-head { margin-bottom: 28px; gap: 14px; }
  .val-row { grid-template-columns: 64px 1fr; gap: 16px; padding: 28px 4px 32px 0; }
  .val-no { font-size: 22px; }
  .val-text { font-size: 14px; line-height: 2; }
  .stmt-band { margin-top: 36px; padding: 28px 16px; }
  .diff-grid { grid-template-columns: 1fr; gap: 28px; }
  .case-grid { grid-template-columns: 1fr; gap: 20px; }
  .stat-grid { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .stat-num { font-size: 22px; }
  .stat-cap { font-size: 11px; }
  .base-lead { font-size: 14px; }
  .cycle-row { grid-template-columns: 1fr; gap: 26px; }
  .cycle-node { padding: 22px 14px 24px; }
  /* スマホは縦並びなので矢印も下向きにする */
  .cycle-node + .cycle-node::before {
    top: -17px;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
  .cycle-back { flex-direction: column; gap: 8px; text-align: center; }
  .base-photo { aspect-ratio: 16 / 9; }
  .flow-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .flow-grid::before { display: none; }
  .flow-dot { display: none; }
  .flow-step { padding-top: 0; }
  .flow-card { padding: 20px 8px 24px; }
  .flow-no { font-size: 24px; }
  .flow-name { font-size: 12px; }
  .faq-q { font-size: 15px; padding: 18px 0; }
  .faq-a p { padding: 0 8px 20px 4px; font-size: 14px; }
  .cases-grid,
  .cases-grid.is-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cross-card { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px 40px; }
  .abl-grid { grid-template-columns: 1fr; gap: 14px; }
  .abl-body { padding: 20px 20px 30px; }
  .duo-wrap { padding-top: 96px; }
  .duo-grid { grid-template-columns: 1fr; gap: 24px; }
  .duo-card { padding-bottom: 52px; }
  .duo-title { margin-top: 36px; }
  .duo-line { height: 48px; margin-top: 28px; }
  .duo-card .btn-line { margin-top: 28px; height: 48px; }

  /* 自社ブランド事業 */
  .bd-grid { grid-template-columns: 1fr; gap: 20px; }
  .bd-card { padding: 24px 20px 40px; }
  .bd-head { gap: 12px; padding: 2px 4px 18px 4px; }
  .bd-logo { height: 32px; }
  .bd-name { font-size: 20px; }
  .bd-name-logo img { height: 64px; }
  .bd-name-logo-wide { min-height: 64px; }
  .bd-name-logo-wide img { height: 42px; }
  .bd-text { font-size: 14px; line-height: 2; }
  .rel-grid { grid-template-columns: 1fr; gap: 44px; }
  .rel-card { padding: 0; }
  .rel-title { font-size: 19px; }
  .rel-text { font-size: 14px; }
  .cta-band-wrap { padding-top: 96px; }
  .cta-band { padding: 64px 20px 72px; }
  .cta-band-btn { height: 48px; }

  .l-pamphlet { padding: 100px var(--inset) 110px; }
  .l-pamphlet-in { padding: 64px 20px 72px; }

  /* ダウンロードブロック */
  .dlb {
    grid-template-columns: 1fr;
    padding: 8px 0 48px;
    min-height: 0;
  }
  .dlb-head { grid-column: 1; grid-row: 1; padding-left: 8px; }
  .dlb-body {
    grid-column: 1;
    grid-row: 2;
    justify-self: stretch;
    width: 100%;
    margin-top: 44px;
    padding-left: 8px;
  }
  .dlb-btns { gap: 14px; margin-top: 36px; }
  .dlb-btns .btn-line { height: 48px; }
  .dlb-btns.dlb-btns-groups { gap: 24px; }
  .dlb-group-btns { gap: 14px; }
  .dlb-mark {
    left: auto;
    right: -70px;
    bottom: -50px;
    width: 250px;
  }

  /* 事業内容ページFV */
  .sv-hero { padding: 104px 0 36px; }
  .sv-hero-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    padding-top: 28px;
    min-height: 0;
  }
  .sv-hero-title { grid-column: 1; grid-row: 1; margin-left: 8px; }
  .sv-hero-intro { display: contents; }
  .sv-hero-intro .latin-label { grid-column: 2; grid-row: 1; justify-self: end; }
  .sv-hero-text {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 32px;
    font-size: 15px;
    line-height: 2;
  }

  /* 事業内容一覧 */
  .sv-section { padding-top: 72px; }
  .sv-section:first-of-type { padding-top: 40px; }
  .sv-card {
    margin-top: 0;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 24px 24px 48px;
  }
  .sv-media {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    height: auto;
    aspect-ratio: 16 / 10;
  }
  .sv-body { grid-column: 1; grid-row: 2; padding: 4px 0 0 8px; }
  .sv-title { font-size: 22px; }
  .sv-no { font-size: 34px; }
  .sv-titlebox { min-height: 236px; }
  .sv-text { margin-top: 28px; padding-top: 0; font-size: 14px; line-height: 2; }
  .sv-btn { margin-top: 28px; height: 48px; }
  .sv-catalog { padding: 88px 0 110px; }
  .sv-catalog-grid { grid-template-columns: 1fr; gap: 20px; }
  .cat-card { padding: 48px 20px 56px; }
}


/* ================================================================
   採用情報(recruit.html)
================================================================ */
.rc-visual-wrap { padding-top: 10px; }
.rc-visual {
  position: relative;
  aspect-ratio: 1320 / 520;
  overflow: hidden;
  --mask-color: var(--bg);
}
.rc-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rc-message {
  font-size: 17px;
  line-height: 2.7;
  letter-spacing: .06em;
}
.rc-member-more { margin-top: 40px; text-align: right; }
.rc-member-more a {
  font-size: 14px;
  letter-spacing: .1em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink);
  transition: opacity .3s;
}
.rc-member-more a:hover { opacity: .55; }

/* 募集要項 */
.job-list { display: grid; gap: 44px; }
.job-card { background: var(--card); padding: 52px 60px 60px; }
.job-name { font-size: 23px; letter-spacing: .14em; line-height: 1.5; }
.job-spec { margin-top: 26px; }
.job-btn { margin-top: 42px; }

/* 応募フォーム(埋め込み・募集要項と同じカードスタイル) */
.entry-card .entry-form { margin-top: 34px; }
.entry-form { max-width: 720px; }
.f-row { margin-bottom: 32px; }
.f-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  letter-spacing: .1em;
  margin-bottom: 12px;
}
.f-req {
  font-size: 11px;
  line-height: 1;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 4px 10px 5px;
  letter-spacing: .12em;
}
.f-input {
  display: block;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(22, 22, 21, .42);
  border-radius: 0;
  padding: 15px 18px;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--ink);
}
.f-input:focus { outline: none; border-color: var(--ink); }
.f-input::placeholder { color: rgba(22, 22, 21, .38); }
.f-select { height: 54px; }
.f-select:invalid { color: rgba(22, 22, 21, .45); }
.f-textarea { resize: vertical; min-height: 180px; }
.f-file { padding: 11px 12px; }
.f-file::file-selector-button {
  font-family: inherit;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--ink);
  background: transparent;
  border: 1px solid rgba(22, 22, 21, .55);
  border-radius: 999px;
  padding: 9px 20px;
  margin-right: 16px;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.f-file::file-selector-button:hover { background: var(--ink); color: #fff; }
.f-agree {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
  font-size: 14px;
  letter-spacing: .06em;
  cursor: pointer;
}
.f-agree input { width: 17px; height: 17px; accent-color: var(--ink); }
.f-submit { margin-top: 46px; font-family: inherit; cursor: pointer; }
.entry-done { max-width: 720px; padding: 60px 0 20px; }
.entry-done-title { font-size: 22px; letter-spacing: .14em; }
.entry-done-text { margin-top: 20px; font-size: 15px; line-height: 2.3; letter-spacing: .04em; }

/* ================================================================
   ストーリーカードの実写真サムネ
================================================================ */
.story-thumb { position: relative; }
.story-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================================================================
   メンバー詳細のEC商品グリッド(★memberカテゴリのみの特別表示)
================================================================ */
.mem-goods-note { margin-top: 16px; font-size: 14px; letter-spacing: .06em; opacity: .8; }
.prod-grid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px 24px;
}
.prod-card { display: block; }
.prod-thumb {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
  --mask-color: var(--bg);
}
.prod-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.3s cubic-bezier(.3, 0, .2, 1);
}
.prod-card:hover .prod-thumb img { transform: scale(1.06); }
.prod-name { margin-top: 16px; font-size: 13.5px; line-height: 1.8; letter-spacing: .03em; }
.prod-price { margin-top: 7px; font-size: 13px; letter-spacing: .08em; }
.prod-price span { font-size: 11px; opacity: .7; }
.mem-goods-more { margin-top: 48px; display: flex; justify-content: center; }

/* ================================================================
   OEM: 実際の手順(STEP1-4+完成)
================================================================ */
.flow-grid-4 { grid-template-columns: repeat(4, 1fr); }
.flow-grid-4 .flow-card { display: flex; flex-direction: column; }
/* STEP名が1行/2行でも説明文の書き出しが揃うように高さを確保（指摘 No.44） */
.flow-grid-4 .flow-name { min-height: calc(1.7em * 2); }
.flow-desc {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.95;
  letter-spacing: .02em;
  text-align: left;
  opacity: .85;
}
.flow-link {
  margin-top: auto;
  padding-top: 16px;
  align-self: center;
  font-size: 12px;
  letter-spacing: .14em;
  transition: color .3s;
}
.flow-link:hover { color: var(--accent); }
.flow-goal { background: var(--ink); color: #fff; }
.flow-goal-title {
  font-size: 24px;
  letter-spacing: .34em;
  text-indent: .34em;
  padding-top: 22px;
}
.flow-goal .flow-desc { text-align: center; opacity: .88; }
.flow-goal .flow-link { color: #fff; }
.flow-goal .flow-link:hover { color: var(--accent); }

/* ================================================================
   OEMの手引き(折りたたみ・リッチ版)
================================================================ */
.acc-item .faq-q { text-align: left; }
.acc-item.is-static .faq-q { cursor: default; } /* 常に開いておく手引き（指摘 No.81） */
.acc-sub {
  margin-left: 18px;
  margin-right: auto;
  font-size: 12px;
  letter-spacing: .1em;
  opacity: .55;
}
.acc-item.open .faq-a { max-height: 7000px; }
.acc-a p { padding: 0; }
.acc-inner { padding: 8px 48px 40px 4px; }
.acc-lead { font-size: 14px; line-height: 2.1; letter-spacing: .04em; }
.oemcat-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 22px;
}
.oemcat-thumb {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  background: #fff;
  overflow: hidden;
}
.oemcat-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.oemcat-name { margin-top: 12px; font-size: 13px; line-height: 1.7; letter-spacing: .02em; }
/* 自社ブランドページの総合カタログリンク（指摘 No.68・No.77） */
.bd-catalog { margin-top: 44px; }
/* 画像なし（名称だけ）の一覧（指摘 No.45） */
.oemcat-grid.is-names {
  margin-top: 22px;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 40px;
}
.oemcat-grid.is-names .oemcat-card {
  padding: 12px 0;
  border-bottom: 1px solid rgba(22, 22, 21, .28);
}
.oemcat-grid.is-names .oemcat-name {
  margin-top: 0;
  font-size: 14px;
  letter-spacing: .04em;
}
.oemcat-lot { margin-top: 5px; font-size: 12px; letter-spacing: .1em; color: var(--accent); }
.acc-block { margin-top: 34px; }
.acc-inner > .acc-block:first-child { margin-top: 0; }
.acc-block h4 {
  font-size: 16px;
  letter-spacing: .1em;
  line-height: 1.6;
  padding-left: 14px;
  border-left: 2px solid var(--ink);
}
.acc-block p { margin-top: 14px; font-size: 14px; line-height: 2.15; letter-spacing: .03em; }
.acc-ol { margin: 14px 0 0 1.5em; }
.acc-ol li { font-size: 14px; line-height: 2.15; letter-spacing: .03em; }
.acc-ul { margin-top: 14px; list-style: none; }
.acc-ul li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 2.1;
  letter-spacing: .03em;
}
.acc-ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1em;
  width: 8px;
  height: 1px;
  background: var(--ink);
}
.acc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.acc-figure { margin-top: 20px; max-width: 620px; background: #fff; }
.acc-figure img { display: block; width: 100%; height: auto; }
.acc-photos {
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 760px;
}
.acc-photos .acc-figure { margin-top: 0; }

/* ================================================================
   レスポンシブ(新規分)
================================================================ */
@media (max-width: 1180px) {
  .prod-grid { gap: 28px 18px; }
  .oemcat-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .rc-visual { aspect-ratio: 375 / 250; }
  .rc-message { font-size: 15px; line-height: 2.5; }
  .rc-message br { display: none; }
  .job-card { padding: 34px 24px 42px; }
  .job-name { font-size: 19px; }
  .f-row { margin-bottom: 26px; }
  .entry-done-title { font-size: 19px; }

  .prod-grid { grid-template-columns: 1fr 1fr; gap: 26px 14px; }
  .mem-goods-more { margin-top: 36px; }

  .flow-grid-4 { grid-template-columns: 1fr; }
  .flow-grid-4 .flow-name { min-height: 0; }
  .flow-grid-4 .flow-card { padding: 22px 18px 24px; }
  .oemcat-grid.is-names { grid-template-columns: 1fr; gap: 0; }
  .flow-desc { font-size: 12px; }
  .flow-goal-title { padding-top: 8px; font-size: 20px; }

  .acc-sub { display: none; }
  .acc-inner { padding: 4px 8px 32px 2px; }
  .oemcat-grid { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
  .acc-two { grid-template-columns: 1fr; }
  .acc-photos { grid-template-columns: 1fr; }
  .acc-block h4 { font-size: 15px; }
}

@media (max-width: 400px) {
  .job-card { padding: 28px 18px 36px; }
  .prod-grid { grid-template-columns: 1fr 1fr; }
}


/* ================================================================
   プライバシーポリシー
================================================================ */
.pp-body { max-width: 1000px; margin-top: 40px; padding-bottom: 40px; font-size: 15px; line-height: 2.3; }
.pp-body h2 { font-size: 20px; }
.pp-body ul { margin: 1.2em 0 0; list-style: none; }
.pp-body ul li {
  position: relative;
  padding-left: 18px;
  line-height: 2.2;
}
.pp-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1em;
  width: 8px;
  height: 1px;
  background: var(--ink);
}
.pp-contact { border: 1px solid rgba(22, 22, 21, .35); padding: 26px 30px; margin-top: 1.6em; }

/* フッターのプライバシーポリシーリンク */
.f-privacy { margin-top: 0; }
.f-privacy a {
  font-size: 12px;
  letter-spacing: .1em;
  opacity: .75;
  transition: opacity .3s;
}
.f-privacy a:hover { opacity: 1; }
.f-privacy + .f-copy { margin-top: 0; }

/* 同意チェックのリンク */
.f-agree-link { text-decoration: underline; text-underline-offset: 4px; transition: opacity .3s; }
.f-agree-link:hover { opacity: .6; }

@media (max-width: 860px) {
  .pp-body { font-size: 14px; }
  .pp-body h2 { font-size: 17px; }
  .pp-contact { padding: 20px 18px; }
}


/* ================================================================
   404
================================================================ */
.nf {
  position: relative;
  padding: 210px var(--inset) 90px;
}
.nf-code {
  margin-top: 26px;
  font-family: var(--latin);
  font-size: clamp(96px, 10.5vw, 152px);
  line-height: 1;
  letter-spacing: .16em;
}
.nf-title {
  margin-top: 34px;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 400;
  line-height: 2;
  letter-spacing: .12em;
}
.nf-text {
  margin-top: 26px;
  font-size: 15px;
  line-height: 2.5;
  letter-spacing: .05em;
}
.nf-btn { margin-top: 50px; }
.nf-links {
  margin-top: 60px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 36px;
  list-style: none;
}
.nf-links a {
  font-size: 13.5px;
  letter-spacing: .1em;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(22, 22, 21, .5);
  transition: opacity .3s;
}
.nf-links a:hover { opacity: .5; }

@media (max-width: 860px) {
  .nf { padding: 150px var(--inset) 60px; }
  .nf-text br { display: none; }
  .nf-btn { width: 100%; max-width: 320px; }
  .nf-links { margin-top: 46px; gap: 16px 26px; }
}


/* ================================================================
   お問合わせ(contact.html) タブ式フォーム
================================================================ */
.ct-wrap {
  margin-top: 70px;
  padding: 80px var(--inset) 130px;
  background: var(--card);
}
.ct-tabs { display: flex; max-width: 860px; }
.ct-tab {
  position: relative;
  flex: 1;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(22, 22, 21, .35);
  padding: 6px 10px 24px;
  font-family: inherit;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  opacity: .42;
  transition: opacity .35s;
}
.ct-tab:hover { opacity: .75; }
.ct-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.ct-tab.is-active { opacity: 1; }
.ct-tab.is-active::after { transform: scaleX(1); }
.ct-tab-jp { display: block; font-size: 17px; letter-spacing: .14em; }
.ct-tab-sub { display: block; margin-top: 8px; font-size: 11.5px; letter-spacing: .1em; opacity: .6; }
.ct-lead { max-width: 860px; margin-top: 36px; font-size: 14px; line-height: 2.2; letter-spacing: .04em; }
.ct-lead a, .f-note a { text-decoration: underline; text-underline-offset: 4px; transition: opacity .3s; }
.ct-lead a:hover, .f-note a:hover { opacity: .6; }

.ct-panel { display: none; max-width: 720px; margin-top: 50px; }
.ct-panel.is-active { display: block; animation: ctFade .5s both; }
@keyframes ctFade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.f-input-s { max-width: 320px; }
.f-textarea-s { min-height: 130px; }
.f-radios { display: flex; flex-wrap: wrap; gap: 12px 30px; padding: 8px 0 2px; }
.f-radios label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  letter-spacing: .04em;
  cursor: pointer;
}
.f-radios input { width: 16px; height: 16px; accent-color: var(--ink); }
.f-unit { display: flex; align-items: center; gap: 14px; }
.f-unit-label { font-size: 14.5px; letter-spacing: .1em; }
.f-note { margin-top: 10px; font-size: 12.5px; line-height: 1.95; letter-spacing: .03em; opacity: .72; }

/* OEMのご相談タブの最初に出す、共創OEM事業ページへのリンク（指摘 No.92） */
.ct-panel-lead { margin: 0 0 30px; font-size: 14px; letter-spacing: .06em; line-height: 1.9; }
.ct-panel-lead a { text-decoration: underline; text-underline-offset: 4px; transition: opacity .3s; }
.ct-panel-lead a:hover { opacity: .6; }
.ct-wholesale {
  max-width: 860px;
  margin-top: 90px;
  padding: 36px 42px 40px;
  border: 1px solid rgba(22, 22, 21, .35);
}
.ct-wholesale h3 { font-size: 17px; letter-spacing: .14em; }
.ct-wholesale p { margin-top: 14px; font-size: 14px; line-height: 2.1; letter-spacing: .04em; }
.ct-wholesale-links { display: flex; flex-wrap: wrap; gap: 10px 34px; }
.ct-wholesale-links a {
  font-size: 13.5px;
  letter-spacing: .1em;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--ink);
  transition: opacity .3s;
}
.ct-wholesale-links a:hover { opacity: .5; }

@media (max-width: 860px) {
  .ct-wrap { margin-top: 40px; padding: 54px var(--inset) 90px; }
  .ct-tab-jp { font-size: 14.5px; }
  .ct-tab-sub { font-size: 10.5px; margin-top: 6px; }
  .ct-lead { font-size: 13px; }
  .ct-panel { margin-top: 40px; }
  .f-input-s { max-width: 100%; }
  .f-unit .f-input-s { max-width: 200px; }
  .ct-wholesale { margin-top: 60px; padding: 26px 20px 30px; }
}


/* ================================================================
   ロボット認証(デモ) ★WP化でreCAPTCHA等に置き換え
================================================================ */
.f-robot { margin-top: 40px; }
.f-robot-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 420px;
  background: #fff;
  border: 1px solid rgba(22, 22, 21, .42);
  padding: 20px 22px;
  cursor: pointer;
}
.f-robot-box input {
  position: absolute;
  left: 22px;
  width: 26px;
  height: 26px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.f-robot-check {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(22, 22, 21, .55);
  background: #fff;
  transition: border-color .3s;
}
.f-robot-check::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 3px;
  width: 8px;
  height: 14px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform .35s cubic-bezier(.2, 1.4, .4, 1);
}
.f-robot-box input:checked ~ .f-robot-check { border-color: var(--ink); }
.f-robot-box input:checked ~ .f-robot-check::after { transform: rotate(45deg) scale(1); }
.f-robot-box:hover .f-robot-check { border-color: var(--ink); }
.f-robot-text { font-size: 14px; letter-spacing: .06em; }
.f-robot-mark {
  margin-left: auto;
  width: 34px;
  opacity: .22;
}

@media (max-width: 860px) {
  .f-robot-box { max-width: 100%; padding: 16px 16px; gap: 12px; }
  .f-robot-box input { left: 16px; }
  .f-robot-text { font-size: 13px; }
}


/* チップ型チェックボックス(アイテム複数選択) */
.f-checks { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 0 2px; }
.f-check { position: relative; cursor: pointer; }
.f-check input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.f-check span {
  display: inline-block;
  font-size: 13px;
  letter-spacing: .04em;
  line-height: 1;
  padding: 10px 16px 11px;
  background: #fff;
  border: 1px solid rgba(22, 22, 21, .42);
  border-radius: 999px;
  transition: background .3s, color .3s, border-color .3s;
}
.f-check:hover span { border-color: var(--ink); }
.f-check input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
@media (max-width: 860px) {
  .f-checks { gap: 8px; }
  .f-check span { font-size: 12px; padding: 9px 13px 10px; }
}


/* ラベル横の補足 */
.f-label-note { font-size: 12.5px; letter-spacing: .04em; opacity: .62; }


/* ================================================================
   言語切り替え(JP/EN) ★翻訳プラグイン導入時にENのURLを接続
================================================================ */
.gnav .fv-nav { display: flex; align-items: center; gap: 36px; }
.lang-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--latin);
  font-size: 13.5px;
  letter-spacing: .14em;
  line-height: 1;
}
.lang-switch a { padding: 3px 1px; opacity: .42; transition: opacity .3s; }
.lang-switch a:hover { opacity: 1; }
.lang-switch a.is-active { opacity: 1; border-bottom: 1px solid currentColor; }
.lang-sep { width: 1px; height: 12px; background: currentColor; opacity: .4; }
.m-lang { margin-top: 30px; justify-content: center; font-size: 15px; }

@media (max-width: 1180px) {
  .gnav .fv-nav { gap: 22px; }
}


/* FVバナーのサムネ画像(最新お知らせ) */
.fv-banner-thumb { overflow: hidden; position: relative; }
.fv-banner-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================================================================
   中間幅(861-1080px): PCメニューをコンパクト化(はみ出し対策)
================================================================ */
@media (max-width: 1080px) {
  .gnav .h-nav > li { margin-left: 18px; }
  .gnav .h-nav a { font-size: 12.5px; letter-spacing: .06em; }
  .gnav .fv-nav { gap: 16px; }
  .gnav .lang-switch { font-size: 12px; gap: 7px; }
  .gnav-mark-w img:first-child,
  .gnav-mark-b img:first-child { width: 38px; }
  .gnav-mark-w img:last-child,
  .gnav-mark-b img:last-child { width: 74px; }
}

/* スマホではPCナビを確実に隠す(.gnav .fv-nav の display:flex 打ち消し) */
@media (max-width: 860px) {
  .gnav .fv-nav { display: none; }
}

/* 対応アイテム: LOT一括表記 */
.oemcat-lot-all { margin: 14px 0 0; }

/* 私たちが選ばれる理由（TOPの紙芝居カード・番号を踏襲） */
.reason-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.reason-card {
  position: relative;
  background: var(--card);
  padding: 44px 44px 48px;
  overflow: hidden;
}
.reason-no {
  font-family: var(--latin);
  font-size: 44px;
  line-height: 1;
  letter-spacing: .06em;
}
.reason-key {
  position: absolute;
  right: 36px;
  top: 40px;
  writing-mode: vertical-rl;
  font-size: 15px; /* 12px では読みにくいとの指摘で拡大（No.28）。860px以下は14px */
  letter-spacing: .2em;
  color: var(--accent);
}
.reason-title {
  margin-top: 34px;
  padding-right: 48px;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1.8;
}
.reason-line {
  display: block;
  width: 40px;
  height: 1px;
  margin: 24px 0 22px;
  background: rgba(22, 22, 21, .6);
}
.reason-text {
  font-size: 14px;
  line-height: 2.15;
  letter-spacing: .03em;
  max-width: 36em;
}
.base-cases { margin-top: 48px; }

/* 香りについて: A/B の選択カード（ラインナップ図はBの中に配置） */
.scent-options {
  margin-top: 26px;
  display: grid;
  gap: 20px;
}
.scent-card {
  background: #fff;
  display: grid;
  grid-template-columns: 92px 1fr;
  padding: 38px 44px 42px;
}
.scent-card .scent-letter {
  font-family: var(--latin);
  font-size: 50px;
  line-height: 1;
  letter-spacing: .04em;
}
.scent-card .scent-title {
  font-size: 19px;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.5;
}
.scent-card .scent-for {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--accent);
}
.scent-steps {
  margin-top: 22px;
  padding-top: 4px;
  border-top: 1px solid rgba(22, 22, 21, .3);
  list-style: none;
}
.scent-steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(22, 22, 21, .15);
  font-size: 14px;
  line-height: 2;
  letter-spacing: .03em;
}
.scent-steps li:last-child { border-bottom: none; }
.scent-step-no {
  font-family: var(--latin);
  font-size: 16px;
  letter-spacing: .08em;
  line-height: 1.75;
  opacity: .6;
}
/* 箇条書き（・）版（指摘 No.64 ⑰） */
.scent-steps.is-bullets li { grid-template-columns: 1em 1fr; gap: 6px; }
.scent-steps.is-bullets .scent-step-no {
  font-family: inherit;
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0;
}
.scent-card .scent-text {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(22, 22, 21, .3);
  font-size: 14px;
  line-height: 2.15;
  letter-spacing: .03em;
  max-width: 44em;
}
.scent-card .scent-note {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: .06em;
  opacity: .7;
}
.scent-figure {
  margin-top: 26px;
  padding: 18px;
  background: var(--card);
}
.scent-figure img { display: block; width: 100%; height: auto; }
.scent-figure figcaption {
  padding-top: 14px;
  font-size: 12px;
  letter-spacing: .12em;
  opacity: .7;
}

@media (max-width: 1180px) {
  .reason-card { padding: 36px 32px 40px; }
  .reason-no { font-size: 38px; }
  .scent-card { grid-template-columns: 76px 1fr; padding: 32px 32px 36px; }
  .scent-card .scent-letter { font-size: 42px; }
}
@media (max-width: 767px) {
  .reason-grid { grid-template-columns: 1fr; gap: 16px; }
  .reason-card { padding: 30px 22px 34px; }
  .reason-no { font-size: 32px; }
  .reason-key { right: 20px; top: 28px; }
  .reason-title { margin-top: 26px; font-size: 18px; padding-right: 36px; }
  .base-cases { margin-top: 32px; }
  .scent-options { gap: 14px; }
  .scent-card { grid-template-columns: 1fr; padding: 26px 20px 30px; }
  .scent-card .scent-letter { font-size: 32px; margin-bottom: 16px; }
  .scent-card .scent-title { font-size: 17px; }
  .scent-figure { margin-top: 20px; padding: 12px; }
}

/* 会社概要: 直営店行のオンライン問い合わせ導線 */
.spec-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .3em;
  transition: opacity .3s;
}
.spec-link:hover { opacity: .6; }

/* 会社紹介動画: 自作サムネイル＋再生ボタン（クリックでプレーヤー生成） */
.video-cover { cursor: pointer; overflow: hidden; }
.video-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.3, 0, .2, 1);
}
.video-cover:hover .video-cover-img { transform: scale(1.04); }
.video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(0, 0, 0, .22);
  border: 0;
  cursor: pointer;
  color: #fff;
  font-family: var(--latin);
  font-size: 12px;
  letter-spacing: .26em;
}
.video-play-icon {
  position: relative;
  width: 78px;
  height: 78px;
  border: 1px solid #fff;
  border-radius: 50%;
  transition: background-color .3s;
}
.video-play-icon::after {
  content: "";
  position: absolute;
  left: 53%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
.video-play:hover .video-play-icon { background-color: rgba(255, 255, 255, .18); }
.video-cover.is-playing .video-cover-img,
.video-cover.is-playing .video-play { display: none; }

/* 事業内容: 正式名称の長いタイトル */
.sv-title-long {
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.75;
  letter-spacing: .08em;
}

/* お問い合わせ: WEB卸パネル */
.ct-panel .ct-wholesale { margin-top: 0; }

@media (max-width: 860px) {
  .video-play-icon { width: 60px; height: 60px; }
  .video-play-icon::after { border-width: 7px 0 7px 12px; }
  .sv-title-long { font-size: 16px; }
}

/* 会社概要: 直営店の行（浅草店／オンラインショップを同じ並びで2ブロック） */
.spec-item { display: block; }
.spec-item + .spec-item { margin-top: 14px; }
.spec-url {
  text-decoration: underline;
  text-underline-offset: .3em;
  text-decoration-thickness: .5px;
  transition: opacity .3s;
}
.spec-url:hover { opacity: .5; }

/* ================================================================
   横はみ出しの根絶（No.31）
   飾りの紋章（.l-hero-mark / .about-mark / .oem-fv-mark / .dlb-mark）は右に食み出す配置のため、
   body の横スクロール幅が画面幅より大きくなり、iOS Safari では本文の幅（レイアウト幅）まで
   広がって右端が切れることがある。各セクションで横方向だけクリップする
   （overflow-x: clip は縦方向のはみ出し＝紋章の下部やカードの食い込みを切らない）。
================================================================ */
.l-hero,
.about,
.oem-hero,
.sv-catalog,
.l-pamphlet { overflow-x: clip; }

/* ================================================================
   お問い合わせ・応募フォーム: 送信できない理由を赤で示す（No.59）
   script.js が送信時に form へ is-validated、行（.f-row）へ is-invalid、
   チップ群（.f-checks[data-required]）へ is-invalid を付け、送信ボタンの手前に .f-error-summary を出す
================================================================ */
form.is-validated .f-input:invalid,
form.is-validated .f-select:invalid,
form.is-validated .f-textarea:invalid { border-color: var(--accent); }
form.is-validated .f-row.is-invalid .f-label { color: var(--accent); }
form.is-validated .f-checks[data-required].is-invalid .f-check span { border-color: var(--accent); }
form.is-validated .f-agree input:invalid + span { color: var(--accent); }
form.is-validated .f-robot-box input:invalid ~ .f-robot-check { border-color: var(--accent); }
form.is-validated .f-robot-box input:invalid ~ .f-robot-text { color: var(--accent); }
.f-error-summary {
  margin-top: 28px;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--accent);
}
.f-error-summary + .f-submit { margin-top: 22px; }

/* Contact Form 7 のショートコードを貼った場合もテーマのフォームと同じ見た目にする */
.wpcf7-form > p { margin-bottom: 26px; }
.wpcf7-form label {
  display: block;
  font-size: 15px;
  letter-spacing: .1em;
}
.wpcf7-form .wpcf7-form-control-wrap { display: block; margin-top: 12px; }
/* チェックボックス・ラジオの各選択肢はラベルを行にしない */
.wpcf7-form .wpcf7-list-item { margin: 0 24px 8px 0; }
.wpcf7-form .wpcf7-list-item label { display: inline; font-size: 14.5px; letter-spacing: .04em; }
.wpcf7-form .wpcf7-list-item input { margin-right: 8px; }
/* Contact Form 7 は入力欄を span（.wpcf7-form-control-wrap）で包み、行を <p> で囲む。テーマのフォームと同じ並びにそろえる:
   ラベルと「必須」の間隔／入力欄のあとの単位（円）／ロボット確認のチェック／プライバシーポリシーの同意 */
.wpcf7-form label.f-label { display: flex; align-items: center; gap: 12px; }
/* ラベルと入力欄の間: CF7 はラベルの後ろに <br> を入れ、入力欄の span にも上の余白が付くので、テーマのフォームと同じ 12px に戻す */
.wpcf7-form .f-row .f-label + br { display: none; }
.wpcf7-form .f-row .wpcf7-form-control-wrap { margin-top: 0; }
.wpcf7-form .f-unit { display: block; }
.wpcf7-form .f-unit > p { display: flex; align-items: center; gap: 14px; margin: 0; }
.wpcf7-form .f-unit .wpcf7-form-control-wrap { flex: 0 1 320px; min-width: 0; margin-top: 0; }
.wpcf7-form .f-robot > p { margin: 0; }
.wpcf7-form label.f-robot-box,
.wpcf7-form label.f-agree { display: flex; align-items: center; }
.wpcf7-form .f-robot-box .wpcf7-form-control-wrap,
.wpcf7-form .f-agree .wpcf7-form-control-wrap { display: flex; flex: none; margin-top: 0; }
.wpcf7-form .f-robot-box .wpcf7-list-item,
.wpcf7-form .f-agree .wpcf7-list-item { display: flex; margin: 0; }
.wpcf7-form .f-robot-box input,
.wpcf7-form .f-agree input { margin: 0; }
.wpcf7-form label.f-agree { gap: 12px; font-size: 14px; letter-spacing: .06em; }
.wpcf7-form label.f-robot-box { gap: 16px; }
.wpcf7-form .f-agree + br { display: none; } /* 同意と送信ボタンの間の <br> */
/* ロボット確認: CF7 の本文にはチェックの枠（.f-robot-check）とロゴ（.f-robot-mark）が無いので、チェックボックス自体を枠にし、ロゴは疑似要素で出す */
.wpcf7-form .f-robot-box input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: static;
  display: block;
  opacity: 1;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(22, 22, 21, .55);
  border-radius: 0;
  background: #fff center / 26px 26px no-repeat;
  cursor: pointer;
  transition: border-color .3s;
}
.wpcf7-form .f-robot-box:hover input[type="checkbox"],
.wpcf7-form .f-robot-box input[type="checkbox"]:checked { border-color: var(--ink); }
.wpcf7-form .f-robot-box input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><path d='M7.5 13.2l4 4.3 7.2-8.6' fill='none' stroke='%23161615' stroke-width='2'/></svg>");
}
.wpcf7-form .f-robot-box::after {
  content: "";
  flex: none;
  width: 34px;
  height: 34px;
  margin-left: auto;
  background: url("../images/logo-mark.svg") center / contain no-repeat;
  opacity: .22;
}
@media (max-width: 860px) {
  .wpcf7-form .f-unit .wpcf7-form-control-wrap { flex-basis: 200px; }
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea,
.wpcf7-form select {
  display: block;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(22, 22, 21, .42);
  border-radius: 0;
  padding: 15px 18px;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--ink);
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus { outline: none; border-color: var(--ink); }
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder { color: rgba(22, 22, 21, .38); }
.wpcf7-form select { height: 54px; }
.wpcf7-form textarea { resize: vertical; min-height: 180px; }
.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] { accent-color: var(--ink); }
.wpcf7-form input[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 56px;
  margin-top: 46px;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: .1em;
  cursor: pointer;
  transition: background .35s, color .35s;
}
.wpcf7-form input[type="submit"]:hover { background: transparent; color: var(--ink); }
.wpcf7-form input[type="submit"]:disabled { opacity: .5; cursor: default; }
.wpcf7-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--accent);
}
.wpcf7-form .wpcf7-not-valid { border-color: var(--accent); }
.wpcf7 form.wpcf7-form .wpcf7-response-output {
  margin: 28px 0 0;
  padding: 16px 20px;
  border: 1px solid var(--ink);
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: .04em;
}
.wpcf7 form.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7 form.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7 form.wpcf7-form.failed .wpcf7-response-output,
.wpcf7 form.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7 form.wpcf7-form.spam .wpcf7-response-output {
  border-color: var(--accent);
  color: var(--accent);
}
.wpcf7 form.wpcf7-form.sent .wpcf7-response-output { border-color: var(--ink); color: var(--ink); }
.wpcf7-form .wpcf7-spinner {
  width: 18px;
  height: 18px;
  margin: 0 0 0 12px;
  background-color: rgba(22, 22, 21, .25);
  vertical-align: middle;
}

/* ================================================================
   スマホ（〜860px）の調整（No.28 / No.30 / No.31 / No.33 / No.34）
   ※ .bd-btn や .goods-btn など単独クラスの幅指定より後ろに置いて上書きする
================================================================ */
@media (max-width: 860px) {
  /* 枠線ボタン: 文字数に合わせて幅を広げる（短い文字は今までどおり 230px）。No.30 */
  .btn-line,
  .biz-card .btn-line,
  .duo-card .btn-line,
  .dlb-btns .btn-line,
  .cross-body .btn-line,
  .cases-more .btn-line,
  .mem-goods-more .btn-line,
  .sv-btn,
  .goods-btn,
  .bd-btn,
  .cat-btn,
  .l-pamphlet-btn,
  .cta-band-btn {
    width: -moz-fit-content;
    width: fit-content;
    min-width: 230px;
    max-width: 100%;
    padding: 0 24px;
    white-space: nowrap;
  }
  .cta-band-btn { min-width: 250px; }
  .nf-btn { width: 100%; min-width: 0; max-width: 320px; }

  /* 本文の段落は <br> を無視して画面幅で折り返す（見出し・住所・沿革・役員・概要の dl・フッターは対象外）。No.31/No.34 */
  .sv-text br,
  .sv-hero-text br,
  .business-intro-text br,
  .duo-text br,
  .cross-text br,
  .oem-fv-sub br,
  .oem-lead-text br,
  .val-text br,
  .reason-text br,
  .case-text br,
  .flow-desc br,
  .recruit-desc br,
  .dlb-text br,
  .l-hero-sub br,
  .abl-text br,
  .rel-text br,
  .cta-band-sub br,
  .bd-text br,
  .goods-text br,
  .mem-goods-note br,
  .l-pamphlet-text br,
  .cat-text br,
  .st-empty br,
  .entry-done-text br,
  .f-note br,
  .ct-wholesale p br,
  .about-body p br,
  .l-message-body p br,
  .biz-desc br { display: none; }
  .biz-desc { word-break: normal; overflow-wrap: normal; }

  /* 代表メッセージ: 写真や動画の元サイズがグリッド列の最小幅にならないようにする（iOS Safari 対策） */
  .l-message-grid { grid-template-columns: minmax(0, 1fr); }
  .l-message-grid > * { min-width: 0; }
  .ph-media > img { min-width: 0; }

  /* 選ばれる理由の赤いキーワード（No.28） */
  .reason-key { font-size: 14px; }
}

/* FV: 横向きのスマホ（高さ620px固定）でもタグラインとコピーが重ならないよう上に詰める */
@media (max-width: 860px) and (orientation: landscape) {
  .fv-brand { top: 14%; }
  .fv-scroll { top: 15%; }
  .fv-tagline { top: 27%; }
}

@media (max-width: 400px) {
  /* 幅360pxでも「香・体験創出事業を詳しく見る」（14文字）が楕円に収まるよう少し詰める */
  .btn-line { font-size: 14px; padding: 0 20px; }
}