/* chuman.info — 白×コーラル×スプリングアクア（イエベ春） 確定デザイン */
:root {
  --white:#ffffff; --bg:#fdfefe; --mist:#f3fafc;
  --coral:#f08575; --coral-deep:#d75f4e; --coral-soft:#ffe3db; --coral-mist:#fdf3ef;
  --aqua:#79c7d6; --aqua-soft:#e3f5f9; --aqua-deep:#3d9cb0;
  --sun:#f7cf6f; --sun-deep:#c39322;
  --ink:#54504c; --ink-soft:#a39c96; --line:#f6e8e3;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Zen Maru Gothic',sans-serif; background:var(--bg); color:var(--ink); }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; }

/* ===== ナビ ===== */
.nav { display:flex; align-items:center; justify-content:space-between; padding:20px 44px; border-bottom:1.5px solid var(--line); background:var(--white); position:relative; z-index:6; }
.nav.overlay { position:absolute; top:0; left:0; right:0; border-bottom:none; background:transparent; padding:24px 44px; }
.logo { font-family:'Quicksand'; font-weight:700; font-size:19px; letter-spacing:.08em; color:var(--ink); }
.logo i { font-style:normal; color:var(--coral-deep); }
.menu { display:flex; gap:6px; font-size:12.5px; font-weight:700; }
.menu a { padding:8px 16px; border-radius:99px; }
.nav.overlay .menu a { background:rgba(255,255,255,.75); backdrop-filter:blur(6px); }
.menu a.on { background:var(--coral-mist); color:var(--coral-deep); }
.menu a.cta, .nav.overlay .menu a.cta { background:var(--coral); color:#fff; box-shadow:0 4px 14px rgba(216,110,95,.28); }
.burger { display:none; width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.88); backdrop-filter:blur(6px); border:none; cursor:pointer; box-shadow:0 4px 12px rgba(90,110,120,.12); }
.burger span { display:block; width:18px; height:2px; background:var(--ink); margin:4px auto; border-radius:2px; transition:.3s; }
.burger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.mnav { display:none; position:absolute; top:0; left:0; right:0; z-index:5; background:rgba(255,255,255,.97); backdrop-filter:blur(10px); border-radius:0 0 12px 12px; padding:86px 30px 24px; box-shadow:0 18px 44px rgba(90,110,120,.2); transform:translateY(-105%); transition:transform .35s ease; }
.mnav.open { transform:translateY(0); }
.mnav a { display:block; padding:13px 4px; font-size:14px; font-weight:700; color:var(--ink); border-bottom:1px solid var(--line); }
.mnav a.cta { margin-top:16px; text-align:center; background:var(--coral); color:#fff; border-radius:99px; border:none; padding:13px; box-shadow:0 4px 14px rgba(216,110,95,.28); }

/* ===== トップ：ヒーロー ===== */
.hero { position:relative; height:520px; overflow:hidden; }
.hero .photo { position:absolute; inset:0; background-position:center 30%; background-size:cover; background-repeat:no-repeat;
  background-color:#dfeef3; background-image:linear-gradient(165deg, #c9ecf4 0%, #eef9fb 26%, #ffe6dc 52%, #ffc9ba 100%); }
.hero .veil { position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.4) 0%, transparent 26%); }
.hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg, var(--coral) 0 38%, var(--sun) 38% 62%, var(--aqua) 62%); z-index:3; }
.hero-text { position:absolute; left:44px; bottom:34px; z-index:2; text-shadow:0 0 12px rgba(255,255,255,.95), 0 0 26px rgba(255,255,255,.85), 0 1px 3px rgba(255,255,255,.9); }
.hero-text .en { font-family:'Quicksand'; font-weight:600; font-size:10.5px; letter-spacing:.45em; color:var(--ink-soft); }
.hero-text h1 { font-size:32px; font-weight:700; letter-spacing:.3em; color:var(--ink); line-height:1.3; margin-top:6px; }
.hero-text h1 small { font-family:'Quicksand'; font-size:12px; font-weight:600; letter-spacing:.3em; color:var(--ink-soft); margin-left:10px; }
.hero-text .catch { margin-top:8px; font-size:13px; font-weight:500; color:var(--ink); display:inline-block; }

/* ===== トップ：プロフィール ===== */
.intro { max-width:820px; margin:0 auto; padding:46px 40px 8px; text-align:center; }
.intro .role { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.intro .role span { background:var(--white); border:1.5px solid var(--line); border-radius:99px; padding:7px 16px; font-size:12px; font-weight:700; }
.intro .role span:nth-child(2) { border-color:#ffe9b8; }
.intro .role span:nth-child(3) { border-color:#d5eef4; }
.intro p { margin-top:20px; font-size:13.5px; line-height:2.2; color:var(--ink-soft); }
.sns { display:flex; gap:10px; justify-content:center; margin-top:20px; flex-wrap:wrap; }
.sns a { display:flex; align-items:center; gap:7px; color:#fff; font-size:12px; font-weight:700; padding:9px 18px; border-radius:99px; box-shadow:0 3px 10px rgba(0,0,0,.12); }
.sns a.sns-yt { background:#ff0000; }
.sns a.sns-ig { background:linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); }
.sns a.sns-x { background:#0f1419; }
.sns a.sns-note { background:#fff; color:#141414; border:1.5px solid #d9d9d9; }
.sns a.sns-ss { background:#ff6719; }

/* ===== セクション共通 ===== */
.sec { padding:44px 44px 10px; max-width:980px; margin:0 auto; }
.sec-head { text-align:center; margin-bottom:24px; }
.sec-head .en { font-family:'Quicksand'; font-weight:700; font-size:12px; letter-spacing:.4em; color:var(--coral-deep); }
.sec-head h2 { font-size:21px; font-weight:900; margin-top:4px; }
.sec-head .bar { width:44px; height:4px; border-radius:99px; background:linear-gradient(90deg, var(--coral) 0 40%, var(--sun) 40% 70%, var(--aqua) 70%); margin:12px auto 0; }
.more { display:block; text-align:center; margin-top:18px; font-size:12.5px; font-weight:700; color:var(--coral-deep); }

/* ===== トップ：YouTube ===== */
.videos { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.video { background:var(--white); border-radius:6px; overflow:hidden; border:1.5px solid var(--line); }
.thumb { height:112px; background:linear-gradient(135deg, #ffe4db, var(--coral-soft) 45%, var(--aqua-soft)); background-size:cover; background-position:center; position:relative; }
.thumb::after { content:"▶"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; text-shadow:0 2px 8px rgba(80,140,155,.5); }
.video h4 { padding:14px 16px 4px; font-size:12.5px; line-height:1.7; font-weight:700; }
.video time { display:block; padding:0 16px 15px; font-family:'Quicksand'; font-size:10.5px; color:var(--ink-soft); }

/* ===== トップ：note ===== */
.notes { max-width:660px; margin:0 auto; }
.nrow { display:flex; align-items:center; gap:14px; background:var(--white); border:1.5px solid var(--line); border-radius:6px; padding:15px 20px; margin-bottom:10px; }
.nrow .nd { width:64px; height:46px; border-radius:3px; background:linear-gradient(135deg, #f2f2f2, #e0e0e0); background-size:cover; background-position:center; flex-shrink:0; position:relative; }
.nrow .nd::after { content:"note"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Quicksand'; font-size:10px; font-weight:700; color:#141414; }
.nrow .nd[style]::after { display:none; }
.nrow h4 { font-size:13px; font-weight:700; line-height:1.7; flex:1; }
.nrow time { font-family:'Quicksand'; font-size:10.5px; color:var(--ink-soft); white-space:nowrap; }
.nrow .arr { color:var(--coral-deep); font-weight:900; flex-shrink:0; }
.notecap { text-align:center; margin-top:14px; font-size:11px; color:var(--ink-soft); }
.notewrap { background:var(--coral-mist); margin-top:44px; padding:44px 24px 50px; }
.notewrap .nrow { border-color:#f8ded4; }

/* ===== トップ：ブログ帯・カード ===== */
.blogwrap { background:var(--coral-mist); margin-top:44px; padding:44px 0 50px; }
.blogcards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:892px; margin:0 auto; padding:0 44px; }
.bcard { background:var(--white); border-radius:6px; overflow:hidden; border:1.5px solid #f8ded4; display:block; }
.bcard .bth { height:104px; background:linear-gradient(135deg, var(--aqua-soft), var(--coral-soft)); background-size:cover; background-position:center; }
.bcard:nth-child(2) .bth.ph { background:linear-gradient(135deg, var(--coral-soft), #fff6da); }
.bcard:nth-child(3) .bth.ph { background:linear-gradient(135deg, #fff6da, var(--aqua-soft)); }
.bcard .cat { display:block; padding:14px 18px 0; font-family:'Quicksand'; font-size:10px; font-weight:700; letter-spacing:.25em; color:var(--coral-deep); }
.bcard:nth-child(2) .cat { color:var(--aqua-deep); }
.bcard:nth-child(3) .cat { color:var(--sun-deep); }
.bcard h4 { margin-top:6px; padding:0 18px; font-size:13px; line-height:1.8; font-weight:700; }
.bcard time { display:block; margin-top:10px; padding:0 18px 16px; font-family:'Quicksand'; font-size:10.5px; color:var(--ink-soft); }
.since { text-align:center; margin-top:20px; font-size:11.5px; color:var(--ink-soft); }

/* ===== トップ：お仕事 ===== */
.work { max-width:892px; margin:48px auto 0; padding:0 44px; }
.work-in { border-radius:8px; background:var(--white); border:2px solid var(--coral-soft); padding:34px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; position:relative; overflow:hidden; }
.work-in::before { content:""; position:absolute; width:200px; height:200px; border-radius:50%; background:var(--coral-soft); right:-70px; top:-70px; opacity:.55; }
.work-in::after { content:""; position:absolute; width:110px; height:110px; border-radius:50%; background:var(--aqua-soft); right:70px; top:-60px; opacity:.8; }
.work-in .sundot { position:absolute; width:34px; height:34px; border-radius:50%; background:var(--sun); right:150px; top:26px; opacity:.75; }
.work h2 { font-size:19px; font-weight:900; }
.work p { margin-top:8px; font-size:12.5px; line-height:1.9; color:var(--ink-soft); }
.work .btn { position:relative; background:var(--coral); color:#fff; font-weight:900; font-size:13px; padding:14px 30px; border-radius:99px; white-space:nowrap; box-shadow:0 6px 18px rgba(216,110,95,.28); }

/* ===== フッター ===== */
.foot { text-align:center; padding:44px 0 34px; font-family:'Quicksand'; font-size:11px; color:var(--ink-soft); letter-spacing:.15em; }
.foot .dots { margin-bottom:10px; }
.foot .dots i { display:inline-block; width:7px; height:7px; border-radius:50%; margin:0 3px; }
.foot .dots i:nth-child(1){ background:var(--coral); } .foot .dots i:nth-child(2){ background:var(--sun); } .foot .dots i:nth-child(3){ background:var(--aqua); }

/* ===== トップへ戻る ===== */
.totop { position:fixed; right:22px; bottom:22px; width:48px; height:48px; border-radius:50%; background:var(--coral); border:none; cursor:pointer; box-shadow:0 8px 22px rgba(216,110,95,.35); opacity:0; pointer-events:none; transform:translateY(12px); transition:.3s; z-index:50; }
.totop.show { opacity:1; pointer-events:auto; transform:none; }
.totop .chev { display:block; width:13px; height:13px; border-top:3px solid #fff; border-left:3px solid #fff; border-radius:3px 2px 2px 2px; transform:rotate(45deg); margin:8px auto 0; }

/* ===== 記事ページ ===== */
.art-head { max-width:680px; margin:0 auto; padding:44px 24px 0; }
.crumb { font-family:'Quicksand'; font-size:11px; color:var(--ink-soft); letter-spacing:.1em; }
.crumb b { color:var(--coral-deep); font-weight:700; }
.art-head .cat { display:inline-block; margin-top:16px; font-family:'Quicksand'; font-size:10.5px; font-weight:700; letter-spacing:.25em; color:var(--coral-deep); background:var(--coral-mist); border-radius:99px; padding:5px 14px; }
.art-head h1 { margin-top:14px; font-size:27px; font-weight:900; line-height:1.7; }
.art-meta { display:flex; gap:16px; margin-top:14px; font-family:'Quicksand'; font-size:11.5px; color:var(--ink-soft); flex-wrap:wrap; }
.art-eyecatch { max-width:760px; margin:26px auto 0; padding:0 24px; }
.art-eyecatch .ec { height:300px; border-radius:6px; background:linear-gradient(150deg, #c9ecf4, #eef9fb 40%, #ffe6dc 75%, #ffc9ba); background-size:cover; background-position:center; }

.art-body { max-width:680px; margin:0 auto; padding:34px 24px 10px; font-size:14.5px; line-height:2.3; overflow-wrap:break-word; }
.art-body p { margin-bottom:26px; }
.art-body h2 { font-size:18px; font-weight:900; margin:42px 0 20px; padding:13px 20px; border-radius:6px; background:linear-gradient(100deg, var(--coral), #f5a294); color:#fff; box-shadow:0 5px 14px rgba(216,110,95,.2); }
.art-body h3 { font-size:16.5px; font-weight:900; margin:34px 0 14px; padding:2px 0 2px 12px; border-left:4px solid var(--coral); }
.art-body h4 { font-size:15px; font-weight:900; margin:28px 0 12px; }
.art-body a { color:var(--aqua-deep); font-weight:700; text-decoration:underline; text-decoration-color:var(--aqua); text-underline-offset:4px; }
/* 下線(<u>)＝薄い黄色マーカー。microCMSで下線を引くとこの見た目になる */
.art-body mark, .art-body .marker, .art-body u { text-decoration:none; background:linear-gradient(transparent 55%, #fff0ae 55% 94%, transparent 94%); font-weight:inherit; color:inherit; }
.art-body blockquote { background:var(--mist); border-left:5px solid var(--aqua); border-radius:0 6px 6px 0; padding:18px 22px; margin:0 0 26px; font-size:13.5px; color:#6b7a80; }
.art-body img { border-radius:3px; margin:0 auto; display:block; }
.art-body figure { margin:0 0 26px; }
.art-body figcaption { text-align:center; font-size:11px; color:var(--ink-soft); margin-top:8px; }
.art-body ul, .art-body ol { margin:0 0 26px 4px; list-style:none; }
.art-body ul li { padding-left:22px; position:relative; margin-bottom:8px; }
.art-body ul li::before { content:""; position:absolute; left:2px; top:11px; width:8px; height:8px; border-radius:50%; background:var(--coral); }
.art-body ol { counter-reset:oli; }
.art-body ol li { padding-left:30px; position:relative; margin-bottom:8px; counter-increment:oli; }
.art-body ol li::before { content:counter(oli); position:absolute; left:0; top:4px; width:20px; height:20px; border-radius:50%; background:var(--coral); color:#fff; font-family:'Quicksand'; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.art-body table { border-collapse:collapse; margin:0 0 26px; width:100%; font-size:13px; }
.art-body th, .art-body td { border:1.5px solid var(--line); padding:9px 12px; }
.art-body th { background:var(--coral-mist); font-weight:700; }
.yt { position:relative; padding-top:56.25%; margin:0 0 26px; border-radius:6px; overflow:hidden; }
.yt iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.toc { border:2px solid var(--coral-soft); border-radius:6px; padding:22px 24px 16px; margin:0 0 34px; position:relative; background:var(--white); }
.toc .toc-label { position:absolute; top:-13px; left:18px; background:var(--white); color:var(--coral-deep); border:2px solid var(--coral); font-size:11px; font-weight:900; border-radius:99px; padding:2px 13px; }
.art-body .toc ol { list-style:none; margin:0; counter-reset:toc; }
.art-body .toc li { position:static; margin:0; }
.art-body .toc li::before { content:none; }
.art-body .toc li.toc-h2 { counter-increment:toc; padding:5px 0; font-size:13px; font-weight:700; }
.art-body .toc li.toc-h2::before { content:counter(toc) ". "; position:static; display:inline; width:auto; height:auto; background:none; border-radius:0; color:var(--coral-deep); font-family:'Quicksand'; font-size:12px; }
.art-body .toc li.toc-h3 { padding:3px 0 3px 22px; font-size:12px; font-weight:500; }
.art-body .toc li.toc-h3::before { content:"− "; position:static; display:inline; width:auto; height:auto; background:none; color:var(--ink-soft); }
.art-body .toc a { color:var(--ink); text-decoration:none; }
.art-body .toc a:hover { color:var(--coral-deep); }

.pointbox { border:2px solid var(--coral-soft); border-radius:6px; padding:20px 22px; margin:34px 0 26px; position:relative; background:var(--white); }
.pointbox .pb-label { position:absolute; top:-13px; left:18px; background:var(--white); color:var(--coral-deep); border:2px solid var(--coral); font-size:11px; font-weight:900; border-radius:99px; padding:2px 13px; }
.pointbox p:last-child { margin-bottom:0; }

.linkcard { display:flex; align-items:center; gap:14px; border:2px solid var(--coral-soft); background:var(--white); border-radius:6px; padding:26px 18px 16px; margin:34px 0 26px; position:relative; box-shadow:0 5px 16px rgba(255,138,122,.14); }
.linkcard .lc-label { position:absolute; top:-13px; left:16px; background:var(--white); color:var(--coral-deep); border:2px solid var(--coral); font-size:10.5px; font-weight:900; border-radius:99px; padding:2px 13px; letter-spacing:.05em; }
.linkcard .lc-thumb { width:78px; height:58px; border-radius:3px; background:linear-gradient(135deg, var(--aqua-soft), var(--coral-soft)); background-size:cover; background-position:center; flex-shrink:0; }
.linkcard .lc-cat { font-family:'Quicksand'; font-size:9.5px; font-weight:700; letter-spacing:.25em; color:var(--coral-deep); }
.linkcard h5 { margin-top:4px; font-size:13.5px; font-weight:900; line-height:1.7; }
.linkcard .lc-arrow { margin-left:auto; color:var(--coral); font-weight:900; font-size:18px; flex-shrink:0; }

.share { max-width:680px; margin:0 auto; padding:10px 24px 6px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.share span { font-family:'Quicksand'; font-size:11px; font-weight:700; color:var(--ink-soft); letter-spacing:.15em; margin-right:4px; }
.share a { font-size:11.5px; font-weight:700; border:1.5px solid var(--line); border-radius:99px; padding:7px 16px; background:var(--white); }

.author { max-width:680px; margin:26px auto 0; padding:0 24px; }
.author-in { background:var(--coral-mist); border-radius:6px; padding:22px 24px; display:flex; gap:18px; align-items:center; }
.author .face { width:64px; height:64px; border-radius:46% 54% 52% 48% / 50% 46% 54% 50%; background:linear-gradient(140deg, var(--coral), var(--sun)); background-size:cover; background-position:center; flex-shrink:0; border:3px solid #fff; }
.author h4 { font-size:14px; font-weight:900; }
.author h4 small { font-family:'Quicksand'; font-size:10px; color:var(--ink-soft); margin-left:8px; letter-spacing:.2em; }
.author p { margin-top:6px; font-size:12px; line-height:1.9; color:#8a7d76; }
.author p a { color:var(--coral-deep); font-weight:700; }

.related { max-width:892px; margin:0 auto; padding:40px 24px 20px; }
.rel-head { text-align:center; margin-bottom:20px; }
.rel-head .en { font-family:'Quicksand'; font-weight:700; font-size:11px; letter-spacing:.4em; color:var(--coral-deep); }
.rel-head h2 { font-size:17px; font-weight:900; margin-top:2px; }
.bcards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.prevnext { max-width:680px; margin:6px auto 0; padding:0 24px 8px; display:flex; justify-content:space-between; font-size:12px; font-weight:700; color:var(--coral-deep); gap:16px; }

/* ===== ブログ一覧 ===== */
.list-hero { text-align:center; padding:44px 24px 8px; }
.list-hero .en { font-family:'Quicksand'; font-weight:700; font-size:12px; letter-spacing:.4em; color:var(--coral-deep); }
.list-hero h1 { font-size:24px; font-weight:900; margin-top:4px; }
.list-hero .bar { width:44px; height:4px; border-radius:99px; background:linear-gradient(90deg, var(--coral) 0 40%, var(--sun) 40% 70%, var(--aqua) 70%); margin:14px auto 0; }
.list-hero p { margin-top:14px; font-size:12.5px; color:var(--ink-soft); }
.filters { display:flex; gap:8px; justify-content:center; padding:20px 24px 8px; flex-wrap:wrap; }
.filters button { font-family:inherit; cursor:pointer; font-size:12px; font-weight:700; border:1.5px solid var(--line); background:var(--white); color:var(--ink); border-radius:99px; padding:8px 18px; }
.filters button.on { background:var(--coral); border-color:var(--coral); color:#fff; box-shadow:0 4px 12px rgba(216,110,95,.25); }
.listgrid { max-width:920px; margin:0 auto; padding:22px 24px 10px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.lcard { background:var(--white); border-radius:6px; overflow:hidden; border:1.5px solid var(--line); display:block; }
.lcard .th { height:120px; background:linear-gradient(135deg, var(--aqua-soft), var(--coral-soft)); background-size:cover; background-position:center; position:relative; }
/* 画像なし記事のカテゴリ別プレースホルダー */
.phx { display:flex; align-items:center; justify-content:center; }
.phx::before { font-size:28px; opacity:.55; }
.phx.g-travel { background:linear-gradient(135deg, #dff2f7, #ffe6dc) !important; } .phx.g-travel::before { content:"🚞"; }
.phx.g-books { background:linear-gradient(135deg, #ffe6dc, #fff6da) !important; } .phx.g-books::before { content:"📚"; }
.phx.g-work { background:linear-gradient(135deg, #fff6da, #e3f5f9) !important; } .phx.g-work::before { content:"💼"; }
.phx.g-diary { background:linear-gradient(135deg, #fdf3ef, #e9f7ef) !important; } .phx.g-diary::before { content:"☕"; }
.bcard .bth.phx::before { font-size:24px; }
.lcard .th b { position:absolute; left:12px; bottom:10px; font-family:'Quicksand'; font-size:9.5px; font-weight:700; letter-spacing:.2em; background:rgba(255,255,255,.9); color:var(--coral-deep); border-radius:99px; padding:4px 12px; }
.lcard h4 { padding:14px 16px 4px; font-size:12.5px; line-height:1.75; font-weight:700; }
.lcard time { display:block; padding:0 16px 15px; font-family:'Quicksand'; font-size:10.5px; color:var(--ink-soft); }

/* ===== お仕事のご相談 ===== */
.wk-hero { text-align:center; padding:46px 24px 6px; }
.wk-hero .en { font-family:'Quicksand'; font-weight:700; font-size:12px; letter-spacing:.4em; color:var(--coral-deep); }
.wk-hero h1 { font-size:24px; font-weight:900; margin-top:4px; }
.wk-hero .bar { width:44px; height:4px; border-radius:99px; background:linear-gradient(90deg, var(--coral) 0 40%, var(--sun) 40% 70%, var(--aqua) 70%); margin:14px auto 0; }
.wk-hero p { margin-top:16px; font-size:13px; line-height:2.1; color:var(--ink-soft); }
.services { max-width:920px; margin:0 auto; padding:26px 24px 6px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.svc { background:var(--white); border-radius:6px; border:1.5px solid var(--line); padding:20px 16px; text-align:center; }
.svc .em { font-size:26px; }
.svc h4 { margin-top:10px; font-size:13px; font-weight:900; }
.svc p { margin-top:8px; font-size:11px; line-height:1.9; color:var(--ink-soft); }
.svc:nth-child(1){ border-top:4px solid var(--coral); } .svc:nth-child(2){ border-top:4px solid var(--sun); }
.svc:nth-child(3){ border-top:4px solid var(--aqua); } .svc:nth-child(4){ border-top:4px solid var(--coral); }
.wk-note { max-width:640px; margin:20px auto 0; padding:0 24px; }
.wk-note .pointbox p { font-size:12.5px; line-height:2; }
.contact-cta { text-align:center; margin:30px auto 10px; padding:0 24px; }
.contact-cta a { display:inline-block; background:var(--coral); color:#fff; font-weight:900; font-size:13.5px; padding:15px 46px; border-radius:99px; box-shadow:0 6px 18px rgba(216,110,95,.28); }
.contact-cta p { margin-top:12px; font-size:11.5px; color:var(--ink-soft); }
.art-body .svc p { margin-bottom:0; }
.cform .row { margin-bottom:16px; }
.cform label { display:block; font-size:12px; font-weight:900; margin-bottom:7px; }
.cform label i { font-style:normal; font-size:9.5px; background:var(--coral); color:#fff; border-radius:99px; padding:2px 9px; margin-left:8px; vertical-align:1px; }
.cform input, .cform select, .cform textarea { width:100%; font-family:inherit; font-size:13px; color:var(--ink); background:var(--white); border:1.5px solid var(--line); border-radius:6px; padding:12px 14px; }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline:none; border-color:var(--coral); }
.cform textarea { resize:vertical; line-height:1.9; }
.cform .hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.cform .send { text-align:center; margin-top:22px; }
.cform button { font-family:inherit; cursor:pointer; border:none; background:var(--coral); color:#fff; font-weight:900; font-size:13.5px; padding:15px 46px; border-radius:99px; box-shadow:0 6px 18px rgba(216,110,95,.28); }
.cform button:disabled { opacity:.6; cursor:default; }
.form-status { text-align:center; margin-top:14px; font-size:12.5px; min-height:1.5em; }
.form-status.ok { color:#3d9b6a; font-weight:700; }
.form-status.err { color:var(--coral-deep); font-weight:700; }

/* ===== レスポンシブ ===== */
@media (max-width:760px){
  .menu { display:none; }
  .burger { display:block; }
  .mnav { display:block; }
  .nav, .nav.overlay { padding:18px 22px; }
  .hero { height:430px; }
  .hero-text { left:22px; right:22px; bottom:26px; }
  .hero-text h1 { font-size:25px; letter-spacing:.22em; }
  .sec { padding:34px 22px 6px; }
  .videos, .blogcards, .bcards, .listgrid { grid-template-columns:1fr; }
  .blogcards { padding:0 22px; }
  .work { padding:0 22px; }
  .work-in { padding:26px 24px; }
  .nrow time { display:none; }
  .services { grid-template-columns:repeat(2,1fr); }
  .art-head h1 { font-size:21px; }
  .art-eyecatch .ec { height:200px; }
}