/* ============================================================
   しまぴーの介護お役立ちガイド（サンプル）
   かわいい・手書き風テーマ ＋ スクロールでぴょこっと表示
   ============================================================ */
:root{
  --bg:#fbf6ea;
  --paper:#fffdf7;
  --ink:#5b5348;
  --ink-soft:#8a8072;
  --pink:#e88aab;
  --pink-deep:#d46b91;
  --pink-l:#fbe0ea;
  --blue:#5b9bd0;
  --blue-deep:#3f7cb0;
  --blue-l:#e3eef8;
  --green:#7cbf94;
  --yellow:#f4cd72;
  --line:#e9ddc6;
  --radius:20px;
  --hand:"Yomogi","Zen Maru Gothic","Hiragino Maru Gothic ProN",cursive;
  --round:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic UI","Meiryo",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:100%;}
/* 文字サイズ切り替え（JSが html にクラスを付ける） */
html.fs-lg{font-size:112.5%;}
html.fs-xl{font-size:125%;}
body{
  font-family:var(--round);color:var(--ink);background:var(--bg);
  line-height:2;font-size:1rem;-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.045;mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:var(--blue-deep);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;display:block;}
.wrap{max-width:940px;margin:0 auto;padding:0 20px;position:relative;z-index:1;}
.narrow{max-width:720px;margin:0 auto;}

/* ---- ヘッダー ---- */
header{background:var(--paper);border-bottom:2px dotted var(--line);position:sticky;top:0;z-index:30;}
.header-inner{max-width:940px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;position:relative;}
.site-logo{font-family:var(--hand);font-size:1.15rem;color:var(--ink);display:flex;align-items:center;gap:9px;min-width:0;}
.site-logo img{width:auto;height:40px;flex:none;}
header nav{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
header nav a{color:var(--ink-soft);font-size:.92rem;margin-left:16px;font-weight:500;}
header nav a:hover{color:var(--pink-deep);text-decoration:none;}
header nav a[aria-current="page"]{color:var(--pink-deep);font-weight:700;}
header nav a[aria-current="page"]::after{content:"";display:block;height:3px;background:var(--pink);border-radius:2px;margin-top:1px;}

/* ---- 見出し帯 ---- */
.page-head{background:linear-gradient(180deg,#fdf1e0,#fbe9d6);padding:52px 0 60px;text-align:center;position:relative;}
.page-head h1{font-family:var(--hand);font-weight:400;font-size:1.8rem;line-height:1.6;letter-spacing:.03em;}
.page-head p{color:var(--ink-soft);margin-top:10px;font-size:.95rem;}
.page-head .deco{position:absolute;z-index:0;}
.page-head .d1{left:5%;top:18px;width:78px;opacity:.9;}
.page-head .d2{right:6%;top:24px;width:64px;opacity:.95;}
.page-head .d3{right:17%;bottom:14px;width:46px;}
.page-head .wrap{position:relative;z-index:1;}

/* ---- 波線の区切り ---- */
.wave-sep{display:block;width:100%;max-width:560px;margin:34px auto;opacity:.55;}

/* ---- パンくず ---- */
.crumb{font-size:.83rem;color:var(--ink-soft);padding:16px 0 0;}
.crumb a{color:var(--ink-soft);}

/* ---- セクション見出し ---- */
.sec-title{font-family:var(--hand);font-weight:400;font-size:1.35rem;margin:8px 0 14px;display:flex;align-items:center;gap:10px;padding-bottom:10px;background:url("/assets/wave-tile.svg") left bottom / 26px 8px repeat-x;}
.sec-title img{width:34px;height:34px;}
.sec-title.anchor{scroll-margin-top:80px;}

/* ---- 記事カード ---- */
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:26px 0;}
.card{
  background:var(--paper);border:2.5px solid var(--line);border-radius:22px 26px 20px 24px;
  padding:24px;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
  position:relative;cursor:pointer;
}
.card:hover{transform:translateY(-4px) rotate(-.5deg);border-color:var(--pink);box-shadow:0 12px 26px rgba(190,120,90,.13);}
.card:focus-within{border-color:var(--pink);}
.card .tag{display:inline-block;background:var(--pink-l);color:var(--pink-deep);font-size:.75rem;font-weight:700;padding:4px 12px;border-radius:999px;}
.card h3{font-family:var(--hand);font-weight:400;font-size:1.12rem;line-height:1.6;margin:10px 0 8px;}
.card h3 a{color:var(--ink);}
/* カードのどこを押してもリンク先へ飛べるようにする */
.card h3 a::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;}
.card:hover h3 a{color:var(--pink-deep);text-decoration:none;}
.card p{color:var(--ink-soft);font-size:.9rem;}
.card .date{color:var(--ink-soft);font-size:.78rem;margin-top:12px;}
.card .thumb-illust{width:auto;height:58px;float:right;margin:-2px -2px 4px 10px;}

/* ---- 本文 ---- */
article.post{
  background:var(--paper);border:2.5px solid var(--line);border-radius:26px;
  padding:40px;margin:22px 0 40px;position:relative;
}
article.post .post-illust{position:absolute;right:22px;top:-56px;width:auto;height:96px;}
.inline-illust{display:block;margin:20px auto;max-height:200px;width:auto;}
.inline-illust.small{max-height:130px;}

/* ---- 表（早見表・費用） ---- */
.tbl-scroll{overflow-x:auto;margin:20px 0;}
table.info{width:100%;border-collapse:collapse;background:var(--paper);border:2.5px solid var(--line);border-radius:14px;overflow:hidden;font-size:.92rem;min-width:520px;}
table.info th,table.info td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;}
table.info thead th{background:var(--pink-l);color:var(--pink-deep);font-family:var(--hand);font-weight:400;}
table.info tbody th{background:var(--blue-l);color:var(--blue-deep);font-weight:700;white-space:nowrap;}
table.info tr:last-child td,table.info tr:last-child th{border-bottom:none;}

/* ---- 用語集 ---- */
.glossary{margin:20px 0;}
.glossary .term{background:var(--paper);border:2.5px solid var(--line);border-radius:16px 20px 14px 18px;padding:16px 20px;margin-bottom:14px;}
.glossary .term dt{font-family:var(--hand);font-weight:400;font-size:1.1rem;color:var(--pink-deep);margin-bottom:4px;}
.glossary .term dd{font-size:.93rem;}
.gindex{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0;}
.gindex a{background:var(--paper);border:2px solid var(--line);border-radius:999px;padding:4px 14px;font-size:.85rem;color:var(--ink-soft);}
article.post .tag{display:inline-block;background:var(--pink-l);color:var(--pink-deep);font-size:.77rem;font-weight:700;padding:4px 14px;border-radius:999px;}
article.post h1{font-family:var(--hand);font-weight:400;font-size:1.55rem;line-height:1.65;margin:14px 0 6px;}
article.post .meta{color:var(--ink-soft);font-size:.82rem;margin-bottom:26px;}
article.post h2{
  font-family:var(--hand);font-weight:400;font-size:1.25rem;margin:36px 0 14px;padding-bottom:10px;line-height:1.5;
  background:url("/assets/wave-tile.svg") left bottom / 26px 8px repeat-x;
}
article.post h3{font-size:1.03rem;font-weight:700;margin:22px 0 8px;color:var(--pink-deep);}
article.post p{margin:12px 0;}
article.post ul,article.post ol{margin:12px 0 12px 1.4em;}
article.post li{margin:7px 0;}
article.post li::marker{color:var(--pink);}
.note{background:var(--blue-l);border:2px dashed #bcd6ec;border-radius:16px;padding:16px 18px;margin:22px 0;font-size:.93rem;}
.note strong{color:var(--blue-deep);}
.point{background:var(--pink-l);border:2px dashed #f0c4d5;border-radius:16px;padding:16px 18px;margin:22px 0;font-size:.93rem;}
.point strong{color:var(--pink-deep);}

/* ---- ロードマップ（はじめての方へ） ---- */
.roadmap{margin:28px 0;}
.roadmap .step{display:grid;grid-template-columns:60px 1fr;gap:16px;position:relative;padding-bottom:26px;}
.roadmap .step::before{content:"";position:absolute;left:29px;top:60px;bottom:-6px;width:3px;background:repeating-linear-gradient(#e6d9bf 0 6px,transparent 6px 13px);}
.roadmap .step:last-child::before{display:none;}
.roadmap .n{width:58px;height:58px;border-radius:50%;background:var(--pink);color:#fff;font-family:var(--hand);font-size:1.5rem;display:flex;align-items:center;justify-content:center;flex:none;}
.roadmap .body{background:var(--paper);border:2.5px solid var(--line);border-radius:18px 22px 16px 20px;padding:18px 22px;}
.roadmap .body h3{font-family:var(--hand);font-weight:400;font-size:1.15rem;color:var(--ink);margin-bottom:4px;display:flex;align-items:center;gap:8px;}
.roadmap .body h3 img{width:auto;height:38px;}
.roadmap .body p{font-size:.93rem;margin:6px 0;}
.roadmap .body .tip{font-size:.85rem;color:var(--ink-soft);background:var(--blue-l);border-radius:10px;padding:8px 12px;margin-top:8px;}

/* ---- 動画埋め込み（基本＝縦型ショート 9:16）---- */
.video-embed{margin:26px 0;}
.video-embed .frame{position:relative;width:100%;max-width:320px;margin:0 auto;padding-top:177.78%;background:#2b2b33;border-radius:18px;overflow:hidden;border:3px solid var(--line);}
.video-embed .frame .placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#b6b2c2;text-align:center;padding:20px;gap:8px;font-size:.9rem;}
.video-embed .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-embed .cap{font-size:.82rem;color:var(--ink-soft);margin-top:8px;text-align:center;}
/* 横長動画を載せたいときは <div class="video-embed wide"> にする */
.video-embed.wide .frame{max-width:none;padding-top:56.25%;}

/* ---- 関連・CTA ---- */
.related{margin:36px 0 0;}
.related h2{font-family:var(--hand);font-weight:400;font-size:1.1rem;background:none;padding:0;margin-bottom:12px;}
.related ul{list-style:none;margin:0;}
.related li{border-bottom:2px dotted var(--line);padding:10px 0;}
.cta{background:var(--pink);color:#fff;border-radius:22px;padding:28px 26px;text-align:center;margin:32px 0;position:relative;}
.cta img{width:60px;position:absolute;left:22px;top:-30px;}
.cta p{margin-bottom:14px;}
.cta a{display:inline-block;background:#fff;color:var(--pink-deep);font-weight:700;padding:12px 28px;border-radius:999px;}
.cta a:hover{text-decoration:none;transform:scale(1.04);}

/* ---- 動画一覧（縦型ショートのサムネ）---- */
/* ---- 動画セクション：並び替えタブ＋横一列（PCは4枚見える） ---- */
.video-tabs{display:flex;gap:8px;margin:16px 0 14px;}
.video-tabs button{
  border:2px solid var(--line);background:var(--paper);color:var(--ink-soft);font:inherit;font-size:.86rem;font-weight:700;
  padding:7px 18px;border-radius:999px;cursor:pointer;transition:transform .12s ease;
}
.video-tabs button:hover{transform:translateY(-2px);}
.video-tabs button.active{background:var(--pink);color:#fff;border-color:var(--pink);}

.video-row-outer{position:relative;}
.video-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 12px;scroll-behavior:smooth;}
.video-row .v{
  flex:0 0 calc((100% - 42px)/4);min-width:120px;scroll-snap-align:start;
  background:var(--paper);border:2.5px solid var(--line);border-radius:14px;overflow:hidden;
  text-decoration:none;color:inherit;display:block;transition:transform .15s ease,border-color .15s ease;
}
.video-row .v:hover{transform:translateY(-3px);border-color:var(--pink);text-decoration:none;}
.video-row .v .thumb{aspect-ratio:9/16;background:repeating-linear-gradient(45deg,#efe4cd,#efe4cd 10px,#e9ddc2 10px,#e9ddc2 20px);display:flex;align-items:center;justify-content:center;color:#a99e83;font-size:.78rem;}
.video-row.wide .v{flex:0 0 calc((100% - 28px)/3);}
.video-row.wide .v .thumb{aspect-ratio:16/9;}
.video-row .v .t{padding:9px 11px;font-size:.82rem;line-height:1.55;}
.video-row .v .views{padding:0 11px 10px;font-size:.74rem;color:var(--ink-soft);}

.row-arrow{
  position:absolute;top:38%;transform:translateY(-50%);z-index:5;
  width:38px;height:38px;border-radius:50%;border:2px solid var(--line);background:var(--paper);
  color:var(--pink-deep);font-size:1.3rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(90,70,45,.15);
}
.row-arrow.prev{left:-8px;}
.row-arrow.next{right:-8px;}
.row-arrow:hover{background:var(--pink-l);}
.row-arrow[hidden]{display:none;}

/* ---- カテゴリ絞り込み ---- */
.filter{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 4px;}
.filter button{border:2px solid var(--line);background:var(--paper);color:var(--ink-soft);font:inherit;font-size:.85rem;padding:7px 18px;border-radius:999px;cursor:pointer;transition:transform .12s ease;}
.filter button:hover{transform:translateY(-2px);}
.filter button.active{background:var(--pink);color:#fff;border-color:var(--pink);}

/* ---- フッター ---- */
footer{background:#4a4237;color:#d6ccb9;padding:38px 0 44px;font-size:.86rem;margin-top:40px;position:relative;z-index:1;}
footer .f-inner{max-width:940px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;}
footer strong{font-family:var(--hand);font-weight:400;color:#fff;}
footer a{color:#d6ccb9;}
footer .disclaimer{font-size:.78rem;color:#a89d88;margin-top:10px;line-height:1.8;}

/* ---- 記事のもくじ（JSが自動生成） ---- */
.toc{background:var(--blue-l);border:2px dashed #bcd6ec;border-radius:16px;padding:16px 20px 16px 22px;margin:22px 0;}
.toc-ttl{font-family:var(--hand);color:var(--blue-deep);margin-bottom:4px;font-size:1.02rem;}
.toc ol{margin:0;padding-left:1.4em;}
.toc li{margin:5px 0;font-size:.92rem;}
.toc li::marker{color:var(--blue);}
article.post h2{scroll-margin-top:88px;}

/* ---- ページ先頭へ戻るボタン（JSが挿入） ---- */
.back-to-top{
  position:fixed;right:16px;bottom:16px;z-index:40;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2.5px solid var(--pink);background:var(--paper);color:var(--pink-deep);font-size:1.2rem;text-decoration:none;
  cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s,transform .15s;
  box-shadow:0 6px 16px rgba(90,70,45,.18);
}
.back-to-top.show{opacity:1;pointer-events:auto;}
.back-to-top:hover{transform:translateY(-3px);text-decoration:none;}

/* ---- フッターのサイトマップ ---- */
.foot-links{max-width:940px;margin:0 auto 22px;padding:0 20px;display:flex;flex-wrap:wrap;gap:6px 18px;position:relative;z-index:1;}
.foot-links a{color:#e6ddcc;font-size:.85rem;}
.foot-links a:hover{color:#fff;}

/* ---- 記事冒頭「この記事でわかること」 ---- */
.key-points{
  background:var(--paper);border:2.5px solid var(--pink);border-radius:16px 20px 14px 18px;
  padding:18px 22px;margin:20px 0 24px;
}
.key-points .kp-ttl{font-family:var(--hand);color:var(--pink-deep);font-size:1.05rem;margin-bottom:6px;display:flex;align-items:center;gap:7px;}
.key-points .kp-ttl::before{content:"";width:14px;height:14px;background:var(--pink);border-radius:50%;flex:none;}
.key-points ul{margin:0;padding-left:1.3em;}
.key-points li{margin:5px 0;font-size:.95rem;}
.key-points li::marker{color:var(--pink);}

/* ---- 記事内のFAQ（クリックで開閉。JS不要） ---- */
.faq{margin:8px 0;}
.faq details{
  background:var(--paper);border:2px solid var(--line);border-radius:14px;
  margin-bottom:10px;overflow:hidden;
}
.faq summary{
  list-style:none;cursor:pointer;padding:14px 46px 14px 44px;position:relative;
  font-weight:700;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{
  content:"Q";position:absolute;left:16px;top:12px;
  font-family:var(--hand);color:var(--pink-deep);font-size:1.05rem;
}
.faq summary::after{
  content:"＋";position:absolute;right:18px;top:13px;color:var(--pink);font-weight:700;transition:transform .2s;
}
.faq details[open] summary::after{content:"−";}
.faq .faq-body{padding:0 20px 16px 44px;color:var(--ink-soft);font-size:.93rem;}
.faq details[open] summary{background:var(--pink-l);}

/* ---- 本文中のリンクは下線をつけて分かりやすく ---- */
article.post p a, article.post li a, .toc a, .related li a,
.glossary dd a, .crumb a, .feature a, .day-flow a{
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;
}
article.post p a:hover, article.post li a:hover{text-decoration-thickness:2.5px;}

/* ---- 読了時間（JSが挿入） ---- */
.readtime{display:inline-block;background:var(--pink-l);color:var(--pink-deep);font-size:.78rem;font-weight:700;padding:2px 10px;border-radius:999px;margin-left:8px;}

/* ---- シェア（外部スクリプトなし・ただのリンク＋コピー） ---- */
.share{margin:28px 0 0;padding:16px 18px;background:var(--paper);border:2px dashed var(--line);border-radius:14px;text-align:center;}
.share .share-ttl{font-size:.86rem;color:var(--ink-soft);margin-bottom:10px;}
.share .btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.share a,.share button{
  border:2px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:.85rem;font-weight:700;
  padding:8px 16px;border-radius:999px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;
}
.share a:hover,.share button:hover{border-color:var(--pink);background:var(--pink-l);text-decoration:none;}
.share .line{border-color:#5fbf60;color:#3f8f40;}
.share .copied{color:var(--pink-deep);border-color:var(--pink);}

/* ---- 前の記事・次の記事 ---- */
.prevnext{display:flex;gap:12px;margin:32px 0 0;flex-wrap:wrap;}
.prevnext a{
  flex:1 1 45%;min-width:200px;background:var(--paper);border:2.5px solid var(--line);border-radius:16px;
  padding:14px 18px;text-decoration:none;transition:border-color .15s ease,transform .15s ease;
}
.prevnext a:hover{border-color:var(--pink);transform:translateY(-2px);text-decoration:none;}
.prevnext .lbl{display:block;font-size:.76rem;color:var(--ink-soft);margin-bottom:3px;}
.prevnext .ttl{font-family:var(--hand);color:var(--ink);font-size:.98rem;line-height:1.5;}
.prevnext .next{text-align:right;}

/* ---- 文字サイズ切り替えウィジェット（JSが挿入） ---- */
.fs-control{
  position:fixed;left:14px;bottom:14px;z-index:40;display:flex;align-items:center;gap:4px;
  background:var(--paper);border:2px solid var(--line);border-radius:999px;padding:5px 10px;
  box-shadow:0 4px 14px rgba(90,70,45,.15);font-size:.8rem;
}
.fs-control b{color:var(--ink-soft);font-weight:700;margin-right:2px;}
.fs-control button{
  border:0;background:var(--pink-l);color:var(--pink-deep);font:inherit;font-weight:700;
  width:30px;height:30px;border-radius:50%;cursor:pointer;line-height:1;
}
.fs-control button[aria-pressed="true"]{background:var(--pink);color:#fff;}
.fs-chara{width:20px;height:20px;object-fit:contain;flex:none;transition:width .25s ease,height .25s ease,transform .2s ease;}
.fs-control.size-l .fs-chara{width:26px;height:26px;}
.fs-control.size-xl .fs-chara{width:34px;height:34px;}
.fs-chara.bump{animation:fs-bump .45s ease;}
@keyframes fs-bump{0%{transform:scale(1) rotate(0);}40%{transform:scale(1.35) rotate(-10deg);}70%{transform:scale(.95) rotate(6deg);}100%{transform:scale(1) rotate(0);}}
.fs-control .hunt-count{margin-left:4px;padding-left:9px;border-left:1px solid var(--line);color:var(--ink-soft);font-size:.76rem;white-space:nowrap;}

/* ---- 隠れキャラ探し ---- */
.hunt-chara{
  position:absolute;left:4%;top:-30px;width:28px;height:28px;object-fit:contain;
  opacity:.38;filter:grayscale(65%);cursor:pointer;z-index:2;
  animation:hunt-idle 3.4s ease-in-out infinite;
  transition:opacity .3s ease,filter .3s ease;
}
.hunt-chara:hover{opacity:.7;}
.hunt-chara.found{opacity:1;filter:none;animation:none;}
.hunt-chara.pop{animation:hunt-pop .6s ease !important;}
@keyframes hunt-idle{0%,100%{opacity:.3;}50%{opacity:.52;}}
@keyframes hunt-pop{
  0%{transform:scale(1) rotate(0);}
  40%{transform:scale(1.5) rotate(15deg);}
  70%{transform:scale(.9) rotate(-8deg);}
  100%{transform:scale(1) rotate(0);}
}
.hunt-msg{
  position:absolute;z-index:56;background:#fff;border:2px solid var(--yellow);border-radius:999px;
  padding:5px 14px;font-family:var(--hand);font-size:.86rem;color:#a3781c;white-space:nowrap;
  opacity:0;pointer-events:none;animation:pet-msg-pop 1.7s ease forwards;box-shadow:0 4px 10px rgba(90,70,45,.15);
}
@media(max-width:760px){.hunt-chara{left:3%;width:24px;height:24px;top:-24px;}}

/* ---- 隠れキャラ探し：コンプリート演出 ---- */
.hunt-complete-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(50,40,25,.45);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;animation:hc-fade-in .4s ease forwards;
}
@keyframes hc-fade-in{to{opacity:1;}}
.hunt-complete-card{
  background:var(--paper);border-radius:24px;padding:36px 30px;max-width:340px;text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.28);transform:scale(.8);opacity:0;
  animation:hc-pop .5s cubic-bezier(.34,1.56,.64,1) forwards .1s;
}
@keyframes hc-pop{to{transform:scale(1);opacity:1;}}
.hunt-complete-card img{width:76px;margin:0 auto 14px;}
.hunt-complete-card h3{font-family:var(--hand);font-weight:400;font-size:1.35rem;color:var(--pink-deep);margin-bottom:10px;}
.hunt-complete-card p{color:var(--ink-soft);font-size:.94rem;margin-bottom:20px;line-height:1.85;}
.hunt-complete-card button{background:var(--pink);color:#fff;border:0;border-radius:999px;padding:11px 32px;font:inherit;font-weight:700;cursor:pointer;}
.hunt-complete-card button:hover{background:var(--pink-deep);}
.confetti-piece{position:fixed;top:-20px;z-index:199;pointer-events:none;animation:confetti-fall linear forwards;}
@keyframes confetti-fall{to{transform:translateY(112vh) translateX(var(--drift,0)) rotate(var(--spin,360deg));opacity:.85;}}

/* ---- 記事の読み進みバー ---- */
.read-progress-track{position:fixed;left:0;right:0;height:4px;background:rgba(90,70,45,.08);z-index:28;pointer-events:none;}
.read-progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--blue));}
.read-progress-chara{position:absolute;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);}

/* ---- トップページ「今日のひとこと」 ---- */
.today-tip{
  max-width:560px;margin:0 auto 6px;background:var(--paper);border:2px dashed var(--pink);border-radius:16px;
  padding:14px 20px;display:flex;align-items:center;gap:13px;text-align:left;position:relative;z-index:1;
  opacity:0;transform:translateY(8px);animation:tip-in .5s ease .35s forwards;
}
@keyframes tip-in{to{opacity:1;transform:translateY(0);}}
.today-tip img{width:42px;height:42px;flex:none;object-fit:contain;}
.today-tip .tip-label{display:block;font-family:var(--hand);color:var(--pink-deep);font-size:.8rem;margin-bottom:2px;}
.today-tip p{margin:0;font-size:.92rem;color:var(--ink);line-height:1.7;}
@media(max-width:760px){.today-tip{margin-left:20px;margin-right:20px;}}

/* ---- YouTubeチャンネルへの導線 ---- */
.channel-cta{
  background:var(--paper);border:2.5px dashed var(--pink);border-radius:18px;
  padding:20px;text-align:center;margin:24px 0;
}
.channel-cta p{margin-bottom:12px;font-size:.95rem;}
.channel-cta a{
  display:inline-block;background:var(--pink);color:#fff;font-weight:700;
  padding:11px 26px;border-radius:999px;text-decoration:none;
}
.channel-cta a:hover{background:var(--pink-deep);text-decoration:none;transform:scale(1.03);}

/* ============================================================
   スクロールで「ぴょこっと」表示
   ============================================================ */
@keyframes pop{
  0%{opacity:0;transform:translateY(26px) scale(.88);}
  62%{opacity:1;transform:translateY(-7px) scale(1.03);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}
.reveal{opacity:0;}
.reveal.shown{animation:pop .55s cubic-bezier(.34,1.56,.64,1) both;}
.reveal.d1.shown{animation-delay:.08s;}
.reveal.d2.shown{animation-delay:.16s;}
.reveal.d3.shown{animation-delay:.24s;}

/* ふわふわ浮く飾り */
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-9px) rotate(2deg);}}
.deco{pointer-events:none;}
.deco.float{animation:floaty 4.5s ease-in-out infinite;}
.deco.float.slow{animation-duration:6.5s;}

/* ---- ページ内ジャンプのチップ ---- */
.jump{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:26px 0 4px;}
.jump a{background:var(--paper);border:2px solid var(--line);border-radius:999px;padding:8px 20px;font-size:.9rem;color:var(--ink);}
.jump a:hover{background:var(--pink-l);border-color:var(--pink);text-decoration:none;}

/* ---- フッターのキャラ（クリックでなでなで） ---- */
footer{overflow:visible;}
.footer-chara{position:absolute;right:5%;top:-62px;height:82px;width:auto;pointer-events:auto;cursor:pointer;}
@media(max-width:760px){.footer-chara{height:60px;top:-46px;right:4%;}}
@keyframes pet-wag{0%,100%{transform:rotate(0deg);}25%{transform:rotate(-9deg);}75%{transform:rotate(9deg);}}
.footer-chara.wag{animation:pet-wag .45s ease 2;}
.pet-heart{position:absolute;z-index:55;font-size:18px;pointer-events:none;opacity:0;animation:pet-heart-float 1.1s ease forwards;}
@keyframes pet-heart-float{
  0%{opacity:0;transform:translate(0,0) scale(.4);}
  22%{opacity:1;transform:translate(0,-6px) scale(1.1);}
  100%{opacity:0;transform:translate(var(--dx,0px),-48px) scale(1);}
}
.pet-msg{
  position:absolute;z-index:55;background:#fff;border:2px solid var(--pink);border-radius:999px;
  padding:5px 14px;font-family:var(--hand);font-size:.86rem;color:var(--pink-deep);white-space:nowrap;
  opacity:0;pointer-events:none;animation:pet-msg-pop 1.5s ease forwards;box-shadow:0 4px 10px rgba(90,70,45,.15);
}
@keyframes pet-msg-pop{
  0%{opacity:0;transform:translateY(6px) scale(.85);}
  15%{opacity:1;transform:translateY(0) scale(1);}
  78%{opacity:1;}
  100%{opacity:0;transform:translateY(-10px) scale(.96);}
}

/* ---- ヘッダーのしまぴー（クリックで一瞬だけ表情が変わる） ---- */
.site-logo img{cursor:pointer;}
.site-logo img.pop{animation:logo-pop .4s ease;}
@keyframes logo-pop{0%{transform:scale(1);}40%{transform:scale(1.28) rotate(-6deg);}100%{transform:scale(1);}}

/* ---- 記事を読み終えたときの「ありがとう」 ---- */
.finish-thanks{
  display:flex;align-items:center;gap:14px;justify-content:center;position:relative;overflow:visible;
  background:var(--pink-l);border:2px dashed var(--pink);border-radius:18px;padding:16px 22px;margin:26px 0;
  opacity:0;transform:scale(.85) translateY(10px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1);
}
.finish-thanks.show{opacity:1;transform:scale(1) translateY(0);}
.finish-thanks img{width:52px;height:52px;object-fit:contain;flex:none;}
.finish-thanks p{font-family:var(--hand);color:var(--pink-deep);font-size:1.05rem;margin:0;line-height:1.5;}
.finish-sparkle{position:absolute;width:20px;height:20px;pointer-events:none;opacity:0;animation:finish-sparkle-pop 1.1s ease forwards;}
@keyframes finish-sparkle-pop{
  0%{opacity:0;transform:scale(.3) translateY(0) rotate(0deg);}
  30%{opacity:1;transform:scale(1.1) translateY(-8px) rotate(20deg);}
  100%{opacity:0;transform:scale(.6) translateY(-30px) rotate(40deg);}
}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.shown{opacity:1;animation:none;}
  .deco.float{animation:none;}
  .hunt-chara{animation:none;opacity:.5;}
  html{scroll-behavior:auto;}
}

@media(max-width:820px){
  /* ヘッダー：ロゴを上、ナビは横スクロールのピル */
  .header-inner{flex-direction:column;align-items:stretch;gap:8px;padding:10px 0 6px;}
  .site-logo{justify-content:center;font-size:1rem;padding:0 16px;}
  .site-logo img{height:34px;}
  header nav{
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    gap:7px;padding:2px 16px 6px;scrollbar-width:none;
  }
  header nav::-webkit-scrollbar{display:none;}
  header nav a{
    margin:0;flex:none;white-space:nowrap;font-weight:700;font-size:.83rem;
    background:var(--pink-l);color:var(--pink-deep);border-radius:999px;padding:6px 14px;
  }
  header nav a[aria-current="page"]{background:var(--pink);color:#fff;}
  header nav a[aria-current="page"]::after{display:none;}
}

@media(max-width:760px){
  .card-grid{grid-template-columns:1fr;}
  .video-row .v{flex:0 0 calc((100% - 14px)/2);}
  .video-row.wide .v{flex:0 0 88%;}
  .row-arrow{display:none;}
  article.post{padding:22px 18px;}
  article.post h1{font-size:1.28rem;}
  article.post h2{font-size:1.12rem;}
  article.post .post-illust{height:60px;top:-30px;right:12px;}
  .page-head{padding:38px 0 44px;}
  .page-head h1{font-size:1.38rem;}
  .page-head .d1{width:42px;top:8px;left:3%;opacity:.6;}
  .page-head .d2,.page-head .d3{display:none;}
  .card .thumb-illust{height:46px;}
  .sec-title{font-size:1.15rem;}
  table.info{font-size:.85rem;}
  .roadmap .step{grid-template-columns:44px 1fr;gap:12px;}
  .roadmap .n{width:44px;height:44px;font-size:1.2rem;}
  .roadmap .step::before{left:22px;}
  .roadmap .body h3{font-size:1.05rem;}
  .cta img{width:48px;left:16px;top:-24px;}
  .back-to-top{width:42px;height:42px;right:12px;bottom:12px;}
  .fs-control{left:10px;bottom:10px;padding:4px 8px;}
  .fs-control button{width:27px;height:27px;}
  .foot-links{gap:4px 14px;}
}

/* ============================================================
   印刷用（本文だけきれいに出す）
   ============================================================ */
@media print{
  header, footer, .back-to-top, .fs-control, .jump, .page-head .deco,
  .footer-chara, .deco, .video-embed, .channel-cta, .cta, .prevnext,
  .toc, .filter, nav.foot-links{display:none !important;}
  body{background:#fff;color:#000;font-size:11pt;line-height:1.7;}
  body::before{display:none;}
  .wrap,.narrow{max-width:100%;padding:0;}
  article.post{border:0;box-shadow:none;padding:0;margin:0;}
  article.post .post-illust{display:none;}
  article.post h1{font-size:18pt;}
  article.post h2{font-size:13pt;background:none;border-bottom:1.5pt solid #000;padding-bottom:3pt;}
  article.post h3{font-size:11.5pt;color:#000;}
  .note,.point{border:1pt solid #999;background:#f4f4f4;}
  a{color:#000;text-decoration:none;}
  .crumb{color:#555;}
  .inline-illust{max-height:120px;}
}