@charset "UTF-8";
/* =========================================
   Reset & Base
========================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
:root {
  /* Minimal Japanese palette inspired by salt-group — light gray + dark gray */
  --c-black: #333333;       /* dark gray — used for text & dark UI */
  --c-text: #333333;        /* body text */
  --c-sub: #777777;         /* secondary text */
  --c-line: #dcdcdc;        /* hairline borders */
  --c-bg: #f2f2f2;          /* base background — light gray */
  --c-bg-soft: #ffffff;     /* section variation — pure white for contrast */
  --c-accent: #333333;      /* accent same as text — minimal */
  --container: 1840px;        /* 社長指示 2026-06-27 下層(1840)に合わせる（旧1600） */
  --container-narrow: 1080px;
  --pad-x: clamp(24px, 4vw, 72px);   /* 社長指示 2026-06-27 下層に合わせる（旧 32/6vw/112） */
  --section-py: clamp(80px, 12vw, 180px);
  --font-en: 'Oswald', sans-serif;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 2;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.04em;
}
a { color: inherit; text-decoration: none; transition: opacity .3s ease; }
a:hover { opacity: .6; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: transparent; }

.en { font-family: var(--font-en); font-weight: 400; letter-spacing: 0.12em; }

/* =========================================
   Layout
========================================= */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--pad-x); }
section { padding: var(--section-py) 0; }

/* Header / Mega menu / Nav toggle は common.css 側を唯一のソースとする
   （旧バージョンの :not(.scrolled) 専用ルールが cta-link-solid と競合していたため削除） */

/* =========================================
   Hero (i-ne style: 2-column split + overlay text)
========================================= */
/* ============== HERO（d-a-h 風：フルスクリーン動画 + 右80px縦線 + SNS） ============== */
.hero {
  height: 100vh;
  min-height: 640px;
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #111;
}
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 視認性のための薄い暗幕（上下） */
.hero-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 58%, rgba(0,0,0,0.38) 100%);
  z-index: 2;
}
/* 網掛け（ハーフトーン pattern-04）オーバーレイ 透明度0.2 — 動画の上（社長指示 2026-07-02） */
.hero-video::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url(../overlays/pattern-04.png) repeat;
  opacity: 0.2;
  z-index: 2;
  pointer-events: none;
}
/* 右 80px の縦線。ヘッダー下端（約72px）で横線が入り「区切られる」 */
.hero-line {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 80px;
  width: 1px;
  background: rgba(255,255,255,0.38);
  z-index: 3;
  pointer-events: none;
}
.hero-line::after {
  content: '';
  position: absolute;
  top: 72px;
  left: 0;
  width: 80px;
  height: 1px;
  background: rgba(255,255,255,0.38);
}
.hero-text {
  position: absolute;
  top: 50%;
  left: clamp(40px, 7vw, 120px);
  transform: translateY(-50%);
  z-index: 5;
  text-align: left;
  color: #fff;
  max-width: min(70%, 720px);
}
.hero-text .small {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: clamp(13px, 1.4vw, 18px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  display: block;
  opacity: 0.9;
  margin-bottom: 18px;
  margin-left: 2px;
}
.hero-text .big {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: clamp(38px, 5.6vw, 86px);
  line-height: 1.15;
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: 14px;
  text-shadow: 0 2px 28px rgba(0,0,0,0.22);
}
.hero-text .big:last-of-type { margin-bottom: 0; }
.hero-text .big-line { display: block; }
/* 参考の SCROLL 位置に SNS（アイコン＋名称）を縦に並べる。右 80px ガター内 */
/* SNS：右ガター内に縦並び・垂直中央。各項目は時計回り90度回転（アイコン＋名称） */
.hero-sns {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.hero-sns-item {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity .25s ease;
}
.hero-sns-item:hover { opacity: 1; }
.hero-sns-item svg { width: 18px; height: 18px; display: block; transform: rotate(90deg); }
.hero-sns-label {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.14em;
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .hero { height: 100svh; min-height: 560px; }
  .hero-line { display: none; }
  .hero-text {
    top: auto;
    bottom: clamp(96px, 18vh, 150px);
    left: clamp(24px, 6vw, 40px);
    transform: none;
    max-width: 88%;
    text-align: left;
  }
  .hero-text .big { font-size: clamp(36px, 9vw, 56px); }
  .hero-sns {
    flex-direction: row;
    width: auto;
    right: auto;
    top: auto;
    transform: none;
    left: clamp(24px, 6vw, 40px);
    bottom: 32px;
    gap: 18px;
  }
  .hero-sns-item { writing-mode: horizontal-tb; text-orientation: mixed; flex-direction: row; gap: 7px; }
  .hero-sns-item svg { transform: none; }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 18px 32px;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.18em;
  border: 1px solid var(--c-black);
  background: var(--c-black);
  color: #f2f2f2;
  transition: background .3s ease, color .3s ease, opacity .3s ease;
}
.btn:hover { background: transparent; color: var(--c-black); opacity: 1; }
.btn .arrow { width: 20px; height: 1px; background: currentColor; position: relative; }
.btn .arrow::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  width: 8px; height: 1px;
  background: currentColor;
  transform: rotate(40deg);
  transform-origin: right center;
}
.btn-ghost {
  background: transparent;
  color: var(--c-black);
}
.btn-ghost:hover { background: var(--c-black); color: #fff; }


/* =========================================
   Section heading
========================================= */
.section-head {
  margin-bottom: clamp(48px, 7vw, 96px);
}
.section-head .en-label {
  font-family: var(--font-en);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--c-black);
  display: block;
  line-height: 1;
  margin-bottom: 16px;
}
.section-head h2 {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-sub);
  letter-spacing: 0.18em;
  margin-bottom: 0;
}
.section-head .sub {
  margin-top: 36px;
  max-width: 640px;
  color: var(--c-text);
}

/* =========================================
   Concept (i-ne BUSINESS layout: text + staggered images)
========================================= */
.concept {
  background: var(--c-bg);
  position: relative;
  overflow: hidden;
}
.concept-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.concept-text .label {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--c-black);
  margin-bottom: 36px;
  display: block;
}
.concept-text h2 {
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--c-black);
  margin-bottom: 40px;
}
.concept-text h2 .line { display: block; }
.concept-text p {
  font-size: 15px;
  line-height: 2.2;
  color: var(--c-text);
  margin-bottom: 56px;
}
.concept-cta {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  cursor: pointer;
}
.concept-cta .circle {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--c-black);
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .3s ease, transform .3s ease;
}
.concept-cta .circle svg {
  width: 22px; height: 22px;
  stroke: #faf6ee;
  fill: none;
  stroke-width: 1.2;
  transition: transform .3s ease;
}
.concept-cta:hover .circle { background: #3d2e23; opacity: 1; }
.concept-cta:hover .circle svg { transform: translateX(3px); }
.concept-cta .label-link {
  font-size: 15px;
  color: var(--c-black);
  border-bottom: 1px solid var(--c-black);
  padding-bottom: 4px;
  letter-spacing: 0.06em;
}

/* Staggered tall portraits (i-ne BUSINESS style) */
.concept-images {
  position: relative;
  height: clamp(560px, 64vw, 820px);
}
.concept-images figure {
  position: absolute;
  overflow: hidden;
  background: var(--c-bg-soft);
  margin: 0;
}
.concept-images figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.2,.8,.2,1);
}
.concept-images figure:hover img { transform: scale(1.04); }

.concept-images .img-1 {
  top: 18%;
  left: 0;
  width: 30%;
  height: 74%;
}
.concept-images .img-2 {
  top: 30%;
  left: 35%;
  width: 30%;
  height: 74%;
}
.concept-images .img-3 {
  top: 0;
  right: 0;
  width: 30%;
  height: 80%;
}

@media (max-width: 900px) {
  .concept-grid { grid-template-columns: 1fr; gap: 56px; }
  .concept-images { height: clamp(420px, 90vw, 600px); }
  .concept-images .img-1 { top: 18%; left: 0; width: 30%; height: 72%; }
  .concept-images .img-2 { top: 30%; left: 35%; width: 30%; height: 72%; }
  .concept-images .img-3 { top: 0; right: 0; width: 30%; height: 78%; }
}

/* SP: stair-step は破綻しがちなので横スクロール（snap）に切替 */
@media (max-width: 700px) {
  .concept-text p br { display: none; }
  .concept-images {
    height: auto;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--pad-x));
    padding-inline: var(--pad-x);
    scroll-padding-inline: var(--pad-x);
  }
  .concept-images::-webkit-scrollbar { display: none; }
  .concept-images figure,
  .concept-images .img-1,
  .concept-images .img-2,
  .concept-images .img-3 {
    position: relative;
    top: auto; left: auto; right: auto;
    flex: 0 0 64vw;
    width: auto;
    height: auto;
    aspect-ratio: 3 / 4;
    scroll-snap-align: start;
  }
}

/* =========================================
   Service (isuru-baby section2 完全再現)
   ──────────────────────────────────────────
   document flow に：① h2(sticky top:14vh) ② imgs(sticky top:50vh, translateY -50%)
   ③ btn(sticky top:100vh) ④ ul(右側 50vw に position:relative で押し出し)
   ul は flow 上で①②③の下に位置し、自然スクロールで流れる。
   各 li は padding-bottom: 33vh で滞在量を作る。
   JS: li.getBoundingClientRect().top が viewport 中央 ±200px に入ったら .is-active
========================================= */
.service-pin {
  position: relative;
  padding: clamp(80px, 14vh, 200px) 0 clamp(80px, 10vh, 160px);
}
.svc-pin-inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ① 英大見出し: sticky 左上 */
.svc-pin-en {
  position: sticky;
  top: clamp(140px, 18vh, 220px);
  z-index: 4;
  display: block;
  width: fit-content;
  font-family: var(--font-en);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--c-black);
  line-height: 1;
}
.svc-pin-h2 {
  position: sticky;
  top: clamp(208px, 26vh, 296px);
  z-index: 4;
  display: block;
  width: fit-content;
  max-width: 30vw;
  margin: 14px 0 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--c-sub);
  line-height: 1.8;
}

/* ② 写真スタック: sticky 右側中央（16:9 横長、margin-left: auto で右寄せ） */
.svc-pin-imgs {
  position: sticky;
  top: 50vh;
  transform: translateY(-50%);
  z-index: 1;
  display: block;
  width: clamp(240px, 29.3vw, 427px);
  margin: clamp(48px, 8vw, 96px) clamp(0px, 4vw, 64px) 0 auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.svc-pin-photo {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .4s cubic-bezier(.165,.84,.44,1);
}
.svc-pin-photo.is-active { opacity: 1; }
.svc-pin-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ③ サービス一覧ボタン: sticky 画面下 */
.svc-pin-btn {
  position: sticky;
  top: calc(100vh - 96px);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: clamp(40px, 6vw, 80px) 0 0;
  width: fit-content;
  padding: 22px 36px;
  background: var(--c-black);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.22em;
  border-radius: 999px;
  transition: gap .25s ease;
}
.svc-pin-btn:hover { gap: 22px; opacity: 1; color: #fff; }
.svc-pin-btn .arrow { font-size: 14px; line-height: 1; }

/* ④ ul: 左 25vw に配置、幅 70vw で photo を覆う範囲まで広げる
   タイトルは ul の左端（25vw 付近）、photo は ul 中央〜右、番号は ul の右端（≒95vw） */
.svc-pin-list {
  position: relative;
  left: clamp(20%, 25vw, 28%);
  width: min(82vw, calc(100% - 10vw));
  list-style: none;
  padding: 0;
  /* document flow 上 ①②③ の下に位置するので、上に引き上げて最初の li を視覚的に上から見せる */
  margin: clamp(-580px, -44vw, -380px) 0 0;
  z-index: 2;
}
.svc-pin-list li {
  position: relative;
  padding: 0 0 33vh;
}
.svc-pin-list li:last-child { padding-bottom: 22vh; }

.svc-pin-list li a {
  display: block;
  text-decoration: none;
  color: #c8c8c8;
  transition: color .4s cubic-bezier(.165,.84,.44,1);
}
.svc-pin-list li.is-active a { color: var(--c-black); }

/* 番号: ul の右端に小さく */
.svc-pin-list li .num {
  position: absolute;
  top: 6px;
  right: 0;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: inherit;
  line-height: 1;
}
/* chunk: 番号と被らないよう右に余白 */
.svc-pin-list li .chunk {
  padding-right: clamp(36px, 5vw, 64px);
}
/* tit: 写真に被ってOK — ul の幅いっぱいまで広がれるが、英タイトルなので折返さない設計 */
.svc-pin-list li .tit {
  font-family: var(--font-en);
  font-size: clamp(20px, 2.8vw, 40px);
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.1;
  color: inherit;
  transition: color .4s cubic-bezier(.165,.84,.44,1);
  white-space: nowrap;       /* 写真上にはみ出ても折返さない */
}
/* sub_tit と lead: 写真より左に収まるよう max-width で制限し、適度に余白を */
.svc-pin-list li .sub_tit {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.7;
  margin-top: 15px;
  color: inherit;
  max-width: clamp(280px, 28vw, 420px);
}
.svc-pin-list li .lead {
  font-size: 14px;
  line-height: 2.1;
  color: inherit;
  margin-top: 30px;
  max-width: clamp(280px, 28vw, 420px);
}

/* ──────────────────────────────────────────
   タブレット縦・SP（≤1100px）: sticky 解除して通常の縦並びに
   ────────────────────────────────────────── */
@media (max-width: 1100px) {
  .service-pin { padding: clamp(72px, 10vw, 120px) 0; }
  /* SP は flex column にして、サービス一覧ボタンを svc-pin-list の後に並べ替え */
  .svc-pin-inner {
    display: flex;
    flex-direction: column;
  }
  .svc-pin-en  { order: 1; }
  .svc-pin-h2  { order: 2; }
  .svc-pin-list { order: 3; }
  .svc-pin-btn  { order: 4; }
  .svc-pin-en {
    position: relative;
    top: auto;
    font-size: 38px;
    margin-bottom: 16px;
  }
  .svc-pin-h2 {
    position: relative;
    top: auto;
    max-width: 100%;
    margin: 0 0 clamp(40px, 6vw, 64px);
  }
  .svc-pin-imgs { display: none; }      /* SP は写真スタック非表示 */
  .svc-pin-btn {
    position: relative;
    top: auto;
    margin: clamp(40px, 6vw, 56px) 0 0;
  }
  .svc-pin-list {
    position: relative;
    left: auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  .svc-pin-list li {
    padding: clamp(40px, 6vw, 64px) 0;
    border-top: 1px solid var(--c-line);
  }
  .svc-pin-list li:first-child { border-top: 1px solid var(--c-line); }
  .svc-pin-list li:last-child { padding-bottom: clamp(40px, 6vw, 64px); border-bottom: 1px solid var(--c-line); }
  .svc-pin-list li a { color: var(--c-black) !important; }
  .svc-pin-list li .tit { font-size: clamp(28px, 7vw, 44px); }
  /* SP: num を li の垂直中央に */
  .svc-pin-list li .num {
    top: 50%;
    transform: translateY(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-pin-photo,
  .svc-pin-list li a,
  .svc-pin-list li .tit { transition: none; }
}

/* =========================================
   About
========================================= */
.about {
  position: relative;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: center;
}
.about-visual {
  aspect-ratio: 5 / 6;
  background: var(--c-bg-soft);
  position: relative;
  overflow: hidden;
}
.about-visual img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: none;
}
.about h2 { margin-bottom: 36px; }
/* 旧 front-page.php インライン style から集約 */
.about .section-head { margin-bottom: 36px; }
.about-body p {
  font-size: 15px;
  line-height: 2.2;
  margin-bottom: 24px;
}
.about-body .btn { margin-top: 20px; }
/* CTA を about-body の外に出したぶんの余白（旧 about-body 内 p の流れに依存していた） */
.about .about-body + .concept-cta { margin-top: clamp(28px, 3vw, 40px); }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-visual { aspect-ratio: 4 / 3; }
  .about h2 { margin-bottom: 0; }
}

/* =========================================
   PICKUP PROJECT (dsrice.jp editorial style)
========================================= */
/* =========================================
   PICKUP PROJECT (yado magazine 風 3カラム編集レイアウト)
========================================= */
.pickup { background: #ffffff; overflow-x: clip; }   /* 2026-06-20 背景を白に（ユーザー指示） */
#pickup { padding-bottom: 0; }   /* 2026-06-20 #2384 下padding 180→0（この要素のみ） */

/* 2026-06-13 #1726/#1725: PICKUP の section-head 下マージン / section-foot 上マージンを 0 に */
.pickup > .container > .section-head { margin-bottom: 0; }
.pickup > .container > .section-foot { margin-top: 0; }

/* 2026-06-13 #1727: pickup-card-cat（カテゴリーラベル）を非表示 */
.pickup .pickup-card .pickup-card-cat { display: none; }

/* 2026-06-13 #1728: pickup-card-issue（Issue : 003）を縦書きでサムネイル右上に重ねる */
.pickup .pickup-card a { position: relative; display: block; }
.pickup .pickup-card .pickup-card-meta {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  margin: 0;
  padding: clamp(10px, 1.2vw, 16px) clamp(10px, 1.2vw, 16px);
  pointer-events: none;
  display: block;
}
.pickup .pickup-card .pickup-card-issue {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-en);
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
  display: inline-block;
}

/* 2026-06-13: qando.co.jp 風 水平カルーセル（横幅 100vw のダイナミックレイアウト版）
   - PC: viewport を container から break-out して 100vw、grid を JS で translateX
   - 各カード 約 22% 幅で 5枚 / focal は scale 1.15
   - 矢印は container の右端に bottom-right
*/
.pickup .pickup-slider {
  position: relative;
  margin-top: 0;
  /* 2026-06-13 #1690: controls をカード上に表示するため flex order を使う */
  display: flex;
  flex-direction: column;
}
.pickup .pickup-viewport { order: 2; }
.pickup .pickup-controls { order: 1; }
.pickup .pickup-viewport {
  /* container を抜けて viewport 100vw に拡張 */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  /* focal scale-up 分の余白（縦方向） */
  padding: clamp(40px, 5vw, 80px) 0;
}
.pickup .pickup-grid {
  display: flex;
  gap: clamp(20px, 2vw, 36px);
  margin: 0;
  /* 左端カードの一部クリップを作るため、初期 padding-left を入れる */
  padding-left: clamp(2vw, 4vw, 6vw);
  transition: transform 1s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.pickup .pickup-grid > * { min-width: 0; }
.pickup .pickup-card {
  display: block;
  /* 5 枚見せ：100vw から padding と gap を引いて 5 等分 */
  flex: 0 0 calc((100vw - clamp(2vw, 4vw, 6vw) - 4 * clamp(20px, 2vw, 36px)) / 5);
  transition: transform 1s cubic-bezier(.22,.61,.36,1),
              opacity 0.7s ease,
              filter 0.7s ease;
  transform: scale(0.84);
  transform-origin: center;
  opacity: 0.4;
  filter: saturate(0.7);
}
.pickup .pickup-card.is-focal {
  transform: scale(1.15);
  opacity: 1;
  filter: saturate(1);
  z-index: 2;
}
/* タブレット域：4 枚見せ */
@media (max-width: 1280px) {
  .pickup .pickup-card {
    flex: 0 0 calc((100vw - clamp(2vw, 4vw, 6vw) - 3 * clamp(20px, 2vw, 36px)) / 4);
  }
  .pickup .pickup-card.is-focal { transform: scale(1.12); }
}
/* 狭タブレット：3 枚見せ */
@media (max-width: 980px) {
  .pickup .pickup-card {
    flex: 0 0 calc((100vw - clamp(2vw, 4vw, 6vw) - 2 * clamp(20px, 2vw, 36px)) / 3);
  }
  .pickup .pickup-card.is-focal { transform: scale(1.08); }
}

/* 矢印（container の右端、カード上に配置 #1690） */
.pickup .pickup-controls {
  display: flex;
  gap: clamp(10px, 1vw, 16px);
  justify-content: flex-end;
  /* order:1 でカード上に配置されるため、下マージンで viewport と隙間をつくる */
  margin: 0 0 clamp(20px, 2vw, 32px);
}
.pickup .pickup-controls .pickup-arrow {
  width: clamp(52px, 4vw, 64px);
  height: clamp(52px, 4vw, 64px);
  border-radius: 50%;
  background: var(--c-black);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity .2s ease, transform .25s ease, background .25s ease;
}
.pickup .pickup-controls .pickup-arrow:hover:not(:disabled) {
  transform: translateY(-2px);
}
.pickup .pickup-controls .pickup-arrow:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}
.pickup .pickup-controls .pickup-arrow svg {
  width: 24px;
  height: 24px;
  display: block;
}
.pickup .pickup-card a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.pickup .pickup-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: clamp(14px, 1.6vw, 22px);
  font-family: var(--font-en);
  font-size: clamp(12px, 1vw, 13px);
  letter-spacing: 0.06em;
  color: var(--c-text);
  min-width: 0;
}
.pickup .pickup-card-cat {
  font-style: normal;
  color: var(--c-black);
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pickup .pickup-card-issue {
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.pickup .pickup-card-img {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-bg-soft);
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.pickup .pickup-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.pickup .pickup-card:hover .pickup-card-img img { transform: scale(1.04); }
.pickup .pickup-card-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--c-black);
  margin: 0 0 clamp(12px, 1.2vw, 16px);
}
.pickup .pickup-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0;
}
.pickup .pickup-card-tag {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-sub);
  font-weight: 400;
}

/* SP（≤900px）：scroll-snap ベースの 1 枚見せ
   PC の focal-scale は無効化、矢印は controls (bottom-right) に集約 */
@media (max-width: 900px) {
  .pickup .pickup-viewport {
    /* SP では 100vw 拡張は不要（container 内に収める） */
    width: auto;
    position: static;
    left: auto;
    transform: none;
    overflow: visible;
    padding: 0;
  }
  .pickup .pickup-grid {
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: clamp(16px, 4vw, 24px);
    padding: 0 12vw;
    margin: 0 calc(-1 * var(--pad-x));
    scrollbar-width: none;
    transform: none !important;
    filter: none;
  }
  .pickup .pickup-grid::-webkit-scrollbar { display: none; }
  .pickup .pickup-card {
    flex: 0 0 76vw;
    scroll-snap-align: center;
    /* focal scale を SP では無効化 */
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  /* controls は bottom-right のまま、サイズだけ調整 */
  .pickup .pickup-controls .pickup-arrow {
    width: 44px;
    height: 44px;
  }
}

/* =========================================
   NEW WORKS (dsrice.jp grid style)
========================================= */
.newworks { background: var(--c-bg-soft); }
.newworks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(40px, 4.5vw, 64px) clamp(24px, 2.8vw, 40px);
  margin-top: clamp(56px, 7vw, 88px);
  border-top: none;
  padding-top: 0;
}
.newworks-item {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.newworks-img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-bg);
  margin-bottom: 18px;
  position: relative;
}
.newworks-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s cubic-bezier(.2,.8,.2,1);
}
.newworks-item:hover .newworks-img img { transform: scale(1.04); }
.newworks-no {
  position: absolute;
  top: 12px;
  left: 14px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: #fff;
  z-index: 2;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.newworks-cat {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--c-sub);
  margin: 0 0 8px;
  text-transform: uppercase;
}
.newworks-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--c-black);
  letter-spacing: 0.04em;
  margin: 0;
}

@media (max-width: 800px) {
  .newworks-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .newworks-grid { grid-template-columns: 1fr; }
}

/* =========================================
   Process
========================================= */
.process-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--c-line);
}
.process-item {
  padding: 48px 24px;
  border-right: 1px solid var(--c-line);
  position: relative;
}
.process-item:last-child { border-right: none; }
.process-item .step {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--c-sub);
  margin-bottom: 20px;
}
.process-item .en-step {
  font-family: var(--font-en);
  font-size: 18px;
  letter-spacing: 0.08em;
  color: var(--c-black);
  margin-bottom: 16px;
}
.process-item h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--c-black);
  margin-bottom: 16px;
}
.process-item p {
  font-size: 13px;
  line-height: 1.9;
  color: var(--c-text);
}

@media (max-width: 900px) {
  .process-list { grid-template-columns: repeat(2, 1fr); }
  .process-item { border-bottom: 1px solid var(--c-line); }
  .process-item:nth-child(2n) { border-right: none; }
  .process-item:last-child { border-bottom: none; }
}
@media (max-width: 500px) {
  .process-list { grid-template-columns: 1fr; }
  .process-item { border-right: none; }
}

/* =========================================
   PROCESS Horizontal Slider (.proc-slider) — homepage PROCESS section
   isuru-baby aboutus 風の写真+テキスト横スクロールスナップ
========================================= */
.proc-slider { position: relative; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; }
.proc-slider .proc-viewport {
  overflow-x: auto; overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-padding-left: clamp(24px, 6vw, 112px);
}
.proc-slider .proc-viewport::-webkit-scrollbar { display: none; }
.proc-slider .proc-track {
  display: flex; gap: clamp(24px, 3vw, 48px);
  padding: 0 clamp(24px, 6vw, 112px);
  align-items: stretch;
}
.proc-slide {
  flex: 0 0 min(720px, 80vw);
  scroll-snap-align: start;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
}
.proc-slide .img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-bg-soft); }
.proc-slide .img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.8,.2,1); }
.proc-slide:hover .img img { transform: scale(1.04); }
.proc-slide .body { padding: clamp(8px, 1vw, 16px) 0; }
.proc-slide .body .num {
  font-family: var(--font-en); font-size: 12px; letter-spacing: 0.28em;
  color: var(--c-sub); display: block; margin-bottom: 12px;
}
.proc-slide .body .en {
  font-family: var(--font-en); font-style: normal; font-weight: 400;
  font-size: 18px; letter-spacing: 0.12em;
  color: var(--c-sub); margin-bottom: 14px; display: block;
  text-transform: uppercase;
}
.proc-slide .body h3 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 24px; font-weight: 500;
  letter-spacing: 0.08em; color: var(--c-black);
  margin-bottom: 24px; padding-bottom: 24px;
  border-bottom: 1px solid var(--c-line); line-height: 1.6;
}
.proc-slide .body p {
  font-size: 14px; line-height: 2.2;
  letter-spacing: 0.06em; color: var(--c-text);
}
.proc-controls {
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding: 0 clamp(24px, 6vw, 112px);
  display: flex; align-items: center; justify-content: center;
  gap: clamp(20px, 3vw, 40px);
}
.proc-arrow {
  width: 56px; height: 56px;
  border: 1px solid var(--c-line);
  border-radius: 999px; background: transparent;
  cursor: pointer; position: relative;
  transition: background .25s ease, border-color .25s ease;
  display: inline-flex; align-items: center; justify-content: center;
}
.proc-arrow:hover { background: var(--c-black); border-color: var(--c-black); }
.proc-arrow:hover::before { border-color: #fff; }
.proc-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.proc-arrow:disabled:hover { background: transparent; border-color: var(--c-line); }
.proc-arrow:disabled:hover::before { border-color: var(--c-black); }
.proc-arrow::before {
  content: ''; width: 8px; height: 8px;
  border-top: 1px solid var(--c-black);
  border-right: 1px solid var(--c-black);
  transition: border-color .25s ease;
}
.proc-arrow.prev::before { transform: rotate(-135deg) translate(-2px, -2px); }
.proc-arrow.next::before { transform: rotate(45deg) translate(-2px, -2px); }
.proc-dots { display: inline-flex; gap: 12px; align-items: center; }
.proc-dot {
  width: 28px; height: 1px; background: var(--c-line);
  border: none; padding: 0; cursor: pointer;
  transition: background .3s ease, width .3s ease;
}
.proc-dot.is-active { background: var(--c-black); width: 48px; }
@media (max-width: 800px) {
  .proc-slide { flex: 0 0 88vw; grid-template-columns: 1fr; gap: 24px; }
  .proc-slide .img { aspect-ratio: 16 / 11; }
  .proc-arrow { width: 44px; height: 44px; }
  .proc-arrow::before { width: 6px; height: 6px; }
}

/* =========================================
   Dark-aware sections (clasishome style: dark bg on scroll)
   Used by .tone and .about
========================================= */
.dark-aware {
  position: relative;
  background: var(--c-bg);
  color: var(--c-text);
  transition: background 1.1s cubic-bezier(.6,.1,.2,1), color 1.1s cubic-bezier(.6,.1,.2,1);
}
.dark-aware.is-dark {
  background: #1f2226;
  color: #e8e8e8;
}
.dark-aware.is-dark .section-head .en-label,
.dark-aware.is-dark .section-head h2 {
  color: #f4f4f4;
  transition: color 1.1s cubic-bezier(.6,.1,.2,1);
}
.dark-aware.is-dark .about-body p,
.dark-aware.is-dark .about-body strong,
.dark-aware.is-dark .label-link {
  color: #d8d8d8;
  transition: color 1.1s cubic-bezier(.6,.1,.2,1);
}
.dark-aware.is-dark .label-link {
  border-bottom-color: #d8d8d8;
}
.dark-aware.is-dark .concept-cta .circle {
  background: #f2f2f2;
}
.dark-aware.is-dark .concept-cta .circle svg {
  stroke: #1f2226;
}
.dark-aware.is-dark .concept-cta:hover .circle {
  background: #d8d8d8;
}

/* =========================================
   Tone Village (extends .dark-aware)
========================================= */
.tone-logo {
  display: block;
  width: clamp(140px, 14vw, 200px);
  height: auto;
  margin-bottom: 28px;
  filter: brightness(0) invert(1);
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(.6,.1,.2,1);
}
.dark-aware.is-dark .tone-logo { opacity: 1; }

.tone-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: center;
}

/* 旧 front-page.php インライン style から集約 */
.tone .section-head { margin-bottom: 36px; }
.tone .section-head h2 {
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 1.6;
  color: inherit;
  letter-spacing: 0.04em;
}

/* Slideshow stack */
.tone-slideshow {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #2c3036;
  overflow: hidden;
}
.tone-slideshow .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.4s cubic-bezier(.4,0,.2,1), transform 6s ease-out;
}
.tone-slideshow .slide.is-active {
  opacity: 1;
  transform: scale(1);
}
.tone-slideshow .slide img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.tone-slideshow .indicator {
  position: absolute;
  bottom: 24px;
  left: 24px;
  display: flex;
  gap: 6px;
  z-index: 3;
}
.tone-slideshow .indicator span {
  width: 24px; height: 1px;
  background: rgba(255,255,255,0.35);
  transition: background .4s ease;
}
.tone-slideshow .indicator span.is-active {
  background: #fff;
}
.tone-slideshow .counter {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: #fff;
  z-index: 3;
}

@media (max-width: 900px) {
  .tone-grid { grid-template-columns: 1fr; }
  .tone-slideshow { aspect-ratio: 4 / 3; }
}

/* =========================================
   Culture
========================================= */
.culture { background: var(--c-bg-soft); }
.culture-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
}
.culture-item .thumb {
  aspect-ratio: 3 / 4;
  margin-bottom: 20px;
  overflow: hidden;
  background: #eee;
}
.culture-item .thumb-inner {
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
}
.culture-item .name {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-black);
  margin-bottom: 6px;
}
.culture-item .role {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--c-sub);
}
.culture-foot {
  margin-top: clamp(48px, 6vw, 80px);
  text-align: center;
}

@media (max-width: 800px) {
  .culture-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================
   Media (Journal)
========================================= */
.media-cats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding: 12px 0;
  margin-bottom: clamp(36px, 4.5vw, 56px);
}
.media-cats a {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--c-sub);
  position: relative;
  padding-bottom: 2px;
  transition: color .25s ease;
}
.media-cats a.is-active {
  color: var(--c-black);
  font-weight: 500;
}
.media-cats a.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -13px;
  height: 1px;
  background: var(--c-black);
}
.media-cats a:hover {
  color: var(--c-black);
  opacity: 1;
}
.media-cats .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--c-black);
  color: #f2f2f2;
  font-family: var(--font-en);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1;
  transition: background .25s ease, color .25s ease;
}
.media-cats a:not(.is-active) .count {
  background: transparent;
  color: var(--c-sub);
  border: 1px solid var(--c-line);
}
.media-cats a:hover .count {
  background: var(--c-black);
  color: #f2f2f2;
  border-color: var(--c-black);
}
.media-cats a.is-all {
  color: var(--c-black);
  font-weight: 500;
  font-family: var(--font-en);
  letter-spacing: 0.18em;
  font-size: 12px;
  padding-right: clamp(20px, 2vw, 28px);
  margin-right: clamp(4px, 0.5vw, 8px);
  border-right: 1px solid var(--c-line);
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 3.5vw, 56px);
}
.media-card,
.media-item { display: block; }
.media-card .thumb,
.media-item .media-img {
  aspect-ratio: 16 / 10;
  background: var(--c-bg-soft);
  overflow: hidden;
  margin-bottom: 24px;
}
.media-item .media-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.media-item:hover .media-img img { transform: scale(1.04); }
.media-item .media-meta {
  display: flex; gap: 16px;
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: 0.18em;
  color: var(--c-sub); margin-bottom: 14px;
}
.media-item .media-title {
  font-size: 16px; font-weight: 500;
  color: var(--c-black); line-height: 1.8;
}
.media-card .thumb-inner {
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.media-card:hover .thumb-inner { transform: scale(1.04); }
.media-card .meta {
  display: flex;
  gap: 16px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--c-sub);
  margin-bottom: 14px;
}
.media-card h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--c-black);
  line-height: 1.8;
}

.media-foot { text-align: center; margin-top: clamp(60px, 7vw, 100px); }

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

/* =========================================
   Contact CTA (matsushitahome 3-column style)
========================================= */
.contact-cta {
  background: var(--c-bg);
  padding: clamp(80px, 10vw, 140px) 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  align-items: center;
  gap: 0;
}
.contact-intro {
  padding-right: clamp(32px, 5vw, 80px);
}
.contact-intro .en-label {
  font-family: var(--font-en);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--c-black);
  display: block;
  line-height: 1;
  margin-bottom: 16px;
}
.contact-intro .jp-sub {
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--c-text);
  margin-bottom: 40px;
}
.contact-intro .lead {
  font-size: 14px;
  line-height: 2;
  color: var(--c-text);
}

.contact-method {
  text-align: center;
  padding: clamp(24px, 3vw, 48px) clamp(20px, 3vw, 56px);
  border-left: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 320px;
  justify-content: center;
}
.contact-method .icon {
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: 24px;
}
.contact-method .icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--c-black);
  fill: none;
  stroke-width: 1.5;
}
.contact-method .label {
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--c-text);
  margin-bottom: 28px;
}
.contact-method .divider {
  width: 36px;
  height: 1px;
  background: var(--c-line);
  margin-bottom: 28px;
}
.contact-method .value {
  font-family: var(--font-en);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--c-black);
  line-height: 1.2;
  margin-bottom: 14px;
}
.contact-method .note {
  font-size: 12px;
  color: var(--c-sub);
  letter-spacing: 0.06em;
  line-height: 1.8;
}
.contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-black);
  color: #f2f2f2;
  padding: 22px 56px;
  font-size: 14px;
  letter-spacing: 0.16em;
  min-width: 220px;
  transition: background .3s ease, color .3s ease, opacity .3s ease;
  border: 1px solid var(--c-black);
}
.contact-btn:hover {
  background: transparent;
  color: var(--c-black);
  opacity: 1;
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-intro { padding-right: 0; margin-bottom: 32px; }
  .contact-method {
    border-left: none;
    border-top: 1px solid var(--c-line);
    min-height: auto;
    padding: 48px 0;
  }
}

/* =========================================
   Footer (matsushitahome style)
========================================= */
.site-footer {
  background: var(--c-bg);
  padding: clamp(80px, 9vw, 140px) 0 32px;
  border-top: 1px solid var(--c-line);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(32px, 4vw, 80px);
  margin-bottom: clamp(60px, 7vw, 100px);
}
.footer-brand .logo { height: 36px; }
.footer-brand p {
  margin-top: 28px;
  font-size: 13px;
  color: var(--c-sub);
  line-height: 2;
}
/* 2026-06-13: footer のスタイルは common.css に統一（旧 home.css 内の重複ルールを削除）
   重複により front-page で common.css の変更（h4 18px / margin 30px / border-top 0 等）が
   上書きされていたため。 */

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-offices { grid-template-columns: 1fr; }
}

/* =========================================
   Floating CTA
========================================= */
.float-cta {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  background: var(--c-black);
  color: #f2f2f2;
  padding: 16px 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .4s ease, transform .4s ease, background .3s ease;
}
.float-cta.show { opacity: 1; transform: translateY(0); }
.float-cta:hover { background: #3d2e23; opacity: 1; }
.float-cta .arrow { width: 16px; height: 1px; background: currentColor; position: relative; }
.float-cta .arrow::after {
  content: '';
  position: absolute; right: 0; top: 50%;
  width: 6px; height: 1px;
  background: currentColor;
  transform: rotate(40deg);
  transform-origin: right center;
}

/* =========================================
   Reveal animation (i-ne style)
========================================= */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1.2s cubic-bezier(.2,.8,.2,1), transform 1.2s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* Hero text reveal on initial load */
.hero-text > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.4s cubic-bezier(.2,.8,.2,1), transform 1.6s cubic-bezier(.2,.8,.2,1);
}
body.loaded .hero-text > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
body.loaded .hero-text > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.25s; }
body.loaded .hero-text > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.45s; }
body.loaded .hero-text > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }

.hero-line,
.hero-sns {
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(.2,.8,.2,1);
  transition-delay: 0.8s;
}
body.loaded .hero-line,
body.loaded .hero-sns { opacity: 1; }

/* Force header to scrolled-style while mega menu is open */
.site-header.mega-active {
  background: rgba(242,242,242,0.94);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom-color: var(--c-line);
}
.site-header.mega-active .logo img { filter: none; }
.site-header.mega-active .gnav > .nav-item > .nav-trigger,
.site-header.mega-active .gnav .cta-link { color: var(--c-black); border-color: var(--c-black); }
.site-header.mega-active .gnav > .nav-item > .nav-trigger::after { border-color: var(--c-black); }
.site-header.mega-active .nav-toggle span { background: var(--c-black); }

/* SP メニューのスタイルは common.css に一本化（旧重複ブロックを 2026-05-05 に削除）。
   home.css 側で .mega-menu { display: none !important } を持っていたため、
   common.css の display: block !important が打ち消されてアコーディオンが開かなくなっていた。 */

/* =========================================
   Custom cursor (fieldcorp.jp style)
========================================= */
@media (hover: hover) and (pointer: fine) {
  html.has-custom-cursor,
  html.has-custom-cursor body { cursor: none; }
  html.has-custom-cursor a,
  html.has-custom-cursor button,
  html.has-custom-cursor .nav-trigger,
  html.has-custom-cursor input,
  html.has-custom-cursor textarea,
  html.has-custom-cursor select,
  html.has-custom-cursor [role="button"],
  html.has-custom-cursor [data-cursor-hover] { cursor: none; }
  html.has-custom-cursor input[type="text"],
  html.has-custom-cursor input[type="email"],
  html.has-custom-cursor input[type="tel"],
  html.has-custom-cursor textarea { cursor: text; }
}
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  will-change: transform, width, height, opacity;
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ffffff;
  transition: width .25s ease, height .25s ease, opacity .25s ease;
}
.cursor-ring {
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 50%;
  transition: width .35s cubic-bezier(.2,.8,.2,1),
              height .35s cubic-bezier(.2,.8,.2,1),
              border-color .25s ease,
              opacity .25s ease,
              background .25s ease;
}
.cursor-ring.is-hover {
  width: 64px; height: 64px;
  background: rgba(255,255,255,0.08);
}
.cursor-dot.is-hover { width: 0; height: 0; opacity: 0; }
.cursor-dot.is-hidden,
.cursor-ring.is-hidden { opacity: 0; }
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* =========================================
   PROMOTION Slider — トップページの注力サービス スクエアカード
========================================= */
.promo {
  background: var(--c-bg);
  padding: clamp(80px, 9vw, 140px) 0;
  border-top: 1px solid var(--c-line);
}
/* apricot-design.com 互換：正方形バナー画像 + シンプルなキャプション */
.promo .proc-slide.promo-card {
  flex: 0 0 min(420px, 76vw);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  aspect-ratio: auto;
  overflow: visible;
  text-decoration: none;
  color: inherit;
  background: transparent;
  padding: 0;
  border: none;
  grid-template-columns: none;
  gap: 0;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.promo .proc-slide.promo-card:hover { transform: translateY(-4px); }

.promo .promo-card .img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-bg-soft);
  margin-bottom: clamp(16px, 1.6vw, 22px);
}
.promo .promo-card .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.promo .promo-card:hover .img img { transform: scale(1.04); }

.promo .promo-card .body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  text-align: center;
}
.promo .promo-card .body .tag {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--c-sub);
  text-transform: uppercase;
}
.promo .promo-card .body .title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--c-black);
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.promo .proc-slider .proc-track { padding-bottom: 0; }
.promo .proc-controls { margin-top: clamp(20px, 2.4vw, 32px); }

@media (max-width: 700px) {
  .promo .proc-slide.promo-card { flex: 0 0 72vw; }
  .promo .promo-card .body .title { font-size: 13px; line-height: 1.7; }
}

/* =========================================
   Front-page JOURNAL: 2-col with sticky categories
   ========================================= */
.media-2col {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.media-cats-col {
  position: relative;
}
.media-cats-sticky {
  position: sticky;
  top: 100px;
}
.media-cats-label {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--c-sub);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-line);
}
.media-cats-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.media-cats-list li { margin: 0; }
.media-cat-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 13px;
  color: var(--c-text);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color .25s ease, padding .25s ease;
}
.media-cat-link:hover { color: var(--c-black); padding-left: 6px; }
.media-cat-link.is-all {
  font-family: var(--font-en);
  letter-spacing: 0.18em;
  font-size: 12px;
  color: var(--c-black);
}
.media-cat-link .count {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--c-sub);
}

.media-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px clamp(24px, 2.5vw, 40px);
}

/* tablet/SP */
@media (max-width: 900px) {
  /* SP では .media セクション全体に min-width 縛り。画像のはみ出しを防ぐ */
  .media { overflow: hidden; }
  .media-2col {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 4vw, 32px);
  }
  .media-cats-col,
  .media-articles-col {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
  .media-cats-sticky {
    position: static;
    margin: 0;
    padding: 0;
    min-width: 0;
    max-width: 100%;
  }
  .media-cats-label { display: none; }
  .media-cats-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding: 0 0 4px;
    margin: 0;
    border-bottom: 0;
    list-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .media-cats-list::-webkit-scrollbar { display: none; }
  /* li は flex item として content 幅を確保（min-width: 0 だとピル同士が重なる） */
  .media-cats-list li {
    margin: 0;
    flex: 0 0 auto;
  }
  .media-cat-link {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    white-space: nowrap;
    flex: 0 0 auto;
    font-size: 12px;
    line-height: 1.4;
    color: var(--c-text);
  }
  .media-cat-link:hover { padding: 7px 14px; }
  .media-cat-link .count { display: none; }

  /* SP：記事グリッドは 1 カラム */
  .media-grid-2x2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 5vw, 40px);
    max-width: 100%;
  }
  /* グリッド子要素は min-width:0 で親サイズに収まるように */
  .media-grid-2x2 > .media-item,
  .media-item {
    min-width: 0;
    max-width: 100%;
  }
  .media-item .media-img {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  .media-item .media-img img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
  }
}

/* =========================================
   Front-page NEW WORKS: featured (latest 1) + grid (next 6)
   ========================================= */
.newworks-featured {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);   /* 社長指示 写真左/テキスト右に反転 */
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  margin-bottom: clamp(80px, 10vw, 140px);
  text-decoration: none;
  color: inherit;
}
.newworks-featured .nf-text {
  padding-left: clamp(0px, 2vw, 32px);   /* 反転に伴い右->左 */
}
.newworks-featured .nf-no {
  display: block;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--c-sub);
  margin-bottom: 14px;
}
.newworks-featured .nf-cat {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-sub);
  padding-bottom: 10px;
  margin-bottom: 0;
  border-bottom: 0;
  min-width: 90px;
}
.newworks-featured .nf-title {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 500;
  line-height: 1.7;
  color: var(--c-black);
  margin: 0 0 28px;
  letter-spacing: 0.02em;
}
.newworks-featured .nf-meta {
  font-size: 13px;
  color: var(--c-sub);
  letter-spacing: 0.06em;
  margin: 0;
}
.newworks-featured .nf-more {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(40px, 5vw, 64px);
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--c-black);
  border-bottom: 1px solid var(--c-black);
  padding-bottom: 6px;
  transition: gap .25s ease;
}
.newworks-featured:hover .nf-more { gap: 22px; }
.newworks-featured .nf-img {
  order: -1;   /* 写真を左へ（反転） */
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.newworks-featured .nf-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.2,.8,.2,1);
}
.newworks-featured:hover .nf-img img { transform: scale(1.04); }

@media (max-width: 800px) {
  .newworks-featured {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 36px);
    margin-bottom: clamp(48px, 8vw, 80px);
  }
  .newworks-featured .nf-img { order: -1; }
  .newworks-featured .nf-text { padding-left: 0; }
}

/* =========================================
   Front-page PICKUP PROJECT: magazine card grid
   ========================================= */
.pickup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 3.5vw, 72px);
  margin-bottom: clamp(60px, 7vw, 100px);
}
.pickup-card a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.pickup-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--c-line);
}
.pickup-card-cat {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--c-text);
}
.pickup-card-issue {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--c-sub);
}
.pickup-card-img {
  aspect-ratio: 3 / 4;
  background: var(--c-bg-soft);
  overflow: hidden;
  margin-bottom: 28px;
}
.pickup-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.pickup-card:hover .pickup-card-img img { transform: scale(1.04); }
.pickup-card-title {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 400;
  line-height: 2;
  color: var(--c-black);
  letter-spacing: 0.04em;
  margin: 0;
}
.pickup-card-tags {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-sub);
}
.pickup-card-tags .tag { white-space: nowrap; }

@media (max-width: 900px) {
  .pickup-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 4vw, 40px) clamp(20px, 3vw, 32px);
  }
}
@media (max-width: 600px) {
  .pickup-grid { grid-template-columns: 1fr; gap: clamp(36px, 6vw, 48px); }
}

/* ============================================================
 * 2026-06-20 websupport #2467-#2474: トップ SP セクション余白を 100px に統一
 *   #service 72→100 ／ #pickup 上80→100・下0維持 ／ #works・#media・#tone・#promo・.contact-cta 80→100
 *   スマホ帯（<768px）のみ。タブレット帯（768-1199）の余白調整は据え置き。
 * ============================================================ */
@media (max-width: 767px) {
  #service     { padding: 100px 0; }
  #pickup      { padding-top: 100px; padding-bottom: 0; }
  #works       { padding: 100px 0; }
  #media       { padding: 100px 0; }
  #tone        { padding: 100px 0; }
  #promo       { padding: 100px 0; }
  .contact-cta { padding: 100px 0; }
}

/* sp-only 改行ユーティリティ（PCでは非表示） */
.sp-br { display: none; }

/* ============================================================
 * 2026-06-20 websupport #2483-#2494: トップ SP 微調整（スマホ帯 <768px）
 * ============================================================ */
@media (max-width: 767px) {
  .sp-br { display: inline; }                                          /* #2490 tone h2 改行 */
  .svc-pin-list li .sub_tit { font-size: 14px; margin-top: 10px; }     /* #2483 16→14 / mt15→10 */
  .pickup .pickup-grid { margin-bottom: 30px; }                        /* #2484 下余白 0→30 */
  .newworks-grid { margin-top: 80px; }                                 /* #2485 上余白 56→80 */
  #media .section-head p.sub { display: none; }                        /* #2486 MEDIA sub 非表示 */
  .media-grid-2x2 { gap: 60px; }                                       /* #2487/89→#2523 gap 28→40→60 */
  .media-item .media-meta { margin-bottom: 5px; }                      /* #2488→#2522 下余白 14→10→5 */
  .tone .section-head h2 { font-size: 26px; line-height: 40px; }       /* #2490 22→26 / lh35.2→40 */
  #tone .about-body p:nth-of-type(2) { margin-bottom: 40px; }          /* #2491 下余白 24→40 */
  .tone-grid { gap: 60px; }                                            /* #2492 gap 40→60 */
}

/* ============================================================
 * 2026-06-20 websupport #2522-#2528: トップ SP 追補（スマホ帯 <768px）
 * ============================================================ */
@media (max-width: 767px) {
  #works .section-head .sub  { font-size: 14px; line-height: 26px; }   /* #2524 15→14 / lh30→26 */
  #pickup .section-head .sub { font-size: 14px; line-height: 26px; }   /* #2525 15→14 / lh30→26 */
  .svc-pin-list li .tit { font-size: 26px; }                           /* #2526 29→32（カード共通）*/
  #concept .concept-text p { font-size: 14px; line-height: 28px; }     /* #2527 15→14 / lh33→28 */
  #tone .about-body p { font-size: 14px; line-height: 28px; }          /* #2528 15→14 / lh33→28 */
}

/* 2026-06-20 websupport #2542: トップ SP PICKUP slider 上余白 0→20px */
@media (max-width: 767px) {
  #pickup .pickup-slider { margin-top: 20px; }
}

/* 2026-06-27 websupport #3747-#3751 トップ SP */
@media (max-width: 767px) {
  .newworks-featured .nf-cat { padding-bottom: 10px; }               /* #3747->#4185 */
  .newworks-featured .nf-title { margin-bottom: 10px; }              /* #3748 28->10 */
  .newworks-title { font-size: 16px; }                               /* #3749 15->16 */
  .newworks-cat { letter-spacing: 1px; }                             /* #3750 0.2em(2.4px)->1px */
  .media-item .media-title { font-weight: 700; line-height: 30px; }  /* #3751 500->700 / 28.8->30 */
}

/* 2026-06-27 websupport #3763-#3765 トップ SP */
@media (max-width: 767px) {
  .newworks-featured .nf-no { margin-bottom: 5px; }    /* #3763 14->5 */
  .newworks-featured .nf-more { margin-top: 30px; }    /* #3764 40->30 */
  body.home .contact-cta { padding-bottom: 60px; }     /* #3765 home限定 下100->60 */
}

/* ============== YOUTUBE セクション（トップ・モーダル再生） ============== */
.yt-section { padding: var(--section-py) 0; background: var(--c-bg); }
.yt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(40px, 5vw, 72px);
}
.yt-card {
  display: block; width: 100%;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.yt-thumb {
  display: block; position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover; background-position: center;
  background-color: var(--c-bg-soft);
  overflow: hidden;
}
.yt-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); color: #fff;
  border-radius: 999px;
  transition: background .3s ease, transform .3s ease;
}
.yt-card:hover .yt-play { background: rgba(0,0,0,0.82); transform: translate(-50%, -50%) scale(1.06); }
.yt-card-title {
  display: block; margin-top: 18px;
  font-size: 16px; font-weight: 500; line-height: 1.7;
  color: var(--c-black); letter-spacing: 0.04em;
}
/* modal */
.yt-modal {
  position: fixed; inset: 0; z-index: 10001;
  display: none; align-items: center; justify-content: center;
  padding: clamp(20px, 5vw, 60px);
}
.yt-modal.is-open { display: flex; }
.yt-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.88); }
.yt-modal-inner { position: relative; z-index: 1; width: min(1100px, 100%); }
.yt-modal-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.yt-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.yt-modal-close {
  position: absolute; top: -46px; right: 0;
  width: 40px; height: 40px;
  background: none; border: 0; color: #fff;
  font-size: 32px; line-height: 1; cursor: pointer;
}
@media (max-width: 800px) {
  .yt-grid { grid-template-columns: 1fr; gap: 32px; }
  .yt-modal-close { top: -42px; }
}

/* 2026-06-27 websupport #3775-#3778 PC：PICKUP / NEW WORKS の section-head を中央揃え */
@media (min-width: 801px) {
  #pickup .section-head, #pickup .section-head .sub,
  #works  .section-head, #works  .section-head .sub { text-align: center; }
}


/* 2026-06-27 websupport #3817/#3819-#3821 トップ（PC/SP 両方） */
#works .section-head, #works .section-head .sub { text-align: center; }   /* #3817 中央寄せ（SPにも適用） */
#youtube .section-head { margin-bottom: 60px; }                           /* #3819 section-head 下余白 96->60 */
#youtube { margin-top: clamp(90px, 10vw, 150px); }   /* journal と統合：movieブロックの上余白（旧 #3868 padding を移行） */


/* 2026-06-28 トップ journal(#media) をダーク化 / tone village を白に */
/* 2026-07-02 JOURNAL(#media) のダーク背景をフッターと同色 #333 に統一（社長指示）。他の dark-aware は #1f2226 のまま */
.media.dark-aware.is-dark { background: #333333; }
/* --- journal ダーク（dark-aware is-dark の追加スタイル：媒体固有要素） --- */
.media.dark-aware.is-dark .section-head .sub { color: #cfcfcf; }
.media.dark-aware.is-dark .media-cats-label { color: #b8b8b8; border-bottom-color: rgba(255,255,255,0.18); }
.media.dark-aware.is-dark .media-cat-link { color: #cfcfcf; }
.media.dark-aware.is-dark .media-cat-link:hover { color: #ffffff; }
.media.dark-aware.is-dark .media-cat-link.is-all { color: #ffffff; }
.media.dark-aware.is-dark .media-cat-link .count { color: #9a9a9a; }
.media.dark-aware.is-dark .media-item .media-meta { color: #a8a8a8; }
.media.dark-aware.is-dark .media-item .media-title { color: #f4f4f4; }

/* --- tone village を白背景に（dark-aware を外したぶんの補正） --- */
.tone { background: #ffffff; }
.tone .tone-logo { opacity: 1; filter: none; }


/* 2026-06-28 movie もダーク化（journalと同一セクション内） */
.media.dark-aware.is-dark .yt-card-title { color: #f4f4f4; }


/* 2026-06-28 #works の sub を実際に中央寄せ（max-width箱を中央へ） */
#works .section-head .sub { margin-left: auto; margin-right: auto; }


/* 2026-06-28 websupport #3915 #media CATEGORY ラベル 12->16 */
#media .media-cats-label { font-size: 16px; }


/* 2026-06-28 #pickup の section-head / sub も中央寄せ（#works と統一） */
#pickup .section-head, #pickup .section-head .sub { text-align: center; }
#pickup .section-head .sub { margin-left: auto; margin-right: auto; }


/* 2026-06-30 websupport #4086-#4091 SP: en-label / svc-pin-en を 44->38 */
@media (max-width: 767px) {
  .section-head .en-label { font-size: 38px; }
  .svc-pin-en { font-size: 38px; }
}

/* 2026-07-04 websupport #4198/#4199（この要素のみ・トップ） */
#works .section-head { margin-bottom: 60px; }          /* #4198 下96->60 */
#pickup > .container { padding-bottom: 170px; }        /* #4199 下0->170 */

/* 2026-07-04 websupport #4200-4205（この要素のみ・トップ） */
#youtube { margin-top: 80px; }                     /* #4200 上147->80 */
#youtube .section-head { margin-bottom: 40px; }    /* #4201 下60->40 */
#promo .section-head { margin-bottom: 60px; }      /* #4202 下96->60 */
#service .svc-pin-en { font-size: 60px; }          /* #4203 44->60 */
#service .svc-pin-h2 { font-size: 15px; }          /* #4204 14->15 */
#concept .label { font-size: 16px; }               /* #4205 13->16 */

/* 2026-07-04 websupport #4206-4213（この要素のみ・トップ） */
#service .svc-pin-en { padding-bottom: 10px; }                 /* #4206 */
#media .en-label { font-size: 60px; padding-bottom: 10px; }    /* #4207 44->60 */
#media .section-head h2 { font-size: 15px; }                   /* #4208 14->15 */
#media .media-cats-label { font-size: 18px; }                  /* #4209 16->18 */
#youtube .en-label { font-size: 60px; padding-bottom: 10px; }  /* #4210 44->60 */
#youtube .section-head h2 { font-size: 15px; }                 /* #4211 14->15 */
#promo .en-label { font-size: 60px; padding-bottom: 10px; }    /* #4212 44->60 */
#promo .section-head h2 { font-size: 15px; }                   /* #4213 14->15 */

/* 2026-07-04 websupport #4219-4221（SP・トップ） */
@media (max-width: 767px) {
  #works .section-head { margin-bottom: 30px; }                            /* #4219 */
  .newworks-grid { gap: 30px; }                                            /* #4220 */
  .en-label { font-size: 40px; margin-bottom: 10px; padding-bottom: 0; }   /* #4221 全en-label */
}

/* #4239 PC版: front WORKS の newworks-grid のみ gap 64/40->20/40・margin-top 88->60 */
@media (min-width: 768px) {
  #works .newworks-grid { gap: 40px 40px; margin-top: 60px; }   /* #4370 20->40 */
}

/* ===== websupport #4364-4366 (SP・トップ SERVICEリスト) ===== */
@media (max-width: 767px) {
  .svc-pin-list li .num { display: none; }        /* #4364 スマホは非表示 */
  .svc-pin-list li .chunk { padding: 0; }          /* #4365 padding 0 36 0 0 -> 0 */
  .svc-pin-list li .tit { font-size: 32px; }       /* #4366 26 -> 32px */
}

/* ===== websupport #4369 (SP・SERVICEリードを横幅いっぱいに) ===== */
@media (max-width: 767px) {
  .svc-pin-list li .lead { max-width: none; }   /* #4369 右余白解消 */
}

/* ===== JOURNAL + MOVIE を薄いグレー背景に（社長指示 2026-07-04） ===== */
.media { background: #f2f2f2; }

/* ===== websupport #4372 JOURNALカードのカテゴリ字間 2.2px->1px ===== */
.media-item .media-meta .cat { letter-spacing: 1px; }