に s1--split を足すとこの形になります。写真を全画面に敷かないので、文字はベールに頼らず常に読めます。 ---------------------------------------------------------------- */ .plp .s1--split{background-image:none;background:var(--plp-hero-base);animation:none;text-align:left; padding:0} .plp .s1--split::after{display:none} /* 全画面用の周辺減光は使わない */ .plp .s1--split::before{opacity:.7} .plp .s1--split .scene-inner{max-width:none;width:100%} .plp .s1--split h1,.plp .s1--split .s1-sub p{text-shadow:none} .plp .s1-split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,4fr);gap:48px; align-items:center;padding:88px 0 72px} .plp .s1--split .s1-copy{padding-right:max(32px,calc((100vw - 1400px) / 2 + 32px))} /* 写真スライド */ .plp .s1-slides{position:relative;aspect-ratio:3/2;border-radius:0 20px 20px 0;overflow:hidden; background:var(--plp-photo);box-shadow:0 30px 70px -34px rgba(0,0,0,.5); /* 横に広い画面で縦に伸びすぎないよう上限を設ける（はみ出しは object-fit で切り取り） */ max-height:min(62vh,600px)} .plp .s1-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity 1.1s ease} .plp .s1-slides img.is-active{opacity:1} /* 写真の下に並ぶサムネイル（枚数に応じて自動で横幅を分け合う） */ .plp .s1-thumbs{display:flex;gap:10px;margin-top:14px;padding-left:24px} .plp .s1-thumbs button{flex:1 1 0;min-width:0;position:relative;aspect-ratio:4/3;max-height:124px; border-radius:9px;overflow:hidden; padding:0;background:var(--plp-photo);opacity:.5;outline:2px solid transparent;outline-offset:2px; transition:opacity .25s ease,outline-color .25s ease,transform .25s ease} .plp .s1-thumbs button:hover{opacity:.85;transform:translateY(-2px)} .plp .s1-thumbs button.is-active{opacity:1;outline-color:var(--plp-accent)} .plp .s1-thumbs img{width:100%;height:100%;object-fit:cover;display:block} @media (prefers-reduced-motion:reduce){ /* 自動切替は止め、1枚目を表示したまま。点で手動切替はできる */ .plp .s1-slides img{transition:none} } /* 右のコピー */ .plp .s1--split .s1-copy{text-align:left} .plp .s1--split .s1-eyebrow{margin-bottom:26px} .plp .s1--split h1{font-size:clamp(30px,3.4vw,52px);line-height:1.4;margin-bottom:24px} .plp .s1--split .s1-sub p{font-size:clamp(15px,1.2vw,17px);letter-spacing:.06em;line-height:1.9} .plp .s1--split .s1-info{margin-top:30px;padding:16px 26px;text-align:left;align-self:flex-start} .plp .s1--split .s1-info .s1-meta{align-items:flex-start} .plp .s1--split .s1-info .s1-meta .place{text-align:left} .plp .s1--split .s1-actions{justify-content:flex-start;margin-top:30px} .plp .s1--split .scroll-hint{bottom:28px} @media (max-width:1024px){ .plp .s1--split{padding:0} .plp .s1-split{grid-template-columns:minmax(0,1fr);gap:30px;padding:88px 0 76px} .plp .s1--split .s1-copy{padding:0 22px} .plp .s1-slides{border-radius:0 0 20px 0} .plp .s1-thumbs{padding:0 22px} .plp .s1-slides{aspect-ratio:4/3} .plp .s1--split .s1-copy{text-align:center} .plp .s1--split .s1-info{align-self:center;text-align:center} .plp .s1--split .s1-info .s1-meta{align-items:center} .plp .s1--split .s1-info .s1-meta .place{text-align:center} .plp .s1--split .s1-actions{justify-content:center} .plp .s1--split .scroll-hint{display:none} } @media (max-width:880px){ /* 汎用の .plp .s1 h1 と詳細度が並ぶため .s1.s1--split で上書きする */ /* 見出しは「これからも心地よく。」(10文字) が1行に収まる大きさに逆算 */ .plp .s1.s1--split h1{font-size:clamp(24px,calc((100vw - 44px)/10.4),34px);line-height:1.5;margin-bottom:18px} .plp .s1.s1--split .s1-sub p{font-size:15px;letter-spacing:.02em;line-height:1.85;word-break:auto-phrase} .plp .s1.s1--split .s1-split{padding:64px 0 56px;gap:24px} .plp .s1.s1--split .s1-award{width:172px;margin:18px auto 0} .plp .s1.s1--split .s1-award__label .l1{font-size:15px} .plp .s1.s1--split .s1-award__label .l2{font-size:16px} .plp .s1.s1--split .s1-award__label .l2 em{font-size:28px} .plp .s1.s1--split .s1-award__label .l3{font-size:22px} .plp .s1.s1--split .s1-actions{margin-top:22px;gap:10px} .plp .s1--split .s1-actions .cta-pill,.plp .s1--split .s1-actions .cta-ghost{width:100%;max-width:340px} /* サムネは指で押せる大きさを保ち、横スクロールで全部見せる */ .plp .s1-thumbs{gap:8px;padding:0 22px;overflow-x:auto;scroll-snap-type:x proximity; scrollbar-width:none;-webkit-overflow-scrolling:touch} .plp .s1-thumbs::-webkit-scrollbar{display:none} .plp .s1-thumbs button{flex:0 0 96px;max-height:none;scroll-snap-align:start} } /* ---------------------------------------------------------------- 05. 課題（PROBLEM） ---------------------------------------------------------------- */ .plp .s-problem{padding-top:140px} .plp .problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(var(--plp-fg-rgb),.1); border:1px solid rgba(var(--plp-fg-rgb),.1)} .plp .problem-card{background:var(--plp-surface);padding:0 0 30px;display:flex;flex-direction:column; transition:background .3s ease} .plp .problem-card:hover{background:var(--plp-surface-hover)} .plp .problem-card figure{margin:0;overflow:hidden;aspect-ratio:4/3;background:var(--plp-photo)} .plp .problem-card figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(.5) contrast(1.02); transition:transform .6s ease,filter .6s ease} .plp .problem-card:hover figure img{transform:scale(1.04);filter:none} .plp .problem-card .pc-body{padding:26px 28px 0} .plp .problem-card .n{font-family:var(--plp-font-en);font-size:34px;font-weight:900;color:var(--plp-accent); line-height:.9;letter-spacing:-.02em;margin-bottom:14px} .plp .problem-card h3{font-size:19px;font-weight:900;line-height:1.55;letter-spacing:.02em;margin-bottom:12px} .plp .problem-card p{font-size:15px;line-height:2;color:rgba(var(--plp-fg-rgb),.62)} /* ---------------------------------------------------------------- 06. 放置リスク（RISK） ---------------------------------------------------------------- */ .plp .s-risk{color:var(--plp-on-surface);min-height:auto;padding:150px 24px;position:relative;overflow:hidden; background-image:linear-gradient(180deg,var(--plp-overlay-1) 0%,var(--plp-overlay-2) 100%),var(--risk-bg); background-size:cover,cover;background-position:center,center;background-repeat:no-repeat; background-color:var(--plp-surface)} .plp .s-risk::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(105deg,var(--plp-overlay-solid) 26%,var(--plp-overlay-1) 64%,transparent 100%)} .plp .s-risk .scene-inner{max-width:980px} @property --plp-bx{syntax:'';inherits:false;initial-value:0px} @property --plp-by{syntax:'';inherits:false;initial-value:0px} @property --plp-br{syntax:'';inherits:false;initial-value:0deg} .plp .risk-bubble{display:inline-block;max-width:640px;position:relative;font-size:clamp(15px,1.7vw,19px); line-height:1.85;color:var(--plp-on-bubble);background:var(--plp-bubble);padding:22px 30px;border-radius:22px; margin:8px 0 46px;font-weight:500;letter-spacing:.02em;box-shadow:0 18px 40px -16px rgba(0,0,0,.45); transform:translate(var(--plp-bx),var(--plp-by)) rotate(var(--plp-br));transform-origin:60px 100%;will-change:transform; animation:plpBubbleX 7.3s ease-in-out infinite alternate,plpBubbleY 5.9s ease-in-out infinite alternate, plpBubbleR 9.1s ease-in-out infinite alternate} /* 出現アニメの .r.in{transform:none} に負けて動かなくなるため、吹き出しだけ上書きする（.r の初期位置ずらしは使わず、フェードインのみ＋常時ふわふわ） */ .plp .risk-bubble.r, .plp .risk-bubble.r.in{transform:translate(var(--plp-bx),var(--plp-by)) rotate(var(--plp-br))} @keyframes plpBubbleX{from{--plp-bx:-9px}to{--plp-bx:10px}} @keyframes plpBubbleY{from{--plp-by:-1px}to{--plp-by:-15px}} @keyframes plpBubbleR{from{--plp-br:-2deg}to{--plp-br:2.3deg}} @media (prefers-reduced-motion:reduce){.plp .risk-bubble{animation:none;transform:none}} .plp .risk-bubble::after{content:"";position:absolute;left:38px;bottom:-14px;width:0;height:0; border-left:14px solid transparent;border-right:14px solid transparent;border-top:16px solid var(--plp-bubble); filter:drop-shadow(0 6px 6px rgba(0,0,0,.15))} .plp .s-risk h2{font-size:clamp(30px,4.4vw,58px);margin-bottom:56px} .plp .risk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 64px;padding-top:48px; border-top:1px solid rgba(var(--plp-fg-rgb),.1)} .plp .risk-item .n{font-family:var(--plp-font-en);font-size:15px;letter-spacing:.28em;color:var(--plp-accent); font-weight:700;margin-bottom:14px} .plp .risk-item h3{font-size:19px;font-weight:900;line-height:1.6;margin-bottom:14px;letter-spacing:.02em} .plp .risk-item p{font-size:15px;line-height:2;color:rgba(var(--plp-fg-rgb),.66)} .plp .risk-note{margin-top:52px;padding:24px 28px;background:rgba(var(--plp-accent-rgb),.08); border-left:3px solid var(--plp-accent);font-size:15px;line-height:2.05;color:rgba(var(--plp-fg-rgb),.85)} .plp .risk-note b{color:var(--plp-accent);font-weight:700} /* ---------------------------------------------------------------- 07. 中間CTA ---------------------------------------------------------------- */ .plp .mid-cta{padding:96px 24px;text-align:center;position:relative;overflow:hidden;color:var(--plp-hero-fg); background-image:linear-gradient(180deg,var(--plp-overlay-1) 0%,var(--plp-overlay-2) 100%),var(--cta-bg); background-size:cover,cover;background-position:center,center;background-repeat:no-repeat; background-color:var(--plp-surface)} .plp .mid-cta::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120%; aspect-ratio:1/1;background:radial-gradient(circle,rgba(var(--plp-accent-rgb),.1) 0%,transparent 60%);z-index:0; pointer-events:none} .plp .mid-cta-inner{position:relative;z-index:2;max-width:820px;margin:0 auto} .plp .mid-cta .ch{margin-bottom:18px;font-size:15px} .plp .mid-cta h3{font-size:clamp(21px,2.6vw,32px);font-weight:900;line-height:1.7;margin-bottom:22px; letter-spacing:.02em;color:var(--plp-hero-fg)} .plp .mid-cta h3 .em{position:relative;background:none;padding:0} .plp .mid-cta h3 .em::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px; background:var(--plp-accent);opacity:.55;border-radius:2px} .plp .mid-cta .kicker{font-size:15px;letter-spacing:.3em;color:rgba(var(--plp-hero-fg-rgb),.7);margin-bottom:26px} .plp .mid-cta .mid-cta-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .plp .mid-cta .cta-pill{padding:20px 40px;font-size:16px} .plp .mid-cta .meta{margin-top:20px;font-size:15px;color:rgba(var(--plp-hero-fg-rgb),.58);letter-spacing:.06em;line-height:1.9} /* ---------------------------------------------------------------- 08. 性能向上リノベーション（APPROACH） ---------------------------------------------------------------- */ .plp .s-approach .scene-inner{max-width:1160px} .plp .approach-hero{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;margin-bottom:96px} .plp .approach-hero h2{margin-bottom:24px} .plp .approach-hero p{font-size:15px;line-height:2.1;color:var(--plp-on-light-2)} .plp .approach-hero figure{margin:0;border-radius:14px;overflow:hidden;position:relative; box-shadow:0 30px 70px -32px rgba(0,0,0,.45)} .plp .approach-hero figure img{width:100%;aspect-ratio:4/3;object-fit:cover} .plp .approach-hero figcaption{position:absolute;left:0;bottom:0;background:rgba(13,14,10,.82);color:#fff;font-size:15px; letter-spacing:.12em;padding:10px 18px;border-top-right-radius:10px;backdrop-filter:blur(4px)} .plp .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .plp .pillar{background:var(--plp-card);border:1px solid var(--plp-card-line);border-radius:14px;padding:32px 28px; position:relative;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease} .plp .pillar:hover{transform:translateY(-4px);border-color:var(--plp-accent2);box-shadow:0 22px 50px -30px rgba(0,0,0,.3)} .plp .pillar .n{font-family:var(--plp-font-en);font-size:15px;letter-spacing:.28em;color:var(--plp-accent2); font-weight:900;margin-bottom:14px} .plp .pillar .ico{width:46px;height:46px;border-radius:12px;background:rgba(var(--plp-accent-rgb),.14); color:var(--plp-accent2);display:grid;place-items:center;margin-bottom:16px} .plp .pillar .ico svg{width:24px;height:24px} .plp .pillar h3{font-size:22px;font-weight:900;letter-spacing:.06em;color:var(--plp-on-light);margin-bottom:12px} .plp .pillar p{font-size:15px;line-height:2;color:var(--plp-on-light-2)} .plp .ba-simple{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;margin-top:88px} .plp .ba-plate{background:var(--plp-card);border:1px solid var(--plp-card-line);border-radius:14px;padding:24px} .plp .ba-tag{font-family:var(--plp-font-en);font-weight:900;letter-spacing:.16em;font-size:15px;margin-bottom:8px} .plp .ba-tag.b{color:var(--plp-danger)} .plp .ba-tag.a{color:var(--plp-accent2)} .plp .ba-state{font-size:22px;font-weight:900;letter-spacing:.06em;color:var(--plp-on-light);margin-bottom:16px} .plp .ba-img{background:var(--plp-card);border:1px solid var(--plp-card-line);border-radius:10px;overflow:hidden; margin-bottom:18px} .plp .ba-img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .plp .ba-plate ul li{font-size:15px;line-height:1.95;color:var(--plp-on-light-2);padding-left:16px;position:relative; margin-bottom:6px} .plp .ba-plate ul li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%} .plp .ba-plate.b li::before{background:var(--plp-danger);opacity:.6} .plp .ba-plate.a li::before{background:var(--plp-accent2)} /* ---------------------------------------------------------------- 09. これからの暮らし（LIFESTYLE） ---------------------------------------------------------------- */ .plp .life-list{display:grid;gap:80px} .plp .life-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .plp .life-row.alt .life-text{order:-1} .plp .life-row figure{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 26px 60px -30px rgba(0,0,0,.5)} .plp .life-row figure img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s ease} .plp .life-row figure:hover img{transform:scale(1.04)} .plp .life-text .n{font-family:var(--plp-font-en);font-size:46px;font-weight:900;color:var(--plp-accent); line-height:.9;letter-spacing:-.02em;margin-bottom:18px} .plp .life-text h3{font-size:clamp(21px,2.4vw,28px);font-weight:900;line-height:1.6;margin-bottom:18px;letter-spacing:.02em} .plp .life-text p{font-size:15px;line-height:2.1;color:rgba(var(--plp-fg-rgb),.75);padding-left:20px; border-left:2px solid var(--plp-accent)} /* ---------------------------------------------------------------- 10. 施工事例（CASES） ---------------------------------------------------------------- */ .plp .s-cases .scene-inner{max-width:1160px} /* 写真を大きく見せたいので既定は2列。3列に詰めたいときは本文側で .cols3 を付ける */ .plp .case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px} .plp .case-grid.cols3{grid-template-columns:repeat(3,1fr);gap:24px} .plp .case-grid.cols1{grid-template-columns:1fr;max-width:620px;margin:0 auto} .plp .case-grid.cols2{grid-template-columns:repeat(2,1fr)} /* 2列で件数が奇数のとき、最後の1件が左に寄って見えるので中央に置く */ .plp .case-grid:not(.cols3):not(.cols1) > :last-child:nth-child(odd){ grid-column:1 / -1;max-width:calc(50% - 13px);margin:0 auto;width:100%} .plp .case-card{background:rgba(var(--plp-fg-rgb),.04);border:1px solid rgba(var(--plp-fg-rgb),.12);border-radius:16px; overflow:hidden;display:flex;flex-direction:column;text-align:left;width:100%;color:inherit; transition:transform .25s ease,border-color .25s ease} .plp .case-card:hover{transform:translateY(-4px);border-color:var(--plp-accent)} .plp .case-ba{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(var(--plp-fg-rgb),.12)} .plp .case-ba figure{margin:0;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--plp-photo)} .plp .case-ba img{width:100%;height:100%;object-fit:cover} .plp .case-ba figcaption{position:absolute;left:8px;top:8px;font-family:var(--plp-font-en);font-size:15px; font-weight:900;letter-spacing:.18em;color:#fff;background:rgba(0,0,0,.6);padding:4px 8px;border-radius:4px} .plp .case-ba figure.after figcaption{background:var(--plp-accent);color:var(--plp-on-accent)} .plp .case-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1} .plp .case-meta{display:flex;align-items:baseline;gap:10px;margin-bottom:12px} .plp .case-meta .no{font-family:var(--plp-font-en);font-size:15px;letter-spacing:.16em;color:var(--plp-accent);font-weight:900} .plp .case-meta .area{font-size:15px;color:rgba(var(--plp-fg-rgb),.55);letter-spacing:.06em} .plp .case-card h3{font-size:18px;font-weight:900;line-height:1.6;letter-spacing:.02em;margin-bottom:14px} .plp .case-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px} .plp .case-tags span{font-size:15px;color:rgba(var(--plp-fg-rgb),.78);border:1px solid rgba(var(--plp-fg-rgb),.2); border-radius:5px;padding:4px 9px} .plp .case-qa{font-size:15px;line-height:1.95;color:rgba(var(--plp-fg-rgb),.7);margin-bottom:8px} .plp .case-qa b{display:block;font-family:var(--plp-font-en);font-size:15px;letter-spacing:.16em;color:var(--plp-accent); font-weight:900;margin-bottom:4px} .plp .case-more{margin-top:auto;padding-top:16px;border-top:1px solid rgba(var(--plp-accent-rgb),.25); color:var(--plp-accent);font-size:15px;font-weight:900;letter-spacing:.06em;display:inline-flex;align-items:center;gap:8px} .plp .case-more::after{content:"→";font-size:17px} .plp .case-detail{display:none} /* 事例モーダル */ .plp .case-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px} .plp .case-modal[hidden]{display:none} .plp .case-modal .cm-backdrop{position:absolute;inset:0;background:var(--plp-modal-veil);backdrop-filter:blur(3px)} .plp .case-modal .cm-dialog{position:relative;z-index:2;max-width:880px;width:100%;max-height:88vh;overflow-y:auto; background:var(--plp-modal-surface);color:var(--plp-on-surface);border:1px solid rgba(var(--plp-accent-rgb),.3); border-radius:16px} .plp .case-modal .cm-close{position:absolute;top:12px;right:12px;z-index:6;width:38px;height:38px;border-radius:50%; border:1px solid rgba(var(--plp-fg-rgb),.3);background:var(--plp-panel);color:var(--plp-on-surface);font-size:20px;line-height:1} .plp .cm-hero{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(var(--plp-fg-rgb),.12)} .plp .cm-hero figure{margin:0;position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--plp-photo)} .plp .cm-hero img{width:100%;height:100%;object-fit:cover} .plp .cm-hero figcaption{position:absolute;left:10px;top:10px;font-family:var(--plp-font-en);font-size:15px; font-weight:900;letter-spacing:.18em;color:#fff;background:rgba(0,0,0,.6);padding:4px 9px;border-radius:4px} .plp .cm-hero figure.after figcaption{background:var(--plp-accent);color:var(--plp-on-accent)} .plp .cm-body{padding:30px 34px 36px} .plp .cm-body .cm-area{font-family:var(--plp-font-en);font-size:15px;letter-spacing:.18em;color:var(--plp-accent); font-weight:700;margin-bottom:10px} .plp .cm-body h3{font-size:26px;font-weight:900;line-height:1.55;color:var(--plp-on-surface);margin-bottom:14px} .plp .cm-spec{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0 24px;padding:18px 20px; background:rgba(var(--plp-accent-rgb),.08);border:1px solid rgba(var(--plp-accent-rgb),.18);border-radius:10px} .plp .cm-spec div{display:flex;flex-direction:column;gap:5px} .plp .cm-spec dt{font-family:var(--plp-font-en);font-size:15px;letter-spacing:.14em;color:rgba(var(--plp-fg-rgb),.55); font-weight:700} .plp .cm-spec dd{font-size:15px;font-weight:900;color:var(--plp-accent);letter-spacing:.02em;margin:0} .plp .cm-sec{margin-bottom:24px} .plp .cm-sec h4{font-family:var(--plp-font-en);font-size:15px;letter-spacing:.18em;color:var(--plp-accent); font-weight:900;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid rgba(var(--plp-accent-rgb),.18)} .plp .cm-sec p{font-size:15px;line-height:2.05;color:rgba(var(--plp-fg-rgb),.8)} .plp .cm-sec ul li{font-size:15px;line-height:1.95;color:rgba(var(--plp-fg-rgb),.8);padding-left:18px;position:relative; margin-bottom:6px} .plp .cm-sec ul li::before{content:"✓";position:absolute;left:0;top:0;color:var(--plp-accent);font-weight:900; font-family:var(--plp-font-en)} .plp .cm-gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:24px} .plp .cm-gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;background:var(--plp-photo)} .plp .cm-voice{padding:18px 22px;background:rgba(var(--plp-fg-rgb),.05);border-left:3px solid var(--plp-accent); border-radius:0 10px 10px 0;font-size:15px;line-height:2.05;color:rgba(var(--plp-fg-rgb),.82)} .plp .cm-voice .vl{font-size:15px;letter-spacing:.14em;color:var(--plp-accent);font-weight:900;margin-bottom:6px; font-family:var(--plp-font-en)} /* ---------------------------------------------------------------- 11. 選ばれる理由（TRUST） ---------------------------------------------------------------- */ .plp .s-trust{background:linear-gradient(180deg,var(--plp-surface-2) 0%,var(--plp-surface) 100%); color:var(--plp-on-surface);min-height:auto;padding:150px 24px;position:relative;overflow:hidden} .plp .s-trust .scene-inner{max-width:1160px} .plp .trust-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;margin-bottom:72px} .plp .trust-hero figure{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 26px 60px -30px rgba(0,0,0,.5)} .plp .trust-hero figure img{width:100%;aspect-ratio:4/3;object-fit:cover} .plp .trust-badge{display:inline-flex;align-items:center;gap:12px;border:1px solid rgba(var(--plp-accent-rgb),.45); background:rgba(var(--plp-accent-rgb),.09);padding:12px 22px;border-radius:999px;margin-bottom:24px} .plp .trust-badge svg{width:22px;height:22px;color:var(--plp-accent)} .plp .trust-badge span{font-size:15px;font-weight:900;letter-spacing:.14em;color:var(--plp-accent)} .plp .trust-hero h2{font-size:clamp(26px,3.6vw,46px);margin-bottom:20px} .plp .trust-hero p{font-size:15px;line-height:2.1;color:rgba(var(--plp-fg-rgb),.75)} .plp .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .plp .stat{background:rgba(var(--plp-fg-rgb),.04);border:1px solid rgba(var(--plp-fg-rgb),.12);border-radius:16px; padding:32px 26px;transition:border-color .25s ease,transform .25s ease} .plp .stat:hover{border-color:var(--plp-accent);transform:translateY(-4px)} .plp .stat .v{font-family:var(--plp-font-en);font-size:46px;font-weight:900;color:var(--plp-accent);line-height:1; letter-spacing:-.01em} .plp .stat .v small{font-family:var(--plp-font-jp);font-size:15px;font-weight:700;color:rgba(var(--plp-fg-rgb),.75); margin-left:4px;letter-spacing:.04em} .plp .stat .k{font-size:15px;font-weight:900;color:var(--plp-on-surface);margin-top:14px;letter-spacing:.04em} .plp .stat .d{font-size:15px;line-height:1.85;color:rgba(var(--plp-fg-rgb),.58);margin-top:8px} /* ---------------------------------------------------------------- 12. スタッフ（STAFF） ---------------------------------------------------------------- */ .plp .staff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .plp .staff-card{background:rgba(var(--plp-fg-rgb),.03);border:1px solid rgba(var(--plp-fg-rgb),.1);border-radius:16px; overflow:hidden;transition:transform .25s ease,border-color .25s ease} .plp .staff-card:hover{transform:translateY(-4px);border-color:var(--plp-accent)} .plp .staff-card figure{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--plp-photo)} .plp .staff-card figure img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .6s ease} .plp .staff-card:hover figure img{transform:scale(1.04)} .plp .staff-body{padding:22px 22px 26px} .plp .staff-body .role{font-family:var(--plp-font-en);font-size:15px;letter-spacing:.2em;color:var(--plp-accent); font-weight:700;margin-bottom:10px} .plp .staff-body h3{font-size:19px;font-weight:900;letter-spacing:.04em;margin-bottom:4px} .plp .staff-body .from{font-size:15px;color:rgba(var(--plp-fg-rgb),.5);letter-spacing:.06em;margin-bottom:14px} .plp .staff-body p{font-size:15px;line-height:1.95;color:rgba(var(--plp-fg-rgb),.72);padding-top:14px; border-top:1px solid rgba(var(--plp-fg-rgb),.08)} /* ---------------------------------------------------------------- 13. 品質体制（QUALITY） ---------------------------------------------------------------- */ .plp .quality-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .plp .quality-card{background:var(--plp-card);border:1px solid var(--plp-card-line);border-radius:16px;padding:34px 30px; display:flex;flex-direction:column;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease} .plp .quality-card:hover{transform:translateY(-4px);border-color:var(--plp-accent2);box-shadow:0 22px 50px -30px rgba(0,0,0,.28)} .plp .quality-card .n{font-family:var(--plp-font-en);font-size:15px;letter-spacing:.28em;color:var(--plp-accent2); font-weight:900;margin-bottom:16px} .plp .quality-card .ico{width:48px;height:48px;border-radius:12px;background:rgba(var(--plp-accent-rgb),.14); color:var(--plp-accent2);display:grid;place-items:center;margin-bottom:18px} .plp .quality-card .ico svg{width:25px;height:25px} .plp .quality-card h3{font-size:20px;font-weight:900;line-height:1.55;color:var(--plp-on-light);margin-bottom:14px; letter-spacing:.02em} .plp .quality-card p{font-size:15px;line-height:2;color:var(--plp-on-light-2)} /* ---------------------------------------------------------------- 14. 補助金・減税（SUBSIDY） ---------------------------------------------------------------- */ .plp .subsidy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-bottom:44px} .plp .subsidy-card{background:rgba(var(--plp-fg-rgb),.04);border:1px solid rgba(var(--plp-fg-rgb),.12); border-radius:16px;padding:34px 32px} .plp .subsidy-card .hd{display:flex;align-items:center;gap:14px;margin-bottom:20px} .plp .subsidy-card .ico{width:46px;height:46px;border-radius:12px;background:rgba(var(--plp-accent-rgb),.14); color:var(--plp-accent);display:grid;place-items:center;flex:0 0 auto} .plp .subsidy-card .ico svg{width:24px;height:24px} .plp .subsidy-card h3{font-size:20px;font-weight:900;letter-spacing:.04em} .plp .subsidy-card ul li{font-size:15px;line-height:1.9;color:rgba(var(--plp-fg-rgb),.85);padding-left:20px; position:relative;margin-bottom:8px} .plp .subsidy-card ul li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;border-radius:50%; background:var(--plp-accent)} .plp .subsidy-card small{display:block;font-size:15px;line-height:1.8;color:rgba(var(--plp-fg-rgb),.5);margin-top:16px; padding-top:14px;border-top:1px solid rgba(var(--plp-fg-rgb),.08)} .plp .subsidy-cta{text-align:center;padding:34px 28px;border:1px dashed rgba(var(--plp-accent-rgb),.45); border-radius:16px;background:rgba(var(--plp-accent-rgb),.06)} .plp .subsidy-cta p{font-size:clamp(17px,2vw,22px);font-weight:900;line-height:1.7;margin-bottom:22px;letter-spacing:.02em} /* ---------------------------------------------------------------- 15. リノベの流れ（FLOW） ---------------------------------------------------------------- */ .plp .s-flow .scene-inner{max-width:1000px} /* PHASE をまたいで縦線が途切れないよう、線はこのラッパーに引く */ .plp .flow-timeline{border-left:2px solid rgba(var(--plp-accent-rgb),.45);margin-left:14px} .plp .flow-phase-head{position:relative;display:flex;align-items:center;gap:16px;flex-wrap:wrap; padding:0 0 22px 34px} .plp .flow-phase-head+.flow-steps .flow-step:first-child{padding-top:0} .plp .flow-steps+.flow-phase-head{padding-top:30px} /* PHASE の目印は四角にして、STEP の丸と区別する */ .plp .flow-phase-head::before{content:"";position:absolute;left:-9px;top:2px;width:16px;height:16px;border-radius:4px; background:var(--plp-accent2);border:3px solid var(--plp-light);box-shadow:0 0 0 2px var(--plp-accent2)} .plp .flow-phase-head .ph{font-family:var(--plp-font-en);font-size:15px;letter-spacing:.24em;color:var(--plp-accent2); font-weight:900} .plp .flow-phase-head h3{font-size:clamp(20px,2.4vw,26px);font-weight:900;letter-spacing:.04em;color:var(--plp-on-light)} .plp .flow-phase-head .free{background:var(--plp-accent2);color:#fff;font-size:15px;font-weight:900;letter-spacing:.1em; padding:6px 14px;border-radius:999px} .plp .flow-step{position:relative;padding:0 0 34px 34px} .plp .flow-step::before{content:"";position:absolute;left:-9px;top:6px;width:16px;height:16px;border-radius:50%; background:var(--plp-light);border:3px solid var(--plp-accent2)} .plp .flow-steps:last-child .flow-step:last-child{padding-bottom:0} .plp .flow-step .sn{font-family:var(--plp-font-en);font-size:15px;letter-spacing:.2em;color:var(--plp-accent2); font-weight:900;margin-bottom:6px} .plp .flow-step h4{font-size:17px;font-weight:900;color:var(--plp-on-light);letter-spacing:.02em; display:flex;align-items:center;gap:10px;flex-wrap:wrap} /* 各ステップに写真を添える（左に写真・右に説明） */ .plp .flow-step__body{display:grid;grid-template-columns:230px 1fr;gap:22px;align-items:start} .plp .flow-step__img{margin:0;border-radius:12px;overflow:hidden;background:var(--plp-card-line); box-shadow:0 14px 30px -20px rgba(0,0,0,.4)} .plp .flow-step__img img{width:100%;aspect-ratio:10/7;object-fit:cover;display:block;transition:transform .6s ease} .plp .flow-step__img:hover img{transform:scale(1.04)} .plp .flow-step__text{padding-top:2px} .plp .flow-step h4+p{margin-top:6px} .plp .flow-step h4 .fee{font-family:var(--plp-font-en);font-size:15px;font-weight:900;letter-spacing:.06em; color:var(--plp-danger);border:1px solid var(--plp-danger);border-radius:5px;padding:2px 8px;opacity:.85} /* 無料のステップに付ける印 */ .plp .flow-step h4 .free{font-size:15px;font-weight:900;letter-spacing:.08em;color:#fff; background:var(--plp-accent2);border-radius:5px;padding:3px 9px;line-height:1.4} /* 「ここまで無料」の区切り線 */ .plp .flow-divider{position:relative;display:flex;align-items:center;gap:14px;padding:0 0 26px 34px;margin-top:-4px} .plp .flow-divider::before{content:"";position:absolute;left:-9px;top:9px;width:16px;height:16px;border-radius:4px; background:var(--plp-light);border:2px dashed var(--plp-accent2)} .plp .flow-divider span{flex:0 0 auto;font-size:15px;font-weight:900;letter-spacing:.1em;color:#fff; background:var(--plp-accent2);padding:6px 16px;border-radius:999px} .plp .flow-divider::after{content:"";flex:1 1 auto;border-top:2px dashed rgba(var(--plp-accent-rgb),.45)} .plp .flow-step p{font-size:15px;line-height:1.95;color:var(--plp-on-light-2)} /* 説明文のない後半ステップは間隔を詰める */ .plp .flow-step--slim{padding-bottom:18px} /* ---------------------------------------------------------------- 16. ショールーム（SHOWROOM） ---------------------------------------------------------------- */ .plp .s-showroom .scene-inner{max-width:1100px} .plp .sr-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px} .plp .sr-tab{padding:12px 26px;border-radius:999px;border:1px solid rgba(var(--plp-fg-rgb),.18);font-size:15px; font-weight:700;letter-spacing:.06em;color:rgba(var(--plp-fg-rgb),.75);transition:all .2s ease} .plp .sr-tab:hover{border-color:rgba(var(--plp-accent-rgb),.6);color:var(--plp-on-surface)} .plp .sr-tab.active{background:var(--plp-accent);border-color:var(--plp-accent);color:var(--plp-on-accent);font-weight:900} .plp .sr-panel[hidden]{display:none} .plp .sr-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:start} .plp .sr-photo{margin:0;border-radius:14px;overflow:hidden;border:1px solid rgba(var(--plp-fg-rgb),.1)} .plp .sr-photo img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--plp-photo)} .plp .sr-info{background:var(--plp-panel);border:1px solid rgba(var(--plp-accent-rgb),.25);border-radius:14px;padding:30px 28px} .plp .sr-info h3{font-size:22px;font-weight:900;letter-spacing:.04em;margin-bottom:22px} .plp .sr-info dl{display:flex;flex-direction:column;gap:18px;margin-bottom:24px} .plp .sr-info dl>div{display:grid;grid-template-columns:86px 1fr;gap:16px;align-items:baseline;padding-bottom:16px; border-bottom:1px solid rgba(var(--plp-fg-rgb),.08)} .plp .sr-info dl>div:last-child{border-bottom:0;padding-bottom:0} .plp .sr-info dt{font-size:15px;letter-spacing:.16em;color:var(--plp-accent);font-weight:900} .plp .sr-info dd{font-size:15px;line-height:1.9;color:rgba(var(--plp-fg-rgb),.9);margin:0} .plp .sr-info dd a{color:var(--plp-accent);text-decoration:underline;text-underline-offset:3px} .plp .sr-map-btn{display:inline-flex;align-items:center;gap:10px;background:var(--plp-accent);color:var(--plp-on-accent); padding:14px 24px;border-radius:999px;font-size:15px;font-weight:900;letter-spacing:.08em;transition:transform .25s ease} .plp .sr-map-btn:hover{transform:translateY(-2px);color:var(--plp-on-accent)} .plp .sr-map-btn::after{content:"↗";font-size:16px} .plp .sr-map{margin-top:28px;border-radius:14px;overflow:hidden;border:1px solid rgba(var(--plp-fg-rgb),.15); background:#e5e3df;min-height:340px} .plp .sr-map iframe{width:100%;height:340px;border:0;display:block} /* 施工可能エリア */ .plp .sr-areas{margin-top:44px;padding:30px 32px;border-radius:14px; background:rgba(var(--plp-fg-rgb),.04);border:1px solid rgba(var(--plp-fg-rgb),.12)} .plp .sr-areas__ttl{font-size:19px;font-weight:900;letter-spacing:.06em;margin-bottom:20px; padding-bottom:12px;border-bottom:1px solid rgba(var(--plp-accent-rgb),.3)} .plp .sr-areas__grid{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:30px;align-items:start} .plp .sr-areas__map{margin:0;text-align:center} .plp .sr-areas__map img{width:100%;height:auto;display:block} .plp .sr-areas__map figcaption{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px; font-size:15px;font-weight:700;color:rgba(var(--plp-fg-rgb),.8)} .plp .sr-areas__zoom{display:inline-flex;align-items:center;gap:5px;margin-left:10px;padding:3px 10px;border-radius:999px;font-size:15px;font-weight:700;letter-spacing:.02em;background:rgba(var(--plp-accent-rgb),.14);color:var(--plp-accent)} .plp .sr-areas__zoom::before{content:"+";font-size:15px;font-weight:900} .plp .sr-areas__map figcaption .on{width:16px;height:16px;border-radius:4px;background:#7BD100; border:1px solid rgba(var(--plp-fg-rgb),.2)} .plp .sr-areas__list{display:flex;flex-direction:column;gap:14px} .plp .sr-areas__list>div{display:grid;grid-template-columns:76px 1fr;gap:16px;align-items:baseline} .plp .sr-areas__list dt{font-size:15px;font-weight:900;letter-spacing:.1em;color:var(--plp-accent); background:rgba(var(--plp-accent-rgb),.12);border-radius:6px;padding:4px 0;text-align:center} .plp .sr-areas__list dd{margin:0;font-size:15px;line-height:1.9;color:rgba(var(--plp-fg-rgb),.88)} .plp .sr-areas__note{margin-top:20px;padding-top:16px;border-top:1px dashed rgba(var(--plp-fg-rgb),.18); font-size:15px;line-height:1.9;color:rgba(var(--plp-fg-rgb),.75)} .plp .sr-areas__note b{color:var(--plp-accent);font-weight:900;margin-right:8px} @media (max-width:880px){ .plp .sr-areas{padding:22px 20px;margin-top:32px} .plp .sr-areas__grid{grid-template-columns:1fr;gap:20px} .plp .sr-areas__map{max-width:300px;margin:0 auto} .plp .sr-areas__list>div{grid-template-columns:1fr;gap:4px} .plp .sr-areas__list dt{justify-self:start;padding:3px 14px} } /* ---------------------------------------------------------------- 16b. 画像のクリック拡大 ---------------------------------------------------------------- */ .plp img.is-zoomable{cursor:zoom-in} .plp .plp-lightbox{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center; padding:32px} .plp .plp-lightbox[hidden]{display:none} .plp .plp-lightbox__backdrop{position:absolute;inset:0;background:rgba(6,8,4,.88);backdrop-filter:blur(3px);cursor:zoom-out} .plp .plp-lightbox__close{position:absolute;top:18px;right:20px;z-index:3;width:46px;height:46px;border-radius:50%; border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.5);color:#fff;font-size:26px;line-height:1} .plp .plp-lightbox__close:hover{background:rgba(0,0,0,.75)} .plp .plp-lightbox__fig{position:relative;z-index:2;margin:0;max-width:100%;max-height:100%; display:flex;flex-direction:column;align-items:center;gap:14px} .plp .plp-lightbox__fig img{max-width:100%;max-height:82vh;width:auto;height:auto;display:block; border-radius:10px;background:#fff;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)} .plp .plp-lightbox__fig figcaption{font-size:15px;line-height:1.7;color:rgba(255,255,255,.85);text-align:center; max-width:760px} .plp .plp-lightbox__fig img.is-vector{height:84vh;width:auto;max-width:94vw;max-height:none} @media (max-width:880px){ .plp .plp-lightbox{padding:16px} .plp .plp-lightbox__fig img{max-height:74vh} .plp .plp-lightbox__fig img.is-vector{height:auto;width:100%;max-height:78vh} .plp .plp-lightbox__close{top:10px;right:12px;width:42px;height:42px} } /* ---------------------------------------------------------------- 17. FAQ ---------------------------------------------------------------- */ .plp .s-faq .scene-inner{max-width:880px} .plp .faq-list{border-top:1px solid var(--plp-card-line)} .plp .faq-item{border-bottom:1px solid var(--plp-card-line)} .plp .faq-item summary{padding:24px 8px;display:flex;justify-content:space-between;align-items:baseline;cursor:pointer; font-weight:700;font-size:16px;line-height:1.6;list-style:none;color:var(--plp-on-light)} .plp .faq-item summary::-webkit-details-marker{display:none} .plp .faq-item summary::after{content:"+";font-family:var(--plp-font-en);font-size:24px;color:var(--plp-accent2); font-weight:400;transition:transform .2s ease;margin-left:18px} .plp .faq-item[open] summary::after{transform:rotate(45deg)} .plp .faq-item .q::before{content:"Q.";font-family:var(--plp-font-en);font-weight:900;color:var(--plp-accent2);margin-right:10px} .plp .faq-item .body{padding:0 8px 24px 32px;font-size:15px;color:var(--plp-on-light-2);line-height:2} .plp .faq-item .body b{color:var(--plp-accent2)} /* ---------------------------------------------------------------- 18. 資料の中身（CATALOG） ---------------------------------------------------------------- */ .plp .s-catalog .scene-inner{max-width:1100px} .plp .catalog-stage{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center} .plp .catalog-stage figure{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 26px 60px -30px rgba(0,0,0,.5)} .plp .catalog-stage figure img{width:100%;display:block} .plp .catalog-badge{display:inline-block;background:var(--plp-accent);color:var(--plp-on-accent);padding:7px 16px; border-radius:999px;font-size:15px;letter-spacing:.14em;font-weight:900;margin-bottom:20px} .plp .catalog-stage p{font-size:15px;line-height:2;color:rgba(var(--plp-fg-rgb),.75)} .plp .catalog-kits{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 24px} .plp .catalog-kits span{font-size:15px;font-weight:700;color:var(--plp-on-surface); border:1px solid rgba(var(--plp-accent-rgb),.45);background:rgba(var(--plp-accent-rgb),.08);border-radius:8px;padding:8px 14px} .plp .catalog-feats li{padding:14px 0 14px 30px;border-bottom:1px solid rgba(var(--plp-fg-rgb),.1);position:relative; font-size:15px;color:rgba(var(--plp-fg-rgb),.85);line-height:1.9} .plp .catalog-feats li b{color:var(--plp-on-surface);font-weight:900} .plp .catalog-feats li::before{content:"✓";color:var(--plp-accent);font-weight:900;font-size:16px;position:absolute; left:0;top:14px;font-family:var(--plp-font-en)} /* ---------------------------------------------------------------- 19. フォーム（Contact Form 7 を LP のトーンに合わせる） ---------------------------------------------------------------- */ .plp .s-form .scene-inner{max-width:900px} .plp .form-tel{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;margin-bottom:36px; padding:24px 28px;border:1px dashed rgba(var(--plp-fg-rgb),.22);border-radius:14px;text-align:center} .plp .form-tel .l{font-family:var(--plp-font-en);font-size:15px;letter-spacing:.2em;color:rgba(var(--plp-fg-rgb),.55)} .plp .form-tel .num{font-family:var(--plp-font-en);font-size:clamp(26px,6.4vw,38px);font-weight:900; color:var(--plp-on-surface);letter-spacing:.02em;white-space:nowrap;line-height:1.2} .plp .form-tel .num::before{content:"☎ ";color:var(--plp-accent)} .plp .form-tel small{display:block;font-size:15px;color:rgba(var(--plp-fg-rgb),.45);margin-top:6px;letter-spacing:.06em} /* 種別タブ */ .plp .mode-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:26px} .plp .mode-tab{padding:20px 16px;border-radius:14px;border:1px solid rgba(var(--plp-fg-rgb),.15);background:var(--plp-panel); text-align:center;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:8px} .plp .mode-tab:hover{border-color:rgba(var(--plp-accent-rgb),.5)} .plp .mode-tab.active{border-color:var(--plp-accent);background:rgba(var(--plp-accent-rgb),.09); box-shadow:0 0 0 3px rgba(var(--plp-accent-rgb),.12)} .plp .mode-tab .ico{width:38px;height:38px;border-radius:10px;background:rgba(var(--plp-accent-rgb),.14); color:var(--plp-accent);display:grid;place-items:center} .plp .mode-tab .ico svg{width:20px;height:20px} .plp .mode-tab .t{font-size:15px;font-weight:900;color:var(--plp-on-surface);line-height:1.45;letter-spacing:.02em} .plp .mode-tab small{font-size:15px;color:rgba(var(--plp-fg-rgb),.55);line-height:1.6} .plp .form-panel[hidden]{display:none} /* フォーム枠 */ .plp .form-shell{background:rgba(var(--plp-fg-rgb),.03);border:1px solid rgba(var(--plp-fg-rgb),.12);border-radius:16px; padding:38px} /* CF7 の既存マークアップ（div.form > dl > dt/dd）をLPトーンへ */ .plp .form-shell .form dl{display:flex;flex-direction:column;gap:8px;margin-bottom:20px} .plp .form-shell .form dt{font-size:15px;font-weight:700;letter-spacing:.03em;color:rgba(var(--plp-fg-rgb),.92); display:flex;gap:10px;align-items:center;flex-wrap:wrap} .plp .form-shell .form dd{margin:0} /* 必須／任意バッジ — CF7は項目名の後ろに出力するので order で前に出す */ .plp .form-shell .form dt .form-label{order:-1;flex:0 0 auto;font-size:15px;font-weight:900;letter-spacing:.08em; padding:4px 10px;border-radius:4px;line-height:1.45;min-width:46px;text-align:center;border:0} .plp .form-shell .form-label--req{color:var(--plp-on-accent);background:var(--plp-accent)} .plp .form-shell .form-label--unreq{color:rgba(var(--plp-fg-rgb),.9);background:rgba(var(--plp-fg-rgb),.16)} .plp .form-shell input[type=text],.plp .form-shell input[type=email],.plp .form-shell input[type=tel], .plp .form-shell input[type=url],.plp .form-shell input[type=number],.plp .form-shell input[type=date], .plp .form-shell textarea,.plp .form-shell select{background:var(--plp-input);border:1px solid rgba(var(--plp-fg-rgb),.18); border-radius:8px;padding:14px 16px;font-size:15px;color:var(--plp-on-surface);width:100%; transition:border-color .2s ease,box-shadow .2s ease} .plp .form-shell input:focus,.plp .form-shell textarea:focus,.plp .form-shell select:focus{outline:0; border-color:var(--plp-accent);box-shadow:0 0 0 3px rgba(var(--plp-accent-rgb),.15)} .plp .form-shell textarea{resize:vertical;min-height:120px;line-height:1.7} .plp .form-shell select option{background:var(--plp-surface);color:var(--plp-on-surface)} .plp .form-shell input::placeholder,.plp .form-shell textarea::placeholder{color:rgba(var(--plp-fg-rgb),.38)} .plp .form-shell .form-hosoku{font-size:15px;color:rgba(var(--plp-fg-rgb),.5);line-height:1.7;margin-top:6px} /* チェックボックス／ラジオ */ .plp .form-shell .wpcf7-checkbox,.plp .form-shell .wpcf7-radio{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} .plp .form-shell .form-checkbox-normal .wpcf7-checkbox{grid-template-columns:1fr} .plp .form-shell .wpcf7-list-item{margin:0} .plp .form-shell .wpcf7-list-item label{display:flex;align-items:flex-start;gap:10px;padding:12px 14px; background:var(--plp-panel);border:1px solid rgba(var(--plp-fg-rgb),.12);border-radius:8px;font-size:15px; line-height:1.6;color:rgba(var(--plp-fg-rgb),.88);cursor:pointer; transition:border-color .2s ease,background .2s ease;height:100%} .plp .form-shell .wpcf7-list-item label:hover{border-color:rgba(var(--plp-accent-rgb),.45)} .plp .form-shell .wpcf7-list-item label:has(input:checked){border-color:var(--plp-accent); background:rgba(var(--plp-accent-rgb),.09)} .plp .form-shell .wpcf7-list-item input[type=checkbox], .plp .form-shell .wpcf7-list-item input[type=radio]{width:17px;height:17px;flex:0 0 auto;margin-top:2px; accent-color:var(--plp-accent)} /* 注意書き・同意文 */ .plp .form-shell .form-consent{font-size:15px;color:rgba(var(--plp-fg-rgb),.72);margin:8px 0 18px;line-height:1.8; padding:16px 20px;background:var(--plp-panel);border-radius:10px;border:1px solid rgba(var(--plp-fg-rgb),.08)} /* CF7本文の

は既定マージンが大きく空きすぎるので詰める */ .plp .form-shell .form-consent p{margin:0} .plp .form-shell .form-consent p+p{margin-top:.7em} .plp .form-shell .form-consent strong{display:block;color:rgba(var(--plp-fg-rgb),.92);margin-bottom:.2em} .plp .form-shell .form-consent a{color:var(--plp-accent);text-decoration:underline;text-underline-offset:3px} .plp .form-shell .form-whitelist{border-color:rgba(255,176,23,.5);background:rgba(255,176,23,.07)} .plp .form-shell .form-whitelist strong{color:var(--plp-alert)} /* CF7本文で使われている PC/SP 出し分け改行。LP側でも同じ意味で効かせる */ .plp .br--sp{display:none} .plp .br--pc{display:inline} /* 送信ボタン */ .plp .form-shell .form-btn{margin-top:8px} .plp .form-shell input[type=submit],.plp .form-shell .wpcf7-submit{width:100%;background:var(--plp-accent); color:var(--plp-on-accent);padding:22px;border:0;border-radius:999px;font-weight:900;font-size:16px;letter-spacing:.06em; cursor:pointer;transition:transform .2s ease,box-shadow .2s ease} .plp .form-shell input[type=submit]:hover{transform:translateY(-2px);box-shadow:0 14px 40px -10px rgba(var(--plp-accent-rgb),.5)} /* CF7 のバリデーション表示 */ .plp .form-shell .wpcf7-not-valid-tip{color:var(--plp-error);font-size:15px;margin-top:6px} .plp .form-shell .wpcf7-response-output{margin:18px 0 0;padding:14px 18px;border-radius:10px;font-size:15px; line-height:1.8;border:1px solid rgba(var(--plp-fg-rgb),.25);color:rgba(var(--plp-fg-rgb),.9)} .plp .form-shell form.invalid .wpcf7-response-output, .plp .form-shell form.failed .wpcf7-response-output{border-color:var(--plp-error);color:var(--plp-error)} .plp .form-shell form.sent .wpcf7-response-output{border-color:var(--plp-accent);color:var(--plp-accent)} .plp .form-shell .wpcf7-spinner{filter:var(--plp-spinner-filter)} /* ---------------------------------------------------------------- 20. 最終CTA / フッター ---------------------------------------------------------------- */ .plp .s7{background:linear-gradient(180deg,var(--plp-final-1) 0%,var(--plp-final-2) 100%);color:var(--plp-on-surface); text-align:center;padding:150px 24px;min-height:100vh} .plp .s7::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120%; aspect-ratio:1/1;background:radial-gradient(circle,rgba(var(--plp-accent-rgb),.18) 0%,transparent 60%);z-index:1} .plp .s7 h2{font-size:clamp(34px,6.4vw,84px);line-height:1.35;margin-bottom:32px} .plp .s7 p{font-size:17px;line-height:2;color:rgba(var(--plp-fg-rgb),.78);max-width:600px;margin:0 auto 42px} .plp .s7-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} .plp .s7 .cta-meta{margin-top:40px;font-family:var(--plp-font-en);font-size:15px;letter-spacing:.2em; color:rgba(var(--plp-fg-rgb),.55)} .plp .s7 .cta-meta b{color:var(--plp-accent);font-weight:700} /* フッターはロゴが白抜きSVGのため、どのテーマでも濃色で固定 */ .plp .bigfooter{background:#000;color:rgba(255,255,255,.6);padding:72px 24px 28px} .plp .bigfooter-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px} .plp .bigfooter h4{font-family:var(--plp-font-en);font-size:15px;letter-spacing:.24em;color:var(--plp-brand); margin-bottom:16px;font-weight:700} .plp .bigfooter .footer-brand{margin-bottom:18px} .plp .bigfooter .footer-brand img{height:22px;width:auto} .plp .bigfooter address{font-style:normal;font-size:15px;line-height:1.95;margin-bottom:14px} .plp .bigfooter .tel{font-family:var(--plp-font-en);font-size:20px;font-weight:700;color:#fff;letter-spacing:.02em} .plp .bigfooter ul li{margin-bottom:8px;font-size:15px} .plp .bigfooter ul li a:hover{color:var(--plp-brand)} .plp .bigfooter-bottom{max-width:1240px;margin:48px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.08); font-family:var(--plp-font-en);font-size:15px;letter-spacing:.18em;color:rgba(255,255,255,.4);text-align:center} /* ---------------------------------------------------------------- 21. レスポンシブ ---------------------------------------------------------------- */ @media (max-width:1024px){ .plp .lp-header__nav{display:none} .plp .problem-grid{grid-template-columns:repeat(2,1fr)} .plp .stat-grid{grid-template-columns:repeat(2,1fr)} .plp .staff-grid{grid-template-columns:repeat(2,1fr)} .plp .case-grid,.plp .case-grid.cols3{grid-template-columns:1fr;max-width:640px;margin:0 auto} .plp .case-grid:not(.cols3):not(.cols1) > :last-child:nth-child(odd){max-width:100%} .plp .quality-grid,.plp .pillars{grid-template-columns:1fr} .plp .cm-spec{grid-template-columns:repeat(2,1fr)} } @media (max-width:880px){ .plp .sec-dark,.plp .sec-light,.plp .s-risk,.plp .s-trust,.plp .s7{padding:96px 22px} .plp .s-problem{padding-top:96px} .plp .scene h2{font-size:clamp(21px,5.9vw,34px);margin-bottom:24px} .plp .s1 h1{font-size:clamp(25px,calc((100vw - 48px)/8.4),42px)} .plp .s1-eyebrow{font-size:15px;letter-spacing:.2em;margin-bottom:28px} .plp .s1-sub p{font-size:clamp(15px,3.8vw,17px)} .plp .s1-info{padding:16px 20px;gap:12px} .plp .s1-info .s1-badge{font-size:15px;letter-spacing:.1em;padding-bottom:12px} .plp .s1-info .s1-badge b{font-size:15px} .plp .s1-info .s1-meta .free{font-size:16px;letter-spacing:.05em} .plp .s1-info .s1-meta .place{font-size:15px;letter-spacing:.04em} .plp .s1-actions{margin-top:28px;gap:10px} .plp .s1-actions .cta-pill,.plp .s1-actions .cta-ghost{width:100%;max-width:340px} .plp .scroll-hint{display:none} .plp .mobile-bar{display:flex} body.plp-page{padding-bottom:78px} .plp .lp-header{padding:11px 16px} .plp .lp-header__cta{padding:10px 16px;font-size:15px} .plp .problem-grid{grid-template-columns:1fr} .plp .s-risk h2{font-size:clamp(21px,6vw,34px);margin-bottom:34px} .plp .risk-bubble{font-size:15px;padding:16px 20px;margin-bottom:38px} .plp .risk-grid{grid-template-columns:1fr;gap:30px} .plp .mid-cta h3{font-size:clamp(18.5px,5.4vw,26px)} .plp .mid-cta .cta-pill,.plp .mid-cta .cta-ghost{width:100%;max-width:360px} .plp .approach-hero{grid-template-columns:1fr;gap:30px;margin-bottom:56px} .plp .ba-simple{grid-template-columns:1fr;gap:18px;margin-top:52px} .plp .life-list{gap:52px} .plp .life-row,.plp .life-row.alt{grid-template-columns:1fr;gap:24px} .plp .life-row.alt .life-text{order:0} .plp .life-text .n{font-size:36px} .plp .trust-hero{grid-template-columns:1fr;gap:28px;margin-bottom:44px} .plp .stat-grid{gap:12px} .plp .stat{padding:24px 20px} .plp .stat .v{font-size:36px} .plp .staff-grid{gap:14px} /* 最低15pxにすると英字の肩書きが2列のカード幅を超えるため、スマホは1列にする */ .plp .staff-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto} .plp .staff-card{display:grid;grid-template-columns:120px 1fr;align-items:stretch} .plp .staff-card figure{aspect-ratio:1/1;height:100%} .plp .staff-body{padding:18px 18px 20px} .plp .staff-body .role{letter-spacing:.04em} .plp .staff-body h3{font-size:19px} .plp .staff-body p{padding-top:10px} .plp .subsidy-grid{grid-template-columns:1fr} .plp .flow-step__body{grid-template-columns:1fr;gap:12px} .plp .flow-step__img img{aspect-ratio:16/10} .plp .flow-step{padding-bottom:30px} .plp .sr-grid{grid-template-columns:1fr;gap:20px} .plp .sr-map,.plp .sr-map iframe{min-height:280px;height:280px} .plp .sr-tab{padding:10px 18px;font-size:15px} .plp .catalog-stage{grid-template-columns:1fr;gap:30px} .plp .mode-tabs{grid-template-columns:1fr;gap:10px} .plp .mode-tab{flex-direction:row;text-align:left;gap:14px;padding:16px} .plp .mode-tab .t br{display:none} .plp .form-shell{padding:24px 20px} .plp .br--sp{display:inline} .plp .br--pc{display:none} .plp .form-shell .wpcf7-checkbox,.plp .form-shell .wpcf7-radio{grid-template-columns:1fr} .plp .faq-item summary{font-size:15px} .plp .case-ba figure{aspect-ratio:1/1} .plp .cm-hero{grid-template-columns:1fr} .plp .cm-body{padding:24px 22px 28px} .plp .cm-body h3{font-size:21px} .plp .cm-gallery{grid-template-columns:repeat(3,1fr)} .plp .case-modal{padding:14px} .plp .bigfooter-inner{grid-template-columns:1fr;gap:32px} } /* ---------------------------------------------------------------- 23. ローディングロゴが白抜きのため、配色テーマによらず濃色で固定 ---------------------------------------------------------------- */ .plp .plp-loader{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:#0d0e0a; transition:opacity .55s ease,visibility .55s ease} .plp .plp-loader.done{opacity:0;visibility:hidden} .plp .plp-loader__inner{display:flex;flex-direction:column;align-items:center;padding:0 24px} .plp .plp-loader__logo{width:min(200px,54vw);height:auto;opacity:0; animation:plpLoaderLogo .8s ease-out .05s forwards} @keyframes plpLoaderLogo{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .plp .plp-loader__bar{width:min(200px,54vw);height:2px;margin-top:22px;background:rgba(255,255,255,.14); border-radius:2px;overflow:hidden} .plp .plp-loader__bar span{display:block;height:100%;width:40%;background:var(--plp-brand);border-radius:2px; animation:plpLoaderBar 1.15s ease-in-out infinite} @keyframes plpLoaderBar{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}} body.plp-loading{overflow:hidden} @media (prefers-reduced-motion:reduce){ /* 動きだけ止める。表示と消えるタイミングは変えない */ .plp .plp-loader__logo{animation:none;opacity:1} .plp .plp-loader__bar span{animation:none;width:100%} .plp .plp-loader{transition:opacity .2s linear,visibility .2s linear} } /* ============================================================================ 24. カラーテーマ ---------------------------------------------------------------------------- 投稿編集画面の「デザイン」プルダウンでが切り替わります。新しいテーマを増やす場合は、このブロックを丸ごとコピーして値を変え、 inc/pickup-lp.php の sunproreform_pickup_themes() に1行足してください。 ============================================================================ */ /* --- midnight（ダーク・既定） ------------------------------------------- */ body.plp-page, body.plp-page[data-plp-theme="midnight"]{ --plp-brand:#7BD100; --plp-accent:#7BD100; --plp-accent-rgb:123,209,0; --plp-accent2:#5FA200; --plp-accent2-rgb:123,209,0; --plp-on-accent:#0d0e0a; --plp-info-bg:rgba(123,209,0,.07); --plp-info-line:rgba(123,209,0,.45); --plp-surface:#16170f; --plp-surface-2:#0d0e0a; --plp-surface-hover:#1b1d13; --plp-on-surface:#fafaf7; --plp-fg-rgb:255,255,255; --plp-panel:rgba(0,0,0,.35); --plp-input:rgba(0,0,0,.4); --plp-photo:#222; --plp-light:#fafaf7; --plp-on-light:#0d0e0a; --plp-on-light-2:#4a4a42; --plp-on-light-3:#8a8a80; --plp-card:#fff; --plp-card-line:#e6e6df; --plp-hero-base:#0b0d07; --plp-hero-fg:#fafaf7; --plp-hero-fg-rgb:250,250,247; --plp-hero-shadow:0 2px 36px rgba(0,0,0,.6); --plp-hero-shadow-s:0 1px 22px rgba(0,0,0,.55); --plp-veil-1:rgba(9,11,7,.62); --plp-veil-2:rgba(9,11,7,.34); --plp-veil-3:rgba(7,9,5,.88); --plp-veil-tint:rgba(48,80,14,.20); --plp-vignette:rgba(5,7,3,.72); --plp-overlay-1:rgba(13,14,10,.80); --plp-overlay-2:rgba(13,14,10,.92); --plp-overlay-solid:#0d0e0a; --plp-bubble:#fafaf7; --plp-on-bubble:#0d0e0a; --plp-final-1:#0d0e0a; --plp-final-2:#252920; --plp-modal-veil:rgba(6,8,4,.86); --plp-modal-surface:#16170f; --plp-spinner-filter:invert(1); } /* --- light（ライト・白基調／いちばん明るい） ----------------------------- */ body.plp-page[data-plp-theme="light"]{ --plp-brand:#7BD100; --plp-accent:#4E8C00; --plp-accent-rgb:78,140,0; --plp-accent2:#3F7200; --plp-accent2-rgb:123,209,0; --plp-on-accent:#ffffff; --plp-info-bg:rgba(255,255,255,.80); --plp-info-line:rgba(78,140,0,.45); --plp-surface:#f1f0e9; --plp-surface-2:#e8e7dd; --plp-surface-hover:#eae9e0; --plp-on-surface:#1d1f16; --plp-fg-rgb:29,31,22; --plp-panel:rgba(255,255,255,.78); --plp-input:#ffffff; --plp-photo:#d8d7cd; --plp-light:#ffffff; --plp-on-light:#14160e; --plp-on-light-2:#4a4a42; --plp-on-light-3:#8a8a80; --plp-card:#ffffff; --plp-card-line:#e2e1d6; --plp-hero-base:#eceadf; --plp-hero-fg:#14160e; --plp-hero-fg-rgb:20,22,14; --plp-hero-shadow:0 1px 2px rgba(255,255,255,.95),0 2px 22px rgba(255,255,255,.9); --plp-hero-shadow-s:0 1px 2px rgba(255,255,255,.95),0 1px 14px rgba(255,255,255,.9); --plp-veil-1:rgba(250,249,243,.86); --plp-veil-2:rgba(250,249,243,.76); --plp-veil-3:rgba(241,240,233,.96); --plp-veil-tint:rgba(123,209,0,.09); --plp-vignette:rgba(241,240,233,.72); --plp-overlay-1:rgba(248,247,240,.76); --plp-overlay-2:rgba(241,240,233,.90); --plp-overlay-solid:#f4f3ec; --plp-bubble:#2a2d1f; --plp-on-bubble:#fbfbf6; --plp-final-1:#f4f3ec; --plp-final-2:#e4e6d8; --plp-modal-veil:rgba(20,22,14,.55); --plp-modal-surface:#ffffff; --plp-spinner-filter:none; } /* --- warm（ウォーム・生成り基調／やわらかい印象） ------------------------ */ body.plp-page[data-plp-theme="warm"]{ --plp-brand:#7BD100; --plp-accent:#4F7A1E; --plp-accent-rgb:79,122,30; --plp-accent2:#43681a; --plp-accent2-rgb:139,196,63; --plp-on-accent:#ffffff; --plp-info-bg:rgba(255,253,248,.84); --plp-info-line:rgba(79,122,30,.45); --plp-surface:#f2ebdf; --plp-surface-2:#e7dcc9; --plp-surface-hover:#ece4d6; --plp-on-surface:#33291d; --plp-fg-rgb:51,41,29; --plp-panel:rgba(255,253,248,.8); --plp-input:#fffdf8; --plp-photo:#ddd2bf; --plp-light:#fdfaf3; --plp-on-light:#2c2419; --plp-on-light-2:#584c3d; --plp-on-light-3:#9b8f7c; --plp-card:#ffffff; --plp-card-line:#e8dcc7; --plp-hero-base:#ece3d4; --plp-hero-fg:#2c2419; --plp-hero-fg-rgb:44,36,25; --plp-hero-shadow:0 1px 2px rgba(255,252,246,.95),0 2px 22px rgba(255,252,246,.9); --plp-hero-shadow-s:0 1px 2px rgba(255,252,246,.95),0 1px 14px rgba(255,252,246,.9); --plp-veil-1:rgba(252,247,238,.86); --plp-veil-2:rgba(252,247,238,.76); --plp-veil-3:rgba(242,235,223,.96); --plp-veil-tint:rgba(194,98,45,.10); --plp-vignette:rgba(226,214,195,.72); --plp-overlay-1:rgba(250,244,233,.76); --plp-overlay-2:rgba(242,235,223,.90); --plp-overlay-solid:#f5efe4; --plp-bubble:#3c3223; --plp-on-bubble:#fdf8f0; --plp-final-1:#f5efe4; --plp-final-2:#e3d8c3; --plp-modal-veil:rgba(44,36,25,.58); --plp-modal-surface:#fffdf8; --plp-spinner-filter:none; } /* --- navy（ネイビー・濃紺基調／黒より柔らかい上品な暗さ） ---------------- */ body.plp-page[data-plp-theme="navy"]{ --plp-brand:#8EDE2F; --plp-accent:#8EDE2F; --plp-accent-rgb:142,222,47; --plp-accent2:#4C7F10; --plp-accent2-rgb:123,209,0; --plp-on-accent:#0e131c; --plp-info-bg:rgba(142,222,47,.08); --plp-info-line:rgba(142,222,47,.45); --plp-surface:#18202d; --plp-surface-2:#0e131c; --plp-surface-hover:#1e2839; --plp-on-surface:#eef2f7; --plp-fg-rgb:238,242,247; --plp-panel:rgba(0,0,0,.28); --plp-input:rgba(0,0,0,.32); --plp-photo:#243040; --plp-light:#f4f6f9; --plp-on-light:#101720; --plp-on-light-2:#465061; --plp-on-light-3:#8a93a2; --plp-card:#ffffff; --plp-card-line:#dde3ec; --plp-hero-base:#0e131c; --plp-hero-fg:#eef2f7; --plp-hero-fg-rgb:238,242,247; --plp-hero-shadow:0 2px 36px rgba(0,0,0,.6); --plp-hero-shadow-s:0 1px 22px rgba(0,0,0,.55); --plp-veil-1:rgba(10,16,26,.60); --plp-veil-2:rgba(10,16,26,.30); --plp-veil-3:rgba(8,12,20,.90); --plp-veil-tint:rgba(30,70,110,.26); --plp-vignette:rgba(6,10,18,.70); --plp-overlay-1:rgba(14,19,28,.80); --plp-overlay-2:rgba(14,19,28,.93); --plp-overlay-solid:#0e131c; --plp-bubble:#f4f6f9; --plp-on-bubble:#101720; --plp-final-1:#0e131c; --plp-final-2:#233046; --plp-modal-veil:rgba(5,9,15,.86); --plp-modal-surface:#18202d; --plp-spinner-filter:invert(1); }