/* カインド社労士事務所 障害年金サポート（jinjiroum.jp/shogai/）
   落ち着いた緑とクリーム色。申込みボタンは社労士サイトと同じオレンジ（無料診断）・緑（相談）。 */
:root{--main:#2e6b5e;--deep:#1f4a41;--pale:#eaf3ef;--cream:#fbf7f0;--line:#e6ded2;--text:#2b2b2b;--muted:#6b6b6b;
 --orange:#f86b32;--orange-sh:#be4918;--green:#009d4b;--green-sh:#317c42}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;color:var(--text);line-height:1.9;background:#fff;font-size:16px;overflow-x:hidden}
a{color:var(--main)}
img{max-width:100%;height:auto}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.narrow{max-width:820px}

/* ヘッダー */
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);line-height:1.3}
.logo img{height:32px;width:auto;display:block}
.logo b{display:block;font-size:1.05rem;letter-spacing:.03em}
.logo small{display:block;font-size:.72rem;color:var(--muted)}
nav.gnav a{margin:0 7px;font-size:.86rem;text-decoration:none;color:var(--text)}
nav.gnav a:hover{color:var(--main)}
.hbtn{display:inline-block;background:var(--orange);color:#fff;text-decoration:none;font-weight:700;font-size:.86rem;padding:8px 14px;border-radius:8px;box-shadow:0 3px 0 var(--orange-sh);white-space:nowrap}

/* 申込みボタン */
.cta{display:flex;flex-wrap:wrap;gap:14px;margin:22px 0 10px}
.btn{display:block;flex:1 1 260px;max-width:400px;text-align:center;text-decoration:none;color:#fff;font-weight:700;font-size:1.08rem;line-height:1.4;padding:13px 18px;border-radius:10px;transition:transform .15s}
.btn small{display:block;font-size:.78rem;font-weight:400;margin-bottom:2px}
.btn:hover{transform:translateY(2px)}
.btn-o{background:var(--orange);box-shadow:0 5px 0 var(--orange-sh)}
.btn-g{background:var(--green);box-shadow:0 5px 0 var(--green-sh)}
.cta.center{justify-content:center}

/* トップのヒーロー */
.hero{background:linear-gradient(180deg,var(--cream),#fff);padding:48px 0 36px;border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:36px;align-items:center}
.hero .kicker{display:inline-block;background:var(--pale);color:var(--deep);font-weight:700;font-size:.85rem;padding:4px 12px;border-radius:30px}
.hero h1{font-size:2.15rem;line-height:1.45;margin:14px 0 12px;color:var(--deep);letter-spacing:.02em}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 64%,rgba(248,107,50,.28) 64%)}
.hero p.sub{margin:0 0 6px;font-size:1.02rem}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px;padding:0;list-style:none}
.badges li{background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:.88rem;font-weight:700;color:var(--deep)}
.badges li b{color:var(--orange)}
.hero figure{margin:0}
.hero figure img{display:block;width:100%;border-radius:16px;box-shadow:0 10px 30px rgba(31,74,65,.15)}
.hero figure figcaption{font-size:.85rem;color:var(--muted);margin-top:10px;line-height:1.7}

/* セクション */
.sec{padding:52px 0}
.sec.alt{background:var(--cream)}
.sec h2,.art h2{font-size:1.5rem;color:var(--deep);line-height:1.5;margin:0 0 18px}
.sec h2 .en{display:block;font-size:.75rem;letter-spacing:.18em;color:var(--orange);font-weight:700}
.lead{font-size:1.02rem}
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0;padding:0;list-style:none;counter-reset:pt}
.points li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 18px;counter-increment:pt}
.points li::before{content:"POINT " counter(pt);display:block;font-size:.75rem;font-weight:700;letter-spacing:.12em;color:var(--orange)}
.points li b{display:block;font-size:1.08rem;color:var(--deep);margin:4px 0 6px;line-height:1.5}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.cards a{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 16px 14px;text-decoration:none;color:var(--text);transition:box-shadow .2s,transform .2s}
.cards a:hover{box-shadow:0 8px 22px rgba(31,74,65,.12);transform:translateY(-2px)}
.cards a b{display:block;color:var(--deep);font-size:1.02rem;margin-bottom:4px}
.cards a span{display:block;font-size:.86rem;color:var(--muted);line-height:1.7}
.cards a::after{content:"くわしく見る ›";display:block;margin-top:8px;font-size:.82rem;font-weight:700;color:var(--main)}
.flow{margin:0;padding:0;list-style:none;counter-reset:fl}
.flow li{position:relative;padding:12px 0 12px 58px;border-bottom:1px dashed var(--line);counter-increment:fl}
.flow li::before{content:counter(fl);position:absolute;left:0;top:12px;width:40px;height:40px;border-radius:50%;background:var(--main);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.flow li b{color:var(--deep)}
details.qa{background:#fff;border:1px solid var(--line);border-radius:10px;margin:0 0 10px;padding:0 16px}
details.qa summary{cursor:pointer;font-weight:700;padding:14px 0;color:var(--deep);list-style:none}
details.qa summary::before{content:"Q. ";color:var(--orange)}
details.qa summary::-webkit-details-marker{display:none}
details.qa div{padding:0 0 14px}
.profile{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.profile dl{margin:0;display:grid;grid-template-columns:7em 1fr;gap:6px 12px;font-size:.95rem}
.profile dt{font-weight:700;color:var(--deep)}
.profile dd{margin:0}

/* 表 */
table{border-collapse:collapse;width:100%;font-size:.93rem;background:#fff}
th,td{border:1px solid var(--line);padding:9px 11px;vertical-align:top;text-align:left}
thead th{background:var(--pale);color:var(--deep)}
.tbl{overflow-x:auto;margin:0 0 18px;-webkit-overflow-scrolling:touch}
.tbl table{min-width:520px}
figure.wp-block-table{margin:0 0 18px;overflow-x:auto}
figure.wp-block-table table{min-width:520px}

/* 記事ページ */
.crumb{font-size:.8rem;color:var(--muted);padding:14px 0 0}
.crumb a{color:var(--muted)}
.art{padding:8px 0 40px}
.art h1{font-size:1.75rem;line-height:1.5;color:var(--deep);margin:10px 0 18px}
.art h2{border-left:6px solid var(--orange);padding:2px 0 2px 12px;margin-top:40px;font-size:1.35rem}
.art h3{font-size:1.1rem;color:var(--deep);margin-top:26px}
.art p.intro{font-size:1.04rem;background:var(--cream);border-radius:12px;padding:16px 18px}
.subnav{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:.86rem;line-height:2}
.subnav b{color:var(--orange);margin-right:6px}
.subnav a{color:var(--text);margin-right:10px;white-space:nowrap}
.subnav strong{color:var(--main);margin-right:10px;white-space:nowrap}
.ctabox{background:var(--pale);border-radius:16px;padding:22px 22px 14px;margin:34px 0}
.ctabox .t{font-weight:700;font-size:1.15rem;color:var(--deep)}
.sup{border:1px solid var(--line);border-radius:12px;padding:14px 18px;font-size:.9rem;line-height:1.8;background:#fafafa;margin:30px 0}
.sup b{display:block;margin-bottom:2px}
.note{font-size:.86rem;color:var(--muted)}

/* フッター */
footer{background:var(--deep);color:#e8efec;padding:34px 0 90px;font-size:.88rem}
footer a{color:#fff}
footer .fl{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 14px;padding:0;list-style:none}
footer .copy{opacity:.75;font-size:.8rem;margin-top:14px}

/* スマホの下部固定ボタン */
.fixcta{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--line)}
.fixcta a{flex:1;text-align:center;color:#fff;font-weight:700;font-size:.92rem;text-decoration:none;padding:10px 4px;border-radius:9px}

/* チャットの色を、このサイトに合わせる */
#kind-chat{--kc-navy:#1f4a41;--kc-blue:#2e6b5e;--kc-pale:#eaf3ef;--kc-bg:#fbf7f0;--kc-line:#e6ded2}

/* ===== 写真と動き（2026-11-09 追加） ===== */
header{transition:box-shadow .3s}
header.sc{box-shadow:0 4px 18px rgba(31,74,65,.10)}
/* トップ：桜と西武線の写真を背景に、ゆっくりズーム */
.hero.ph{position:relative;overflow:hidden;background:#f3efe6;padding:70px 0 60px;min-height:560px;display:flex;align-items:center}
.hero.ph .bg{position:absolute;inset:-3%;background:#3d8fd6 url(images/hero.webp?v=2) 60% center/cover no-repeat;animation:kb 24s ease-in-out infinite alternate}
/* 青空と満開の桜を見せるため、文字の後ろだけ白い幕（左端から55%まで）。右側は写真のまま */
.hero.ph .shade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.82) 32%,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 62%)}
.hero.ph .wrap{position:relative;z-index:1;display:block;width:100%}
.hero.ph .in{max-width:620px}
/* 2026-11-09 読みやすさ：文字は白い半透明のカードに載せ、写真はカードの外で見せる */
.hero.ph .shade{background:linear-gradient(100deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,.15) 45%,rgba(255,255,255,0) 65%)}
.hero.ph .in{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:22px;
 padding:30px 34px 26px;box-shadow:0 18px 50px rgba(20,60,90,.22);border:1px solid rgba(255,255,255,.7)}
.hero.ph h1{color:#173d35;margin-top:12px}
.hero.ph p.sub{color:#2b2b2b}
.hero.ph .kicker{background:#e3f1ea}
.hero.ph .badges li{background:#f7faf8}
.hero.ph .cta{margin-bottom:0}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.1) translateX(-2%)}}
/* 握手（行政書士サイトと同じ素材）：手が近づいて握手し、そのまま残る。1回だけ再生 */
.hero .hs{position:absolute;z-index:1;pointer-events:none;right:1%;top:60%;translate:0 -50%;width:min(46vw,600px);aspect-ratio:960/289;
 background:url(images/kind_handshake_alpha.webp) center/100% 100% no-repeat;opacity:0;filter:drop-shadow(0 10px 18px rgba(31,74,65,.25));
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
 animation:hsfade .8s ease-out .4s both}
@keyframes hsfade{from{opacity:0}to{opacity:1}}
.hero .hs-m{display:none}
.hero .in>*{opacity:0;transform:translateY(22px);animation:up .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero .in>*:nth-child(1){animation-delay:.1s}.hero .in>*:nth-child(2){animation-delay:.28s}.hero .in>*:nth-child(3){animation-delay:.46s}
.hero .in>*:nth-child(4){animation-delay:.64s}.hero .in>*:nth-child(5){animation-delay:.82s}
@keyframes up{to{opacity:1;transform:none}}
.badges li{opacity:0;animation:pop .5s ease-out forwards}
.badges li:nth-child(1){animation-delay:.9s}.badges li:nth-child(2){animation-delay:1.02s}.badges li:nth-child(3){animation-delay:1.14s}.badges li:nth-child(4){animation-delay:1.26s}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.btn-o{position:relative;overflow:hidden}
.btn-o::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0));transform:skewX(-20deg);animation:shine 4.5s ease-in-out 2s infinite}
@keyframes shine{0%,70%{left:-60%}100%{left:130%}}
/* スクロールで下からふわっと */
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.on{opacity:1;transform:none}
.points li.rv:nth-child(2),.cards a.rv:nth-child(3n+2){transition-delay:.12s}
.points li.rv:nth-child(3),.cards a.rv:nth-child(3n){transition-delay:.24s}
/* 特長の写真 */
.points li{padding:0;overflow:hidden;transition:transform .3s,box-shadow .3s}
.points li:hover{transform:translateY(-5px);box-shadow:0 12px 28px rgba(31,74,65,.14)}
.points li img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .6s}
.points li:hover img{transform:scale(1.05)}
.points li .tx{padding:16px 18px 20px}
.points li::before{margin:0}
.points li .tx::before{content:"POINT " counter(pt);display:block;font-size:.75rem;font-weight:700;letter-spacing:.12em;color:var(--orange)}
.points li::before{display:none}
/* 写真つき2列 */
.split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.split img{display:block;width:100%;border-radius:16px;box-shadow:0 10px 28px rgba(31,74,65,.14)}
.prof{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start}
.prof img{width:100%;border-radius:14px;box-shadow:0 8px 22px rgba(31,74,65,.14)}
.prof .nm{font-weight:700;font-size:1.15rem;color:var(--deep)}
.prof .nm small{display:block;font-size:.8rem;color:var(--muted);font-weight:400}
/* 写真の帯（申込み欄・記事ページ上部） */
.photo-cta{position:relative;overflow:hidden;border-radius:18px;margin:34px 0;color:#fff}
.photo-cta .bg{position:absolute;inset:0;background:url(images/band.webp?v=2) center/cover no-repeat;transform:scale(1.04);transition:transform 6s ease}
.photo-cta.on .bg{transform:scale(1.12)}
.photo-cta .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(31,74,65,.92) 0%,rgba(31,74,65,.78) 55%,rgba(31,74,65,.25) 100%)}
.photo-cta .in{position:relative;padding:28px 26px 18px}
.photo-cta .t{font-size:1.3rem;font-weight:700}
.photo-cta a:not(.btn){color:#fff}
.subhero{position:relative;overflow:hidden;color:#fff;margin:0 0 6px}
.subhero .bg{position:absolute;inset:-4%;background:url(images/band.webp?v=2) 60% 30%/cover no-repeat;animation:kb 26s ease-in-out infinite alternate}
.subhero .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(31,74,65,.9) 0%,rgba(31,74,65,.7) 45%,rgba(31,74,65,.15) 100%)}
.subhero .wrap{position:relative;padding-top:26px;padding-bottom:30px}
.subhero .crumb,.subhero .crumb a{color:#e3efe9;padding:0}
.subhero .cat{display:inline-block;margin-top:10px;font-size:.78rem;font-weight:700;letter-spacing:.12em;background:rgba(255,255,255,.18);border-radius:20px;padding:2px 12px}
.subhero h1{color:#fff;font-size:1.7rem;line-height:1.5;margin:8px 0 0;opacity:0;transform:translateY(16px);animation:up .8s cubic-bezier(.2,.7,.2,1) .15s forwards}

/* 料金の早見表（当センターの列を緑の枠で強調） */
.feeboard{overflow-x:auto;margin:6px 0 10px}
.feeboard table{min-width:0;max-width:680px;margin:0 auto;border-collapse:separate;border-spacing:0;background:transparent}
.feeboard th,.feeboard td{border:0;border-bottom:1px dashed #cfd8d4;padding:14px 16px;vertical-align:middle}
.feeboard tbody th{background:#f3f5f4;font-weight:700;font-size:.92rem;width:42%;color:var(--text)}
.feeboard thead th:first-child{background:transparent;border:0}
.feeboard th.us{background:var(--green);color:#fff;text-align:center;font-size:1.05rem;line-height:1.45;border-radius:12px 12px 0 0;padding:14px 10px}
.feeboard td{text-align:center;background:#fff;border-left:4px solid var(--green);border-right:4px solid var(--green)}
.feeboard tbody tr:last-child td{border-bottom:4px solid var(--green);border-radius:0 0 12px 12px}
.feeboard .mk{display:inline-block;color:var(--green);font-weight:700;background:linear-gradient(transparent 58%,#fff176 58%);padding:0 4px}
.feeboard .mk.big{font-size:1.1rem}
.feeboard .mk b{font-size:1.6rem;margin:0 2px}
.feeboard .yen{display:block;margin-top:6px;font-size:1.5rem;font-weight:700;color:var(--green)}
.feeboard .yen small{font-size:.85rem;margin-left:2px}
.feeboard td>small{display:block;font-size:.78rem;color:var(--muted)}
.feeboard .frm{display:inline-block;text-align:left;font-weight:700;line-height:1.7}
.feeboard .get{display:block;margin:10px auto 0;padding:8px 10px;max-width:300px;background:#f1f8f4;border-radius:8px;font-size:.84rem;line-height:1.6;color:var(--text)}
.feeboard .get em{display:block;font-style:normal;font-size:.72rem;font-weight:700;color:var(--main);letter-spacing:.06em}
.feeboard .get b{color:var(--deep)}
.feeboard + .note{max-width:680px;margin-left:auto;margin-right:auto}
.kodawari{background:#fffdf3;border:2px solid #f3e3a2;border-radius:16px;padding:18px 22px;margin:26px auto 30px;max-width:820px}
/* ボタンの小さい文字は1行に（入りきらないときは小さく） */
.btn small{white-space:nowrap;font-size:.74rem;overflow:hidden;text-overflow:ellipsis}
/* 写真の帯の申込み欄：右側の文字も読めるよう幕を濃く */
.photo-cta .shade{background:linear-gradient(90deg,rgba(31,74,65,.94) 0%,rgba(31,74,65,.85) 60%,rgba(31,74,65,.6) 100%)}
/* 握手はカードから少し離す */
.hero .hs{right:0;width:min(38vw,500px)}
.kodawari h3{margin:0 0 8px;color:var(--deep)}
.kodawari h3::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--orange);margin-right:8px;vertical-align:middle}

/* コラム */
.colist{display:grid;gap:12px;margin:10px 0 20px}
.colist a{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;text-decoration:none;color:var(--text);transition:box-shadow .2s,transform .2s}
.colist a:hover{box-shadow:0 8px 22px rgba(31,74,65,.12);transform:translateY(-2px)}
.colist .d{display:block;font-size:.8rem;color:var(--muted)}
.colist b{display:block;color:var(--deep);font-size:1.08rem;line-height:1.5;margin:2px 0 4px}
.colist .x{display:block;font-size:.88rem;color:var(--muted);line-height:1.7}
.colist img{display:block;width:100%;height:auto;border-radius:8px;margin:0 0 10px}
@media(min-width:640px){.colist a:has(img){display:grid;grid-template-columns:240px 1fr;column-gap:16px;align-items:start}.colist a:has(img) img{grid-row:1/4;margin:0}}
.colthumb{display:block;width:100%;height:auto;border-radius:10px;margin:6px 0 18px}
.art.col .date{font-size:.85rem;color:var(--muted);margin:14px 0 0}
.art .point{background:var(--pale);border-radius:12px;padding:12px 18px;margin:18px 0}
.art .point::before{content:"この記事のポイント";display:block;font-weight:700;color:var(--deep);margin-bottom:2px}
.art .warn{background:#fff6ef;border-left:5px solid var(--orange);border-radius:8px;padding:12px 16px;margin:18px 0}
.art p.note{font-size:.85rem;color:var(--muted)}
.art ul.src{font-size:.85rem;word-break:break-all}
.art blockquote{margin:16px 0;padding:10px 16px;border-left:4px solid var(--line);background:#fafafa}
.cards a span:only-of-type{margin-top:4px}

@media(max-width:860px){
 .feeboard th,.feeboard td{padding:12px 10px}
 .feeboard .yen{font-size:1.3rem}
 .hero.ph{min-height:0;padding:44px 0 40px}
 .hero.ph .shade{background:none}
 .hero.ph{padding:26px 0 26px}
 .hero.ph .in{padding:22px 18px 20px;border-radius:18px;background:rgba(255,255,255,.93)}
 .hero .hs{display:none}
 .hero .hs-m{display:block;margin:22px 0 0;width:100%;max-width:460px;aspect-ratio:960/289;border-radius:12px;background:#fff url(images/kind_handshake.webp) center/cover no-repeat;box-shadow:0 8px 24px rgba(31,74,65,.22)}
 .split,.prof{grid-template-columns:1fr}
 .prof img{max-width:200px}
 .subhero h1{font-size:1.35rem}
 nav.gnav{display:none}
 .hero .wrap{grid-template-columns:1fr}
 .hero h1{font-size:1.6rem}
 .points{grid-template-columns:1fr}
 .profile{grid-template-columns:1fr}
 .fixcta{display:flex}
 .sec{padding:40px 0}
 .art h1{font-size:1.4rem}
 .logo b{font-size:.95rem}
 .logo img{height:26px}
}
@media(max-width:480px){.logo small{display:none}.hero h1,.hero.ph h1{font-size:1.24rem}
 header .wrap{gap:6px;padding:0 14px}.logo{gap:6px}.logo img{height:20px}.logo b{font-size:.8rem;letter-spacing:0;white-space:nowrap}.hbtn{padding:7px 10px;font-size:.8rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;animation:none!important}
 .rv,.hero .in>*,.badges li,.subhero h1,.hero .hs{opacity:1!important;transform:none!important}}