/* フリーページ用。本文が #Journal の中に入るため、
   テーマのID指定に勝てるよう全セレクタに #Journal を足してある。
   生成: build/journalize.py */
/* --- フリーページ（#Journal の中）でテーマが足してくるものを打ち消す ----------
   テーマと同じセレクタ・同じ詳細度で書き、読み込み順で勝たせる。
   自分のクラス指定（#Journal .mg-ttl など）はこれより強いので、そのまま効く。
   ※ .mg h2{...} のように自分のクラス配下で書くと詳細度が上がりすぎ、
     自分の装飾まで消してしまう（年表のドットで実際に起きた）
   -------------------------------------------------------------------------- */
#Journal article h1, #Journal article h2, #Journal article h3{
  color:inherit; font-size:inherit; font-weight:inherit; letter-spacing:inherit;
  border:none; padding:0; margin:0; background:none;
}
/* display を書くのは h3 だけ。テーマが h3 を flex にするのを戻すため。
   h1/h2 に display:block を書くと、テーマが display:none で隠している
   ページ見出し（#Journal>h1）と記事タイトル（#Journal article>h2）まで出てしまう */
#Journal article h3{ display:block; }
#Journal h2{ font-size:inherit; }
#Journal article h3::before{ content:none; }
#Journal article img{ margin:0; }
#Journal article p{ margin:0; }
#Journal section{ padding:0; }
#Journal .journal-cont ul, #Journal .journal-cont ol{ margin:0; }
#Journal .journal-cont ul li, #Journal .journal-cont ol li{ list-style:none; }

/* ======================================================================
   ミクロガード® ブランドページ
   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)で出すため、こちらでは付けない */

#Journal .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;
}
#Journal .mg *{ box-sizing:border-box; }
#Journal .mg img{ max-width:100%; display:block; margin:0; }
#Journal .mg a{ color:inherit; text-decoration:none; }
#Journal .mg ul, #Journal .mg ol{ list-style:none; margin:0; padding:0; }
/* テーマは li 側に list-style を指定している（フリーページで黒丸・連番が出る）。
   ul/ol への指定だけでは効かないので、li にも書く */
#Journal .mg ul li, #Journal .mg ol li{ list-style:none; }
/* テーマの default.css が `article h1 / article h2` に
   `border-top:3px solid #006d80` と大きな余白を付けてくる。
   見出しにクラスを足しても消えないので、ここでまとめて打ち消す。
   （ガイドページ側には同じ手当てが入っていたが、ブランド側が抜けていた） */
#Journal .mg h1{ border:none; background:none; padding:0; margin:0; }
/* フリーページでは custom.css が h2 に下線を付ける（#Journal article h2）。
   h2 は下線を引きたい箇所が無いので border ごと消す */
#Journal .mg h2{ border:none; background:none; }
/* h3 は「4つの理由」で下線を引くので、上線だけ消す */
#Journal .mg h3{ border-top:none; background:none; }

/* --- 共通パーツ ------------------------------------------------------- */
#Journal .mg-sec{ padding:60px 0; }
#Journal .mg-sec.is-alt{ background:var(--bg-alt); }
#Journal .mg-best.is-alt{ background:var(--bg-best); }
#Journal .mg-inner{ padding:0 var(--pad); }
#Journal .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;
}
#Journal .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;
}
#Journal .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;
}
#Journal .mg-pill:hover{ background:#EBE3D6; }
#Journal .mg-pill .arw{
  width:6px; height:11px; flex:0 0 auto;
  background:url(/renewal/img/svg/chev_right.svg) no-repeat center / contain;
}
#Journal .mg-note{
  font-size:8.5px; line-height:1.8; color:var(--ink-lt);
  text-align:right; margin:16px 0 0;
}

/* --- KV（動画） ------------------------------------------------------- */
#Journal .mg-kv{ position:relative; height:min(72vh,133vw); min-height:420px; overflow:hidden; background:#7B8B88; }
#Journal .mg-kv video, #Journal .mg-kv img.mg-kv__fallback{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
#Journal .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%);
}
#Journal .mg-kv__logo, #Journal .mg-kv__copy{ position:relative; z-index:2; color:#fff; }
#Journal .mg-kv__logo{
  position:absolute; top:26px; left:var(--pad); margin:0; line-height:0;
}
#Journal .mg-kv__logo img{ width:138px; height:auto; display:block; }
/* 既存テーマの #main-column img が10pxの角丸を当てるので、SVGは打ち消す */
#Journal .mg-kv__logo img, #Journal .mg-banner .view img{ border-radius:0 !important; }
#Journal .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 ---------------------------------------------------- */
#Journal .mg-quality{ padding:46px 0 52px; }
#Journal .mg-madein{ text-align:center; margin:0 0 34px; }
#Journal .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);
}
#Journal .mg-madein .l1::before, #Journal .mg-madein .l1::after{
  content:""; height:1px; background:var(--gold); flex:1 1 auto; max-width:62px;
}
#Journal .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にはクラスで勝てない）
   -------------------------------------------------------------------------- */
#Journal .mg-stats{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:18px 4%; padding:0 var(--pad) !important; justify-items:center;
}
#Journal .mg-stats > li:first-child{ grid-column:1 / -1; }
/* デザインでは①の数字だけ約6%大きい */
#Journal .mg-stats > li:first-child .mg-stat__num{ font-size:64px; }
#Journal .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%が欠けた弧 */
#Journal .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);
}
#Journal .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;
}
#Journal .mg-stat__num .s{ font-size:.53em; margin-left:1px; }  /* 小さい数字の比＝0.53 */
/* ①は「0」と「％」の間がデザインで5.7px空く（②の3.4より広い） */
#Journal .mg-stats > li:first-child .mg-stat__num .s{ margin-left:4.5px; }
/* ％だけは字間の詰めを打ち消して隙間を作る（デザイン実測3.4px） */
#Journal .mg-stat__num .pct{ margin-left:4.5px; }
#Journal .mg-stat__num .box{
  font-family:var(--serif-ja); font-size:.32em; margin-left:2px;
  line-height:1;   /* align-self は指定しない＝親の baseline 揃えに従う */
}
#Journal .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;
}
#Journal .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;
}
#Journal .mg-stat__sub{ text-align:center; font-size:10.5px; color:var(--ink-lt); margin:2px 0 0; }

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

/* --- BEST SELLERS ----------------------------------------------------- */
#Journal .mg-item{ background:#fff; position:relative; }
/* 順位アイコンは画像に重ねる。画像を上端から見せたいので絶対配置にして流れから外す。
   商品画像に焼き込まれた「PREMIUM」（上端から2.9〜11.3%）と高さが揃う */
#Journal .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;          /* 下の商品リンクを邪魔しない */
}
#Journal .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;
}
#Journal .mg-item__badge{
  padding:5px 12px; color:#fff; font-family:var(--serif-en);
  font-size:10px; letter-spacing:.14em;
}
#Journal .mg-item__badge.is-premium{ background:var(--gold); }
#Journal .mg-item__badge.is-standard{ background:#3E6BC4; }
#Journal .mg-item__badge.is-moisture{ background:#6E8B5A; }
#Journal .mg-item__badge.is-protector{ background:#2E8B8B; }
#Journal .mg-item__img{ padding:0; }
#Journal .mg-item__img a{ display:block; }
#Journal .mg-item__img img{ width:100%; height:auto; }
#Journal .mg-item__body{ padding:0 14px 16px; }
#Journal .mg-colors{ display:flex; gap:6px; margin:8px 0 12px; }
#Journal .mg-colors li{
  width:15px; height:15px; border-radius:50%; border:1px solid #DCDCD6;
  background:var(--c,#fff);
}
#Journal .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;
}
#Journal .mg-item__price{ font-size:12px; margin:0; letter-spacing:.02em; }
#Journal .mg-item__more{
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  font-size:10px; color:#5B7FB9; margin-top:10px;
}

/* --- TOPICS ----------------------------------------------------------- */
#Journal .mg-topic{ position:relative; }
#Journal .mg-topic img{ width:100%; aspect-ratio:16/11; object-fit:cover; }
#Journal .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 ---------------------------------------------------- */
#Journal .mg-acc{ text-align:center; margin-bottom:34px; }
#Journal .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;
}
#Journal .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;
}
#Journal .mg-acc__btn[aria-expanded="true"] .chev{ transform:rotate(180deg); }
#Journal .mg-acc__panel{ margin:20px 0 !important; padding:0 var(--pad); }
#Journal .mg-acc__panel[hidden]{ display:none; }

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

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

/* シリーズバナー */
#Journal .mg-series__list{ display:grid; gap:14px; padding:0 16px !important; }  /* デザイン実測16px */
#Journal .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が中心） */
#Journal .mg-banner .txt{ display:block; width:170px; text-align:center; }
#Journal .mg-banner > *{ position:relative; z-index:2; }
/* 支給画像にシリーズ色が焼き込み済みのため、CSSでのかぶせは行わない */
/* 既存サイトの #main-column a が色を上書きするため、文字色は子要素に直接指定 */
#Journal .mg-banner .en, #Journal .mg-banner .ja, #Journal .mg-banner .view{ color:#fff; }
#Journal .mg-banner .en{
  font-family:var(--serif-en); font-size:24px; letter-spacing:.08em;
  line-height:1.2 !important;   /* 既存テーマのID指定（1.6）に潰される */
  display:block;
}
#Journal .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;
}
#Journal .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% が「文字の幅」になる */
#Journal .mg-banner .view img{
  position:absolute; left:0; bottom:0; width:100%; height:auto; display:block;
}

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

/* --- CATEGORY --------------------------------------------------------- */
/* 2つ目以降のグループ見出しの上余白（担当者指示 9/29）。
   直前の .mg-cats が margin-bottom:36px を持ち、隣り合うマージンは相殺されて
   大きい方だけが効く。つまり 36px 指定では見た目の空きは 36px のまま
   （＝この指定を入れる前と同じ）。広げたい場合は 36+広げたい量 を書く */
#Journal .mg-cats + .mg-group{ margin-top:36px; }
#Journal .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;
}
#Journal .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 */
#Journal .mg-cats img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:5px !important; }
#Journal .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;
}
#Journal .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 ------------------------------------------------- */
#Journal .mg-review{ background:#fff; border:1px solid var(--line); padding:20px 16px 16px; height:100%; }
#Journal .mg-stars{ color:var(--gold); font-size:12px; letter-spacing:2px; }
#Journal .mg-review__ttl{ font-size:13.5px; font-weight:400; margin:10px 0 8px; letter-spacing:.04em; }
#Journal .mg-review__body{ font-size:11px; line-height:1.95; margin:0 0 16px; }
#Journal .mg-review__item{
  display:block; border-top:1px solid var(--line); padding-top:12px;
  font-size:9.5px; color:var(--gold);
}

/* --- 下部バナー3本 ---------------------------------------------------- */
#Journal .mg-bnrs{ display:grid; gap:12px; padding:0 5.3% !important; }
#Journal .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);
}
#Journal .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%);
}
#Journal .mg-bnrs a > span{ position:relative; z-index:2; display:block; color:#fff; }
#Journal .mg-bnrs .en{ font-family:var(--serif-en); font-size:20px; letter-spacing:.1em; }
#Journal .mg-bnrs .ja{ font-size:10px; letter-spacing:.1em; margin-top:2px; }
#Journal .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){
  #Journal .mg{ --pad:0; }
  #Journal .mg-inner, #Journal .mg-scroller, #Journal .mg-acc__panel, #Journal .mg-series__list, #Journal .mg-cats, #Journal .mg-bnrs, #Journal .mg-tm{
    max-width:1100px;
    margin-left:auto !important; margin-right:auto !important;
    padding-left:24px !important; padding-right:24px !important;
  }
  #Journal .mg-sec{ padding:96px 0; }

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

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

  #Journal .mg-quality{ padding:92px 0 100px; }
  #Journal .mg-madein{ margin-bottom:64px; }
  #Journal .mg-madein .l1{ font-size:44px; gap:26px; }
  #Journal .mg-madein .l1::before, #Journal .mg-madein .l1::after{ max-width:120px; }
  #Journal .mg-madein .l2{ font-size:23px; }
  /* ul の margin:auto は既存テーマに打ち消されるので !important で中央寄せ */
  #Journal .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;
  }
  #Journal .mg-stats > li:first-child{ grid-column:auto; }
  #Journal .mg-stat__circle{ width:244px; height:244px; }
  #Journal .mg-stat__circle::before{ border-width:2.5px; }
  #Journal .mg-stat__num{ font-size:113px; }
  #Journal .mg-stats > li:first-child .mg-stat__num{ font-size:120px; }
  #Journal .mg-stat__num .s{ margin-left:2px; }
  #Journal .mg-stats > li:first-child .mg-stat__num .s{ margin-left:8.5px; }
  #Journal .mg-stat__num .pct{ margin-left:8.5px; }
  #Journal .mg-stat__num .box{ margin-left:4px; }
  #Journal .mg-stat__num{ margin-bottom:15px; }
  #Journal .mg-stat__sup{ font-size:13px; bottom:61px; }
  #Journal .mg-stat__label{ font-size:38px; margin:-50px auto 0; }
  #Journal .mg-stat__sub{ font-size:20px; margin-top:4px; }

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

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

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

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

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

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

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


/* ======================================================================
   よくある質問（FAQ）
   prefix "fq-" / .mg 配下にスコープ
   ====================================================================== */

/* --- 見出し（写真を使わない簡易KV） ---------------------------------------
   移行元は装飾のない一覧ページ。ブランド・ガイドのような主役写真が無いため、
   ベージュ地＋欧文ラベルというシリーズ共通の作りで受ける
   -------------------------------------------------------------------------- */
#Journal .fq-kv{
  background:var(--beige);
  padding:46px var(--pad) 42px;
  text-align:center;
}
#Journal .fq-kv__en{
  font-family:var(--serif-en);
  font-size:14px; letter-spacing:2.1px; line-height:1.57;
  color:var(--gold); margin:0 0 12px;
}
#Journal .fq-kv__ttl{
  font-family:var(--serif-ja);
  font-size:24px; font-weight:500; line-height:1.4; letter-spacing:1.2px;
  margin:0 0 16px;
}
#Journal .fq-kv__copy{
  font-size:12.5px; line-height:2.05; letter-spacing:.04em;
  color:var(--ink); margin:0;
}

/* --- 分類の切替 ----------------------------------------------------------
   移行元は2分類（製品について／お手入れ方法について）。
   カテゴリーページの .ct-tabs と同じ見た目に揃える
   -------------------------------------------------------------------------- */
#Journal .fq-nav{
  display:grid; grid-template-columns:1fr 1fr; gap:9.5px;
  list-style:none;
  margin:0 0 30px !important;
  padding:0 var(--pad) !important;
}
#Journal .fq-nav button{
  width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:52px; padding:6px 6px;
  border:1px solid #969696; border-radius:999px;
  background:transparent; color:var(--ink);
  font-family:inherit; cursor:pointer; transition:.25s; text-align:center;
}
#Journal .fq-nav button:hover{ background:rgba(255,255,255,.6); }
#Journal .fq-nav button[aria-selected="true"]{ background:var(--beige); }
#Journal .fq-nav button[aria-selected="true"]:hover{ background:var(--beige); }
#Journal .fq-nav .en{
  font-family:var(--serif-en);
  font-size:9.35px; letter-spacing:1.4px; line-height:1; color:var(--ink);
}
#Journal .fq-nav .ja{
  font-family:var(--serif-ja);
  font-size:12.5px; letter-spacing:.04em; line-height:1.3; color:var(--ink);
  margin-top:6.1px;
}
#Journal .fq-nav .num{
  font-family:var(--serif-en);
  font-size:9px; letter-spacing:.06em; color:var(--ink-lt); margin-top:2px;
}

/* --- 質問の一覧 ----------------------------------------------------------
   dl/dt/dd で組む。dt の中にボタンを置き、開閉は dd 側に hidden を付け外しする
   （dt 自体をボタンにすると、テーマの見出し指定を拾ってしまう）
   -------------------------------------------------------------------------- */
#Journal .fq-group[hidden]{ display:none; }
#Journal .fq-list{
  margin:0 !important; padding:0 var(--pad) !important;
  border-top:1px solid var(--line);
}
#Journal .fq-list dt{ margin:0; }
#Journal .fq-list dd{ margin:0 !important; }
#Journal .fq-item{ border-bottom:1px solid var(--line); }

#Journal .fq-q{
  width:100%;
  display:flex; align-items:flex-start; gap:12px;
  padding:19px 4px; border:none; background:none;
  font-family:inherit; color:var(--ink);
  text-align:left; cursor:pointer;
}
/* 書体の指定は入れない。.mg の和文明朝をそのまま継ぐ
   （ガイドページの .gd-feat__no と同じ扱い） */
#Journal .fq-q__no{
  flex:0 0 auto;
  font-size:15px; letter-spacing:.06em; line-height:1.5;
  color:var(--gold);
  min-width:26px;
}
#Journal .fq-q__txt{
  flex:1 1 auto;
  font-family:var(--serif-ja);
  font-size:13.5px; font-weight:500; line-height:1.65; letter-spacing:.03em;
}
#Journal .fq-q .chev{
  flex:0 0 auto; width:12px; height:7px; margin-top:7px;
  background:url(/renewal/img/svg/chev_down.svg) no-repeat center / contain;
  transition:transform .25s;
}
#Journal .fq-q[aria-expanded="true"] .chev{ transform:rotate(180deg); }
#Journal .fq-q:hover .fq-q__txt{ color:var(--gold); }

#Journal .fq-a{ padding:0 4px 22px 38px; }
#Journal .fq-a[hidden]{ display:none; }
#Journal .fq-a p{
  font-size:12.5px; line-height:2.05; letter-spacing:.03em;
  color:var(--ink); margin:0 0 12px !important;
}
#Journal .fq-a p:last-child{ margin-bottom:0 !important; }
#Journal .fq-a .fq-a__lead{
  font-family:var(--serif-ja); font-size:12.5px; color:var(--ink);
  margin:14px 0 8px !important;
}
/* 箇条書き。テーマが li に list-style を持つので、点はこちらで描く */
#Journal .fq-a ul{ margin:0 0 12px !important; padding:0 !important; }
#Journal .fq-a ul li{
  position:relative; padding-left:15px;
  font-size:12.5px; line-height:2.05; letter-spacing:.03em; color:var(--ink);
}
#Journal .fq-a ul li::before{
  content:""; position:absolute; left:2px; top:.95em;
  width:4px; height:4px; border-radius:50%; background:var(--gold);
}
/* 「重ね縫い：〜」のような 語＋説明 の並び */
#Journal .fq-a .fq-a__terms{ margin:0 0 12px !important; padding:0 !important; }
#Journal .fq-a .fq-a__terms li{
  font-size:12.5px; line-height:2.05; letter-spacing:.03em; color:var(--ink);
  padding-left:0;
}
#Journal .fq-a .fq-a__terms li::before{ content:none; }
#Journal .fq-a .fq-a__terms b{
  display:inline-block; font-weight:500; color:var(--gold);
  font-family:var(--serif-ja);
}
/* 「〜な方 → おすすめ」の対応表 */
#Journal .fq-a .fq-a__reco{ margin:0 0 12px !important; padding:0 !important; }
#Journal .fq-a .fq-a__reco li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px;
  padding:9px 0; border-bottom:1px dotted var(--line);
  font-size:12.5px; line-height:1.85; letter-spacing:.03em; color:var(--ink);
}
#Journal .fq-a .fq-a__reco li::before{ content:none; }
#Journal .fq-a .fq-a__reco li:last-child{ border-bottom:none; }
#Journal .fq-a .fq-a__reco .cond{ flex:1 1 auto; min-width:0; }
/* 矢印とおすすめは切り離さない。条件が長くて2行になっても、
   右端で1組に見えるようにまとめて右寄せする */
#Journal .fq-a .fq-a__reco .ans{
  flex:0 0 auto; margin-left:auto;
  display:inline-flex; align-items:baseline; gap:8px; white-space:nowrap;
}
#Journal .fq-a .fq-a__reco .to{
  flex:0 0 auto; width:9px; height:9px;
  background:url(/renewal/img/svg/chev_right.svg) no-repeat center / contain;
  opacity:.7;
}
#Journal .fq-a .fq-a__reco .rec{
  font-family:var(--serif-ja); font-weight:500; color:var(--gold);
}
#Journal .fq-a .fq-a__note{
  font-size:10px; line-height:1.8; color:var(--ink-lt); margin:10px 0 0 !important;
}

/* --- 解決しないとき ------------------------------------------------------- */
#Journal .fq-contact{ text-align:center; }
#Journal .fq-contact .fq-contact__ttl{
  font-family:var(--serif-ja); font-size:16px; font-weight:500;
  line-height:1.5; letter-spacing:.06em; margin:0 0 12px;
}
#Journal .fq-contact .fq-contact__copy{
  font-size:12px; line-height:2; color:var(--ink); margin:0 0 22px;
}
#Journal .fq-contact .fq-contact__time{
  font-size:10px; line-height:1.8; color:var(--ink-lt); margin:14px 0 0;
}

/* --- PC ------------------------------------------------------------------ */
@media screen and (min-width:769px){
  #Journal .fq-kv{ padding:82px 24px 74px; }
  #Journal .fq-kv__en{ font-size:21px; letter-spacing:3.2px; margin-bottom:18px; }
  #Journal .fq-kv__ttl{ font-size:40px; letter-spacing:2px; margin-bottom:24px; }
  #Journal .fq-kv__copy{ font-size:15px; }

  #Journal .fq-nav{
    max-width:640px; gap:16px;
    margin:0 auto 46px !important; padding:0 24px !important;
  }
  #Journal .fq-nav button{ min-height:72px; }
  #Journal .fq-nav .en{ font-size:15px; }
  #Journal .fq-nav .ja{ font-size:15.5px; margin-top:3px; }
  #Journal .fq-nav .num{ font-size:11px; }

  #Journal .fq-list{
    max-width:880px;
    margin:0 auto !important; padding:0 24px !important;
  }
  #Journal .fq-q{ padding:26px 6px; gap:18px; }
  #Journal .fq-q__no{ font-size:20px; min-width:38px; }
  #Journal .fq-q__txt{ font-size:17px; }
  #Journal .fq-q .chev{ width:15px; height:9px; margin-top:10px; }

  #Journal .fq-a{ padding:0 6px 30px 56px; }
  #Journal .fq-a p, #Journal .fq-a ul li, #Journal .fq-a .fq-a__terms li, #Journal .fq-a .fq-a__reco li{ font-size:15px; }
  #Journal .fq-a .fq-a__lead{ font-size:15px; }
  #Journal .fq-a .fq-a__note{ font-size:12px; }

  #Journal .fq-contact .fq-contact__ttl{ font-size:24px; }
  #Journal .fq-contact .fq-contact__copy{ font-size:15px; }
  #Journal .fq-contact .fq-contact__time{ font-size:12px; }
}