@charset "UTF-8";
/* 優待ジャーナル
   ・数字が主役のサイトなので、数字は必ず lining-nums tabular-nums で揃える
   ・強調はサイズではなく、太さ・色・余白で作る
   ・色は緑1系統。琥珀は締切が近いときと注意の枠だけ、赤は送信の失敗だけ
   ・折り返してほしくないもの（金額・日付）に nowrap、折り返してよい側に最低幅 */

:root {
  --sumi: #0f172a;         /* 本文 */
  --sumi-2: #334155;       /* 本文より一段軽い字 */
  --usu: #5b6779;          /* 添え字（白・薄い灰の面のどちらでも 4.5:1 以上） */
  --usu-2: #475569;        /* 添え字（白い面の上で少し濃く） */
  --usu-3: #94a3b8;        /* 飾りの線・点線（字には使わない） */
  --midori: #065f46;       /* 主役の緑（帯・見出し・選択中） */
  --midori-koi: #054d39;   /* 緑を押したとき */
  --midori-koi-2: #064e3b; /* 送信・検索のボタンを押したとき */
  --midori-usu: #ecfdf5;   /* 緑の薄い面 */
  --midori-ao: #0f766e;    /* 受け取りの案内の線 */
  --kohaku: #b45309;       /* 締切が近い（白い字を乗せても読める濃さ） */
  --kohaku-koi: #92400e;   /* 注意の枠の字 */
  --kohaku-sen: #d97706;   /* 注意の枠の左の線 */
  --kohaku-usu: #fffbeb;   /* 注意の枠の面 */
  --kohaku-kei: #fde68a;   /* 注意の枠の線 */
  --aka: #b91c1c;          /* 送信の失敗 */
  --aka-usu: #fef2f2;
  --aka-kei: #fecaca;
  --kei: #e2e8f0;          /* 罫 */
  --kei-2: #e5e7eb;        /* カード・絞り込みの枠 */
  --men: #f8fafc;          /* 薄い面・トップの地 */
  --men-2: #f1f5f9;        /* 札・コードの面 */
  --shiro: #fff;
  --x: #0f1419;            /* X のボタン */
  --x-koi: #272c30;
  --haba: 46rem;
  /* 字の大きさの段。看板の日付だけは画面の幅で別に決める */
  --fs-2xs: .72rem;
  --fs-xs: .78rem;
  --fs-s: .84rem;
  --fs-m: .9rem;
  --fs-base: 1rem;
  --fs-l: 1.14rem;
  --fs-xl: 1.3rem;
  --fs-2xl: 1.44rem;
  --fs-3xl: 1.64rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--sumi);
  background: var(--shiro);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.85;
  font-feature-settings: "palt";
}

/* 数字は全部そろえる（等幅・ライニング） */
.kingaku, .gaku, .kabusu, .kazu, .gakumen, table, .ketsuron dd, .shime, time {
  font-variant-numeric: lining-nums tabular-nums;
}

a { color: var(--midori); }

.haba { width: 100%; max-width: var(--haba); margin: 0 auto; padding: 0 16px; }
main { padding: 24px 16px 48px; }

/* トップだけ幅を広げ、地を薄い灰にする（記事のページは本文の行が長くなるので今の幅のまま） */
body:has(.kiji-ban) { --haba: 70rem; background: var(--men); }

/* ── 帯（ヘッダー） ───────────────────────────── */
.obi { background: var(--shiro); color: var(--sumi); padding: 14px 0 13px;
  border-bottom: 1px solid var(--kei); }
.obi-naka { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center;
  justify-content: space-between; }
.yane-kumi { display: grid; grid-template-columns: auto 1fr; column-gap: 11px;
  align-items: center; }
/* 屋号の前の印＝ギフトの箱 */
.yane-kumi::before { content: ""; grid-row: 1 / 3; width: 30px; height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23047857'/%3E%3Cstop offset='1' stop-color='%23059669'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='2' y='10' width='36' height='28' rx='6' fill='url(%23g)'/%3E%3Crect x='18' y='10' width='4' height='28' fill='%23f0fdf4' opacity='.9'/%3E%3Crect x='2' y='20' width='36' height='4' fill='%23f0fdf4' opacity='.9'/%3E%3Cpath d='M20 10C14 3 10 7 18 10Z' fill='%2334d399'/%3E%3Cpath d='M20 10C26 3 30 7 22 10Z' fill='%2334d399'/%3E%3Ccircle cx='20' cy='10' r='2.5' fill='%23f0fdf4'/%3E%3C/svg%3E") center / contain no-repeat; }
.obi .yane { color: var(--midori); text-decoration: none; font-weight: 600; font-size: var(--fs-l);
  letter-spacing: .06em; line-height: 1.4; white-space: nowrap; }
.obi .hitokoto { margin: 0; font-size: var(--fs-xs); color: var(--usu); letter-spacing: .04em;
  line-height: 1.5; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; font-size: var(--fs-s); }
.nav a { color: var(--usu); text-decoration: none; padding: 2px 0; white-space: nowrap; }
.nav a:hover { color: var(--midori); }
.nav a.k3-x { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px;
  background: var(--x); color: var(--shiro); font-size: var(--fs-xs); font-weight: 700; text-decoration: none;
  letter-spacing: .03em; line-height: 1; }
.nav a.k3-x:hover { background: var(--x-koi); color: var(--shiro); }
.x-mark { width: 14px; height: 14px; flex: none; }

/* ?d= で日を動かして見ているときの札 */
.hizuke-fuda { background: #fff6d8; border-bottom: 1px solid #e8d79a; padding: 8px 0;
  font-size: var(--fs-s); }
.hizuke-fuda code { background: var(--shiro); padding: 0 4px; border-radius: 3px; }

/* パンくず＝本文より一段小さく薄く。長い名前は折り返してよい */
.pankuzu ol { list-style: none; display: flex; flex-wrap: wrap; margin: 0 0 10px; padding: 0;
  font-size: var(--fs-xs); color: var(--usu); line-height: 1.6; }
.pankuzu li + li::before { content: "›"; margin: 0 .5em; color: #a8b1bb; }
.pankuzu a { color: var(--usu); }

/* ── 一覧のページの頭 ───────────────────── */
h1.ooi { font-size: var(--fs-2xl); line-height: 1.5; margin: 4px 0 8px; letter-spacing: .01em; }
.mae { margin: 0 0 18px; color: var(--usu); font-size: var(--fs-m); }
.mae .nokori { color: var(--sumi); }

/* ── トップの看板＝写真。左の空に次の締切 ── */
.k3-kanban { position: relative; margin: 14px 0 22px; border-radius: 18px; overflow: hidden;
  aspect-ratio: 16 / 7; min-height: 300px; }
.k3-kanban-e { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.k3-kanban::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.25) 38%, rgba(255,255,255,0) 58%); }
.k3-kanban-moji { position: relative; z-index: 2; height: 100%; max-width: 46%; padding: 28px 32px; display: flex; flex-direction: column;
  justify-content: center; gap: 6px; color: #0f2a22; }
.k3-kanban-ue { margin: 0; font-size: var(--fs-m); font-weight: 700; letter-spacing: .12em; color: var(--midori); }
.k3-kanban-hi { margin: 0; font-size: 2.6rem; font-weight: 800; line-height: 1.15; letter-spacing: .02em;
  font-variant-numeric: lining-nums tabular-nums; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.k3-kanban-ato { font-size: var(--fs-base); font-weight: 800; color: var(--shiro); background: var(--midori); border-radius: 999px; padding: 4px 14px;
  letter-spacing: .04em; }
.k3-kanban-btn { align-self: flex-start; margin-top: 10px; padding: 9px 20px; border-radius: 999px; background: var(--midori); color: var(--shiro);
  font-size: var(--fs-m); font-weight: 700; text-decoration: none; letter-spacing: .04em; box-shadow: 0 4px 12px rgba(6,95,70,.25); }
.k3-kanban-btn:hover { background: var(--midori-koi); color: var(--shiro); }

/* ── 看板のすぐ下＝見出しと説明文。緑の線の枠で、見出しが枠の上の線を切り欠く ── */
.k3-shoukai { position: relative; margin: 8px 0 22px; padding: 22px 20px 16px; border: 1.5px solid var(--midori); border-radius: 14px; }
.k3-shoukai h1 { position: absolute; top: -0.85em; left: 16px; margin: 0; padding: 0 10px; background: var(--men);
  font-size: var(--fs-xl); font-weight: 700; line-height: 1.5; color: var(--midori); letter-spacing: .03em; }
.k3-shoukai p { margin: 0; font-size: var(--fs-m); line-height: 1.85; color: var(--usu-2); }
.k3-shoukai strong { color: var(--sumi); font-weight: 700; }

/* ── 絞り込み＝月のタブと札・検索窓 ── */
.k3-shibori { margin: 0 0 30px; padding: 18px 20px; background: var(--shiro); border: 1px solid var(--kei-2); border-radius: 16px;
  display: grid; gap: 14px; }
.k3-gyou { display: grid; grid-template-columns: 6.5em 1fr; align-items: center; gap: 12px; }
.k3-gyou-na { margin: 0; font-size: var(--fs-xs); font-weight: 700; color: var(--midori); letter-spacing: .06em; }
.k3-tabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.k3-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 7.5em; padding: 7px 16px;
  border-radius: 12px; border: 1.5px solid var(--midori); color: var(--midori); text-decoration: none; line-height: 1.3; }
.k3-tab-na { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .08em; opacity: .85; }
.k3-tab-tsuki { font-size: var(--fs-base); font-weight: 800; letter-spacing: .03em; font-variant-numeric: lining-nums tabular-nums; }
.k3-tab.ima { background: var(--midori); color: var(--shiro); }
.k3-tab:hover { background: var(--midori-usu); }
.k3-tab.ima:hover { background: var(--midori-koi); }
.k3-hoka { position: relative; }
.k3-hoka > summary { list-style: none; cursor: pointer; font-size: var(--fs-s); font-weight: 700; color: var(--usu-2); padding: 8px 12px;
  border-radius: 999px; background: var(--men-2); }
.k3-hoka > summary::-webkit-details-marker { display: none; }
.k3-hoka > summary::after { content: " ▾"; }
.k3-hoka[open] > summary::after { content: " ▴"; }
/* 右端にそろえて開く＝はみ出さない */
.k3-hoka[open] .k3-fuda-retsu { position: absolute; z-index: 5; top: calc(100% + 6px); right: 0; width: 17.5rem; padding: 10px;
  background: var(--shiro); border: 1px solid var(--kei-2); border-radius: 12px; box-shadow: 0 10px 24px -10px rgba(15,23,42,.25); }
.k3-fuda-retsu { display: flex; flex-wrap: wrap; gap: 6px; }
.k3-fuda { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; background: var(--men-2);
  color: #1e293b; font-size: var(--fs-s); font-weight: 600; text-decoration: none; white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums; }
.k3-fuda:hover { background: var(--midori); color: var(--shiro); }
.k3-fuda.aru { background: var(--midori-usu); color: var(--midori); }
.k3-fuda.e-tsuki { padding-left: 5px; }
.k3-fuda img { width: 24px; height: 24px; border-radius: 6px; }

.sagasu-mado { display: flex; gap: 6px; align-items: stretch; }
.sagasu-mado input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: var(--fs-m);
  padding: 9px 14px; border: 1px solid var(--kei); border-radius: 16px; background: var(--shiro);
  color: var(--sumi); -webkit-appearance: none; appearance: none;
}
.sagasu-mado input::placeholder { color: var(--usu); }
.sagasu-mado input:focus { outline: 2px solid var(--midori); outline-offset: -1px; }
.sagasu-mado button {
  font: inherit; font-size: var(--fs-s); font-weight: 700; white-space: nowrap; letter-spacing: .06em;
  padding: 9px 18px; border: 0; border-radius: 16px;
  background: var(--midori); color: var(--shiro); cursor: pointer;
}
.sagasu-mado button:hover { background: var(--midori-koi-2); }

/* ── トップの段の見出し ───────────── */
.ban-atama { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline;
  margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--midori-usu); }
.ban-atama h2 { margin: 0; font-size: var(--fs-l); font-weight: 600; color: var(--midori); }
.ban-atama p { margin: 0; font-size: var(--fs-s); color: var(--usu); }
body:has(.kiji-ban) .ban-atama { border-bottom-color: var(--kei); }

/* ── 新着ピックアップと記事の並び ── */
.pick-ban { margin: 0 0 32px; }
.pick-retsu { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kiji-retsu { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.kiji-retsu > li.nuki, .kiji-retsu > li.kakushi { display: none; }
.narabi { display: flex; gap: 6px; margin-top: 8px; }
.motto { margin: 16px 0 0; text-align: center; }
.motto[hidden], .haishi-nashi[hidden] { display: none; }
.motto-btn { font: inherit; font-size: var(--fs-m); font-weight: 700; letter-spacing: .04em; cursor: pointer;
  padding: 11px 28px; border-radius: 999px; border: 1px solid var(--midori); background: var(--shiro); color: var(--midori); }
.motto-btn:hover { background: var(--midori); color: var(--shiro); }
.haishi-nashi { margin: 8px 0 0; padding: 20px 16px; border-radius: 16px; background: var(--men-2); color: var(--usu);
  text-align: center; font-size: var(--fs-m); }

/* ── 記事のカード（3層）＝締切の帯／絵（背景・ギフト・もらえる物）／会社と金額 ── */
.kiji-card a { position: relative; display: flex; flex-direction: column; gap: 0; height: 100%; padding: 0;
  border-radius: 14px; overflow: hidden; background: var(--shiro); border: 1px solid var(--kei-2);
  color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.kiji-card a:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(15,23,42,.18); }
/* 締切の帯＝いちばん上。「あと〇日」は白い札で色を反転 */
.k3-obi { margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; background: var(--midori); color: var(--shiro); font-variant-numeric: lining-nums tabular-nums; }
.k3-obi .k3-hi { font-size: var(--fs-m); font-weight: 700; letter-spacing: .04em; }
.k3-obi .k3-ato { font-size: var(--fs-m); font-weight: 800; letter-spacing: .04em; color: var(--midori); background: var(--shiro);
  border-radius: 999px; padding: 1px 10px; }
.k3-obi.chikai { background: var(--kohaku); }
.k3-obi.chikai .k3-ato { color: var(--kohaku); }
.k3-obi.usui { background: var(--usu); }
.k3-naka { display: flex; flex-direction: column; flex: 1 1 auto; }
.k3-e { position: relative; aspect-ratio: 16 / 9; background-size: cover; background-position: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; }
.k3-e::before { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.18); }
.haikei-circle { background-image: url(/images/haikei_circle.jpg); }
.haikei-coin { background-image: url(/images/haikei_coin.jpg); }
.haikei-coin2 { background-image: url(/images/haikei_coin2.jpg); }
.haikei-diamond { background-image: url(/images/haikei_diamond.jpg); }
.haikei-dot { background-image: url(/images/haikei_dot.jpg); }
.haikei-festive { background-image: url(/images/haikei_festive.jpg); }
.haikei-floral { background-image: url(/images/haikei_floral.jpg); }
.haikei-kamifubuki { background-image: url(/images/haikei_kamifubuki.jpg); }
.haikei-presentbox { background-image: url(/images/haikei_presentbox.jpg); }
.haikei-ribbon { background-image: url(/images/haikei_ribbon.jpg); }
.haikei-silk { background-image: url(/images/haikei_silk.jpg); }
.haikei-wave { background-image: url(/images/haikei_wave.jpg); }
/* ギフトの絵は四角いっぱい＝丸ではなく角丸の四角 */
.k3-gift { position: relative; width: 84px; height: 84px; border-radius: 18px; overflow: hidden;
  border: 3px solid var(--shiro); box-shadow: 0 4px 14px rgba(15,23,42,.18); background: #fdf3ec; }
.k3-gift img { display: block; width: 100%; height: 100%; }
.k3-mono { position: relative; margin: 0; max-width: 92%; padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,.92); color: var(--sumi); font-size: var(--fs-xs); font-weight: 700; line-height: 1.45;
  text-align: center; letter-spacing: .02em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.k3-hon { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.kiji-card .k3-mei { margin: 0; display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: inherit; font-weight: inherit; line-height: 1.5; color: inherit; letter-spacing: 0; }
.k3-code { flex: none; font-size: var(--fs-2xs); font-weight: 700; color: var(--usu-2); background: var(--men-2); border-radius: 6px;
  padding: 1px 6px; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .04em; }
.k3-sha { font-size: var(--fs-s); font-weight: 700; color: var(--sumi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k3-mono-sp { display: none; }
.k3-gaku { margin: 4px 0 0; color: var(--sumi); font-size: var(--fs-xl); font-weight: 800; letter-spacing: .01em; line-height: 1.2;
  font-variant-numeric: lining-nums tabular-nums; }
.k3-yaku, .k3-en { font-size: var(--fs-xs); font-weight: 600; color: var(--usu-2); }
.k3-yaku { margin-right: 2px; }
.k3-en { margin-left: 3px; }
.kiji-card.owari .k3-e { filter: grayscale(.85); opacity: .7; }
/* 配信日＝新着順のときだけ見せる */
.fuda-haishin { display: none; margin: 0; font-size: var(--fs-2xs); color: var(--usu);
  font-variant-numeric: lining-nums tabular-nums; }
.kiji-retsu.shinchaku .fuda-haishin { display: block; }

/* ── 絞り込みの札（月・優待の内容・金額帯のページ） ─────────────────── */
.shibori { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.tama {
  font: inherit; font-size: var(--fs-s); font-weight: 500; line-height: 1.4;
  padding: 6px 11px; border: 0; border-radius: 12px;
  background: var(--men-2); color: var(--sumi); cursor: pointer; white-space: nowrap;
}
.tama.erabi { background: var(--midori); color: var(--shiro); }
.tama:hover { background: var(--kei); }
.tama .kazu { margin-left: 5px; font-size: .78em; color: var(--usu);
  font-variant-numeric: lining-nums tabular-nums; }
.tama.erabi .kazu { color: #c5d8e9; }

/* ── 一覧（1行＝1つの優待） ─────────────────────────── */
/* 見出しは1回だけ＝「上から順に何が並ぶか」 */
.ichiran-midashi { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 0 0 10px; padding: 0 4px;
  font-size: var(--fs-xs); color: var(--usu); font-weight: 700; letter-spacing: .02em; }
.ichiran-midashi span + span::before { content: "／"; margin: 0 4px; font-weight: 400; color: #b9b2a6; }
.ichiran { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gyou { border: 1px solid var(--kei); border-radius: 16px; background: var(--shiro); overflow: hidden; }
.gyou[hidden] { display: none; }
.gyou > a { display: block; padding: 14px 16px; text-decoration: none; color: inherit; }
.gyou > a:hover { background: var(--men); }
.gyou p { margin: 0; }

.kingaku { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.kingaku .yaku { font-size: .72em; font-weight: 500; color: var(--usu); margin-right: 1px; }
.kingaku .en { font-size: .74em; margin-left: 1px; }
.kingaku .kabu { margin-left: 10px; font-size: .68em; font-weight: 600; color: var(--usu);
  letter-spacing: 0; }
.gyou .mono { margin-top: 1px; font-size: var(--fs-base); font-weight: 600; min-width: 8em; }
.gakumen { margin-left: 7px; font-size: .84em; font-weight: 500; color: var(--usu);
  white-space: nowrap; }
.shirushi { margin-left: 6px; padding: 0 6px; border-radius: 3px; background: var(--kohaku-usu);
  border: 1px solid var(--kohaku-kei); color: var(--kohaku-koi); font-size: .74em; font-weight: 700;
  white-space: nowrap; }
.gyou .kaisha { margin-top: 3px; font-size: var(--fs-m); color: var(--usu); }
.kaisha .code { margin-left: 0; font-size: .92em; color: var(--usu);
  font-variant-numeric: lining-nums tabular-nums; }
.gyou .shime { margin-top: 4px; font-size: var(--fs-s); color: var(--usu); }
.shime strong { color: var(--kohaku); }
.chushaku { color: var(--usu); font-size: .92em; }
.gyou .todoku { margin-top: 2px; font-size: var(--fs-xs); color: var(--usu); }

.kara-shirase { margin: 26px 0; padding: 20px 16px; background: var(--men);
  border: 1px dashed var(--kei); color: var(--usu); font-size: var(--fs-m); }

/* 一覧のページの下の「このページの見方」 */
.setsumei { margin: 34px 0 0; padding: 16px 18px; background: var(--men);
  border: 1px solid var(--kei); border-radius: 16px; }
.setsumei h2 { margin: 0 0 8px; font-size: var(--fs-base); color: var(--midori); }
.setsumei ul { margin: 0; padding-left: 1.15em; }
.setsumei li { font-size: var(--fs-m); color: var(--usu); margin-bottom: 5px; }
.setsumei strong { color: var(--sumi); }

/* 検索の「終了した記事も表示する」 */
.owari-mo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 14px 0 12px;
  font-size: var(--fs-m); }
.owari-mo label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.owari-mo input[type=checkbox] { width: 1.05em; height: 1.05em; accent-color: var(--midori); }
.owari-kazu { color: var(--usu); font-size: var(--fs-s); }

/* ── 記事 ─────────────────────────── */
.kiji, .shin { position: relative; }
.kiji h1 { font-size: var(--fs-2xl); line-height: 1.55; margin: 4px 0 12px; letter-spacing: .005em; }
.kiji h2 { font-size: var(--fs-l); margin: 34px 0 10px; padding-bottom: 6px;
  border-bottom: 2px solid var(--midori-usu); color: var(--midori); }
.kiji h3 { font-size: var(--fs-base); margin: 22px 0 6px; }
.kiji p { margin: 0 0 14px; }
.kiji ul, .kiji ol { margin: 0 0 16px; padding-left: 1.3em; }
.kiji li { margin-bottom: 5px; }
.kiji hr { border: 0; border-top: 1px solid var(--kei); margin: 30px 0; }
.kiji blockquote { margin: 0 0 16px; padding: 12px 16px; background: var(--men);
  border-left: 3px solid var(--midori); font-size: var(--fs-base); }
.kiji blockquote p:last-child { margin-bottom: 0; }
/* タイトルの上の配信日（本文と同じ大きさ・色は添え字） */
.kiji .haishin { margin: 0 0 4px; color: var(--usu); font-size: var(--fs-base); font-variant-numeric: lining-nums tabular-nums; }

/* 会社のページ（2026-10-16・見本＝dev/kaisha_mihon.php の v=2・t=b）
   新しい発表＝配信日の1行と、記事のタイトル／これまでの発表＝発表日・種類の札・タイトルの1行にたたむ */
.kiji .shinchaku { margin: 40px 0 3px; padding-top: 16px; border-top: 2px solid var(--midori);
  color: var(--usu); font-size: var(--fs-s); font-variant-numeric: lining-nums tabular-nums; }
.kiji .shinchaku span { margin-left: 1em; }
.kiji h2.kiji-tai { font-size: var(--fs-xl); margin: 0 0 16px; }
.rireki { margin: 40px 0 16px; padding-top: 16px; border-top: 2px solid var(--midori); }
.kiji .rireki > h2 { font-size: var(--fs-l); margin: 0 0 10px; }
.rireki details, .rireki .rireki-gyou { border-bottom: 1px solid var(--kei); }
.rireki summary, .rireki .rireki-gyou { position: relative; display: flex; flex-wrap: wrap; gap: 3px 10px;
  align-items: baseline; padding: 11px 3px 11px 22px; }
.rireki summary { cursor: pointer; list-style: none; }
.rireki summary::-webkit-details-marker { display: none; }
.rireki summary::before { content: "▸"; position: absolute; left: 3px; top: 11px; color: var(--midori); }
.rireki details[open] summary::before { content: "▾"; }
.rireki .hi { color: var(--usu); font-size: var(--fs-s); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.rireki .fuda { font-size: var(--fs-2xs); background: var(--men-2); border-radius: 4px; padding: 2px 7px; color: var(--sumi-2); }
.rireki .tai { flex: 1 1 20rem; color: var(--sumi); }
.rireki .naka { padding: 3px 3px 16px; font-size: var(--fs-m); }
.rireki .chuu { color: var(--usu); font-size: var(--fs-xs); margin-top: 10px; }

/* 結論の3行 */
.ketsuron { margin: 0 0 22px; padding: 16px 18px; border: 2px solid var(--midori-usu);
  border-radius: 5px; }
.ketsuron > div { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px dotted var(--kei); }
.ketsuron > div:last-child { border-bottom: 0; }
dt { position: relative; }
.ketsuron dt { flex: 0 0 7.4em; font-size: var(--fs-s); color: var(--usu); line-height: 1.7;
  padding-top: 1px; }
.ketsuron dd { margin: 0; flex: 1 1 auto; min-width: 8em; font-size: var(--fs-base); }
.ketsuron dd strong { font-size: 1.1em; }
.ketsuron .tadashi { display: block; margin-top: 2px; font-size: var(--fs-s); color: var(--kohaku-koi); }
.ketsuron .tadashi strong { font-size: 1em; color: inherit; }
/* 権利付最終日を過ぎて次の回が無いとき＝日付を薄く、（ ）の中を太く */
.ketsuron .owari-hi { font-size: 1.1em; color: var(--usu); }
.ketsuron .owari { font-size: 1em; }

/* 廃止の結論・購入前の確認事項＝琥珀の枠 */
.kiji .haishi { margin: 0 0 20px; padding: 14px 16px; background: var(--kohaku-usu);
  border: 1px solid var(--kohaku-kei); border-left: 5px solid var(--kohaku-sen); border-radius: 5px; }
.chui-waku { margin: 0 0 24px; padding: 16px 18px; background: var(--kohaku-usu);
  border: 1px solid var(--kohaku-kei); border-radius: 5px; }
.chui-waku h2 { margin: 0 0 10px; font-size: var(--fs-base); color: var(--kohaku-koi); border: 0; padding: 0; }
.chui + .chui { margin-top: 12px; padding-top: 12px; border-top: 1px dotted var(--kohaku-kei); }
.chui h3 { margin: 0 0 3px; font-size: var(--fs-base); }
.chui p { margin: 0; font-size: var(--fs-m); color: #57534e; }

/* 購入する前に／受け取りの案内 */
.annai { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--kei);
  border-radius: 5px; background: var(--men); }
.annai h2 { margin: 0 0 6px; font-size: var(--fs-base); border: 0; padding: 0; }
.annai p { margin: 0 0 6px; font-size: var(--fs-m); }
.annai p:last-child { margin-bottom: 0; }
.annai p.kakunin { font-size: var(--fs-s); color: var(--sumi); margin-top: 8px; }
.annai.kau { border-left: 4px solid var(--midori); }
.annai.uketori { border-left: 4px solid var(--midori-ao); }

/* 表は横に潰さず、狭いときだけ横に送る（§8-5 スマホでの並び） */
.hyou-waku { overflow-x: auto; margin: 0 0 14px; -webkit-overflow-scrolling: touch; }
.kiji table, .dan table { border-collapse: collapse; width: 100%; min-width: 30rem;
  font-size: var(--fs-m); }
th, td { border: 1px solid var(--kei); padding: 7px 10px; text-align: left;
  vertical-align: top; }
th { background: var(--midori-usu); color: var(--midori); font-weight: 700; white-space: nowrap; }
td.kabusu, td.gaku, td.itsu { white-space: nowrap; }
tr.taishougai td { color: var(--usu); background: var(--men); }

/* 記事の下の「ほかの記事」＝トップと同じカード。
   ★<article> の外に置く＝.kiji の p・ul・h3 の決まりがカードに掛からないように */
.kanren { margin-top: 40px; }
.kanren .kanren-ichiran { margin: 12px 0 0; font-size: var(--fs-m); }
.kanren .kanren-ichiran a { margin-right: 14px; }

/* ── 用語。本文のリンク＝点線の下線（押すとその場に短い説明）、見出しの横の「？」＝小さな丸 ─── */
a.yougo { color: inherit; text-decoration: underline dotted var(--usu-3); text-underline-offset: 3px; }
a.yougo:hover { color: var(--midori); text-decoration-color: var(--midori); }
.hatena { display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em;
  margin-left: 4px; border-radius: 50%; background: var(--midori-usu); color: var(--midori); font-size: .78em; font-weight: 700;
  text-decoration: none; vertical-align: 1px; line-height: 1; }
.hatena { position: relative; }
.hatena::after { content: ""; position: absolute; inset: -12px; }
.hatena:hover, .hatena[aria-expanded="true"] { background: var(--midori); color: var(--shiro); }
.yougo-pop { position: absolute; z-index: 20; display: block; width: min(20rem, calc(100vw - 32px)); margin-top: 6px;
  padding: 10px 14px 11px; background: var(--shiro); border: 1px solid var(--kei); border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(15,23,42,.06), 0 2px 4px -2px rgba(15,23,42,.04); font-size: var(--fs-s); font-weight: 400; line-height: 1.75;
  color: var(--sumi); text-align: left; white-space: normal; letter-spacing: 0; }
.yougo-pop strong { display: block; font-size: var(--fs-m); margin-bottom: 2px; }
.yougo-pop span { display: block; }
.yougo-pop a { display: inline-block; margin-top: 4px; font-size: var(--fs-s); color: var(--midori); font-weight: 700; }
/* 用語のページ・用語集 */
.kiji .yougo-pankuzu { font-size: var(--fs-s); margin: 0 0 6px; }
.kiji .yougo-mokuji { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 22px; }
.yougo-mokuji li { margin: 0; }
.yougo-mokuji a { display: inline-block; padding: 4px 12px; border-radius: 12px; background: var(--men-2);
  color: var(--sumi); font-size: var(--fs-s); text-decoration: none; }
.yougo-mokuji a:hover { background: var(--midori); color: var(--shiro); }
.yougo-page h2[id] { scroll-margin-top: 16px; }
.yougo-hoka { margin-top: 40px; padding: 16px 18px; background: var(--men); border: 1px solid var(--kei); border-radius: 16px; }
.yougo-hoka h2 { margin: 0 0 8px; font-size: var(--fs-base); border: 0; padding: 0; }
.yougo-hoka ul { margin: 0 0 8px; }
.kiji .yougo-pages { list-style: none; padding: 0; display: grid; gap: 10px; }
.yougo-pages li { margin: 0; }
.yougo-pages a { display: block; padding: 12px 16px; border: 1px solid var(--kei); border-radius: 16px;
  text-decoration: none; color: inherit; background: var(--shiro); }
.yougo-pages a:hover { background: var(--men); }
.yougo-pages strong { display: block; font-size: var(--fs-base); color: var(--midori); }
.yougo-pages span { display: block; margin-top: 3px; font-size: var(--fs-xs); color: var(--usu); }
/* やってみたい人向けの読み物（/hajimeru/<ページ>/） */
.hajimeru h2[id] { scroll-margin-top: 16px; }
.kiji .shime-hitokoto { margin: 0 0 24px; padding: 14px 18px; background: var(--men); border: 1px solid var(--kei);
  border-left: 4px solid var(--midori); border-radius: 12px; }
.kiji .shime-hitokoto p { margin: 0 0 6px; }
.shime-hitokoto a { font-size: var(--fs-s); font-weight: 700; }
.kiji .hajimeru-tsugi { margin: 36px 0 0; text-align: center; }
.hajimeru-tsugi a { display: inline-block; padding: 11px 28px; border-radius: 999px; background: var(--midori);
  color: var(--shiro); font-weight: 700; text-decoration: none; }
.yougo-gyou-ato { display: flex; flex-wrap: wrap; gap: 6px; }
.yougo-gyou-ato a { display: inline-block; min-width: 2em; text-align: center; padding: 3px 8px; border-radius: 10px;
  background: var(--men-2); color: var(--sumi); text-decoration: none; font-size: var(--fs-s); }
.yougo-ichiran { margin: 0 0 10px; }
.yougo-ichiran > div { padding: 10px 2px; border-bottom: 1px dotted var(--kei); scroll-margin-top: 16px; }
.yougo-ichiran dt { font-weight: 700; }
.yougo-ichiran .yomi { margin-left: 8px; font-size: var(--fs-xs); font-weight: 400; color: var(--usu); }
.yougo-ichiran dd { margin: 2px 0 0; font-size: var(--fs-m); }
.yougo-ichiran dd a { font-size: var(--fs-s); white-space: nowrap; }

/* ── お問い合わせフォーム。入れ物と送信ボタンは検索窓と同じ見た目にそろえる ─── */
.toi p { margin: 0 0 16px; }
.toi label { display: block; font-size: var(--fs-m); font-weight: 700; margin-bottom: 6px; }
.toi input[type=text], .toi input[type=email], .toi textarea {
  display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: var(--fs-base);
  padding: 10px 14px; border: 1px solid var(--kei); border-radius: 16px; background: var(--shiro);
  color: var(--sumi); -webkit-appearance: none; appearance: none; }
.toi textarea { resize: vertical; min-height: 10em; line-height: 1.7; }
.toi input:focus, .toi textarea:focus { outline: 2px solid var(--midori); outline-offset: -1px; }
.toi button { font: inherit; font-size: var(--fs-m); font-weight: 700; letter-spacing: .06em;
  padding: 11px 28px; border: 0; border-radius: 16px; background: var(--midori); color: var(--shiro); cursor: pointer; }
.toi button:hover { background: var(--midori-koi-2); }
.toi button:disabled { opacity: .6; cursor: default; }
.hissu { display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 4px; background: var(--aka-usu);
  color: var(--aka); font-size: var(--fs-2xs); font-weight: 700; line-height: 1.6; vertical-align: 1px; }
.toi .toi-soe { font-size: var(--fs-s); color: var(--usu); }
.toi .toi-kakushi { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.toi-ayamari { margin: 0 0 18px; padding: 12px 16px 12px 2.2em; background: var(--aka-usu);
  border: 1px solid var(--aka-kei); border-radius: 12px; color: var(--aka); }
.toi-mihon { white-space: pre-wrap; font-size: var(--fs-s); padding: 14px 16px; background: var(--men);
  border: 1px dashed var(--kei); border-radius: 12px; }

/* ── 足（フッター） ───────────────────────────── */
.ashi { margin-top: 40px; padding: 26px 0 34px; background: var(--men);
  border-top: 1px solid var(--kei); font-size: var(--fs-m); }
body:has(.kiji-ban) .ashi { background: var(--men-2); border-top-color: var(--kei); }
.menseki { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--kei); }
.menseki p { margin: 0 0 9px; font-size: var(--fs-xs); color: var(--usu); line-height: 1.8; }
.riyu { font-size: var(--fs-s); color: var(--usu); margin-top: 8px; }
.kotei { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0 8px;
  padding: 0; font-size: var(--fs-s); }
.kotei.uketoru { margin-top: 0; font-size: var(--fs-xs); }
.menseki .unei { font-size: var(--fs-s); color: var(--sumi); }
.k3-x-ashi { display: inline-flex; align-items: center; gap: 6px; }
.k3-x-ashi .x-mark { width: 13px; height: 13px; }

/* ── キーボードで動かしたときの印。押す物すべてに付ける ── */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--midori); outline-offset: 2px; border-radius: 4px; }
.kiji-card a:focus-visible, .gyou > a:focus-visible { outline-offset: -2px; }

/* ── 本文へ飛ぶリンク（キーボードで来たときだけ見える）・読み上げにだけ渡す見出し ── */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 14px; border-radius: 8px;
  background: var(--shiro); color: var(--midori); font-weight: 700; box-shadow: 0 2px 8px rgba(15,23,42,.2); }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── PC（40rem 以上） ── */
@media (min-width: 40rem) {
  body { font-size: 16.5px; }
  h1.ooi { font-size: var(--fs-3xl); }
  .kiji h1 { font-size: var(--fs-3xl); }
  .gyou > a { display: grid; grid-template-columns: 13.2rem 1fr; gap: 0 20px;
    align-items: baseline; padding: 16px 18px; }
  .kingaku { grid-row: 1 / 3; align-self: center; text-align: right; }
  .kingaku .kabu { display: block; margin: 0; }
  .gyou .mono, .gyou .kaisha, .gyou .shime, .gyou .todoku { grid-column: 2; }
}

/* ── スマホ（40rem 未満） ── */
@media (max-width: 40rem) {
  .nav { gap: 0 16px; }
  .nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .nav a.k3-x { padding: 0; min-height: 40px; min-width: 40px; justify-content: center; }
  .kotei { gap: 0 18px; margin: 8px 0 4px; }
  .kotei a { display: inline-flex; align-items: center; min-height: 44px; }
  .nav a.k3-x span { display: none; }      /* Xはマークだけ */
  /* 看板＝低い帯。写真は背景に敷き、文字の後ろは白く抜いて読ませる */
  .k3-kanban { aspect-ratio: auto; min-height: 0; margin: 10px 0 16px; border-radius: 14px; }
  .k3-kanban-e { object-position: 70% 60%; }
  .k3-kanban::before { background: linear-gradient(90deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.6) 60%, rgba(255,255,255,.15) 100%); }
  .k3-kanban-moji { max-width: none; padding: 16px 18px; gap: 4px; }
  .k3-kanban-ue { font-size: var(--fs-xs); }
  .k3-kanban-hi { font-size: 1.8rem; gap: 4px 10px; }
  .k3-kanban-ato { font-size: var(--fs-s); padding: 3px 11px; }
  .k3-kanban-btn { margin-top: 6px; padding: 7px 16px; font-size: var(--fs-xs); }
  .k3-shoukai { margin: 4px 0 16px; padding: 18px 14px 12px; border-radius: 12px; }
  .k3-shoukai h1 { font-size: var(--fs-l); }
  .k3-shoukai p { font-size: var(--fs-s); line-height: 1.75; }
  /* 絞り込み＝見出しは上に。タブ3つで1行、「ほかの月」は次の行の右（4つ詰めると「10月締切」が折り返す） */
  .k3-shibori { margin: 0 0 22px; padding: 14px 14px; gap: 12px; border-radius: 14px; }
  .k3-gyou { grid-template-columns: 1fr; gap: 6px; }
  .k3-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .k3-tab { min-width: 0; padding: 6px 4px; }
  .k3-tab-tsuki { font-size: var(--fs-m); white-space: nowrap; }
  .k3-hoka { grid-column: 1 / -1; justify-self: end; }
  .k3-hoka > summary { padding: 6px 12px; white-space: nowrap; font-size: var(--fs-xs); }
  .k3-hoka[open] .k3-fuda-retsu { width: 16rem; }
  /* 札は1行にして横にすべらせる＝縦に場所を取らない */
  .k3-fuda-retsu.yoko { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px;
    margin-right: -14px; padding-right: 14px; scrollbar-width: none; }
  .k3-fuda-retsu.yoko::-webkit-scrollbar { display: none; }
  /* 新着ピックアップ＝大きいカードを横にめくる */
  .pick-retsu { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px;
    -webkit-overflow-scrolling: touch; }
  .pick-retsu > li { flex: 0 0 78%; scroll-snap-align: start; }
  /* 記事の一覧＝帯の下に横長の1行（左に小さい絵・右に文字）。1画面に4〜5社 */
  .kiji-retsu { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .kiji-retsu > li { min-width: 0; }               /* 1行で切る文字が、並びの幅を押し広げないように */
  .kiji-retsu .kiji-card a { border-radius: 12px; }
  .kiji-retsu .k3-obi { padding: 6px 10px; justify-content: flex-start; }
  .kiji-retsu .k3-obi .k3-hi, .kiji-retsu .k3-obi .k3-ato { font-size: var(--fs-s); }
  .kiji-retsu .k3-naka { flex-direction: row; align-items: stretch; }
  .kiji-retsu .k3-e { flex: none; width: 112px; aspect-ratio: auto; padding: 6px; }
  .kiji-retsu .k3-gift { width: 64px; height: 64px; border-radius: 14px; border-width: 2px; }
  .kiji-retsu .k3-mono { display: none; }          /* 小さい絵に文字は載せない＝右の段に出す */
  .kiji-retsu .k3-hon { flex: 1; min-width: 0; padding: 9px 12px; gap: 2px; }
  .kiji-retsu .k3-mono-sp { display: block; margin: 0; font-size: var(--fs-xs); color: var(--sumi-2); line-height: 1.45;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kiji-retsu .k3-gaku { margin-top: 2px; font-size: var(--fs-l); }
}

/* ── 動きを減らす設定の人には、ホバーで浮く動き・開閉の動きを止める ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .kiji-card a:hover { transform: none; }
}

/* ── 権利付最終日カレンダー（/calendar/・2026-10-16） ── */
.cal-tsugi { background: var(--midori); color: var(--shiro); border-radius: 14px; padding: 18px 20px; margin: 0 0 26px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.cal-tsugi .lb { font-size: var(--fs-s); flex-basis: 100%; }
.cal-tsugi .hi { font-size: var(--fs-3xl); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.cal-tsugi .ato { font-size: var(--fs-l); background: var(--shiro); color: var(--midori); border-radius: 999px; padding: 2px 14px; font-weight: 700; }
.cal-tsugi a { color: var(--shiro); flex-basis: 100%; font-size: var(--fs-m); }
.cal-nen { margin-top: 28px; }
.cal-hyou { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-variant-numeric: lining-nums tabular-nums; }
.cal-hyou th, .cal-hyou td { border-bottom: 1px solid var(--kei); padding: 10px 6px; text-align: left; font-size: var(--fs-m); white-space: nowrap; }
.cal-hyou th { color: var(--usu); font-weight: 400; font-size: var(--fs-s); }
.cal-hyou td.saishu { font-weight: 700; }
.cal-hyou tr.sugita td { color: var(--usu); }
.cal-hyou tr.sugita td.saishu { font-weight: 400; }
.cal-hyou tr.ima td { background: var(--midori-usu); }
.cal-hyou a { font-size: var(--fs-s); }
.cal-hyou .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cal-fuda { font-size: var(--fs-2xs); border-radius: 4px; padding: 1px 6px; margin-left: 6px; background: var(--midori); color: var(--shiro); font-weight: 400; }
.cal-fuda.owari { background: var(--men-2); color: var(--usu); }
details.cal-20 { margin: 18px 0 26px; }
details.cal-20 summary { cursor: pointer; color: var(--midori); font-size: var(--fs-m); }
@media (max-width: 40rem) { .cal-hyou .kijun { display: none; } .cal-hyou th, .cal-hyou td { padding: 9px 4px; } }
/* トップの看板の「次の権利付最終日・あと何日」＝カレンダーへのリンク */
.k3-kanban-cal { color: inherit; text-decoration: none; display: block; }
.k3-kanban-cal-ya { margin-left: 10px; font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0; text-decoration: underline; }
.k3-kanban-cal:hover .k3-kanban-cal-ya { color: var(--midori-koi); }