@charset "UTF-8";
/* ================================================================
   MASTERWAL WORKPLACE 特集ページ 共通スタイル
   ----------------------------------------------------------------
   対象ページ
     /shop/r/r5005/    WORKPLACE TOP
     /shop/r/r500510/  EXECUTIVE
     /shop/r/r500520/  FREE ADDRESS
     /shop/r/r500530/  WORKING AREA
     /shop/r/r500540/  MEETING AREA

   設置方法（いずれか）
     A) このファイルを /css/usr/ に配置し、各ページの
        上部HTMLブロック先頭に link タグを1行入れる
          <link rel="stylesheet" href="/css/usr/workplace.css">
     B) サイトのテーマCSSに、このファイルの内容を追記する
        （その場合 link タグは不要です）

   全セレクタが .mwwp- プレフィックスで閉じているため、
   サイト全体に読み込ませても他ページには影響しません。
   例外は html{overflow-x:clip} と :root の変数定義のみです。

   調整用の変数（:root で定義）
     --mwwp-topgap    上端に余白が残る場合の打ち消し量
     --mwwp-botgap    下端に余白が残る場合の打ち消し量
     --mwwp-innerpad  商品一覧とセクションの左右位置の微調整
     --mwwp-sppad     SP時（1023px以下）の全セクション左右余白（既定 15px）
   ================================================================ */

/* ===== ページ固有の非表示指定 =====
   ecbeing の「最近見た商品」ブロックを非表示にします。
   PC/SPでid名や大文字小文字が異なる実装があるため、
   id・class の部分一致（大文字小文字を区別しない）でまとめて指定しています。
   ※CSSでの非表示のためHTML自体は出力されます。出力自体を止める
     場合は ecbeing のページ設定でブロックを外してください。 */
#goodsdetail_itemhistory,
[id*="itemhistory" i],
[class*="itemhistory" i],
[id*="item_history" i],
[class*="item_history" i]{display:none !important}

/* ===== MASTERWAL WORKPLACE : scoped styles (A/B共通トークン) ===== */
.mwwp-head,.mwwp-foot{
  --mwwp-ink:#1A1A1A;
  --mwwp-grey:#7D7A75;
  --mwwp-bronze:#9C8459;
  --mwwp-bronze-lt:#C4B189;
  --mwwp-hair:rgba(26,26,26,.14);

  /* * カタログ表紙のワインレッド（暫定値・要差し替え） */
  --mwwp-wine:#5C2E35;
  --mwwp-wine-dp:#4A2329;

  --mwwp-en:"Helvetica Neue","Helvetica Neue LT Std",Helvetica,Arial,sans-serif;
  --mwwp-pad:clamp(20px,5.2vw,86px);
  color:var(--mwwp-ink);
  font-weight:300;
  line-height:2.15;
  letter-spacing:.10em;
}
.mwwp-head *,.mwwp-foot *{box-sizing:border-box}

/* サイト共通CSSの打ち消し。
   見出しに背景色や装飾が付く実装があるため無効化します。 */
.mwwp-head h1,.mwwp-head h2,.mwwp-head h3,
.mwwp-foot h1,.mwwp-foot h2,.mwwp-foot h3{
  background:none !important;background-image:none !important;
  border:0 !important;padding:0 !important;text-align:left !important;
}
.mwwp-head h1::before,.mwwp-head h1::after,
.mwwp-head h2::before,.mwwp-head h2::after,
.mwwp-foot h1::before,.mwwp-foot h1::after,
.mwwp-foot h2::before,.mwwp-foot h2::after{content:none !important;display:none !important}
.mwwp-head a,.mwwp-foot a{text-decoration:none}
.mwwp-head svg,.mwwp-foot svg{display:block}
/* セクション幅は商品一覧に合わせます。
   ecbeing のコンテナ幅をそのまま使うため、独自の max-width と
   左右 padding は持たせていません。
   商品一覧側にわずかな内側余白がある場合のみ、
   --mwwp-innerpad に実測値（例 10px）を指定してください。 */
.mwwp-inner{
  max-width:none;margin:0;
  padding-left:var(--mwwp-innerpad,0px);
  padding-right:var(--mwwp-innerpad,0px);
}
:root{--mwwp-innerpad:0px;--mwwp-sppad:15px}

/* SP：全セクション（パンくず／ジャンプリンク／PRODUCTS／
   SELECT BY SCENE／OTHER SCENES／FABRICS／CTA）の左右に
   商品一覧と同じ余白を付けます。
   二重に効いて内側に寄りすぎる場合は --mwwp-sppad を 0px に、
   まだ外側に出る場合は数値を増やしてください。 */
@media (max-width:1023px){
  .mwwp-inner{
    padding-left:var(--mwwp-sppad,15px);
    padding-right:var(--mwwp-sppad,15px);
  }
}

/* --- 上部：画像＋ワインレッド地コピーの2カラム（全幅） --- */
.mwwp-head{padding-top:0}

/* ===== 上下端の余白除去（CSSのみ） =====
   :has() を使い、当ブロックを端に持つ親要素をさかのぼって
   その方向の余白を0にします。同じブロック内の <style> タグも
   子要素として数えられるため、判定は「先頭から2番目以内」
   「末尾から2番目以内」としています。
   間に他のコンテンツがある要素には影響しません。
   ※Chrome 105+ / Safari 15.4+ / Firefox 121+ で有効。
     未対応ブラウザ向けには下部ブロックのJSが保険として動きます。 */
:is(div,section,main,article,td):has(> .mwwp-head:nth-child(-n+2)),
:is(div,section,main,article,td):has(> :nth-child(-n+2) > .mwwp-head:nth-child(-n+2)),
:is(div,section,main,article,td):has(> :nth-child(-n+2) > :nth-child(-n+2) > .mwwp-head:nth-child(-n+2)){
  padding-top:0 !important;margin-top:0 !important;
}
:is(div,section,main,article,td):has(> .mwwp-foot:nth-last-child(-n+2)),
:is(div,section,main,article,td):has(> :nth-last-child(-n+2) > .mwwp-foot:nth-last-child(-n+2)),
:is(div,section,main,article,td):has(> :nth-last-child(-n+2) > :nth-last-child(-n+2) > .mwwp-foot:nth-last-child(-n+2)){
  padding-bottom:0 !important;margin-bottom:0 !important;
}

/* 上記で解消しない場合の手動調整。
   開発者ツールで実際の余白を測り、下の 0px を書き換えてください。
   例）上に60pxの余白が残る場合は --mwwp-topgap:60px */
.mwwp-head{margin-top:calc(-1 * var(--mwwp-topgap, 0px))}
.mwwp-foot{margin-bottom:calc(-1 * var(--mwwp-botgap, 0px))}
:root{--mwwp-topgap:0px;--mwwp-botgap:0px}

/* パンくずリスト。サイト側が独自に出力している場合は
   このスタイルと下のHTMLを削除してください。 */
/* 上下の余白は同じ値に揃えています */
.mwwp-crumb{padding-top:clamp(16px,2vw,30px);padding-bottom:clamp(16px,2vw,30px)}
.mwwp-crumb ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;
  font-size:0.72rem;letter-spacing:.08em;line-height:1.9;color:var(--mwwp-grey);
}
.mwwp-crumb li{display:flex;align-items:center}
.mwwp-crumb li+li::before{
  content:"/";margin:0 .8em;color:var(--mwwp-hair);
  font-family:var(--mwwp-en);
}
.mwwp-crumb a{color:var(--mwwp-grey);text-decoration:none;transition:color .35s}
.mwwp-crumb a:hover,.mwwp-crumb a:focus-visible{color:var(--mwwp-bronze)}
.mwwp-crumb [aria-current="page"]{color:var(--mwwp-ink)}

/* 全幅ブロック。
   ecbeing のコンテナに max-width や左右padding が付いていても、
   コンテナ中央を基準に画面幅いっぱいまで広がります。
   1920px を上限とし、それ以上の画面では左右に余白が出ます。
   上限を変える場合は下の 960px を書き換えてください（この値の2倍が最大幅）。 */
.mwwp-bleed{
  width:auto;
  margin-inline:calc(50% - min(50vw, 960px));
}
/* ビューポート単位は縦スクロールバーの幅を含むため、
   環境によって横スクロールが出ることがあります。これを抑止します。
   ※overflow-x:clip は position:sticky を壊しません。 */
html{overflow-x:clip}

.mwwp-intro{
  display:grid;
  /* 画像:コピー = 1.9:1（画像を最大化）
     ※本サイトはPCのビューポートが width=1200 固定のため、
       PC表示は常に1200px幅として計算されます。
       1400px以上の指定は実際には使われないため、
       1024px以上をすべて 1.9:1 に統一しています。 */
  grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);
  gap:0;                        /* 全幅時は2面を密着させる */
  align-items:stretch;          /* 画像とワイン面の天地を揃える */
}

/* 3:2 のメインイメージ。
   ::before で 3:2 の最低高さを確保し、相手カラムが高い場合のみ
   縦に伸びます。幅は必ずカラム幅ぴったりに収まります。
   （aspect-ratio は縦に引き伸ばされた際に横幅まで広がり、
     隣のカラムを覆ってしまうため使用していません） */
.mwwp-intro>*{min-width:0}
.mwwp-visual{
  position:relative;width:100%;margin:0;
  overflow:hidden;background:#E4E1DB;
}
.mwwp-visual::before{content:"";display:block;padding-top:66.6667%}
.mwwp-visual img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center center;
  display:block;
}

/* ワインレッドのコピー面 */
.mwwp-panel{
  background:var(--mwwp-wine);
  color:#F4F0EC;
  display:flex;flex-direction:column;justify-content:center;
  /* コピー面が狭くなるため、余白は控えめに配分 */
  padding:clamp(38px,3.6vw,72px) clamp(26px,3vw,68px);
}

/* 見出し WORKPLACE（アクセントカラー。副題・罫線なし） */
.mwwp-lockup{display:inline-block;margin:0 0 clamp(24px,3vw,40px)}
.mwwp-lockup .w{
  display:block;font-family:var(--mwwp-en);font-weight:200;
  font-size:clamp(1.5rem,2.52vw,2.16rem);letter-spacing:.34em;
  line-height:1.1;
  /* letter-spacing の余白は右側で相殺し、本文と左端を揃える */
  text-indent:0;margin-right:-.34em;
  color:var(--mwwp-bronze-lt);
}

.mwwp-panel>*{min-width:0;max-width:100%}
.mwwp-panel .mwwp-body{margin:0}
.mwwp-panel .mwwp-body p{
  font-size:0.787rem;line-height:2.25;letter-spacing:.08em;
  color:rgba(244,240,236,.86);margin:0 0 1.4em;max-width:34em;
}
.mwwp-panel .mwwp-body p:last-child{margin-bottom:0}

/* --- ジャンプリンク --- */
/* PC：2つのボタンが並んで商品一覧と同じ幅になります。
   SP：縦積みになり、左右に商品一覧と同じ余白を付けます。
   下部には次のセクションとの間隔を確保しています。 */
.mwwp-jumpwrap{
  margin-top:clamp(38px,4.6vw,70px);
  margin-bottom:clamp(40px,5vw,76px);
}
.mwwp-jump{
  display:flex;align-items:stretch;
  flex-wrap:wrap;gap:clamp(12px,1.6vw,22px);
}
.mwwp-jump a{
  /* 2つで幅を等分し、商品一覧の左右端まで広がります */
  flex:1 1 0;min-width:0;
  display:inline-flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,2.6vw,44px);
  padding:20px clamp(22px,2.4vw,34px);
  border:1px solid var(--mwwp-bronze);
  text-decoration:none;color:var(--mwwp-bronze);
  background:transparent;
  transition:background .45s ease,color .45s ease,border-color .45s ease;
}
.mwwp-jump a:hover,.mwwp-jump a:focus-visible{
  background:var(--mwwp-bronze);color:#F9F9F8;border-color:var(--mwwp-bronze);
}
.mwwp-jump .l{
  font-family:var(--mwwp-en);font-size:14.4px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;text-align:left;
}
.mwwp-jump .l span{
  display:block;font-family:inherit;font-size:0.78rem;letter-spacing:.1em;
  text-transform:none;color:var(--mwwp-grey);margin-top:8px;
  transition:color .45s ease;
}
.mwwp-jump a:hover .l span,.mwwp-jump a:focus-visible .l span{color:rgba(249,249,248,.8)}
/* 下向き矢印（インラインSVG。サイト側CSSの影響を受けません） */
.mwwp-jump .mwwp-arw{
  display:inline-flex;flex:none;color:currentColor;
  transition:transform .45s cubic-bezier(.16,.68,.2,1);
}
.mwwp-jump a:hover .mwwp-arw,.mwwp-jump a:focus-visible .mwwp-arw{transform:translateY(5px)}

@media (max-width:1023px){
  /* タブレット以下：画像 -> コピー -> ジャンプリンク の縦積み */
  .mwwp-intro{grid-template-columns:1fr;gap:0}
  .mwwp-head{letter-spacing:.08em}
  .mwwp-panel{padding:clamp(34px,8vw,56px) clamp(22px,6vw,44px)}
  .mwwp-jump a{flex:1 1 100%;min-width:0;padding:18px 20px}
}

/* ===== カテゴリ絞り込み ===== */
.mwwp-filterwrap{margin-top:clamp(38px,4.4vw,66px)}
.mwwp-fhead{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:clamp(18px,2.2vw,30px);
  padding-bottom:16px;border-bottom:1px solid var(--mwwp-hair);
}
.mwwp-fhead h2{
  font-family:var(--mwwp-en);font-weight:300;
  font-size:clamp(1.32rem,2.4vw,1.92rem);letter-spacing:.22em;margin:0;
  color:var(--mwwp-bronze);
}
.mwwp-fhead .lb{
  font-family:var(--mwwp-en);font-size:13.2px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--mwwp-grey);
}
.mwwp-filter{display:flex;flex-wrap:wrap;gap:8px}
.mwwp-filter a{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px clamp(16px,1.8vw,26px);
  border:1px solid var(--mwwp-hair);
  font-size:0.78rem;letter-spacing:.1em;line-height:1.4;
  color:var(--mwwp-ink);text-decoration:none;background:transparent;
  transition:border-color .4s ease,color .4s ease,background .4s ease;
}
.mwwp-filter a:hover,.mwwp-filter a:focus-visible{
  border-color:var(--mwwp-bronze);color:var(--mwwp-bronze);
}
/* 選択中の状態。JSが無効な場合は付与されません */
.mwwp-filter a[aria-current="true"]{
  background:var(--mwwp-bronze);border-color:var(--mwwp-bronze);color:#F9F9F8;
}
@media (max-width:640px){
  .mwwp-filter{gap:6px}
  .mwwp-filter a{flex:1 1 calc(50% - 3px);padding:12px 8px;font-size:0.74rem}
}

/* ===== 下層ページ用の追加スタイル ===== */
/* ワイン面：英語名 -> 和文キャッチ -> サブキャッチ -> 本文 */
.mwwp-panel .mwwp-catch{
  font-size:clamp(1.02rem,1.5vw,1.32rem);line-height:1.85;letter-spacing:.14em;
  color:#F4F0EC;margin:0 0 clamp(16px,1.8vw,24px);font-weight:300;
}
.mwwp-panel .mwwp-subcatch{
  font-size:0.84rem;line-height:2.1;letter-spacing:.12em;
  color:var(--mwwp-bronze-lt);margin:0 0 clamp(20px,2.4vw,32px);
  padding-bottom:clamp(18px,2vw,26px);
  border-bottom:1px solid rgba(196,177,137,.4);
}
.mwwp-panel .mwwp-lockup{margin-bottom:clamp(16px,2vw,26px)}

/* ===== 下部ブロック ===== */
.mwwp-foot{margin-top:clamp(64px,8vw,124px)}
.mwwp-sec{padding-bottom:clamp(56px,7vw,104px)}

/* v サイト共通ヘッダーが固定表示の場合、その高さ分を指定してください */
.mwwp-anchor{scroll-margin-top:100px}

.mwwp-sechead{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:clamp(22px,2.8vw,40px);
  padding-bottom:18px;border-bottom:1px solid var(--mwwp-hair);
}
.mwwp-sechead h2{
  font-family:var(--mwwp-en);font-weight:300;
  font-size:clamp(1.32rem,2.4vw,1.92rem);letter-spacing:.22em;margin:0;
  color:var(--mwwp-bronze);          /* 見出しはアクセントカラー */
}
/* 見出しと色が競合しないよう、添え書きはグレーに */
.mwwp-eyebrow{
  font-family:var(--mwwp-en);font-size:13.2px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--mwwp-grey);
}
.mwwp-note{max-width:44em;font-size:0.826rem;line-height:2.4;color:#33312D;margin:0 0 clamp(26px,3.2vw,46px)}

/* --- SELECT BY SCENE（サムネイル付き） --- */
.mwwp-scenes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.8vw,32px)}
.mwwp-scene{display:block;text-decoration:none;color:inherit}
.mwwp-scene .thumb{overflow:hidden;margin:0 0 18px;background:#E4E1DB}
.mwwp-scene .thumb img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.16,.68,.2,1);
}
.mwwp-scene:hover .thumb img,.mwwp-scene:focus-visible .thumb img{transform:scale(1.05)}
.mwwp-scene .t{
  font-family:var(--mwwp-en);font-size:1.104rem;letter-spacing:.18em;display:block;
  color:var(--mwwp-bronze);          /* 見出しはアクセントカラー */
}
.mwwp-scene .j{font-size:0.9rem;letter-spacing:.12em;color:var(--mwwp-grey);display:block;margin-top:9px;line-height:1.95}
/* VIEW リンク：下線＋右矢印で導線を明示 */
.mwwp-scene .go{
  display:inline-flex;align-items:center;gap:12px;margin-top:18px;
  font-family:var(--mwwp-en);font-size:13.2px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mwwp-bronze);
  border-bottom:1px solid var(--mwwp-bronze);padding-bottom:7px;
}
.mwwp-scene .go .mwwp-arw2{display:inline-flex;flex:none;transition:transform .45s cubic-bezier(.16,.68,.2,1)}
.mwwp-scene:hover .go .mwwp-arw2,.mwwp-scene:focus-visible .go .mwwp-arw2{transform:translateX(5px)}

/* --- FABRICS --- */
.mwwp-fabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--mwwp-hair)}
.mwwp-fab{
  background:#F9F9F8;padding:clamp(20px,2.2vw,30px);
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  transition:background .45s ease;
}
.mwwp-fab:hover,.mwwp-fab:focus-visible{background:#F2F0EC}
.mwwp-fab .fview{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:12px;margin-top:auto;
  font-family:var(--mwwp-en);font-size:13.2px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mwwp-bronze);
  border-bottom:1px solid var(--mwwp-bronze);padding:18px 0 7px;
}
.mwwp-fab .fview .mwwp-arw2{display:inline-flex;flex:none;transition:transform .45s cubic-bezier(.16,.68,.2,1)}
.mwwp-fab:hover .fview .mwwp-arw2,.mwwp-fab:focus-visible .fview .mwwp-arw2{transform:translateX(5px)}
.mwwp-fab .rank{
  font-family:var(--mwwp-en);font-size:11.4px;letter-spacing:.24em;
  color:var(--mwwp-bronze);display:block;margin-bottom:12px;
}
.mwwp-fab .fn{font-family:var(--mwwp-en);font-weight:300;font-size:1.224rem;letter-spacing:.12em;display:block}
.mwwp-fab .fj{font-size:0.816rem;letter-spacing:.1em;color:var(--mwwp-grey);display:block;margin:6px 0 16px}

/* カラーチップ。4列固定でカラー数が増えても2段目に折り返します。
   span の背景色はそのまま残し、その上に img を重ねる構造です。
   画像の読み込み前・読み込み失敗時は背景色が見えるため、
   チップが白く抜けることがありません。
   grid は minmax(0,1fr) 必須。1fr のままだと画像の実寸が
   最小幅として効き、カード幅を超えて広がります。 */
.mwwp-sw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-bottom:16px}
.mwwp-sw span{
  aspect-ratio:1/1;display:block;
  position:relative;overflow:hidden;
}
.mwwp-sw img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
}

.mwwp-badges{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px;min-height:20px}
.mwwp-badge{
  font-family:var(--mwwp-en);font-size:10.2px;letter-spacing:.12em;
  text-transform:uppercase;line-height:1.4;
  border:1px solid var(--mwwp-bronze);color:var(--mwwp-bronze);padding:3px 7px;
}
.mwwp-fab dl{margin:0;border-top:1px solid var(--mwwp-hair)}
.mwwp-fab dt{
  font-size:0.768rem;line-height:1.7;color:var(--mwwp-grey);
  margin:0;padding-top:9px;
}
.mwwp-fab dd{
  margin:0 0 9px;padding-bottom:9px;
  border-bottom:1px solid var(--mwwp-hair);
  font-family:var(--mwwp-en);font-size:0.888rem;line-height:1.5;
}
.mwwp-fab dd small{
  display:block;font-size:0.72rem;letter-spacing:.02em;
  color:var(--mwwp-grey);margin-top:3px;line-height:1.5;
  overflow-wrap:anywhere;
}
.mwwp-fab dl>*:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.mwwp-fab .fnote{
  overflow-wrap:anywhere;
  font-size:0.768rem;line-height:1.85;color:var(--mwwp-grey);
  margin:12px 0 0;padding-top:10px;border-top:1px solid var(--mwwp-hair);
}

/* --- CTA --- */
/* CTA：要素自体はコンテナ幅（＝商品一覧と同じ幅）に置き、
   背景だけを疑似要素で画面幅いっぱいに敷きます。
   要素ごと広げると内側のテキストが商品一覧とずれるためです。
   最下部のため下マージンは0にしています。 */
.mwwp-cta{
  position:relative;color:var(--mwwp-ink);
  background:transparent;
  margin-inline:0;margin-bottom:0;
}
.mwwp-cta::before{
  content:"";position:absolute;z-index:0;
  top:0;bottom:0;left:calc(50% - 50vw);width:100vw;
  background:#EEEDEA;
}
.mwwp-cta>*{position:relative;z-index:1}
.mwwp-foot{margin-bottom:0;padding-bottom:0}
.mwwp-foot>*:last-child{margin-bottom:0}
.mwwp-cta .mwwp-inner{padding-top:clamp(56px,7vw,110px);padding-bottom:clamp(56px,7vw,110px)}

.mwwp-cta .mwwp-eyebrow{color:var(--mwwp-grey)}
.mwwp-cta h2{color:var(--mwwp-bronze)}
.mwwp-cta .mwwp-sechead{border-bottom-color:rgba(26,26,26,.14)}
.mwwp-cta p{max-width:40em;font-size:0.826rem;line-height:2.4;color:#33312D;margin:clamp(22px,2.6vw,34px) 0 0}
.mwwp-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(32px,4vw,56px)}
.mwwp-btn{
  border:1px solid rgba(26,26,26,.28);padding:20px clamp(22px,2.4vw,36px);
  display:inline-flex;align-items:center;justify-content:space-between;gap:40px;
  min-width:clamp(240px,25vw,320px);text-decoration:none;color:inherit;
  background:transparent;
  transition:border-color .5s ease,background .5s ease;
}
.mwwp-btn:hover{border-color:var(--mwwp-ink);background:rgba(26,26,26,.035)}
.mwwp-btn .lab{font-family:var(--mwwp-en);font-size:13.8px;letter-spacing:.2em}
.mwwp-btn .lab small{display:block;font-family:inherit;font-size:0.864rem;letter-spacing:.1em;color:var(--mwwp-grey);margin-top:9px}
/* 幅は固定し、線の伸縮は transform で表現（レイアウトを動かさない） */
.mwwp-btn .ar{
  width:36px;height:1px;background:var(--mwwp-bronze);flex:none;
  transform:scaleX(.6);transform-origin:right center;
  transition:transform .5s cubic-bezier(.16,.68,.2,1);
}
.mwwp-btn:hover .ar,.mwwp-btn:focus-visible .ar{transform:scaleX(1)}

.mwwp-disc{font-size:0.816rem;line-height:2.1;color:var(--mwwp-grey);margin:clamp(22px,2.6vw,36px) 0 0}

@media (max-width:1080px){
  .mwwp-scenes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mwwp-fabs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .mwwp-scenes{grid-template-columns:1fr;gap:26px}
  .mwwp-scene .thumb img{aspect-ratio:16/9}
  .mwwp-fabs{grid-template-columns:1fr}
  .mwwp-btn{min-width:100%}
}
/* 極小画面：コピー面の余白を詰めて1行文字数を確保 */
@media (max-width:374px){
  .mwwp-panel{padding-left:18px;padding-right:18px}
  .mwwp-panel .mwwp-body p{font-size:0.736rem}
}

@media (prefers-reduced-motion:reduce){
  .mwwp-head *,.mwwp-foot *{transition:none!important}
}

/* ===== 下層ページ用の追加スタイル ===== */
.mwwp-scenes.is3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1080px){ .mwwp-scenes.is3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .mwwp-scenes.is3{grid-template-columns:1fr} }
.mwwp-backtop{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mwwp-en);font-size:13.2px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mwwp-bronze);text-decoration:none;
  border-bottom:1px solid var(--mwwp-bronze);padding-bottom:7px;
  margin-top:clamp(30px,3.4vw,48px);
}
.mwwp-backtop .mwwp-arw2{display:inline-flex;flex:none;transition:transform .45s cubic-bezier(.16,.68,.2,1)}
.mwwp-backtop:hover .mwwp-arw2{transform:translateX(5px)}