/* ======================================================================
   ミクロガード® ブランドページ
   prefix "mg-" / すべて .mg 配下にスコープ。既存CSSと衝突しません
   ====================================================================== */
/* --- ページ全体を全幅で使うための解除 -------------------------------------
   ショップサーブのテーマは #contents に max-width:1200px と左右paddingを持つ。
   テーマ自身もTOPページで `#contents:has(.mainslide)` として解除しているので、
   同じ方式に合わせる（このページ＝.mg がある時だけ効く）
   -------------------------------------------------------------------------- */
#contents:has(.mg){ max-width:none !important; padding:0 !important; }

#contents:has(.mg) #main-column{
  width:100% !important; max-width:none !important;
  float:none !important; margin:0 !important; padding:0 !important;
}
#contents:has(.mg) #sub-column{ display:none; }
#contents:has(.mg) #bread-crumb{ padding:14px 7.5%; font-size:12px; }
#contents:has(.mg) #bread-crumb ol{
  display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0 !important;
}
/* 区切り記号はテーマ側が背景画像(breadcrumb_bg.gif)で出すため、こちらでは付けない */

.mg{
  --gold:#B69541;
  --ink:#555;
  --ink-lt:#6B6B6B;
  --bg-alt:#F7F8F8;      /* デザイン実測 */
  --bg-best:#FAFAFA;     /* BEST SELLERS だけ別色 */
  --beige:#F3EEE6;
  --line:#E2E2DE;
  --pad:7.5%;              /* SP 375px に対して左右28px */
  --serif-en:"Garamond Premier Pro","Cormorant Garamond","Noto Serif JP",
             "Times New Roman",serif;
  /* 数字は Avenir Next（Webフォントではないため近い書体でフォールバック） */
  --num:"Avenir Next","Avenir","Manrope","Century Gothic","Segoe UI",Arial,sans-serif;
  --serif-ja:"Shippori Mincho","Noto Serif JP","Yu Mincho","YuMincho",
             "Hiragino Mincho ProN",serif;
  color:var(--ink);
  font-family:var(--serif-ja);
  line-height:1.9;
  overflow-x:hidden;
}
.mg *{ box-sizing:border-box; }
.mg img{ max-width:100%; display:block; margin:0; }
.mg a{ color:inherit; text-decoration:none; }
.mg ul, .mg ol{ list-style:none; margin:0; padding:0; }
/* テーマは li 側に list-style を指定している（フリーページで黒丸・連番が出る）。
   ul/ol への指定だけでは効かないので、li にも書く */
.mg ul li, .mg ol li{ list-style:none; }
/* テーマの default.css が `article h1 / article h2` に
   `border-top:3px solid #006d80` と大きな余白を付けてくる。
   見出しにクラスを足しても消えないので、ここでまとめて打ち消す。
   （ガイドページ側には同じ手当てが入っていたが、ブランド側が抜けていた） */
.mg h1{ border:none; background:none; padding:0; margin:0; }
/* フリーページでは custom.css が h2 に下線を付ける（#Journal article h2）。
   h2 は下線を引きたい箇所が無いので border ごと消す */
.mg h2{ border:none; background:none; }
/* h3 は「4つの理由」で下線を引くので、上線だけ消す */
.mg h3{ border-top:none; background:none; }

/* --- 共通パーツ ------------------------------------------------------- */
.mg-sec{ padding:60px 0; }
.mg-sec.is-alt{ background:var(--bg-alt); }
.mg-best.is-alt{ background:var(--bg-best); }
.mg-inner{ padding:0 var(--pad); }
.mg-en{                       /* セクションの欧文小見出し */
  font-family:var(--serif-en);
  font-size:14px; letter-spacing:2.1px; line-height:1.57; text-align:center;
  color:var(--ink); margin:0 0 18px;
}
.mg-ttl{                      /* 和文の大見出し */
  font-family:var(--serif-ja);
  font-size:18.7px; font-weight:500; line-height:1.225; letter-spacing:.93px;
  text-align:center; margin:0 0 28px;
}
.mg-pill{                     /* ベージュの角丸ボタン */
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 20px; border:1px solid var(--line); border-radius:999px;
  background:var(--beige); font-size:11.5px; letter-spacing:.04em;
  transition:.25s;
}
.mg-pill:hover{ background:#EBE3D6; }
.mg-pill .arw{
  width:6px; height:11px; flex:0 0 auto;
  background:url(/renewal/img/svg/chev_right.svg) no-repeat center / contain;
}
.mg-note{
  font-size:8.5px; line-height:1.8; color:var(--ink-lt);
  text-align:right; margin:16px 0 0;
}

/* --- KV（動画） ------------------------------------------------------- */
.mg-kv{ position:relative; height:min(72vh,133vw); min-height:420px; overflow:hidden; background:#7B8B88; }
.mg-kv video, .mg-kv img.mg-kv__fallback{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.mg-kv::after{                /* 文字の可読性を上げる薄い暗幕 */
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,0) 38%,rgba(0,0,0,.28) 100%);
}
.mg-kv__logo, .mg-kv__copy{ position:relative; z-index:2; color:#fff; }
.mg-kv__logo{
  position:absolute; top:26px; left:var(--pad); margin:0; line-height:0;
}
.mg-kv__logo img{ width:138px; height:auto; display:block; }
/* 既存テーマの #main-column img が10pxの角丸を当てるので、SVGは打ち消す */
.mg-kv__logo img, .mg-banner .view img{ border-radius:0 !important; }
.mg-kv__copy{
  position:absolute; left:var(--pad); right:var(--pad); bottom:11%;
  font-family:var(--serif-ja); font-weight:400;
  /* 担当者指示 9/29：20px。ただし20pxだと2行目が324px必要で、
     375px幅（枠319px）では3行に折り返してしまう。
     字間を少し詰めたうえで、360px以下は画面幅に追従させて2行を保つ */
  font-size:clamp(17px,5.33vw,20px);
  line-height:2.05; letter-spacing:.05em; margin:0;
  text-shadow:0 1px 14px rgba(0,0,0,.28);
}

/* --- MADE IN JAPAN ---------------------------------------------------- */
.mg-quality{ padding:46px 0 52px; }
.mg-madein{ text-align:center; margin:0 0 34px; }
.mg-madein .l1{
  display:flex; align-items:center; justify-content:center; gap:12px;
  color:var(--gold); font-family:var(--serif-en);
  font-size:17.5px; font-weight:400; line-height:1.57; letter-spacing:.35px;
  -webkit-text-stroke:.15px var(--gold);
}
.mg-madein .l1::before, .mg-madein .l1::after{
  content:""; height:1px; background:var(--gold); flex:1 1 auto; max-width:62px;
}
.mg-madein .l2{
  display:block; color:var(--gold); font-family:var(--serif-en);
  font-size:11px; letter-spacing:.2em; margin-top:1px;
}
/* --- 既存テーマ対策 -------------------------------------------------------
   ショップサーブのテーマが ul の padding/margin をIDセレクタで打ち消すため、
   左右の余白が必要な ul だけ !important で明示する（IDにはクラスで勝てない）
   -------------------------------------------------------------------------- */
.mg-stats{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:18px 4%; padding:0 var(--pad) !important; justify-items:center;
}
.mg-stats > li:first-child{ grid-column:1 / -1; }
/* デザインでは①の数字だけ約6%大きい */
.mg-stats > li:first-child .mg-stat__num{ font-size:64px; }
.mg-stat__circle{
  width:127px; height:127px; position:relative;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  margin:0 auto;
}
/* Figma：271.644 × 203.733 ＝ 正円ではなく下25%が欠けた弧 */
.mg-stat__circle::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1.3px solid rgba(85,85,85,.40);
  clip-path:inset(0 0 25% 0);
}
.mg-stat__num{
  font-family:var(--num); font-weight:400;
  font-size:60px; line-height:1 !important; letter-spacing:-.088em; color:#555;
  /* ↑ 既存テーマのID指定（1.6）に潰されるため !important */
  display:flex; align-items:baseline; margin-bottom:8px;
}
.mg-stat__num .s{ font-size:.53em; margin-left:1px; }  /* 小さい数字の比＝0.53 */
/* ①は「0」と「％」の間がデザインで5.7px空く（②の3.4より広い） */
.mg-stats > li:first-child .mg-stat__num .s{ margin-left:4.5px; }
/* ％だけは字間の詰めを打ち消して隙間を作る（デザイン実測3.4px） */
.mg-stat__num .pct{ margin-left:4.5px; }
.mg-stat__num .box{
  font-family:var(--serif-ja); font-size:.32em; margin-left:2px;
  line-height:1;   /* align-self は指定しない＝親の baseline 揃えに従う */
}
.mg-stat__sup{
  position:absolute; left:0; right:0; bottom:32px; text-align:center;
  font-size:7px; color:var(--ink-lt); line-height:1.3; margin:0;
}
.mg-stat__label{
  text-align:center; line-height:1.5; letter-spacing:0;
  /* 375pxで20px。狭い端末では2行にせず縮める */
  font-size:clamp(15px, 5.33vw, 20px);
  /* 弧の切れ目に重なる位置まで引き上げる（デザイン実測） */
  width:max-content; margin:-26px auto 0;
}
.mg-stat__sub{ text-align:center; font-size:10.5px; color:var(--ink-lt); margin:2px 0 0; }

/* --- 横スクロール（BEST SELLERS / TOPICS / REVIEWS 共通） -------------- */
.mg-block{ position:relative; }
.mg-scroller{
  display:flex; gap:14px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:0 var(--pad) 4px !important; scrollbar-width:none; -ms-overflow-style:none;
}
.mg-scroller::-webkit-scrollbar{ display:none; }
/* min-width:auto（flexの既定）だと、1行にした商品名の幅までカードが広がってしまい
   58%が効かない。min-width:0 を入れて幅を固定し、はみ出す名前は「…」で省略させる */
.mg-scroller > li{ flex:0 0 58%; min-width:0; scroll-snap-align:center; }
.mg-topics .mg-scroller > li,
.mg-reviews .mg-scroller > li{ flex:0 0 88%; }
/* 1枚だけのときは、次のカードを覗かせる意味がないので全幅にして中央に置く */
.mg-block.is-single .mg-scroller{ justify-content:center; }
.mg-block.is-single .mg-scroller > li{ flex:0 0 100%; }
.mg-scroller.is-grab{ cursor:grab; }
.mg-scroller.is-dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.mg-scroller.is-dragging a{ pointer-events:none; }
.mg-dots{ display:flex; justify-content:center; gap:14px; margin-top:26px; }
.mg-dots button{
  width:7px; height:7px; padding:0; border:none; border-radius:50%;
  background:#CFCFC9; cursor:pointer; transition:.25s;
}
.mg-dots button[aria-current="true"]{ background:#8A8A84; }
.mg-arrow{
  position:absolute; top:38%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
  background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.16);
  display:none; align-items:center; justify-content:center; z-index:2; transition:opacity .2s;
}
.mg-arrow::before{
  content:""; width:9px; height:9px;
  border-top:1.5px solid var(--ink); border-right:1.5px solid var(--ink);
}
.mg-arrow.prev{ left:14px; } .mg-arrow.prev::before{ transform:rotate(-135deg); margin-left:3px; }
.mg-arrow.next{ right:14px; } .mg-arrow.next::before{ transform:rotate(45deg); margin-right:3px; }
.mg-arrow:disabled{ opacity:0; pointer-events:none; }

/* --- BEST SELLERS ----------------------------------------------------- */
.mg-item{ background:#fff; position:relative; }
/* 順位アイコンは画像に重ねる。画像を上端から見せたいので絶対配置にして流れから外す。
   商品画像に焼き込まれた「PREMIUM」（上端から2.9〜11.3%）と高さが揃う */
.mg-item__head{
  position:absolute; top:0; left:0; right:0; z-index:3;
  display:flex; justify-content:space-between; align-items:flex-start;
  pointer-events:none;          /* 下の商品リンクを邪魔しない */
}
.mg-item__rank{
  width:32px; height:32px; background:#C9BCAC; color:#fff;
  font-family:var(--serif-en); font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.mg-item__badge{
  padding:5px 12px; color:#fff; font-family:var(--serif-en);
  font-size:10px; letter-spacing:.14em;
}
.mg-item__badge.is-premium{ background:var(--gold); }
.mg-item__badge.is-standard{ background:#3E6BC4; }
.mg-item__badge.is-moisture{ background:#6E8B5A; }
.mg-item__badge.is-protector{ background:#2E8B8B; }
.mg-item__img{ padding:0; }
.mg-item__img a{ display:block; }
.mg-item__img img{ width:100%; height:auto; }
.mg-item__body{ padding:0 14px 16px; }
.mg-colors{ display:flex; gap:6px; margin:8px 0 12px; }
.mg-colors li{
  width:15px; height:15px; border-radius:50%; border:1px solid #DCDCD6;
  background:var(--c,#fff);
}
.mg-item__name{
  font-size:12px; font-weight:400; line-height:1.7; margin:0 0 5px; letter-spacing:.02em;
  /* 商品名は1行。収まらない場合は「…」で省略する */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mg-item__price{ font-size:12px; margin:0; letter-spacing:.02em; }
.mg-item__more{
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  font-size:10px; color:#5B7FB9; margin-top:10px;
}

/* --- TOPICS ----------------------------------------------------------- */
.mg-topic{ position:relative; }
.mg-topic img{ width:100%; aspect-ratio:16/11; object-fit:cover; }
.mg-topic .mg-pill{
  position:absolute; right:12px; bottom:12px; background:rgba(255,255,255,.92);
  border-color:transparent; font-size:11px; padding:10px 18px;
}

/* --- SERIES LINEUP ---------------------------------------------------- */
.mg-acc{ text-align:center; margin-bottom:34px; }
.mg-acc__btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:11px 20px; border:1px solid var(--line); border-radius:6px;
  background:var(--beige); font-family:var(--serif-ja); font-size:12px;
  letter-spacing:.06em; color:var(--ink); cursor:pointer;
}
.mg-acc__btn .chev{
  width:12px; height:7px; flex:0 0 auto;
  background:url(/renewal/img/svg/chev_down.svg) no-repeat center / contain;
  transition:transform .25s;
}
.mg-acc__btn[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.mg-acc__panel{ margin:20px 0 !important; padding:0 var(--pad); }
.mg-acc__panel[hidden]{ display:none; }

/* 比較表 */
.mg-tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.mg-tbl{
  width:100%; border-collapse:collapse;
  background:#fff; border:1px solid var(--line); font-size:9.5px; line-height:1.5;
}
.mg-tbl th, .mg-tbl td{
  border:1px solid var(--line); text-align:center; padding:8px 2px; vertical-align:middle;
  word-break:normal; overflow-wrap:break-word;
}
.mg-tbl thead th{ font-weight:400; }
.mg-tbl .rowhead{ background:#fff; font-weight:400; }
.mg-tbl .s-name{ font-family:var(--serif-en); font-size:9px; letter-spacing:-.01em; display:block; white-space:nowrap; }
.mg-tbl .s-tag{
  display:inline-block; margin:5px 0 4px; padding:3px 5px; border-radius:999px;
  background:#fff; font-size:8.5px; letter-spacing:0; white-space:nowrap;
}
.mg-tbl .s-for{ display:block; font-size:8.5px; color:#555; }
.mg-tbl thead th.c1{ background:#F5EEDA; } .mg-tbl thead th.c1 .s-name,.mg-tbl thead th.c1 .s-tag{ color:#A98B3C; }
.mg-tbl thead th.c2{ background:#E7EEF8; } .mg-tbl thead th.c2 .s-name,.mg-tbl thead th.c2 .s-tag{ color:#3E6BC4; }
.mg-tbl thead th.c3{ background:#EAF0E5; } .mg-tbl thead th.c3 .s-name,.mg-tbl thead th.c3 .s-tag{ color:#5F7D4C; }
.mg-tbl thead th.c4{ background:#E6F1EF; } .mg-tbl thead th.c4 .s-name,.mg-tbl thead th.c4 .s-tag{ color:#2E8B8B; }
.mg-tbl thead th .bar{ display:block; height:4px; margin:7px -2px -8px; }
.mg-tbl thead th.c1 .bar{ background:#B69541; } .mg-tbl thead th.c2 .bar{ background:#4777CD; }
.mg-tbl thead th.c3 .bar{ background:#6F8D4D; } .mg-tbl thead th.c4 .bar{ background:#027F7F; }
.mg-tbl .wear{ font-size:8.5px; line-height:1.6; }
.mg-tbl .rowhead.wearhead{ background:#EFEFEC; }
/* 本文の行：偶数行だけ #FBFAF8（ラベル列も含めて行全体）、奇数行は白 */
.mg-tbl tbody tr:nth-child(odd) th,
.mg-tbl tbody tr:nth-child(odd) td{ background:#fff; }
.mg-tbl tbody tr:nth-child(even) th,
.mg-tbl tbody tr:nth-child(even) td{ background:#FBFAF8; }
/* 「PREMIUM・STANDARD・MOISTURE 共通」のセル。
   nth-child は擬似クラスで詳細度が上がる（0,3,3）ため、同じ詳細度で後ろに置いて勝たせる */
.mg-tbl tbody tr td.wear{
  background:linear-gradient(90deg,#F5EEDA 0%,#E7EEF8 48.08%,#EAF0E5 100%);
}
.mg-tbl tbody tr td.wear.c4{ background:#E6F1EF; }
.mg-tbl tbody tr th.rowhead.wearhead{ background:#EFEFEC; }

/* --- 表のサイズ（SPのみ。テーマのブレークポイントに合わせる） ------------ */
@media screen and (max-width:768px){
  .mg-tbl{ table-layout:fixed; }        /* 列幅の%を効かせるために必要 */
  .mg-tbl th{ font-size:8.5px; }
  .mg-tbl td{ font-size:8px; }
  .mg-tbl .s-for{ font-size:6.5px; }
  .mg-tbl .rowhead{ width:25%; }
  .mg-tbl thead th.c1,
  .mg-tbl thead th.c2,
  .mg-tbl thead th.c3,
  .mg-tbl thead th.c4{ width:18.75%; }
}
.mg-mark{ display:inline-block; width:15px; height:15px; }
.mg-mark.o{ border:1.4px solid #3A3A3A; border-radius:50%; }
.mg-mark.oo{ border:1.4px solid #3A3A3A; border-radius:50%; position:relative; }
.mg-mark.oo::after{
  content:""; position:absolute; inset:3px; border:1.4px solid #3A3A3A; border-radius:50%;
}
.mg-mark.x{ border-top:1.4px solid #3A3A3A; height:0; width:15px; margin-bottom:7px; }

/* シリーズバナー */
.mg-series__list{ display:grid; gap:14px; padding:0 16px !important; }  /* デザイン実測16px */
.mg-banner{
  position:relative; display:block; overflow:hidden;
  /* 支給画像は730×400。同じ比率にすると写真がトリミングされない
     （デザインのバナーも342.1×189.2＝ほぼ同比） */
  aspect-ratio:73/40; min-height:150px;
  background-image:var(--img); background-size:cover; background-position:var(--pos,center);
  color:#fff; padding:0 16px; display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start;
}
/* 4行を共通の中心軸で中央揃えにする（デザインはバナー左端から85.6pxが中心） */
.mg-banner .txt{ display:block; width:170px; text-align:center; }
.mg-banner > *{ position:relative; z-index:2; }
/* 支給画像にシリーズ色が焼き込み済みのため、CSSでのかぶせは行わない */
/* 既存サイトの #main-column a が色を上書きするため、文字色は子要素に直接指定 */
.mg-banner .en, .mg-banner .ja, .mg-banner .view{ color:#fff; }
.mg-banner .en{
  font-family:var(--serif-en); font-size:24px; letter-spacing:.08em;
  line-height:1.2 !important;   /* 既存テーマのID指定（1.6）に潰される */
  display:block;
}
.mg-banner .ja{
  /* Figma: Shippori Mincho / 21px / w500（21 × 0.4673 = 9.8px）
     line-height:75px は Figma上の行送りで、実際の版面の行間とは別。
     デザイン画像の実測（enとの間12.1px・VIEW MOREとの間28.5px）に合わせて1.4にしている */
  font-family:var(--serif-ja); font-size:10.5px; font-weight:500;
  letter-spacing:0; line-height:1.4 !important;
  margin-top:4.5px; display:block;
}
.mg-banner .view{
  font-family:var(--serif-en); font-size:9.5px; letter-spacing:.02em;
  line-height:1.4 !important; margin-top:23px; display:inline-block; position:relative; padding-bottom:8.5px;
  /* 文字幅ぴったりに縮める＝矢印の基準になる */
}
/* 矢印SVGは自然幅115pxで、そのままだと .view の幅を決めてしまう。
   絶対配置にすると幅の計算から外れ、width:100% が「文字の幅」になる */
.mg-banner .view img{
  position:absolute; left:0; bottom:0; width:100%; height:auto; display:block;
}

/* --- EVIDENCE & TECHNOLOGY -------------------------------------------- */
.mg-evidence{ text-align:center; padding-bottom:46px; }
.mg-evidence .mg-pill{ font-size:12px; padding:12px 22px; }
.mg-figure{ aspect-ratio:16/11; overflow:hidden; }
.mg-figure video, .mg-figure img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* --- CATEGORY --------------------------------------------------------- */
/* 2つ目以降のグループ見出しの上余白（担当者指示 9/29）。
   直前の .mg-cats が margin-bottom:36px を持ち、隣り合うマージンは相殺されて
   大きい方だけが効く。つまり 36px 指定では見た目の空きは 36px のまま
   （＝この指定を入れる前と同じ）。広げたい場合は 36+広げたい量 を書く */
.mg-cats + .mg-group{ margin-top:36px; }
.mg-group{
  display:block; width:max-content; margin:0 auto 22px;
  padding:7px 22px; border-radius:6px; background:#EFEFEC;
  font-size:12px; letter-spacing:.1em;
}
.mg-cats{
  display:grid; grid-template-columns:repeat(2,1fr); gap:24.5px 10.5px;
  padding:0 16px !important; margin-bottom:36px;   /* デザイン実測：タイル166px */
}
/* 既存テーマの #main-column img が border-radius:10px を当てているので !important */
.mg-cats img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:5px !important; }
.mg-cats .ja{
  display:block; text-align:center; font-family:var(--serif-ja); font-weight:500;
  font-size:14.5px; letter-spacing:0; line-height:1.4 !important; margin-top:13.5px;
}
.mg-cats .en{
  display:block; text-align:center; font-family:var(--serif-en);
  font-size:9px; letter-spacing:.14em; color:#6B6B6B;
  line-height:1.4 !important; margin-top:6px;
}

/* --- CUSTOMER REVIEWS ------------------------------------------------- */
.mg-review{ background:#fff; border:1px solid var(--line); padding:20px 16px 16px; height:100%; }
.mg-stars{ color:var(--gold); font-size:12px; letter-spacing:2px; }
.mg-review__ttl{ font-size:13.5px; font-weight:400; margin:10px 0 8px; letter-spacing:.04em; }
.mg-review__body{ font-size:11px; line-height:1.95; margin:0 0 16px; }
.mg-review__item{
  display:block; border-top:1px solid var(--line); padding-top:12px;
  font-size:9.5px; color:var(--gold);
}

/* --- 下部バナー3本 ---------------------------------------------------- */
.mg-bnrs{ display:grid; gap:12px; padding:0 5.3% !important; }
.mg-bnrs a{
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  min-height:125px; border-radius:8px; overflow:hidden; color:#fff;
  padding-left:38%; text-align:center;
  background-image:var(--img); background-size:var(--size,cover);
  background-position:var(--pos,center);
}
.mg-bnrs a::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(282deg, #847A63 33.75%, rgba(132, 122, 99, 0.00) 56.62%);
}
.mg-bnrs a > span{ position:relative; z-index:2; display:block; color:#fff; }
.mg-bnrs .en{ font-family:var(--serif-en); font-size:20px; letter-spacing:.1em; }
.mg-bnrs .ja{ font-size:10px; letter-spacing:.1em; margin-top:2px; }
.mg-tm{
  font-size:8px; color:var(--ink-lt); text-align:right;
  padding:0 var(--pad); margin:18px 0 0;
}

/* ======================================================================
   PC（768px以上）— テイジンモール既存のサイズ感に合わせる
   ====================================================================== */
@media screen and (min-width:769px){
  .mg{ --pad:0; }
  .mg-inner, .mg-scroller, .mg-acc__panel, .mg-series__list,
  .mg-cats, .mg-bnrs, .mg-tm{
    max-width:1100px;
    margin-left:auto !important; margin-right:auto !important;
    padding-left:24px !important; padding-right:24px !important;
  }
  .mg-sec{ padding:96px 0; }

  .mg-kv{ height:80vh; min-height:560px; }
  .mg-kv__logo{ top:48px; left:48px; }
  .mg-kv__logo img{ width:238px; }
  .mg-kv__copy{ left:48px; right:auto; bottom:12%; font-size:34px; line-height:1.95; }

  .mg-en{ font-size:21px; letter-spacing:3.2px; margin-bottom:26px; }
  .mg-ttl{ font-size:34px; letter-spacing:1.7px; margin-bottom:46px; }

  .mg-quality{ padding:92px 0 100px; }
  .mg-madein{ margin-bottom:64px; }
  .mg-madein .l1{ font-size:44px; gap:26px; }
  .mg-madein .l1::before, .mg-madein .l1::after{ max-width:120px; }
  .mg-madein .l2{ font-size:23px; }
  /* ul の margin:auto は既存テーマに打ち消されるので !important で中央寄せ */
  .mg-stats{
    grid-template-columns:repeat(3,1fr); gap:0 2%;
    max-width:1020px; margin-left:auto !important; margin-right:auto !important;
    justify-items:center;
  }
  .mg-stats > li:first-child{ grid-column:auto; }
  .mg-stat__circle{ width:244px; height:244px; }
  .mg-stat__circle::before{ border-width:2.5px; }
  .mg-stat__num{ font-size:113px; }
  .mg-stats > li:first-child .mg-stat__num{ font-size:120px; }
  .mg-stat__num .s{ margin-left:2px; }
  .mg-stats > li:first-child .mg-stat__num .s{ margin-left:8.5px; }
  .mg-stat__num .pct{ margin-left:8.5px; }
  .mg-stat__num .box{ margin-left:4px; }
  .mg-stat__num{ margin-bottom:15px; }
  .mg-stat__sup{ font-size:13px; bottom:61px; }
  .mg-stat__label{ font-size:38px; margin:-50px auto 0; }
  .mg-stat__sub{ font-size:20px; margin-top:4px; }

  .mg-scroller{ gap:24px; }
  .mg-scroller > li{ flex:0 0 calc((100% - 72px) / 4); scroll-snap-align:start; }
  .mg-reviews .mg-scroller > li{ flex:0 0 calc((100% - 48px) / 3); }
  .mg-topics .mg-scroller > li{ flex:0 0 calc((100% - 48px) / 3); }
  /* PCで1枚だけのときは、3列ぶんに広げず1列分の幅のまま中央に置く */
  .mg-block.is-single .mg-scroller > li{ flex:0 0 calc((100% - 48px) / 3); }
  /* 矢印はコンテンツ幅の内側に置く（画面外にはみ出さないように） */
  .mg-block{ max-width:1100px; margin-left:auto; margin-right:auto; }
  .mg-arrow{ display:flex; }
  .mg-arrow.prev{ left:0; } .mg-arrow.next{ right:0; }

  .mg-series__list{ grid-template-columns:repeat(2,1fr); gap:24px; }
  .mg-banner{ min-height:0; padding:0 40px; }
  .mg-banner .txt{ width:218px; }
  .mg-banner .en{ font-size:33px; }
  .mg-banner .ja{ font-size:15.4px; }
  .mg-banner .view{ font-size:13px; margin-top:26px; padding-bottom:15px; }

  .mg-figure{ max-width:1400px; margin:0 auto; aspect-ratio:2.4/1; }
  .mg-evidence{ padding-bottom:64px; }

  .mg-cats{ grid-template-columns:repeat(4,1fr); gap:44px 24px; }
  .mg-group{ font-size:18px; padding:10px 40px; margin-bottom:30px; }

  .mg-tbl{ font-size:14px; }
  .mg-tbl th, .mg-tbl td{ padding:16px 10px; }
  .mg-tbl .s-name{ font-size:17px; }
  .mg-tbl .s-tag{ font-size:13px; padding:5px 16px; }
  .mg-tbl .s-for{ font-size:12.5px; }
  .mg-tbl .wear{ font-size:13px; }
  .mg-mark{ width:24px; height:24px; }
  .mg-mark.x{ width:26px; margin-bottom:11px; }

  .mg-bnrs{ grid-template-columns:repeat(3,1fr); gap:20px; }
  .mg-bnrs a{ min-height:190px; padding-left:0; }
  .mg-bnrs .en{ font-size:30px; }

  .mg-item__name{ font-size:15px; }
  .mg-review__body{ font-size:14.5px; }
}


/* ======================================================================
   カテゴリーページ上部（4シリーズ共通）
   ブランドページのCSSを土台に、ct- 接頭辞で追加。すべて .ct 配下にスコープ
   ====================================================================== */

/* --- 全幅にするのは上部ブロックだけ。商品一覧は元の幅のまま --------------
   （フリーページと違い、カテゴリーページは既存の商品一覧が下に続くため）
   -------------------------------------------------------------------- */
#contents:has(.ct){ max-width:none !important; padding:0 !important; }
#contents:has(.ct) #main-column{
  width:100% !important; max-width:none !important;
  float:none !important; margin:0 !important; padding:0 !important;
}
#contents:has(.ct) #sub-column{ display:none; }
#contents:has(.ct) #bread-crumb,
#contents:has(.ct) #itemList_wrap{
  max-width:1200px; margin-left:auto; margin-right:auto;
  padding-left:16px; padding-right:16px;
}
#contents:has(.ct) #bread-crumb{ padding-top:14px; padding-bottom:14px; font-size:12px; }
#contents:has(.ct) #bread-crumb ol{
  display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0 !important;
}

/* --- KV --------------------------------------------------------------- */
/* カテゴリーページのテーマは section に上下56pxの余白を付けるので打ち消す */
.ct-kv{ position:relative; overflow:hidden; padding:0 !important; margin:0 !important; }
.ct-kv img{
  width:100%; aspect-ratio:800/439; object-fit:cover; display:block;
  /* 既存テーマの #main-column img が10pxの角丸を当てるので打ち消す */
  border-radius:0 !important;
}
.ct-kv__txt{
  position:absolute; inset:0; z-index:2; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; text-shadow:0 1px 12px rgba(0,0,0,.18);
}
.ct-kv__en{
  font-family:var(--serif-en); font-size:24px;   /* 担当者指示 9/29 */ letter-spacing:.14em;
  line-height:1.2 !important;   /* 既存テーマのID指定（1.6）に潰される */
}
.ct-kv__ja{ font-size:12px;   /* 担当者指示 9/29 */
  letter-spacing:0; line-height:1.4 !important; margin-top:4px; }

/* --- シリーズ切替（2×2） ----------------------------------------------- */
.ct-switch{ background:#F7F8F8; padding:22px 0 19px !important; margin:0 !important; }
.ct-tabs{
  display:grid; grid-template-columns:1fr 1fr; gap:10px 9.5px;
  list-style:none;
  margin:0 0 18px !important;      /* ul の margin は既存CSSに潰されるので !important */
  padding:0 19px !important;       /* デザイン実測：左右18.8 */
}
.ct-tabs a{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:43px; padding:5px 6px; border:1px solid #969696; border-radius:999px;
  /* デザイン実測：非アクティブは塗りなし（背景と同色）・枠線 #969696 */
  background:transparent; color:#555; text-decoration:none; transition:.25s; text-align:center;
}
.ct-tabs a:hover{ background:rgba(255,255,255,.6); }
/* 既存サイトの #main-column a が文字色を上書きするため、子要素に直接指定 */
.ct-tabs .en, .ct-tabs .ja{ color:#555; }
/* Figma: Garamond Premier Pro / 20px / w400 / 字間3px / #555
   （20 × 0.4673 = 9.35px、3 × 0.4673 = 1.4px）
   line-height:157% はFigma上の行送りなので採用せず、墨の間隔の実測（6.1）に合わせる */
.ct-tabs .en{
  font-family:var(--serif-en); font-size:9.35px; letter-spacing:1.4px;
  line-height:1.1 !important;   /* 既存テーマのID指定（1.6）に潰される */
}
/* Figma: Shippori Mincho / 21px / w500 / #555（21 × 0.4673 = 9.8px） */
.ct-tabs .ja{
  font-family:var(--serif-ja); font-weight:500; font-size:9.8px;
  letter-spacing:0; line-height:1.2 !important; margin-top:3px;
}
/* 選択中は背景を敷くが、枠線はそのまま残す（デザイン案どおり・担当者指示 9/29） */
.ct-tabs a.is-current{ background:var(--fill); }
.ct-tabs a.is-current:hover{ background:var(--fill); }

/* アコーディオン（ブランドページの .mg-acc をそのまま使用） */
.ct-switch .mg-acc{ margin-bottom:0; }
/* デザイン実測：196 × 25.3 */
.ct-switch .mg-acc__btn{
  padding:4px 12px; font-size:12.5px; line-height:1.2 !important; gap:10px;
  background:transparent; border-color:#969696;   /* デザイン実測 */
}

/* --- 商品一覧の見出し（既存の見出しセクションを差し替えた分を戻す） ------ */
/* h2 の padding / margin / line-height は既存テーマのID指定に潰されるので !important */
/* 本番では .header_area の中に入り、テーマの .header_area h2(0,1,1) に負ける。
   要素名を足して詳細度を揃え、後から読ませて勝たせる */
h2.ct-listttl{
  max-width:1200px !important; margin:0 auto !important;
  padding:7px 16px 0 20px !important;   /* デザイン実測：墨の左端21 */
  font-size:14.5px; font-weight:400; letter-spacing:.04em;
  line-height:1.6 !important; color:var(--ink);
  border:none; background:none;
}
.ct-switch .mg-acc__panel{ margin-top:20px !important; margin-bottom:0 !important; }

/* ======================================================================
   PC（769px以上）
   ====================================================================== */
@media screen and (min-width:769px){
  #contents:has(.ct) #bread-crumb,
  #contents:has(.ct) #itemList_wrap{ padding-left:24px; padding-right:24px; }

  .ct-kv img{ aspect-ratio:1600/439; }
  .ct-kv__en{ font-size:40px; }
  .ct-kv__ja{ font-size:16px; margin-top:14px; }

  .ct-switch{ padding:38px 0 34px !important; }
  .ct-tabs{
    grid-template-columns:repeat(4,1fr); gap:20px; max-width:1100px;
    margin-left:auto !important; margin-right:auto !important;
    margin-bottom:40px !important;
    padding-left:24px !important; padding-right:24px !important;
  }
  .ct-tabs a{ min-height:66px; }
  .ct-tabs .en{ font-size:15px; }
  .ct-tabs .ja{ font-size:15.5px; margin-top:3px; }
  h2.ct-listttl{ padding:18px 24px 0 !important; font-size:22px; }
  .ct-switch .mg-acc__btn{ padding:7px 18px; font-size:18px; gap:14px; }
}