/* ========================================================= AI業務効率化研修 LP — 共通スタイル(トークン/リセット/共通パーツ) CDN依存ゼロ・自己完結。色や連絡先は :root と該当箇所を差し替え。 ========================================================= */ :root{ /* Brand colors (支給デザインから採取) */ --navy:#16244e; /* メインの濃紺 */ --navy-2:#20356f; /* やや明るい紺 */ --navy-deep:#0e1a3c; /* 最暗部 */ --yellow:#ffd400; /* アクセント黄(マーカー) */ --yellow-soft:#fff3bf; --red:#e60012; /* 強調赤(数字) */ --green:#1e9e46; /* チェック/削減率 */ --excel:#217346; /* Excelグリーン */ --purple:#5b4bc4; /* AIプロンプト */ --orange:#e5720b; /* 業務マニュアル */ --ink:#1b2333; /* 本文 */ --muted:#5c6676; /* 補助テキスト */ --bg:#ffffff; --bg-soft:#f3f6fb; /* 薄グレー背景 */ --cream:#fbf5e6; /* クリーム(資産ボックス) */ --line:#e2e8f2; /* 罫線 */ --card:#ffffff; --radius:16px; --radius-sm:10px; --shadow-sm:0 2px 10px rgba(16,26,60,.06); --shadow:0 12px 34px rgba(16,26,60,.12); --maxw:1120px; --pad:clamp(20px,5vw,40px); --font: "Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,system-ui,-apple-system,"Segoe UI",sans-serif; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;font-family:var(--font);color:var(--ink);background:var(--bg); line-height:1.75;font-feature-settings:"palt"; text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4,p{margin:0} strong{font-weight:800} /* Layout */ .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} .section{padding-block:clamp(56px,9vw,110px)} .section--soft{background:var(--bg-soft)} .center{text-align:center} /* Eyebrow / labels */ .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-weight:800;letter-spacing:.06em;font-size:.82rem; color:var(--navy);background:var(--yellow); padding:7px 16px;border-radius:999px; } .eyebrow--ghost{background:transparent;color:var(--red);border:2px solid currentColor} /* Section heading */ .shead{max-width:820px;margin-inline:auto;margin-bottom:clamp(28px,5vw,52px)} .shead .lead{color:var(--muted);margin-top:14px;font-size:clamp(1rem,1.4vw,1.12rem)} .h2{ font-weight:900;letter-spacing:.01em;line-height:1.3; font-size:clamp(1.6rem,4.4vw,2.6rem);color:var(--navy); } .h2 .mark{ background:linear-gradient(transparent 60%, var(--yellow) 60%); padding:0 .06em; } .h2 .accent{color:var(--red)} /* Buttons */ .btn{ --c:#fff; display:inline-flex;align-items:center;justify-content:center;gap:10px; font-weight:800;font-size:1.02rem;line-height:1; padding:17px 30px;border-radius:999px;cursor:pointer;border:0; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; white-space:nowrap; } .btn svg{width:20px;height:20px} .btn--primary{background:var(--red);color:#fff;box-shadow:0 10px 24px rgba(230,0,18,.28)} .btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(230,0,18,.36)} .btn--navy{background:var(--navy);color:#fff;box-shadow:0 10px 24px rgba(22,36,78,.26)} .btn--navy:hover{transform:translateY(-2px)} .btn--ghost{background:#fff;color:var(--navy);border:2px solid var(--line)} .btn--ghost:hover{border-color:var(--navy);transform:translateY(-2px)} .btn--lg{padding:20px 40px;font-size:1.12rem} .btn--block{display:flex;width:100%} /* 〜480px: 長いラベルの大型CTAは nowrap のままだと画面幅を超える(横スクロールの原因)。 iPhone SE/8(375px)・小型Android(360px)で実測。 */ @media (max-width:480px){ .btn--lg{white-space:normal;padding:16px 20px;font-size:1rem;line-height:1.5} } /* Trust chips */ .chips{display:flex;flex-wrap:wrap;gap:10px 14px;justify-content:center} .chip{ display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.92rem;color:var(--navy); } .chip svg{width:18px;height:18px;color:var(--green);flex:none} /* Header */ .site-header{ position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92); backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line); } .site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px} .brand{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--navy);font-size:1.08rem} .brand .badge-ai{ background:var(--navy);color:#fff;font-weight:900;border-radius:8px; padding:4px 9px;letter-spacing:.02em;font-size:.9rem; } /* CTAボタンは