/* =========================================================
   タレリク 共通スタイル
   - 色・書体・余白のトークン
   - ヘッダー／フッター／メニュー
   - 写真の仮枠・テープ・表示アニメーション
   - 一覧（目次）・絞り込み・トースト
   ========================================================= */

:root {
	--milk: #FBF8F2;
	--paper: #F3ECDF;
	--ink: #1E1E1E;
	--line: #E2DACB;
	--muted: #6B665E;
	--accent: #E86A86;
	--marker: #FFE45C;
	--main: #E86A86;
	--sub: #2E9C8F;
	--on-main: #1E1E1E;
	--main-soft: #FCE6EB;

	--f-body: "Noto Sans JP", sans-serif;
	--f-head: "M PLUS 1", sans-serif;
	--f-hand: "Yomogi", cursive;
	--f-num: "Outfit", sans-serif;

	--hdr-h: 56px;
	/* 左右の余白：画面幅に比例（最小16px） */
	--gut: max(16px, 4.2vw);
	--noise: 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- リセット・基本 ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: calc(var(--hdr-h) + var(--wpadmin, 0px) + 16px); }
body { background: var(--milk) var(--noise); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.85; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ol, ul { list-style: none; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: var(--milk); padding: 8px 14px; border-radius: 8px; }
.skip-link:focus { top: 8px; }

/* ---------- ヘッダー ---------- */
.hdr { position: sticky; top: 0; z-index: 40; height: var(--hdr-h); display: flex; align-items: center; gap: 24px; padding: 0 var(--gut); background: rgba(251, 248, 242, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
/* WordPressの管理バー（ログイン時）の高さ。600px以下では管理バーが固定されずに流れるので0 */
:root { --wpadmin: 0px; }
.admin-bar { --wpadmin: 32px; }
@media (max-width: 782px) { .admin-bar { --wpadmin: 46px; } }
@media (max-width: 600px) { .admin-bar { --wpadmin: 0px; } }
.hdr { top: var(--wpadmin); }
.logo { font-family: var(--f-head); font-weight: 900; font-size: 22px; line-height: 1; margin-right: auto; }
.logo a { text-decoration: none; }
.logo i { font-style: normal; color: var(--accent); }
.gnav { display: none; }
.hdr-rt { display: flex; align-items: center; gap: 12px; }
.sample { font-size: 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; white-space: nowrap; }
.hbiz { display: none; }
.burger { position: relative; width: 28px; height: 28px; }
.burger::before, .burger::after { content: ""; position: absolute; left: 2px; right: 2px; height: 2px; background: var(--ink); transition: transform .25s, top .25s, box-shadow .25s; }
.burger::before { top: 7px; box-shadow: 0 6px 0 var(--ink); }
.burger::after { top: 19px; }
.burger[aria-expanded="true"]::before { top: 13px; transform: rotate(45deg); box-shadow: none; }
.burger[aria-expanded="true"]::after { top: 13px; transform: rotate(-45deg); }

.drawer { position: fixed; z-index: 39; inset: var(--hdr-h) 0 auto; background: var(--milk) var(--noise); border-bottom: 2px solid var(--ink); padding: 8px var(--gut) 20px; box-shadow: 0 12px 30px rgba(0, 0, 0, .1); }
.drawer { top: calc(var(--hdr-h) + var(--wpadmin)); }
.drawer nav { display: grid; }
.drawer a { font-weight: 700; padding: 12px 4px; border-bottom: 1px dashed var(--line); text-decoration: none; }

@media (min-width: 960px) {
	:root { --hdr-h: 64px; }
	.hdr { gap: 32px; }
	.logo { font-size: 26px; margin-right: 0; }
	.gnav { display: flex; gap: 28px; margin-right: auto; font-size: 14px; font-weight: 700; }
	.gnav a { text-decoration: none; }
	.gnav a:hover { background: linear-gradient(transparent 60%, var(--marker) 60%); }
	.hbiz { display: inline-block; font-size: 13px; font-weight: 700; border: 2px solid var(--ink); border-radius: 999px; padding: 4px 14px; text-decoration: none; }
	.burger, .drawer { display: none !important; }
}

/* ---------- 写真・仮枠 ---------- */
.mk-img { width: 100%; height: 100%; object-fit: cover; }
.ph { position: relative; display: flex; align-items: flex-end; justify-content: flex-end; padding: 8px; width: 100%; height: 100%; font-size: 10px; line-height: 1.5; color: rgba(0, 0, 0, .55); text-align: right;
	background: linear-gradient(160deg, rgba(255, 255, 255, .35), rgba(0, 0, 0, .18)), repeating-linear-gradient(45deg, rgba(0, 0, 0, .05) 0 10px, transparent 10px 20px), #CFC6B8; }
.ph span { position: relative; z-index: 1; }
.ph.is-brief { align-items: center; justify-content: center; text-align: center; padding: 16px; font-size: 11px; color: var(--muted); border: 2px dashed #C8BEAE; background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(0, 0, 0, .035) 8px 16px), #EFE9DE; }
.ph.is-figure { background-color: var(--c, #CFC6B8); background-image: none; }
.ph.is-figure::after { content: ""; position: absolute; inset: auto 14% 0; height: 66%; background: #CFC6B8; border-radius: 60px 60px 0 0; }

/* マスキングテープ */
.tape { position: relative; }
.tape::before { content: ""; position: absolute; z-index: 2; left: 50%; top: -11px; width: 64px; height: 22px; margin-left: -32px; background: color-mix(in srgb, var(--marker) 70%, transparent); transform: rotate(-3deg);
	clip-path: polygon(0 8%, 6% 0, 12% 10%, 20% 2%, 30% 8%, 40% 0, 50% 8%, 60% 1%, 70% 9%, 80% 0, 90% 8%, 100% 2%, 100% 94%, 92% 100%, 84% 92%, 74% 100%, 64% 93%, 54% 100%, 44% 92%, 34% 100%, 24% 93%, 14% 100%, 6% 92%, 0 100%); }

/* 表示アニメーション（JS有効時のみ） */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.js [data-reveal].in { opacity: 1; transform: none; }

/* 流れる一言 */
.marq { background: var(--ink); color: var(--milk); overflow: hidden; height: 38px; display: flex; align-items: center; }
.marq div { white-space: nowrap; font-family: var(--f-hand); font-size: 16px; animation: mk-marq 34s linear infinite; }
@keyframes mk-marq { to { transform: translateX(-50%); } }

/* ---------- セクション共通 ---------- */
.sec { padding: 48px var(--gut) 8px; }
.kicker { display: flex; align-items: baseline; gap: 10px; border-bottom: 1.5px solid var(--ink); padding-bottom: 6px; margin-bottom: 20px; }
.kicker b { font-family: var(--f-num); font-weight: 800; font-size: 13px; letter-spacing: .16em; }
.kicker span { font-family: var(--f-hand); font-size: 20px; }
.ava { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 13px; font-weight: 700; border: 2px solid var(--ink); line-height: 1; }
.ava.t { background: var(--main); color: var(--on-main); }
.ava.e { background: #fff; }

/* ---------- 絞り込み ---------- */
.filter h3 { font-family: var(--f-hand); font-weight: 400; font-size: 18px; margin: 4px 0 10px; }
.filter h3.mt { margin-top: 22px; }
.tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 calc(var(--gut) * -1); padding: 8px var(--gut) 0; scrollbar-width: none; border-bottom: 2px solid var(--ink); }
.tabs > * { flex-shrink: 0; position: relative; font-size: 15px; font-weight: 700; padding: 8px 14px 6px; background: #fff; border: 2px solid var(--ink); border-bottom: 0; border-radius: 10px 10px 0 0; transform: translateY(2px); transition: transform .15s; text-decoration: none; line-height: 1.5; }
.tabs > *::before { content: ""; position: absolute; left: 8px; right: 8px; top: -2px; height: 5px; border-radius: 0 0 3px 3px; background: var(--tc, var(--ink)); }
.tabs > [aria-pressed="true"], .tabs > [aria-current] { background: var(--marker); transform: translateY(-4px); }
.stamps { display: flex; gap: 10px; flex-wrap: wrap; }
.stamps > * { width: 68px; height: 68px; border-radius: 50%; border: 2px dashed var(--ink); display: grid; place-items: center; font-family: var(--f-hand); font-size: 16px; line-height: 1.2; text-align: center; transition: transform .2s; text-decoration: none; }
.stamps > [aria-pressed="true"], .stamps > [aria-current] { border-style: solid; background: var(--marker); transform: rotate(-10deg) scale(1.04); box-shadow: 0 0 0 3px var(--milk), 0 0 0 5px var(--ink); }
.count { display: flex; justify-content: space-between; align-items: baseline; margin: 22px 0 4px; font-size: 14px; color: var(--muted); }
.count b { font-family: var(--f-num); font-size: 28px; color: var(--ink); margin: 0 2px; }
.count button, .count a { font-size: 13px; text-decoration: underline; }

/* ---------- 目次（記事一覧） ---------- */
.toc li[hidden] { display: none; }
.entry { display: grid; grid-template-columns: 132px 1fr; gap: 14px; align-items: start; text-decoration: none; padding: 22px 0; border-bottom: 1px dashed var(--line); }
.toc li:nth-child(even) .entry { grid-template-columns: 1fr 132px; }
.toc li:nth-child(even) .pic { order: 2; }
.pic { position: relative; transform: rotate(var(--r, -2deg)); transition: transform .3s; }
.entry:hover .pic { transform: rotate(0) scale(1.03); }
.pic .frame { background: #fff; padding: 6px 6px 22px; box-shadow: 0 4px 12px rgba(0, 0, 0, .14); }
.pic .frame > * { aspect-ratio: 3 / 4; height: auto; }
.txt .n { display: flex; align-items: baseline; gap: 8px; }
.txt .n b { font-family: var(--f-num); font-weight: 800; font-size: 34px; line-height: 1; color: var(--c); }
.txt .n small { font-size: 13px; color: var(--muted); }
.txt h3 { font-family: var(--f-head); font-weight: 900; font-size: 19px; line-height: 1.45; margin-top: 6px; }
.entry:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.txt .co { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.6; }
.txt .chips { margin-top: 8px; }
.txt .chips span { display: inline-block; font-size: 12px; border: 1.5px solid var(--c); border-radius: 999px; padding: 0 8px; margin: 0 4px 4px 0; background: color-mix(in srgb, var(--c) 12%, #fff); }
.empty { text-align: center; padding: 36px 0; font-family: var(--f-hand); font-size: 18px; color: var(--muted); }
.nextstop { margin: 26px 0 0; border: 2px dashed var(--ink); border-radius: 14px; padding: 18px 16px; text-align: center; }
.nextstop b { display: block; font-family: var(--f-hand); font-weight: 400; font-size: 22px; }
.nextstop p { font-size: 15px; color: var(--muted); }
.nextstop .more { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 700; background: var(--ink); color: var(--milk); border-radius: 999px; padding: 8px 18px; text-decoration: none; }

/* ページ送り */
.pagination { margin: 32px 0 0; }
.pagination .nav-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pagination .page-numbers { min-width: 40px; height: 40px; display: grid; place-items: center; padding: 0 10px; border: 2px solid var(--ink); border-radius: 999px; text-decoration: none; font-family: var(--f-num); font-weight: 700; }
.pagination .current { background: var(--ink); color: var(--milk); }

/* ---------- ボタン ---------- */
.btn { display: block; width: 100%; text-align: center; font-weight: 700; font-size: 16px; padding: 14px; border-radius: 999px; text-decoration: none; border: 2px solid var(--ink); }
.btn.soft { background: #fff; color: var(--ink); }
.btn.main { background: var(--main); color: var(--on-main); box-shadow: 3px 3px 0 var(--ink); }
.btn-ink { display: inline-block; background: var(--ink); color: var(--milk); font-weight: 700; border-radius: 999px; padding: 10px 22px; text-decoration: none; }

/* ---------- 汎用ページ ---------- */
.page-inner { padding: 48px var(--gut) 64px; }
.page-title { font-family: var(--f-head); font-weight: 900; font-size: 28px; line-height: 1.4; margin-bottom: 20px; }
.prose > * + * { margin-top: 1em; }
.prose a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.notfound { text-align: center; }
.notfound .hand { font-family: var(--f-hand); font-size: 22px; }

/* ---------- フッター ---------- */
.foot { padding: 48px var(--gut) 56px; text-align: center; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); }
.foot .logo { display: block; font-size: 28px; margin: 0 0 6px; color: var(--ink); }
.foot-nav { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 8px 0 12px; font-size: 13px; }

/* ---------- トースト（導線の説明） ---------- */
.toast { position: fixed; z-index: 60; left: 50%; bottom: 20px; width: min(380px, calc(100% - 32px)); transform: translate(-50%, calc(100% + 40px)); visibility: hidden; transition: transform .35s ease, visibility .35s; background: var(--ink); color: var(--milk); border-radius: 14px; padding: 12px 16px; font-size: 14px; line-height: 1.7; }
.toast.on { transform: translate(-50%, 0); visibility: visible; }
.toast b { font-family: var(--f-hand); font-weight: 400; font-size: 17px; display: block; color: var(--marker); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
	.js [data-reveal] { opacity: 1; transform: none; }
	.marq div { animation: none !important; }
}


/* =========================================================
   手作り感：画用紙・クレヨン・落書き
   ========================================================= */
:root {
	--paper-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .35' numOctaves='3' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .09 0'/%3E%3C/filter%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .27 0 0 0 0 .22 0 0 0 .11 -.02'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3Cg opacity='.35'%3E%3Ccircle cx='40' cy='60' r='1' fill='%23d9a441'/%3E%3Ccircle cx='210' cy='30' r='.8' fill='%237aa6c9'/%3E%3Ccircle cx='280' cy='190' r='1' fill='%23c9707a'/%3E%3Ccircle cx='120' cy='250' r='.8' fill='%238bb07a'/%3E%3Ccircle cx='70' cy='170' r='.7' fill='%23a58a6a'/%3E%3Ccircle cx='250' cy='290' r='.9' fill='%23d9a441'/%3E%3C/g%3E%3C/svg%3E");
	--crayon-scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cfilter id='c' x='-5%25' y='-30%25' width='110%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4' result='w'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='w' scale='3' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' seed='8' result='g'/%3E%3CfeColorMatrix in='g' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.2 1.25' result='m'/%3E%3CfeComposite in='d' in2='m' operator='in'/%3E%3C/filter%3E%3Cpath filter='url(%23c)' d='M4 26 22 12 18 30 40 10 36 32 62 10 58 32 86 10 82 32 110 10 106 32 134 10 130 32 158 10 154 32 182 12 178 30 196 18' fill='none' stroke='%23FFD24A' stroke-width='12' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
	--cr-red: #E8505B;
	--cr-blue: #3E8EDE;
	--cr-yellow: #F5B82E;
	--cr-green: #5DBB63;
	--cr-orange: #F2884B;
	--deckle: polygon(0.0% 0.5%, 4.5% 0.2%, 9.1% 1.0%, 13.6% 0.1%, 18.2% 0.9%, 22.7% 0.6%, 27.3% 0.1%, 31.8% 0.8%, 36.4% 0.1%, 40.9% 0.7%, 45.5% 0.1%, 50.0% 0.1%, 54.5% 0.7%, 59.1% 1.3%, 63.6% 0.2%, 68.2% 0.4%, 72.7% 1.0%, 77.3% 1.5%, 81.8% 0.9%, 86.4% 0.6%, 90.9% 1.6%, 95.5% 0.1%, 100.0% 1.4%, 99.7% 4.5%, 99.8% 9.1%, 99.9% 13.6%, 99.6% 18.2%, 99.0% 22.7%, 99.8% 27.3%, 99.3% 31.8%, 99.2% 36.4%, 99.6% 40.9%, 99.3% 45.5%, 99.9% 50.0%, 99.9% 54.5%, 99.8% 59.1%, 99.2% 63.6%, 99.5% 68.2%, 99.6% 72.7%, 99.3% 77.3%, 99.5% 81.8%, 99.6% 86.4%, 99.0% 90.9%, 99.2% 95.5%, 99.7% 100.0%, 95.5% 99.1%, 90.9% 99.2%, 86.4% 98.6%, 81.8% 98.8%, 77.3% 99.5%, 72.7% 98.4%, 68.2% 99.8%, 63.6% 99.3%, 59.1% 98.8%, 54.5% 99.8%, 50.0% 99.2%, 45.5% 99.9%, 40.9% 98.9%, 36.4% 98.8%, 31.8% 99.1%, 27.3% 98.6%, 22.7% 99.5%, 18.2% 98.9%, 13.6% 99.0%, 9.1% 99.1%, 4.5% 99.3%, 0.0% 98.7%, 1.1% 95.5%, 0.6% 90.9%, 0.8% 86.4%, 0.1% 81.8%, 0.8% 77.3%, 0.8% 72.7%, 1.2% 68.2%, 1.0% 63.6%, 0.3% 59.1%, 0.5% 54.5%, 0.8% 50.0%, 0.0% 45.5%, 0.6% 40.9%, 0.2% 36.4%, 0.1% 31.8%, 0.1% 27.3%, 0.9% 22.7%, 0.2% 18.2%, 0.3% 13.6%, 0.5% 9.1%, 1.0% 4.5%);
}

/* 画用紙の紙肌（サイト全体の背景） */
body { background: #FAF5EA var(--paper-tex); }
.mk-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 落書き */
.doodle { position: absolute; z-index: 0; width: 56px; height: 56px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.doodle.is-fill { fill: currentColor; fill-opacity: .9; }
.doodle--squiggle { height: 22px; width: 90px; }
.doodle--cloud { height: 40px; width: 70px; }
.doodle--loop { height: 48px; width: 60px; }
.doodle--dots { height: 14px; width: 42px; fill: currentColor; stroke: none; }
.c-red { color: var(--cr-red); } .c-blue { color: var(--cr-blue); } .c-yellow { color: var(--cr-yellow); }
.c-green { color: var(--cr-green); } .c-orange { color: var(--cr-orange); } .c-white { color: #fff; } .c-ink { color: var(--ink); }

/* クレヨンの波線（区切り） */
.crayon-rule { position: relative; height: 18px; margin: 40px var(--gut) 0; }
.crayon-rule .doodle { position: static; width: 100%; height: 18px; stroke-width: 4; }

/* 見出しの手書き文字の下にクレヨンの塗り */
.kicker span { position: relative; z-index: 0; padding: 0 6px; }
.kicker span::before { content: ""; position: absolute; z-index: -1; left: -2px; right: -6px; bottom: 0; height: 62%; background: var(--crayon-scribble) center / 100% 100% no-repeat; opacity: .85; }

/* 画用紙のシート（ちぎった縁＋色画用紙） */
.sheet { position: relative; padding: 22px 18px 20px; background: var(--sheet, #FFF3C4) var(--paper-tex); clip-path: var(--deckle); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .1)); }
.sheet-wrap { position: relative; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .1)); }
.sheet-wrap > .sheet { filter: none; }
.sheet--yellow { --sheet: #FFF1BF; } .sheet--blue { --sheet: #DCEEF8; } .sheet--pink { --sheet: #FCE1E7; } .sheet--green { --sheet: #E2F2DA; }

/* 面談案内ダイアログ */
.mock-dialog { position: fixed; inset: 0; margin: auto; width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 28px 24px; border: 2px solid var(--ink); border-radius: 18px; background: var(--milk); color: var(--ink); box-shadow: 6px 6px 0 rgba(0,0,0,.15); }
.mock-dialog::backdrop { background: rgba(0,0,0,.5); }
.mock-dialog h2 { font-family: var(--f-head); font-size: 22px; line-height: 1.5; margin-bottom: 16px; }
.mock-dialog p { font-size: 16px; line-height: 1.85; }
.mock-dialog form { margin-top: 24px; }
.mock-dialog .btn { width: 100%; }