/* ============================================================ Benefit page — layout & responsive scaling ------------------------------------------------------------ The design is a fixed 420px-wide canvas (.inner). It is scaled up to 480px (480 / 420 = 8/7) with a CSS transform — no JS. - PC : the canvas is capped at 480px wide and centered. - Mobile : makes the browser fit the 480px layout to the device width, so it fills the screen (100%). ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; overflow-x: clip; background: #e9eae8; font-family: "Noto Sans JP", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* iOS Safari/Chrome の文字自動拡大を無効化（「01」などが黒枠からはみ出るのを防止） */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .stage { width: 100%; overflow-x: clip; background: #e9eae8; } /* Visible box = design (420px) scaled to 480px. Centered on wide screens. */ .canvas { position: relative; width: 480px; height: 14214.86px; /* 12438 × 480 / 420 */ margin: 0 auto; overflow: clip; background: #ffffff; } .inner { position: absolute; top: 0; left: 0; width: 420px; /* design width */ height: 12438px; /* design height (footer trimmed) */ overflow: clip; /* clip (not hidden) so it never becomes a scroll container */ transform: scale(1.14285714); /* 480 / 420 */ transform-origin: top left; } /* Figma text nodes carry explicit line breaks; preserve them. */ .inner span { white-space: pre-line; } .inner > div { box-shadow: none !important; } .text-accent-red { color: rgb(229,59,59); } .point-underline { position: relative; width: 372px; height: 2px; background: rgb(252,37,129); flex-shrink: 0; align-self: center; } .text-green { color: rgb(28,189,144); } .text-pink { color: rgb(252,37,129); } .point-school__02 .point-underline { margin-top: auto; } .roadmap__02 .point-underline { margin-top: auto; } .jobs__04 .point-underline { margin-top: auto; } .jobtab-green { background-color: rgb(39,189,189) !important; } .jobtab-yellow { background-color: rgb(253,177,1) !important; } .care-sweet__08 .care-sweet__13 { margin-top: auto; width: 372px; } .care-sweet__08 .care-sweet-underline { margin-top: auto; width: 372px; height: 2px; flex-shrink: 0; background-color: rgb(7,162,162); } .jobs__04 { height: 105px !important; } .jobs__01 { overflow: visible !important; } .cta-link { display: contents; text-decoration: none; color: inherit; } .merit-qualification .fig-asset-a7df14cd72d27b4d-f7666bd7 { background-position: 22% center, 22% center, 22% center; } /* ============================================================ Job-type accordion (CSS-only, no JS) - Default: only the tab buttons show (all collapsed). - Click a tab to expand its content. - Because every section is absolutely positioned at a fixed top, opening/closing shifts all sections below the jobs block via :has() + a shared --shift custom property so the page reflows with no gaps. ============================================================ */ /* Each panel collapses to just its tab. */ .job-panel { height: auto !important; } .job-tab-label { align-self: stretch; display: block; cursor: pointer; } .job-body { display: none; flex-direction: column; gap: 24px; align-items: center; align-self: stretch; } .job-panel:has(.job-toggle:checked) .job-body { display: flex; } /* Tab chevron points down when collapsed, flips up when open. */ .job-tab-label .fa-chevron-down { transition: transform .2s ease; } .job-panel:has(.job-toggle:checked) .fa-chevron-down { transform: rotate(180deg); } /* The panel list grows/shrinks naturally (flex column). */ .jobs__11 { height: auto !important; } .jobs { height: auto !important; } /* ---- Reflow sections below the jobs block ---- --shift = (-1516px when all collapsed) + (body height of each open panel). 1516 = full expanded panel area (1764) minus collapsed tabs (248). */ .canvas { --jb1: 0px; --jb2: 0px; --jb3: 0px; --shift: calc(-1556px + var(--jb1) + var(--jb2) + var(--jb3)); /* Extra height added to the care-sweet diagram block; sections below it (setsumeikai onward) shift down by the same amount. */ --csgrow: 68px; } .canvas:has(#jc1:checked) { --jb1: 505px; } .canvas:has(#jc2:checked) { --jb2: 506px; } .canvas:has(#jc3:checked) { --jb3: 505px; } .lp-root .about-kentei { top: calc(6537px + var(--shift)); } .lp-root .cta-2 { top: calc(7126px + var(--shift)); } .lp-root .care-sweet { top: calc(7364px + var(--shift)); } .lp-root .setsumeikai-info-1 { top: calc(8942px + var(--shift) + var(--csgrow)); } .lp-root .deco-1 { top: calc(9252px + var(--shift) + var(--csgrow)); } .lp-root .cta-3 { top: calc(9615px + var(--shift) + var(--csgrow)); } .lp-root .merit-business { top: calc(9853px + var(--shift) + var(--csgrow)); } .lp-root .why-qualification { top: calc(11020px + var(--shift) + var(--csgrow)); } .lp-root .setsumeikai-info-2 { top: calc(11519px + var(--shift) + var(--csgrow)); } .lp-root .cta-4 { top: calc(12176px + var(--shift) + var(--csgrow)); } /* Total page height follows the same shift so the bottom never gaps. */ .inner { height: calc(12438px + var(--shift) + var(--csgrow)); } .canvas { height: calc(14214.86px + (var(--shift) + var(--csgrow)) * 1.14285714); } /* Care-sweet diagram block enlarged downward. */ .care-sweet { height: 1646px !important; } .care-sweet__06 { height: 1552px !important; } .care-sweet__07 { height: 1472px !important; } .care-sweet__18 { height: 622px !important; width: 332px !important; } .care-sweet__19 { height: 604px !important; width: 332px !important; } .text-pink-bold { color: rgb(252,37,129); font-weight: 700; } .text-green-bold { color: rgb(7,162,162); font-weight: 700; } .text-yellow-bold { color: rgb(226,139,0); font-weight: 700; } .merit-business__08 .merit-business-underline { margin-top: auto; width: 372px; height: 2px; flex-shrink: 0; background-color: rgb(226,139,0); } .why-qualification__02 .why-qual-underline { margin-top: auto; width: 372px; height: 2px; flex-shrink: 0; background-color: rgb(226,139,0); } /* internal jump targets */ #sec-qualification, #sec-caresweet, #sec-business { scroll-margin-top: 16px; } .detail-link { cursor: pointer; } /* semantic headings keep their original look */ .lp-root h1,.lp-root h2,.lp-root h3,.lp-root h4,.lp-root h5,.lp-root h6{margin:0;padding:0;white-space:pre-line} /* visually hidden (kept for screen readers / SEO) */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}