/*
Theme Name: 社労士オフィスNGS
Theme URI: https://ngs.green-stock.biz/
Author: 社労士オフィスNGS
Description: 社労士オフィスNGS専用の1ページ型オリジナルテーマです。
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: sharoushi-office-ngs
*/

:root { --ink:#102d3f; --navy:#063b73; --navy-deep:#032d59; --green:#62b936; --green-deep:#4fa026; --mist:#f2f6fa; --pale-blue:#dbe4ee; --pale-green:#eaf4e2; --paper:#ffffff; --line:rgba(6,59,115,.14); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; font-feature-settings:"palt"; }
a { color:inherit; text-decoration:none; }
.site-header { height:86px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; position:absolute; top:0; width:100%; z-index:20; color:var(--navy); border-bottom:1px solid var(--line); background:rgba(255,255,255,.88); backdrop-filter:blur(10px); }
.brand { display:flex; align-items:center; gap:12px; }
.brand-logo-frame { display:grid; place-items:center; width:48px; height:48px; flex:0 0 48px; padding:3px; overflow:hidden; border-radius:50%; background:white; }
.brand-logo { display:block; width:100%; height:100%; object-fit:contain; }
.brand b,.brand small { display:block; }
.brand b { letter-spacing:.06em; font-size:15px; color:var(--navy); }
.brand small { font-family:Arial,sans-serif; font-size:8px; letter-spacing:.22em; color:var(--green-deep); margin-top:4px; font-weight:700; }
nav { display:flex; align-items:center; gap:32px; font-size:14px; letter-spacing:.06em; }
nav a { opacity:.88; }
.nav-cta { background:var(--navy); color:white; padding:12px 22px; border-radius:2px; opacity:1; }
.hero { min-height:850px; background:linear-gradient(118deg,#fff 0%,#fff 66%,#f3f7fb 100%); color:var(--ink); position:relative; overflow:hidden; padding:86px 5vw 0; }
.hero::before { content:""; position:absolute; width:620px; height:620px; right:-280px; top:-250px; border:74px solid var(--pale-blue); border-radius:50%; opacity:.78; }
.hero::after { content:""; position:absolute; width:470px; height:470px; right:-280px; top:-150px; border:50px solid var(--pale-green); border-radius:50%; }
.hero-orbit { position:absolute; border-radius:50%; pointer-events:none; }
.orbit-one { width:390px; height:390px; right:-205px; bottom:80px; border:34px solid rgba(6,59,115,.06); }
.orbit-two { width:280px; height:280px; right:-145px; bottom:135px; border:25px solid rgba(98,185,54,.08); }
.hero-inner { max-width:1240px; margin:auto; min-height:635px; display:grid; grid-template-columns:1.16fr .84fr; align-items:center; gap:7vw; position:relative; z-index:2; }
.eyebrow { display:flex; align-items:center; gap:12px; font-family:Arial,sans-serif; font-size:12px; letter-spacing:.16em; font-weight:700; color:var(--green-deep); }
.eyebrow span { width:34px; height:1px; background:currentColor; }
.hero h1 { margin:24px 0 28px; font-size:clamp(50px,5.05vw,72px); line-height:1.3; font-weight:700; letter-spacing:.015em; color:var(--navy); }
.headline-line { display:block; white-space:nowrap; }
.hero h1 .headline-accent { color:var(--green-deep); position:relative; font-style:normal; }
.hero h1 .headline-accent::after { content:""; height:3px; background:var(--green); position:absolute; left:0; right:0; bottom:-4px; }
.hero-lead { font-size:18px; line-height:1.95; color:#536675; }
.hero-actions { display:flex; align-items:center; gap:34px; margin-top:42px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; min-width:255px; padding:19px 23px; border-radius:2px; font-weight:700; font-size:15px; letter-spacing:.04em; transition:.25s ease; }
.button span { font-size:18px; font-weight:400; }
.button-primary { background:var(--navy); color:white; box-shadow:0 14px 32px rgba(6,59,115,.2); border-left:5px solid var(--green); }
.button:hover { transform:translateY(-2px); }
.text-link { font-size:14px; color:var(--navy); border-bottom:1px solid rgba(6,59,115,.35); padding-bottom:7px; font-weight:700; }
.text-link span { margin-left:8px; }
.hero-panel { width:390px; height:465px; justify-self:end; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; background:white; box-shadow:0 24px 70px rgba(6,59,115,.12); overflow:hidden; border-bottom:4px solid var(--navy); }
.hero-panel::before { content:""; position:absolute; inset:25px; border:1px solid rgba(6,59,115,.12); }
.hero-panel::after { content:""; position:absolute; left:0; top:55px; bottom:55px; width:5px; background:var(--green); }
.hero-panel > img { width:150px; height:150px; object-fit:contain; position:relative; z-index:2; }
.panel-orbit { position:absolute; width:250px; height:250px; border:34px solid var(--pale-blue); border-radius:50%; right:-135px; top:-130px; }
.panel-wordmark { display:flex; gap:4px; margin-top:20px; font:700 23px/1 Arial,sans-serif; color:var(--navy); position:relative; z-index:2; }
.panel-wordmark b { color:var(--green-deep); }
.panel-rule { width:54px; height:3px; background:var(--navy); margin:25px 0 0; }
.panel-message { margin-top:20px; text-align:center; line-height:1.9; color:#536675; font-size:15px; position:relative; z-index:2; }
.hero-data { max-width:1240px; margin:auto; min-height:129px; display:grid; grid-template-columns:repeat(3,1fr); border-top:2px solid var(--navy); position:relative; z-index:2; }
.hero-data div { display:flex; align-items:center; gap:24px; padding:24px 38px; border-right:1px solid var(--line); }
.hero-data div:first-child { padding-left:0; }
.hero-data div:last-child { border:0; }
.hero-data strong { font:700 35px Arial,sans-serif; color:var(--navy); }
.hero-data span { font-size:15px; line-height:1.7; color:#5f707c; }
.section-pad { padding:120px max(5vw,calc((100vw - 1240px)/2)); }
.problem { background:var(--mist); display:grid; grid-template-columns:.9fr 1.1fr; gap:6vw; position:relative; overflow:hidden; }
.problem::after { content:""; position:absolute; width:240px; height:240px; border:28px solid var(--pale-green); border-radius:50%; left:-145px; bottom:-145px; }
.section-heading h2 { font-size:clamp(34px,4vw,52px); line-height:1.5; font-weight:700; margin:24px 0 0; letter-spacing:.03em; color:var(--navy); }
.problem .section-heading h2 { font-size:clamp(32px,3.05vw,39px); }
.balanced-heading > span { display:block; white-space:nowrap; }
.eyebrow.dark { color:var(--green-deep); }
.problem-list { display:grid; grid-template-columns:1fr 1fr; gap:0 45px; }
.problem-list div { border-top:1px solid var(--line); padding:23px 0 27px; display:flex; gap:18px; }
.problem-list i { font:700 15px Arial,sans-serif; color:var(--green-deep); }
.problem-list p { margin:0; font-size:16px; line-height:1.85; }
.problem-note { grid-column:2; margin:4px 0 0; font-size:16px; line-height:1.8; color:#62737e; padding-left:20px; border-left:3px solid var(--green); }
.services { background:var(--paper); }
.section-kicker { font:700 11px Arial,sans-serif; color:var(--green-deep); letter-spacing:.2em; border-left:38px solid var(--navy); padding-left:12px; }
.section-heading.wide { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:65px; }
.section-heading.wide h2 { max-width:650px; }
.section-heading.wide > p { width:450px; line-height:1.85; font-size:17px; color:#536773; margin:0 0 10px; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.service-card { padding:38px 34px 36px; min-height:370px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:white; position:relative; transition:.25s; }
.service-card:hover { transform:translateY(-4px); box-shadow:0 18px 50px rgba(31,66,55,.08); z-index:2; }
.service-no { font:700 15px Arial,sans-serif; color:var(--green-deep); }
.service-card h3 { font-size:22px; color:var(--navy); margin:30px 0 18px; }
.service-card > p { font-size:15px; line-height:1.9; color:#5f6e76; }
.service-card div { position:absolute; left:34px; bottom:30px; display:flex; flex-wrap:wrap; gap:6px; }
.service-card div span { border:1px solid #d8dfe4; border-radius:20px; font-size:11px; padding:6px 10px; color:#6f7b83; }
.strengths { background:var(--navy-deep); color:white; display:grid; grid-template-columns:.9fr 1.1fr; gap:9vw; position:relative; overflow:hidden; }
.strengths::after { content:""; position:absolute; width:390px; height:390px; border:42px solid rgba(219,228,238,.08); border-radius:50%; right:-230px; bottom:-240px; }
.strength-intro h2 { font-size:clamp(34px,3.05vw,40px); font-weight:700; line-height:1.6; margin:24px 0 28px; color:white; }
.strength-intro h2 em { color:#8bd15e; font-style:normal; }
.strength-intro > p:last-child { color:rgba(255,255,255,.72); line-height:2; font-size:15px; max-width:500px; }
.strength-list article { display:flex; gap:28px; padding:28px 0 32px; border-top:1px solid rgba(255,255,255,.15); }
.strength-list article > span { font:700 15px Arial,sans-serif; color:#8bd15e; }
.strength-list h3 { margin:0 0 12px; font-size:20px; }
.strength-list p { margin:0; color:rgba(255,255,255,.7); line-height:1.9; font-size:14px; }
.flow { background:var(--mist); }
.flow-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.flow-list li { padding:30px 28px 24px; border-right:1px solid var(--line); min-height:215px; position:relative; }
.flow-list li:last-child { border:0; }
.flow-list span { display:block; font:700 14px Arial,sans-serif; letter-spacing:.13em; color:var(--green-deep); margin-bottom:33px; }
.flow-list b { display:block; font-size:21px; color:var(--navy); margin-bottom:16px; }
.flow-list p { font-size:15px; color:#5d707c; line-height:1.85; }
.profile { background:var(--paper); }
.profile-card { max-width:1100px; margin:auto; display:grid; grid-template-columns:.75fr 1.25fr; box-shadow:0 25px 80px rgba(6,59,115,.11); border-bottom:4px solid var(--navy); }
.portrait-photo-wrap { min-height:680px; position:relative; overflow:hidden; background:var(--navy); }
.portrait-photo-wrap::after { content:""; position:absolute; inset:18px; border:1px solid rgba(255,255,255,.16); pointer-events:none; }
.portrait-photo-wrap img { display:block; width:100%; height:100%; min-height:680px; object-fit:cover; object-position:center center; }
.profile-copy { padding:68px 68px 55px; background:white; }
.profile-copy h2 { font-size:35px; color:var(--navy); font-weight:700; line-height:1.55; margin:20px 0 25px; }
.profile-copy > p { color:#5f6e76; line-height:1.95; font-size:15px; }
.profile-message { white-space:nowrap; }
.profile-name { display:flex; align-items:baseline; gap:14px; border-top:1px solid var(--line); margin-top:28px; padding-top:23px; }
.profile-name span { font-size:12px; }
.profile-name strong { font-size:25px; color:var(--navy); letter-spacing:.14em; }
.profile-name small { font:9px Arial,sans-serif; letter-spacing:.15em; color:#9c9c95; }
.profile-copy ul { margin:22px 0 0; padding:18px 0 0; border-top:1px solid var(--line); list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; }
.profile-copy li { font-size:12px; color:#66757e; line-height:1.6; }
.faq { background:#f7f9fb; }
.faq-list { max-width:900px; margin:auto; }
.faq-list details { border-top:1px solid var(--line); }
.faq-list details:last-child { border-bottom:1px solid var(--line); }
.faq-list summary { list-style:none; padding:27px 10px; display:flex; align-items:center; gap:20px; cursor:pointer; font-size:18px; font-weight:600; color:var(--navy); }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary span,.faq-list details > div > span { font:700 16px Arial,sans-serif; color:var(--green-deep); }
.faq-list summary i { font-style:normal; margin-left:auto; font-size:21px; font-weight:300; }
.faq-list details[open] summary i { transform:rotate(45deg); }
.faq-list details > div { display:flex; gap:20px; padding:0 55px 28px 10px; }
.faq-list details > div p { margin:0; font-size:15px; line-height:1.9; color:#5f6e76; }
.contact { background:var(--navy); color:white; min-height:570px; display:grid; grid-template-columns:1.3fr .7fr; padding:90px max(5vw,calc((100vw - 1120px)/2)); align-items:center; gap:8vw; position:relative; overflow:hidden; }
.contact::before { content:""; position:absolute; width:420px; height:420px; right:-220px; top:-240px; border:52px solid rgba(219,228,238,.12); border-radius:50%; }
.contact::after { content:""; position:absolute; width:300px; height:300px; right:-175px; top:-155px; border:34px solid rgba(98,185,54,.12); border-radius:50%; }
.contact h2 { font-size:clamp(38px,4vw,55px); font-weight:700; line-height:1.5; margin:22px 0; }
.contact-inner > p:not(.eyebrow) { color:rgba(255,255,255,.72); line-height:1.95; font-size:15px; }
.button-light { background:white; color:var(--navy); margin-top:20px; border-left:5px solid var(--green); }
.contact-inner > small { display:block; margin-top:17px; color:rgba(255,255,255,.55); font-size:12px; }
.contact-form-note { border:1px solid rgba(255,255,255,.2); padding:45px 30px; text-align:center; background:rgba(255,255,255,.03); position:relative; z-index:1; }
.contact-form-note span { font:700 9px Arial,sans-serif; letter-spacing:.22em; color:#95d66c; }
.contact-form-note p { font-size:14px; color:rgba(255,255,255,.7); line-height:1.95; margin:20px 0 0; }
.contact-form-note .office-address { margin-top:14px; font-size:15px; line-height:1.9; color:rgba(255,255,255,.9); font-weight:600; }
.contact-divider { width:42px; height:1px; margin:27px auto; background:rgba(255,255,255,.24); }
footer { background:#031f3c; color:white; padding:45px 5vw; display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:30px; }
footer .brand b { color:white; }
footer p { margin:4px 0; font-size:12px; color:rgba(255,255,255,.58); }
footer > small { font:10px Arial,sans-serif; letter-spacing:.12em; color:rgba(255,255,255,.45); }

@media (max-width:900px) {
  .site-header { height:72px; padding:0 22px; } .site-header nav a:not(.nav-cta) { display:none; } .nav-cta { padding:10px 16px; }
  .hero { padding:72px 22px 0; min-height:auto; } .hero-inner { grid-template-columns:1fr; min-height:720px; padding:70px 0; } .hero-panel { display:none; } .hero h1 { font-size:clamp(40px,10vw,60px); } .desktop { display:none; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:24px; } .hero-data { grid-template-columns:1fr; padding:18px 0; }
  .hero-data div,.hero-data div:first-child { border-right:0; border-bottom:1px solid var(--line); padding:18px 0; } .hero-data div:last-child { border-bottom:0; }
  .section-pad { padding:85px 22px; } .problem,.strengths { grid-template-columns:1fr; gap:50px; } .problem .section-heading h2,.strength-intro h2 { font-size:clamp(27px,6.5vw,38px); } .problem-list { grid-template-columns:1fr; } .problem-note { grid-column:1; }
  .section-heading.wide { display:block; margin-bottom:45px; } .section-heading.wide > p { width:auto; margin-top:22px; } .service-grid { grid-template-columns:1fr; } .service-card { min-height:345px; }
  .flow-list { grid-template-columns:1fr 1fr; } .flow-list li:nth-child(2) { border-right:0; } .flow-list li { border-bottom:1px solid var(--line); }
  .profile-card { grid-template-columns:1fr; } .portrait-photo-wrap,.portrait-photo-wrap img { min-height:520px; max-height:620px; } .portrait-photo-wrap img { object-position:center 32%; } .profile-copy { padding:48px 28px; } .profile-copy h2 { font-size:30px; } .profile-copy ul { grid-template-columns:1fr; }
  .contact { grid-template-columns:1fr; padding:80px 22px; } footer { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .brand b { font-size:12px; } .brand small { font-size:6px; } .brand-logo-frame { width:38px; height:38px; flex-basis:38px; padding:4px; } .hero h1 { font-size:clamp(34px,9.3vw,43px); } .hero-lead { font-size:16px; }
  .problem .section-heading h2,.strength-intro h2 { font-size:clamp(24px,6.35vw,31px); }
  .profile-message { white-space:normal; }
  .problem-list { display:block; } .flow-list { grid-template-columns:1fr; } .flow-list li { border-right:0; } .profile-card { box-shadow:none; }
}


body.admin-bar .site-header { top: 32px; }
.ngs-contact-link { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; margin-top:24px; padding:15px 18px; background:#fff; color:var(--navy); font-weight:700; font-size:14px; border-left:4px solid var(--green); }
.ngs-contact-link b { font-size:18px; font-weight:400; }
.ngs-fallback { max-width:900px; margin:100px auto; padding:0 24px; }
@media (max-width:782px) { body.admin-bar .site-header { top:46px; } }