/* ブルペン 下層ページ共通CSS（LPのデザイントークンを継承） */
:root{
  --navy:#0f2742; --navy-2:#16395f; --gold:#c6a15b; --gold-2:#b08d49; --gold-d:#8a6d34;
  --green:#1f7a5a; --green-cta:#1b8a57; --green-cta-d:#16734a; --line:#06c755;
  --ink:#222a33; --muted:#5d6b78; --warm:#54503f; --warm-muted:#6b6350;
  --bg:#ffffff; --bg-soft:#f4f8fb; --cream:#fdf9ef; --cream-2:#f3e9d2; --cream-3:#faf6ec;
  --border:#e3e9f0; --border-warm:#e8dfc9;
  --shadow:0 12px 34px rgba(15,39,66,.10); --shadow-sm:0 4px 14px rgba(15,39,66,.08); --radius:14px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; color:var(--ink); background:var(--bg);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  line-height:1.9; font-size:16px; letter-spacing:.01em; -webkit-font-smoothing:antialiased;}
img{max-width:100%; height:auto; display:block;}
a{color:inherit;}
.wrap{max-width:840px; margin:0 auto; padding:0 20px;}
.brand-en{font-family:"Cooper Black","Cooper Std","Cooper BT","Cooper",Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:.02em;}
.brand-en .tm{font-size:.45em; vertical-align:super;}

/* ===== Header ===== */
header.site{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.97); backdrop-filter:blur(6px); border-bottom:3px solid #7db3e0;}
.hbar{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 20px; max-width:1080px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:12px; line-height:1.3; text-decoration:none;}
.brand img{width:52px; height:52px;}
.brand b{font-size:24px; letter-spacing:.04em; color:#2b6cab;}
.brand .brand-txt{display:flex; flex-direction:column;}
.brand span{font-size:12px; font-weight:600; color:#5b6d7e;}
.hcta{display:flex; align-items:center; gap:10px;}
.htel{display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; text-decoration:none;}
.htel b{font-size:19px; color:#2b6cab;}
.htel span{font-size:10px; color:#6b7c8c;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; text-decoration:none; border-radius:999px; padding:12px 22px; transition:.18s; border:0; cursor:pointer; font-size:15px;}
.btn-cta{background:linear-gradient(180deg,var(--green-cta),var(--green-cta-d)); color:#fff; box-shadow:0 8px 18px rgba(27,138,87,.32);}
.btn-cta:hover{transform:translateY(-2px);}
.btn-line{background:var(--line); color:#fff; text-shadow:0 1px 1.5px rgba(0,0,0,.3);}
.btn-lg{padding:16px 32px; font-size:16.5px;}

/* ===== ページヘッダー（クリーム帯） ===== */
.page-hero{background:linear-gradient(160deg,var(--cream) 0%,#f8f0de 60%,var(--cream-2) 100%); border-bottom:3px solid var(--gold); padding:36px 0 30px;}
.breadcrumb{font-size:12.5px; color:var(--warm-muted); margin:0 0 14px;}
.breadcrumb a{color:var(--gold-d); text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}
.page-hero h1{font-size:30px; line-height:1.4; color:var(--navy-2); margin:0 0 10px; font-weight:900;}
.page-hero .lead{font-size:15.5px; color:var(--warm); margin:0;}
.page-hero .badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.page-hero .badge{background:#fff; border:1px solid #d8c79c; color:var(--gold-d); font-size:12px; font-weight:600; border-radius:999px; padding:4px 12px;}

/* ===== 本文 ===== */
main{padding:40px 0 10px;}
main h2{font-size:22px; color:var(--navy-2); border-left:6px solid var(--gold); padding-left:12px; margin:42px 0 14px; line-height:1.5;}
main h3{font-size:17.5px; color:var(--navy-2); margin:26px 0 8px;}
main p{margin:0 0 16px;}
main ul,main ol{padding-left:1.5em; margin:0 0 16px;}
main li{margin-bottom:6px;}
.note{font-size:13px; color:var(--muted);}
.point{background:var(--cream-3); border:1px solid var(--border-warm); border-radius:12px; padding:16px 18px; margin:16px 0;}
.point b{color:var(--navy-2);}
.caution{background:#fff7e8; border:1px solid #f0dca8; border-radius:12px; padding:14px 18px; margin:16px 0; font-size:14px; color:#6b5420;}
.tbl{overflow-x:auto; margin:16px 0;}
.tbl table{width:100%; border-collapse:collapse; font-size:14px; min-width:480px; background:#fff;}
.tbl th,.tbl td{border:1px solid var(--border); padding:10px 12px; text-align:left; vertical-align:top;}
.tbl thead th{background:var(--navy-2); color:#fff; font-size:13px;}
.tbl tbody th{background:#f2f6fa; color:var(--navy-2); white-space:nowrap; font-size:13px;}

/* 監修者ボックス */
.author{display:flex; gap:16px; align-items:center; background:#fff; border:1px solid var(--border-warm); border-left:5px solid var(--gold); border-radius:12px; padding:16px 18px; margin:22px 0; box-shadow:var(--shadow-sm);}
.author img{width:76px; height:76px; border-radius:50%; object-fit:cover; flex:0 0 auto;}
.author .a-role{font-size:11.5px; color:var(--gold-d); font-weight:700; letter-spacing:.06em;}
.author .a-name{font-size:16px; font-weight:900; color:var(--navy-2);}
.author p{font-size:12.5px; color:var(--muted); margin:4px 0 0; line-height:1.7;}

/* FAQ */
.qa{background:#fff; border:1px solid var(--border); border-radius:12px; margin-bottom:12px; overflow:hidden;}
.qa summary{list-style:none; cursor:pointer; padding:16px 20px; font-weight:700; color:var(--navy-2); display:flex; gap:12px; align-items:flex-start;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::before{content:"Q"; flex:0 0 auto; width:26px; height:26px; border-radius:6px; background:var(--navy-2); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:13px;}
.qa .ans{padding:0 20px 18px 58px; color:#3c4651; font-size:14.5px;}

/* CTA */
.cta-band{background:linear-gradient(160deg,var(--cream),var(--cream-2)); border:1px solid var(--border-warm); border-radius:16px; text-align:center; padding:30px 22px; margin:46px 0 30px;}
.cta-band h2{border:0; padding:0; margin:0 0 8px; font-size:21px; color:var(--navy-2);}
.cta-band p{color:var(--warm); font-size:14px; margin:0 0 18px;}
.cta-band .btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.cta-band .assure{font-size:12px; color:var(--warm-muted); margin-top:14px;}

/* 関連リンク */
.rel{background:var(--bg-soft); border-radius:12px; padding:18px 20px; margin:26px 0;}
.rel b{color:var(--navy-2); font-size:14px;}
.rel ul{margin:8px 0 0; padding-left:1.3em;}
.rel a{color:#2b6cab;}

/* ===== Footer ===== */
footer.site{background:#eaf3fb; color:#27455e; padding:40px 0 40px; font-size:13.5px; border-top:3px solid #7db3e0; margin-top:40px;}
footer.site .fwrap{max-width:1080px; margin:0 auto; padding:0 20px;}
footer.site .fcols{display:grid; grid-template-columns:1.4fr 1fr; gap:30px;}
footer.site .flogo{width:56px; height:56px; margin-bottom:8px;}
footer.site b.fbrand{font-size:18px; color:#2b6cab;}
footer.site .license{background:#ffffff; border:1px solid #cfe1f0; border-radius:10px; padding:14px 16px; margin-top:12px; line-height:1.9; font-size:12.5px;}
footer.site .license b{color:#16395f;}
footer.site h5{color:#2b6cab; font-size:14px; margin:0 0 12px;}
footer.site ul{list-style:none; padding:0; margin:0;}
footer.site ul li{margin-bottom:9px;}
footer.site a{color:#27455e; text-decoration:none;}
footer.site a:hover{color:#16395f; text-decoration:underline;}
.copy{border-top:1px solid #cfe1f0; margin-top:26px; padding-top:16px; color:#7b93a8; font-size:12px;}

/* ===== Responsive ===== */
@media (max-width:920px){
  .htel{display:none;}
  .brand img{width:44px; height:44px;}
  .brand b{font-size:20px;}
  .brand span{font-size:10px;}
  .hbar .btn{padding:10px 16px; font-size:13.5px;}
  .page-hero h1{font-size:24px;}
  footer.site .fcols{grid-template-columns:1fr;}
}