/* フリーページ用。本文が #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; }
}


/* ======================================================================
   ミクロガードとは（guide）ページ固有スタイル
   ブランドページのCSSを土台に、gd- 接頭辞で追加。すべて .gd 配下にスコープ
   ====================================================================== */
#Journal .gd{ --dark:#12161A; --cream:#F6F3EC; }

/* --- KV --------------------------------------------------------------- */
#Journal .gd-kv{
  /* デザイン実測：KVは CSS 45→387 のひと続き（342px ≒ 91vw） */
  position:relative; min-height:min(59vh,91vw); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:40px var(--pad) 115px; overflow:hidden;
}
#Journal .gd-kv__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
#Journal .gd-kv::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.10) 45%,rgba(255,255,255,.55) 100%);
}
#Journal .gd-kv > *:not(.gd-kv__bg){ position:relative; z-index:2; }
#Journal .gd-kv__en{
  font-family:var(--serif-en); font-size:13px; letter-spacing:.16em; margin:0 0 30px;
}
#Journal .gd-kv__ttl{
  font-size:24px; font-weight:400; letter-spacing:.5em; line-height:1.6 !important;
  margin:0 0 36px; border:none; background:none; padding:0;
}
#Journal .gd-kv__copy{ font-size:13.5px; line-height:1.55 !important; letter-spacing:.04em; margin:0; }
/* Figma: 幅いっぱい × 高さ80.8 / rgba(255,255,255,.30) を写真の上に重ねる。
   `.gd-kv > *` の position:relative より強く指定する必要がある */
#Journal .gd-kv > .gd-lead{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  /* 本文を1px大きくした分、左右を詰めないと1行に収まらない（必要幅342.8） */
  padding:24px 14px 20px; text-align:center;
  font-size:11.5px; line-height:1.78 !important; color:#555;
  background:rgba(255,255,255,.30);
}
#Journal .gd-lead p{ margin:0; }

/* --- 共通パーツ ------------------------------------------------------- */
#Journal .gd-tag{
  display:block; width:max-content; margin:0 auto 18px;
  padding:8px 22px; border:1px solid #C9C5BC; border-radius:3px;
  font-size:12px; letter-spacing:.1em;
}
/* テーマが付けるのは border-top だけなので、消すのもそこだけにする。
   border ごと消すと、こちらが引きたい下線（.gd-feat__ttl）まで消える */
#Journal .gd .mg-en, #Journal .gd h1, #Journal .gd h2{ border:none; background:none; }
/* h3 は「4つの理由」で下線を引くので、上線だけ消す */
#Journal .gd h3{ border-top:none; background:none; }
/* ★既存テーマの #main-column img{border-radius:10px} が画像・SVGすべてに当たる。
   背景写真・アイコン・ロゴが丸まるのでまとめて打ち消し、意図した角丸だけ戻す */
#Journal .gd img, #Journal .gd video{ border-radius:0 !important; }
#Journal .gd .gd-feat__img img, #Journal .gd .gd-hist__img img{ border-radius:4px !important; }
#Journal .gd-h2{
  font-size:20px; font-weight:400; line-height:1.75 !important;
  letter-spacing:.1em !important;   /* h2 の字間もテーマのID指定に潰される */
  text-align:center; margin:0 0 34px;
}
/* CORE CONCEPT の見出しだけ大きい（デザイン実測 墨高26.3 = 約28px） */
#Journal .gd-concept > .gd-h2{ font-size:28px; line-height:1.45 !important; letter-spacing:.3em !important; }
#Journal .gd-body{ padding:0 24px; }   /* デザイン実測：本文の墨は左右24pxから */
#Journal .gd-body p{
  font-size:11.5px; line-height:1.78 !important; letter-spacing:0;
  margin:0 0 1.5em; text-align:justify;
}
#Journal .gd-note{ font-size:10px; color:var(--ink-lt); text-align:right; padding:0 var(--pad); margin:12px 0 0; }
#Journal .gd-figure img, #Journal .gd-figure video{ width:100%; height:auto; display:block; }

/* --- CORE CONCEPT ----------------------------------------------------- */
#Journal .gd-concept{ padding-bottom:40px; }
#Journal .gd-concept .gd-figure{ margin:0 0 34px; }

/* 比較図（一般的な綿生地 / ミクロガード） */
#Journal .gd-compare2{ display:grid; grid-template-columns:1fr 1fr; gap:9px;
  padding:0 16px !important; margin-top:26px; }   /* デザイン実測：左右16px */
/* 比較図の下に、一般的な生地 / ミクロガード の拡大映像（1本の動画に2分割で入っている） */
#Journal .gd-compare-mov{ padding:0 16px; margin-top:9px; }
#Journal .gd-compare-mov video{ width:100%; height:auto; display:block; }
#Journal .gd-c2{
  position:relative; border:1px solid #E4E1DA; border-radius:4px;
  overflow:hidden; background:#fff;
}
#Journal .gd-c2__ttl{
  /* テクスチャ（.gd-c2__tex は z-index:1）に隠されないようにする。
     PCはパネルが横長になりテクスチャの高さ（幅×160/179）が見出し帯まで届くため */
  position:relative; z-index:2;
  margin:0; padding:8px 4px; text-align:center; color:#fff;
  font-size:11px; letter-spacing:.06em; background:#A9A9A4;
}
#Journal .gd-c2.is-mg .gd-c2__ttl{ background:#AF9B7E; }
#Journal .gd-c2__body{ position:relative; z-index:2; padding:5px 7px 41px; }
#Journal .gd-c2__badge{
  display:block; width:max-content; margin:0 auto 12px;
  padding:3px 10px; border:1px solid #DCD8D0; border-radius:4px;
  font-size:11px; letter-spacing:.02em;
}
#Journal .gd-c2__icons{
  display:flex; justify-content:center; gap:6%; margin:0 0 2px; padding:0; list-style:none;
}
#Journal .gd-c2__icons li{ text-align:center; }
#Journal .gd-c2__ring{
  width:35px; height:35px; border-radius:50%; border:1px solid #B8B5AE;
  display:flex; align-items:center; justify-content:center; margin:0 auto;
}
#Journal .gd-c2.is-mg .gd-c2__ring{ border-color:#C4AC85; }
#Journal .gd-c2__ring img{ width:auto; max-height:18px; }
#Journal .gd-c2__lb{
  display:block; font-size:8.2px; line-height:1.2 !important; margin-top:4px; color:#444;
}
#Journal .gd-c2__lb small{ font-size:7.8px; color:#777; }
#Journal .gd-c2__arrows{
  display:flex; justify-content:space-around; align-items:flex-end;
  margin:4px 0 -4px; padding:0; list-style:none; position:relative; z-index:2;
}
/* 一般的な綿生地：矢印は丸アイコンと同じ li の中に置く。
   li は中央ぞろえなので、パネル幅が変わっても必ず丸の真下に来る
   （別の ul に固定値で置いていたときは、PCで±18pxずれていた） */
#Journal .gd-c2__inarrows{
  display:flex; justify-content:center; gap:17px; margin-top:6px;
  position:relative; z-index:2;
}
#Journal .gd-c2__inarrows img{ height:28px; width:auto; }
#Journal .gd-c2__arrows img{ height:28px; width:auto; }
#Journal .gd-c2.is-mg .gd-c2__arrows img{ height:31px; }
/* 素材は下側に繊維が写っているので下端を見せる */
/* Figma：パネル下部に敷く背景。上に向かって白く抜けるので矢印が乗っても見える。
   Figmaが書き出す全面の白かぶせ（rgba(255,255,255,.49) / rgba(253,253,253,.61)）は
   **デザイン画像では効いていない**（生地の明るさが素材そのままだった）ので入れない */
#Journal .gd-c2__tex{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  border-radius:0 0 4px 4px;
}
#Journal .gd-c2.is-normal .gd-c2__tex{
  aspect-ratio:179/160;          /* Figma は 356×275（167/129）だが、左右の高さを揃えるため右と同じ比率にする */
  background:
    linear-gradient(180deg,#F9F8F9 21.27%,rgba(249,248,249,0) 100%),
    var(--tex) center bottom / 100% 81.125% no-repeat,
    #F9F8F9;
}
#Journal .gd-c2.is-mg .gd-c2__tex{
  aspect-ratio:179/160;          /* Figma: 358 × 320 */
  background:
    linear-gradient(180deg,#F9F8F9 29.51%,rgba(249,248,249,0) 85.55%),
    var(--tex) center bottom / 107.608% 75.998% no-repeat;
}

/* --- TECHNOLOGY DEEP DIVE --------------------------------------------- */
#Journal .gd-tech{
  position:relative; color:#fff; text-align:center;
  padding:70px var(--pad) 78px; overflow:hidden; background:var(--dark);
}
#Journal .gd-tech__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; z-index:0;
}
#Journal .gd-tech > *:not(.gd-tech__bg){ position:relative; z-index:2; }
#Journal .gd-tech .mg-en{ color:#fff; }
#Journal .gd-tech__ttl{
  font-size:20px; font-weight:400; letter-spacing:.1em !important; line-height:1.6 !important;
  margin:0 0 22px; color:#fff;
}
#Journal .gd-tech__lead{
  font-size:11.5px; line-height:1.78 !important; letter-spacing:.04em; margin:0; color:#EDEDEB;
}

/* 数値カード（暗い背景の上に白カード） */
#Journal .gd-stats{
  position:relative; background:var(--dark); overflow:hidden;
  padding:22px 0 24px;
}
#Journal .gd-stats__list{
  position:relative; z-index:2; margin:0; list-style:none;
  padding:0 var(--pad) !important;
}
#Journal .gd-stats__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; z-index:0;
}
#Journal .gd-stats__list > li{ position:relative; z-index:2; margin-bottom:26px; }
#Journal .gd-stats__list > li:last-child{ margin-bottom:0; }
#Journal .gd-card{
  background:rgba(255,255,255,.94); border-radius:4px; padding:32px 15px 18px; text-align:center;
  position:relative; box-shadow:0 2px 20px rgba(0,0,0,.18);
}
#Journal .gd-card__pill{
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  background:#fff; border-radius:999px; padding:7px 24px; white-space:nowrap;
  font-size:11.5px; letter-spacing:.12em; box-shadow:0 2px 10px rgba(0,0,0,.10);
}
#Journal .gd-card__num{
  font-family:"Helvetica Neue",Arial,sans-serif; font-weight:300;
  font-size:40px; line-height:1.1; letter-spacing:-.01em; color:#2E2E2E; margin:0;
}
#Journal .gd-card__num .ja{ font-family:var(--serif-ja); font-size:.62em; letter-spacing:.02em; }
/* 単位（μm）だけ書体を指定（担当者指示 9/29）。
   .ja と同じ詳細度(0,2,0)なので、後ろに置いて勝たせる */
#Journal .gd-card__num .gd-card__unit{ font-family:"Noto Serif JP",serif; }
/* 「％」は数字より2割小さく（担当者指示 9/29）。デザインに合わせる */
#Journal .gd-card__num .gd-card__pct{ font-size:.8em; }
#Journal .gd-card__label{ font-size:14px; letter-spacing:.06em; margin:3px 0 0; }
#Journal .gd-card__txt{
  font-size:10.5px; line-height:1.95; text-align:justify; margin:16px 0 0; color:#3A3A3A;
}
#Journal .gd-card__sup{ display:block; font-size:9.5px; color:#777; text-align:right; margin-top:6px; }

/* --- BRAND MOVIE ------------------------------------------------------ */
#Journal .gd-movie{ background:#0A0C0E; color:#fff; text-align:center; padding:0 0 34px; }
#Journal .gd-movie__rule{ width:1px; height:52px; background:#6E6E6E; margin:0 auto 32px; }
#Journal .gd-movie .mg-en{ color:#fff; }
#Journal .gd-movie__ttl{
  font-size:20px; font-weight:400; letter-spacing:.08em !important; line-height:1.6 !important;
  margin:0 0 20px; color:#fff;
}
#Journal .gd-movie__lead{
  font-size:11.5px; line-height:1.78 !important; margin:0 0 28px; color:#DCDCDA;
  padding:0 var(--pad);
}
#Journal .gd-movie__fig{ padding:0 var(--pad); }
#Journal .gd-movie__fig video{ width:100%; height:auto; display:block; }
#Journal .gd-movie__caps{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  padding:0 var(--pad); margin:10px 0 0; list-style:none;
}
#Journal .gd-movie__caps li{ font-size:11px; color:#CFCFCC; letter-spacing:.04em; }

/* --- COMPARISON ------------------------------------------------------- */
#Journal .gd-comp{ position:relative; padding:70px 0 64px; overflow:hidden; }
#Journal .gd-comp__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
#Journal .gd-comp > *:not(.gd-comp__bg){ position:relative; z-index:2; }
#Journal .gd-comp__tblwrap{ padding:0 12px; }   /* 本文を1px大きくした分、表が窮屈にならないよう左右を詰める */
#Journal .gd-ctbl{
  width:100%; table-layout:fixed; border-collapse:collapse;
  background:rgba(255,255,255,.97); font-size:11.5px; line-height:1.6;
}
#Journal .gd-ctbl th, #Journal .gd-ctbl td{
  border-bottom:1px solid #E6E3DC; padding:14px 4px; text-align:center; vertical-align:middle;
}
#Journal .gd-ctbl thead th{ font-weight:400; padding:16px 6px; border-bottom:2px solid #DAD5CB; }
#Journal .gd-ctbl thead th.c-mg{ background:#F0EAE0; }
#Journal .gd-ctbl tbody td.c-mg{ background:#FAF7F2; }
#Journal .gd-ctbl .rowhead{ width:26%; text-align:center; font-weight:400; }
#Journal .gd-ctbl .c-normal{ color:#777; }
#Journal .gd-ctbl .c-mg{ color:#2E2E2E; }
#Journal .gd-ctbl .mg-logo{ display:block; width:96px; margin:0 auto 4px; }
#Journal .gd-ctbl .sup{ display:block; font-size:9.5px; color:#777; margin-top:3px; }

/* --- FEATURES --------------------------------------------------------- */
#Journal .gd-feats{ padding:0 16px !important; margin:0; list-style:none; }
#Journal .gd-feat{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--cream); border-radius:6px; padding:16px 14px; margin-bottom:14px;
}
#Journal .gd-feat__main{ flex:1 1 auto; min-width:0; }
/* 番号と見出しは大きさも書体も違うので、足元ぞろえでは高さが合わない。
   中央ぞろえにしたうえで、見出しが下に持つ「余白＋罫線」のぶんだけ番号を戻す */
#Journal .gd-feat__head{ display:flex; align-items:center; gap:12px; }
#Journal .gd-feat__no{ margin-bottom:8px; }   /* 見出しの padding-bottom 7px ＋ border 1px */
#Journal .gd-feat__no{
  /* Figma: 75px / rgba(85,85,85,.50) / w400 → 75 × 0.4673 = 35px */
  /* font-family は指定しない（担当者指示 9/29）。親（.mg）から継承する */
  font-size:35px; font-weight:400;
  color:rgba(85,85,85,.50);
  /* Figma: 157%。既存テーマのID指定（1.6）に潰されるので !important */
  line-height:1.57 !important;
}
#Journal .gd-feat__ttl{
  flex:1 1 auto; font-size:14px; font-weight:400; letter-spacing:.06em; margin:0;
  padding-bottom:7px; border-bottom:1px solid #CFC9BC;
}
#Journal .gd-feat__txt{
  font-size:11px; line-height:1.78 !important; margin:11px 0 0; text-align:justify;
}
#Journal .gd-feat__img{ flex:0 0 32%; }
#Journal .gd-feat__img img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:4px; }

/* --- HISTORY ---------------------------------------------------------- */
#Journal .gd-hist-sec{ background:#FAFAFA; }   /* Figmaに合わせる（担当者指示 9/29） */
#Journal .gd-hist{
  position:relative; padding:0 20px !important; margin:0; list-style:none;
  /* 本文を1px大きくした分、年表が1行に収まるよう左右を詰める（必要幅158.2） */
}
#Journal .gd-hist::before{
  /* Figma: stroke-width 5px → 5 × 0.4673 = 2.34（実測2.47）／色 #B69541
     最初のドットから最後のドットまで（実測 高さ856px → 400 CSS） */
  /* 最後は「プレミアムRENEWAL」の下線までL字でつながる
     （Figma: 縦91px→42.5CSS、横268px→125.2CSS の1本のパス） */
  content:""; position:absolute; left:50%; top:40px; bottom:15px;
  width:2.4px; background:var(--gold); transform:translateX(-1.2px);
}
#Journal .gd-hist > li{
  position:relative; display:grid; grid-template-columns:1fr 20px 1fr;
  /* デザインはドットの間隔が79.7pxで一定。見出しの下線にドットが付くので上そろえでよい */
  align-items:start; min-height:80px; padding-bottom:0;   /* 1項目80px（デザインのドット間隔79.7） */
}
/* ドットは見出しの擬似要素で描く（下線に必ず付いてくるように）ので、元のspanは隠す */
#Journal .gd-hist__dot{ display:none; }
/* h3 の ::before は「■」消しのリセットが当たるので、
   クラスを1つ足して詳細度を上げる（これが無いとドットが消える） */
#Journal .gd .gd-hist__ttl::before{
  content:""; position:absolute; bottom:-13px; width:26px; height:26px; z-index:3;
  background:url(/renewal/img/svg/guide/dot_gold.svg) no-repeat center / contain;
}
#Journal .gd-hist > li.is-right .gd-hist__ttl::before{ left:-36px; }
#Journal .gd-hist > li.is-left  .gd-hist__ttl::before{ right:-31.67px; }  /* 実測で合わせた値（縦線と中心を揃える） */
/* 最後の「プレミアムRENEWAL」は2023年の続きなのでドットは付けない */
#Journal .gd-hist > li:last-child .gd-hist__ttl::before{ display:none; }
#Journal .gd-hist__dot img{ width:100%; height:100%; display:block; }
/* 下線（かたまりの上から約34px）が行の中央（40px）に来るように下へ余白 */
#Journal .gd-hist__box{ grid-row:1; padding-bottom:6px; }
/* 最後の項目（年号もドットも無い「プレミアムRENEWAL」）は前の項目にくっつける */
#Journal .gd-hist > li:last-child{ min-height:0; margin-top:-13px; }   /* 縦の落ち幅をデザインの42.5pxに */
#Journal .gd-hist > li:last-child .gd-hist__box{ padding-bottom:0; }
#Journal .gd-hist > li.is-right .gd-hist__box{ grid-column:3; padding-left:13px; }
#Journal .gd-hist > li.is-left .gd-hist__box{ grid-column:1; padding-right:6px; }
#Journal .gd-hist__year{
  /* Figma: Garamond Premier Pro / 40px / w400 / #B69541 → 40 × 0.4673 = 18.7px */
  font-family:var(--serif-en); font-size:18.7px; color:var(--gold);
  line-height:1.2 !important; margin:0 0 2px; letter-spacing:.02em;
}
#Journal .gd-hist__year small{ font-size:.6em; margin-left:2px; }
#Journal .gd .gd-hist__ttl{
  font-size:9.5px; font-weight:400; line-height:1.2 !important; margin:0;
  /* 年表の見出しはタイトル扱い。デザイン実測も10px */
  position:relative; padding-bottom:3px; border:none;
}
/* デザインの下線はゴールドで、ドットの下をくぐって伸びる。
   `.gd h3{border:none}` に border-bottom を潰されるため擬似要素で引く */
#Journal .gd-hist__ttl::after{
  content:""; position:absolute; bottom:0; height:1px; background:var(--gold);
}
/* 右側の項目だけ下線を文字幅に合わせる。
   左側は「文字の左端 → ドット」まで伸ばすので箱は幅いっぱいのまま
   （デザイン実測：2014は x23.4→175.5 でカラム幅いっぱい） */
#Journal .gd-hist > li.is-right .gd-hist__ttl{ width:max-content; max-width:100%; }
/* 下線はドットの中心から始めて、文字の5px先まで */
#Journal .gd-hist > li.is-right .gd-hist__ttl::after{ left:-23px; right:-5px; }
#Journal .gd-hist > li.is-left  .gd-hist__ttl::after{ left:-5px; right:-16px; }
#Journal .gd-hist__sub{ font-size:8.5px; line-height:1.6 !important; color:#666; margin:2px 0 0; }   /* デザイン実測8.35 */
#Journal .gd-hist__img{ grid-row:1; align-self:start; margin-top:2px; }
#Journal .gd-hist > li.is-right .gd-hist__img{ grid-column:1; padding-right:10px; }
#Journal .gd-hist > li.is-left .gd-hist__img{ grid-column:3; padding-left:10px; }
#Journal .gd-hist__img img{ width:84%; height:auto; border-radius:4px; display:block; }   /* 1項目80pxに収める */
#Journal .gd-hist > li.is-right .gd-hist__img img{ margin-left:auto; }

/* --- SERIES LINEUP（ブランドページの表を再利用） ----------------------- */
/* このページでは is-alt を使っているのは SERIES LINEUP だけ。背景は白 */
#Journal .gd .mg-sec.is-alt{ background:#fff; }
#Journal .gd-series__lead{
  text-align:center; font-size:11.5px; line-height:2; color:#555; margin:-16px 0 24px;
}

/* ======================================================================
   PC（769px以上）
   ====================================================================== */
@media screen and (min-width:769px){
  #Journal .gd-kv{ min-height:min(66vh,44vw); padding:80px 24px 180px; }
  #Journal .gd-kv > .gd-lead{ padding:40px 24px 36px; font-size:16px; }
  #Journal .gd-kv__en{ font-size:19px; margin-bottom:56px; }
  #Journal .gd-kv__ttl{ font-size:44px; margin-bottom:64px; }
  #Journal .gd-kv__copy{ font-size:20px; line-height:2.2; }
  #Journal .gd-lead{ padding:48px 24px 72px; font-size:16px; }

  #Journal .gd-tag{ font-size:15px; padding:11px 34px; margin-bottom:28px; }
  #Journal .gd-h2{ font-size:38px; margin-bottom:46px; }
  #Journal .gd-body, #Journal .gd-note{
    max-width:880px; margin-left:auto !important; margin-right:auto !important;
    padding-left:24px; padding-right:24px;
  }
  #Journal .gd-body p{ font-size:15px; line-height:2.2; }
  #Journal .gd-concept .gd-figure{
    max-width:1400px; margin:0 auto 46px; aspect-ratio:2.4/1; overflow:hidden;
  }
  #Journal .gd-concept .gd-figure video{ width:100%; height:100%; object-fit:cover; }

  #Journal .gd-compare2{
    grid-template-columns:1fr 1fr; gap:24px; max-width:1000px;
    margin-left:auto !important; margin-right:auto !important;
    padding-left:24px !important; padding-right:24px !important;
  }
  /* 比較映像も比較図と同じ最大幅・左右余白に揃える（PCで全幅に広がっていた） */
  #Journal .gd-compare-mov{
    max-width:1000px; margin:24px auto 0;
    padding-left:24px !important; padding-right:24px !important;
  }
  #Journal .gd-c2__ttl{ font-size:16px; padding:14px 8px; }
  #Journal .gd-c2__badge{ font-size:16px; padding:10px 28px; }
  #Journal .gd-c2__ring{ width:78px; height:78px; }
  #Journal .gd-c2__ring img{ max-height:36px; }
  #Journal .gd-c2__lb{ font-size:12px; }
  #Journal .gd-c2__lb small{ font-size:11px; }
  #Journal .gd-c2__arrows img{ height:58px; }
  #Journal .gd-c2__inarrows img{ height:58px; }
  #Journal .gd-c2__inarrows{ gap:34px; margin-top:10px; }
  /* PCはパネルが横長になり、aspect-ratio だとテクスチャがパネル全体を覆ってしまう。
     SP（デザイン）と同じ比率＝パネル高に対して 64%（一般）/ 74%（MG）にする */
  /* 左右で高さを揃える（右＝ミクロガード側に合わせる）。
     基本指定（.gd-c2.is-normal .gd-c2__tex ＝ 詳細度0,3,0）に勝つため同じ形で書く。
     aspect-ratio が残っていると、左右0指定でも幅が「高さ×比」に決まってしまい
     パネルの右側に隙間ができる */
  #Journal .gd-c2.is-normal .gd-c2__tex, #Journal .gd-c2.is-mg     .gd-c2__tex{ aspect-ratio:auto; height:74%; }
  /* 生地の縦の倍率（81.125%/75.998%）は枠がSPの比率のときの値。
     PCは枠が横長になるため、そのままだと生地が縦に潰れて下の列が切れる。
     高さを auto にして元の比率のまま敷き、下端そろえで余った上側を切る */
  #Journal .gd-c2.is-normal .gd-c2__tex{ background-size:auto, 100% auto, auto; }
  #Journal .gd-c2.is-mg     .gd-c2__tex{ background-size:auto, 107.608% auto; }
  #Journal .gd-c2__body{ padding-bottom:114px; }
  #Journal .gd-c2.is-mg .gd-c2__arrows img{ height:62px; }

  #Journal .gd-tech{ padding:110px 24px 120px; }
  #Journal .gd-tech__ttl{ font-size:38px; margin-bottom:34px; }
  #Journal .gd-tech__lead{ font-size:16px; }
  #Journal .gd-stats{ padding:52px 0 96px; }
  #Journal .gd-stats__list{
    display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
    max-width:1160px; margin-left:auto !important; margin-right:auto !important;
    padding:0 24px !important;
  }
  #Journal .gd-stats__list > li{ margin-bottom:0; }
  #Journal .gd-card{ height:100%; padding:52px 28px 32px; }
  #Journal .gd-card__pill{ font-size:17px; padding:11px 36px; top:-23px; }
  #Journal .gd-card__num{ font-size:58px; }
  #Journal .gd-card__label{ font-size:19px; }
  #Journal .gd-card__txt{ font-size:14px; }

  #Journal .gd-movie{ padding-bottom:100px; }
  #Journal .gd-movie__ttl{ font-size:36px; }
  #Journal .gd-movie__lead{ font-size:16px; margin-bottom:46px; }
  #Journal .gd-movie__fig, #Journal .gd-movie__caps{
    max-width:1100px; margin-left:auto !important; margin-right:auto !important;
    padding-left:24px; padding-right:24px;
  }
  #Journal .gd-movie__caps li{ font-size:13px; }

  #Journal .gd-comp{ padding:110px 0 100px; }
  #Journal .gd-comp__tblwrap{
    max-width:1000px; margin:0 auto; padding-left:24px; padding-right:24px;
  }
  #Journal .gd-ctbl{ font-size:15px; }
  #Journal .gd-ctbl th, #Journal .gd-ctbl td{ padding:22px 12px; }
  #Journal .gd-ctbl .mg-logo{ width:150px; }
  #Journal .gd-ctbl .sup{ font-size:11px; }

  #Journal .gd-feats{
    max-width:1100px; margin-left:auto !important; margin-right:auto !important;
    padding-left:24px !important; padding-right:24px !important;
  }
  #Journal .gd-feat{ padding:30px 32px; margin-bottom:22px; gap:34px; align-items:center; }
  #Journal .gd-feat__no{ font-size:44px; }   /* SPとの倍率(1.267)を維持 */
  #Journal .gd-feat__ttl{ font-size:22px; padding-bottom:13px; }
  #Journal .gd-feat__no{ margin-bottom:14px; }   /* 13px ＋ 罫線1px */
  #Journal .gd-feat__txt{ font-size:15px; margin-top:20px; }
  #Journal .gd-feat__img{ flex:0 0 240px; }

  #Journal .gd-hist{ max-width:1000px; margin-left:auto !important; margin-right:auto !important;
    padding-left:24px !important; padding-right:24px !important; }
  #Journal .gd-hist > li{ grid-template-columns:1fr 40px 1fr; min-height:150px; padding-bottom:0; }
  #Journal .gd-hist__year{ font-size:28px; margin-bottom:4px; }
  #Journal .gd .gd-hist__ttl{ font-size:18px; padding-bottom:6px; }
  #Journal .gd-hist__sub{ font-size:13px; margin-top:4px; }
  #Journal .gd-hist__box{ padding-bottom:14px; }
  #Journal .gd-hist > li.is-right .gd-hist__box{ padding-left:24px; }
  #Journal .gd-hist > li.is-left  .gd-hist__box{ padding-right:24px; }
  /* ドットと下線。SPと同じ考え方で、中央列40px・ドット36pxぶんずらす */
  #Journal .gd .gd-hist__ttl::before{ width:36px; height:36px; bottom:-18px; }
  #Journal .gd-hist > li.is-right .gd-hist__ttl::before{ left:-62px; }
  #Journal .gd-hist > li.is-left  .gd-hist__ttl::before{ right:-66.25px; }  /* 実測で合わせた値 */
  #Journal .gd-hist > li.is-right .gd-hist__ttl::after{ left:-44px; right:-10px; }
  #Journal .gd-hist > li.is-left  .gd-hist__ttl::after{ left:-10px; right:-44px; }
  /* 縦線は最初の下線(65px)から最後の下線(下から24px)まで */
  #Journal .gd-hist::before{ width:4px; transform:translateX(-2px); top:65px; bottom:24px; }
  #Journal .gd-hist > li:last-child{ margin-top:-24px; }
  #Journal .gd-hist__img{ margin-top:4px; }
  #Journal .gd-hist__img img{ width:88%; }
  #Journal .gd-series__lead{ font-size:16px; margin-bottom:40px; }
}