@charset "UTF-8";
/* =========================================================
   MARUNI TOP (2026 renewal) — extracted from design handoff mock
   "Maruni TOP Final.html" <style>. Tokens must not be modified.

   SOURCE FILE: edit this file (top.scss), then compile with
   `npm run build:top`. Do not edit top.css directly (generated).
   ========================================================= */
/* TOKENS（:root / data-theme / data-paper / data-spacing / data-font）は
   css/common.scss へ移設した。common.css は top.css より前に読み込まれる。 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

html, body {
  background: var(--c-paper);
  color: var(--c-ink);
}

body {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 0.6s ease, color 0.6s ease;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

address {
  font-style: normal;
}

/* shared utility */
.eyebrow {
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-mute);
  font-weight: 400;
}

.sec-no {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--c-mute);
}

.tag-pill {
  display: inline-block;
  font-family: var(--f-display);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-ink-2);
  border: 1px solid var(--c-rule);
  padding: 7px 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--c-ink);
  padding: 16px 26px;
  transition: background 0.35s ease, color 0.35s ease;
}

.btn:hover {
  background: var(--c-brown);
  border-color: var(--c-brown);
  color: #f1ebe0;
}

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
}

.btn-text .ar {
  transition: transform 0.35s ease;
}

.btn-text:hover .ar {
  transform: translateX(6px);
}

/* =========================================================
   HEADER / MOBILE MENU は css/common.scss へ移設した。
   ここには TOP 専用の補助クラスだけを残す。
   ========================================================= */
/* SP-cloned bottom links (hidden on desktop) */
.sp-more {
  display: none;
}

/* Pro CTA: in-body on PC, below slideshow on SP */
.pro .grid .sp-pro-actions {
  display: none;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  background: #1a1714;
}

.hero .scene {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.8s ease, transform 7s ease;
}

.hero .scene.on {
  opacity: 1;
  transform: scale(1);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.6) 100%);
}

.hero .foot {
  position: absolute;
  left: var(--page-pad);
  right: var(--page-pad);
  bottom: 36px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.hero .scene-dots {
  display: flex;
  gap: 10px;
  align-items: center;
}

.hero .scene-dots button {
  width: 30px;
  height: 2px;
  background: rgba(255, 255, 255, 0.34);
  cursor: pointer;
  padding: 0;
}

.hero .scene-dots button.on {
  background: #fff;
}

.hero .scroll-ind {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0.85;
}

.hero .scroll-ind::after {
  content: "";
  width: 1px;
  height: 44px;
  background: #fff;
  animation: scrollLine 2.4s ease-in-out infinite;
  transform-origin: top;
}

@keyframes scrollLine {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.35);
  }
}
/* Hero text tone per scene */
.hero.tone-dark .foot {
  color: #14110e;
}

.hero.tone-dark .scene-dots button {
  background: rgba(20, 17, 14, 0.3);
}

.hero.tone-dark .scene-dots button.on {
  background: #14110e;
}

.hero.tone-dark .scroll-ind::after {
  background: #14110e;
}

.hero.tone-dark::after {
  opacity: 0.25;
}

/* =========================================================
   SECTION SCAFFOLD
   ========================================================= */
.section {
  padding: var(--section-v) var(--page-pad);
}

.section.alt {
  background: var(--c-paper-2);
}

.sec-label {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 18px;
  align-items: flex-start;
}

.sec-label .row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.sec-label .target {
  font-family: var(--f-display);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--c-mute);
}

.section-title {
  font-family: var(--f-display-jp);
  font-weight: 300;
  font-size: 45px;
  line-height: 1.32;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.section-title .phrase {
  display: inline-block;
  white-space: nowrap;
}

/* =========================================================
   03 CONCEPT
   ========================================================= */
.concept .grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(48px, 7vw, 130px);
  row-gap: 0;
  align-items: center;
  grid-template-areas: "media head" "media rest";
}

.concept .visual {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--c-paper-2);
  grid-area: media;
}

.concept .visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.concept .body-head {
  grid-area: head;
  align-self: end;
}

.concept .body-rest {
  grid-area: rest;
  align-self: start;
}

.concept .body-head .section-title {
  margin-top: 26px;
}

.concept .body-rest p {
  margin-top: 30px;
  max-width: 569px;
  font-size: 15.5px;
  line-height: 2.05;
  color: var(--c-ink-2);
}

.concept .body-rest .notes {
  margin-top: 34px;
  display: grid;
  gap: 8px;
}

.concept .body-rest .notes span {
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--c-mute);
  padding-left: 18px;
  position: relative;
}

.concept .body-rest .notes span::before {
  content: "—";
  position: absolute;
  left: 0;
}

.concept .body-rest .btn {
  margin-top: 48px;
}

/* =========================================================
   04 THE COLLECTION
   ========================================================= */
.collection .head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 96px);
}

.collection .head .section-title {
  margin-top: 26px;
}

.tabs {
  display: flex;
  gap: 36px;
  align-items: center;
  border-bottom: 1px solid var(--c-rule);
  margin-bottom: clamp(40px, 5vw, 72px);
}

.tabs button {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-mute);
  padding: 0 0 18px;
  position: relative;
  cursor: pointer;
}

.tabs button.on {
  color: var(--c-ink);
}

.tabs button.on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--c-ink);
}

.coll-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--col-gutter);
}

/* Slider mode: >4 items → horizontal scroll, 4 visible */
.coll-grid.slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.coll-grid.slider::-webkit-scrollbar {
  display: none;
}

.coll-grid.slider .coll-card {
  flex: 0 0 calc((100% - 3 * var(--col-gutter)) / 4);
  scroll-snap-align: start;
}

.coll-wrap {
  position: relative;
}

.coll-nav {
  display: none;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 28px;
}

.coll-nav.show {
  display: flex;
}

.coll-nav button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-rule);
  display: grid;
  place-items: center;
  font-size: 15px;
  color: var(--c-ink);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.coll-nav button:hover {
  background: var(--c-brown);
  color: #f1ebe0;
  border-color: var(--c-brown);
}

.coll-nav button:disabled {
  opacity: 0.3;
  pointer-events: none;
}

.coll-card {
  cursor: pointer;
  display: block;
  color: inherit;
  text-decoration: none;
}

.coll-card .img {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--c-paper-2);
}

.coll-card .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.coll-card:hover .img img {
  transform: scale(1.04);
}

.coll-card .meta {
  padding-top: 22px;
  border-top: 1px solid var(--c-rule);
  margin-top: 22px;
}

.coll-card .name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.06em;
}

.coll-card .sub {
  font-family: var(--f-display-jp);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--c-ink-2);
  margin-top: 6px;
}

.coll-card .sub.en {
  font-family: var(--f-display);
  letter-spacing: 0.06em;
}

.coll-note {
  margin-top: 32px;
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--c-mute);
}

.concept .visual.video {
  aspect-ratio: 4/5;
  background: #000;
}

/* 動画は縦長 4:5 / 横長 16:9 の 2 本を画面幅で出し替える（js/top.js）。どちらも
   コンテナの比率と一致するので、はみ出しを切るのではなく枠いっぱいに敷く
   （16:9 の 1 本を 4:5 の枠に cover で押し込んでいた頃の指定を置き換えた）。 */
.concept .visual.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================================================
   05 FOR PROFESSIONALS
   ========================================================= */
.pro .grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(48px, 6vw, 110px);
  align-items: center;
}

.pro .body .section-title {
  margin-top: 26px;
  white-space: nowrap;
}

.pro .body p {
  margin-top: 36px;
  font-size: 15.5px;
  line-height: 2;
  color: var(--c-ink-2);
  max-width: 44ch;
}

.pro .chips {
  margin-top: 40px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pro .actions {
  margin-top: 48px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.pro .visual {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--c-paper-2);
}

.pro .visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pro .visual .cap {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 22px 26px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  color: #fff;
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.14em;
}

/* スライド全体を納入事例へのリンクにする。スライドと同じ枠を占める箱にしてあるので、
   中の img（枠いっぱい）と .cap（下に重ねる）の見え方は a が無かったときと同じ。
   display:contents にしないのは、箱を持たない a にはフォーカス枠が出ないため。 */
.pro .visual .slide-link {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
  text-decoration: none;
}

/* .visual が overflow:hidden なので、枠の外に描かれる既定のフォーカス枠は刈られる。
   内側へオフセットして出す（写真の上に乗るため白）。 */
.pro .visual .slide-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
}

/* For Professionals slideshow */
/* 4 枚が同じ場所に重なっているので、表示中以外はクリックもフォーカスも受けないようにする。
   opacity だけだと、最前面（最後に出力したスライド）が透明なまま全部のクリックを奪い、
   見えている事例とは別のページへ飛ぶ。visibility はフェードが終わるまで遅れて切り替わる。 */
.pro .slideshow .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1.1s ease, visibility 1.1s ease;
}

.pro .slideshow .slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.pro .slideshow .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pro .slideshow .dots {
  position: absolute;
  right: 22px;
  bottom: 22px;
  display: flex;
  gap: 8px;
  z-index: 3;
}

.pro .slideshow .dots .dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  border: 0;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.pro .slideshow .dots .dot.active {
  background: #fff;
  transform: scale(1.25);
}

/* =========================================================
   06 CRAFTSMANSHIP & SUSTAINABILITY
   ========================================================= */
.craft .section-title {
  margin-top: 26px;
}

.craft .cards {
  margin-top: clamp(56px, 6vw, 96px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--col-gutter);
}

/* カード全体をコラムへのリンクにする。中の要素はどれもブロックで通常フローに積むだけなので、
   a をブロックにしても並びは article.card の直下にあったときと変わらない
   （display:contents にすると箱が無くフォーカス枠が出ないため、ブロックにしている）。 */
.craft .card .card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.craft .card .img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--c-paper);
}

.craft .card .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s ease;
}

.craft .card:hover .img img {
  transform: scale(1.04);
}

.craft .card .numrow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 26px;
}

.craft .card .num {
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--c-mute);
}

.craft .card .en {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--c-mute);
}

.craft .card h4 {
  font-family: var(--f-display-jp);
  font-weight: 500;
  font-size: 19px;
  margin-top: 10px;
  letter-spacing: 0.02em;
}

.craft .card p {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--c-ink-2);
}

.craft .more {
  margin-top: clamp(48px, 5vw, 72px);
}

/* =========================================================
   07 MAINTENANCE & EXPERIENCE
   ========================================================= */
.maint .cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gutter);
}

.maint .card .img {
  aspect-ratio: 16/11;
  overflow: hidden;
  background: var(--c-paper-2);
}

.maint .card .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s ease;
}

.maint .card:hover .img img {
  transform: scale(1.04);
}

.maint .card .body {
  padding-top: 34px;
}

.maint .card h4 {
  font-family: var(--f-display-jp);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.02em;
}

.maint .card p {
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--c-ink-2);
}

.maint .card .btn-text {
  margin-top: 30px;
}

/* =========================================================
   08 #MARUNI
   ========================================================= */
.ugc .head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.ugc .head h3 {
  font-family: var(--f-display-jp);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 52px);
  letter-spacing: 0.01em;
  margin-top: 22px;
}

/* 中身は VISUMO の公式ウィジェットが差し込む（ul.ecbn-selection-snap > li.ecbn-selection-item）。

   以前は data-type="selection"（提供元の既定＝スライダー）のまま、こちらの CSS で6列グリッドに
   上書きしてタイルに見せていた。2026-09-21 にステージングで実表示したところ、提供元の JS が
   .ecbn-selection-snap に inline で `width: 5195.1px`（全件ぶんのスライダー軌道幅）を当てており、
   その幅を repeat(6,1fr) が6分割して1枚840pxになり、1件しか見えない状態だった
   （「提供元がスライダー用に inline style を足す可能性」という当時の懸念が的中した形）。

   そこで data-type="selection-tile"（提供元の公式タイル型）へ変更し、ラッパも受領タグどおり
   `.vsm-tile` に揃えた（`.vsm-ugc` はグリッド上書きの起点として残していたもので、
   上書きを撤去した今は維持する理由が無い。提供元がセレクション単位で配信する CSS が
   `.vsm-tile` 起点でスコープされていた場合にも当たる）。
   **列数・行数・見出しの有無は VISUMO 管理画面のデザイン編集で指定する**方針にした。
   data-* 属性に列数を指定する口は無い。

   ⚠ selection-tile は提供元の __innerTilesView が item に `width: N%` と `position: absolute` を
   inline で当てて座標配置する。inline は詳細度で勝てないため、**こちらで display:grid / flex による
   再配置はできない（やると干渉して壊れる）**。列の組み立ては提供元に任せ、
   ここで触るのは「提供元が付ける幅の上限」「タイルの余白」「画像の敷き方と hover 演出」だけにしてある。 */
/* 列の実幅がセクションの内幅より狭くなる（右に余りが出る）のを解放する。
   提供元の配信 CSS が .ecbn-selection-widget と .ecbn-selection-content に max-width: 1200px を、
   .ecbn-selection-page-wrapper に margin: 0 5px!important を当てるため、
   列の実幅が 1200 - 10 = 1190px で止まっていた。 */
.section.ugc .vsm-tile .ecbn-selection-widget {
  max-width: none;
  margin-inline: 0;
}

.section.ugc .vsm-tile .ecbn-selection-content {
  max-width: none;
}

.section.ugc .vsm-tile .ecbn-selection-page-wrapper {
  margin-inline: 0 !important;
}

/* 提供元の JS は列（.ecbn-selection-snap）を一度 width: 100% にして実測し、
   各タイルに「100 ÷ 列数 %」の幅と絶対座標を inline で当てる。
   タイルの外寸＝実測幅 ÷ 列数、列の最終幅＝外寸 × 列数 という作りなので、
   実測させる幅を 1 ガターぶんだけ広げておくと、右ガターを除いた見た目のタイルが
   (内幅 - ガター × (列数 - 1)) ÷ 列数 ＝ デザインの寸法になり、最後の列の右端が内幅の右端に揃う。
   広げたぶん（1 ガター）は列の外へはみ出すが、セクション左右の padding の内側に収まる。
   JS が inline で width を書くため、ここは !important でないと負ける。 */
.section.ugc .vsm-tile .ecbn-selection-snap {
  list-style: none;
  margin: 0;
  padding: 0;
  width: calc(100% + var(--col-gutter)) !important;
}

/* タイル間の余白。提供元も「各タイルの右と下の padding」で溝を作る作り（既定 10px）なので、
   同じやり方でデザインのガター値に合わせる。margin で足すと JS が外寸として読み取ってしまい、
   列全体が溢れて座標がずれる。 */
.section.ugc .vsm-tile .ecbn-selection-item {
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 var(--col-gutter) var(--col-gutter) 0;
}

/* 正方形のタイル枠。提供元のタイル用 CSS と同じ作りにしてある
   （padding-top: 100% で 1:1、position: relative で中の画像の位置の基準になり、
   overflow: hidden で hover の拡大を枠の中で切る）。
   ここに height: 100% を書くと枠が padding-top ぶんの高さを失い、
   画像がタイルの padding（＝ガター）まで広がって余白が見えなくなる。 */
.section.ugc .vsm-tile .ecbn-selection-item > div {
  display: block;
  width: 100%;
}

.section.ugc .vsm-tile .ecbn-selection-item > div > a {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  padding-top: 100%;
}

/* 画像は枠いっぱいに敷く。提供元は left/top: 50% と translate(-50%,-50%) で中央寄せしているが、
   hover の transform(scale) がその translate を打ち消して画像がずれるため、
   枠の左上に固定したうえで拡大する。 */
.section.ugc .vsm-tile .ecbn-selection-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  transition: transform 0.9s ease;
}

.section.ugc .vsm-tile .ecbn-selection-item:hover .ecbn-selection-image {
  transform: scale(1.07);
  opacity: 1;
}

/* 投稿者名・キャプションの重ね表示はモックに無い。写真をタップしたときのライトボックスには出る */
.section.ugc .vsm-tile .ecbn-selection-detail {
  display: none;
}

/* 「More」ボタン（提供元が描画する .ecbn-selection-image-loading-more > a）はデザインに無い。
   このセレクションは他のサイトでもグリッド以外の表示で使われており、提供元の管理画面側で
   非表示にはできないため、ここで消す。
   提供元の JS は読み込みの状況に応じてこの要素に jQuery の show() / hide() をかけ、
   show() が inline の display を書き戻すため、!important でないと再表示される。
   見出し右の「コーディネートをもっと見る」が同じ役割を持つ。 */
.section.ugc .vsm-tile .ecbn-selection-image-loading-more {
  display: none !important;
}

.ugc .note {
  margin-top: 28px;
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--c-mute);
}

/* =========================================================
   09 NEWS & ONLINE SHOP
   ========================================================= */
.news .head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  margin-bottom: clamp(36px, 4vw, 56px);
}

.news .head h3 {
  font-family: var(--f-display-jp);
  font-weight: 300;
  font-size: clamp(26px, 3vw, 46px);
  margin-top: 22px;
  letter-spacing: 0.01em;
}

.news .list {
  border-top: 1px solid var(--c-rule);
}

.news .item {
  display: grid;
  grid-template-columns: 140px 110px 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--c-rule);
  cursor: pointer;
  transition: padding 0.3s ease;
}

.news .item:hover {
  padding-left: 14px;
}

.news .item .date {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-mute);
}

.news .item .cat {
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ink-2);
  border: 1px solid var(--c-rule);
  padding: 3px 0;
  line-height: 1.5;
  text-align: center;
}

.news .item .ttl {
  font-size: 15px;
}

.news .item .ar {
  font-family: var(--f-display);
  font-size: 14px;
  color: var(--c-mute);
}

.shop-banner {
  margin-top: clamp(48px, 6vw, 90px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  padding: clamp(40px, 4vw, 64px) clamp(40px, 5vw, 80px);
  background: var(--c-paper-2);
}

[data-theme=dark] .shop-banner {
  background: var(--c-card);
}

.shop-banner .t {
  font-family: var(--f-display);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.shop-banner .d {
  margin-top: 12px;
  font-size: 14px;
  color: var(--c-ink-2);
}

.store-banner {
  margin-top: var(--col-gutter);
  padding: clamp(32px, 4vw, 56px);
  background: var(--c-paper-2);
}

[data-theme=dark] .store-banner {
  background: var(--c-card);
}

.store-banner .sb-head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}

.store-banner .sb-head .t {
  font-family: var(--f-display);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.store-banner .sb-head .d {
  font-size: 14px;
  color: var(--c-ink-2);
}

.store-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.store-grid .store {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

[data-theme=dark] .store-grid .store {
  background: var(--c-bg);
}

.store-grid .store:hover {
  transform: translateY(-3px);
}

.store-grid .store .city {
  font-family: var(--f-display-jp);
  font-weight: 500;
  font-size: 17px;
}

.store-grid .store .en {
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-mute);
}

.store-grid .store .go {
  margin-top: 18px;
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c-ink-2);
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.store-grid .store:hover .go .ar {
  transform: translateX(3px);
}

.store-grid .store .go .ar {
  transition: transform 0.25s ease;
}

.store-banner .store-find {
  margin-top: 24px;
  display: flex;
  width: 100%;
  justify-content: center;
}

/* FOOTER は css/common.scss へ移設した。 */
/* =========================================================
   BACK TO TOP
   ========================================================= */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--c-paper) 88%, transparent);
  border: 1px solid var(--c-rule);
  color: var(--c-ink);
  display: grid;
  place-items: center;
  font-size: 13px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s, background 0.25s ease;
  backdrop-filter: blur(8px);
}

.to-top.show {
  opacity: 0.82;
  visibility: visible;
  transform: translateY(0);
}

.to-top:hover {
  opacity: 1;
  background: var(--c-brown);
  color: #f1ebe0;
  border-color: var(--c-brown);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1000px) {
  .coll-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .craft .cards {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .concept .grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: "head" "media" "rest" !important;
    row-gap: 28px !important;
  }
  .concept .body-head {
    margin-bottom: 24px;
  }
  .concept .body-head .section-title {
    margin-top: 0;
  }
  .pro .grid, .maint .cards, .shop-banner, .collection .head, .ugc .head, .news .head {
    grid-template-columns: 1fr !important;
  }
  /* list links → hidden in head, shown centered at section bottom */
  .collection .head .btn-text, .ugc .head .btn-text, .news .head .btn-text {
    display: none;
  }
  .sp-more {
    display: flex;
    width: max-content;
    margin: 40px auto 0;
  }
  .craft .more {
    display: flex;
    width: max-content;
    margin: 36px auto 0;
  }
  .store-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .coll-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ---- Smartphone (SP) ---- */
@media (max-width: 760px) {
  /* Hero */
  .hero {
    height: 86vh;
    min-height: 520px;
  }
  .hero .foot {
    bottom: 20px;
  }
  .hero .scroll-ind {
    display: none;
  }
  /* Section headings */
  .section-title, .section-title[style],
  .ugc .head h3, .ugc .head h3[style],
  .news .head h3, .news .head h3[style] {
    font-size: 25px !important;
    line-height: 1.5;
    white-space: normal !important;
    text-wrap: initial;
    font-weight: 300;
    font-family: var(--f-display-jp);
  }
  .section-title br {
    display: none;
  }
  .pro .body .section-title {
    white-space: normal;
  }
  /* Concept: video 16:9 on SP（16:9 版の動画に合わせる） */
  .concept .visual.video {
    aspect-ratio: 16/9;
  }
  .concept .body-rest p {
    font-size: 14.5px;
    line-height: 1.95;
    max-width: none;
    margin-top: 0;
  }
  .concept .body-rest .btn {
    margin-top: 32px;
    width: 100%;
    justify-content: center;
  }
  /* Collection: always horizontal slide on SP (Cassina-style) */
  .coll-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
  }
  .coll-grid::-webkit-scrollbar {
    display: none;
  }
  .coll-grid .coll-card, .coll-grid.slider .coll-card {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }
  .coll-nav {
    display: flex;
    justify-content: center;
    margin-top: 22px;
  }
  .coll-nav button {
    width: 40px;
    height: 40px;
  }
  .coll-card .meta {
    padding-top: 14px;
    margin-top: 14px;
  }
  .coll-card .name {
    font-size: 14px;
  }
  /* Tabs scroll horizontally */
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    gap: 26px;
  }
  .tabs::-webkit-scrollbar {
    display: none;
  }
  .tabs button {
    white-space: nowrap;
    padding-bottom: 14px;
  }
  /* Pro */
  .pro .grid {
    gap: 32px;
  }
  .pro .body p {
    font-size: 14.5px;
    max-width: none;
    margin-top: 24px;
  }
  .pro .body .actions {
    display: none !important;
  }
  .sp-pro-actions {
    display: flex !important;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
  }
  .sp-pro-actions .btn {
    flex: 1;
    justify-content: center;
    min-width: 140px;
    padding: 14px 18px;
  }
  /* Craft — horizontal scroll on SP */
  .craft .cards {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    margin-top: 32px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: var(--page-pad);
    margin-left: calc(var(--page-pad) * -1);
    margin-right: calc(var(--page-pad) * -1);
    padding: 0 var(--page-pad);
  }
  .craft .cards::-webkit-scrollbar {
    display: none;
  }
  .craft .cards {
    scrollbar-width: none;
  }
  .craft .card {
    flex: 0 0 76%;
    scroll-snap-align: start;
  }
  .craft .card .numrow {
    margin-top: 18px;
  }
  .craft .more {
    margin-top: 32px;
  }
  /* Maintenance */
  .maint .cards {
    gap: 40px;
  }
  .maint .card .body {
    padding-top: 22px;
  }
  .maint .card h4 {
    font-size: 20px;
  }
  /* UGC: 横スクロール（デザインの 760px 以下の指定。タイル 1 枚が列の幅の 56%・gap 10px）。
     提供元の selection-tile は画面幅に関係なく「列数 × 行数」のタイルを平らに座標配置するため、
     SP でも 6 列 1 行のまま出てきて、タイル 1 枚が 57px 四方まで潰れていた。
     提供元に SP 用の横スクロール表示は無いので、ここで組み替える。
     （同じ実装を以前はスライダー型向けに持っていたが、公式タイル型へ差し替えた際に
     レイアウト上書きをまとめて撤去したとき、一緒に落ちていた。）

     提供元の JS（__innerTilesView）は snap に width / height、item に width / position: absolute / left を
     inline で書く。リサイズ時も 200ms のデバウンスのあと同じ 3 つを再計算して書き戻すため、
     打ち消す側は !important でないと回転・リサイズで負ける。影響を 760px 以下に閉じるため、
     このメディアクエリの中だけで行う。!important を付けているのは inline に当たる次の 3 つだけ。
     - snap の width / height：座標配置用の実寸（行ごとの高さを含む）を解いてスクロールの器にする
     - item の position: absolute：絶対配置のままではフローから外れて flex で並ばない（left は static で無効になる）
     - item の width（「100 ÷ 列数」%）：56% 幅で並べるために解く
     display / overflow-x / gap は inline でも !important でも当てられていない（提供元の共通 CSS と
     管理画面から配信される CSS を実取得して確認済み）ので、このセレクタの詳細度で足りる。
     余白は PC では提供元と同じ padding で作っているが、ここでは flex の gap で作るので padding を外す
     （残すと 56% の内側がガターぶん削られて正方形の枠が小さくなる）。
     タイルの正方形は内側の a の padding-top: 100%（PC と共通）が作るので、ここでは指定しない。 */
  .ugc .head {
    gap: 16px;
  }
  .section.ugc .vsm-tile .ecbn-selection-snap {
    display: flex;
    width: auto !important;
    height: auto !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
  }
  .section.ugc .vsm-tile .ecbn-selection-snap::-webkit-scrollbar {
    display: none;
  }
  .section.ugc .vsm-tile .ecbn-selection-item {
    position: static !important;
    width: auto !important;
    padding: 0;
    flex: 0 0 56%;
    scroll-snap-align: start;
  }
  /* News: date+cat row, title below, arrow right */
  .news .head {
    gap: 16px;
  }
  .news .item {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px 16px;
    padding: 18px 0;
    align-items: center;
  }
  .news .item .date {
    grid-column: 1;
    grid-row: 1;
    font-size: 11px;
  }
  .news .item .cat {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    padding: 2px 10px;
    font-size: 9px;
    line-height: 1.5;
  }
  .news .item .ttl {
    grid-column: 1/3;
    grid-row: 2;
    font-size: 14px;
    line-height: 1.7;
  }
  .news .item .ar {
    grid-column: 3;
    grid-row: 1/3;
    align-self: center;
  }
  .news .item:hover {
    padding-left: 0;
  }
  /* Back to top: keep clear of the thumb zone edge */
  .to-top {
    right: 16px;
    bottom: 16px;
    width: 38px;
    height: 38px;
  }
}
@media (max-width: 420px) {
  .coll-grid .coll-card, .coll-grid.slider .coll-card {
    flex: 0 0 84%;
  }
}
/* =========================================================
   ADDITIONS (post-handoff changes)
   ========================================================= */
/* ヒーローの「Scroll」インジケーターをクリック可能に */
.hero .scroll-ind {
  cursor: pointer;
}

/* 動的化: topslides から生成するシーンは PC/SP で背景画像を切り替える
   （--bg-pc / --bg-sp は _codes/home.php がインラインで出力） */
.hero .scene.dyn {
  background-image: var(--bg-pc);
}

@media (max-width: 760px) {
  .hero .scene.dyn {
    background-image: var(--bg-sp);
  }
}
/* 動的化: 新着情報の行を <a> 化したことに伴うリセット */
.news a.item {
  color: inherit;
  text-decoration: none;
}

/*# sourceMappingURL=top.css.map */