/* ============================================================
   daiteblog.com — FXチャート大研究ノート
   archetype: ラボノート／方眼手記（研究者のノート風・落書き散見UI）
   ※オーナー指示(2026-07-09): 研究者のノートのようなテキスト、落書きみたいなものが
     散見するUI。→ 方眼紙の地・手書き寄せ書体・付箋/マスキングテープ/手描き矢印や丸/
     蛍光ペンなどの"落書き"を随所に。ただし本文の可読性とSEO/AIO土台は死守。
   palette: 生成りの方眼紙 × インク紺 × 赤ペン/青ペン × 蛍光イエロー、鉛筆グレー
   fonts: 見出し/手書き注記=Klee One・Yomogi / 本文=Noto Sans JP / 数値=等幅
   隣接ブログ（FX系）と骨格・配色・フォント・Hero・装飾を構造レベルで変える（フットプリント回避）。
   ============================================================ */

:root{
  --paper:#f7f3e8;       /* 生成りの紙 */
  --paper-2:#fffdf6;     /* 明るい紙（付箋/カード） */
  --grid:rgba(40,52,84,.07);
  --grid-strong:rgba(40,52,84,.13);
  --ink:#26304a;         /* インク紺 */
  --ink-soft:#55607a;
  --ink-mute:#8b93a6;
  --pencil:#6b7183;
  --red:#c8402f;         /* 赤ペン */
  --blue:#2f56b0;        /* 青ペン */
  --hl:#fff09a;          /* 蛍光イエロー */
  --hl-pink:#ffc9d6;     /* 蛍光ピンク */
  --tape:rgba(232,214,120,.55); /* マスキングテープ黄 */
  --tape-blue:rgba(150,196,224,.55);
  --rule:#d9d2be;
  --up:#2f8f5b;
  --down:#c8402f;
  --max:940px;
  --read:740px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  color:var(--ink);
  font-family:"Noto Sans JP",system-ui,sans-serif;
  font-size:16.5px;
  line-height:1.9;
  font-weight:400;
  /* 方眼紙 */
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 27px, var(--grid) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, var(--grid) 27px 28px),
    repeating-linear-gradient(0deg, transparent 0 139px, var(--grid-strong) 139px 140px);
}

.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.hand{font-family:"Yomogi","Klee One",cursive;}

h1,h2,h3,.brand{
  font-family:"Klee One","Noto Sans JP",cursive;
  font-weight:600;
  line-height:1.6;
  color:var(--ink);
}
a{color:var(--blue);text-decoration:none;}
a:hover{text-decoration:underline;text-decoration-style:wavy;text-underline-offset:3px;}
p{margin:0 0 1.35em;}
strong{font-weight:700;color:var(--ink);
  background:linear-gradient(transparent 62%, var(--hl) 62% 92%, transparent 92%);}
img{max-width:100%;height:auto;display:block;}

/* ---- header：ノートの表紙ラベル風 ---- */
.site-head{
  background:var(--paper-2);
  border-bottom:2px solid var(--ink);
  box-shadow:0 2px 0 var(--rule);
}
.site-head .inner{
  max-width:var(--max);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 18px;
  position:relative;
}
/* マスキングテープ */
.site-head .inner::before{
  content:"";position:absolute;left:16px;top:-6px;width:78px;height:18px;
  background:var(--tape-blue);transform:rotate(-4deg);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.brand{
  font-size:22px;color:var(--ink);text-decoration:none;line-height:1.25;
  display:inline-flex;flex-direction:column;
}
.brand::before{content:"✍ ";font-size:16px;color:var(--red);}
.brand small{
  font-family:ui-monospace,monospace;
  font-size:9.5px;font-weight:500;letter-spacing:.14em;color:var(--blue);margin-top:2px;
}
.nav{display:flex;gap:20px;flex-wrap:wrap;}
.nav a{font-size:14px;color:var(--ink-soft);font-weight:500;}
.nav a:hover{color:var(--red);}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px 64px;}
.post.wrap,.wrap.read{max-width:var(--read);}

.crumb{font-size:12.5px;color:var(--ink-mute);margin:22px 0 18px;}
.crumb a{color:var(--ink-soft);}

/* ============ HERO：ノートの見開き表紙 ============ */
.hero{
  position:relative;margin:26px 0 12px;
  background:var(--paper-2);
  border:1.5px solid var(--ink);
  border-radius:4px;
  padding:30px 30px 26px;
  box-shadow:6px 8px 0 rgba(38,48,74,.10);
}
/* リング穴 */
.hero::before{
  content:"";position:absolute;left:14px;top:22px;bottom:22px;width:2px;
  background:var(--red);opacity:.5;
}
.hero .eyebrow{
  font-family:ui-monospace,monospace;font-size:11.5px;letter-spacing:.18em;color:var(--blue);
  margin:0 0 12px;padding-left:14px;
}
.hero h1{
  font-size:clamp(22px,3.2vw,30px);line-height:1.5;margin:0 0 14px;padding-left:14px;
  position:relative;
}
.hero h1 .mk{
  background:linear-gradient(transparent 58%, var(--hl) 58% 94%, transparent 94%);
  padding:0 2px;
}
.hero .lead{font-size:15px;color:var(--ink-soft);margin:0 0 18px;padding-left:14px;max-width:44em;}
/* hero 2カラム：左=貼り込み写真＋付箋 / 右=著者の自己紹介カード（アイコン付き） */
.hero .herogrid{padding-left:14px;}
.hero .heronote,
.hero .heromain{
  display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;
}
.hero .authorintro{
  position:relative;margin-top:22px;
  background:#fff;border:1px solid var(--rule);border-radius:4px;
  padding:16px 18px 18px;box-shadow:3px 4px 0 rgba(38,48,74,.08);
  transform:rotate(-.4deg);
}
.hero .authorintro .pin{position:absolute;right:14px;top:-12px;font-size:18px;transform:rotate(8deg);}
.hero .authorintro .aicon{
  width:80px;height:80px;border-radius:50%;object-fit:cover;float:left;margin:0 14px 8px 0;
  border:2px solid #fff;box-shadow:0 2px 7px rgba(0,0,0,.16);background:var(--paper);
}
.hero .authorintro .ai-name{font-family:"Klee One",cursive;font-weight:600;font-size:16px;color:var(--ink);margin:2px 0 6px;}
.hero .authorintro .ai-name::before{content:"✒ ";color:var(--red);}
.hero .authorintro .ai-name span{font-family:ui-monospace,monospace;font-size:11px;color:var(--blue);font-weight:400;margin-left:4px;}
.hero .authorintro .ai-bio{font-size:12.5px;color:var(--ink-soft);line-height:1.8;margin:0;}
@media (min-width:960px){
  .hero .herogrid{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start;}
  .hero .heromain{margin:0;}
  .hero .authorintro{margin-top:0;}
  .hero .authorintro .aicon{float:none;display:block;margin:0 auto 10px;width:100px;height:100px;}
  .hero .authorintro .ai-name{text-align:center;}
  .hero .authorintro .ai-bio{clear:both;}
}
.hero .taped{
  position:relative;flex:0 0 auto;width:min(300px,100%);
  background:#fff;padding:8px 8px 10px;border:1px solid var(--rule);
  transform:rotate(-1.6deg);box-shadow:2px 4px 10px rgba(0,0,0,.12);
}
.hero .taped img{display:block;width:100%;height:auto;}
.hero .taped::before,.hero .taped::after{
  content:"";position:absolute;width:64px;height:20px;background:var(--tape);top:-9px;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.hero .taped::before{left:16px;transform:rotate(-6deg);}
.hero .taped::after{right:16px;transform:rotate(5deg);}
.hero .taped .cap{font-family:"Yomogi",cursive;font-size:12px;color:var(--pencil);margin-top:6px;text-align:center;}
.hero .memo{flex:1;min-width:220px;}
.hero .memo .sticky{
  background:var(--hl);color:var(--ink);font-family:"Yomogi",cursive;
  padding:12px 14px;font-size:14px;line-height:1.7;transform:rotate(.8deg);
  box-shadow:2px 3px 6px rgba(0,0,0,.10);border:1px solid rgba(0,0,0,.05);
}
.hero .memo .sticky.blue{background:#dbe8ff;transform:rotate(-1deg);margin-top:14px;}
.hero .memo .sticky b{background:none;}
/* 手描き矢印の落書き */
.hero .doodle{position:absolute;font-family:"Yomogi",cursive;color:var(--red);font-size:14px;opacity:.85;}
.hero .doodle.d1{right:22px;top:16px;transform:rotate(-8deg);}

/* ============ セクション見出し（手描き下線） ============ */
.sec-h{
  font-size:21px;margin:48px 0 18px;position:relative;display:inline-block;padding:0 4px 6px;
}
.sec-h::before{content:"◉ ";color:var(--red);font-size:15px;}
.sec-h::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:6px;
  background:var(--hl);z-index:-1;transform:rotate(-.5deg);
}

/* ============ 学習ノート一覧（feed）＝ 貼り込みクリップ ============ */
.feed{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:22px;}
.feed li{
  position:relative;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:4px;
  padding:16px 18px 16px 16px;
  display:grid;grid-template-columns:1fr;gap:12px;
  box-shadow:3px 4px 0 rgba(38,48,74,.07);
}
.feed .tag{
  position:absolute;right:-6px;top:-10px;z-index:2;
  font-family:"Yomogi",cursive;font-size:12px;color:var(--red);
  background:var(--paper-2);border:1.5px solid var(--red);border-radius:14px/16px;
  padding:2px 12px;transform:rotate(2.5deg);white-space:nowrap;
}
.feed .thumb{
  position:relative;background:#fff;padding:7px 7px 8px;border:1px solid var(--rule);
  transform:rotate(-1deg);box-shadow:2px 3px 8px rgba(0,0,0,.10);width:fit-content;
  justify-self:start;
}
.feed .thumb::before{
  content:"";position:absolute;left:50%;top:-8px;transform:translateX(-50%) rotate(-3deg);
  width:70px;height:18px;background:var(--tape);box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.feed .thumb img{display:block;width:100%;max-width:280px;height:auto;}
.feed .thumb a{display:block;}
.feed .body{min-width:0;}
.feed .body>a{
  font-family:"Klee One",cursive;font-weight:600;font-size:17px;line-height:1.55;color:var(--ink);
}
.feed .body>a:hover{color:var(--red);text-decoration:underline;text-decoration-style:wavy;}
.feed .desc{font-size:13.5px;color:var(--ink-soft);line-height:1.85;margin:6px 0 8px;}
.feed .meta{font-family:ui-monospace,monospace;font-size:11.5px;color:var(--ink-mute);letter-spacing:.02em;}
.feed .meta::before{content:"# ";color:var(--blue);}

@media (min-width:680px){
  .feed li{grid-template-columns:300px 1fr;align-items:start;gap:20px;}
  .feed .thumb{transform:rotate(-1.4deg);}
  .feed .thumb img{max-width:280px;}
}

/* ============ 記事本文 ============ */
.post h1{font-size:clamp(22px,3vw,28px);line-height:1.55;margin:8px 0 14px;}
.post-meta{
  font-family:ui-monospace,monospace;font-size:12.5px;color:var(--ink-soft);
  border-bottom:2px dashed var(--rule);padding-bottom:14px;margin-bottom:28px;
}
.post-meta .author{color:var(--red);font-weight:700;font-family:"Klee One",cursive;}
.post h2{
  font-size:20px;margin:46px 0 16px;padding:2px 6px 4px;display:inline-block;position:relative;
}
.post h2::before{content:"▶ ";color:var(--red);font-size:14px;}
.post h2::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:6px;background:var(--hl);z-index:-1;transform:rotate(-.4deg);}
.post h3{font-size:17px;margin:30px 0 12px;color:var(--blue);}
.post h3::before{content:"✎ ";color:var(--blue);}
.post p{margin:0 0 1.4em;}
.post ul,.post ol{margin:0 0 1.4em;padding-left:1.4em;}
.post li{margin:0 0 .5em;}
.post img{border:1px solid var(--rule);background:#fff;padding:6px;border-radius:2px;margin:22px 0;box-shadow:2px 3px 8px rgba(0,0,0,.08);}

/* 図解キャプション・箇条 */
.diagram{background:var(--paper-2);border:1px dashed var(--rule);border-radius:4px;padding:14px 16px;margin:22px 0;}
.cap{font-family:"Yomogi",cursive;font-size:12.5px;color:var(--pencil);text-align:center;margin-top:6px;}
.bull{list-style:none;padding-left:0;margin:0 0 1.4em;}
.bull li{position:relative;padding-left:1.5em;margin:0 0 .5em;}
.bull li::before{content:"✔";position:absolute;left:0;color:var(--red);}

/* ノート（付箋callout） */
.note{
  background:var(--hl);color:var(--ink);
  border:1px solid rgba(0,0,0,.06);border-radius:2px;
  padding:16px 18px;margin:24px 0;font-size:14.5px;line-height:1.85;
  box-shadow:2px 4px 8px rgba(0,0,0,.10);transform:rotate(-.35deg);
}
.note .label{display:block;font-family:"Yomogi",cursive;font-size:13px;font-weight:700;color:var(--red);margin-bottom:6px;}
.note .label::before{content:"📌 ";}

/* 表 */
.tbl{width:100%;border-collapse:collapse;margin:22px 0;font-size:14px;background:var(--paper-2);}
.tbl th,.tbl td{border:1px solid var(--rule);padding:10px 12px;text-align:left;vertical-align:top;line-height:1.7;}
.tbl th{background:#eef2fb;font-weight:700;color:var(--ink);font-family:"Klee One",cursive;white-space:nowrap;}
.tbl .mono,.tbl td.num{font-family:ui-monospace,monospace;}

/* CTA */
.cta{border:1.5px dashed var(--blue);background:var(--paper-2);border-radius:4px;padding:22px;margin:32px 0;position:relative;}
.cta .ttl{font-family:"Klee One",cursive;font-weight:600;font-size:17px;margin:0 0 8px;color:var(--blue);}
.cta .ttl::before{content:"➜ ";color:var(--red);}
.cta p{margin:0 0 12px;font-size:14.5px;}
.cta .btn,.asp-placeholder a{display:inline-block;background:var(--blue);color:#fff;font-weight:700;padding:11px 24px;border-radius:3px;}
.asp-placeholder{border:1px dashed var(--blue);background:#fff;color:var(--ink-soft);font-size:13px;text-align:center;padding:16px 12px;margin-top:8px;}

/* 著者カード（研究者の名札） */
.author-card{
  display:flex;gap:16px;align-items:flex-start;background:var(--paper-2);
  border:1px solid var(--ink);border-radius:4px;padding:18px;margin:44px 0 24px;position:relative;
  box-shadow:3px 4px 0 rgba(38,48,74,.08);
}
.author-card::before{content:"";position:absolute;left:20px;top:-8px;width:80px;height:18px;background:var(--tape);transform:rotate(-3deg);}
.author-card .av{
  flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  background:var(--ink);color:var(--paper-2);display:flex;align-items:center;justify-content:center;
  font-family:"Klee One",cursive;font-weight:600;font-size:22px;
}
.author-card .nm{font-family:"Klee One",cursive;font-weight:600;margin-bottom:4px;}
.author-card .nm::after{content:" ✒";color:var(--red);}
.author-card .bio{font-size:13.5px;color:var(--ink-soft);line-height:1.85;}

/* 関連 */
.related{border-top:2px dashed var(--rule);margin-top:38px;padding-top:18px;}
.related .label{font-family:"Klee One",cursive;font-size:14px;font-weight:600;color:var(--red);margin-bottom:10px;}
.related .label::before{content:"◉ ";}
.related ul{list-style:none;margin:0;padding:0;}
.related li{margin:0 0 8px;position:relative;padding-left:1.3em;}
.related li::before{content:"↗";position:absolute;left:0;color:var(--blue);}
.related a{font-size:15px;}

.disclaimer{font-size:12.5px;color:var(--ink-soft);line-height:1.8;border-top:1px solid var(--rule);padding-top:20px;margin-top:36px;}

/* footer */
.site-foot{border-top:2px solid var(--ink);background:var(--paper-2);margin-top:44px;}
.site-foot .inner{max-width:var(--max);margin:0 auto;padding:26px 24px 34px;text-align:center;}
.site-foot nav{display:flex;gap:8px 20px;justify-content:center;flex-wrap:wrap;}
.site-foot nav a{font-size:13.5px;color:var(--ink-soft);}
.site-foot nav a:hover{color:var(--red);}
.site-foot p{font-family:ui-monospace,monospace;font-size:11.5px;color:var(--ink-mute);}

/* フォーム */
.form label{display:block;font-weight:700;font-size:14px;margin:18px 0 6px;font-family:"Klee One",cursive;}
.form input,.form textarea{width:100%;padding:11px 12px;border:1px solid var(--rule);border-radius:3px;background:#fff;font-family:inherit;font-size:15px;color:var(--ink);}
.form textarea{min-height:150px;resize:vertical;}
.form button{margin-top:22px;padding:12px 30px;background:var(--ink);color:#fff;border:0;border-radius:3px;cursor:pointer;font-size:15px;font-weight:700;}
.form button:hover{background:var(--blue);}

/* 旧ticker（使う場合の保険） */
.ticker{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0 0;padding-left:14px;}
.cell{background:var(--paper-2);border:1px solid var(--rule);border-radius:3px;padding:10px 12px;font-family:"Yomogi",cursive;}
.cell .k{font-size:12px;color:var(--blue);}
.cell .v{font-size:13px;color:var(--ink);}
.cell.up{border-left:4px solid var(--up);}
.cell.down{border-left:4px solid var(--down);}

@media (min-width:640px){ .ticker{grid-template-columns:repeat(4,1fr);} }

/* ============================================================
   2026-07-10 標準ルール実装（オーナー確定）
   ルールA: カテゴリで記事を回遊できる導線（.catfilter）
   ルールB: インタラクティブ・ギミック＝ライブ為替レート・メモ（.fxrate）
   ※データ取得失敗の握り潰し厳禁（可視フォールバック＋last-goodキャッシュ＋出典/鮮度明示）
   ============================================================ */

/* ---- カテゴリ絞り込みチップ（手書き・付箋トーン） ---- */
.catfilter{
  display:flex;flex-wrap:wrap;gap:8px 9px;margin:6px 0 20px;padding-left:2px;
}
.catbtn{
  font-family:"Yomogi","Klee One",cursive;font-size:13px;color:var(--ink);
  background:var(--paper-2);border:1.5px solid var(--rule);
  border-radius:14px/16px;padding:5px 14px;cursor:pointer;line-height:1.4;
  box-shadow:2px 2px 0 rgba(38,48,74,.06);transition:transform .12s ease;
}
.catbtn:nth-child(odd){transform:rotate(-1.2deg);}
.catbtn:nth-child(even){transform:rotate(1deg);}
.catbtn:hover{border-color:var(--blue);}
.catbtn.on{background:var(--hl);border-color:var(--ink);color:var(--ink);font-weight:600;}
.catbtn.on::before{content:"◉ ";color:var(--red);}
.catfilter .cnt{color:var(--ink-mute);font-size:11px;margin-left:2px;}

/* ---- ライブ為替レート・メモ（ノート貼り込み風） ---- */
.fxrate{
  position:relative;margin:22px 0 8px;
  background:var(--paper-2);border:1.5px solid var(--ink);border-radius:4px;
  padding:16px 18px 14px;box-shadow:4px 5px 0 rgba(38,48,74,.09);
}
.fxrate::before{
  content:"";position:absolute;left:22px;top:-9px;width:84px;height:18px;
  background:var(--tape);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.fxrate-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;margin-bottom:12px;}
.fxrate-ttl{font-family:"Klee One",cursive;font-weight:600;font-size:16px;color:var(--ink);}
.fxrate-ttl::before{content:"✒ ";color:var(--red);}
.fxrate-note{font-family:ui-monospace,monospace;font-size:11px;color:var(--blue);}
.fxrate-note.stale{color:var(--red);}
.fxrate-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.fxcell{
  background:#fff;border:1px solid var(--rule);border-radius:3px;
  padding:9px 12px;display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  transform:rotate(-.4deg);box-shadow:2px 2px 6px rgba(0,0,0,.06);
}
.fxcell:nth-child(even){transform:rotate(.5deg);}
.fxcell .k{font-family:"Yomogi",cursive;font-size:13px;color:var(--ink-soft);}
.fxcell .v{font-family:ui-monospace,monospace;font-weight:700;font-size:18px;color:var(--ink);}
.fxcell .v .u{font-size:11px;color:var(--ink-mute);font-weight:400;margin-left:3px;}
.fxrate-empty{font-family:"Yomogi",cursive;font-size:13.5px;color:var(--red);grid-column:1/-1;padding:6px 2px;line-height:1.7;}
.fxrate-src{font-size:11px;color:var(--ink-mute);line-height:1.7;margin:12px 0 0;border-top:1px dashed var(--rule);padding-top:8px;}
@media (min-width:560px){ .fxrate-grid{grid-template-columns:repeat(4,1fr);} }