/* ================================================================
   lullaby株式会社 コーポレートサイト 共通スタイル v3
   参考: 日本の急成長ベンチャーのコーポレートサイト
   （LayerX / ログラス / SmartBank を2026-08-29に実見して抽出）
   - 白基調・黒に近い紺の文字・ブランド紺1色＋シアンの小アクセント
   - 特大の日本語見出し（ミッションが主役）
   - 英語のセクションラベル＋ヘアライン罫線
   - ピル型（角丸フル）の濃紺ボタン・丸囲みの矢印
   - ニュースは日付＋チップ＋細罫線の行
   - 採用・CTAは濃紺のバンドで締める
   - LPのトンマナ（ブラウザ風カード・浮きカード・グロー）は使わない
   ================================================================ */
:root{
  --bg:#FFFFFF;
  --bg2:#F5F7FA;            /* 薄グレー面 */
  --ink:#0D1226;            /* ほぼ黒の紺 */
  --ink2:#4A5268;
  --muted:#8A91A5;
  --line:#E8EAF0;
  --line2:#D9DDE6;
  --navy:#1B2452;           /* ブランド紺（面・ボタン） */
  --navy-d:#141B3F;
  --cyan:#2E9FCC;           /* 小さなアクセント（ラベル・リンク） */
  --cyan-deep:#2E9FCC;
  --green:#8FC21E;          /* ロゴ由来。ほぼ使わない */
  --maxw:1200px;
  --font-latin:"Poppins";
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;color:var(--ink);background:var(--bg);line-height:2;font-size:15.5px;-webkit-font-smoothing:antialiased}
::selection{background:rgba(46,159,204,.22)}
a{color:inherit}
img{max-width:100%;height:auto}
h1,h2,h3,h4{font-feature-settings:"palt";line-height:1.5}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.wrap-narrow{max-width:840px;margin:0 auto;padding:0 32px}
.ic{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media(max-width:640px){.wrap,.wrap-narrow{padding:0 22px}}

/* buttons（ピル型） */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 36px;border-radius:999px;font-weight:700;font-size:14.5px;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .18s,color .18s,border-color .18s,transform .18s;font-family:inherit;letter-spacing:.03em}
.btn:hover{transform:translateY(-1px)}
.btn-navy,.btn-cta{background:var(--navy);color:#fff}
.btn-navy:hover,.btn-cta:hover{background:#26326E}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line2)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:#EDF3FA}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-nav{padding:11px 24px;font-size:13px}
.btn .ic{width:16px;height:16px}

/* 丸囲み矢印（LayerX風） */
.circ{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border:1px solid var(--line2);border-radius:50%;color:var(--ink);flex-shrink:0;transition:background .2s,color .2s,border-color .2s}
.circ .ic{width:20px;height:20px}
a:hover .circ,.circ:hover{background:var(--navy);border-color:var(--navy);color:#fff}

/* header */
header.site{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:800;text-decoration:none}
.logo-mark{width:34px;height:34px;display:block;object-fit:contain}
.logo-word{font-weight:800;font-size:16.5px;letter-spacing:.14em}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-link{font-size:13.5px;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap;opacity:.75;transition:opacity .15s}
.nav-link:hover,.nav-link[aria-current="page"]{opacity:1}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line2);border-radius:50%;background:#fff;color:var(--ink);align-items:center;justify-content:center;cursor:pointer}
@media(max-width:900px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:inline-flex;order:2}
  .nav .logo{order:1}
  .nav{flex-wrap:wrap}
  header.site.open{background:#fff}
  header.site.open .nav{height:auto;min-height:72px;padding-bottom:22px}
  header.site.open .nav .logo,header.site.open .nav-toggle{height:72px;display:flex;align-items:center}
  header.site.open .nav-links{display:flex;order:3;width:100%;flex-direction:column;align-items:stretch;gap:0;margin:0 -32px}
  header.site.open .nav-link{padding:16px 28px;border-top:1px solid var(--line);font-size:15px;opacity:1}
  header.site.open .nav-cta{display:flex;order:4;width:100%;flex-direction:column;align-items:stretch;padding-top:18px}
}
@media(max-width:640px){
  header.site.open .nav-links{margin:0 -22px}
}

/* page hero（下層）: 大きな英語ラベル＋日本語見出し */
.page-hero{padding:168px 0 56px;background:#fff;border-bottom:1px solid var(--line)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--muted);margin-bottom:22px;list-style:none}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line2)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.page-hero .kicker{display:block;font-family:var(--font-latin),sans-serif;font-size:clamp(38px,6vw,64px);font-weight:600;letter-spacing:.01em;line-height:1.1;color:var(--ink);border:0;background:none;padding:0;margin:0 0 10px;text-transform:capitalize}
.page-hero h1{font-size:17px;font-weight:700;color:var(--ink2);letter-spacing:.06em}
.page-hero p{margin-top:22px;color:var(--ink2);max-width:720px}
@media(max-width:640px){.page-hero{padding:136px 0 44px}}

/* top hero: 特大タイポ＋フルワイドのビジュアル */
.hero{padding:170px 0 0;background:#fff}
.hero .kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.18em;color:var(--cyan);margin-bottom:26px;border:0;background:none;padding:0}
.hero h1{font-size:clamp(30px,9vw,92px);font-weight:900;line-height:1.28;letter-spacing:.01em;color:var(--ink)}
.hero .sub{margin-top:26px;font-size:clamp(16px,2vw,21px);font-weight:700;color:var(--ink);letter-spacing:.1em}
.hero-lead{margin-top:22px;font-size:15.5px;color:var(--ink2);max-width:620px}
.hero-cta{margin-top:42px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-note{margin-top:22px;display:flex;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);letter-spacing:.04em}
.hero-note span{display:inline-flex;align-items:center;gap:6px}
.hero-note .ic{width:15px;height:15px;color:var(--cyan)}
.hero-art{margin-top:64px}
.hero-art img{display:block;width:100%;border-radius:18px;aspect-ratio:1600/640;object-fit:cover}
@media(max-width:640px){.hero{padding:132px 0 0}.hero-art{margin-top:44px}.hero-art img{border-radius:12px;aspect-ratio:4/3}}

/* sections */
section{padding:110px 0}
@media(max-width:640px){section{padding:72px 0}}
.sec-tag{display:flex;align-items:baseline;gap:14px;font-family:var(--font-latin),sans-serif;font-size:19px;font-weight:600;letter-spacing:.02em;color:var(--ink);padding-bottom:16px;border-bottom:1px solid var(--line2);margin-bottom:44px}
h2{font-size:clamp(27px,3.8vw,42px);font-weight:900;line-height:1.55;letter-spacing:.01em;color:var(--ink)}
.sec-lead{margin-top:20px;color:var(--ink2);max-width:760px;font-size:15.5px}
.sec-head-center{text-align:center}
.sec-head-center .sec-lead{margin-left:auto;margin-right:auto}
.sec-head-center .sec-tag{justify-content:center;border-bottom:0;padding-bottom:0;margin-bottom:20px}
.bg-alt{background:var(--bg2)}
strong{color:var(--ink)}
.foot-note{margin-top:18px;font-size:12px;color:var(--muted)}
.center{text-align:center}
.mt-40{margin-top:40px}

/* サービス行（LayerX風: タイル＋名前＋説明＋丸矢印） */
.svc-list{display:block}
.svc-row{display:grid;grid-template-columns:230px 1fr auto;gap:40px;align-items:center;padding:40px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:opacity .2s}
.svc-row:first-child{border-top:1px solid var(--line)}
.svc-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:140px;background:var(--bg2);border-radius:14px;color:var(--navy)}
.svc-tile .ic{width:30px;height:30px}
.svc-tile b{font-family:var(--font-latin),sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.18em;color:var(--muted)}
.svc-row h3{font-size:clamp(19px,2.4vw,25px);font-weight:900;color:var(--ink)}
.svc-row h3 small{display:block;font-family:var(--font-latin),sans-serif;font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.08em;margin-top:2px}
.svc-row p{font-size:14px;color:var(--ink2);margin-top:10px;max-width:640px}
.svc-row:hover h3{color:var(--navy)}
@media(max-width:800px){.svc-row{grid-template-columns:1fr;gap:18px}.svc-tile{height:110px}.svc-row .circ{display:none}}

/* cards（採用職種など） */
.cards{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:36px 30px;display:flex;flex-direction:column;transition:border-color .2s,transform .2s,box-shadow .2s}
.card:hover{border-color:var(--line2);transform:translateY(-3px);box-shadow:0 20px 44px -24px rgba(13,18,38,.18)}
.bg-alt .card{border-color:transparent}
.card-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.card-ico{width:52px;height:52px;border-radius:14px;background:var(--bg2);color:var(--navy);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.card-ico.on{background:var(--navy);color:#fff}
.card-num{font-family:var(--font-latin),sans-serif;font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.16em}
.card h3{font-size:17.5px;font-weight:800;line-height:1.6;color:var(--ink)}
.card p{font-size:14px;color:var(--ink2);margin-top:10px}
.card .card-link{margin-top:auto;padding-top:20px;font-size:13.5px;font-weight:800;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.card .card-link .ic{width:15px;height:15px;transition:transform .15s;color:var(--cyan)}
.card .card-link:hover .ic{transform:translateX(3px)}
.card-top3{border-top:0}
.tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.04em;border-radius:999px;padding:4px 12px;background:#EAF6FC;border:1px solid #C4E5F4;color:#1C7FA8;white-space:nowrap}
.tag.g{background:#F0F7E4;border-color:#D5E7AE;color:#4E7D22}
.tag.n{background:var(--bg2);border-color:var(--line2);color:var(--muted)}

/* 2カラム（文章＋図） */
.split{margin-top:48px;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.split.rev{grid-template-columns:.95fr 1.05fr}
.split.rev>:first-child{order:2}
@media(max-width:900px){.split,.split.rev{grid-template-columns:1fr;gap:32px}.split.rev>:first-child{order:0}}
.split h3{font-size:clamp(20px,2.4vw,26px);font-weight:800;line-height:1.6;color:var(--ink)}
.split p{margin-top:14px;color:var(--ink2);font-size:15px}
.figure{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px}
.figure img{display:block;width:100%}
.bg-alt .figure{border-color:transparent}

/* ステップ */
.steps{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;counter-reset:step}
.step{background:var(--bg2);border-radius:16px;padding:30px 26px}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--font-latin),sans-serif;font-size:15px;font-weight:600;color:var(--cyan);display:block;line-height:1;margin-bottom:14px;letter-spacing:.08em}
.step h3{font-size:15.5px;font-weight:800;margin-bottom:8px;color:var(--ink)}
.step p{font-size:13px;color:var(--ink2)}

/* Value（MVV）リスト */
.values{margin-top:48px;display:grid;gap:0;border-top:1px solid var(--line2)}
.value{display:grid;grid-template-columns:1fr;gap:24px;padding:34px 4px;border-bottom:1px solid var(--line2);align-items:start}
.value .vn{font-size:19px;font-weight:800;color:var(--cyan);line-height:1.85;letter-spacing:.1em}
.value h3{font-size:clamp(19px,2.2vw,24px);font-weight:900;line-height:1.5;color:var(--ink);letter-spacing:.06em}
.value h3 small{display:block;font-size:11px;font-weight:500;color:var(--muted);opacity:.8;letter-spacing:.18em;margin-top:8px;line-height:1}
.h2-yomi{display:block;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.18em;margin-top:12px}
.value p{font-size:14.5px;color:var(--ink2);margin-top:16px;max-width:820px}
@media(max-width:560px){.value{gap:14px}}

/* 定義リスト（会社概要） */
.dl{margin-top:40px;border-top:1px solid var(--line2)}
.dl div{display:grid;grid-template-columns:220px 1fr;gap:20px;padding:24px 4px;border-bottom:1px solid var(--line2);font-size:15px}
.dl dt{font-weight:800;color:var(--ink)}
.dl dd{color:var(--ink2)}
.dl dd a{color:var(--cyan);font-weight:700}
@media(max-width:640px){.dl div{grid-template-columns:1fr;gap:4px}}

/* 統計チップ */
.stat-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.stat{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line2);border-radius:999px;padding:10px 20px;font-size:13px;font-weight:700;color:var(--ink2)}
.stat .ic{width:15px;height:15px;color:var(--cyan)}
.stat b{color:var(--ink)}

/* バンド（採用など・濃紺で締める） */
.band{position:relative;background:var(--navy-d);background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:22px 22px;border-radius:22px;margin-top:64px;padding:64px 60px;display:flex;align-items:center;gap:40px;flex-wrap:wrap;color:#fff;overflow:hidden}
.band-ico{display:none}
.band-copy{position:relative;flex:1;min-width:260px}
.band-copy h3{font-size:clamp(22px,3vw,32px);font-weight:900;color:#fff;line-height:1.6}
.band-copy p{font-size:14px;color:rgba(255,255,255,.78);margin-top:14px;max-width:640px}
.band .btn{position:relative}
.band .sec-tag{color:rgba(255,255,255,.85);border-bottom-color:rgba(255,255,255,.25);margin-bottom:18px;padding-bottom:12px;font-size:15px}
@media(max-width:640px){.band{padding:40px 26px;border-radius:16px}}

/* ブログ/ニュース（日付＋タイトルの行） */
.posts{margin-top:44px;border-top:1px solid var(--line2)}
.post{display:grid;grid-template-columns:120px 1fr 34px;gap:24px;align-items:center;padding:26px 4px;border-bottom:1px solid var(--line2);text-decoration:none;transition:background .15s}
.post:hover{background:var(--bg2)}
.post time{font-family:var(--font-latin),sans-serif;font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.06em}
.post h3{font-size:15.5px;font-weight:700;line-height:1.7;color:var(--ink)}
.post p{display:none}
.post::after{content:"→";font-family:var(--font-latin),sans-serif;color:var(--cyan);font-weight:600;text-align:right}
@media(max-width:640px){.post{grid-template-columns:1fr 24px}.post time{grid-column:1}.post h3{grid-column:1}.post::after{grid-row:1 / span 2;grid-column:2}}

/* FAQ */
.faq{margin-top:44px;border-top:1px solid var(--line2)}
details{border-bottom:1px solid var(--line2);padding:0 4px}
summary{cursor:pointer;font-weight:700;font-size:15.5px;padding:24px 40px 24px 0;list-style:none;position:relative;color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
details p{padding:0 0 24px;font-size:14.5px;color:var(--ink2);max-width:720px}

/* 最終CTA（濃紺バンド） */
.final{position:relative;background:var(--navy-d);background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:22px 22px;color:#fff;padding:120px 0;text-align:center}
.final h2{font-size:clamp(23px,4vw,44px);color:#fff}
.final>.wrap>p{margin-top:18px;color:rgba(255,255,255,.78)}
.final-cta{margin-top:40px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media(max-width:560px){.final-cta .btn{width:100%}}

/* フォーム */
.form-panel{max-width:760px;margin:44px auto 0;background:#fff;border:1px solid var(--line);border-radius:20px;padding:44px 42px;text-align:left;color:var(--ink)}
.form{display:grid;gap:18px;margin-top:8px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:600px){.form-row{grid-template-columns:1fr}.form-panel{padding:28px 20px}}
.form label{font-size:13px;font-weight:700;display:block;color:var(--ink)}
.form label .req{font-size:10px;font-weight:800;color:#fff;background:#C24545;border-radius:4px;padding:1px 6px;margin-left:6px;vertical-align:1px}
.form input,.form select,.form textarea{width:100%;margin-top:8px;padding:14px 16px;border:1px solid var(--line2);border-radius:10px;font-size:15px;font-family:inherit;background:#fff;color:var(--ink)}
.form input::placeholder,.form textarea::placeholder{color:var(--muted)}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--cyan);outline-offset:-1px;border-color:transparent}
.form-note{font-size:12px;color:var(--muted)}
.form-note a{color:var(--cyan);font-weight:700}
.form-msg{font-size:14px;font-weight:700;display:none}
.form-msg.ng{display:block;color:#C22F2F}
.form .btn{width:100%}
.thanks{display:none;text-align:center;padding:24px 0 8px}
.thanks.show{display:block}
.thanks .big{font-size:22px;font-weight:800;color:var(--navy)}
.thanks p{font-size:14.5px;color:var(--ink2);margin-top:12px}
.thanks .btn{margin-top:22px;width:auto}

/* 規約・ポリシー本文 */
.legal{padding:56px 0 96px}
.legal h2{font-size:20px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line2)}
.legal h2:first-of-type{margin-top:0;border-top:0;padding-top:0}
.legal p,.legal li{font-size:14.5px;color:var(--ink2)}
.legal p{margin-top:12px}
.legal ol,.legal ul{margin:12px 0 0 22px}
.legal li+li{margin-top:6px}
.legal .date{font-size:13px;color:var(--muted);margin-top:24px}

/* footer */
footer.site{background:#fff;color:var(--ink);padding:80px 0 36px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr;gap:32px}}
.foot-brand .logo{color:var(--ink)}
.foot-brand p{margin-top:16px;font-size:13px;color:var(--ink2);max-width:380px}
.foot-col h4{font-family:var(--font-latin),sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--muted);margin-bottom:16px}
.foot-col ul{list-style:none;display:grid;gap:11px}
.foot-col a{font-size:13.5px;color:var(--ink2);text-decoration:none;transition:color .15s}
.foot-col a:hover{color:var(--ink)}
.copyright{margin-top:52px;padding-top:24px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* スクロール・リビール（控えめなフェードアップのみ） */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.rv-in{opacity:1;transform:none}
.rv-d1{transition-delay:.07s}.rv-d2{transition-delay:.14s}.rv-d3{transition-delay:.21s}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
}