/* ==========================================================================
page-guide.css
Layout: Mobile-first with range media queries
Breakpoints: 640px (sm) / 768px (md) / 1024px (lg)
========================================================================== */

/* ---- Base (structural / shared — no sizing) ---- */
.guide-card { background: #ffffff; border-radius: 10px; position: relative; border: 1px solid var(--theme-color-grey); }
.guide-head { display: flex; align-items: center; position: relative; }
.guide-splash { position: absolute; aspect-ratio: 1 / 1; }
.guide-splash img { width: 100%; height: 100%; object-fit: contain; display: block; }
.guide-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; color: var(--theme-color-blue); }
.guide-title { margin: 0; font-weight: 900; letter-spacing: .02em; color: var(--theme-color-blue); }
.guide-hero { border: 1px solid var(--theme-color-grey); border-radius: 10px; overflow: hidden; }
.guide-hero img { width: 100%; object-fit: cover; display: block; }
.guide-body { color: #000; }
.guide-body p { margin: 0 0 16px; }

/* 01 */
.guide-grid { display: grid; }
.gcard { display: block; border-radius: 12px; overflow: hidden; position: relative; border: 1px solid var(--theme-color-grey); }
.gcard-img { width: 100%; object-fit: cover; display: block; }
.gcard-label { position: absolute; left: 0; top: 0; width: 100%; height: 68px; z-index: 2; }
.gcard-label-bg { position: absolute; left: 0; top: 0; object-fit: cover; display: block; z-index: 1; }
.gcard-label-title { position: relative; z-index: 2; margin: 0; color: var(--theme-color-yellow); letter-spacing: .02em; }
.guide-foot { line-height: 1.7; color: #000; }
.guide-foot p { margin: 0 0 16px; }

/* 02 */
.contact-grid { display: grid; }
.contact-card { display: grid; grid-template-rows: auto auto auto; width: 100%; }
.contact-media { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: url("../img/frame.svg") no-repeat center / 100% 100%; }
.contact-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; mask-image: url("../img/frame_mask.svg"); mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; }
.contact-label { position: absolute; left: 0px; z-index: 5; display: inline-flex; align-items: center; justify-content: center; height: 40px; background-image: url("../img/material_label_yellow.png"); background-repeat: no-repeat; background-size: 100% 100%; background-position: center; color: var(--theme-color-blue); font-weight: 900; line-height: 1; white-space: nowrap; }
.contact-text { margin: 0 auto; color: #000; text-align: center; }
.contact-btn { justify-self: center; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: #ff7a00; color: #ffffff; font-weight: 900; text-decoration: none; }
.contact-btn:hover { opacity: 0.92; }

/* 03 */
.diag-list { display: grid; grid-template-columns: 1fr; }
.diag-item { display: grid; align-items: start; }
.diag-badge { border: solid var(--theme-color-blue); display: flex; align-items: center; justify-content: center; border-radius: 55% 45% 60% 40% / 50% 60% 40% 50%; }
.diag-badge-num { font-weight: 900; color: var(--theme-color-blue); letter-spacing: .02em; }
.diag-content { padding-top: 2px; }
.diag-title { margin: 0; font-weight: 900; color: var(--theme-color-blue); letter-spacing: .02em; }
.diag-text { margin: 0; line-height: 1.7; color: #1b1b1b; }
.diag-note { display: flex; align-items: center; justify-content: center; }
.diag-note-ico { display: flex; align-items: center; justify-content: center; }
.diag-note-ico-img { width: auto; height: auto; display: block; }
.diag-note-text { margin: 0; color: #ffffff; font-weight: 900; -webkit-text-stroke: 7px var(--theme-color-blue); paint-order: stroke; }
.diag-note-yellow { color: var(--theme-color-yellow); -webkit-text-stroke: 7px var(--theme-color-blue); paint-order: stroke; }
.diag-note-svg { height: auto; display: block; }

/* 04 */
.flow-list { display: grid; grid-template-columns: 1fr; }
.flow-item { display: grid; align-items: start; }
.flow-icon { border: 6px solid var(--theme-color-blue); border-radius: 10px; background: #ffffff; display: grid; grid-template-rows: auto 1fr; justify-items: center; position: relative; }
.flow-icon-eight { border: 6px solid var(--theme-color-blue); border-radius: 10px; background: #ffffff; display: grid; grid-template-rows: auto 1fr; justify-items: center; position: relative; }
.flow-icon::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 16px; height: 16px; background: #ffffff; border-right: 6px solid var(--theme-color-blue); border-bottom: 6px solid var(--theme-color-blue); transform: translateX(-50%) rotate(45deg); }
.flow-step { font-weight: 900; color: var(--theme-color-blue); letter-spacing: .02em; }
.flow-ico { width: 44px; height: 44px; object-fit: contain; display: block; }
.flow-main { padding-top: 2px; }
.flow-top { display: flex; align-items: center; margin-bottom: 6px; }
.flow-check { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--theme-color-blue); font-weight: 900; }
.flow-title { margin: 0; font-weight: 900; color: var(--theme-color-blue); letter-spacing: .02em; }
.flow-text { margin: 0; line-height: 1.7; color: #1b1b1b; }

/* 05 */
.after-list { display: grid; grid-template-columns: 1fr; }
.after-item { align-items: start; }
.after-balloon { border: 4px solid var(--theme-color-blue); border-radius: 22px; background: #ffffff; position: relative; }
.after-balloon-three { border: 4px solid var(--theme-color-blue); border-radius: 22px; background: #ffffff; position: relative; }
.after-balloon::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 22px; height: 22px; background: #ffffff; border-right: 4px solid var(--theme-color-blue); border-bottom: 4px solid var(--theme-color-blue); transform: translateX(-50%) rotate(45deg); }
.after-step { margin: 0 0 10px; font-weight: 900; color: var(--theme-color-blue); letter-spacing: .02em; text-align: center; }
.after-photo { border-radius: 16px; overflow: hidden; background: #eef3ff; }
.after-photo-img { width: 100%; object-fit: cover; display: block; }
.after-main { }
.after-top { display: flex; align-items: center; margin-bottom: 10px; }
.after-check { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--theme-color-blue); font-weight: 900; }
.after-title { margin: 0; font-weight: 900; color: var(--theme-color-blue); letter-spacing: .02em; }
.after-text { margin: 0; line-height: 1.7; color: #1b1b1b; }

/* 06 */
.promise-list { display: grid; grid-template-columns: 1fr; margin-top: 48px; }
.promise { position: relative; width: 100%; }
.promise-bg { position: absolute; inset: 0; background-image: url("../img/promise_bg.png"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; pointer-events: none; }
.promise::before { content: ""; position: absolute; top: 0; left: 0; transform: translate(-20%, -40%); background: url("../img/promise_can.png") no-repeat center / contain; pointer-events: none; z-index: 2; }
.promise::after { content: ""; position: absolute; top: 0; right: 0; transform: translate(20%, -40%); background: url("../img/promise_mention.png") no-repeat center / contain; pointer-events: none; z-index: 2; }
.promise-no { position: absolute; z-index: 3; font-weight: 900; color: var(--theme-color-blue); transform: translate(-50%, -50%); }
.promise-title { position: relative; margin: 0; color: var(--theme-color-yellow); letter-spacing: .02em; -webkit-text-stroke: 7px var(--theme-color-blue); paint-order: stroke fill; }
.promise-title-mobile { display: none; position: relative; margin: 0; font-weight: 900; color: var(--theme-color-yellow); -webkit-text-stroke: 6px var(--theme-color-blue); paint-order: stroke fill; letter-spacing: .02em; line-height: 1.4; }
.promise-title-svg { position: relative; width: 100%; height: auto; display: block; box-sizing: border-box; }
.promise-text { position: relative; color: #000; }


/* ==========================================================================
Phone  (width < 640px)
========================================================================== */
@media (width < 640px) {
.guide { padding: 24px 0; }
.guide-card { padding: 40px 16px 32px; }
.guide-head { gap: 14px; margin-bottom: 18px; }
.guide-splash { left: -45px; top: -77px; height: 120px; }
.guide-num { font-size: 20px; }
.guide-title { font-size: 22px; padding-left: 48px; z-index: 3; }
.guide-hero { font-size: 18px; }
.guide-hero img { height: auto; }
.guide-body { margin-top: 20px; font-size: 16px; line-height: 1.7; }

/* 01 */
.guide-grid { margin-top: 18px; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.gcard-img { height: 120px; }
.gcard-label-bg { width: 100%; }
.gcard-label-title { font-size: 16px; padding: 6px 6px 0; }
.guide-foot { margin-top: 22px; font-size: 16px; }

/* 02 */
.contact-grid { margin-top: 18px; grid-template-columns: 1fr; gap: 24px; }
.contact-card { gap: 16px; }
.contact-label { top: 12px; padding: 0 18px; font-size: 16px; }
.contact-text { display: none; }
.contact-btn { height: 44px; padding: 0 18px; font-size: 16px; width: 78%; }

/* 03 */
.diag-list { margin-top: 10px; gap: 18px; }
.diag-item { grid-template-columns: 58px 1fr; gap: 18px; align-items: center; }
.diag-badge { width: 60px; height: 54px; border-width: 6px; }
.diag-badge-num { font-size: 16px; }
.diag-title { font-size: 16px; margin: 0; }
.diag-text { display: none; }
.diag-note { display: none; }
.diag-note-text { margin-left: -64px; font-size: 18px; line-height: 1.7; }
.diag-note-yellow { padding: 0 6px; font-size: 22px; }
.diag-note-svg { width: 86%; margin-left: -120px; }

/* 04 */
.flow-list { margin-top: 12px; gap: 18px; }
.flow-item { grid-template-columns: 96px 1fr; gap: 18px; align-items: center; }
.flow-icon,
.flow-icon-eight { width: 100px; padding: 10px 8px 12px; }
.flow-step { font-size: 11px; }
.flow-top { gap: 10px; }
.flow-check { font-size: 32px; }
.flow-title { font-size: 16px; }
.flow-text { display: none; }

/* 05 */
.after-list { margin-top: 18px; gap: 40px; }
.after-item { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.after-balloon { order: 2; width: 100%; padding: 16px; }
.after-balloon-three { order: 2; width: 100%; padding: 16px; }
.after-step { font-size: 18px; }
.after-photo-img { height: 160px; }
.after-main { order: 1; padding-top: 10px; }
.after-top { gap: 10px; }
.after-check { font-size: 32px; }
.after-title { font-size: 18px; }
.after-text { display: none;  }

/* 06 */
.promise-list { gap: 48px; padding: 0 8px; margin-top: 64px; }
.promise::before { width: 72px; height: 84px; }
.promise::after { width: 40px; height: 40px; }
.promise-no { top: 26px; left: 22px; font-size: 16px; }
.promise-title-svg { display: none; }
.promise-title-mobile { display: block; padding: 16px 24px 16px 22%; font-size: 16px; }
.promise-text { display: none; }
}


/* ==========================================================================
Small tablet  (width >= 640px)
========================================================================== */
@media (width >= 640px) {
.guide { padding: 24px 0; }
.guide-card { padding: 40px 16px 32px; }
.guide-head { gap: 14px; margin-bottom: 18px; }
.guide-splash { left: -45px; top: -77px; height: 120px; }
.guide-num { font-size: 20px; }
.guide-title { font-size: 22px; padding-left: 48px; z-index: 3; }
.guide-hero { font-size: 18px; }
.guide-hero img { height: auto; }
.guide-body { margin-top: 20px; font-size: 16px; line-height: 1.7; }

/* 01 */
.guide-grid { margin-top: 18px; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.gcard-img { height: 120px; }
.gcard-label-bg { width: 100%; }
.gcard-label-title { font-size: 16px; padding: 6px 6px 0; }
.guide-foot { margin-top: 22px; font-size: 16px; }

/* 02 — keep 2-col */
.contact-grid { margin-top: 18px; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact-card { gap: 16px; }
.contact-label { top: 12px; padding: 0 18px; font-size: 16px; }
.contact-text { width: 92%; font-size: 16px; line-height: 1.7; }
.contact-btn { height: 44px; padding: 0 18px; font-size: 16px; width: 78%; }

/* 03 — keep text visible */
.diag-list { margin-top: 10px; gap: 18px; }
.diag-item { grid-template-columns: 58px 1fr; gap: 18px; }
.diag-badge { width: 60px; height: 54px; border-width: 6px; }
.diag-badge-num { font-size: 16px; }
.diag-title { font-size: 16px; margin: 0; }
.diag-text { font-size: 16px; }
.diag-note { margin-top: 26px; }
.diag-note-text { margin-left: -64px; font-size: 18px; line-height: 1.7; }
.diag-note-yellow { padding: 0 6px; font-size: 22px; }
.diag-note-svg { width: 86%; margin-left: -120px; }

/* 04 — keep text visible */
.flow-list { margin-top: 12px; gap: 18px; }
.flow-item { grid-template-columns: 96px 1fr; gap: 18px; }
.flow-icon,
.flow-icon-eight { width: 100px; padding: 10px 8px 12px; }
.flow-step { font-size: 11px; }
.flow-top { gap: 10px; }
.flow-check { font-size: 32px; }
.flow-title { font-size: 16px; }
.flow-text { font-size: 16px; }

/* 05 — keep grid layout, text visible */
.after-list { margin-top: 18px; gap: 40px; }
.after-item { display: grid; grid-template-columns: 1fr; gap: 8px; }
.after-balloon { padding: 16px; }
.after-balloon-three { padding: 16px; }
.after-step { font-size: 18px; }
.after-photo-img { height: 160px; }
.after-main { padding-top: 10px; }
.after-top { gap: 10px; }
.after-check { font-size: 32px; }
.after-title { font-size: 18px; }
.after-text { font-size: 16px; }

/* 06 */
.promise-list { gap: 48px; padding: 0 12px; margin-top: 72px; }
.promise::before { width: 84px; height: 98px; }
.promise::after { width: 44px; height: 44px; }
.promise-no { top: 30px; left: 25px; font-size: 18px; }
.promise-title-mobile { display: none; }
.promise-title-svg { display: block; padding: 18px 36px 18px 16%; top: auto; }
.promise-text { display: none; }
}


/* ==========================================================================
Tablet  (width >= 768px)  — overrides sm mobile values
========================================================================== */
@media (width >= 768px) {
.guide { padding: 40px 24px; }
.guide-card { padding: 48px 32px; }
.guide-head { gap: 14px; }
.guide-splash { left: -92px; top: -92px; height: 180px; }
.guide-num { font-size: 28px; }
.guide-title { font-size: 28px; padding-left: 74px; z-index: auto; }
.guide-hero img { height: 280px; }
.guide-body { font-size: 17px; }

/* 01 */
.guide-grid { grid-template-columns: repeat(2, 1fr); }
.gcard-img { height: 140px; }
.gcard-label-bg { width: 78%; }
.gcard-label-title { font-size: 15px; padding: 10px 12px 0; }
.guide-foot { font-size: 16px; }

/* 02 */
.contact-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
.contact-label { top: 16px; }
.contact-text { display: block; width: 92%; }
.contact-btn { width: 90%; }

/* 03 */
.diag-item { grid-template-columns: 76px 1fr; gap: 16px; }
.diag-badge { width: 72px; height: 64px; border-width: 8px; }
.diag-badge-num { font-size: 20px; }
.diag-title { font-size: 18px; margin: 0 0 8px; }
.diag-text { display: block; }
.diag-note { display: flex; }
.diag-note-text { margin-left: -44px; font-size: 17px; }
.diag-note-yellow { font-size: 20px; }
.diag-note-svg { width: 92%; margin-left: -96px; }

/* 04 */
.flow-item { grid-template-columns: 104px 1fr; }
.flow-icon,
.flow-icon-eight { width: 92px; }
.flow-step { font-size: 16px; }
.flow-title { font-size: 18px; }
.flow-text { display: block; }

/* 05 */
.after-list { gap: 26px; }
.after-item { display: grid; grid-template-columns: 260px 1fr; gap: 24px; }
.after-balloon { order: unset; width: auto; }
.after-balloon-three { order: unset; width: auto; }
.after-photo-img { height: 180px; }
.after-main { order: unset; }
.after-title { font-size: 20px; }
.after-text { display: block; }

/* 06 */
.promise-list { gap: 48px; padding: 0 24px; margin-top: 72px; }
.promise::before { width: 100px; height: 116px; }
.promise::after { width: 52px; height: 52px; }
.promise-no { top: 36px; left: 30px; font-size: 20px; }
.promise-title-svg { padding: 24px 48px 0 14%; top: auto; }
.promise-text { display: block; padding: 0 48px 16px 14%; }
}


/* ==========================================================================
Desktop  (width >= 1024px)  — full desktop sizing
========================================================================== */
@media (width >= 1024px) {
.guide { padding: 48px 16px; }
.guide-card { max-width: 896px; margin: 0 auto; padding: 64px; }
.guide-head { gap: 18px; margin-bottom: 18px; }
.guide-splash { left: -120px; top: -120px; height: 220px; }
.guide-num { font-size: 32px; }
.guide-title { font-size: 32px; padding-left: 90px; }
.guide-hero { font-size: 18px; }
.guide-hero img { height: 320px; }
.guide-body { margin-top: 20px; font-size: 18px; line-height: 1.7; }
.guide-foot { font-size: 18px; }

/* 01 */
.guide-grid { margin-top: 18px; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gcard-img { height: 160px; }
.gcard-label-bg { width: 65%; }
.gcard-label-title { font-size: 16px; padding: 10px 12px 0; }
.guide-foot { margin-top: 22px; font-size: 16px; }

/* 02 */
.contact-grid { margin-top: 18px; grid-template-columns: 1fr 1fr; gap: 48px 24px; }
.contact-card { gap: 16px; }
.contact-label { top: 8px; padding: 0 18px; font-size: 16px; }
.contact-text { width: 80%; font-size: 16px; line-height: 1.7; }
.contact-btn { height: 44px; padding: 0 18px; font-size: 16px; width: 80%; }

/* 03 */
.diag-list { margin-top: 10px; gap: 18px; }
.diag-item { grid-template-columns: 92px 1fr; gap: 18px; }
.diag-badge { width: 80px; height: 72px; border-width: 10px; }
.diag-badge-num { font-size: 20px; }
.diag-title { font-size: 18px; margin: 0 0 8px; }
.diag-text { font-size: 16px; }
.diag-note { margin-top: 26px; }
.diag-note-text { margin-left: -64px; font-size: 18px; line-height: 1.7; }
.diag-note-yellow { padding: 0 6px; font-size: 22px; }
.diag-note-svg { width: 86%; margin-left: -120px; }

/* 04 */
.flow-list { margin-top: 12px; gap: 18px; }
.flow-item { grid-template-columns: 110px 1fr; gap: 18px; }
.flow-icon,
.flow-icon-eight { width: 96px; padding: 10px 8px 12px; }
.flow-step { font-size: 16px; }
.flow-top { gap: 10px; }
.flow-check { font-size: 32px; }
.flow-title { font-size: 20px; }
.flow-text { font-size: 16px; }

/* 05 */
.after-list { margin-top: 18px; gap: 26px; }
.after-item { display: grid; grid-template-columns: 300px 1fr; gap: 32px; }
.after-balloon { padding: 16px; }
.after-balloon-three { padding: 16px; }
.after-step { font-size: 18px; }
.after-photo-img { height: 180px; }
.after-main { padding-top: 10px; }
.after-top { gap: 10px; }
.after-check { font-size: 32px; }
.after-title { font-size: 20px; }
.after-text { font-size: 16px; }

/* 06 */
.promise-list { gap: 48px; margin-top: 72px; }
.promise { max-width: 900px; margin: 0 auto; }
.promise::before { width: 120px; height: 140px; }
.promise::after { width: 60px; height: 60px; }
.promise-no { top: 42px; left: 36px; font-size: 24px; }
.promise-title-svg { padding: 28px 72px 0 14%; }
.promise-text { margin: 8px 0 0; padding: 0 72px 20px 14%; font-size: 16px; line-height: 1.7; }
}