/* Task 5: service pages (Web / Design / App). #333333 + grey only. */
.sv-hero{padding-bottom:88px}.sv-hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;margin-top:40px}.sv-hero .lead{margin-top:24px;font-size:14px;color:var(--ink);line-height:2.1}.sv-hero .button{margin-top:36px}
.sv-visual{margin:0;overflow:hidden;background:#fff;border:1px solid var(--line)}.sv-media{width:100%;aspect-ratio:3/2;object-fit:cover;background:#fff}.sv-visual picture{display:block}.web-visual .web-flow{width:100%;box-shadow:none;border:0}
.sv-sec{padding:96px 0}.sv-wash{background:var(--wash)}.section-lead{margin-top:12px;font-size:13px;color:var(--ink)}
.rec-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;align-items:center}.rec-grid.has-image{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.rec-image{margin:0}.rec-image img{width:100%;aspect-ratio:3/2;object-fit:cover}
.check-list{margin-top:32px}.rec-grid:not(.has-image) .check-list{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}.check-list li{position:relative;padding:20px 8px 20px 36px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.8}.check-list li:before{content:'';position:absolute;left:10px;top:27px;width:6px;height:11px;border:solid var(--ink);border-width:0 1px 1px 0;transform:rotate(40deg)}
.approach{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:32px;margin-top:48px}.approach-card figure{margin:0 0 18px}.approach-card img{width:100%;aspect-ratio:3/2;object-fit:cover}.approach-no{display:block;font:22px/1.2 var(--serif);color:var(--muted);margin-bottom:8px}.approach-card h3{font-size:15px}.approach-card p{margin-top:6px;font-size:12px;color:var(--ink);line-height:1.9}
.included-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}.included-grid figure{margin:0}.included-grid img{width:100%;height:auto}
.plan-tabs{display:flex;gap:8px;margin-top:24px}.plan-tabs[hidden]{display:none}.plan-tabs button{flex:1;min-height:44px;border:1px solid var(--line-strong);background:#fff;color:var(--ink);cursor:pointer;font-size:13px;letter-spacing:.1em}.plan-tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}.plan{position:relative;border:1px solid var(--line-strong);background:#fff;padding:36px 28px}.plan.is-rec{border-color:var(--ink)}.plan-badge{position:absolute;top:-1px;right:-1px;background:var(--ink);color:#fff;font-size:11px;letter-spacing:.14em;padding:5px 14px}.plan h3{font-size:15px}.plan-price{margin-top:12px;font:28px/1.4 var(--serif);letter-spacing:.04em}.plan-note{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--ink);line-height:1.9}
.offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;margin-top:40px}.offer{padding:28px 0;border-top:1px solid var(--line-strong)}.offer h3{font-size:16px}.offer-price{margin-top:6px;font:22px/1.5 var(--serif);letter-spacing:.04em}.offer p:last-child{margin-top:8px;font-size:12px;color:var(--ink);line-height:1.9}
.notes{margin-top:32px}.notes li{position:relative;padding-left:1.2em;font-size:12px;color:var(--ink);line-height:2}.notes li:before{content:'※';position:absolute;left:0}
.flow{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:28px;margin-top:56px}.flow li{position:relative;padding-top:60px}.flow li:before{content:attr(data-n);position:absolute;top:0;left:0;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--ink);border-radius:50%;background:#fff;font:12px/1 var(--serif);letter-spacing:.04em}.flow li:after{content:'';position:absolute;top:17px;left:44px;right:-28px;height:1px;background:var(--line-strong)}.flow li:last-child:after{display:none}.flow li:has(img){padding-top:52px}.flow img{width:40px;height:40px;object-fit:contain;margin-bottom:14px}.flow h3{font-size:15px}.flow p{margin-top:6px;font-size:12px;color:var(--ink);line-height:1.9}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start}.faq-list{border-top:1px solid var(--line-strong)}.faq-item{border-bottom:1px solid var(--line-strong)}.faq-item summary{position:relative;display:flex;gap:16px;align-items:baseline;padding:22px 40px 22px 8px;font-size:14px;line-height:1.8;cursor:pointer;list-style:none}.faq-item summary::-webkit-details-marker{display:none}.faq-q{font:16px/1 var(--serif);color:var(--muted)}.faq-item summary:after{content:'+';position:absolute;right:10px;top:50%;margin-top:-12px;font-size:20px;color:var(--muted);line-height:1.2}.faq-item[open] summary:after{content:'−'}.faq-item p{padding:0 40px 24px 40px;font-size:13px;color:var(--ink);line-height:2}
.approach>:nth-child(2),.plans>:nth-child(2){--rise-delay:.18s}.approach>:nth-child(3),.plans>:nth-child(3){--rise-delay:.36s}.approach>:nth-child(4){--rise-delay:.54s}
@media(min-width:701px) and (max-width:1150px){.sv-hero-grid{gap:32px}.approach{gap:20px}.included-grid{gap:40px}.plans{gap:16px}.plan{padding:28px 18px}.plan-price{font-size:22px}.flow{gap:16px}.flow li:after{right:-16px}.faq-grid{gap:32px}.check-list li{font-size:14px}.rec-grid:not(.has-image) .check-list{column-gap:32px}}
@media(max-width:700px){.sv-hero{padding-bottom:48px}.sv-hero-grid{display:flex;flex-direction:column-reverse;align-items:stretch;gap:28px;margin-top:24px}.sv-hero .lead{font-size:13px;margin-top:16px}.sv-hero .button{margin-top:24px}.sv-sec{padding:56px 0}
.rec-grid,.rec-grid.has-image{display:flex;flex-direction:column;gap:28px}.rec-image{order:-1}.rec-grid:not(.has-image) .check-list{display:block}.check-list{margin-top:16px}.check-list li{padding:14px 4px 14px 32px;font-size:14px}.check-list li:before{top:19px}
.approach{display:block;margin-top:24px}.approach-card{display:grid;grid-template-columns:112px 1fr;column-gap:16px;margin-top:20px;align-items:start}.approach-card:first-child{margin-top:0}.approach-card figure{grid-row:1/4;margin:0}.approach-card:not(:has(figure)){display:block;padding:14px 0;border-top:1px solid var(--line)}.approach-no{font-size:14px;margin-bottom:2px}.approach-card h3{font-size:14px;line-height:1.5}.approach-card p{margin-top:2px}
.included-grid{display:flex;flex-direction:column;gap:24px}.plans{display:block;margin-top:16px}.plans.tabs-on .plan:not(.is-active){display:none}.plan{padding:28px 20px}.plan-price{font-size:24px}.offers{display:block;margin-top:16px}.offer{padding:20px 0}.offer-price{font-size:19px}.notes{margin-top:20px}
.flow{display:block;margin-top:24px;padding-left:46px;position:relative}.flow:before{content:'';position:absolute;left:16px;top:16px;bottom:16px;width:1px;background:var(--line-strong)}.flow li{padding:0 0 22px;min-height:34px}.flow li:last-child{padding-bottom:0}.flow li:before{left:-46px;top:0}.flow li:after{display:none}.flow img{display:none}.flow h3{font-size:14px;line-height:34px}.flow p{margin-top:0}
.faq-grid{display:block}.faq-list{margin-top:20px}.faq-item summary{padding:16px 32px 16px 4px;font-size:13px;gap:12px}.faq-item p{padding:0 8px 18px 32px;font-size:12px}}

/* v18: copy-faithful structure */
.sv-hero-grid.is-compact{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}.sv-hero .lead p+p{margin-top:12px}.sv-hero .lead{margin-top:24px}.sv-hero .lead p{font-size:14px;color:var(--ink);line-height:2.1}
.purpose-intro{margin-top:24px;max-width:760px}.purpose-intro p{font-size:14px;color:var(--ink);line-height:2.1}.purpose-intro p+p,.purpose-intro .dot-list+p{margin-top:12px}.purpose-intro .dot-list{margin:12px 0}
.dot-list li{position:relative;padding-left:1.1em;font-size:12px;color:var(--ink);line-height:2}.dot-list li:before{content:'・';position:absolute;left:-.1em}.purpose-intro .dot-list li{font-size:14px}
.plan-tag{margin-top:6px;font-size:12px;color:var(--ink)}.plan-rows{margin:18px 0 0;border-top:1px solid var(--line)}.plan-rows>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12px}.plan-rows dt{color:var(--muted)}.plan-rows dd{margin:0;text-align:right}.plan-note{margin-top:14px;padding-top:0;border-top:0}
.price-notes{margin-top:40px;padding:24px 28px;background:var(--wash)}.sv-wash .price-notes{background:#fff}.price-notes h3{font-size:14px;margin-bottom:8px}.price-notes .notes{margin-top:0}
.offer .dot-list{margin-top:12px}.offer-note{position:relative;margin-top:10px;padding-left:1.2em;font-size:11px;color:var(--ink);line-height:1.9}.offer-note:before{content:'※';position:absolute;left:0}.offer-desc{margin-top:8px;font-size:12px;color:var(--ink);line-height:1.9}
.print-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;margin-top:40px}.print-grid article{padding:24px 0;border-top:1px solid var(--line-strong)}.print-grid h3{font-size:16px}.print-grid p{margin-top:8px;font-size:12px;color:var(--ink);line-height:2}.print-grid .dot-list{margin-top:8px}
.print-body{margin-top:24px;max-width:860px}.print-body p{font-size:12px;color:var(--ink);line-height:2.1}.print-body p+p{margin-top:12px}.print-body h3{margin-top:32px;font-size:15px}
.scope-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:40px}.scope-grid article{padding-top:20px;border-top:1px solid var(--line-strong)}.scope-grid h3{font-size:15px}.scope-grid p{margin-top:10px;font-size:12px;color:var(--ink);line-height:2}
@media(min-width:701px) and (max-width:1150px){.scope-grid{gap:24px}.print-grid{gap:0 32px}}
@media(max-width:700px){.sv-hero-grid.is-compact{display:flex}.sv-hero .lead p{font-size:13px}.purpose-intro p,.purpose-intro .dot-list li{font-size:13px}.price-notes{margin-top:24px;padding:18px 16px}.print-grid,.scope-grid{display:block;margin-top:16px}.print-grid article,.scope-grid article{margin-top:16px}.plan-rows>div{font-size:12px}}
.confirm-title{margin-top:48px;font-size:15px}.flow li:not(:has(p)){padding-bottom:0}.flow li:not(:has(p)) h3{font-size:13px;margin-top:0}
@media(max-width:700px){.confirm-title{margin-top:32px}}

/* v21: no frames on large visuals, recommended image left, item images, glossy plans */
.sv-visual{border:0;background:none}.web-visual .web-flow{border:0;box-shadow:none;background:none}.web-visual .web-flow::before{display:none}.sv-media{background:none}
.rec-grid.has-image{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.rec-grid.has-image .check-list{display:block}
.offer figure,.scope-grid figure{margin:0 0 18px}.offer img,.scope-grid img{width:100%;aspect-ratio:3/2;object-fit:cover}.scope-grid article{padding-top:0;border-top:0}.offer{border-top:0;padding-top:0}.offers{gap:40px 56px}.offer h3{margin-top:2px}
.plan{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.05)}
#plan-light{background:linear-gradient(135deg,#fcf6f0 0%,#f5e7da 40%,#fdf9f4 56%,#f2dfce 100%)}
#plan-standard{background:linear-gradient(135deg,#fbfbfc 0%,#eceef1 40%,#fefefe 56%,#e6e8ec 100%)}
#plan-premium{background:linear-gradient(135deg,#fefaeb 0%,#f8edc7 40%,#fffcf2 56%,#f5e8ba 100%)}
.plan>*{position:relative;z-index:1}.plan-rows,.plan-rows>div{border-color:rgba(51,51,51,.14)}
.plan::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.9) 50%,transparent 70%);background-size:300% 100%;background-position:100% 0}
.motion-ready .plan.is-visible:not(.sheened)::after{animation:plan-sheen 1.4s ease-out .5s 1 both}
@keyframes plan-sheen{0%{opacity:0;background-position:100% 0}20%{opacity:1}100%{opacity:0;background-position:0 0}}
@media(prefers-reduced-motion:reduce){.plan::after{display:none}}
@media(max-width:700px){.rec-grid.has-image{display:flex}.offers{display:block}.offer{padding:0 0 28px}.scope-grid article{margin-top:24px}}

.plan>.plan-badge{position:absolute;top:-14px;right:20px;z-index:3;padding:6px 16px;line-height:1.4}
.offers.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
@media(min-width:701px) and (max-width:1150px){.offers.cols-3{gap:32px 20px}}
@media(max-width:700px){.offers.cols-3{display:block}}
@media(max-width:700px){.plans{margin-top:30px}.plan>.plan-badge{right:16px}}
/* Web hero: size the h1 to its column so the 18-character second line stays on one line (tablet and small desktop) */
@media(min-width:701px){.sv-hero:has(.web-visual) .sv-hero-copy{container-type:inline-size}.sv-hero:has(.web-visual) h1{font-size:clamp(22px,calc(100cqw / 19.6),34px)}}
/* Web hero animation: the source SVG's background circle extends past the top of its viewBox; let it draw in full instead of being cut flat (desktop/tablet only; on phones the crop must stay) (source SVG stays unmodified) */
@media(min-width:701px){.web-visual,.web-visual .web-flow,.web-visual .web-flow__art{overflow:visible}}