@charset "UTF-8";

/* =====================================================================
 * すぽったま！ プッシュ通知 ご利用ガイド／通知設定ページ 共通レイアウト
 *  - #wp_guide / .wpg_* … ご利用ガイド（スコープ済み）
 *  - .notif_*          … 通知設定の方法ページ
 *  ※ ページ固有の非スコープ指定(#bread/#main_area)は各ページのインラインに残す
 *  ※ 許可ダイアログのスタイルは別ファイル /assets/css/webpush.css
 *  配色はサイト共通トーン（黒 #000 / シャンパンゴールド #d9c495 /
 *  ブロンズ #7a5c1e / ゴールド #c89523）のみで構成する。
 *  メディアクエリ基準：1024 / 900 / 640px（max-width で上書き）
 *  Source: /assets/scss/webpush_page.scss
 * ===================================================================== */

/* --------------------------- ご利用ガイド（#wp_guide / .wpg_*） --------------------------- */
#wp_guide{
  --wpg-ink:#1a1a1a; --wpg-muted:#525252; --wpg-line:#e7e3d8;
  --wpg-champagne:#d9c495; --wpg-gold:#c89523; --wpg-bronze:#7a5c1e;
  --wpg-cream:#fbf7ec; --wpg-soft:#f7f5f0; --wpg-radius:12px;
  /* サイトのコンテンツ幅（#bread .bread_width）に合わせて中央寄せ */
  max-width:1176px; margin:0 auto; padding:0 28px;
  color:var(--wpg-ink); line-height:1.8;
  font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo',system-ui,sans-serif;
  font-size:16px;
  position:relative; z-index:0;   /* フルブリード帯の基準 */
}
#wp_guide *{box-sizing:border-box}
#wp_guide img{max-width:100%; height:auto; display:block}
#wp_guide a{color:inherit}
#wp_guide h1,#wp_guide h2,#wp_guide h3,#wp_guide h4{line-height:1.4; margin:0}
#wp_guide figure{margin:0}
#wp_guide .wpg_link{color:var(--wpg-bronze); font-weight:700}
#wp_guide .wpg_more{display:inline-flex; align-items:center; gap:6px; color:var(--wpg-bronze);
  font-weight:700; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px}
#wp_guide .wpg_more::after{content:"\2192"; font-weight:900}
#wp_guide .wpg_more:hover{color:var(--wpg-gold)}
#wp_guide .wpg_morerow{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:12px}

/* ---------- hero：黒帯＋シャンパンゴールド（サイトKVの文法） ---------- */
#wp_guide .wpg_hero{position:relative; padding:56px 8px 74px; color:#fff}
/* 黒帯を画面幅いっぱいに。裾を斜めにカット */
#wp_guide .wpg_hero::before{
  content:""; position:absolute; z-index:-2;
  top:0; bottom:0; left:50%; margin-left:-50vw; width:100vw;
  background:#000;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 44px), 0 100%);
}
/* 裾に沿わせたシャンパンゴールドの斜めライン */
#wp_guide .wpg_hero::after{
  content:""; position:absolute; z-index:-1;
  left:50%; margin-left:-50vw; width:100vw; height:100%; top:12px;
  background:linear-gradient(#d9c495, #d9c495) no-repeat;
  clip-path:polygon(0 calc(100% - 6px), 100% calc(100% - 50px), 100% calc(100% - 44px), 0 100%);
}
#wp_guide .wpg_hero_in{display:grid; grid-template-columns:1.04fr .96fr; gap:44px; align-items:center}
#wp_guide .wpg_eyebrow{display:inline-flex; align-items:center; gap:10px;
  font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--wpg-champagne)}
/* サイトKVのスラッシュ装飾 */
#wp_guide .wpg_eyebrow::before{content:""; width:14px; height:11px;
  background:
    linear-gradient(115deg, transparent 44%, var(--wpg-champagne) 44%, var(--wpg-champagne) 56%, transparent 56%) left/6px 100% no-repeat,
    linear-gradient(115deg, transparent 44%, var(--wpg-champagne) 44%, var(--wpg-champagne) 56%, transparent 56%) right/6px 100% no-repeat}
#wp_guide .wpg_hero h1{font-size:clamp(28px,4.4vw,46px); font-weight:900; margin:14px 0 0; line-height:1.32; letter-spacing:.01em}
#wp_guide .wpg_hero h1 .wpg_hl{color:var(--wpg-champagne)}
#wp_guide .wpg_lead{margin:18px 0 0; color:#c9c9c9; font-size:15px; line-height:2}
#wp_guide .wpg_chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px}
#wp_guide .wpg_chip{border:1px solid rgba(217,196,149,.55); color:var(--wpg-champagne); border-radius:4px;
  padding:6px 13px; font-size:13px; font-weight:700; letter-spacing:.02em}
#wp_guide .wpg_cta_row{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px}
#wp_guide .wpg_btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; font-size:16px; font-weight:800; text-decoration:none; cursor:pointer;
  border:2px solid transparent; border-radius:4px; transition:background .2s, color .2s, border-color .2s}
#wp_guide a.wpg_btn_primary{background:var(--wpg-champagne); color:#000}
#wp_guide a.wpg_btn_primary::after{content:"\2192"; font-weight:900}
#wp_guide a.wpg_btn_primary:hover{background:#fff}
#wp_guide a.wpg_btn_ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
#wp_guide a.wpg_btn_ghost:hover{border-color:var(--wpg-champagne); color:var(--wpg-champagne)}
#wp_guide .wpg_hero_fig{position:relative; transform:rotate(-1.2deg)}
#wp_guide .wpg_hero_fig img{border-radius:10px; border:1px solid rgba(217,196,149,.5);
  box-shadow:0 22px 44px rgba(0,0,0,.5); width:100%}
#wp_guide .wpg_fig_note{font-size:12px; color:#9a9a9a; margin-top:12px; text-align:center}
/* 4光星スパークル（サイトKVのモチーフ・ここだけの飾り） */
#wp_guide .wpg_hero_fig::before,
#wp_guide .wpg_hero_fig::after{
  content:"\2726"; position:absolute; color:var(--wpg-champagne); line-height:1; pointer-events:none}
#wp_guide .wpg_hero_fig::before{top:-26px; right:-8px; font-size:30px}
#wp_guide .wpg_hero_fig::after{bottom:-6px; left:-20px; font-size:18px; opacity:.75}

/* ---------- ページ内目次 ---------- */
#wp_guide .wpg_toc{display:flex; gap:8px; flex-wrap:wrap; padding:30px 0 0}
#wp_guide .wpg_toc a{text-decoration:none; font-size:13px; font-weight:700; color:var(--wpg-ink);
  border:1px solid #ccc; border-radius:999px; padding:8px 16px; background:#fff;
  transition:background .2s, color .2s, border-color .2s}
#wp_guide .wpg_toc a:hover{background:#000; border-color:#000; color:var(--wpg-champagne)}

/* ---------- セクション共通 ---------- */
#wp_guide .wpg_sec{padding:58px 0 64px}
#wp_guide .wpg_sec + .wpg_sec{border-top:1px solid var(--wpg-line)}
/* 帯（フルブリードのクリーム地）でリズムを付ける */
#wp_guide .wpg_band{position:relative; border-top:none !important}
#wp_guide .wpg_band::before{content:""; position:absolute; z-index:-1; top:0; bottom:0;
  left:50%; margin-left:-50vw; width:100vw; background:var(--wpg-soft)}
#wp_guide .wpg_sec_head{margin-bottom:30px}
#wp_guide .wpg_sec_en{display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:700; letter-spacing:.18em; color:var(--wpg-bronze); text-transform:uppercase}
#wp_guide .wpg_sec_en::before{content:""; width:14px; height:11px;
  background:
    linear-gradient(115deg, transparent 44%, var(--wpg-gold) 44%, var(--wpg-gold) 56%, transparent 56%) left/6px 100% no-repeat,
    linear-gradient(115deg, transparent 44%, var(--wpg-gold) 44%, var(--wpg-gold) 56%, transparent 56%) right/6px 100% no-repeat}
#wp_guide .wpg_sec_head h2{font-size:clamp(22px,3vw,30px); font-weight:900; margin-top:6px; letter-spacing:.01em}
#wp_guide .wpg_sub{color:var(--wpg-muted); font-size:14px; margin-top:10px}

/* ---------- カード ---------- */
#wp_guide .wpg_grid2{display:grid; grid-template-columns:1fr 1fr; gap:24px}
#wp_guide .wpg_card{background:#fff; border:1px solid var(--wpg-line); border-radius:var(--wpg-radius);
  padding:26px 28px; box-shadow:0 4px 18px rgba(0,0,0,.04)}
#wp_guide .wpg_card h3{font-size:17px; font-weight:800; margin-bottom:14px;
  padding-bottom:12px; border-bottom:2px solid #000; display:flex; align-items:center; gap:10px}
#wp_guide .wpg_step_tag{display:inline-block; background:#000; color:var(--wpg-champagne);
  font-size:11px; font-weight:700; letter-spacing:.14em; padding:3px 9px; border-radius:3px}
#wp_guide .wpg_list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
#wp_guide .wpg_list li{position:relative; padding-left:26px; font-size:15px}
#wp_guide ul.wpg_list li::before{content:"\2713"; position:absolute; left:2px; top:0;
  color:var(--wpg-bronze); font-weight:900}
#wp_guide ol.wpg_list{counter-reset:wpg}
#wp_guide ol.wpg_list li::before{content:counter(wpg); counter-increment:wpg; position:absolute; left:0;
  color:var(--wpg-champagne); background:#000; width:19px; height:19px; border-radius:50%;
  font-size:11px; line-height:19px; text-align:center; font-weight:800; top:4px}
#wp_guide .wpg_card figcaption{font-size:12.5px; color:#8a8a8a; margin-top:12px; text-align:center}
#wp_guide .wpg_card img{border-radius:8px; border:1px solid var(--wpg-line)}

/* ---------- 受け取り手順（3ステップ・横並び） ---------- */
#wp_guide .wpg_steps{display:grid; grid-template-columns:1fr 30px 1fr 30px 1fr; gap:10px;
  align-items:stretch; max-width:920px; margin:0 auto}
#wp_guide .wpg_step{background:#fff; border:1px solid var(--wpg-line); border-radius:var(--wpg-radius);
  padding:26px 22px 24px; text-align:center; box-shadow:0 4px 18px rgba(0,0,0,.04); position:relative}
#wp_guide .wpg_step .wpg_n{width:40px; height:40px; border-radius:50%; background:#000; color:var(--wpg-champagne);
  font-weight:800; display:grid; place-items:center; font-size:17px; margin:0 auto 12px}
#wp_guide .wpg_step h4{font-size:16px; font-weight:800; margin-bottom:8px}
#wp_guide .wpg_step p{margin:0; font-size:13.5px; color:var(--wpg-muted); line-height:1.8; text-align:left}
#wp_guide .wpg_arrow{color:var(--wpg-gold); font-weight:900; font-size:20px; display:grid; place-items:center}
#wp_guide .wpg_step_goal{border:none; background:#000; color:#fff}
#wp_guide .wpg_step_goal .wpg_n{background:var(--wpg-champagne); color:#000}
#wp_guide .wpg_step_goal p{color:#c9c9c9}

/* ---------- 補足（ポイント／注意） ---------- */
#wp_guide .wpg_note{background:var(--wpg-cream); border-left:4px solid var(--wpg-gold);
  padding:18px 20px; margin-top:22px}
#wp_guide .wpg_note .wpg_t{font-weight:800; color:var(--wpg-bronze); font-size:14px; margin-bottom:6px}
#wp_guide .wpg_note p{margin:0; font-size:14px}
#wp_guide .wpg_warn{background:#faf1f1; border-left-color:#c8102e}
#wp_guide .wpg_warn .wpg_t{color:#c8102e}

/* ---------- タブ（通知が来ないとき） ---------- */
#wp_guide .wpg_tabs{display:flex; gap:8px; margin-bottom:22px}
#wp_guide .wpg_tab{border:1px solid #ccc; background:#fff; color:var(--wpg-muted); font-weight:800;
  border-radius:999px; padding:10px 24px; cursor:pointer; font-size:14.5px;
  font-family:inherit; transition:background .2s, color .2s, border-color .2s}
#wp_guide .wpg_tab[aria-selected="true"]{background:#000; color:var(--wpg-champagne); border-color:#000}
#wp_guide .wpg_panel[hidden]{display:none}
#wp_guide .wpg_rowset{display:flex; flex-direction:column; gap:12px}
#wp_guide .wpg_setrow{display:grid; grid-template-columns:190px 1fr; gap:16px; align-items:center;
  background:#fff; border:1px solid var(--wpg-line); border-radius:10px; padding:16px 20px}
#wp_guide .wpg_setrow .wpg_k{font-weight:800; font-size:14.5px; position:relative; padding-left:16px}
#wp_guide .wpg_setrow .wpg_k::before{content:""; position:absolute; left:0; top:50%; margin-top:-7px;
  width:5px; height:14px; background:var(--wpg-champagne); transform:skewX(-18deg)}
#wp_guide .wpg_setrow .wpg_v{color:var(--wpg-muted); font-size:14px}

/* ---------- 停止方法 ---------- */
#wp_guide .wpg_method{background:#fff; border:1px solid var(--wpg-line); border-radius:var(--wpg-radius);
  padding:24px 28px; box-shadow:0 4px 18px rgba(0,0,0,.04)}
#wp_guide .wpg_method + .wpg_method{margin-top:16px}
#wp_guide .wpg_badge_m{display:inline-block; font-size:12px; font-weight:800; color:var(--wpg-champagne);
  background:#000; padding:4px 12px; border-radius:3px; margin-bottom:12px; letter-spacing:.06em}
#wp_guide .wpg_method h3{font-size:17px; font-weight:800; margin-bottom:10px}

/* ---------- FAQ ---------- */
#wp_guide .wpg_faq{display:flex; flex-direction:column; gap:12px}
#wp_guide details.wpg_qa{background:#fff; border:1px solid var(--wpg-line); border-radius:10px; overflow:hidden}
#wp_guide details.wpg_qa summary{list-style:none; cursor:pointer; padding:18px 20px; font-weight:800; font-size:15.5px;
  display:flex; align-items:center; gap:14px}
#wp_guide details.wpg_qa summary::-webkit-details-marker{display:none}
#wp_guide details.wpg_qa summary .wpg_q{flex:0 0 auto; width:28px; height:28px; border-radius:6px;
  background:#000; color:var(--wpg-champagne); font-weight:900; font-size:14px;
  display:grid; place-items:center}
#wp_guide details.wpg_qa summary::after{content:"\FF0B"; margin-left:auto; color:var(--wpg-bronze); font-weight:900}
#wp_guide details.wpg_qa[open] summary::after{content:"\FF0D"}
#wp_guide details.wpg_qa .wpg_a{padding:0 20px 20px 62px; color:var(--wpg-muted); font-size:14.5px}

/* ---------- お問い合わせ（黒帯で締める） ---------- */
#wp_guide .wpg_contact{position:relative; background:#000; color:#fff; border-radius:var(--wpg-radius);
  padding:44px 34px 40px; text-align:center; overflow:hidden}
#wp_guide .wpg_contact::before,
#wp_guide .wpg_contact::after{content:"\2726"; position:absolute; color:var(--wpg-champagne); line-height:1}
#wp_guide .wpg_contact::before{top:22px; left:6%; font-size:22px; opacity:.9}
#wp_guide .wpg_contact::after{bottom:20px; right:6%; font-size:15px; opacity:.7}
#wp_guide .wpg_contact p{margin:0; color:#c9c9c9; font-size:14px}
#wp_guide .wpg_contact .wpg_org{font-size:21px; font-weight:900; margin-top:10px; color:var(--wpg-champagne)}
#wp_guide .wpg_contact .wpg_dept{color:#c9c9c9; margin-top:4px; font-size:13.5px}

#wp_guide a:focus-visible, #wp_guide button:focus-visible, #wp_guide summary:focus-visible{
  outline:3px solid var(--wpg-gold); outline-offset:2px; border-radius:6px}

/* ---------- レスポンシブ（1024 / 900 / 640） ---------- */
@media (max-width:1024px){
  #wp_guide{padding:0 20px}
}
@media (max-width:900px){
  #wp_guide .wpg_hero{padding:40px 4px 66px}
  #wp_guide .wpg_hero_in{grid-template-columns:1fr; gap:30px}
  #wp_guide .wpg_hero_fig{max-width:520px; margin:0 auto}
  #wp_guide .wpg_grid2{grid-template-columns:1fr}
  #wp_guide .wpg_steps{grid-template-columns:1fr; max-width:560px}
  #wp_guide .wpg_arrow{transform:rotate(90deg)}
}
@media (max-width:640px){
  #wp_guide{padding:0 16px}
  #wp_guide .wpg_hero{padding:34px 0 58px}
  #wp_guide .wpg_hero::before{clip-path:polygon(0 0, 100% 0, 100% calc(100% - 26px), 0 100%)}
  #wp_guide .wpg_hero::after{clip-path:polygon(0 calc(100% - 5px), 100% calc(100% - 31px), 100% calc(100% - 26px), 0 100%)}
  #wp_guide .wpg_lead{font-size:14px}
  #wp_guide .wpg_sec{padding:44px 0 48px}
  #wp_guide .wpg_card{padding:20px 18px}
  #wp_guide .wpg_setrow{grid-template-columns:1fr; gap:6px; align-items:start}
  #wp_guide .wpg_contact{padding:36px 22px 32px}
  #wp_guide details.wpg_qa .wpg_a{padding-left:20px}
}

/* --------------------------- 通知設定の方法ページ（.notif_*） --------------------------- */
/* =====================================================================
 * 既存の lower / module レイアウト（.main_width / .mod_area / .editor）に
 * 重ねて使う差分スタイル。配色はガイドページと同じサイト共通トーン。
 * ===================================================================== */

/* ----------------------------- 導入リード ----------------------------- */
.notif_lead {
  margin: 0 0 26px;
  padding: 18px 22px;
  background: #fbf7ec;
  border-left: 4px solid #c89523;
  font-size: 15px;
  line-height: 1.9;
  color: #525252;
}
.notif_lead strong {
  color: #7a5c1e;
}

/* ----------------------------- デバイス クイックナビ ----------------------------- */
.notif_nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}
/* 既存 .mod_cont ul li + li { margin-top:0.5em } を打ち消す（id でサイト指定に勝つ） */
#main_area .notif_nav li {
  margin: 0;
  padding: 0;
}
/* 既存 .editor ul li::before の中黒を打ち消す */
.notif_nav li::before {
  content: none !important;
  display: none !important;
}
/* 既存 #main_area a の青文字・下線に勝つよう #main_area を付与 */
#main_area .notif_nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 999px;
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
#main_area .notif_nav a:hover,
#main_area .notif_nav a:focus {
  background: #000;
  border-color: #000;
  color: #d9c495;
  text-decoration: none;
}
/* /.notif_nav */

/* ----------------------------- デバイス セクション ----------------------------- */
.notif_device {
  margin: 0 0 48px;
  border: 1px solid #e7e3d8;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .04);
}
/* 黒帯ヘッダー＋シャンパンゴールドの斜めスリット（サイトのタイル文法） */
.notif_device__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  background: #000;
  color: #fff;
  overflow: hidden;
}
.notif_device__head::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -18px;
  width: 74px;
  background:
    linear-gradient(#d9c495, #d9c495) no-repeat 0 0 / 22px 100%,
    linear-gradient(rgba(217, 196, 149, .45), rgba(217, 196, 149, .45)) no-repeat 34px 0 / 8px 100%;
  transform: skewX(-18deg);
}
.notif_device__title {
  margin: 0;
  font-size: clamp(18px, 2.4vw, 21px);
  font-weight: 700;
  line-height: 1.4;
  color: #d9c495;
}
.notif_device__title small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 400;
  color: #b8b8b8;
}
/* 対応ブラウザのチップ */
.notif_device__browser {
  display: inline-block;
  vertical-align: 3px;
  margin-left: 12px;
  padding: 2px 10px;
  border: 1px solid rgba(217, 196, 149, .55);
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #d9c495;
}
.notif_device__body {
  padding: 26px 24px 10px;
}
/* /.notif_device */

/* ----------------------------- 手順リスト ----------------------------- */
/* .editor ol li の既定マーカー（"1." 等）を打ち消し、独自の番号バッジのみ表示 */
.editor ol.notif_steps,
.notif_steps {
  margin: 0;
  padding: 0;
  list-style: none !important;
  counter-reset: notif_step;
}
.editor ol.notif_steps > li {
  list-style: none !important;
}
.editor ol.notif_steps > li::before,
.editor ol.notif_steps > li::marker {
  content: none !important;
}
/* 既存 .mod_cont ol li + li { margin-top:0.5em } を打ち消す */
#main_area .notif_steps > li.notif_step {
  margin-top: 0;
}
.notif_step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 22px;
  align-items: start;
  margin: 0 0 26px;
  padding: 0 0 26px;
  border-bottom: 1px solid #f0ece1;
}
.notif_step:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.notif_step__text {
  padding-top: 4px;
}
.notif_step__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
}
.notif_step__num {
  counter-increment: notif_step;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #d9c495;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
}
.notif_step__num::before {
  content: counter(notif_step);
}
/* 既存 .mod_area h3 の下マージンを打ち消し、番号バッジと上下中央で揃える */
#main_area .notif_step__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #1a1a1a;
}
.notif_step__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: #525252;
}
.notif_step__desc .notif_kbd {
  display: inline-block;
  margin: 0 2px;
  padding: 2px 8px;
  background: #f4f4f4;
  border: 1px solid #e7e3d8;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 700;
  color: #525252;
  white-space: nowrap;
}
/* /.notif_steps */

/* ----------------------------- 画面キャプチャ枠 ----------------------------- */
.notif_capture {
  margin: 0;
}
.notif_capture img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
/* スマホ用：縦長フレーム */
.notif_capture.is_phone {
  max-width: 210px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  background: #1a1a1a;
  border-radius: 26px;
}
.notif_capture.is_phone .notif_capture__inner {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
/* PC用：ブラウザウィンドウ風フレーム */
.notif_capture.is_desktop {
  background: #fff;
  border: 1px solid #e7e3d8;
  border-radius: 8px;
  overflow: hidden;
}
.notif_capture.is_desktop .notif_capture__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  background: #eaeaea;
  border-bottom: 1px solid #e7e3d8;
}
.notif_capture.is_desktop .notif_capture__bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #b8b8b8;
}
/* 画像差し替え前のプレースホルダー */
.notif_capture__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 9 / 16;
  padding: 16px;
  background: repeating-linear-gradient(45deg, #f4f4f4, #f4f4f4 12px, #eaeaea 12px, #eaeaea 24px);
  color: #b8b8b8;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}
.notif_capture.is_desktop .notif_capture__ph {
  aspect-ratio: 16 / 10;
}
.notif_capture figcaption {
  margin-top: 8px;
  font-size: 12px;
  color: #b8b8b8;
  text-align: center;
}
/* /.notif_capture */

/* ----------------------------- 補足コールアウト ----------------------------- */
.notif_note {
  margin: 16px 0 0;
  padding: 15px 18px;
  background: #fbf7ec;
  border-left: 4px solid #c89523;
  font-size: 13px;
  line-height: 1.8;
  color: #525252;
}
.notif_note.is_warn {
  background: #faf1f1;
  border-left-color: #c8102e;
  margin-bottom: 24px;
}
.notif_note .notif_note__label {
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
  color: #7a5c1e;
}
.notif_note.is_warn .notif_note__label {
  color: #c8102e;
}
/* /.notif_note */

/* ----------------------------- 大見出し（ガイドページと同じ文法） ----------------------------- */
#main_area .notif_sec_head {
  margin: 0 0 26px;
}
#main_area .notif_sec_head .notif_sec_en {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  color: #7a5c1e;
  text-transform: uppercase;
}
#main_area .notif_sec_head .notif_sec_en::before {
  content: "";
  width: 14px;
  height: 11px;
  background:
    linear-gradient(115deg, transparent 44%, #c89523 44%, #c89523 56%, transparent 56%) left/6px 100% no-repeat,
    linear-gradient(115deg, transparent 44%, #c89523 44%, #c89523 56%, transparent 56%) right/6px 100% no-repeat;
}
#main_area .notif_sec_head .notif_sec_title {
  margin: 4px 0 0;
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .01em;
}

/* ----------------------------- トラブル項の小見出し ----------------------------- */
#main_area .editor .notif_h3 {
  position: relative;
  margin: 0 0 0.8em;
  padding-left: 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
#main_area .editor .notif_h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -9px;
  width: 6px;
  height: 18px;
  background: #d9c495;
  transform: skewX(-18deg);
}

/* ----------------------------- 関連リンク（外部公式ヘルプ） ----------------------------- */
.notif_links {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
/* 既存 .mod_cont ul li + li の上マージンを打ち消す */
#main_area .notif_links li {
  margin: 0;
  padding: 0;
}
.notif_links li::before {
  content: none !important;
  display: none !important;
}
/* 既存 #main_area a の青文字・下線に勝つよう #main_area を付与 */
#main_area .notif_links a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 15px 18px;
  background: #fff;
  border: 1px solid #e7e3d8;
  border-radius: 8px;
  text-decoration: none;
  color: #1a1a1a;
  transition: border-color .2s, background .2s;
}
#main_area .notif_links a:hover,
#main_area .notif_links a:focus {
  border-color: #c89523;
  background: #fbf7ec;
  text-decoration: none;
}
.notif_links__dev {
  font-size: 14px;
  font-weight: 700;
  color: #7a5c1e;
}
.notif_links__dev::after {
  content: "\2197"; /* ↗ 外部リンク */
  margin-left: 6px;
  font-size: 12px;
  color: #b8b8b8;
}
.notif_links__site {
  font-size: 13px;
  line-height: 1.6;
  color: #525252;
}
/* /.notif_links */

/* ----------------------------- 本文調整：ul/ol の直後の見出しに上余白 ----------------------------- */
#main_area .editor ul + h2,
#main_area .editor ul + h3,
#main_area .editor ul + h4,
#main_area .editor ol + h2,
#main_area .editor ol + h3,
#main_area .editor ol + h4,
#main_area .editor ul + .notif_h3,
#main_area .editor p + .notif_h3 {
  margin-top: 1.8em;
}

/* ----------------------------- レスポンシブ ----------------------------- */
@media (max-width: 1024px) {
  .notif_step {
    grid-template-columns: 1fr 240px;
    gap: 18px;
  }
}

@media (max-width: 900px) {
  .notif_step {
    grid-template-columns: 1fr;
  }
  .notif_step__text {
    padding-top: 0;
  }
  .notif_capture.is_phone {
    max-width: 190px;
  }
  .notif_capture.is_desktop {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 640px) {
  .notif_lead {
    font-size: 14px;
    padding: 14px 16px;
  }
  .notif_device__head {
    padding: 15px 18px;
  }
  .notif_device__head::after {
    right: -26px;
  }
  .notif_device__body {
    padding: 20px 16px 6px;
  }
  .notif_nav a {
    padding: 8px 14px;
    font-size: 13px;
  }
  .notif_step__title {
    font-size: 16px;
  }
  .notif_capture.is_phone {
    max-width: 170px;
  }
  .notif_links {
    grid-template-columns: 1fr;
  }
}