/*basic style*/
.pagebox div{margin-bottom:15px; margin-top:15px;}
.pagebox img{ max-width:100%;}
.pagebox div p{line-height:1.6em;}
.mb{margin-bottom:30px; }
.mt{margin-top:10px;}
.font01{ font-size:12px;}
.font02{ font-size:14px;}
.font03{ font-size:16px;}
.font04{ font-size:18px;}
.font05{ font-size:20px;}
.textline01{ border-bottom: solid 1px #494949;}

/*h2,h3,h4,h5*/
/* 20220704 i.sato ブログh2,h3タグ装飾、投稿日付、筆者表示対応 */
.pagebox h2 {
    margin-bottom: 2rem;
    padding: 0.5rem;
    box-shadow: 10px 10px 0 #b5e4c7;
    border: 2px solid #b5e4c7;
    color: #a9c623;
    font-weight: bold;
}
.pagebox h3 {
    padding: 0.5rem 1rem;
    margin-left: 2px;
    border-left: 5px solid #b5e4c7;
    color: #a9c623;
}
/* 20220704 i.sato ブログh2,h3タグ装飾、投稿日付、筆者表示対応 */

/*in link*/
.bgcolor01{ background-color:#EDFAFA; padding:5px; margin-left:10px; margin-right:10px;}
.bgcolor01 a{ border-bottom:1px solid #3993ED;}


/*title**/
.title01{border-left:solid 6px #F185A1; background:#FFF5FE; padding:8px; color:#494949;}
.title02{font-weight:bold; font-size:20px; color:#494949; border-bottom:#DFA6FC dotted 2px; border-top:#DFA6FC dotted 2px; padding:8px; background:#F8EBFF; text-align:center;}
.title03{font-weight:bold;}
.title04{ background:#F0FAFF; border-bottom:#D4FEFF solid 1px; border-left:#D4FEFF solid 6px; padding:8px; color:#494949; font-size:20px; font-weight:bold;}
.title05{font-weight:bold; font-size:16px; color:#A6007F;  padding:4px; border-left:solid 6px #DFA6FC; border-bottom:solid 2px #DFA6FC;}
.title06{border-bottom:#EE7785 solid 1px; border-left:#EE7785 solid 6px; padding:8px; color:#494949; font-size:20px; font-weight:bold;}
.title07{border-left:#67D5B5 solid 5px; padding:5px; color:#494949; font-size:16px; font-weight:bold;}
.title08{border:#FFF dashed 2px; padding:8px; color:#53806E; font-size:20px; font-weight:bold; background:#CCF0E2; box-shadow:0px 0px 0px 8px #CCF0E2; text-align:center; margin-top:30px;}
.title09{ border-bottom:dashed 2px #53806E; font-weight:bold; font-size:16px;}
.title10{ font-weight:bold; font-size:16px;}
.title11{ border-top:#a79c8e solid 2px; border-bottom:#a79c8e solid 2px; padding:10px; text-align:center; margin-top:30px; color:#494949; margin-bottom:30px;}
.title12{font-weight:bold; font-size:17px;}
.title13{ border-left:#ffe0a3 solid 7px; background:#fff6be; padding:10px; margin-top:30px; color:#494949; margin-bottom:30px;}
.title14{ border-left:#ffa1ac solid 5px; border-bottom:#ffa1ac dashed 2px; padding:5px; margin-top:10px; color:#494949; margin-bottom:10px;}
.title15{ border-left:#9667B8 solid 7px; border-bottom:#6153AA dashed 2px; padding:10px; margin-top:30px; color:#494949; margin-bottom:30px;}
.title16{ border-left:#09F solid 5px; background:#E8FCFF; padding:10px; margin-top:30px; color:#494949; margin-bottom:30px;}
.title17{ border-bottom:#B9D4D9 dashed 2px; border-top:#B9D4D9 dashed 2px; padding:8px; margin-top:10px; color:#494949; margin-bottom:10px;}

/*textcolor**/
.textcolor01{color:#F185A1; font-weight:bold;}
.textcolor02{color:#6793EB; font-weight:bold; }
.textcolor03{font-weight:bold; background:#FFD1E6}
.textcolor04{color:#F268A4; font-size:small; margin-right:5px;}
.textcolor05{color:#494949; font-weight:bold;}
.textcolor06{color:#F185A1; font-weight:bold; font-size:16px;}
.textcolor07{color:#169DE0; font-weight:bold;font-size:16px; }
.textcolor08{background:#FFEBFA; font-size:16px;}
.textcolor09{color:#F185A1; font-weight:bold; font-size:16px;}
.textcolor10{color:#84B1ED; font-weight:bold;font-size:16px; }
.textcolor11{background:#FFEBFA; font-size:16px;}
.textcolor12{font-size:16px; font-weight:bold;}
.textcolor13{font-size:small; margin-right:5px; color:#C5C6B6;}
.textcolor14{font-size:small; color:#f1bbba; margin-right:5px;}
.textcolor15{font-size:17px; font-weight:bold;}
.textcolor16{font-size:small; color:#f1bbba; margin-right:5px;}
.textcolor17{font-size:17px; font-weight:bold;}
.textcolor18{background:#EDF7FA; font-size:16px;}

/*textbox**/
.textbox01{color:#494949; background:#FFE5F0; padding:10px; }
.textbox02{border:dotted #F268A4 2px; padding:10px;}
.textbox03{background:#E9E9E9; padding:10px;}
.textbox02 ul{ list-style:none;}
.textbox03 ul{ list-style:none;}
.textbox02 ul li{ line-height:1.6em; font-size:18px;}
.textbox03 ul li{ line-height:1.6em;}
.textbox04{ background-color:#FFC; padding:10px;}
.textbox05{background:#E9E9E9; padding:10px;}
.textbox05 ul li{ list-style:none;}
.textbox06{ border:solid #F99 1px; color:#494949; padding:10px; text-align:center;}
.textbox07{ background:#FFFFE8; color:#494949; padding:20px; line-height:1.6em;}
.textbox08{ border-top:#F9C 1px solid; border-bottom:#F9C 1px solid; padding:10px;}
.textbox09{ background:#F0E5DE; padding:10px; color:#494949; font-weight:bold;}
.textbox10{background:#FFFFF2; padding:10px;}
.textbox11{ border: dotted #67D5B5 1px; padding:10px; color:#494949; font-size:14px;}
.textbox12{  background:#F5F5F5; padding:10px; color:#494949; font-size:14px;}
.textbox13{ background:#e1eef6; padding:10px; color:#494949; font-size:14px;}
.textbox14{background:#FFEEE4; padding:10px; color:#1c140d; line-height:1.6em;}
.textbox15{border:dashed 2px #cbe86b; padding:10px; color:#1c140d; line-height:1.6em; font-size:14px;}
.textbox16{ background:#f8ecc9; padding:10px; color:#1c140d; line-height:1.6em; font-weight:bold;}
.textbox17{ border:solid #eb9f9f 2px; color:#1c140d; line-height:1.6em; padding:10px}
.textbox17 ul li{list-style:none;}
.textbox18{ background:#fffcf0; color:#1c140d; line-height:1.6em; padding:10px; margin-bottom:30px;}
.textbox18 ul li{list-style:none;}
.textbox19{ background:#E9E9E9; padding:10px; color:#1c140d; line-height:1.6em;text-align:center;}
.textbox20{ border:solid #ffa1ac 2px; color:#1c140d; line-height:1.6em; padding:10px}
.textbox20 ul li{list-style:none;}
.textbox21{ background:#fffcf0; color:#1c140d; line-height:1.6em; padding:10px; margin-bottom:30px;}
.textbox21 ul li{list-style:none;}
.textbox22{ background:#F2FFFF; padding:10px; color:#1c140d; line-height:1.6em;text-align:center; font-weight:bold; margin-top:30px;}
.textbox23{ background:#F2FFFF; padding:10px; color:#1c140d; line-height:1.6em; margin-top:30px;}

/* ===== 20260812 claude: mint-osakaから記事部品を移植(表/可読性/目次/チップ/吹き出し/FAQ/talk-box) ===== */
/* 20260728 claude: wp:table(Gutenbergの表)の装飾 */
.pagebox .wp-block-table{overflow-x:auto; margin:20px 0;}
.pagebox .wp-block-table table{width:100%; border-collapse:collapse; background:#fff; font-size:15px;}
.pagebox .wp-block-table th,
.pagebox .wp-block-table td{border:1px solid #b5e4c7; padding:10px 12px; text-align:left; vertical-align:top; line-height:1.6;}
.pagebox .wp-block-table thead th{background:#b5e4c7; color:#494949; font-weight:bold;}
.pagebox .wp-block-table tbody tr:nth-child(even) td{background:#f2faf5;}
.pagebox .wp-block-table figcaption{font-size:12px; color:#888; margin-top:6px; text-align:right;}

/* ===== 20260728 claude: 記事本文の可読性向上(リスト/番号/ボタン/余白) ===== */
/* 段落の行間 */
.pagebox div p { line-height: 1.9; }
/* 見出しの前後に呼吸を */
.pagebox h2 { margin-top: 3rem; }
.pagebox h3 { margin-top: 2.2rem; margin-bottom: 1rem; }

/* 箇条書き(ul)=薄緑カード+✔ */
.pagebox ul { margin: 20px 0; padding: 18px 20px; background: #f6fbf8; border: 1px solid #e2f2e9; border-radius: 10px; }
.pagebox ul li { position: relative; padding-left: 26px; margin: 0 0 14px; line-height: 1.8; }
.pagebox ul li:last-child { margin-bottom: 0; }
.pagebox ul li::before { content: "\2714"; position: absolute; left: 2px; top: 0; color: #6cc493; font-weight: bold; }

/* 番号リスト(ol)=丸数字バッジ */
.pagebox ol { margin: 20px 0; padding: 18px 20px; background: #f6fbf8; border: 1px solid #e2f2e9; border-radius: 10px; counter-reset: pgnum; list-style: none; }
.pagebox ol li { position: relative; padding-left: 38px; margin: 0 0 18px; line-height: 1.8; counter-increment: pgnum; }
.pagebox ol li:last-child { margin-bottom: 0; }
.pagebox ol li::before { content: counter(pgnum); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; background: #b5e4c7; color: #40694f; font-weight: bold; text-align: center; line-height: 26px; font-size: 14px; }

/* 「ラベル：説明」型のliはラベルを1行に */
.pagebox li > strong:first-child { display: block; margin-bottom: 3px; color: #55a377; font-size: 1.05em; }

/* 結論バッジ */
.pagebox p.matome-label { margin-bottom: 6px; }
.pagebox p.matome-label strong { display: inline-block; background: #a9c623; color: #fff; padding: 6px 18px; border-radius: 999px; letter-spacing: .05em; }
.pagebox p.matome-label + ul { margin-top: 8px; }

/* CTAボタン */
.pagebox p.cta-wrap { text-align: center; margin: 26px 0; }
.pagebox p.cta-wrap a.cta-btn { display: inline-block; box-sizing: border-box; min-width: 320px; max-width: 100%; padding: 16px 28px; border-radius: 999px; font-weight: bold; font-size: 16px; text-decoration: none; color: #fff !important; box-shadow: 0 3px 10px rgba(0,0,0,.15); transition: opacity .2s; }
.pagebox p.cta-wrap a.cta-btn:hover { opacity: .85; }
.pagebox a.cta-apply { background: #f0679a; }
.pagebox a.cta-line { background: #06C755; }
@media (max-width: 480px) { .pagebox p.cta-wrap a.cta-btn { min-width: 100%; } }

/* 注記の小文字 */
.pagebox p.note-small { font-size: 13px; color: #777; line-height: 1.7; }

/* ===== 20260728 claude: 見やすさ第2弾(目次/チップ/マーカー/吹き出し/FAQバッジ) ===== */
/* 目次 */
.pagebox .toc-box { background: #fff; border: 2px solid #b5e4c7; border-radius: 12px; padding: 18px 22px 16px; margin: 26px 0; }
.pagebox .toc-box p.toc-title { font-weight: bold; color: #55a377; font-size: 16px; margin: 0 0 4px; }
.pagebox .toc-box ol { background: none; border: none; padding: 6px 0 0; margin: 0; }
.pagebox .toc-box ol li { margin: 0 0 9px; padding-left: 36px; line-height: 1.5; }
.pagebox .toc-box ol li:last-child { margin-bottom: 0; }
.pagebox .toc-box a { color: #494949; text-decoration: none; border-bottom: 1px dashed #b5e4c7; }
.pagebox .toc-box a:hover { color: #55a377; border-bottom-style: solid; }

/* 属性別のスペックチップ */
.pagebox p.spec-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.pagebox p.spec-chips span { display: inline-block; background: #fff; border: 1px solid #b5e4c7; color: #494949; border-radius: 999px; padding: 6px 14px; font-size: 13.5px; line-height: 1.4; }

/* 黄色マーカー */
.pagebox .hl { background: linear-gradient(transparent 55%, #fff3a6 55%); font-weight: bold; }

/* スタッフ吹き出し */
.pagebox div.staff-voice { display: flex; align-items: flex-start; gap: 12px; margin: 24px 0; }
.pagebox div.staff-voice .sv-icon { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: #b5e4c7; text-align: center; line-height: 48px; font-size: 24px; margin: 0; }
.pagebox div.staff-voice .sv-body { position: relative; flex: 1; background: #fffbe8; border: 1px solid #f3e6ac; border-radius: 12px; padding: 12px 16px; margin: 0; }
.pagebox div.staff-voice .sv-body::before { content: ""; position: absolute; left: -9px; top: 16px; border-style: solid; border-width: 7px 9px 7px 0; border-color: transparent #f3e6ac transparent transparent; }
.pagebox div.staff-voice .sv-body::after { content: ""; position: absolute; left: -7px; top: 17px; border-style: solid; border-width: 6px 8px 6px 0; border-color: transparent #fffbe8 transparent transparent; }
.pagebox div.staff-voice p.sv-name { font-size: 12px; color: #b09a3e; margin: 0 0 4px; font-weight: bold; }
.pagebox div.staff-voice .sv-body p { margin: 0; line-height: 1.8; }

/* FAQのQバッジ */
.pagebox h3.faq-q { border-left: none; padding: 0.4rem 0 0.4rem 42px; position: relative; }
.pagebox h3.faq-q::before { content: "Q"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: #a9c623; color: #fff; font-weight: bold; text-align: center; line-height: 32px; font-size: 17px; }

/* 20260728 claude: Twemoji(wp-smiley)の巨大化防止 */
.pagebox img.wp-smiley, .pagebox img.emoji { width: 1.15em !important; height: 1.15em !important; max-width: 1.15em !important; display: inline-block; vertical-align: -0.15em; margin: 0 2px !important; border: none; box-shadow: none; }
.pagebox .staff-voice .sv-icon img.wp-smiley, .pagebox .staff-voice .sv-icon img.emoji { width: 26px !important; height: 26px !important; max-width: 26px !important; vertical-align: middle; }

/* 20260728 claude: chips label + sv-icon svg */
.pagebox p.spec-chips span b { color: #55a377; margin-right: 6px; }
.pagebox .staff-voice .sv-icon svg { vertical-align: middle; }
/* ---- 会話ボックス(2話者・LINE風) 2026-07-31 追加 ----
   使い方(記事HTML):
   <div class='talk-box'><p class='tk-title'>面接でよくあるやり取り</p>
     <div class='tk tk-r'><div class='tk-b'><span class='tk-n'>応募前のわたし</span>セリフ</div></div>
     <div class='tk tk-l'><div class='tk-b'><span class='tk-n'>スタッフ</span>セリフ</div></div>
   </div>
   右(tk-r)=読者・応募者側(ピンク) / 左(tk-l)=スタッフ側(ミント) */
.pagebox .talk-box{margin:1.6em 0;padding:14px 12px 6px;background:#f7fbf8;border:1px solid #cdeadb;border-radius:14px}
.pagebox .talk-box p.tk-title{margin:0 0 12px;padding:0 0 8px;border-bottom:1px dashed #b5e4c7;font-size:.92em;font-weight:bold;color:#5f9e74;text-align:center}
.pagebox .talk-box .tk{display:flex;margin:0 0 10px}
.pagebox .talk-box .tk .tk-b{max-width:82%;padding:9px 13px;border-radius:14px;line-height:1.8;font-size:.95em;color:#494949;text-align:left}
.pagebox .talk-box .tk-l .tk-b{background:#e3f4e9;border-bottom-left-radius:4px}
.pagebox .talk-box .tk-r{justify-content:flex-end}
.pagebox .talk-box .tk-r .tk-b{background:#fdeaf2;border-bottom-right-radius:4px}
.pagebox .talk-box .tk-n{display:block;margin:0 0 2px;font-size:.78em;font-weight:bold;color:#5f9e74}
.pagebox .talk-box .tk-r .tk-n{color:#e0568c}