に付けるので、「body.pcs-front」と書くと当たらない（1.0.3で実際に外れた）。要素を限定せず .pcs-front で書く。 SWELLの設定は触らないので、トップを「最新の投稿」に戻せばサイドバーは元どおり。 2026-09-19 実機（SWELL 2.19.0・.l-content が flex、main 848px + sidebar 316px）で検証。 ------------------------------------------------------------ */ .pcs-front .l-sidebar{ display: none !important; } .pcs-front .l-mainContent{ width: 100% !important; max-width: none !important; flex: 1 1 100% !important; } /* 記事枠（白背景＋32pxの余白）を外し、ヒーローがヘッダー直下から始まるようにする */ .pcs-front .l-mainContent{ padding: 0 !important; background: transparent !important; box-shadow: none !important; } .pcs-front .l-content{ padding-top: 0 !important; } /* 空の見出し（フルワイドの「見出し」欄）と空の段落ブロックが作る白い隙間を消す */ .pcs-front .swell-block-fullWide__inner > .wp-block-heading:empty, .pcs-front .swell-block-fullWide__inner > p:empty, .pcs-front .post_content > p:empty{ display: none !important; } /* ------------------------------------------------------------ 親ブロックの「全幅（alignfull）」を無効化する（1.0.5）グループ（全幅）の中にフルワイド…のように全幅ブロックが入れ子になると、 SWELL側の張り出し計算が二重にかかり、親が左に 15px ずれる。 .pcs-scope は「親が画面中央にある」前提で張り出すので、その分だけ右端に白い隙間が出た（2026-09-19 スマホ実機で発生）。親は張り出させず、張り出しは .pcs-scope だけが行う。 ------------------------------------------------------------ */ .pcs-front .post_content .alignfull, .pcs-front .post_content .swell-block-fullWide{ left: 0 !important; width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* テーマがブロック間に入れる余白を消す（セクション同士を隙間なく積む） */ .post_content > .pcs-scope, .swell-block-fullWide__inner > .pcs-scope{ margin-top: 0 !important; margin-bottom: 0 !important; } /* フルワイドの中に入れた場合、フルワイド自身の余白と背景色を打ち消す（:has 対応ブラウザ） */ .swell-block-fullWide:has(> .swell-block-fullWide__inner > .pcs-scope){ padding-top: 0 !important; padding-bottom: 0 !important; background: transparent !important; } .pcs-scope *, .pcs-scope *::before, .pcs-scope *::after{ box-sizing: border-box; } .pcs-scope a{ color: var(--pcs-link); } .pcs-inner{ max-width: 1040px; margin: 0 auto; padding: 0 20px; } /* 縦に読ませるための細いカラム（LP調の肝） */ .pcs-narrow{ max-width: 720px; margin-left: auto; margin-right: auto; } .pcs-sect{ position: relative; padding: 68px 0; background: var(--pcs-cream); overflow: hidden; } .pcs-sect--sub{ background: linear-gradient(180deg, #eef5ff 0%, #e4f0ff 100%); } /* 濃紺セクション: 参考LPの「濃茶パート」にあたる */ .pcs-sect--dark{ background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(27,79,184,.55) 0%, transparent 70%), linear-gradient(180deg, var(--pcs-deep) 0%, #0a2356 100%); color: #fff; } .pcs-sect--dark .pcs-h2, .pcs-sect--dark h3{ color: #fff; } .pcs-sect--dark .pcs-lead{ color: #d5e3ff; } .pcs-sect--dark .pcs-note{ color: #aec4ec; } .pcs-sect > .pcs-inner{ position: relative; z-index: 1; } /* ---- 金の飾り罫（参考LPの装飾ラインをCSSで再現） ---- */ .pcs-ornament{ display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 auto 26px; max-width: 420px; } .pcs-ornament::before, .pcs-ornament::after{ content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--pcs-gold-d) 40%, var(--pcs-gold) 100%); } .pcs-ornament::after{ background: linear-gradient(270deg, transparent, var(--pcs-gold-d) 40%, var(--pcs-gold) 100%); } .pcs-ornament i{ font-style: normal; color: var(--pcs-gold); font-size: 13px; letter-spacing: .2em; line-height: 1; } .pcs-ornament--btm{ margin: 26px auto 0; } /* ---- 見出し ---- */ .pcs-h2{ margin: 0 0 14px; text-align: center; font-family: var(--pcs-mincho); font-size: clamp(25px, 3.8vw, 38px); font-weight: 700; color: var(--pcs-main); line-height: 1.6; letter-spacing: .04em; } .pcs-h2 .pcs-h2-en{ display: block; font-family: system-ui, sans-serif; font-size: 11px; letter-spacing: .34em; margin-bottom: 12px; color: var(--pcs-gold-d); font-weight: 800; } .pcs-sect--dark .pcs-h2 .pcs-h2-en{ color: var(--pcs-gold); } .pcs-h2 em{ font-style: normal; color: var(--pcs-gold-d); } .pcs-sect--dark .pcs-h2 em{ color: var(--pcs-gold); } .pcs-lead{ margin: 0 auto 36px; max-width: 700px; text-align: center; font-size: 15px; } /* ---- ボタン ---- */ .pcs-btn{ display: inline-block; padding: 16px 38px; border-radius: 99px; background: var(--pcs-main); color: #ffffff !important; font-weight: 800; font-size: 15px; text-decoration: none !important; border: 2px solid var(--pcs-main); box-shadow: 0 6px 18px rgba(15,56,134,.28); transition: transform .18s, box-shadow .18s, background .18s; } .pcs-btn:hover{ transform: translateY(-2px); background: var(--pcs-blue); border-color: var(--pcs-blue); box-shadow: 0 10px 26px rgba(15,56,134,.36); } .pcs-btn--ghost{ background: #fff; color: var(--pcs-main) !important; box-shadow: 0 4px 14px rgba(15,56,134,.15); } .pcs-btn--ghost:hover{ background: var(--pcs-bg-sub); color: var(--pcs-main) !important; } .pcs-sect--dark .pcs-btn--ghost{ background: transparent; color: #fff !important; border-color: rgba(255,255,255,.7); } .pcs-sect--dark .pcs-btn--ghost:hover{ background: rgba(255,255,255,.12); color: #fff !important; } /* 主CTA: 参考LPの大きな丸ボタンにならう */ .pcs-btn--cv{ background: linear-gradient(180deg, #ffe271, var(--pcs-gold)); border-color: var(--pcs-gold); color: #1a1400 !important; box-shadow: 0 6px 0 var(--pcs-gold-d), 0 14px 28px rgba(0,0,0,.28); } .pcs-btn--cv:hover{ background: linear-gradient(180deg, #ffe98f, #ffd94a); border-color: #ffd94a; box-shadow: 0 8px 0 var(--pcs-gold-d), 0 18px 32px rgba(0,0,0,.3); } .pcs-btn--big{ padding: 20px 46px; font-size: 17.5px; width: 100%; max-width: 460px; text-align: center; } .pcs-btn--big small{ display: block; font-size: 12px; font-weight: 700; opacity: .85; margin-top: 2px; } .pcs-note{ font-size: 12px; color: #444; } .pcs-pr{ display: inline-block; font-size: 11px; font-weight: 800; color: #444; border: 1px solid #999; border-radius: 3px; padding: 1px 8px; margin-bottom: 10px; } /* リボン風ラベル \ ○○ / */ .pcs-ribbon{ display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 800; color: var(--pcs-gold); letter-spacing: .06em; } .pcs-ribbon::before{ content: "＼"; } .pcs-ribbon::after{ content: "／"; } /* ---- 1. ヒーロー ---- */ .pcs-hero{ position: relative; overflow: hidden; color: #fff; padding: 52px 0 0; background: radial-gradient(ellipse 60% 70% at 15% 0%, rgba(135,231,255,.3) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 90% 100%, rgba(27,79,184,.9) 0%, transparent 60%), linear-gradient(160deg, var(--pcs-main) 0%, var(--pcs-deep) 100%); } /* 背景の光: オーロラのようにゆっくり呼吸する光だまり（斜線の代わり） */ .pcs-hero::before{ content: ""; position: absolute; inset: -20%; pointer-events: none; background: radial-gradient(ellipse 34% 40% at 22% 38%, rgba(135,231,255,.22) 0%, transparent 70%), radial-gradient(ellipse 30% 36% at 78% 62%, rgba(56,189,248,.20) 0%, transparent 70%), radial-gradient(ellipse 22% 26% at 52% 12%, rgba(249,212,58,.10) 0%, transparent 70%); animation: pcs-aurora 14s ease-in-out infinite alternate; } @keyframes pcs-aurora{ from{ transform: translate(-3%, -2%) scale(1); opacity: .8 } to { transform: translate( 3%, 2%) scale(1.08); opacity: 1 } } /* 遠くの星（静止） */ .pcs-hero::after{ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% 30%, rgba(255,255,255,.5) 0 1.5px, transparent 2.5px), radial-gradient(circle at 30% 80%, rgba(135,231,255,.7) 0 1.5px, transparent 2.5px), radial-gradient(circle at 70% 20%, rgba(249,212,58,.7) 0 1.5px, transparent 2.5px), radial-gradient(circle at 88% 60%, rgba(255,255,255,.5) 0 1.5px, transparent 2.5px), radial-gradient(circle at 45% 55%, rgba(255,255,255,.35) 0 1px, transparent 2px); } /* ---- 光ファイバー（SVG）: 曲線に沿って光のパケットが走る ---- */ .pcs-fiber{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .pcs-fiber-base path{ fill: none; stroke: rgba(135,231,255,.16); stroke-width: 1.4; } .pcs-fiber-glow path, .pcs-fiber-pulse path{ fill: none; stroke-linecap: round; stroke-dasharray: 120 2600; animation: pcs-packet 7s linear infinite; } .pcs-fiber-glow path{ stroke: rgba(135,231,255,.35); stroke-width: 9; } .pcs-fiber-pulse path{ stroke: #ffffff; stroke-width: 2.4; } /* 6本それぞれ速度と出発点をずらす（同じ番号の線は同期して光る） */ .pcs-fiber-glow path:nth-child(1), .pcs-fiber-pulse path:nth-child(1){ animation-duration: 6.5s; animation-delay: -1s; } .pcs-fiber-glow path:nth-child(2), .pcs-fiber-pulse path:nth-child(2){ animation-duration: 8s; animation-delay: -4s; } .pcs-fiber-glow path:nth-child(3), .pcs-fiber-pulse path:nth-child(3){ animation-duration: 9.5s; animation-delay: -2.5s; } .pcs-fiber-glow path:nth-child(4), .pcs-fiber-pulse path:nth-child(4){ animation-duration: 7.2s; animation-delay: -6s; } .pcs-fiber-glow path:nth-child(5), .pcs-fiber-pulse path:nth-child(5){ animation-duration: 8.8s; animation-delay: -3.3s; } .pcs-fiber-glow path:nth-child(6), .pcs-fiber-pulse path:nth-child(6){ animation-duration: 6s; animation-delay: -5.2s; } .pcs-fiber-pulse path:nth-child(3), .pcs-fiber-pulse path:nth-child(5){ stroke: #ffe98f; } /* 黄色の光も混ぜる */ .pcs-fiber-glow path:nth-child(3), .pcs-fiber-glow path:nth-child(5){ stroke: rgba(249,212,58,.30); } @keyframes pcs-packet{ from{ stroke-dashoffset: 0 } to{ stroke-dashoffset: -2720 } } /* 上昇する光の粒 */ .pcs-fiber-dots circle{ fill: #d8ffff; opacity: 0; animation: pcs-rise 9s linear infinite; } .pcs-fiber-dots circle:nth-child(2n){ fill: #ffe98f; animation-duration: 11s; animation-delay: -4s; } .pcs-fiber-dots circle:nth-child(3n){ animation-duration: 13s; animation-delay: -7s; } .pcs-fiber-dots circle:nth-child(4n+1){ animation-delay: -2s; } @keyframes pcs-rise{ 0% { transform: translateY(40px); opacity: 0 } 15% { opacity: .9 } 85% { opacity: .6 } 100%{ transform: translateY(-260px); opacity: 0 } } .pcs-hero .pcs-inner{ position: relative; z-index: 1; } .pcs-hero-grid{ display: grid; grid-template-columns: 1fr minmax(0,620px) 1fr; grid-template-areas: "l t r"; align-items: end; gap: 20px; } .pcs-hero-title{ grid-area: t; text-align: center; padding-bottom: 34px; } .pcs-eyebrow{ display: inline-block; padding: 6px 20px; border-radius: 99px; font-size: 12.5px; font-weight: 800; color: var(--pcs-deep); background: linear-gradient(90deg, #d8ffff, var(--pcs-cyan)); box-shadow: 0 4px 12px rgba(0,0,0,.25); letter-spacing: .04em; } .pcs-hero h1{ margin: 20px 0 10px; font-family: var(--pcs-mincho); font-weight: 700; font-size: clamp(40px, 7vw, 76px); line-height: 1.2; letter-spacing: .06em; color: var(--pcs-gold); text-shadow: 2px 2px 0 var(--pcs-deep), -2px -2px 0 var(--pcs-deep), 2px -2px 0 var(--pcs-deep), -2px 2px 0 var(--pcs-deep), 0 6px 0 #0a2a66, 0 14px 30px rgba(0,0,0,.55); } .pcs-hero-sub{ margin: 10px 0 0; font-size: clamp(16px,2vw,20px); font-weight: 800; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.5); } .pcs-hero-sub b{ background: linear-gradient(transparent 55%, rgba(249,212,58,.85) 55%); color: #fff; padding: 0 2px; } .pcs-hero-lead{ margin: 14px auto 0; max-width: 540px; font-size: 14px; color: #dbe7ff; } .pcs-hero-cta{ margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .pcs-hero .pcs-note{ color: #b9cdf5; margin-top: 10px; } .pcs-chara{ width: 200px; aspect-ratio: 1/1; border-radius: 26px; flex-shrink: 0; background-image: var(--pcs-banner); background-size: auto 100%; background-repeat: no-repeat; border: 4px solid rgba(255,255,255,.9); box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 8px rgba(135,231,255,.16); /* 持ち上げ量は margin ではなく transform で作る。 SWELLの「最後の子要素は下マージン0」に右のキャラだけ当たり、左右が34pxずれていたため（2026-09-20 実機・PCのみ発症／スマホは margin 0 で揃っていたため正常だった）。 */ --pcs-lift: -34px; margin-bottom: 0; } /* 左右のキャラは「鏡」の動き：左が上がるとき右は下がり、傾きも逆向き（2026-09-20） */ /* ------------------------------------------------------------ シーソー（2026-09-20 作り直し）左右が必ず逆方向に動くよう、1周ぶん（0%→50%→100%）をそれぞれ完全な鏡で定義する。 ※ alternate＋別キーフレームの組み合わせは、どちらが上かが分かりにくく「ずっと片方だけ高い」ように見えたため使わない。上下差は最大56px。 ------------------------------------------------------------ */ .pcs-chara--l{ grid-area: l; justify-self: end; background-position: 0 0; animation: pcs-seesaw-l 4.5s ease-in-out infinite; } .pcs-chara--r{ grid-area: r; justify-self: start; background-position: 100% 0; animation: pcs-seesaw-r 4.5s ease-in-out infinite; } @keyframes pcs-seesaw-l{ 0%, 100%{ transform: translateY(calc(var(--pcs-lift, 0px) + 14px)) rotate(2deg); } 50% { transform: translateY(calc(var(--pcs-lift, 0px) - 14px)) rotate(-2deg); } } @keyframes pcs-seesaw-r{ 0%, 100%{ transform: translateY(calc(var(--pcs-lift, 0px) - 14px)) rotate(-2deg); } 50% { transform: translateY(calc(var(--pcs-lift, 0px) + 14px)) rotate(2deg); } } .pcs-hero-trust{ position: relative; z-index: 1; padding: 14px 0; background: rgba(255,255,255,.12); border-top: 1px solid rgba(255,255,255,.25); } .pcs-hero-trust ul{ list-style: none; margin: 0; padding: 0; display: flex; gap: 10px 28px; justify-content: center; flex-wrap: wrap; font-size: 13px; font-weight: 800; } .pcs-hero-trust li{ padding-left: 24px; position: relative; color: #fff; } .pcs-hero-trust li::before{ content: "✓"; position: absolute; left: 0; color: var(--pcs-gold); font-weight: 900; } /* スマホ・タブレット（959px以下）のヒーロー：「家計を守る…」の帯 → [キャラ] 光回線のトリセツ [キャラ] → 説明文 → ボタンの順に並べ替える。 HTMLは変えず、.pcs-hero-title を display:contents で「透明」にして中身を直接グリッドに置く。 PC（960px以上）は従来どおり（左キャラ／中央タイトル／右キャラ）。 */ @media (max-width: 959px){ .pcs-hero{ padding-top: 28px; } .pcs-hero-grid{ grid-template-columns: auto minmax(0,1fr) auto; grid-template-areas: "e e e" "l h r" "s s s" "d d d" "c c c"; gap: 12px 10px; align-items: center; } .pcs-hero-title{ display: contents; } .pcs-eyebrow{ grid-area: e; justify-self: center; } .pcs-hero h1{ grid-area: h; margin: 6px 0; text-align: center; font-size: clamp(28px, 8.4vw, 44px); } .pcs-hero-sub{ grid-area: s; text-align: center; margin-top: 4px; } .pcs-hero-lead{ grid-area: d; text-align: center; } .pcs-hero-cta{ grid-area: c; margin-top: 10px; padding-bottom: 28px; } .pcs-chara{ width: clamp(80px, 22vw, 126px); border-radius: 20px; --pcs-lift: 0px; } .pcs-chara--l{ grid-area: l; justify-self: end; } .pcs-chara--r{ grid-area: r; justify-self: start; } /* 箇条書きはスマホでは1行ずつ */ .pcs-hero-trust ul{ flex-direction: column; align-items: center; gap: 6px; } } /* ---- 2. 共感パート（参考LPの問いかけセクション） ---- */ .pcs-ask{ text-align: center; } .pcs-ask-h{ font-family: var(--pcs-mincho); font-weight: 700; color: #fff; font-size: clamp(22px, 3.4vw, 34px); line-height: 1.85; margin: 0 0 30px; letter-spacing: .04em; } .pcs-ask-h em{ font-style: normal; color: var(--pcs-gold); } .pcs-ask-list{ list-style: none; margin: 0 auto; padding: 0; max-width: 560px; text-align: left; } .pcs-ask-list li{ position: relative; padding: 14px 18px 14px 52px; margin-bottom: 12px; font-size: 15px; font-weight: 700; background: rgba(255,255,255,.08); border: 1px solid rgba(249,212,58,.35); border-radius: 10px; color: #fff; } .pcs-ask-list li::before{ content: "✓"; position: absolute; left: 18px; top: 13px; width: 22px; height: 22px; border-radius: 50%; background: var(--pcs-gold); color: var(--pcs-deep); font-size: 13px; font-weight: 900; display: grid; place-items: center; line-height: 1; } .pcs-ask-answer{ margin: 30px auto 0; max-width: 620px; font-size: 16px; font-weight: 700; color: #fff; } .pcs-ask-answer b{ color: var(--pcs-gold); font-size: 18px; } /* ---- CTA帯（繰り返し登場させる） ---- */ .pcs-ctaband{ background: linear-gradient(135deg, var(--pcs-main), var(--pcs-deep)); padding: 44px 0; text-align: center; position: relative; overflow: hidden; } .pcs-ctaband::before{ content: ""; position: absolute; inset: -20%; pointer-events: none; background: radial-gradient(ellipse 30% 50% at 20% 50%, rgba(135,231,255,.18) 0%, transparent 70%), radial-gradient(ellipse 26% 46% at 80% 50%, rgba(249,212,58,.10) 0%, transparent 70%); animation: pcs-aurora 12s ease-in-out infinite alternate; } .pcs-ctaband .pcs-inner{ position: relative; z-index: 1; } .pcs-ctaband p{ margin: 0 0 16px; color: #fff; font-weight: 800; font-size: clamp(17px,2.4vw,21px); font-family: var(--pcs-mincho); letter-spacing: .03em; } .pcs-ctaband .pcs-note{ color: #b9cdf5; margin-top: 12px; } /* ---- 状況から選ぶ／困ったから探す（wifi-torisetsu の purposegrid を紺×金で再現） ---- */ .pcs-purpose-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .pcs-purpose-grid--2{ grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; } @media (max-width: 959px){ .pcs-purpose-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 399px){ .pcs-purpose-grid, .pcs-purpose-grid--2{ grid-template-columns: 1fr; } } .pcs-purpose{ display: flex; align-items: flex-start; gap: 12px; padding: 16px 14px; background: #fff; border: 1px solid var(--pcs-line); border-radius: 14px; text-decoration: none !important; color: var(--pcs-text) !important; box-shadow: 0 6px 18px rgba(15,56,134,.08); transition: transform .18s, box-shadow .18s, border-color .18s; } .pcs-purpose:hover{ transform: translateY(-3px); border-color: var(--pcs-gold-d); box-shadow: 0 14px 28px rgba(15,56,134,.16); } .pcs-purpose-icon{ flex-shrink: 0; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 10px; display: grid; place-items: center; font-size: 12.5px; font-weight: 900; letter-spacing: .02em; color: var(--pcs-main); background: var(--pcs-bg-sub); border: 1px solid var(--pcs-line); } .pcs-purpose:hover .pcs-purpose-icon{ background: var(--pcs-gold); border-color: var(--pcs-gold); color: var(--pcs-deep); } .pcs-purpose-body{ display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pcs-purpose-body strong{ font-size: 15px; font-weight: 800; line-height: 1.45; color: var(--pcs-main); } .pcs-purpose-body small{ font-size: 12px; color: #444; line-height: 1.5; } /* ---- 3. 診断マップ ---- */ /* 進捗バー（wifi-torisetsu の「ステップ x / N ＋バー」） */ .pcs-progress{ margin-bottom: 14px; } .pcs-progress-meta{ display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; } .pcs-progress-count{ font-size: 12.5px; font-weight: 800; color: #444; } .pcs-progress-bar{ height: 6px; border-radius: 99px; background: var(--pcs-bg-sub); overflow: hidden; } .pcs-progress-fill{ height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--pcs-main), var(--pcs-gold)); transition: width .3s; } .pcs-progress .pcs-shindan-progress{ margin: 0; } .pcs-shindan-hint{ margin: -8px 0 14px; font-size: 12.5px; color: #444; } .pcs-opt-label{ display: block; } .pcs-opt-sub{ display: block; font-size: 11.5px; font-weight: 700; color: #555; margin-top: 1px; } .pcs-shindan-opts button > span{ display: flex; flex-direction: column; } /* 複数選択の質問: 選択中の見た目と「次へ」 */ .pcs-shindan-opts button.is-on{ border-color: var(--pcs-main); background: #fff; box-shadow: inset 0 0 0 2px var(--pcs-main); } .pcs-shindan-opts button.is-on::before{ background: var(--pcs-gold); color: var(--pcs-deep); content: "✓"; } .pcs-shindan-next{ margin-top: 14px; width: 100%; text-align: center; } .pcs-shindan-next:disabled{ opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important; } /* 結果ヒーロー */ .pcs-result-hero{ padding: 16px 18px 14px; margin-bottom: 14px; border-radius: 14px; background: linear-gradient(135deg, var(--pcs-bg-sub), #fff); border: 1px solid var(--pcs-line); } .pcs-result-hero .pcs-result-head{ display: block; background: none; } .pcs-result-hero .pcs-result-reason{ margin: 8px 0 0; } /* 5軸の点数バー（wifi-torisetsu のスコア表示にあたる） */ .pcs-scores{ display: grid; gap: 7px; margin: 0 0 16px; } .pcs-score-row{ display: grid; grid-template-columns: 120px 1fr 34px; align-items: center; gap: 10px; font-size: 12.5px; } .pcs-score-label{ font-weight: 800; color: #333; } .pcs-score-bar{ height: 10px; border-radius: 99px; background: var(--pcs-bg-sub); overflow: hidden; } .pcs-score-fill{ display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--pcs-line), var(--pcs-main)); transition: width .4s; } .pcs-score-val{ text-align: right; font-weight: 900; color: #444; } .pcs-score-row.is-top .pcs-score-label, .pcs-score-row.is-top .pcs-score-val{ color: var(--pcs-main); } .pcs-score-row.is-top .pcs-score-fill{ background: linear-gradient(90deg, var(--pcs-main), var(--pcs-gold)); } @media (max-width: 599px){ .pcs-score-row{ grid-template-columns: 96px 1fr 30px; font-size: 11.5px; } } /* 診断の内訳（向いている点／懸念点） */ .pcs-result-breakdown{ margin: 0 0 16px; } .pcs-result-reasons.is-pos li::before{ content: "✓"; color: #14652d; } .pcs-result-reasons.is-neg{ background: #fff5f0; } .pcs-result-reasons.is-neg li::before{ content: "！"; color: #b34700; } .pcs-result-note{ margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; background: #fff8e1; border: 1px solid #f3dd8a; font-size: 13px; } /* おすすめ商品カード（診断結果） */ .pcs-reco{ margin: 0 0 16px; padding: 18px 18px 16px; border-radius: 14px; background: #fff; border: 2px solid var(--pcs-gold); box-shadow: 0 12px 30px rgba(201,162,39,.22); } .pcs-reco-head{ display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .pcs-reco-badge{ font-size: 11.5px; font-weight: 900; color: var(--pcs-deep); background: linear-gradient(180deg,#ffe271,var(--pcs-gold)); border-radius: 99px; padding: 3px 12px; } .pcs-reco-head .pcs-pr{ margin: 0; } .pcs-reco-name{ margin: 0; font-family: var(--pcs-mincho); font-size: clamp(22px,3vw,28px); font-weight: 700; color: var(--pcs-main); line-height: 1.4; } .pcs-reco-why{ margin: 6px 0 10px; font-size: 14px; font-weight: 700; background: linear-gradient(transparent 62%, rgba(249,212,58,.55) 62%); display: inline; } .pcs-reco-fee{ margin: 8px 0 6px; display: flex; align-items: baseline; gap: 8px; } .pcs-reco-fee .pcs-fee-val{ font-size: 26px; } .pcs-reco-spec{ margin: 8px 0 10px; border-top: 1px dashed var(--pcs-line); border-bottom: 1px dashed var(--pcs-line); padding: 8px 0; } .pcs-spec-row{ display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: baseline; font-size: 13px; } .pcs-spec-row + .pcs-spec-row{ margin-top: 4px; } .pcs-spec-k{ font-weight: 800; color: #fff; background: var(--pcs-main); border-radius: 6px; padding: 2px 8px; text-align: center; font-size: 11.5px; } .pcs-spec-v{ font-weight: 700; } @media (max-width: 599px){ .pcs-spec-row{ grid-template-columns: 1fr; gap: 2px; } .pcs-spec-k{ justify-self: start; } } .pcs-mini-sub{ color: #555 !important; font-size: 11.5px !important; margin-top: 1px; } .pcs-reco .pcs-proscons{ margin: 10px 0 12px; } .pcs-reco .pcs-result-cta{ margin-bottom: 8px; } /* ほかの候補（ミニカード） */ .pcs-result-plans{ margin-top: 18px; display: grid; gap: 8px; } .pcs-mini-plan{ display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--pcs-line); border-radius: 12px; background: #fff; text-decoration: none !important; color: var(--pcs-text) !important; transition: border-color .15s, transform .15s; } .pcs-mini-plan:hover{ border-color: var(--pcs-gold-d); transform: translateX(3px); } .pcs-mini-rank{ flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 900; background: var(--pcs-main); color: #fff; } .pcs-mini-plan:first-child .pcs-mini-rank{ background: linear-gradient(180deg,#ffe271,var(--pcs-gold)); color: var(--pcs-deep); } .pcs-mini-body{ display: flex; flex-direction: column; min-width: 0; } .pcs-mini-body b{ font-size: 14.5px; color: var(--pcs-main); } .pcs-mini-body small{ font-size: 12px; color: #444; } /* カレンダーの改定種別タグ・対象プラン */ .pcs-cal-tag{ display: inline-block; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 4px; background: #eee; color: #444; vertical-align: middle; } .pcs-cal-tag.up{ background: #fde8e8; color: #a11212; } .pcs-cal-tag.down{ background: #e6f4ea; color: #14652d; } .pcs-cal-plan{ font-weight: 800; color: var(--pcs-main); } .pcs-cal-src{ margin-left: 6px; } /* 結果: タイプ・理由・あわせて読む */ .pcs-result-type{ margin: 0 0 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pcs-result-type-label{ font-size: 11.5px; font-weight: 800; color: #fff; background: var(--pcs-main); border-radius: 99px; padding: 3px 12px; } .pcs-result-type b{ font-size: 15px; color: var(--pcs-main); } .pcs-result-reasons{ margin: 0 0 18px; padding: 14px 16px; list-style: none; background: var(--pcs-bg-sub); border-radius: 12px; font-size: 13.5px; } .pcs-result-reasons li{ position: relative; padding-left: 22px; margin: 4px 0; } .pcs-result-reasons li::before{ content: "✓"; position: absolute; left: 0; color: var(--pcs-gold-d); font-weight: 900; } .pcs-result-also{ margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--pcs-line); } .pcs-result-also-h{ margin: 0 0 6px; font-size: 12.5px; font-weight: 800; color: #444; } .pcs-result-also a{ display: block; font-size: 14px; font-weight: 700; margin: 4px 0; } /* ---- 診断のキャッチ（2026-09-20 追加。診断ボックスの直前に置く見出しプレート） ---- */ .pcs-shindan-catch{ position: relative; max-width: 760px; margin: 0 auto 20px; padding: 24px 22px 20px; border-radius: 20px; text-align: center; overflow: hidden; background: radial-gradient(ellipse 75% 110% at 50% 0%, rgba(27,79,184,.6) 0%, transparent 70%), linear-gradient(180deg, var(--pcs-deep) 0%, #0a2356 100%); border: 2px solid var(--pcs-gold); box-shadow: 0 14px 34px rgba(7,28,79,.3); } .pcs-shindan-catch::before, .pcs-shindan-catch::after{ content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: min(300px, 60%); height: 1px; background: linear-gradient(90deg, transparent, var(--pcs-gold-d) 30%, var(--pcs-gold) 50%, var(--pcs-gold-d) 70%, transparent); } .pcs-shindan-catch::before{ top: 12px; } .pcs-shindan-catch::after{ bottom: 12px; } .pcs-shindan-catch-lead{ display: block; color: #cfe0ff; font-size: 14px; font-weight: 800; letter-spacing: .08em; margin-bottom: 6px; } .pcs-shindan-catch-q{ display: block; font-family: var(--pcs-mincho); color: #fff; font-weight: 700; font-size: clamp(20px, 3.4vw, 32px); line-height: 1.65; letter-spacing: .03em; text-shadow: 0 2px 12px rgba(0,0,0,.5); } .pcs-shindan-catch-q em{ font-style: normal; color: var(--pcs-gold); padding: 0 2px; background: linear-gradient(transparent 64%, rgba(249,212,58,.26) 64%); } .pcs-shindan-catch-q i{ font-style: normal; color: #cfe0ff; font-size: .62em; margin: 0 10px; } .pcs-shindan-catch-tag{ display: inline-block; margin-top: 14px; padding: 6px 30px; border-radius: 99px; background: linear-gradient(180deg, #ffe271, var(--pcs-gold)); color: #1a1400; font-size: 14px; font-weight: 900; letter-spacing: .2em; box-shadow: 0 4px 14px rgba(201,162,39,.5); } @media (max-width: 599px){ .pcs-shindan-catch{ padding: 20px 16px 18px; } .pcs-shindan-catch-q i{ display: block; margin: 2px 0; } } .pcs-shindan-box{ max-width: 700px; margin: 0 auto; background: #fff; overflow: hidden; border-radius: 20px; box-shadow: 0 16px 44px rgba(15,56,134,.2), 0 0 0 1px rgba(201,162,39,.35); min-height: 320px; /* CLS対策 §7.1 */ } @media (max-width: 599px){ .pcs-shindan-box{ min-height: 380px; } } .pcs-shindan-box > div{ padding: 24px 26px 26px; } .pcs-shindan-progress{ display: inline-block; margin: 0 0 12px; padding: 4px 16px; border-radius: 99px; font-size: 12.5px; font-weight: 800; color: #fff; background: linear-gradient(90deg, var(--pcs-main), var(--pcs-blue)); } .pcs-shindan-q{ font-family: var(--pcs-mincho); font-size: clamp(19px,2.6vw,24px); font-weight: 700; margin: 0 0 20px; color: var(--pcs-main); } .pcs-shindan-opts{ display: grid; gap: 10px; margin: 0; padding: 0; } .pcs-shindan-opts button{ display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 13px 18px 13px 14px; font-size: 15.5px; font-weight: 800; color: var(--pcs-text); background: var(--pcs-bg-sub); border: 2px solid var(--pcs-line); border-radius: 14px; cursor: pointer; transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; } .pcs-shindan-opts button::before{ content: attr(data-letter); flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 900; color: #fff; background: var(--pcs-main); } .pcs-shindan-opts button:hover{ border-color: var(--pcs-gold-d); background: #fff; transform: translateX(4px); box-shadow: 0 6px 16px rgba(201,162,39,.25); } .pcs-shindan-opts button:hover::before{ background: var(--pcs-gold); color: var(--pcs-deep); } .pcs-shindan-opts button:focus-visible{ outline: 3px solid var(--pcs-link); outline-offset: 2px; } .pcs-shindan-ctrl{ margin-top: 18px; display: flex; gap: 18px; } .pcs-shindan-ctrl button{ background: none; border: 0; padding: 0; font-size: 13px; color: var(--pcs-link); text-decoration: underline; cursor: pointer; } .pcs-result-head{ font-family: var(--pcs-mincho); font-size: clamp(20px,2.8vw,26px); font-weight: 700; margin: 0 0 10px; color: var(--pcs-main); line-height: 1.6; background: linear-gradient(transparent 62%, rgba(249,212,58,.7) 62%); display: inline; } .pcs-result-reason{ font-size: 14.5px; margin: 16px 0 20px; } .pcs-result-cta{ display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 26px; } /* ボタンの下に点数バーが続くとき、くっつかないように間を空ける（2026-09-20） */ .pcs-scores{ margin-top: 26px; } /* ---- 4. 光回線3選 ---- */ .pcs-top3-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 16px; } @media (max-width: 959px){ .pcs-top3-grid{ grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } } .pcs-plan-card{ position: relative; background: #fff; border: 1px solid var(--pcs-line); border-top: 6px solid var(--pcs-main); border-radius: 16px; padding: 26px 20px 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 10px 26px rgba(15,56,134,.1); transition: transform .18s, box-shadow .18s; } .pcs-plan-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 36px rgba(15,56,134,.18); } .pcs-plan-card.pcs-rank1{ border-top-color: var(--pcs-gold); border-top-width: 8px; box-shadow: 0 14px 34px rgba(201,162,39,.25), 0 0 0 1px var(--pcs-gold); } .pcs-rank-badge{ position: absolute; top: -16px; left: 16px; background: var(--pcs-main); color: #fff; font-size: 12px; font-weight: 900; padding: 4px 16px; border-radius: 99px; box-shadow: 0 4px 10px rgba(0,0,0,.2); } .pcs-rank1 .pcs-rank-badge{ background: linear-gradient(180deg,#ffe271,var(--pcs-gold)); color: #1a1400; box-shadow: 0 4px 12px rgba(201,162,39,.5); } .pcs-plan-name{ font-family: var(--pcs-mincho); font-size: 21px; font-weight: 700; margin: 8px 0 0; color: var(--pcs-main); } .pcs-plan-fit{ margin: 0; font-size: 12.5px; font-weight: 700; color: var(--pcs-deep); background: var(--pcs-bg-sub); border-radius: 8px; padding: 7px 12px; } .pcs-plan-fee{ font-size: 13px; border-top: 1px dashed var(--pcs-line); border-bottom: 1px dashed var(--pcs-line); padding: 10px 0; } .pcs-fee-row{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .pcs-fee-row + .pcs-fee-row{ margin-top: 2px; } .pcs-fee-label{ font-weight: 800; color: #333; } .pcs-fee-val{ font-size: 23px; font-weight: 900; color: var(--pcs-main); letter-spacing: -.02em; } .pcs-rank1 .pcs-fee-val{ color: #a87c00; } .pcs-plan-term{ margin: 0; display: flex; gap: 6px; flex-wrap: wrap; } .pcs-chip{ font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: #f0f0f0; color: #444; border: 1px solid #ddd; } .pcs-chip.is-good{ background: #e6f4ea; color: #14652d; border-color: #b7e0c4; } /* カード内ボタン: 高さの違う本文でも「枠の下端・中央」に揃える */ .pcs-plan-card .pcs-result-cta{ margin-top: auto !important; padding-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; border-top: 1px dashed var(--pcs-line); } .pcs-plan-card .pcs-result-cta .pcs-btn{ width: 100%; max-width: 260px; text-align: center; padding: 13px 20px; font-size: 14px; } .pcs-plan-card .pcs-result-cta .pcs-btn--cv{ order: -1; } /* 公式サイトを上・記事を下 */ /* 結論の枠（基本は1ギガでOK） */ .pcs-callout{ max-width: 760px; margin: 0 auto 26px; padding: 16px 18px 16px 20px; border-radius: 14px; background: #fff; border: 2px solid var(--pcs-gold); box-shadow: 0 8px 22px rgba(201,162,39,.18); display: flex; gap: 14px; align-items: flex-start; } .pcs-callout-badge{ flex-shrink: 0; font-size: 12px; font-weight: 900; color: var(--pcs-deep); background: linear-gradient(180deg,#ffe271,var(--pcs-gold)); border-radius: 99px; padding: 4px 12px; margin-top: 2px; } .pcs-callout p{ margin: 0; font-size: 14px; } .pcs-callout p b{ font-family: var(--pcs-mincho); font-size: 18px; color: var(--pcs-main); display: block; margin-bottom: 2px; } .pcs-reco-tip{ margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--pcs-deep); background: var(--pcs-bg-sub); border-radius: 8px; padding: 6px 10px; } .pcs-proscons{ margin: 0; padding: 0; list-style: none; font-size: 13.5px; } .pcs-proscons li{ padding-left: 24px; position: relative; margin-top: 5px; } .pcs-proscons li.pro::before{ content: "○"; position: absolute; left: 0; color: var(--pcs-link); font-weight: 900; } .pcs-proscons li.con::before{ content: "△"; position: absolute; left: 0; color: #b34700; font-weight: 900; } .pcs-table-wrap{ overflow-x: auto; margin-top: 30px; -webkit-overflow-scrolling: touch; border-radius: 12px; box-shadow: 0 8px 22px rgba(15,56,134,.1); } .pcs-table{ border-collapse: collapse; width: 100%; min-width: 560px; font-size: 13.5px; background: #fff; } .pcs-table th, .pcs-table td{ border: 1px solid var(--pcs-line); padding: 10px 12px; text-align: center; } .pcs-table thead th{ background: var(--pcs-main); color: #fff; } .pcs-table th:first-child, .pcs-table td:first-child{ position: sticky; left: 0; background: var(--pcs-bg-sub); text-align: left; font-weight: 800; } /* 左上の「項目」は薄い背景のままなので文字を黒にする（白文字だと見えない） */ .pcs-table thead th:first-child{ color: var(--pcs-text); } .pcs-empty{ max-width: 720px; margin: 0 auto; background: #fff; border: 2px dashed var(--pcs-line); border-radius: 16px; padding: 28px 24px; text-align: center; font-size: 14.5px; } .pcs-sect--dark .pcs-empty{ background: rgba(255,255,255,.07); border-color: rgba(249,212,58,.4); color: #fff; } .pcs-checked{ text-align: center; margin-top: 16px; line-height: 1.8; } /* ---- 5. 値上がりカレンダー ---- */ .pcs-cal-tabs{ display: flex; gap: 8px; justify-content: center; margin-bottom: 24px; } .pcs-cal-tabs button{ padding: 9px 26px; border-radius: 99px; border: 2px solid var(--pcs-main); background: #fff; color: var(--pcs-main); font-weight: 800; cursor: pointer; font-size: 13.5px; transition: background .15s, color .15s; } .pcs-cal-tabs button[aria-selected="true"]{ background: var(--pcs-main); color: #fff; box-shadow: 0 6px 14px rgba(15,56,134,.3); } .pcs-cal{ max-width: 720px; margin: 0 auto; border-left: 3px solid var(--pcs-gold); padding-left: 24px; } .pcs-cal-month{ font-family: var(--pcs-mincho); font-size: 17px; font-weight: 700; color: var(--pcs-main); margin: 20px 0 8px; position: relative; } .pcs-cal-month::before{ content: ""; position: absolute; left: -32px; top: 10px; width: 13px; height: 13px; border-radius: 50%; background: var(--pcs-gold); border: 3px solid var(--pcs-cream); box-shadow: 0 0 0 2px var(--pcs-gold-d); } .pcs-cal-item{ background: #fff; border: 1px solid var(--pcs-line); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; font-size: 13.5px; box-shadow: 0 6px 16px rgba(15,56,134,.08); } .pcs-cal-diff{ display: inline-block; font-weight: 900; border-radius: 4px; padding: 1px 8px; font-size: 12px; background: #fde8e8; color: #a11212; } .pcs-cal-diff.down{ background: #e6f4ea; color: #14652d; } /* ---- 6. 新着記事 ---- */ .pcs-posts-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; } @media (max-width: 959px){ .pcs-posts-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 599px){ .pcs-posts-grid{ grid-template-columns: 1fr; } } .pcs-post-card{ background: #fff; border: 1px solid var(--pcs-line); border-radius: 14px; overflow: hidden; text-decoration: none !important; color: var(--pcs-text) !important; display: block; box-shadow: 0 8px 22px rgba(15,56,134,.1); transition: transform .18s, box-shadow .18s; } .pcs-post-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 32px rgba(15,56,134,.18); } .pcs-post-card .thumb{ position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--pcs-bg-sub); } .pcs-post-card .thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; } .pcs-post-card:hover .thumb img{ transform: scale(1.05); } .pcs-post-card .thumb .cat{ position: absolute; left: 10px; top: 10px; z-index: 1; background: var(--pcs-main); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 99px; box-shadow: 0 2px 8px rgba(0,0,0,.3); } .pcs-post-card .body{ padding: 14px 16px 16px; } .pcs-post-card .body h3{ margin: 0 0 6px; font-size: 14.5px; font-weight: 800; line-height: 1.6; color: var(--pcs-text); } .pcs-post-card .date{ font-size: 11.5px; color: #444; } .pcs-more{ text-align: center; margin-top: 34px; } /* ---- 7. カテゴリー ---- */ .pcs-cat-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; } @media (max-width: 959px){ .pcs-cat-grid{ grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } } .pcs-cat-card{ position: relative; background: #fff; border: 1px solid var(--pcs-line); border-radius: 16px; padding: 28px 22px 22px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; box-shadow: 0 10px 26px rgba(15,56,134,.1); transition: transform .18s; } .pcs-cat-card:hover{ transform: translateY(-4px); } .pcs-cat-card::before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 6px; background: linear-gradient(90deg, var(--pcs-main), var(--pcs-cyan)); } .pcs-cat-card:nth-child(2)::before{ background: linear-gradient(90deg, var(--pcs-link), #d8ffff); } .pcs-cat-card:nth-child(3)::before{ background: linear-gradient(90deg, var(--pcs-gold), var(--pcs-cyan)); } .pcs-cat-card .pcs-cat-label{ font-family: var(--pcs-mincho); font-size: 20px; font-weight: 700; color: var(--pcs-main); margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pcs-cat-card .pcs-cat-count{ font-family: system-ui, sans-serif; font-size: 12px; font-weight: 800; color: var(--pcs-main); background: var(--pcs-bg-sub); border-radius: 99px; padding: 2px 10px; } .pcs-cat-card p{ margin: 0; font-size: 13.5px; } .pcs-cat-card .pcs-btn{ align-self: center; margin-top: auto; padding: 12px 28px; font-size: 13.5px; width: 100%; max-width: 240px; text-align: center; } .pcs-cat-card p{ margin-bottom: 14px; } /* ---- 8. 運営者 ---- */ .pcs-author{ max-width: 800px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; background: #fff; border: 1px solid rgba(201,162,39,.4); border-radius: 20px; padding: 30px; box-shadow: 0 12px 30px rgba(15,56,134,.12); } @media (max-width: 599px){ .pcs-author{ grid-template-columns: 1fr; text-align: center; } } .pcs-author .face{ width: 112px; height: 112px; border-radius: 50%; overflow: hidden; margin: 0 auto; border: 4px solid #fff; box-shadow: 0 0 0 4px var(--pcs-gold), 0 10px 24px rgba(15,56,134,.25); } .pcs-author .face img{ width: 100%; height: 100%; object-fit: cover; display: block; } .pcs-author h3{ font-family: var(--pcs-mincho); margin: 0 0 8px; font-size: 21px; font-weight: 700; color: var(--pcs-main); } .pcs-author p{ margin: 0; font-size: 13.5px; } /* ---- 動きを減らす設定の人には止める ---- */ @media (prefers-reduced-motion: reduce){ .pcs-scope *, .pcs-scope *::before, .pcs-scope *::after{ animation: none !important; transition: none !important; } }