:root { --ink: #394c41; --brown: #916c4f; --deep: #597d6b; --line: #e6e5da; --paper: #fffefa; --cream: #f6f5ed; }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif; line-height:1.9; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
a:focus-visible { outline:3px solid #d7a96e; outline-offset:4px; }
.container { width:min(1060px,calc(100% - 44px)); margin:auto; }
.sub-header { background:#fffbf6; border-bottom:1px solid var(--line); position:sticky; z-index:10; top:0; }
.sub-header-inner { display:flex; align-items:center; justify-content:space-between; min-height:88px; gap:20px; }
.sub-brand { display:inline-flex; gap:8px; align-items:center; flex:none; }
.sub-brand-tree { display:block; width:78px; height:auto; }
.sub-brand-tree { transform-origin:50% 85%; transition:transform .75s cubic-bezier(.2,.75,.25,1); }
.sub-brand:hover .sub-brand-tree,.sub-brand:focus-visible .sub-brand-tree { transform:rotate(-4deg) translateY(-2px) scale(1.045); }
.sub-brand-wordmark { display:block; width:167px; height:auto; }
.sub-nav { display:flex; align-items:center; gap:24px; font-size:.86rem; font-weight:700; flex-wrap:wrap; }
.sub-nav a:hover,.text-link:hover { color:#8b694d; }
.sub-nav .sub-button { background:var(--deep); color:white; border-radius:99px; padding:10px 19px; }
.sub-nav .sub-button:hover { background:#456752; color:white; }
.sub-hero { background:linear-gradient(125deg,#eef2e8 0%,#faf4e9 60%,#fae8dc 100%); padding:100px 0 86px; overflow:hidden; }
.eyebrow { display:block; text-transform:uppercase; color:#7e987b; font:bold .76rem Arial,sans-serif; letter-spacing:.18em; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(2.2rem,5.4vw,3.7rem); line-height:1.45; letter-spacing:.035em; margin:20px 0 24px; }
h2 { font-size:clamp(1.65rem,3.2vw,2.4rem); line-height:1.5; letter-spacing:.025em; }
h3 { font-size:1.3rem; line-height:1.55; }
p { color:#58685d; }
.sub-hero p { max-width:680px; font-size:1.03rem; line-height:2.1; margin-bottom:0; }
.hero-small { display:inline-block; padding:4px 15px; border-radius:99px; background:#fff9f0; color:#98795c; font-weight:700; font-size:.78rem; margin-top:22px; }
.section { padding:90px 0; }
.section.soft { background:#f7f6f0; }
.section-heading { max-width:720px; margin-bottom:35px; }
.section-heading h2 { margin:12px 0; }
.post-index { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.post-link { display:block; background:white; border:1px solid #e7e2d7; border-radius:20px; padding:29px 30px; box-shadow:0 10px 35px rgba(55,62,47,.05); }
.post-link:hover { border-color:#b7c6b2; transform:translateY(-2px); }
.tag { display:inline-block; color:#5d826a; background:#e7efe7; border-radius:99px; padding:3px 12px; font-size:.75rem; font-weight:700; }
.date { display:block; color:#a28b77; font:bold .78rem Arial,sans-serif; letter-spacing:.05em; margin-top:17px; }
.post-link h3 { margin:8px 0 8px; }
.post-link p { font-size:.89rem; margin:0; }
.post { max-width:790px; margin:0 auto; background:white; padding:60px 65px; border-radius:25px; border:1px solid #e8e4d8; box-shadow:0 10px 40px rgba(60,68,54,.045); }
.post h2 { margin:15px 0 29px; }
.post p { font-size:1rem; line-height:2.15; margin-bottom:22px; }
.post p:last-child { margin-bottom:0; }
.post + .post { margin-top:40px; }
.post-outro { margin-top:40px; padding-top:18px; border-top:1px solid var(--line); font-size:.87rem; }
.button { display:inline-flex; align-items:center; justify-content:center; padding:13px 25px; border-radius:99px; font-weight:800; background:var(--deep); color:#fff; }
.button:hover { background:#456752; }
.action-row { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.action-row .outline { color:var(--deep); background:white; border:1px solid #a9c1ae; }
.recruit-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.position-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.position-card { border:1px solid #e1e5d8; background:#fffefa; border-radius:23px; padding:32px 34px; }
.position-card h3 { margin:18px 0 12px; }
.position-card p { font-size:.92rem; line-height:1.95; }
.position-card .position-modes { border-top:1px solid #e8e5da; padding-top:17px; margin:22px 0 0; color:#61806a; font-weight:800; }
.recruit-card { border-radius:23px; padding:30px; border:1px solid #e7e1d7; background:#fffefa; }
.recruit-card .number { display:block; color:#9ab19b; font:bold 1.2rem Arial,sans-serif; margin-bottom:17px; }
.recruit-card h3 { font-size:1.12rem; }
.recruit-card p { font-size:.9rem; margin:0; }
.recruit-list { padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.recruit-list li { background:#f8f6ed; border-radius:14px; padding:17px 20px; border-left:3px solid #b7c9b0; }
.recruit-info { border-radius:22px; background:#f4eee4; padding:32px 35px; }
.salary-highlight { background:#eaf2e8; border:1px solid #d1e1d1; border-radius:22px; padding:27px 34px; margin-bottom:23px; }
.salary-highlight span,.salary-highlight small { display:block; }
.salary-highlight span { font-weight:800; color:#68816c; font-size:.85rem; }
.salary-highlight strong { display:block; color:#486b56; font-size:clamp(1.35rem,2.5vw,1.9rem); line-height:1.55; margin:4px 0 3px; }
.salary-highlight em { font-style:normal; font-family:Arial,sans-serif; letter-spacing:.025em; }
.salary-highlight small { color:#6f7e70; }
.company-message { max-width:860px; border-radius:28px; background:#faf5ed; padding:clamp(27px,5vw,60px); border:1px solid #eaddce; }
.company-message p { line-height:2.12; margin-bottom:23px; }
.company-message p:last-child { margin-bottom:0; }
.company-message .company-quote { font-size:clamp(1.4rem,3vw,2.1rem); color:#896c51; font-weight:800; letter-spacing:.08em; }
.company-profile small { font-size:.8rem; color:#7b8277; }
.company-facility { display:grid; grid-template-columns:1fr 1fr; gap:38px; align-items:center; }
.company-facility img { display:block; width:100%; height:360px; object-fit:cover; border-radius:24px; }
.company-facility h3 { font-size:1.7rem; margin:15px 0; }
.company-facility p { line-height:2; margin-bottom:27px; }
.trial-grid { display:grid; grid-template-columns:.88fr 1.12fr; gap:clamp(30px,5vw,75px); align-items:start; }
.trial-intro h2 { margin:12px 0 25px; }
.trial-intro p { line-height:2; }
.trial-steps { list-style:none; counter-reset:trial; margin:27px 0; padding:0; display:grid; gap:13px; }
.trial-steps li { counter-increment:trial; display:flex; gap:13px; align-items:center; font-size:.9rem; font-weight:800; }
.trial-steps li::before { content:counter(trial); display:grid; place-items:center; width:34px; height:34px; flex:none; background:#e5eee4; border-radius:50%; color:#62816b; font:bold 1rem Arial,sans-serif; }
.trial-notice { font-size:.87rem; border-left:3px solid #d8bc8e; padding-left:16px; }
.trial-line-qr { display:flex; align-items:center; gap:13px; margin-top:22px; color:#728375; font-size:.79rem; }
.trial-line-qr img { width:116px; height:116px; border-radius:12px; border:1px solid #e2e5d9; background:white; }
.trial-form { background:#fffefa; border:1px solid #e6e1d5; padding:clamp(22px,3.5vw,40px); border-radius:24px; box-shadow:0 12px 40px rgba(60,69,51,.055); }
.trial-form label { display:block; font-weight:800; font-size:.91rem; margin:16px 0 7px; }
.trial-form label:first-child { margin-top:0; }
.trial-form input,.trial-form select,.trial-form textarea { display:block; width:100%; min-height:48px; background:white; border:1px solid #cddbd0; border-radius:12px; padding:10px 14px; color:var(--ink); font:inherit; font-size:.9rem; }
.trial-form textarea { min-height:120px; resize:vertical; }
.trial-form input:focus-visible,.trial-form select:focus-visible,.trial-form textarea:focus-visible { outline:3px solid #c3dfcc; outline-offset:1px; border-color:#649878; }
.trial-form .required { display:inline-block; background:#f8e4df; color:#ae7565; padding:0 6px; border-radius:4px; font-size:.69rem; margin-left:5px; }
.trial-form label small { color:#899189; font-weight:500; margin-left:4px; }
.trial-privacy { font-size:.78rem; line-height:1.85; margin:21px 0 15px; }
.trial-generate { width:100%; }
.trial-ready { margin-top:25px; padding-top:23px; border-top:1px solid #dce6dc; }
.trial-ready[hidden] { display:none; }
.trial-ready #trial-preview { min-height:220px; background:#f5f8f0; }
.trial-ready .button { margin-top:12px; width:100%; }
.trial-ready .trial-line { background:#06b94a; }
.trial-ready .trial-line:hover { background:#079943; }
.trial-instruction { font-size:.82rem; margin:14px 0 0; }
.trial-status { font-size:.83rem; font-weight:700; color:#4d7a5b; min-height:1.5em; margin:12px 0 0; }
.recruit-info dt { font-weight:800; margin-bottom:3px; }
.recruit-info dd { margin:0 0 18px; color:#5a695e; }
.recruit-info dd:last-child { margin-bottom:0; }
.sub-footer { background:#f2eee6; padding:47px 0 35px; }
.sub-footer-inner { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.sub-footer p { margin:12px 0 0; font-size:.8rem; }
.footer-links { display:flex; gap:19px; flex-wrap:wrap; font-size:.82rem; font-weight:800; }
.copyright { display:block; margin-top:25px; color:#8a968b; font-size:.72rem; }
html.has-motion .reveal { opacity:0; transform:translateY(20px); transition:opacity .75s ease var(--reveal-delay,0ms),transform .75s cubic-bezier(.18,.72,.2,1) var(--reveal-delay,0ms); }
html.has-motion .reveal.is-visible { opacity:1; transform:translateY(0); }
.sub-hero h1 { animation:sub-title-arrive 1s ease-out both; }
@keyframes sub-title-arrive { from { opacity:.65; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { .sub-brand-tree,.sub-hero h1 { animation:none !important; transition:none !important; } html.has-motion .reveal { opacity:1 !important; transform:none !important; transition:none !important; } }
@media(max-width:760px) { .container { width:min(100% - 32px,560px); } .sub-header-inner { min-height:78px; } .sub-brand-tree { width:57px; } .sub-brand-wordmark { width:139px; } .sub-nav { gap:12px; font-size:.75rem; } .sub-nav a:first-child { display:none; } .sub-nav .sub-button { padding:8px 13px; } .sub-hero { padding:65px 0 60px; } .section { padding:66px 0; } .post-index,.recruit-cards,.position-grid,.recruit-list,.company-facility,.trial-grid { grid-template-columns:1fr; } .trial-line-qr { display:none; } .company-facility img { height:250px; } .post { padding:31px 24px; } .sub-footer-inner { flex-direction:column; } }