@charset "UTF-8";
/* ==========================================================================
   Rekimee Tools — トップページ スタイル
   ========================================================================== */

/* --------------------------------------------------------------------------
   ★ デザイントークン
   既存ツールの :root と色が違って見える場合は、既存 CSS の :root ブロックを
   そのままコピーしてここへ上書きしてください。他は触らなくて構いません。
   -------------------------------------------------------------------------- */
:root{
  --ink:      #111111;
  --paper:    #ffffff;
  --violet:   #5b3df5;
  --violet-lt:#9b8cff;   /* 暗い背景に置く紫 */
  --magenta:  #ff2e88;
  --yellow:   #ffe01b;
  --lime:     #b8ff3c;
  --mute:     #6b6b6b;
  --line:     #111111;
  --tint:     #f4f4f2;

  --bw:       3px;                 /* ボーダー幅 */
  --shadow:   6px 6px 0 var(--ink);
  --shadow-lg:10px 10px 0 var(--ink);
  --skew:     skewX(-18deg);
  --unskew:   skewX(18deg);

  --ff-display:"Archivo Black","Zen Kaku Gothic New",system-ui,sans-serif;
  --ff-body:"Zen Kaku Gothic New",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;

  --maxw: 1180px;
  --gut:  clamp(16px, 4vw, 32px);
}

/* --------------------------------------------------------------- 基礎 */
*,*::before,*::after{ box-sizing:border-box; }

html{
  background:#ffffff;
  color-scheme:only light;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:#ffffff !important;
  color:var(--ink) !important;
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.8;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

[hidden]{ display:none !important; }

img,svg{ max-width:100%; }
a{ color:inherit; }

h1,h2,h3,h4,p,ul,ol,figure,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }

::selection{ background:var(--yellow); color:var(--ink); }

:focus-visible{
  outline:var(--bw) solid var(--magenta);
  outline-offset:3px;
}

/* -------------------------------------------------------- レイアウト枠 */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.section{ padding-block:clamp(48px,8vw,88px); }
.section--tint{ background:var(--tint); border-block:var(--bw) solid var(--ink); }

/* スクリーンリーダーにだけ読ませる */
.vh{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:#fff; padding:12px 20px;
  font-weight:700; z-index:2000;
}
.skip:focus{ left:8px; top:8px; }

/* ----------------------------------------------------------- 見出し類 */
.eyebrow{
  display:inline-block;
  font-family:var(--ff-display);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  border:var(--bw) solid var(--ink);
  padding:4px 12px;
  margin-bottom:18px;
  background:var(--paper);
}

.h2{
  font-family:var(--ff-display);
  font-size:clamp(24px,4.4vw,38px);
  line-height:1.25;
  letter-spacing:.01em;
  margin-bottom:10px;
}
.h2 em{ font-style:normal; background:var(--yellow); padding:0 .18em; box-decoration-break:clone; }

.lede{ color:var(--mute); font-size:15px; max-width:62ch; }

/* --------------------------------------------------------------- chip */
.chip{
  display:inline-block;
  transform:var(--skew);
  background:var(--ink); color:#fff;
  padding:5px 14px;
  border:var(--bw) solid var(--ink);
  font-size:12px; font-weight:700; letter-spacing:.04em;
  white-space:nowrap;
}
.chip > span{ display:inline-block; transform:var(--unskew); }
.chip--violet { background:var(--violet);  color:#fff; }
.chip--magenta{ background:var(--magenta); color:#fff; }
.chip--yellow { background:var(--yellow);  color:var(--ink); }
.chip--lime   { background:var(--lime);    color:var(--ink); }
.chip--paper  { background:var(--paper);   color:var(--ink); }

/* --------------------------------------------------------------- btn */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-body); font-weight:700; font-size:15px;
  padding:12px 20px;
  border:var(--bw) solid var(--ink);
  background:var(--paper); color:var(--ink);
  text-decoration:none; cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease;
}
@media (hover:hover) and (pointer:fine){
  .btn:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow-lg); }
}
.btn:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); }
.btn--fill{ background:var(--ink); color:#fff; }
.btn--sm{ padding:8px 14px; font-size:13px; box-shadow:4px 4px 0 var(--ink); }
@media (prefers-reduced-motion:reduce){
  .btn,.btn:active{ transform:none; transition:none; }
}

/* ======================================================== ヘッダー */
.site-head{
  position:sticky; top:0; z-index:100;
  border-bottom:var(--bw) solid var(--ink);
  background:var(--paper);
}
/* 追従ヘッダーの下にアンカー先が隠れないように */
section[id], div[id]{ scroll-margin-top:78px; }
.site-head__in{
  display:flex; align-items:center; gap:16px;
  min-height:64px;
}
.logo{
  display:inline-flex; align-items:baseline; gap:8px;
  text-decoration:none; font-family:var(--ff-display);
  font-size:20px; letter-spacing:.02em;
}
.logo b{ font-weight:inherit; }
.logo i{
  font-style:normal; font-size:11px; letter-spacing:.18em;
  border:2px solid var(--ink); padding:1px 6px;
}
.site-nav{ margin-left:auto; display:flex; gap:4px; align-items:center; }
.site-nav a{
  text-decoration:none; font-size:14px; font-weight:700;
  padding:8px 12px; border:2px solid transparent;
}
@media (max-width:640px){
  .site-nav a.is-optional{ display:none; }
}

/* ============================================================ ヒーロー */
.hero{
  border-bottom:var(--bw) solid var(--ink);
  background:
    repeating-linear-gradient(-18deg, transparent 0 26px, rgba(17,17,17,.045) 26px 28px);
  padding-block:clamp(36px,6vw,64px);
}
.hero__title{
  font-family:var(--ff-display);
  font-size:clamp(30px,7.2vw,62px);
  line-height:1.12;
  letter-spacing:-.01em;
  margin-bottom:16px;
}
.hero__title .mark{
  background:var(--lime);
  border:var(--bw) solid var(--ink);
  padding:0 .14em;
  display:inline-block;
  transform:var(--skew);
}
.hero__title .mark > span{ display:inline-block; transform:var(--unskew); }
.hero__sub{
  font-size:clamp(15px,2.2vw,18px);
  max-width:60ch; margin-bottom:20px; font-weight:500;
}
.hero__pills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }

/* ------------------------------------------------- 検索（シグネチャ） */
.finder{
  border:var(--bw) solid var(--ink);
  background:var(--paper);
  box-shadow:var(--shadow-lg);
}
.finder__bar{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  border-bottom:var(--bw) solid var(--ink);
}
.finder__ic{ flex:none; width:22px; height:22px; }
.finder input[type="search"]{
  flex:1 1 auto; min-width:0;
  border:0; outline:0; background:transparent;
  font-family:var(--ff-body); font-size:16px; font-weight:700;
  color:var(--ink); padding:6px 0;
  appearance:none;
}
.finder input[type="search"]::-webkit-search-cancel-button{ appearance:none; }
.finder input::placeholder{ color:#9a9a9a; font-weight:500; }
.kbd{
  flex:none;
  font-family:var(--ff-display); font-size:11px;
  border:2px solid var(--ink); padding:3px 8px; background:var(--tint);
}
@media (max-width:560px){ .kbd{ display:none; } }

.finder__filters{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:12px 16px;
}
.fbtn{
  font:inherit; font-size:13px; font-weight:700;
  border:2px solid var(--ink); background:var(--paper); color:var(--ink);
  padding:6px 12px; cursor:pointer;
}
.fbtn[aria-pressed="true"]{ background:var(--ink); color:#fff; }
.finder__count{
  padding:0 16px 12px;
  font-size:13px; color:var(--mute);
}

/* ============================================================ カード */
.grid{
  display:grid;
  gap:clamp(16px,2.4vw,24px);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}

.card{
  position:relative;
  display:flex; flex-direction:column;
  border:var(--bw) solid var(--ink);
  background:var(--paper);
  box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease;
}
@media (prefers-reduced-motion:reduce){
  .card{ transform:none; transition:none; }
}
.card__top{
  display:flex; align-items:flex-start; gap:12px;
  padding:18px 18px 0;
}
.card__ic{
  flex:none; width:52px; height:52px;
  border:var(--bw) solid var(--ink);
  display:grid; place-items:center;
  background:var(--tint);
}
.card__ic svg{ width:26px; height:26px; }
.card--violet  .card__ic{ background:var(--violet); color:#fff; }
.card--magenta .card__ic{ background:var(--magenta); color:#fff; }
.card--yellow  .card__ic{ background:var(--yellow); }
.card--lime    .card__ic{ background:var(--lime); }
.card--ink     .card__ic{ background:var(--ink); color:#fff; }

.card__names{ min-width:0; }
.card__name{
  font-size:19px; font-weight:800; line-height:1.35;
  letter-spacing:.01em;
}
.card__name a{ text-decoration:none; }
.card__name a::after{ content:""; position:absolute; inset:0; }
.card__en{
  font-family:var(--ff-display); font-size:11px;
  letter-spacing:.12em; color:var(--mute); text-transform:uppercase;
}
.card__badge{
  position:absolute; top:-13px; right:14px;
  z-index:2;
}
.card__body{ padding:14px 18px 0; flex:1 1 auto; }
.card__lead{ font-size:14.5px; line-height:1.75; }
.card__meta{
  margin-top:14px;
  border-top:2px dashed var(--ink);
  padding-top:10px;
  font-size:12.5px; color:var(--mute);
  display:grid; gap:3px;
}
.card__meta b{ color:var(--ink); font-weight:700; }
.card__tags{ display:flex; flex-wrap:wrap; gap:6px; padding:14px 18px 0; }
.tag{
  font-size:11.5px; font-weight:700;
  border:2px solid var(--ink); padding:2px 8px; background:var(--paper);
}
.card__foot{
  display:flex; gap:10px; align-items:center;
  padding:16px 18px; margin-top:14px;
  border-top:var(--bw) solid var(--ink);
  position:relative; z-index:3;
}
.card__foot .btn{ position:relative; }
.card__guide{ font-size:13px; font-weight:700; }

/* お気に入りボタン */
.fav{
  margin-left:auto;
  width:40px; height:40px; flex:none;
  border:2px solid var(--ink); background:var(--paper);
  cursor:pointer; display:grid; place-items:center;
  position:relative; z-index:3;
}
.fav i{ font-size:17px; line-height:1; color:var(--ink); }
.fav[aria-pressed="true"]{ background:var(--yellow); }
/* 押した状態は塗りつぶしの星に変える（JSがクラスを差し替える） */
.fav[aria-pressed="true"] i{ color:var(--ink); }

/* 検索で除外されたカード */
.card.is-out{ display:none; }

/* ==================================================== ピン留め・履歴 */
.pinned{
  border:var(--bw) solid var(--ink);
  background:var(--yellow);
  box-shadow:var(--shadow);
  padding:16px 18px;
  margin-bottom:28px;
}
.pinned__head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--ff-display); font-size:13px; letter-spacing:.1em;
  margin-bottom:12px;
}
.pinned__head i{ font-size:15px; line-height:1; }
.pinned__list{ display:flex; flex-wrap:wrap; gap:10px; }
.pinned__list a{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--paper); border:2px solid var(--ink);
  padding:8px 14px; text-decoration:none; font-weight:700; font-size:14px;
}
.pinned__hint{ font-size:12.5px; margin-top:10px; line-height:1.8; }
/* 説明文の中に置く、控えめな操作リンク */
.linkbtn{
  font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
  background:none; border:0; padding:0 2px; color:var(--ink);
  text-decoration:underline; text-underline-offset:3px;
}

/* ============================================================ 用途別 */
.scenes{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.scene{
  border:var(--bw) solid var(--ink); background:var(--paper);
  padding:16px 18px; cursor:pointer; text-align:left;
  font:inherit; box-shadow:4px 4px 0 var(--ink);
}
.scene b{ display:block; font-size:16px; margin-bottom:4px; }
.scene span{ font-size:13px; color:var(--mute); }

/* ============================================================ 3本柱 */
.pillars{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.pillar{
  border:var(--bw) solid var(--ink); background:var(--paper);
  padding:22px; box-shadow:var(--shadow);
}
.pillar__n{
  font-family:var(--ff-display); font-size:34px; line-height:1;
  display:block; margin-bottom:10px;
}
.pillar h3{ font-size:17px; margin-bottom:8px; }
.pillar p{ font-size:14px; color:var(--mute); }

/* ============================================================ 比較表 */
.tablewrap{
  border:var(--bw) solid var(--ink);
  background:var(--paper);
  overflow-x:auto;
  box-shadow:var(--shadow);
  -webkit-overflow-scrolling:touch;
}
table.cmp{ border-collapse:collapse; width:100%; min-width:760px; font-size:14px; }
table.cmp th, table.cmp td{
  border:2px solid var(--ink); padding:12px 14px; text-align:left; vertical-align:top;
}
table.cmp thead th{ background:var(--ink); color:#fff; font-size:13px; letter-spacing:.04em; white-space:nowrap; }
table.cmp tbody th{ background:var(--tint); font-weight:800; white-space:nowrap; }
table.cmp td.ok{ background:#f2fde9; font-weight:700; }
.tablenote{ font-size:12.5px; color:var(--mute); margin-top:10px; }

/* ============================================================ 手順 */
.steps{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); counter-reset:st; }
.step{ border:var(--bw) solid var(--ink); padding:20px; background:var(--paper); box-shadow:4px 4px 0 var(--ink); }
.step::before{
  counter-increment:st; content:counter(st,decimal-leading-zero);
  font-family:var(--ff-display); font-size:26px; display:block; margin-bottom:8px;
  color:var(--violet);
}
.step h3{ font-size:16px; margin-bottom:6px; }
.step p{ font-size:14px; color:var(--mute); }

/* ============================================================ 更新履歴 */
.news{ display:grid; gap:0; border:var(--bw) solid var(--ink); background:var(--paper); }
.news li{ display:flex; gap:14px; flex-wrap:wrap; padding:14px 18px; border-bottom:2px solid var(--ink); }
.news li:last-child{ border-bottom:0; }
.news time{ font-family:var(--ff-display); font-size:13px; flex:none; }
.news p{ font-size:14px; flex:1 1 260px; }

/* ============================================================ FAQ */
.faq{ display:grid; gap:12px; }
.faq details{
  border:var(--bw) solid var(--ink); background:var(--paper);
}
.faq summary{
  cursor:pointer; list-style:none;
  padding:16px 52px 16px 18px;
  font-weight:800; font-size:15.5px; position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-family:var(--ff-display); font-size:22px; line-height:1;
}
.faq details[open] summary{ background:var(--ink); color:#fff; }
.faq details[open] summary::after{ content:"−"; }
.faq .faq__a{ padding:16px 18px; border-top:2px solid var(--ink); font-size:14.5px; }

/* ============================================================ CTA帯 */
.bookmark{
  border:var(--bw) solid var(--ink);
  background:var(--violet); color:#fff;
  box-shadow:var(--shadow-lg);
  padding:clamp(22px,4vw,34px);
  display:grid; gap:14px;
}
.bookmark h2{ font-family:var(--ff-display); font-size:clamp(20px,3.4vw,30px); line-height:1.3; }
.bookmark p{ font-size:14.5px; }
.bookmark kbd{
  font-family:var(--ff-display); font-size:12px;
  background:#fff; color:var(--ink); border:2px solid var(--ink); padding:2px 8px;
}

/* ============================================================ フッター */
.site-foot{
  border-top:var(--bw) solid var(--ink);
  background:var(--ink); color:#fff;
  padding-block:44px 32px;
}
.site-foot a{ color:#fff; }
.foot-grid{ display:grid; gap:28px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.foot-grid h3{
  font-family:var(--ff-display); font-size:12px; letter-spacing:.14em;
  margin-bottom:12px; text-transform:uppercase; color:var(--lime);
}
.foot-grid li{
  margin-bottom:8px; font-size:14px;
  position:relative; padding-left:15px;
}
/* ツール名・ページ名の左に置く紫のワンポイント（暗い背景でも見えるトーン） */
.foot-grid li::before{
  content:""; position:absolute; left:0; top:.66em;
  width:8px; height:8px; background:var(--violet-lt);
  transform:var(--skew);
}
.foot-grid a{ text-decoration:none; }
.foot-bottom{
  margin-top:34px; padding-top:18px; border-top:2px solid #444;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:12.5px; color:#bdbdbd;
}

/* ==================================================== JSがない場合 */
.js-only{ display:none; }
.js .js-only{ display:block; }

/* ==================================================== タッチ端末 */
@media (hover:none) and (pointer:coarse){
  input, select, textarea{ font-size:16px; }
  .card:hover{ transform:none; box-shadow:var(--shadow); }
}

/* ==================================================== 印刷 */
@media print{
  .finder,.site-foot,.bookmark,.pinned{ display:none; }
  .card{ box-shadow:none; break-inside:avoid; }
}

/* ------------------------------------------------- 補足文（pillar内の注記） */
.pillar__note{
  margin-top:10px;
  font-size:13px;
  line-height:1.75;
  color:var(--mute);
  padding-left:12px;
  border-left:var(--bw) solid var(--violet-lt);
}


/* ==========================================================================
   ホバー効果（マウス等の正確なポインタを持つ環境だけに適用）
   タッチ端末ではタップ後にホバー状態が残るため、全ツール共通で
   @media (hover:hover) and (pointer:fine) の中に閉じ込めています。
   ========================================================================== */
@media (hover:hover) and (pointer:fine){
  @media (prefers-reduced-motion:reduce){
    .btn:hover{transform:none; transition:none;}
    .card:hover{transform:none; transition:none;}
  }
  .site-nav a:hover{border-color:var(--ink);}
  .card:hover{transform:translate(-3px,-3px); box-shadow:var(--shadow-lg);}
  .pinned__list a:hover{background:var(--ink); color:#fff;}
  .linkbtn:hover{color:var(--magenta);}
  .scene:hover{background:var(--lime);}
  .scene:hover span{color:var(--ink);}
  .foot-grid li:hover::before{background:var(--lime);}
  .foot-grid a:hover{text-decoration:underline;}
}


/* ===========================================================================
   オープンβ表示（ロゴの隣の小さなバッジ）
   ベータを終えるときは、このブロックと各ヘッダーの
   <span class="rk-beta">オープンβ版</span> を消せば全て外れる。
   （grep -rn 'rk-beta' で全箇所が出ます）
   =========================================================================== */
.rk-beta{
  display:inline-block;
  font-family:"Zen Kaku Gothic New",system-ui,-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
  font-style:normal; font-weight:700; font-size:10px; line-height:1.7;
  letter-spacing:.04em; text-transform:none; text-decoration:none;
  background:#ffe01b; color:#111; border:2px solid #111;
  padding:0 5px; margin-left:6px;
  white-space:nowrap; vertical-align:middle;
}
@media (max-width:420px){
  .rk-beta{ font-size:9px; padding:0 4px; margin-left:4px; }
}


/* ===========================================================================
   ヘッダーの折り返し（v23で修正）
   ---------------------------------------------------------------------------
   .site-head__in が1行のフレックスのままだったため、幅が足りなくなると
   ナビの項目が縮められ、「ツール一覧」が1文字ずつ縦に並ぶ状態になっていた。
   （iPhone 16 Pro / Chrome で発生を確認）

   直し方は2つ。
     1) ナビの各項目を縮ませない（white-space:nowrap ＋ flex:0 0 auto）
     2) それでも幅が足りないときは、ナビを2行目へ丸ごと送る
   縦組みは「縮んだ結果」であって意図した表示ではないため、行を増やす方を採る。
   =========================================================================== */
.site-head__in{ flex-wrap:wrap; }
.logo{ min-width:0; }
.site-nav{ flex:0 0 auto; flex-wrap:wrap; }
.site-nav a{ white-space:nowrap; flex:0 0 auto; }

@media (max-width:720px){
  .site-head__in{ min-height:0; padding:10px 0; gap:6px 12px; }
  .site-nav{ margin-left:0; width:100%; gap:2px; margin-inline-start:-10px; }
  .site-nav a{ font-size:13px; padding:6px 10px; }
}