:root { --pink:#f3135b; --yellow:#ffcc55; --ink:#111; }
* { box-sizing:border-box; }
html,body { margin:0; padding:0; background:#fff7f8; }
body { color:var(--ink); font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; }
.care-lp { width:min(100%,1024px); margin:0 auto; overflow:hidden; background:linear-gradient(135deg,#fff 0%,#fff6f8 52%,#fff 100%); }
.care-lp a { color:inherit; }

.hero { width:100%; height:578px; line-height:0; background:#fff; }
.hero img { display:block; width:100%; height:100%; object-fit:cover; }

.quick-points { position:relative; z-index:2; height:120px; margin:-20px 34px 22px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.quick-points article { height:120px; display:flex; align-items:center; justify-content:center; gap:12px; padding:13px 18px; border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(220,131,150,.18); }
.quick-points img { flex:none; object-fit:contain; }
.quick-points p { margin:0; font-size:20px; line-height:1.55; font-weight:700; }
.quick-points em { color:var(--pink); font-style:normal; font-weight:900; }

.jobs { height:474px; margin:0 29px; }
.jobs > h2 { width:432px; height:38px; margin:0; padding:7px 24px; border-radius:22px 22px 0 0; color:#fff; background:linear-gradient(90deg,#ed1b5d,#f43c74); font-size:20px; line-height:24px; letter-spacing:.06em; white-space:nowrap; }
.jobs-grid { height:436px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,214px); gap:8px; }
.job-card { min-width:0; height:214px; display:grid; align-items:stretch; padding:8px; overflow:hidden; border-radius:0 15px 15px 15px; background:#fff; box-shadow:0 4px 18px rgba(215,134,153,.15); }
.job-card:nth-child(n+2) { border-radius:15px; }
.job-wide-photo { grid-template-columns:260px minmax(0,1fr); }
.job-narrow-photo { grid-template-columns:249px minmax(0,1fr); }
.job-photo { display:block; width:100%; height:198px; border-radius:10px; object-fit:cover; }
.job-copy { min-width:0; display:flex; flex-direction:column; padding:14px 4px 3px 16px; }
.job-copy small { color:var(--pink); font-size:14px; font-weight:800; white-space:nowrap; }
.job-copy h3 { margin:19px 0 1px; font-size:20px; line-height:1.35; white-space:nowrap; }
.job-copy p { margin:0 0 12px; color:var(--pink); font-family:"Yu Mincho",serif; font-size:22px; line-height:1.3; font-weight:800; }
.job-copy a { min-height:40px; margin-top:auto; display:flex; align-items:center; justify-content:center; gap:14px; border-radius:24px; color:#fff; background:linear-gradient(#f9457d,#ed0b54); text-decoration:none; font-family:"Yu Mincho",serif; font-size:18px; font-weight:800; }
.job-copy a span { width:27px; height:27px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%; color:transparent; background:#fff; font-size:0; }
.job-copy a span::before { content:""; width:8px; height:8px; border-top:4px solid var(--pink); border-right:4px solid var(--pink); transform:translateX(-2px) rotate(45deg); }

.benefits { height:241px; margin:10px 29px 0; }
.section-title { height:43px; display:flex; align-items:center; gap:17px; }
.section-title > span { height:1px; flex:1; background:#f4b3c6; }
.section-title h2 { margin:0; color:var(--pink); font-size:22px; line-height:1.3; text-align:center; white-space:nowrap; letter-spacing:.06em; }
.benefit-grid { height:188px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.benefit-grid article { min-width:0; height:188px; padding:11px 7px 8px; border-radius:13px; text-align:center; background:#fff; box-shadow:0 6px 20px rgba(223,139,157,.14); }
.benefit-grid img { display:block; height:66px; width:auto; max-width:86px; margin:0 auto; object-fit:contain; }
.benefit-grid h3 { margin:5px 0 4px; color:var(--pink); font-size:14px; line-height:1.3; white-space:nowrap; }
.benefit-grid p { margin:0; font-size:12px; line-height:1.5; font-weight:700; }

.bonus-info { margin:42px 18px 0; padding:0 20px 25px; border:1px solid #ff6f9d; border-bottom:0; border-radius:22px 22px 0 0; background:linear-gradient(145deg,#fff 0%,#fff7f9 55%,#ffe4ec 100%); }
.bonus-info > h2 { position:relative; z-index:2; height:66px; margin:-31px 0 8px; line-height:0; text-align:center; }
.bonus-ribbon { display:inline-block; width:643px; max-width:70%; height:auto; transform:translateY(-15px); }
.bonus-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.bonus-card { min-width:0; min-height:205px; padding:14px 18px 13px; border-radius:17px; background:rgba(255,255,255,.92); box-shadow:0 7px 22px rgba(220,116,145,.12); }
.bonus-card-title { min-height:47px; display:flex; align-items:center; gap:9px; border-bottom:1px solid #f2bac9; }
.bonus-card-title img { width:43px; height:43px; flex:none; object-fit:contain; }
.bonus-card-title img.bonus-flow-icon { width:52px; }
.bonus-card h3 { margin:0; color:var(--pink); font-size:24px; line-height:1.35; font-weight:900; }
.bonus-card p { margin:12px 0 0; font-size:13px; line-height:1.65; font-weight:700; }
.bonus-role { margin-top:10px; display:grid; grid-template-columns:68px minmax(0,1fr); align-items:stretch; gap:0; }
.bonus-role strong { position:relative; z-index:1; min-height:58px; padding:7px 3px; display:flex; align-items:center; justify-content:center; border-radius:7px; color:#fff; background:linear-gradient(#fa3c76,#ed0c54); font-size:15px; line-height:1.25; text-align:center; }
.bonus-role strong::after { content:""; position:absolute; top:50%; right:-8px; width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:8px solid #f21c60; transform:translateY(-50%); }
.bonus-role p { min-height:58px; margin:0; padding:7px 10px 7px 16px; display:flex; align-items:center; border:1px solid #fbe2e9; border-left:0; border-radius:0 7px 7px 0; background:#fff; box-shadow:0 3px 8px rgba(220,116,145,.08); font-size:14px; line-height:1.45; }
.bonus-note { font-size:11px!important; line-height:1.55!important; font-weight:600!important; }
.bonus-period { margin:11px 0 0; }
.bonus-period div { margin-top:8px; display:grid; grid-template-columns:82px minmax(0,1fr); align-items:start; gap:10px; }
.bonus-period dt { padding:5px 4px; border-radius:5px; color:#fff; background:linear-gradient(90deg,#fa5f8c,#e92a65); font-size:12px; line-height:1.3; text-align:center; }
.bonus-period dd { margin:0; font-size:14px; line-height:1.55; font-weight:800; }
.bonus-card ul { margin:10px 0 0; padding-left:18px; }
.bonus-card li { margin-top:5px; font-size:11px; line-height:1.5; font-weight:700; }
.bonus-card li::marker { color:var(--pink); }

.apply-new { display:block; width:100%; margin:0; line-height:0; background:#f12667; }
.apply-new img { display:block; width:100%; height:auto; }

@media (hover:hover) { .job-copy a,.apply-new { transition:transform .2s,filter .2s; } .job-copy a:hover,.apply-new:hover { transform:translateY(-2px); filter:brightness(1.05); } }

@media (max-width:700px) {
  .care-lp { width:100%; }
  .hero { height:auto; aspect-ratio:1024/578; }
  .hero img { height:auto; object-fit:contain; }

  .quick-points { height:auto; margin:-8px 12px 16px; grid-template-columns:1fr; gap:8px; }
  .quick-points article { height:82px; justify-content:flex-start; gap:12px; padding:8px 20px; }
  .quick-points img { width:64px; height:68px; }
  .quick-points p { font-size:16px; }

  .jobs { height:auto; margin:0 10px; }
  .jobs > h2 { width:100%; height:auto; padding:8px 5px; border-radius:15px 15px 0 0; font-size:14px; line-height:1.4; text-align:center; }
  .jobs-grid { height:auto; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; gap:7px; }
  .job-card,.job-card:nth-child(n+2),.job-wide-photo,.job-narrow-photo { height:auto; display:block; padding:5px; border-radius:10px; }
  .job-photo { width:100%; height:auto; aspect-ratio:260/200; border-radius:7px; object-fit:cover; }
  .job-copy { min-height:138px; padding:7px 4px 3px; }
  .job-copy small { font-size:9px; }
  .job-copy h3 { margin:7px 0 1px; font-size:12px; white-space:normal; }
  .job-copy p { margin-bottom:6px; font-size:15px; }
  .job-copy a { min-height:31px; gap:5px; font-size:12px; }
  .job-copy a span { width:20px; height:20px; }
  .job-copy a span::before { width:6px; height:6px; border-width:3px; transform:translateX(-1px) rotate(45deg); }

  .benefits { height:auto; margin:12px 10px 0; }
  .section-title { height:auto; min-height:38px; gap:6px; }
  .section-title h2 { font-size:15px; white-space:normal; }
  .benefit-grid { height:auto; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; }
  .benefit-grid article { min-height:190px; height:auto; padding:10px 5px 9px; }
  .benefit-grid article:nth-child(-n+3) { grid-column:span 2; }
  .benefit-grid article:nth-child(n+4) { grid-column:span 3; }
  .benefit-grid img { height:50px; max-width:62px; }
  .benefit-grid h3 { min-height:38px; margin:6px 0 5px; display:flex; align-items:center; justify-content:center; font-size:clamp(11px,3vw,14px); line-height:1.4; white-space:normal; }
  .benefit-grid p { font-size:clamp(10px,2.7vw,12px); line-height:1.5; }

  .bonus-info { margin:30px 8px 0; padding:0 8px 10px; border-radius:15px 15px 0 0; }
  .bonus-info > h2 { height:auto; margin:-18px -2px 5px; }
  .bonus-ribbon { width:100%; max-width:560px; transform:translateY(-3px); }
  .bonus-grid { grid-template-columns:1fr; gap:8px; }
  .bonus-card { min-height:0; padding:11px 12px 12px; border-radius:12px; }
  .bonus-card-title { min-height:42px; gap:7px; }
  .bonus-card-title img { width:38px; height:38px; }
  .bonus-card-title img.bonus-flow-icon { width:45px; }
  .bonus-card h3 { font-size:21px; }
  .bonus-card p { margin-top:9px; font-size:12px; line-height:1.6; }
  .bonus-role { grid-template-columns:58px minmax(0,1fr); gap:0; }
  .bonus-role strong { min-height:54px; font-size:12px; }
  .bonus-role p { min-height:54px; padding:6px 6px 6px 13px; font-size:12px; }
  .bonus-note { font-size:10px!important; }
  .bonus-period div { grid-template-columns:70px minmax(0,1fr); gap:7px; }
  .bonus-period dt { font-size:10px; }
  .bonus-period dd { font-size:12px; }
  .bonus-card li { font-size:10px; }
  .apply-new { margin-top:0; }
}

@media (max-width:370px) {
  .job-copy h3 { font-size:11px; }
  .job-copy p { font-size:14px; }
}
