*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:#222;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;font-size:16px;line-height:1.7}
a{color:#0b6e4f}
img{max-width:100%;height:auto}
h1{font-size:24px;line-height:1.4;margin:0 0 16px}

/* ヘッダー・フッター */
.site-head{border-bottom:1px solid #eee;position:sticky;top:0;background:rgba(255,255,255,.96);z-index:20}
.head-in{max-width:960px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{font-weight:800;font-size:18px;color:#222;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-head nav{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav-link{color:#444;text-decoration:none;font-size:14px}
.wrap{max-width:652px;margin:0 auto;padding:28px 16px 64px}
.wrap.wide{max-width:960px}
.site-foot{border-top:1px solid #eee;padding:24px 16px;text-align:center;font-size:13px;color:#888;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.site-foot a{color:#666;text-decoration:none}

/* ボタン */
.btn{display:inline-block;border:1px solid #ccc;background:#fff;color:#222;border-radius:999px;padding:9px 20px;font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;line-height:1.4;font-family:inherit;text-align:center}
.btn:hover{background:#f5f5f5}
.btn-primary{background:#222;border-color:#222;color:#fff}
.btn-primary:hover{background:#000}
.btn-danger{color:#c62828;border-color:#e6b4b4}
.btn-sm{padding:6px 14px;font-size:13px}
.btn-block{display:block;width:100%;margin-top:12px}

/* お知らせ */
.flash{background:#e8f5ee;border:1px solid #b9dfc9;color:#14532d;padding:10px 14px;border-radius:8px;margin-bottom:20px;font-size:14px}
.error{background:#fdecec;border:1px solid #f3bcbc;color:#8a1c1c;padding:10px 14px;border-radius:8px;margin-bottom:12px;font-size:14px}
.notice{background:#fff8e1;border:1px solid #f0d98a;color:#6b5200;padding:10px 14px;border-radius:8px;margin-bottom:20px;font-size:14px}
.empty{color:#888;padding:32px 0;text-align:center}
.center-box{text-align:center;padding:48px 0}

/* トップ */
.hero{text-align:center;padding:32px 0 40px;border-bottom:1px solid #eee;margin-bottom:32px}
.hero h1{font-size:28px;margin-bottom:8px}
.hero p{color:#666;margin:0 0 20px}
.sec-title{font-size:18px;margin:32px 0 12px}

/* 記事カード */
.cards{display:flex;flex-direction:column}
.card{padding:18px 0;border-bottom:1px solid #eee}
.card-main{display:flex;gap:14px;text-decoration:none;color:inherit;align-items:flex-start}
.card-thumb{flex:0 0 112px;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#f3f3f3;order:2}
.card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.card-title{font-weight:800;font-size:17px;line-height:1.5}
.card-ex{color:#777;font-size:13px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:12px;color:#888}
.card-meta a{color:#555;text-decoration:none;display:flex;align-items:center;gap:6px}
.pager{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:32px;font-size:14px;color:#888}

/* アバター・プロフィール */
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:800;flex-shrink:0;line-height:1}
.profile{display:flex;gap:16px;align-items:flex-start;padding-bottom:24px;border-bottom:1px solid #eee}
.profile h1{margin:0;font-size:22px}
.profile p{margin:6px 0;font-size:14px}
.uid{color:#888;font-size:13px}
.link-state{color:#888}
.link-state.on{color:#0b6e4f;font-weight:700}

/* 記事ページ */
.post-title{font-size:28px;line-height:1.5;font-weight:800;margin:8px 0 20px;letter-spacing:.02em;word-break:break-word}
.post-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:28px}
.author{display:flex;align-items:center;gap:10px;text-decoration:none;color:#222}
.author span span,.author>span{display:flex;flex-direction:column;line-height:1.4}
.author small{color:#888;font-size:12px}
.pr-label{font-size:12px;color:#666;background:#f5f5f5;border-radius:6px;padding:6px 10px;margin:0 0 24px}
.post-body{font-size:17px;line-height:2;letter-spacing:.03em;word-break:break-word;overflow-wrap:anywhere}
.post-body p{margin:0 0 1.6em}
.post-body h2{font-size:24px;line-height:1.5;margin:2.2em 0 .8em;font-weight:800}
.post-body h3{font-size:19px;line-height:1.5;margin:1.8em 0 .6em;font-weight:800}
.post-body ul,.post-body ol{margin:0 0 1.6em;padding-left:1.5em}
.post-body blockquote{margin:0 0 1.6em;padding:12px 18px;background:#f7f7f7;border-left:3px solid #ccc;color:#555}
.post-body figure{margin:0 0 1.6em;text-align:center}
.post-body figcaption{font-size:13px;color:#888}
.post-body img{border-radius:6px;vertical-align:middle}
.post-body a{color:#0b6e4f;text-decoration:underline}
.post-body .red{color:#e60033}
.post-body .nored{color:#222}
.post-body .marker{background:#fff176}
.post-body .nomarker{background:#fff}
.post-body .video{position:relative;aspect-ratio:16/9;margin:0 0 1.6em;background:#000;border-radius:8px;overflow:hidden}
.post-body .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.author-card{display:flex;gap:16px;align-items:flex-start;border:1px solid #eee;border-radius:12px;padding:18px;margin-top:48px}
.author-card p{margin:6px 0 0;font-size:14px;color:#555}
.author-name{font-weight:800;color:#222;text-decoration:none}

/* フォーム */
.form-box{max-width:420px;margin:0 auto}
.form-box.wide-box{max-width:560px}
.form-box h2{font-size:18px;margin:40px 0 8px;padding-top:24px;border-top:1px solid #eee}
.form-box label{display:block;font-size:14px;font-weight:700;margin-top:16px}
.form-box label small{display:block;font-weight:400;color:#888;font-size:12px}
input[type=text],input[type=email],input[type=password],input[type=url],textarea{width:100%;border:1px solid #ccc;border-radius:8px;padding:11px 12px;font-size:16px;font-family:inherit;margin-top:6px;background:#fff;color:#222}
input:focus,textarea:focus{outline:2px solid #222;outline-offset:-1px}
label.check{display:flex;gap:8px;align-items:flex-start;font-weight:400;font-size:14px;margin-top:16px}
label.check input{margin-top:5px;flex-shrink:0}
.form-sub{text-align:center;font-size:14px;margin-top:24px;color:#666}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.import-prev{border:1px solid #eee;border-radius:10px;padding:14px 16px;margin:16px 0;background:#fafafa}
.import-prev p{margin:6px 0 0;font-size:13px;color:#666}

/* マイページ */
.dash-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px}
.dash-head .sec-title{margin:0}
.mylist{list-style:none;margin:12px 0 0;padding:0}
.mylist li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid #eee;flex-wrap:wrap}
.my-main{flex:1 1 260px;min-width:0}
.my-title{display:block;font-weight:700;color:#222;text-decoration:none;margin:4px 0 2px;word-break:break-word}
.my-main small{color:#888;font-size:12px}
.my-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.my-acts form{margin:0}
.st{display:inline-block;font-size:11px;font-weight:700;border-radius:4px;padding:1px 7px;background:#eee;color:#555}
.st-public{background:#e3f4ea;color:#14532d}
.st-hidden{background:#fdecec;color:#8a1c1c}
.st-ai{background:#e8eefc;color:#1e3a8a}
.logout{margin-top:40px;text-align:right}

/* エディタ */
.ed-title{border:0;font-size:26px;font-weight:800;line-height:1.5;padding:0;margin:0 0 12px;resize:none;overflow:hidden;border-radius:0}
.ed-title:focus{outline:0}
.toolbar{position:sticky;top:53px;z-index:10;background:#fff;border:1px solid #ddd;border-radius:10px;padding:6px;display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-bottom:16px}
.toolbar button{flex-shrink:0;border:0;background:transparent;border-radius:6px;padding:7px 10px;font-size:14px;font-family:inherit;color:#222;cursor:pointer;min-width:36px;line-height:1.3}
.toolbar button:hover,.toolbar button.on{background:#eee}
.toolbar .sep{flex:0 0 1px;height:20px;background:#ddd;margin:0 2px}
.t-red{color:#e60033;font-weight:800}
.t-mark{background:#fff176;padding:0 4px;font-weight:800}
.ed-body{min-height:50vh;outline:0;padding-bottom:40px}
.ed-body:empty::before{content:attr(data-placeholder);color:#bbb}
.ed-body .video{pointer-events:none}
.ed-actions{position:sticky;bottom:0;background:rgba(255,255,255,.96);border-top:1px solid #eee;padding:12px 0;margin-top:20px;display:flex;gap:10px;justify-content:flex-end;align-items:center}
.ed-count{margin-right:auto;font-size:12px;color:#888}

/* 入力ダイアログ */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:#fff;border-radius:12px;padding:20px;width:100%;max-width:440px;max-height:90vh;overflow:auto}
.modal h3{margin:0 0 4px;font-size:17px}
.modal p{margin:4px 0 0;font-size:13px;color:#666}
.modal .row{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.modal .or{text-align:center;color:#999;font-size:12px;margin:12px 0 0}
.modal .merr{color:#c62828;font-size:13px;margin-top:8px}

@media (max-width:520px){
  .post-title{font-size:24px}
  .post-body{font-size:16px}
  .post-body h2{font-size:21px}
  .ed-title{font-size:22px}
  .card-thumb{flex-basis:88px}
  .hero h1{font-size:23px}
}

/* v1.2 追加分 */
.inline-form{display:inline-block;margin:8px 0 0}
.form-note{font-size:13px;color:#666;margin:4px 0 0}
.report-link{text-align:right;font-size:12px;margin:16px 0 0}
.report-link a{color:#999}
.radio-list label{display:flex;gap:8px;align-items:flex-start;font-weight:400;margin-top:10px}
.radio-list input{margin-top:6px;flex-shrink:0}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0 20px;border-bottom:1px solid #eee;padding-bottom:12px}
.tabs a{padding:7px 14px;border-radius:999px;font-size:14px;font-weight:700;text-decoration:none;color:#444;background:#f3f3f3}
.tabs a.on{background:#222;color:#fff}
.tabs .badge{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;border-radius:9px;background:#e60033;color:#fff;font-size:11px;text-align:center}
.search{display:flex;gap:8px;margin-bottom:8px}
.search input{margin-top:0;flex:1}
.msg-body{white-space:pre-wrap;font-size:14px;background:#fafafa;border:1px solid #eee;border-radius:8px;padding:10px 12px;margin:6px 0}
.st-open{background:#fff3cd;color:#6b5200}
.st-done{background:#eee;color:#777}
.hero-copy{font-size:17px;font-weight:700;color:#444;line-height:1.8}

/* v1.6：付箋風の見出し（記事とエディタ。利用規約など .plain は対象外） */
.post-body:not(.plain) h2{position:relative;background:#fff3a8;border-left:10px solid #f2bd0b;padding:12px 22px 12px 14px;border-radius:2px 4px 0 2px;box-shadow:2px 3px 0 rgba(0,0,0,.08);font-size:22px}
.post-body:not(.plain) h2::after{content:"";position:absolute;right:0;bottom:0;width:0;height:0;border-left:16px solid #e0c95f;border-bottom:16px solid #fff}
.post-body:not(.plain) h3{width:fit-content;max-width:100%;background:#e3f2ff;border-left:8px solid #4a9be0;padding:7px 16px 7px 12px;border-radius:2px 4px 4px 2px;box-shadow:1px 2px 0 rgba(0,0,0,.06);font-size:18px}
/* 引用 */
.post-body blockquote{position:relative;margin:0 0 1.6em;padding:14px 18px 14px 44px;background:#f6f6f6;border-left:4px solid #bbb;border-radius:0 6px 6px 0;color:#555;font-size:.95em}
.post-body blockquote::before{content:"\201C";position:absolute;left:12px;top:2px;font-size:38px;line-height:1;color:#bbb;font-family:Georgia,serif}
.post-body blockquote p{margin:0 0 .6em}
.post-body blockquote p:last-child{margin-bottom:0}
/* 表 */
.post-body .table-wrap{overflow-x:auto;margin:0 0 1.6em;-webkit-overflow-scrolling:touch}
.post-body table{border-collapse:collapse;width:100%;font-size:.92em;line-height:1.6;letter-spacing:0}
.post-body th,.post-body td{border:1px solid #d5d5d5;padding:8px 12px;text-align:left;vertical-align:top;min-width:70px}
.post-body th{background:#f3f3f3;font-weight:800}
.post-body td p,.post-body th p{margin:0}
.ed-body table{margin:0 0 1.6em}
.tblbar{top:106px;background:#f7fbff;border-color:#bcd9f5}
.tblbar[hidden]{display:none}
.tbl-label{font-size:12px;color:#567;padding:0 4px}
/* サムネイル */
.eyecatch{display:block;width:100%;border-radius:10px;margin:0 0 20px}
.thumb-box{margin:0 0 18px}
.thumb-box img{display:none;width:100%;border-radius:10px}
.thumb-add{display:block;width:100%;border:2px dashed #ccc;background:#fafafa;border-radius:10px;padding:22px 12px;font-size:15px;font-weight:700;color:#555;cursor:pointer;font-family:inherit}
.thumb-add small{display:block;font-weight:400;font-size:12px;color:#999;margin-top:4px}
.thumb-add:hover{background:#f2f2f2}
.thumb-acts{display:none;gap:8px;margin-top:8px}
.thumb-box.has img{display:block}
.thumb-box.has .thumb-add{display:none}
.thumb-box.has .thumb-acts{display:flex}
.thumb-msg{font-size:13px;color:#c62828;margin:6px 0 0}
.thumb-msg:empty{display:none}
@media (max-width:520px){.post-body:not(.plain) h2{font-size:20px}.post-body:not(.plain) h3{font-size:17px}}
/* 空行（何も書いていない段落）は1行ぶんの高さにする */
.post-body p:has(> br:only-child){margin:0;line-height:1.7}
/* 装飾ボタンと表の編集ボタンを、ひとまとまりで画面上部に固定する（重なり防止） */
.toolbars{position:sticky;top:53px;z-index:10;margin-bottom:16px}
.toolbars .toolbar{position:static;margin-bottom:0}
.toolbars .tblbar{margin-top:6px}

/* v1.7：プロフィール（ヘッダー画像・アイコン・SNS・リンク） */
img.avatar{display:inline-block;object-fit:cover;background:#eee}
.prof{margin:-28px -16px 0;padding-bottom:24px;border-bottom:1px solid #eee}
.prof-cover{display:block;width:100%;aspect-ratio:4/1;object-fit:cover;background:#eee}
.prof-main{display:flex;gap:16px;align-items:flex-start;padding:20px 16px 0}
.prof-main.has-cover .avatar{margin-top:-52px;border:4px solid #fff;box-sizing:content-box}
.prof-text{flex:1;min-width:0}
.prof-text h1{margin:0;font-size:22px;word-break:break-word}
.prof-text p{margin:6px 0;font-size:14px}
.prof-bio{line-height:1.8}
.prof-sns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pill{display:inline-block;border:1px solid #ddd;border-radius:999px;padding:5px 14px;font-size:13px;font-weight:700;color:#222;text-decoration:none;background:#fff}
.pill:hover{background:#f5f5f5}
.prof-links{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.prof-link{display:flex;flex-direction:column;border:1px solid #e5e5e5;border-radius:10px;padding:10px 14px;text-decoration:none;color:#222;background:#fafafa}
.prof-link:hover{background:#f2f2f2}
.prof-link b{font-size:14px;word-break:break-word}
.prof-link small{font-size:12px;color:#0b6e4f;margin-top:2px}
.prof-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px !important}
@media (max-width:520px){.prof-cover{aspect-ratio:3/1}.prof-main.has-cover .avatar{margin-top:-44px}}
/* 設定画面の画像えらび */
.img-pick{margin-top:8px}
.img-pick .pv{display:block;background:#f3f3f3 center/cover no-repeat;border:1px dashed #ccc}
.img-pick.header .pv{width:100%;aspect-ratio:4/1;border-radius:10px}
.img-pick.avatar .pv{width:96px;height:96px;border-radius:50%}
.img-pick .acts{display:flex;gap:8px;margin-top:8px;align-items:center;flex-wrap:wrap}
.img-pick .msg{font-size:13px;color:#666}
.form-box select{width:100%;border:1px solid #ccc;border-radius:8px;padding:11px 12px;font-size:16px;font-family:inherit;margin-top:6px;background:#fff;color:#222}
.form-box fieldset{border:1px solid #eee;border-radius:10px;padding:4px 14px 14px;margin:20px 0 0}
.form-box legend{font-size:14px;font-weight:800;padding:0 6px}
.id-in{display:flex;align-items:center;gap:6px}
.id-in span{font-weight:700;color:#888;margin-top:6px}
.flash + .prof,.notice + .prof,.error + .prof{margin-top:0}
@media (max-width:520px){.prof-main{flex-direction:column;gap:6px}.prof-main.has-cover .avatar{margin-top:-64px}}
/* v1.8：画像の表示比率を推奨サイズに合わせる（サムネイル 1280×670／ヘッダーは中央の 1280×454） */
.card-thumb{aspect-ratio:1280/670}
.prof-cover{aspect-ratio:1280/454}
.img-pick.header .pv{aspect-ratio:1280/454}
@media (max-width:520px){.prof-cover{aspect-ratio:1280/454}}

/* v1.9：目次（記事ページで自動表示） */
html{scroll-behavior:smooth}
.post-body h2[id],.post-body h3[id]{scroll-margin-top:72px}
.post-body .toc{margin:0 0 2em;border:1px solid #e3e3e3;border-radius:10px;background:#fafafa;padding:4px 18px;font-size:15px;line-height:1.7;letter-spacing:0}
.post-body .toc summary{cursor:pointer;font-weight:800;padding:10px 0;list-style-position:inside}
.post-body .toc ul{list-style:none;margin:0 0 12px;padding:0}
.post-body .toc li{margin:0;padding:5px 0;border-top:1px dashed #e3e3e3}
.post-body .toc li.lv3{padding-left:1.4em;font-size:14px}
.post-body .toc li.lv3::before{content:"└ ";color:#bbb}
.post-body .toc a{color:#222;text-decoration:none}
.post-body .toc a:hover{text-decoration:underline;color:#0b6e4f}