@charset "UTF-8";
/* ==========================================================================
   page-care.css ── 安心の1対1ケアと健康チェック
   値は Figma の care_PC（544:28912）／care_SP（544:28330）のもの
   ========================================================================== */

/* ---- 1. 70 Items Health Check ---- */
.pw-ccheck { background: var(--pw-color-bg); }
.pw-ccheck__hero { position: relative; aspect-ratio: 1440 / 516; overflow: hidden; background: var(--pw-color-placeholder); }
.pw-ccheck__hero img { position: absolute; left: 0; top: -32.4%; width: 100%; height: 209.3%; max-width: none; object-fit: cover; }   /* 画像枠 1440×1080（y-167） */
.pw-ccheck__inner { width: min(920px, 100% - var(--pw-gutter) * 2); margin-inline: auto; padding: 56px 0; }
.pw-ccheck__heading { width: min(546px, 100%); margin-inline: auto; }
.pw-ccheck__body { padding: 32px 0; }
.pw-ccheck__photo { position: relative; aspect-ratio: 920 / 478; overflow: hidden; background: var(--pw-color-placeholder); }
.pw-ccheck__photo img { position: absolute; left: -2.17%; top: -18.8%; width: 104.6%; height: 133.9%; max-width: none; object-fit: cover; }   /* 画像枠 962×640（x-20 y-90） */
.pw-ccheck__ttl { margin-top: 40px; font-size: 18px; font-weight: 500; line-height: 32px; text-align: center; color: var(--pw-color-primary); }
.pw-ccheck__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.pw-ccheck__items li { display: flex; align-items: center; gap: 8px; min-height: 66px; padding: 4px 8px; background: var(--pw-color-white); border: 1px solid var(--pw-color-border); border-radius: 4px; font-size: 16px; line-height: 29px; }
.pw-ccheck__items img { flex: none; width: 31px; height: 28px; }
.pw-ccheck__msg { width: min(400px, 100%); margin: 40px auto 0; }
.pw-ccheck__msg-main { font-size: 20px; line-height: 36px; color: var(--pw-color-primary); }
.pw-ccheck__msg-note { font-size: 12px; line-height: 22px; text-align: center; }

/* ---- 2. Shampoo Technique ---- */
.pw-cshampoo { padding: 56px var(--pw-gutter); background: var(--pw-color-bg); }
.pw-cshampoo__heading { width: min(550px, 100%); margin-inline: auto; }
.pw-cshampoo__box { width: min(920px, 100%); margin: 48px auto 0; }
.pw-cshampoo__ttl { font-size: 20px; font-weight: 500; line-height: 36px; text-align: center; color: var(--pw-color-primary); }
.pw-cshampoo__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-top: 24px; }

/* ---- 3. Environment & Material ---- */
.pw-cenv { padding: 56px var(--pw-gutter); background: var(--pw-color-bg-green10); }
.pw-cenv__heading { width: min(404px, 100%); margin-inline: auto; }
.pw-cenv__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; width: min(1056px, 100%); margin: 40px auto 0; }
.pw-cenv__card { padding: 24px; background: var(--pw-color-white); border-radius: 4px; }
.pw-cenv__photo { position: relative; aspect-ratio: 293 / 334; overflow: hidden; background: var(--pw-color-placeholder); }
.pw-cenv__photo img { position: absolute; left: 0; top: -2.4%; width: 100%; height: 117%; max-width: none; object-fit: cover; }   /* 画像枠 293×391（y-8） */
.pw-cenv__ttl { margin-top: 8px; font-size: 18px; font-weight: 500; line-height: 32px; text-align: center; color: var(--pw-color-primary); }
.pw-cenv__desc { margin-top: 8px; font-size: 16px; line-height: 29px; }

/* ---- 4. Private Care ---- */
.pw-cprivate { padding: 56px var(--pw-gutter); background: var(--pw-color-bg); }
.pw-cprivate__heading { width: min(364px, 100%); margin-inline: auto; }
.pw-cprivate__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(920px, 100%); margin: 40px auto 0; }

/* ---- 5. 12 Steps（横送り） ---- */
.pw-csteps { padding: 80px 0 90px; background: var(--pw-color-bg); overflow: hidden; }
.pw-csteps__heading { width: min(364px, 100%); margin-inline: auto; }
.pw-csteps__heading .pw-lead { width: min(323px, 100%); white-space: normal; }   /* Figma はリードの箱が 323 で自然に2行 */
.pw-csteps__nav { display: flex; justify-content: flex-end; gap: 23px; width: min(var(--pw-content), 100% - var(--pw-gutter) * 2); margin: 40px auto 0; }
.pw-csteps__btn { display: grid; place-items: center; width: 48px; height: 24px; border-radius: 2px; background: var(--pw-color-primary); transition: background-color var(--pw-time-hover) var(--pw-ease-io); }
.pw-csteps__btn img { width: 10px; height: 6px; filter: brightness(0) invert(1); }
.pw-csteps__btn--prev img { rotate: 180deg; }
.pw-csteps__btn:disabled { background: var(--pw-color-bg-green50); cursor: default; }
@media (hover: hover) { .pw-csteps__btn:not(:disabled):hover { background: var(--pw-color-primary-dark); } }
.pw-csteps__viewport { margin-top: 32px; margin-left: max(var(--pw-gutter), calc(50% - 460px)); overflow: hidden; }
.pw-csteps__track { display: flex; align-items: stretch; gap: 22px; transition: translate .4s ease; }
.pw-cstep { display: flex; flex-direction: column; flex: none; width: 340px; }
.pw-cstep__badge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto -40px; border-radius: 50%; background: var(--pw-color-secondary); color: var(--pw-color-white); position: relative; z-index: 1; }
.pw-cstep__step { font-family: var(--pw-font-en); font-weight: 500; font-size: 14px; line-height: 25px; letter-spacing: .06em; }
.pw-cstep__no { margin-top: 0; font-family: var(--pw-font-en); font-weight: 500; font-size: 24px; line-height: 29px; }
.pw-cstep__card { flex: 1 1 auto; min-height: 334px; padding: 24px; background: var(--pw-color-white); border-radius: 4px; }   /* Figma はカードの高さ固定（説明が1行でも同じ高さ） */
.pw-cstep__photo { position: relative; aspect-ratio: 292 / 180; overflow: hidden; background: var(--pw-color-placeholder); }
.pw-cstep__photo img { position: absolute; left: -2.05%; top: -8.3%; width: 102.4%; height: 124.4%; max-width: none; object-fit: cover; }   /* 画像枠 299×224（x-6 y-15） */
.pw-cstep__ttl { margin-top: 8px; font-size: 18px; font-weight: 500; line-height: 32px; color: var(--pw-color-primary); }
.pw-cstep__desc { margin-top: 8px; font-size: 16px; line-height: 29px; }

/* ---- 6. Nurse's Eye（六角形に切り抜いた写真の上に文章） ---- */
.pw-cnurse { padding: 24px 0 72px; background: var(--pw-color-bg); }
.pw-cnurse__hex { position: relative; width: min(1318px, 100% - 122px); aspect-ratio: 1318 / 1056.5; margin-inline: auto; color: var(--pw-color-white); -webkit-mask: url(../img/care/nurse_mask_pc.svg) no-repeat center / 100% 100%; mask: url(../img/care/nurse_mask_pc.svg) no-repeat center / 100% 100%; }
.pw-cnurse__bg { position: absolute; inset: 0; overflow: hidden; }
.pw-cnurse__bg img { position: absolute; left: 0; top: -2.6%; width: 123.4%; height: 102.6%; max-width: none; object-fit: cover; }   /* 画像枠 1626×1084（y-27） */
.pw-cnurse__bg::after { content: ""; position: absolute; inset: 0; background: rgba(15, 25, 20, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pw-cnurse__inner { position: relative; width: min(612px, 100%); margin-inline: auto; padding-top: 238px; text-align: center; }
.pw-cnurse__text { margin-top: 40px; font-size: 18px; line-height: 32px; }
.pw-cnurse__note { margin-top: 32px; font-size: 12px; line-height: 22px; }

/* ==========================================================================
   タブレット（768〜1024px）
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
	.pw-ccheck__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pw-cenv__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pw-csteps__viewport { margin-left: var(--pw-gutter); }
	.pw-cnurse__inner { padding-top: 120px; }
	.pw-cnurse__text { font-size: 16px; line-height: 29px; }
}

/* ==========================================================================
   SP（767px 以下）
   ========================================================================== */
@media (max-width: 767px) {
	/* 1 */
	.pw-ccheck__hero { aspect-ratio: 375 / 420; }
	.pw-ccheck__hero img { left: -32%; top: -5%; width: 164.3%; height: 110%; }   /* 画像枠 616×462（x-120 y-21） */
	.pw-ccheck__inner { width: min(335px, 100% - 40px); padding: 40px 0 56px; }
	.pw-ccheck__heading { width: 100%; }
	.pw-ccheck__body { padding: 32px 0 0; }
	.pw-ccheck__photo { aspect-ratio: 335 / 232; }
	.pw-ccheck__photo img { left: -17.3%; top: -18.1%; width: 151.6%; height: 145.7%; }   /* 画像枠 508×338（x-58 y-42） */
	.pw-ccheck__ttl { margin-top: 16px; }
	.pw-ccheck__items { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.pw-ccheck__items li { min-height: 66px; }   /* Figma の SP は3つ目だけ 37（不揃い）。全部 66 にそろえる */
	.pw-ccheck__msg { width: 100%; margin-top: 16px; }
	.pw-ccheck__msg-main { font-size: 16px; line-height: 29px; }
	.pw-ccheck__msg-note { text-align: left; }

	/* 2 */
	.pw-cshampoo { padding: 56px 12px; }
	.pw-cshampoo__heading { width: min(335px, 100%); }
	.pw-cshampoo__box { margin-top: 32px; padding: 16px; }
	.pw-cshampoo__list { grid-template-columns: minmax(0, 1fr); gap: 8px; }

	/* 3 */
	.pw-cenv { padding: 56px 20px; }
	.pw-cenv__heading { width: 100%; }
	.pw-cenv__cards { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 24px; }
	.pw-cenv__photo { width: 100%; }   /* Figma は 293 固定（内側 287 より 6px 広い）だが、390・430px の実機で左に寄るのでカードの幅に合わせる（2026-10-01 指摘） */

	/* 4 */
	.pw-cprivate { padding: 56px 12px; }
	.pw-cprivate__cards { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }

	/* 5 */
	.pw-csteps { padding: 56px 0; }
	.pw-csteps__heading { width: min(323px, 100% - 52px); }
	.pw-csteps__nav { display: none; }
	.pw-csteps__viewport { margin: 32px 0 0; overflow: visible; }
	.pw-csteps__track { flex-direction: column; align-items: center; gap: 22px; translate: none !important; }
	.pw-cstep { width: 340px; max-width: 100%; }

	/* 6 */
	.pw-cnurse { padding: 32px 12px; }
	.pw-cnurse__hex { width: 100%; aspect-ratio: 351 / 740; -webkit-mask-image: url(../img/care/nurse_mask_sp.svg); mask-image: url(../img/care/nurse_mask_sp.svg); }
	.pw-cnurse__bg img { left: -83.8%; top: -.95%; width: 319.4%; height: 100.9%; }   /* 画像枠 1121×747（x-294 y-7） */
	.pw-cnurse__inner { width: 100%; padding-top: 36px; }
	.pw-cnurse__text { margin-top: 32px; }
}