@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap");*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: } /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.kv-gaiheki-section{font-family:Noto Sans JP,Hiragino Kaku Gothic ProN,Yu Gothic,system-ui,sans-serif;color:#1f2937;background-color:#f9fafb;-webkit-font-smoothing:antialiased;line-height:1.7}.kv-gaiheki-section :focus-visible{outline:2px solid #2563eb;outline-offset:2px}.kv-container{max-width:1120px;margin-left:auto;margin-right:auto;padding-left:1.25rem;padding-right:1.25rem}.kv-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;white-space:nowrap;border-radius:8px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:all .15s cubic-bezier(.4,0,.2,1);line-height:1;font-family:inherit}.kv-btn:active{transform:translateY(1px)}.kv-btn:disabled,.kv-btn[disabled]{opacity:.5;cursor:not-allowed}.kv-btn-sm{font-size:13px;min-height:36px;padding:.5rem .875rem}.kv-btn-md{font-size:.875rem;min-height:44px;padding:.625rem 1.125rem}.kv-btn-lg{font-size:1rem;min-height:52px;padding:.875rem 1.5rem}.kv-btn-primary{background-color:#f97316;color:#fff;box-shadow:0 2px 6px rgba(217,119,6,.2)}.kv-btn-primary:hover{background-color:#ea580c;box-shadow:0 6px 14px rgba(180,83,9,.28);color:#fff}.kv-btn-secondary{background-color:#fff;color:#1f2937;border-color:#d1d5db}.kv-btn-secondary:hover{background-color:#f9fafb;border-color:#9ca3af;color:#1f2937}.kv-btn-ghost{background-color:transparent;color:#1e40af}.kv-btn-ghost:hover{background-color:#eff6ff;color:#1e40af}.kv-btn-accent{background-color:#10b981;color:#fff}.kv-btn-accent:hover{background-color:#059669;color:#fff}.kv-btn-outline-primary{background-color:transparent;color:#1d4ed8;border-color:#1d4ed8}.kv-btn-outline-primary:hover{background-color:#eff6ff}.kv-tag{display:inline-flex;align-items:center;gap:.25rem;padding:3px 9px;border-radius:9999px;font-size:11px;font-weight:500;white-space:nowrap;line-height:1.4}.kv-tag-self-work{background-color:#ecfdf5;color:#047857;border:1px solid #d1fae5}.kv-tag-subsidy{background-color:#eff6ff;color:#1e3a8a;border:1px solid #bfdbfe}.kv-tag-aftercare{background-color:#eff6ff;color:#1d4ed8;border:1px solid #dbeafe}.kv-pr{display:inline-flex;align-items:center;padding:2px 7px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.05em;background-color:#f3f4f6;color:#6b7280;font-family:Inter,system-ui,sans-serif;line-height:1.4}.kv-card{background-color:#fff;border-radius:12px;border:1px solid #e5e7eb;box-shadow:0 1px 2px 0 rgba(17,24,39,.05);transition:all .15s cubic-bezier(.4,0,.2,1)}.kv-card:hover{box-shadow:0 4px 6px -1px rgba(17,24,39,.08),0 2px 4px -2px rgba(17,24,39,.05);border-color:#d1d5db}.kv-rank{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:9999px;font-weight:700;font-size:1.125rem;font-family:Inter,system-ui,sans-serif;line-height:1}.kv-rank-1{background-color:#2563eb;color:#fff}.kv-rank-2{background-color:#9ca3af;color:#fff}.kv-rank-3{background-color:#1e40af;color:#fff}.kv-rank-other{background-color:#60a5fa;color:#fff}.kv-h1{font-size:clamp(1.75rem,4vw,2.75rem);line-height:1.25;letter-spacing:-.02em}.kv-h1,.kv-h2{font-weight:700;color:#111827}.kv-h2{font-size:clamp(1.375rem,3vw,1.75rem);line-height:1.3}.kv-h3{font-size:1.25rem}.kv-h3,.kv-h4{font-weight:700;line-height:1.4;color:#111827}.kv-h4,.kv-lead{font-size:1.125rem}.kv-lead{line-height:1.75;color:#374151}.kv-meta{font-size:.875rem;color:#6b7280}.kv-cap{font-size:.75rem;color:#6b7280;letter-spacing:.05em}.kv-num{font-family:Inter,system-ui,sans-serif;font-feature-settings:"tnum" 1}.kv-link{color:#1d4ed8;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:color .15s}.kv-link:hover{color:#1e40af}.kv-breadcrumb{background-color:#fff;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;padding:.625rem 0}.kv-breadcrumb-link{color:#6b7280;text-decoration:none;font-size:.875rem;transition:color .15s}.kv-breadcrumb-link:hover{color:#1e40af}.kv-breadcrumb-current{color:#374151;font-weight:500;font-size:.875rem}.kv-subsidy-banner{background-color:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:.75rem 1rem;color:#1e3a8a;font-size:.875rem}details.kv-acc summary{list-style:none;cursor:pointer}details.kv-acc summary::-webkit-details-marker{display:none}details.kv-acc[open] .kv-acc-icon{transform:rotate(180deg)}.kv-acc-icon{transition:transform .2s cubic-bezier(.4,0,.2,1);display:inline-block}@keyframes kv-slide-down{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.kv-gaiheki-section .kv-gaiheki-fixed{position:fixed}.kv-gaiheki-section .kv-gaiheki-absolute{position:absolute}.kv-gaiheki-section .kv-gaiheki-relative{position:relative}.kv-gaiheki-section .kv-gaiheki-bottom-0{bottom:0}.kv-gaiheki-section .kv-gaiheki-left-0{left:0}.kv-gaiheki-section .kv-gaiheki-left-3{left:.75rem}.kv-gaiheki-section .kv-gaiheki-right-0{right:0}.kv-gaiheki-section .kv-gaiheki-right-3{right:.75rem}.kv-gaiheki-section .kv-gaiheki-top-3{top:.75rem}.kv-gaiheki-section .kv-gaiheki-z-40{z-index:40}.kv-gaiheki-section .kv-gaiheki-mb-1{margin-bottom:.25rem}.kv-gaiheki-section .kv-gaiheki-mb-10{margin-bottom:2.5rem}.kv-gaiheki-section .kv-gaiheki-mb-12{margin-bottom:3rem}.kv-gaiheki-section .kv-gaiheki-mb-2{margin-bottom:.5rem}.kv-gaiheki-section .kv-gaiheki-mb-3{margin-bottom:.75rem}.kv-gaiheki-section .kv-gaiheki-mb-4{margin-bottom:1rem}.kv-gaiheki-section .kv-gaiheki-mb-5{margin-bottom:1.25rem}.kv-gaiheki-section .kv-gaiheki-mt-1{margin-top:.25rem}.kv-gaiheki-section .kv-gaiheki-mt-20{margin-top:5rem}.kv-gaiheki-section .kv-gaiheki-mt-4{margin-top:1rem}.kv-gaiheki-section .kv-gaiheki-mt-8{margin-top:2rem}.kv-gaiheki-section .kv-gaiheki-mt-auto{margin-top:auto}.kv-gaiheki-section .kv-gaiheki-line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.kv-gaiheki-section .kv-gaiheki-line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.kv-gaiheki-section .kv-gaiheki-block{display:block}.kv-gaiheki-section .kv-gaiheki-flex{display:flex}.kv-gaiheki-section .kv-gaiheki-inline-flex{display:inline-flex}.kv-gaiheki-section .kv-gaiheki-grid{display:grid}.kv-gaiheki-section .kv-gaiheki-h-14{height:3.5rem}.kv-gaiheki-section .kv-gaiheki-h-3{height:.75rem}.kv-gaiheki-section .kv-gaiheki-h-3\.5{height:.875rem}.kv-gaiheki-section .kv-gaiheki-h-4{height:1rem}.kv-gaiheki-section .kv-gaiheki-h-44{height:11rem}.kv-gaiheki-section .kv-gaiheki-h-5{height:1.25rem}.kv-gaiheki-section .kv-gaiheki-h-7{height:1.75rem}.kv-gaiheki-section .kv-gaiheki-h-8{height:2rem}.kv-gaiheki-section .kv-gaiheki-h-9{height:2.25rem}.kv-gaiheki-section .kv-gaiheki-max-h-14{max-height:3.5rem}.kv-gaiheki-section .kv-gaiheki-w-3{width:.75rem}.kv-gaiheki-section .kv-gaiheki-w-3\.5{width:.875rem}.kv-gaiheki-section .kv-gaiheki-w-4{width:1rem}.kv-gaiheki-section .kv-gaiheki-w-5{width:1.25rem}.kv-gaiheki-section .kv-gaiheki-w-7{width:1.75rem}.kv-gaiheki-section .kv-gaiheki-w-8{width:2rem}.kv-gaiheki-section .kv-gaiheki-w-9{width:2.25rem}.kv-gaiheki-section .kv-gaiheki-w-auto{width:auto}.kv-gaiheki-section .kv-gaiheki-w-full{width:100%}.kv-gaiheki-section .kv-gaiheki-flex-1{flex:1 1 0%}.kv-gaiheki-section .kv-gaiheki-flex-shrink-0{flex-shrink:0}.kv-gaiheki-section .kv-gaiheki-cursor-pointer{cursor:pointer}.kv-gaiheki-section .kv-gaiheki-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.kv-gaiheki-section .kv-gaiheki-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.kv-gaiheki-section .kv-gaiheki-flex-col{flex-direction:column}.kv-gaiheki-section .kv-gaiheki-flex-wrap{flex-wrap:wrap}.kv-gaiheki-section .kv-gaiheki-items-start{align-items:flex-start}.kv-gaiheki-section .kv-gaiheki-items-center{align-items:center}.kv-gaiheki-section .kv-gaiheki-justify-center{justify-content:center}.kv-gaiheki-section .kv-gaiheki-justify-between{justify-content:space-between}.kv-gaiheki-section .kv-gaiheki-gap-1{gap:.25rem}.kv-gaiheki-section .kv-gaiheki-gap-1\.5{gap:.375rem}.kv-gaiheki-section .kv-gaiheki-gap-2{gap:.5rem}.kv-gaiheki-section .kv-gaiheki-gap-3{gap:.75rem}.kv-gaiheki-section .kv-gaiheki-gap-4{gap:1rem}.kv-gaiheki-section .kv-gaiheki-gap-5{gap:1.25rem}.kv-gaiheki-section .kv-gaiheki-gap-8{gap:2rem}.kv-gaiheki-section :is(.kv-gaiheki-space-y-2>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.kv-gaiheki-section :is(.kv-gaiheki-space-y-3>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.kv-gaiheki-section .kv-gaiheki-overflow-hidden{overflow:hidden}.kv-gaiheki-section .kv-gaiheki-rounded{border-radius:.25rem}.kv-gaiheki-section .kv-gaiheki-rounded-full{border-radius:9999px}.kv-gaiheki-section .kv-gaiheki-border{border-width:1px}.kv-gaiheki-section .kv-gaiheki-border-b{border-bottom-width:1px}.kv-gaiheki-section .kv-gaiheki-border-t{border-top-width:1px}.kv-gaiheki-section .kv-gaiheki-border-gray-800{--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity,1))}.kv-gaiheki-section .kv-gaiheki-border-primary-100{--tw-border-opacity:1;border-color:rgb(219 234 254/var(--tw-border-opacity,1))}.kv-gaiheki-section .kv-gaiheki-border-surface-border{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.kv-gaiheki-section .kv-gaiheki-bg-accent-50{--tw-bg-opacity:1;background-color:rgb(236 253 245/var(--tw-bg-opacity,1))}.kv-gaiheki-section .kv-gaiheki-bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.kv-gaiheki-section .kv-gaiheki-bg-primary-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.kv-gaiheki-section .kv-gaiheki-bg-primary-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.kv-gaiheki-section .kv-gaiheki-bg-subsidy-border{--tw-bg-opacity:1;background-color:rgb(253 230 138/var(--tw-bg-opacity,1))}.kv-gaiheki-section .kv-gaiheki-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.kv-gaiheki-section .kv-gaiheki-object-contain{-o-object-fit:contain;object-fit:contain}.kv-gaiheki-section .kv-gaiheki-object-cover{-o-object-fit:cover;object-fit:cover}.kv-gaiheki-section .kv-gaiheki-p-4{padding:1rem}.kv-gaiheki-section .kv-gaiheki-p-5{padding:1.25rem}.kv-gaiheki-section .kv-gaiheki-px-2{padding-left:.5rem;padding-right:.5rem}.kv-gaiheki-section .kv-gaiheki-px-4{padding-left:1rem;padding-right:1rem}.kv-gaiheki-section .kv-gaiheki-px-5{padding-left:1.25rem;padding-right:1.25rem}.kv-gaiheki-section .kv-gaiheki-py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.kv-gaiheki-section .kv-gaiheki-py-12{padding-top:3rem;padding-bottom:3rem}.kv-gaiheki-section .kv-gaiheki-py-3{padding-top:.75rem;padding-bottom:.75rem}.kv-gaiheki-section .kv-gaiheki-py-5{padding-top:1.25rem;padding-bottom:1.25rem}.kv-gaiheki-section .kv-gaiheki-pb-4{padding-bottom:1rem}.kv-gaiheki-section .kv-gaiheki-pb-5{padding-bottom:1.25rem}.kv-gaiheki-section .kv-gaiheki-pt-4{padding-top:1rem}.kv-gaiheki-section .kv-gaiheki-text-center{text-align:center}.kv-gaiheki-section .kv-gaiheki-text-base{font-size:1rem;line-height:1.5rem}.kv-gaiheki-section .kv-gaiheki-text-sm{font-size:.875rem;line-height:1.25rem}.kv-gaiheki-section .kv-gaiheki-text-xs{font-size:.75rem;line-height:1rem}.kv-gaiheki-section .kv-gaiheki-font-bold{font-weight:700}.kv-gaiheki-section .kv-gaiheki-font-medium{font-weight:500}.kv-gaiheki-section .kv-gaiheki-font-semibold{font-weight:600}.kv-gaiheki-section .kv-gaiheki-uppercase{text-transform:uppercase}.kv-gaiheki-section .kv-gaiheki-leading-relaxed{line-height:1.625}.kv-gaiheki-section .kv-gaiheki-leading-snug{line-height:1.375}.kv-gaiheki-section .kv-gaiheki-tracking-wider{letter-spacing:.05em}.kv-gaiheki-section .kv-gaiheki-text-accent-600{--tw-text-opacity:1;color:rgb(5 150 105/var(--tw-text-opacity,1))}.kv-gaiheki-section .kv-gaiheki-text-accent-700{--tw-text-opacity:1;color:rgb(4 120 87/var(--tw-text-opacity,1))}.kv-gaiheki-section .kv-gaiheki-text-amber-500{--tw-text-opacity:1;color:rgb(245 158 11/var(--tw-text-opacity,1))}.kv-gaiheki-section .kv-gaiheki-text-cta{--tw-text-opacity:1;color:rgb(249 115 22/var(--tw-text-opacity,1))}.kv-gaiheki-section .kv-gaiheki-text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.kv-gaiheki-section .kv-gaiheki-text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.kv-gaiheki-section .kv-gaiheki-text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.kv-gaiheki-section .kv-gaiheki-text-ink{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.kv-gaiheki-section .kv-gaiheki-text-ink-muted{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.kv-gaiheki-section .kv-gaiheki-text-ink-subtle{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.kv-gaiheki-section .kv-gaiheki-text-primary-500{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.kv-gaiheki-section .kv-gaiheki-text-primary-700{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.kv-gaiheki-section .kv-gaiheki-text-subsidy-accent{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity,1))}.kv-gaiheki-section .kv-gaiheki-text-subsidy-text{--tw-text-opacity:1;color:rgb(146 64 14/var(--tw-text-opacity,1))}.kv-gaiheki-section .kv-gaiheki-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.kv-gaiheki-section .kv-gaiheki-no-underline{text-decoration-line:none}.kv-gaiheki-section .kv-gaiheki-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.kv-gaiheki-section .kv-jp-balance{word-break:keep-all;overflow-wrap:anywhere}.kv-gaiheki-section .hover\:kv-gaiheki-bg-surface-page:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.kv-gaiheki-section .hover\:kv-gaiheki-bg-surface-section:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.kv-gaiheki-section .hover\:kv-gaiheki-text-gray-300:hover{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.kv-gaiheki-section .hover\:kv-gaiheki-text-primary-700:hover{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.kv-gaiheki-section .hover\:kv-gaiheki-text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.kv-gaiheki-section .hover\:kv-gaiheki-underline:hover{text-decoration-line:underline}.kv-gaiheki-section .hover\:kv-gaiheki-no-underline:hover{text-decoration-line:none}.kv-gaiheki-section :is(.kv-gaiheki-group:hover .group-hover\:kv-gaiheki-text-primary-700){--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}@media (min-width:768px){.kv-gaiheki-section .md\:kv-gaiheki-hidden{display:none}.kv-gaiheki-section .md\:kv-gaiheki-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.kv-gaiheki-section .md\:kv-gaiheki-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.kv-gaiheki-section .md\:kv-gaiheki-flex-row{flex-direction:row}}@media (min-width:1024px){.kv-gaiheki-section .lg\:kv-gaiheki-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}} /* === Frame 4 業者詳細ページ用 (Part1 + Part2) === */ /* ---- Stars ---- */ .kv-gaiheki-star{color:#F59E0B;} .kv-gaiheki-star-empty{color:#D1D5DB;} /* ---- Tags ---- */ .kv-gaiheki-tag{display:inline-flex;align-items:center;gap:.25rem;padding:2px 8px;border-radius:9999px;font-size:11px;font-weight:600;white-space:nowrap;line-height:1.4;} .kv-gaiheki-tag-pr{background:#F3F4F6;color:#6B7280;font-family:Inter,system-ui,sans-serif;letter-spacing:.05em;} .kv-gaiheki-tag-yellow{background:#FEF9C3;color:#1E3A8A;border:1px solid #FDE047;} .kv-gaiheki-tag-orange{background:#FFF7ED;color:#C2410C;border:1px solid #FED7AA;} .kv-gaiheki-tag-green{background:#ECFDF5;color:#047857;border:1px solid #A7F3D0;} .kv-gaiheki-tag-blue{background:#EFF6FF;color:#1D4ED8;border:1px solid #BFDBFE;} .kv-gaiheki-tag-gray{background:#F3F4F6;color:#374151;border:1px solid #E5E7EB;} /* ---- Hero ---- */ .kv-gaiheki-hero-bg{background:linear-gradient(135deg,#EFF6FF 0%,#DBEAFE 50%,#BFDBFE 100%);position:relative;} /* ---- Logo tile & mark ---- */ .kv-gaiheki-logo-tile{width:120px;height:120px;background:#fff;border:2px solid #BFDBFE;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(180,83,9,.1);} .kv-gaiheki-logo-mark{font-family:Inter,system-ui,sans-serif;font-size:34px;font-weight:700;background:linear-gradient(135deg,#2563EB,#1D4ED8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;} /* ---- Tab nav ---- */ .kv-gaiheki-tabnav{position:sticky;top:64px;z-index:20;background:#fff;border-bottom:1px solid #E5E7EB;box-shadow:0 1px 4px rgba(17,24,39,.06);} .kv-gaiheki-tabnav-inner{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;} .kv-gaiheki-tabnav-inner::-webkit-scrollbar{display:none;} .kv-gaiheki-tab{display:inline-flex;align-items:center;padding:.75rem 1.125rem;font-size:.875rem;font-weight:500;color:#6B7280;text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;} .kv-gaiheki-tab:hover{color:#1E40AF;} .kv-gaiheki-tab-active{color:#1D4ED8;border-bottom-color:#2563EB;font-weight:700;} /* ---- Strength number ---- */ .kv-gaiheki-strength-num{font-family:Inter,system-ui,sans-serif;font-size:11px;font-weight:700;color:#1E40AF;letter-spacing:.08em;text-transform:uppercase;} /* ---- Step bullet ---- */ .kv-gaiheki-step-bullet{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9999px;background:#2563EB;color:#fff;font-family:Inter,system-ui,sans-serif;font-size:14px;font-weight:700;flex-shrink:0;} /* ---- Manufacturer chip ---- */ .kv-gaiheki-mfr{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 1.125rem;background:#fff;border:1px solid #E5E7EB;border-radius:8px;font-family:Inter,system-ui,sans-serif;font-size:13px;font-weight:700;color:#111827;white-space:nowrap;} /* ---- Anchor utility ---- */ .kv-gaiheki-anchor{scroll-margin-top:80px;} /* ---- Tabular numbers ---- */ .kv-gaiheki-num{font-family:Inter,system-ui,sans-serif;font-feature-settings:"tnum" 1;} /* ---- Floating CTA ---- */ .kv-gaiheki-floating{position:fixed;bottom:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:#fff;border-top:1px solid #E5E7EB;box-shadow:0 -2px 8px rgba(17,24,39,.10);} @media(min-width:768px){.kv-gaiheki-floating{left:auto;right:1rem;bottom:1rem;width:380px;border:1px solid #E5E7EB;border-radius:12px;box-shadow:0 4px 16px rgba(17,24,39,.12);}} /* ---- Buttons ---- */ .kv-gaiheki-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;white-space:nowrap;border-radius:8px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:all .15s;line-height:1;font-family:inherit;} .kv-gaiheki-btn:active{transform:translateY(1px);} .kv-gaiheki-btn-sm{font-size:13px;min-height:36px;padding:.5rem .875rem;} .kv-gaiheki-btn-md{font-size:.875rem;min-height:44px;padding:.625rem 1.125rem;} .kv-gaiheki-btn-lg{font-size:1rem;min-height:52px;padding:.875rem 1.5rem;} .kv-gaiheki-btn-primary{background:#F97316;color:#fff;box-shadow:0 2px 6px rgba(217,119,6,.2);} .kv-gaiheki-btn-primary:hover{background:#EA580C;color:#fff;} .kv-gaiheki-btn-secondary{background:#fff;color:#1F2937;border-color:#D1D5DB;} .kv-gaiheki-btn-secondary:hover{background:#F9FAFB;border-color:#9CA3AF;color:#1F2937;} .kv-gaiheki-btn-ghost{background:transparent;color:#1E40AF;} .kv-gaiheki-btn-ghost:hover{background:#EFF6FF;color:#1E40AF;} /* ==== Part2 ==== */ /* ---- Pricing plans ---- */ .kv-gaiheki-plans-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:1rem;} .kv-gaiheki-plan-card{position:relative;background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:1.5rem;text-align:center;} .kv-gaiheki-plan-popular{border-color:#2563EB;box-shadow:0 0 0 2px #2563EB;} .kv-gaiheki-plan-badge{display:inline-block;background:#2563EB;color:#fff;font-size:11px;font-weight:700;padding:2px 10px;border-radius:9999px;margin-bottom:.75rem;} .kv-gaiheki-plan-name{font-size:.875rem;font-weight:700;color:#374151;margin-bottom:.5rem;} .kv-gaiheki-plan-price{font-family:Inter,system-ui,sans-serif;font-size:1.5rem;font-weight:700;color:#111827;margin-bottom:.5rem;} .kv-gaiheki-plan-note{font-size:.8125rem;color:#6B7280;line-height:1.6;margin:0;} .kv-gaiheki-price-disclaimer{font-size:.75rem;color:#9CA3AF;margin-top:1.25rem;text-align:center;} /* ---- Reviews ---- */ .kv-gaiheki-reviews-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:1rem;} .kv-gaiheki-review-card{background:#fff;border:1px solid #E5E7EB;border-radius:10px;padding:1.25rem;} .kv-gaiheki-review-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.625rem;} .kv-gaiheki-review-score{font-size:.875rem;font-weight:700;color:#111827;} .kv-gaiheki-review-title{font-size:.9375rem;font-weight:700;color:#111827;margin:0 0 .375rem;} .kv-gaiheki-review-body{font-size:.875rem;color:#374151;line-height:1.7;margin:0;} .kv-gaiheki-review-footer{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem .625rem;margin-top:.75rem;padding-top:.625rem;border-top:1px solid #F3F4F6;font-size:.75rem;color:#6B7280;} .kv-gaiheki-review-author{font-weight:700;color:#374151;} .kv-gaiheki-review-area{color:#6B7280;} /* ---- Comparison table ---- */ .kv-gaiheki-cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;} .kv-gaiheki-cmp-table{width:100%;border-collapse:collapse;font-size:.875rem;} .kv-gaiheki-cmp-table th,.kv-gaiheki-cmp-table td{padding:.75rem 1rem;border:1px solid #E5E7EB;vertical-align:middle;} .kv-gaiheki-cmp-th-label{background:#F9FAFB;font-weight:700;color:#374151;text-align:left;min-width:120px;white-space:nowrap;} .kv-gaiheki-cmp-th{background:#F9FAFB;font-weight:700;color:#374151;text-align:center;min-width:110px;} .kv-gaiheki-cmp-th-current{background:#EFF6FF;} .kv-gaiheki-cmp-col-name{display:block;font-size:1rem;font-weight:700;} .kv-gaiheki-cmp-td-label{background:#F9FAFB;font-weight:500;color:#374151;white-space:nowrap;} .kv-gaiheki-cmp-td{text-align:center;color:#111827;} .kv-gaiheki-cmp-td-current{background:#EFF6FF;} /* ---- FAQ accordion ---- */ .kv-gaiheki-faq-list{display:flex;flex-direction:column;gap:.5rem;} .kv-gaiheki-faq-item{background:#fff;border:1px solid #E5E7EB;border-radius:10px;overflow:hidden;} .kv-gaiheki-faq-q{display:flex;align-items:flex-start;gap:.875rem;width:100%;background:none;border:none;padding:1.125rem 1.25rem;cursor:pointer;text-align:left;font-size:.9375rem;font-weight:700;color:#111827;font-family:inherit;transition:background .15s;} .kv-gaiheki-faq-q:hover{background:#EFF6FF;} .kv-gaiheki-faq-q-mark{flex-shrink:0;width:28px;height:28px;border-radius:6px;background:#2563EB;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;font-family:Inter,system-ui,sans-serif;} .kv-gaiheki-faq-chevron{margin-left:auto;flex-shrink:0;color:#9CA3AF;transition:transform .2s;font-size:.75rem;padding-top:4px;} .kv-gaiheki-faq-a{padding:.875rem 1.25rem .875rem 1.25rem;border-top:1px solid #F3F4F6;} .kv-gaiheki-faq-a-mark{flex-shrink:0;width:28px;height:28px;border-radius:6px;background:#10B981;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;font-family:Inter,system-ui,sans-serif;} /* ---- Final CTA ---- */ .kv-gaiheki-cta-final{background:linear-gradient(135deg,#EFF6FF 0%,#DBEAFE 55%,#BFDBFE 100%);padding:4rem 1.25rem;text-align:center;} .kv-gaiheki-cta-final-inner{max-width:640px;margin:0 auto;} .kv-gaiheki-cta-final-headline{font-size:clamp(1.375rem,4vw,1.875rem);font-weight:700;color:#111827;line-height:1.3;margin-bottom:.75rem;} .kv-gaiheki-cta-final-body{font-size:.9375rem;color:#374151;line-height:1.75;margin-bottom:2rem;} .kv-gaiheki-cta-final-actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;} .kv-gaiheki-cta-final-btn{width:100%;max-width:380px;} .kv-gaiheki-phone-hours{font-size:.75rem;font-weight:400;margin-left:.25rem;opacity:.8;} .kv-gaiheki-cta-pr{font-size:.6875rem;color:#9CA3AF;margin-top:1.25rem;} /* ---- Related providers ---- */ .kv-gaiheki-related-grid{display:flex;flex-direction:column;gap:.75rem;} .kv-gaiheki-related-card{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid #E5E7EB;border-radius:10px;padding:1rem;text-decoration:none;color:inherit;transition:box-shadow .15s,border-color .15s;} .kv-gaiheki-related-card:hover{box-shadow:0 4px 8px rgba(17,24,39,.08);border-color:#D1D5DB;} .kv-gaiheki-related-logo{flex-shrink:0;width:56px;height:56px;border-radius:8px;background:linear-gradient(135deg,#EFF6FF,#DBEAFE);border:1px solid #BFDBFE;display:flex;align-items:center;justify-content:center;font-family:Inter,system-ui,sans-serif;font-size:18px;font-weight:700;color:#1E40AF;} .kv-gaiheki-related-body{flex:1;min-width:0;} .kv-gaiheki-related-name{font-size:.9375rem;font-weight:700;color:#111827;} .kv-gaiheki-related-tagline{font-size:.8125rem;color:#6B7280;margin:.25rem 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .kv-gaiheki-related-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem .625rem;margin-top:.375rem;} .kv-gaiheki-related-arrow{flex-shrink:0;font-size:1.25rem;color:#D1D5DB;} /* === Frame 6 コラム用 === */ /* カテゴリタグ */ .kv-gaiheki-tag.kv-tag-cat { background:#DBEAFE; color:#1E3A8A; } .kv-gaiheki-tag.kv-tag-stor { background:#D1FAE5; color:#047857; } .kv-gaiheki-tag.kv-tag-fail { background:#FEE2E2; color:#B91C1C; } .kv-gaiheki-tag.kv-tag-corp { background:#DBEAFE; color:#1E40AF; } .kv-gaiheki-tag.kv-tag-mfr { background:#EDE9FE; color:#6D28D9; } .kv-gaiheki-tag.kv-tag-cost { background:#FFEDD5; color:#9A3412; } .kv-gaiheki-tag.kv-tag-intro { background:#E0F2FE; color:#075985; } /* アイキャッチ パレット */ .kv-eye-1 { background:linear-gradient(135deg,#DBEAFE 0%,#93C5FD 100%); } .kv-eye-2 { background:linear-gradient(135deg,#DBEAFE 0%,#FDBA74 100%); } .kv-eye-3 { background:linear-gradient(135deg,#FFEDD5 0%,#F97316 100%); } .kv-eye-4 { background:linear-gradient(135deg,#D1FAE5 0%,#34D399 100%); } .kv-eye-5 { background:linear-gradient(135deg,#FEE2E2 0%,#FCA5A5 100%); } .kv-eye-6 { background:linear-gradient(135deg,#DBEAFE 0%,#93C5FD 100%); } .kv-eye-7 { background:linear-gradient(135deg,#EDE9FE 0%,#C4B5FD 100%); } .kv-eye-8 { background:linear-gradient(135deg,#E0F2FE 0%,#7DD3FC 100%); } .kv-eye-9 { background:linear-gradient(135deg,#DBEAFE 0%,#1E3A8A 140%); } /* アイキャッチアスペクト比 */ .kv-gaiheki-aspect-16-10 { aspect-ratio:16/10; width:100%; overflow:hidden; } .kv-gaiheki-aspect-16-9 { aspect-ratio:16/9; width:100%; overflow:hidden; } /* カテゴリチップ */ .kv-gaiheki-chip { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; font-size:13px; font-weight:600; color:#6B7280; background:#fff; border:1px solid #E5E7EB; border-radius:9999px; cursor:pointer; transition:all 160ms; white-space:nowrap; text-decoration:none; min-height:36px; } .kv-gaiheki-chip:hover { color:#1E3A8A; background:#EFF6FF; border-color:#BFDBFE; } .kv-gaiheki-chip.is-active { color:#fff; background:#1D4ED8; border-color:#1D4ED8; } /* カードホバー */ .kv-gaiheki-card { transition:box-shadow 180ms, border-color 180ms; } .kv-gaiheki-card:hover { box-shadow:0 4px 6px -1px rgba(17,24,39,.08), 0 2px 4px -2px rgba(17,24,39,.05); border-color:#D1D5DB; } .kv-gaiheki-card:hover .kv-thumb { transform:scale(1.02); } .kv-thumb { transition:transform 280ms; } /* アバターカラー */ .kv-gaiheki-bg-amber-200 { background-color:#BFDBFE; } .kv-gaiheki-text-amber-800 { color:#1E3A8A; } .kv-gaiheki-bg-purple-200 { background-color:#DDD6FE; } .kv-gaiheki-text-purple-800{ color:#5B21B6; } .kv-gaiheki-bg-orange-200 { background-color:#FED7AA; } .kv-gaiheki-text-orange-800{ color:#9A3412; } .kv-gaiheki-bg-emerald-200 { background-color:#A7F3D0; } .kv-gaiheki-text-emerald-800{color:#065F46; } .kv-gaiheki-bg-sky-200 { background-color:#BAE6FD; } .kv-gaiheki-text-sky-800 { color:#075985; } /* === Frame 6 ユーティリティ補完 === */ .kv-gaiheki-section .kv-gaiheki-sticky { position:sticky; } .kv-gaiheki-section .kv-gaiheki-top-16 { top:4rem; } .kv-gaiheki-section .kv-gaiheki-z-20 { z-index:20; } .kv-gaiheki-section .kv-gaiheki-inset-0 { inset:0; } .kv-gaiheki-section .kv-gaiheki-max-w-6xl { max-width:72rem; } .kv-gaiheki-section .kv-gaiheki-max-w-2xl { max-width:42rem; } .kv-gaiheki-section .kv-gaiheki-w-6 { width:1.5rem; } .kv-gaiheki-section .kv-gaiheki-w-10 { width:2.5rem; } .kv-gaiheki-section .kv-gaiheki-h-6 { height:1.5rem; } .kv-gaiheki-section .kv-gaiheki-h-10 { height:2.5rem; } .kv-gaiheki-section .kv-gaiheki-h-full { height:100%; } .kv-gaiheki-section .kv-gaiheki-min-w-0 { min-width:0; } .kv-gaiheki-section .kv-gaiheki-overflow-x-auto { overflow-x:auto; } .kv-gaiheki-section .kv-gaiheki-hidden { display:none; } .kv-gaiheki-section .kv-gaiheki-inline-block { display:inline-block; } .kv-gaiheki-section .kv-gaiheki-text-xl { font-size:1.25rem; line-height:1.75rem; } .kv-gaiheki-section .kv-gaiheki-text-2xl { font-size:1.5rem; line-height:2rem; } .kv-gaiheki-section .kv-gaiheki-text-3xl { font-size:1.875rem;line-height:2.25rem; } .kv-gaiheki-section .kv-gaiheki-text-4xl { font-size:2.25rem; line-height:2.5rem; } .kv-gaiheki-section .kv-gaiheki-text-lg { font-size:1.125rem;line-height:1.75rem; } .kv-gaiheki-section .kv-gaiheki-leading-tight { line-height:1.25; } .kv-gaiheki-section .kv-gaiheki-truncate { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .kv-gaiheki-section .kv-gaiheki-whitespace-nowrap { white-space:nowrap; } .kv-gaiheki-section .kv-gaiheki-underline { text-decoration:underline; } .kv-gaiheki-section .kv-gaiheki-text-ink-900 { color:#111827; } .kv-gaiheki-section .kv-gaiheki-text-primary-600 { color:#1D4ED8; } .kv-gaiheki-section .kv-gaiheki-text-amber-800 { color:#1E3A8A; } .kv-gaiheki-section .kv-gaiheki-text-amber-900 { color:#172554; } .kv-gaiheki-section .kv-gaiheki-text-gray-700 { color:#374151; } .kv-gaiheki-section .kv-gaiheki-bg-gray-50 { background-color:#F9FAFB; } .kv-gaiheki-section .kv-gaiheki-bg-amber-50 { background-color:#EFF6FF; } .kv-gaiheki-section .kv-gaiheki-border-gray-200 { border-color:#E5E7EB; } .kv-gaiheki-section .kv-gaiheki-border-amber-200 { border-color:#BFDBFE; } .kv-gaiheki-section .kv-gaiheki-rounded-lg { border-radius:.5rem; } .kv-gaiheki-section .kv-gaiheki-rounded-md { border-radius:.375rem; } .kv-gaiheki-section .kv-gaiheki-py-2 { padding-top:.5rem; padding-bottom:.5rem; } .kv-gaiheki-section .kv-gaiheki-py-4 { padding-top:1rem; padding-bottom:1rem; } .kv-gaiheki-section .kv-gaiheki-py-8 { padding-top:2rem; padding-bottom:2rem; } .kv-gaiheki-section .kv-gaiheki-py-10 { padding-top:2.5rem; padding-bottom:2.5rem; } .kv-gaiheki-section .kv-gaiheki-py-14 { padding-top:3.5rem; padding-bottom:3.5rem; } .kv-gaiheki-section .kv-gaiheki-px-3 { padding-left:.75rem;padding-right:.75rem; } .kv-gaiheki-section .kv-gaiheki-p-2 { padding:.5rem; } .kv-gaiheki-section .kv-gaiheki-p-8 { padding:2rem; } .kv-gaiheki-section .kv-gaiheki-mt-2 { margin-top:.5rem; } .kv-gaiheki-section .kv-gaiheki-mt-3 { margin-top:.75rem; } .kv-gaiheki-section .kv-gaiheki-mt-5 { margin-top:1.25rem; } .kv-gaiheki-section .kv-gaiheki-mt-10 { margin-top:2.5rem; } .kv-gaiheki-section .kv-gaiheki-mt-0-5 { margin-top:.125rem; } .kv-gaiheki-section .kv-gaiheki-mr-1 { margin-right:.25rem; } .kv-gaiheki-section .kv-gaiheki-mb-0 { margin-bottom:0; } .kv-gaiheki-section .kv-gaiheki-m-0 { margin:0; } .kv-gaiheki-section .-kv-gaiheki-m-2 { margin:-.5rem; } .kv-gaiheki-section .kv-gaiheki-gap-6 { gap:1.5rem; } .kv-gaiheki-section .kv-gaiheki-gap-x-5 { column-gap:1.25rem; } .kv-gaiheki-section .kv-gaiheki-gap-y-2 { row-gap:.5rem; } .kv-gaiheki-section .kv-gaiheki-items-end { align-items:flex-end; } .kv-gaiheki-section .kv-gaiheki-list-none { list-style:none; } .kv-gaiheki-section .kv-gaiheki-opacity-80 { opacity:.8; } .kv-gaiheki-section .kv-gaiheki-opacity-30 { opacity:.3; } .kv-gaiheki-section .kv-gaiheki-lg-grid-col-sidebar { display:grid;grid-template-columns:1fr 300px; } .kv-gaiheki-section .hover\:kv-gaiheki-bg-gray-50:hover { background-color:#F9FAFB; } .kv-gaiheki-section .hover\:kv-gaiheki-bg-amber-50:hover { background-color:#EFF6FF; } @media (min-width:640px){ .kv-gaiheki-section .sm\:kv-gaiheki-grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (min-width:768px){ .kv-gaiheki-section .md\:kv-gaiheki-block { display:block; } .kv-gaiheki-section .md\:kv-gaiheki-py-12 { padding-top:3rem; padding-bottom:3rem; } .kv-gaiheki-section .md\:kv-gaiheki-py-14 { padding-top:3.5rem; padding-bottom:3.5rem; } .kv-gaiheki-section .md\:kv-gaiheki-text-4xl { font-size:2.25rem; line-height:2.5rem; } .kv-gaiheki-section .md\:kv-gaiheki-text-lg { font-size:1.125rem; line-height:1.75rem; } } @media (min-width:1024px){ .kv-gaiheki-section .lg\:kv-gaiheki-grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .kv-gaiheki-section .lg\:kv-gaiheki-grid-col-sidebar { grid-template-columns:1fr 300px; } } /* === Frame 6 Part2 — prose-kv & TOC === */ /* prose-kv: 記事本文タイポグラフィ */ .prose-kv{color:#374151;line-height:1.8;font-size:1rem;} .prose-kv h2{font-size:1.25rem;font-weight:700;color:#111827;margin:2rem 0 .75rem;border-left:4px solid #2563EB;padding-left:.875rem;line-height:1.4;} .prose-kv h3{font-size:1.0625rem;font-weight:700;color:#374151;margin:1.5rem 0 .5rem;padding-bottom:.25rem;border-bottom:1px dashed #D1D5DB;line-height:1.4;} .prose-kv p{margin:.875rem 0;} .prose-kv strong{font-weight:700;background:linear-gradient(transparent 60%,#BFDBFE 60%);} .prose-kv ul{margin:.875rem 0;padding-left:1.5rem;list-style:none;} .prose-kv ul>li{position:relative;padding-left:1rem;} .prose-kv ul>li::before{content:'';position:absolute;left:0;top:.625em;width:6px;height:6px;border-radius:50%;background:#2563EB;} .prose-kv ol{margin:.875rem 0 1.4rem;padding-left:1.5rem;counter-reset:kv-ol;list-style:none;} /* Phase 2-B.14: display:flex を捨て position:relative にすることで の background gradient が崩れないように */ .prose-kv ol>li{counter-increment:kv-ol;position:relative;padding-left:.6rem;margin:.55rem 0;line-height:1.85;} .prose-kv ol>li::before{content:counter(kv-ol);position:absolute;left:-1.4rem;top:.15rem;width:1.5rem;height:1.5rem;border-radius:9999px;background:#EFF6FF;color:#1E40AF;font-family:Inter,system-ui,sans-serif;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;} /* 黄色ハイライトを inline-block で背景がはみ出さないように固定 */ .prose-kv strong{display:inline;background:linear-gradient(transparent 65%,#DBEAFE 65%);padding:0 1px;font-weight:700;} .prose-kv blockquote{border-left:4px solid #E5E7EB;padding:.5rem 1rem;color:#6B7280;margin:1rem 0;background:#F9FAFB;border-radius:0 .25rem .25rem 0;} .prose-kv a{color:#1D4ED8;text-decoration:underline;} .prose-kv a:hover{color:#1E40AF;} .prose-kv img{border-radius:.5rem;margin:1rem 0;max-width:100%;height:auto;} .prose-kv table{width:100%;border-collapse:collapse;font-size:.875rem;margin:1rem 0;} .prose-kv table th,.prose-kv table td{border:1px solid #E5E7EB;padding:.5rem .75rem;} .prose-kv table th{background:#EFF6FF;font-weight:700;color:#374151;} .prose-kv hr{border:none;border-top:1px solid #E5E7EB;margin:1.5rem 0;} .prose-kv pre{background:#1F2937;color:#F9FAFB;padding:1rem;border-radius:.5rem;overflow-x:auto;font-size:.875rem;} .prose-kv code{font-family:ui-monospace,monospace;font-size:.875em;background:#F3F4F6;padding:.125em .375em;border-radius:.25rem;} .prose-kv pre code{background:none;padding:0;} /* TOC */ .kv-toc-list{list-style:none;margin:0;padding:0;} .kv-toc-list>li>a{display:block;padding:.3125rem .5rem;font-size:.875rem;font-weight:600;color:#374151;text-decoration:none;border-radius:.25rem;transition:color .15s,background .15s;} .kv-toc-list>li>a:hover,.kv-toc-list>li>a.is-active{color:#1D4ED8;background:#EFF6FF;} .kv-toc-sublist{list-style:none;margin:0;padding:0 0 0 .875rem;} .kv-toc-sublist li a{display:block;padding:.25rem .5rem;font-size:.8125rem;color:#6B7280;text-decoration:none;border-radius:.25rem;transition:color .15s;} .kv-toc-sublist li a:hover,.kv-toc-sublist li a.is-active{color:#1D4ED8;} /* Part2 ユーティリティ補完 */ .kv-gaiheki-section .kv-gaiheki-bg-primary-600{background-color:#1D4ED8;} .kv-gaiheki-section .kv-gaiheki-bg-ink-900{background-color:#111827;} .kv-gaiheki-section .kv-gaiheki-mt-6{margin-top:1.5rem;} .kv-gaiheki-section .kv-gaiheki-mb-6{margin-bottom:1.5rem;} .kv-gaiheki-section .kv-gaiheki-w-12{width:3rem;} .kv-gaiheki-section .kv-gaiheki-h-12{height:3rem;} .kv-gaiheki-section .kv-gaiheki-p-6{padding:1.5rem;} .kv-gaiheki-section .kv-gaiheki-py-6{padding-top:1.5rem;padding-bottom:1.5rem;} .kv-gaiheki-section .kv-gaiheki-top-20{top:5rem;} .kv-gaiheki-section .kv-gaiheki-line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;} @media (min-width:1024px){ .kv-gaiheki-section .lg\:kv-gaiheki-hidden{display:none;} .kv-gaiheki-section .lg\:kv-gaiheki-block{display:block;} } @media (min-width:768px){ .kv-gaiheki-section .md\:kv-gaiheki-text-3xl{font-size:1.875rem;line-height:2.25rem;} .kv-gaiheki-section .md\:kv-gaiheki-p-6{padding:1.5rem;} } .kv-gaiheki-star{color:#F59E0B;font-size:18px;line-height:1;letter-spacing:-1px}.kv-gaiheki-star-empty{color:#E5E7EB}.kv-gaiheki-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:500;white-space:nowrap}.kv-gaiheki-tag-pr{background:#F3F4F6;color:#6B7280;border:1px solid #E5E7EB;font-weight:700;letter-spacing:.04em}.kv-gaiheki-tag-yellow{background:#DBEAFE;color:#1E3A8A;border:1px solid #BFDBFE}.kv-gaiheki-tag-orange{background:#FFEDD5;color:#1E3A8A;border:1px solid #FED7AA}.kv-gaiheki-tag-green{background:#D1FAE5;color:#047857;border:1px solid #A7F3D0}.kv-gaiheki-tag-blue{background:#DBEAFE;color:#1E40AF;border:1px solid #BFDBFE}.kv-gaiheki-tag-gray{background:#F3F4F6;color:#374151;border:1px solid #E5E7EB}.kv-gaiheki-hero-bg{background:linear-gradient(135deg,#EFF6FF 0%,#DBEAFE 60%,#BFDBFE 100%);position:relative;overflow:hidden}.kv-gaiheki-hero-bg::before{content:'';position:absolute;inset:0;opacity:.5;background-image:radial-gradient(circle at 20% 30%,rgba(37, 99, 235,.10) 0,transparent 38%),radial-gradient(circle at 80% 70%,rgba(29,78,216,.08) 0,transparent 48%);pointer-events:none}.kv-gaiheki-logo-tile{display:inline-flex;align-items:center;justify-content:center;width:120px;height:120px;border-radius:16px;background:#fff;box-shadow:0 4px 14px rgba(17,24,39,.06),0 1px 2px rgba(17,24,39,.04);border:1px solid rgba(96, 165, 250,.5)}.kv-gaiheki-logo-mark{font-family:Inter,system-ui,sans-serif;font-weight:700;font-size:34px;background:linear-gradient(135deg,#1D4ED8,#2563EB);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-0.02em}.kv-gaiheki-tabnav{position:sticky;top:64px;z-index:20;background:#fff;border-bottom:1px solid #E5E7EB}.kv-gaiheki-tabnav-inner{display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.kv-gaiheki-tabnav-inner::-webkit-scrollbar{display:none}.kv-gaiheki-tab{flex:0 0 auto;padding:14px 16px;font-size:13px;font-weight:600;color:#6B7280;border-bottom:2px solid transparent;text-decoration:none;white-space:nowrap;transition:all 150ms;min-height:44px}.kv-gaiheki-tab:hover{color:#1E40AF}.kv-gaiheki-tab-active{color:#1E40AF;border-bottom-color:#2563EB}.kv-gaiheki-strength-num{font-family:Inter,sans-serif;font-weight:700;font-size:13px;color:#1E40AF;letter-spacing:.08em}.kv-gaiheki-step-bullet{width:32px;height:32px;border-radius:50%;background:#2563EB;color:#fff;font-family:Inter,sans-serif;font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.kv-gaiheki-mfr{display:inline-flex;align-items:center;justify-content:center;height:64px;padding:0 18px;background:#fff;border:1px solid #E5E7EB;border-radius:8px;font-family:Inter,sans-serif;font-weight:700;color:#374151;font-size:14px;letter-spacing:.02em;text-align:center}.kv-gaiheki-anchor{scroll-margin-top:80px}.kv-gaiheki-num{font-family:Inter,system-ui,sans-serif;font-feature-settings:"tnum" 1}.kv-gaiheki-floating{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid #E5E7EB;box-shadow:0 -4px 16px -2px rgba(17,24,39,.10);padding:10px 16px;display:flex;gap:8px;align-items:center}@media (min-width:768px){.kv-gaiheki-floating{left:auto;right:24px;bottom:24px;border-radius:14px;border:1px solid #E5E7EB;box-shadow:0 8px 24px -4px rgba(17,24,39,.18),0 4px 8px -2px rgba(17,24,39,.08);padding:12px 14px;max-width:420px}}.kv-gaiheki-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;border-radius:8px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:all 180ms;text-decoration:none}.kv-gaiheki-btn-sm{padding:8px 14px;font-size:13px;min-height:36px}.kv-gaiheki-btn-md{padding:10px 18px;font-size:14px;min-height:44px}.kv-gaiheki-btn-lg{padding:13px 22px;font-size:15px;min-height:48px}.kv-gaiheki-btn-primary{background:#F97316;color:#fff;box-shadow:0 2px 6px rgba(217,119,6,.20)}.kv-gaiheki-btn-primary:hover{background:#EA580C;box-shadow:0 6px 14px rgba(180,83,9,.28);color:#fff}.kv-gaiheki-btn-secondary{background:#fff;color:#1F2937;border-color:#D1D5DB}.kv-gaiheki-btn-secondary:hover{background:#F9FAFB;border-color:#9CA3AF;color:#1F2937}.kv-gaiheki-btn-ghost{background:transparent;color:#374151;border-color:transparent}.kv-gaiheki-btn-ghost:hover{background:#F3F4F6;color:#374151} /* ============================================================ Step 2A-3 Phase 3: AI生成コンテンツ用スタイル ============================================================ */ /* --- Hero catchphrase --- */ .kv-gaiheki-hero-catchphrase { margin: 1.25rem 0 0; padding: 1rem 1.25rem; background: rgba(255,255,255,0.85); border-left: 3px solid #2563EB; border-radius: 0 6px 6px 0; font-size: 0.9375rem; line-height: 1.8; color: #374151; } @media (min-width: 768px) { .kv-gaiheki-hero-catchphrase { font-size: 1rem; } } /* --- provider-target --- */ .kv-gaiheki-target-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .kv-gaiheki-target-grid { grid-template-columns: 1fr 1fr; } } .kv-gaiheki-target-card { border-radius: 10px; padding: 1.5rem; border: 1px solid #E5E7EB; } .kv-gaiheki-target-suitable { background: #EFF6FF; border-color: #BFDBFE; } .kv-gaiheki-target-unsuitable { background: #F9FAFB; border-color: #D1D5DB; } .kv-gaiheki-target-icon { font-size: 1.5rem; margin-bottom: 0.75rem; line-height: 1; } .kv-gaiheki-target-headline { font-size: 1rem; font-weight: 700; color: #111827; margin: 0 0 0.75rem; line-height: 1.4; } .kv-gaiheki-target-body { font-size: 0.9375rem; line-height: 1.8; color: #374151; margin: 0; } /* --- provider-editor-info --- */ .kv-gaiheki-editor-info { display: flex; gap: 1.25rem; align-items: flex-start; background: #fff; border: 1px solid #E5E7EB; border-radius: 10px; padding: 1.5rem; } .kv-gaiheki-editor-icon { font-size: 1.75rem; flex-shrink: 0; line-height: 1; margin-top: 0.125rem; } .kv-gaiheki-editor-body { flex: 1; min-width: 0; } .kv-gaiheki-editor-name { font-size: 0.875rem; font-weight: 700; color: #111827; margin: 0 0 0.375rem; } .kv-gaiheki-editor-desc { font-size: 0.875rem; line-height: 1.7; color: #374151; margin: 0 0 1rem; } .kv-gaiheki-editor-meta { display: flex; flex-wrap: wrap; gap: 0.375rem 1.5rem; margin: 0 0 1rem; } .kv-gaiheki-editor-meta div { display: flex; align-items: baseline; gap: 0.375rem; } .kv-gaiheki-editor-meta dt { font-size: 0.6875rem; font-weight: 700; color: #1E40AF; letter-spacing: 0.05em; white-space: nowrap; } .kv-gaiheki-editor-meta dd { font-size: 0.8125rem; color: #6B7280; margin: 0; } .kv-gaiheki-editor-disclaimer { font-size: 0.75rem; color: #9CA3AF; line-height: 1.7; margin: 0; } /* Step 2A-4 Phase 2: Provider logo (text fallback + image override) */ .kv-provider-logo { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #fff; overflow: hidden; position: relative; flex-shrink: 0; } .kv-provider-logo__img { width: 100%; height: 100%; object-fit: contain; padding: 8px; } .kv-provider-logo__text { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 12px 8px; border: 2px solid #2563eb; border-radius: 8px; background: #eff6ff; text-align: center; } .kv-provider-logo__name { font-size: 14px; font-weight: 700; line-height: 1.3; color: #1e3a8a; word-break: break-word; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .kv-provider-logo--compact { width: 80px; height: 80px; } .kv-provider-logo--compact .kv-provider-logo__text { padding: 8px 4px; } .kv-provider-logo--compact .kv-provider-logo__name { font-size: 11px; line-height: 1.25; -webkit-line-clamp: 4; } @media (max-width: 768px) { .kv-provider-logo { width: 100px; height: 100px; } .kv-provider-logo__name { font-size: 13px; } } /* Step 2A-5 Phase 3: PR mark — 非表示(ボタン内 PR マーク廃止) */ .kv-cta-pr-mark { display: none !important; } /* PR 開示バー(ヒーロー直上、控えめ) */ .kv-pr-notice { padding: 4px 16px; color: #999; font-size: 11px; line-height: 1.4; text-align: left; background: transparent; border: none; } @media (max-width: 768px) { .kv-pr-notice { padding: 4px 12px; font-size: 10px; } } /* 編集部欄の独立性開示文 */ .kv-gaiheki-editor-body .kv-disclosure { margin-top: 12px; padding: 12px; background: #f6f7f7; border-left: 3px solid #d0d7de; color: #50575e; font-size: 13px; line-height: 1.6; } /* ====================================================== Phase 2-A.5a-2: 監修者カード (E-E-A-T) ====================================================== */ .kv-editorial-card { margin: 32px 0; padding: 24px; background: linear-gradient(to right, #eff6ff 0%, #fff 100%); border: 1px solid #dbeafe; border-radius: 8px; } .kv-editorial-card__inner { display: flex; gap: 20px; align-items: flex-start; } .kv-editorial-card__icon { flex-shrink: 0; width: 64px; height: 64px; background: #eff6ff; border: 2px solid #2563eb; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .kv-editorial-card__content { flex: 1; min-width: 0; } .kv-editorial-card__title { font-size: 12px; color: #1e3a8a; font-weight: 700; margin: 0 0 4px; letter-spacing: 0.07em; text-transform: uppercase; } .kv-editorial-card__name { font-size: 17px; font-weight: 700; color: #1d2327; margin: 0 0 10px; } .kv-editorial-card__desc { font-size: 14px; line-height: 1.75; color: #4a5568; margin: 0 0 10px; } .kv-editorial-card__meta { list-style: none; padding: 0; margin: 0 0 10px; font-size: 13px; color: #50575e; } .kv-editorial-card__meta li { padding: 2px 0; } .kv-editorial-card__meta li strong { color: #1d2327; margin-right: 4px; } .kv-editorial-card__links { font-size: 13px; margin: 0; color: #6b7280; } .kv-editorial-card__links a { color: #1e3a8a; text-decoration: underline; } .kv-editorial-card__links a:hover { color: #2563eb; } .kv-divider { margin: 0 8px; color: #d0d7de; } @media (max-width: 768px) { .kv-editorial-card__inner { flex-direction: column; gap: 14px; } .kv-editorial-card__icon { width: 48px; height: 48px; } .kv-editorial-card__name { font-size: 15px; } } /* ====================================================== Phase 2-A.5a-2 補正: Solar 情報ページ (editorial/about/privacy) ====================================================== */ .kv-gaiheki-info-page__content h2 { font-size: 1.3125rem; font-weight: 700; color: #1d2327; margin: 2rem 0 0.75rem; padding-left: 0.75rem; border-left: 4px solid #2563eb; line-height: 1.4; } .kv-gaiheki-info-page__content p { font-size: 0.9375rem; line-height: 1.8; color: #4a5568; margin: 0 0 1rem; } .kv-gaiheki-info-page__content ul, .kv-gaiheki-info-page__content ol { margin: 0 0 1rem 1.5rem; color: #4a5568; } .kv-gaiheki-info-page__content li { font-size: 0.9375rem; line-height: 1.8; margin-bottom: 0.25rem; } .kv-gaiheki-info-page__content a { color: #1e3a8a; text-decoration: underline; } .kv-gaiheki-info-page__content a:hover { color: #2563eb; } /* ================================================================ */ /* Phase 2-A.5a-3 Step 1: 共通デザインシステム(タイポ・カラー・余白) */ /* ================================================================ */ /* --- カラー定義(CSS 変数) --- */ :root { /* ブランドカラー(blue/navy — gaiheki rebrand) */ --kv-color-primary: #2563EB; --kv-color-primary-dark: #1D4ED8; --kv-color-primary-light: #DBEAFE; --kv-color-primary-bg: #EFF6FF; /* CTA カラー(オレンジ系 pop on blue、視認性 UP) */ --kv-color-cta: #F97316; --kv-color-cta-hover: #EA580C; --kv-color-cta-light: #FFEDD5; /* テキストカラー */ --kv-color-text-primary: #1d2327; --kv-color-text-secondary: #4a5568; --kv-color-text-muted: #718096; --kv-color-text-light: #a0aec0; /* 警告・状態カラー */ --kv-color-warning: #d97706; --kv-color-warning-bg: #fef3c7; --kv-color-danger: #dc2626; --kv-color-danger-bg: #fee2e2; --kv-color-success: #059669; --kv-color-success-bg: #d1fae5; --kv-color-info: #2271b1; --kv-color-info-bg: #dbeafe; /* グレースケール */ --kv-color-gray-50: #f9fafb; --kv-color-gray-100: #f3f4f6; --kv-color-gray-200: #e5e7eb; --kv-color-gray-300: #d1d5db; --kv-color-gray-400: #9ca3af; --kv-color-gray-500: #6b7280; --kv-color-gray-600: #4b5563; --kv-color-gray-700: #374151; --kv-color-gray-800: #1f2937; --kv-color-gray-900: #111827; /* レイアウト */ --kv-container-max: 1120px; --kv-container-padding: 24px; --kv-section-spacing-pc: 80px; --kv-section-spacing-sp: 48px; --kv-card-spacing-pc: 24px; --kv-card-spacing-sp: 16px; /* タイポグラフィ */ --kv-font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif; --kv-font-size-h1-pc: 32px; --kv-font-size-h1-sp: 24px; --kv-font-size-h2-pc: 24px; --kv-font-size-h2-sp: 20px; --kv-font-size-h3-pc: 20px; --kv-font-size-h3-sp: 18px; --kv-font-size-h4-pc: 18px; --kv-font-size-h4-sp: 16px; --kv-font-size-body: 16px; --kv-font-size-small: 14px; --kv-font-size-xs: 12px; --kv-line-height-body: 1.75; --kv-line-height-heading: 1.4; } /* --- 等幅数字(テーブル揃え対策) --- */ .kv-numeric, .kv-table td.numeric, .kv-stats-number { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; } /* --- 見出しスケール(新クラス .kv-gaiheki-h*) --- */ .kv-gaiheki-h1 { font-size: var(--kv-font-size-h1-pc); font-weight: 700; line-height: var(--kv-line-height-heading); color: var(--kv-color-text-primary); } .kv-gaiheki-h2 { font-size: var(--kv-font-size-h2-pc); font-weight: 700; line-height: var(--kv-line-height-heading); color: var(--kv-color-text-primary); } .kv-gaiheki-h3 { font-size: var(--kv-font-size-h3-pc); font-weight: 700; line-height: var(--kv-line-height-heading); color: var(--kv-color-text-primary); } .kv-gaiheki-h4 { font-size: var(--kv-font-size-h4-pc); font-weight: 700; line-height: var(--kv-line-height-heading); color: var(--kv-color-text-primary); } /* --- CTA ボタンの濃いオレンジ統一 --- */ .kv-cta-button, a.kv-cta-button { background: var(--kv-color-cta); color: #fff; border: none; padding: 14px 32px; font-size: 16px; font-weight: 700; border-radius: 8px; text-decoration: none; display: inline-block; transition: background 0.2s; min-height: 44px; line-height: 1.4; } .kv-cta-button:hover, a.kv-cta-button:hover { background: var(--kv-color-cta-hover); color: #fff; } /* .kv-btn-primary の CTA カラー上書き(既存 #f97316 → #F97316) */ .kv-btn-primary, .kv-gaiheki-btn-primary { background-color: var(--kv-color-cta) !important; } .kv-btn-primary:hover, .kv-gaiheki-btn-primary:hover { background-color: var(--kv-color-cta-hover) !important; } /* --- 警告/注意/成功 状態カラー --- */ .kv-alert-warning { background: var(--kv-color-warning-bg); color: var(--kv-color-warning); border-left: 4px solid var(--kv-color-warning); padding: 12px 16px; margin: 16px 0; border-radius: 0 4px 4px 0; } .kv-alert-danger { background: var(--kv-color-danger-bg); color: var(--kv-color-danger); border-left: 4px solid var(--kv-color-danger); padding: 12px 16px; margin: 16px 0; border-radius: 0 4px 4px 0; } .kv-alert-success { background: var(--kv-color-success-bg); color: var(--kv-color-success); border-left: 4px solid var(--kv-color-success); padding: 12px 16px; margin: 16px 0; border-radius: 0 4px 4px 0; } .kv-alert-info { background: var(--kv-color-info-bg); color: var(--kv-color-info); border-left: 4px solid var(--kv-color-info); padding: 12px 16px; margin: 16px 0; border-radius: 0 4px 4px 0; } /* --- カード間余白統一 --- */ .kv-card-grid > * + *, .kv-cards > * + * { margin-top: var(--kv-card-spacing-pc); } @media (min-width: 769px) { .kv-card-grid { display: grid; gap: var(--kv-card-spacing-pc); } } /* --- 本文の読みやすさ(max-width 制御) --- */ .kv-prose, .kv-readable { max-width: 720px; margin-left: auto; margin-right: auto; } /* --- 本文リンク色統一 --- */ .kv-gaiheki-section a:not([class*="kv-btn"]):not([class*="kv-cta"]):not([class*="kv-gaiheki-btn"]):not(.button) { color: #0066CC; } .kv-gaiheki-section a:not([class*="kv-btn"]):not([class*="kv-cta"]):not([class*="kv-gaiheki-btn"]):not(.button):hover { color: #004999; } /* ================================================================ */ /* SP 対応(モバイル) */ /* ================================================================ */ @media (max-width: 768px) { .kv-gaiheki-h1 { font-size: var(--kv-font-size-h1-sp); } .kv-gaiheki-h2 { font-size: var(--kv-font-size-h2-sp); } .kv-gaiheki-h3 { font-size: var(--kv-font-size-h3-sp); } .kv-gaiheki-h4 { font-size: var(--kv-font-size-h4-sp); } .kv-card-grid > * + *, .kv-cards > * + * { margin-top: var(--kv-card-spacing-sp); } .kv-cta-button, a.kv-cta-button { width: 100%; padding: 16px 24px; font-size: 15px; } } /* ================================================================ */ /* アクセシビリティ(フォーカスインジケーター) */ /* ================================================================ */ .kv-gaiheki-section a:focus-visible, .kv-gaiheki-section button:focus-visible, .kv-gaiheki-section input:focus-visible { outline: 2px solid var(--kv-color-primary); outline-offset: 2px; } /* ================================================================ */ /* Phase 2-A.5a-3 Step 2: 具体的要素のピンポイント修正 */ /* ================================================================ */ /* --- 業者一覧カード強化 --- */ .kv-vendor-card, .card-vendor { position: relative; background: #fff; border: 1px solid var(--kv-color-gray-200); border-radius: 12px; padding: 20px; transition: all 0.2s ease; display: flex; flex-direction: column; height: 100%; } .kv-vendor-card:hover, .card-vendor:hover { border-color: var(--kv-color-primary); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15); transform: translateY(-2px); } .kv-badge-pill { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1; } .kv-badge-subsidy { background: var(--kv-color-success-bg); color: var(--kv-color-success); } .kv-badge-area { background: var(--kv-color-info-bg); color: var(--kv-color-info); } .kv-badge-rank { background: var(--kv-color-primary); color: #fff; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; } /* --- ヒーローメタ情報帯 --- */ .kv-hero-meta { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0; padding: 12px 16px; background: var(--kv-color-gray-50); border-left: 3px solid var(--kv-color-primary); font-size: 13px; color: var(--kv-color-text-secondary); } .kv-hero-meta__item { display: inline-flex; align-items: center; gap: 6px; } .kv-hero-meta__label { color: var(--kv-color-text-muted); font-size: 12px; } .kv-hero-meta__value { color: var(--kv-color-text-primary); font-weight: 600; } /* --- 業者詳細: 注目ポイントバッジ --- */ .kv-highlight-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; } .kv-highlight-badge { background: var(--kv-color-primary-bg); color: var(--kv-color-primary-dark); padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid var(--kv-color-primary-light); display: inline-flex; align-items: center; gap: 6px; } .kv-highlight-badge svg { width: 14px; height: 14px; } /* --- 業者詳細メタ情報(5項目化) --- */ .kv-provider-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; padding: 16px; background: var(--kv-color-gray-50); border-radius: 8px; margin: 16px 0; } .kv-provider-meta-item { display: flex; flex-direction: column; gap: 4px; } .kv-provider-meta-item__label { font-size: 11px; color: var(--kv-color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .kv-provider-meta-item__value { font-size: 16px; color: var(--kv-color-text-primary); font-weight: 700; line-height: 1.4; } /* --- 追従 CTA: ロゴ正方形化 --- */ .kv-floating-cta__logo { width: 48px; height: 48px; flex-shrink: 0; border-radius: 8px; background: var(--kv-color-primary-bg); border: 1.5px solid var(--kv-color-primary); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 14px; font-weight: 700; color: var(--kv-color-primary-dark); text-align: center; line-height: 1.2; padding: 4px; } .kv-floating-cta__logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .kv-floating-cta__content { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .kv-floating-cta__name { font-size: 14px; font-weight: 700; color: var(--kv-color-text-primary); line-height: 1.3; word-break: keep-all; overflow-wrap: anywhere; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 768px) { .kv-floating-cta__logo { width: 40px; height: 40px; font-size: 12px; } .kv-floating-cta__name { font-size: 12px; } } /* --- タブ navigation SP 対応 --- */ .kv-tab-nav-wrapper { position: relative; } .kv-tab-nav { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .kv-tab-nav::-webkit-scrollbar { display: none; } .kv-tab-nav__item { padding: 12px 20px; font-size: 14px; font-weight: 600; color: var(--kv-color-text-secondary); white-space: nowrap; min-height: 44px; } @media (max-width: 768px) { .kv-tab-nav-wrapper::after { content: ''; position: absolute; top: 0; right: 0; width: 30px; height: 100%; background: linear-gradient(to right, transparent, #fff); pointer-events: none; } .kv-tab-nav__item { padding: 12px 16px; font-size: 13px; } } /* --- 都道府県・市区町村カード --- */ .kv-area-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0; } .kv-area-card { background: #fff; border: 1px solid var(--kv-color-gray-200); border-radius: 8px; padding: 12px 16px; text-align: center; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--kv-color-text-primary); text-decoration: none; min-height: 44px; word-break: keep-all; overflow-wrap: anywhere; } .kv-area-card:hover { border-color: var(--kv-color-primary); background: var(--kv-color-primary-bg); color: var(--kv-color-primary-dark); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15); } .kv-area-card svg { width: 14px; height: 14px; color: var(--kv-color-primary); } @media (max-width: 768px) { .kv-area-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; } .kv-area-card { padding: 10px 12px; font-size: 13px; } } /* --- アイコン共通 --- */ .kv-icon-inline { display: inline-block; width: 1em; height: 1em; vertical-align: middle; fill: currentColor; } .kv-icon-md { width: 24px; height: 24px; } .kv-icon-lg { width: 48px; height: 48px; } /* --- Solar セクション基本タイポ --- */ body.single-gaiheki_contractor main, body.page-template-page-gaiheki-top main, body.page-template-page-gaiheki-area-index main { font-size: var(--kv-font-size-body, 16px); line-height: var(--kv-line-height-body, 1.75); color: var(--kv-color-text-primary); } body.single-gaiheki_contractor main h1, body.page-template-page-gaiheki-top main h1 { font-size: var(--kv-font-size-h1-pc, 32px); line-height: var(--kv-line-height-heading, 1.3); } body.single-gaiheki_contractor main h2, body.page-template-page-gaiheki-top main h2 { font-size: var(--kv-font-size-h2-pc, 26px); line-height: var(--kv-line-height-heading, 1.3); } @media (max-width: 768px) { body.single-gaiheki_contractor main h1, body.page-template-page-gaiheki-top main h1 { font-size: var(--kv-font-size-h1-sp, 24px); } body.single-gaiheki_contractor main h2, body.page-template-page-gaiheki-top main h2 { font-size: var(--kv-font-size-h2-sp, 20px); } } /* ================================================================ */ /* Phase 2-A.5a-3 Step 2 */ /* ================================================================ */ .kv-vendor-card, .card-vendor { position: relative; background: #fff; border: 1px solid var(--kv-color-gray-200); border-radius: 12px; padding: 20px; transition: all 0.2s ease; display: flex; flex-direction: column; height: 100%; } .kv-vendor-card:hover, .card-vendor:hover { border-color: var(--kv-color-primary); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15); transform: translateY(-2px); } .kv-badge-pill { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1; } .kv-badge-subsidy { background: var(--kv-color-success-bg); color: var(--kv-color-success); } .kv-badge-area { background: var(--kv-color-info-bg); color: var(--kv-color-info); } .kv-badge-rank { background: var(--kv-color-primary); color: #fff; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; } .kv-hero-meta { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0; padding: 12px 16px; background: var(--kv-color-gray-50); border-left: 3px solid var(--kv-color-primary); font-size: 13px; color: var(--kv-color-text-secondary); } .kv-hero-meta__item { display: inline-flex; align-items: center; gap: 6px; } .kv-hero-meta__label { color: var(--kv-color-text-muted); font-size: 12px; } .kv-hero-meta__value { color: var(--kv-color-text-primary); font-weight: 600; } .kv-highlight-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; } .kv-highlight-badge { background: var(--kv-color-primary-bg); color: var(--kv-color-primary-dark); padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid var(--kv-color-primary-light); display: inline-flex; align-items: center; gap: 6px; } .kv-highlight-badge svg { width: 14px; height: 14px; } .kv-provider-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; padding: 16px; background: var(--kv-color-gray-50); border-radius: 8px; margin: 16px 0; } .kv-provider-meta-item { display: flex; flex-direction: column; gap: 4px; } .kv-provider-meta-item__label { font-size: 11px; color: var(--kv-color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .kv-provider-meta-item__value { font-size: 16px; color: var(--kv-color-text-primary); font-weight: 700; line-height: 1.4; } .kv-floating-cta__logo { width: 48px; height: 48px; flex-shrink: 0; border-radius: 8px; background: var(--kv-color-primary-bg); border: 1.5px solid var(--kv-color-primary); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 14px; font-weight: 700; color: var(--kv-color-primary-dark); text-align: center; line-height: 1.2; padding: 4px; } .kv-floating-cta__logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .kv-floating-cta__content { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .kv-floating-cta__name { font-size: 14px; font-weight: 700; color: var(--kv-color-text-primary); line-height: 1.3; word-break: keep-all; overflow-wrap: anywhere; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 768px) { .kv-floating-cta__logo { width: 40px; height: 40px; font-size: 12px; } .kv-floating-cta__name { font-size: 12px; } } .kv-tab-nav-wrapper { position: relative; } .kv-tab-nav { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .kv-tab-nav::-webkit-scrollbar { display: none; } .kv-tab-nav__item { padding: 12px 20px; font-size: 14px; font-weight: 600; color: var(--kv-color-text-secondary); white-space: nowrap; min-height: 44px; } @media (max-width: 768px) { .kv-tab-nav-wrapper::after { content: ''; position: absolute; top: 0; right: 0; width: 30px; height: 100%; background: linear-gradient(to right, transparent, #fff); pointer-events: none; } .kv-tab-nav__item { padding: 12px 16px; font-size: 13px; } } .kv-area-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0; } .kv-area-card { background: #fff; border: 1px solid var(--kv-color-gray-200); border-radius: 8px; padding: 12px 16px; text-align: center; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--kv-color-text-primary); text-decoration: none; min-height: 44px; word-break: keep-all; overflow-wrap: anywhere; } .kv-area-card:hover { border-color: var(--kv-color-primary); background: var(--kv-color-primary-bg); color: var(--kv-color-primary-dark); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15); } .kv-area-card svg { width: 14px; height: 14px; color: var(--kv-color-primary); } @media (max-width: 768px) { .kv-area-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; } .kv-area-card { padding: 10px 12px; font-size: 13px; } } .kv-icon-inline { display: inline-block; width: 1em; height: 1em; vertical-align: middle; fill: currentColor; } .kv-icon-md { width: 24px; height: 24px; } .kv-icon-lg { width: 48px; height: 48px; } body.single-gaiheki_contractor main, body.page-template-page-gaiheki-top main, body.page-template-page-gaiheki-area-index main { font-size: var(--kv-font-size-body, 16px); line-height: var(--kv-line-height-body, 1.75); color: var(--kv-color-text-primary); } body.single-gaiheki_contractor main h1, body.page-template-page-gaiheki-top main h1 { font-size: var(--kv-font-size-h1-pc, 32px); line-height: var(--kv-line-height-heading, 1.3); } body.single-gaiheki_contractor main h2, body.page-template-page-gaiheki-top main h2 { font-size: var(--kv-font-size-h2-pc, 26px); line-height: var(--kv-line-height-heading, 1.3); } @media (max-width: 768px) { body.single-gaiheki_contractor main h1, body.page-template-page-gaiheki-top main h1 { font-size: var(--kv-font-size-h1-sp, 24px); } body.single-gaiheki_contractor main h2, body.page-template-page-gaiheki-top main h2 { font-size: var(--kv-font-size-h2-sp, 20px); } } /* ================================================================ */ /* Phase 2-A.5a-3 Step 3: SP line-break / floating CTA */ /* ================================================================ */ /* --- SP line-break control --- */ @media (max-width: 768px) { .kv-tab-nav__item, .kv-cta-button, .kv-btn-primary, .kv-badge-pill, .kv-highlight-badge, .kv-area-card, .kv-vendor-card h2, .kv-vendor-card h3, .kv-hero-meta__item { word-break: keep-all; overflow-wrap: anywhere; } .kv-tab-nav__item, .kv-tab-segment { min-width: 80px; text-align: center; } .kv-area-card, .kv-prefecture-card { font-size: 13px; padding: 10px 8px; } .kv-vendor-card__name, .card-vendor h2, .card-vendor h3 { font-size: 16px; line-height: 1.4; } .sp-only { display: inline; } .pc-only { display: none; } } @media (min-width: 769px) { .sp-only { display: none; } .pc-only { display: inline; } } /* --- floating CTA SP: padding-bottom to avoid content overlap --- */ @media (max-width: 768px) { body.single-gaiheki_contractor .l-main, body.single-gaiheki_contractor main { padding-bottom: 80px; } .kv-floating-cta__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; } } /* --- tab nav SP: gradient indicators both sides --- */ @media (max-width: 768px) { .kv-tab-nav-wrapper { position: relative; } .kv-tab-nav-wrapper::before { content: ''; position: absolute; top: 0; left: 0; width: 24px; height: 100%; background: linear-gradient(to right, #fff, transparent); pointer-events: none; z-index: 2; } .kv-tab-nav-wrapper::after { width: 30px; } .kv-tab-nav { padding: 0 16px; } } /* --- vendor card SP adjustments --- */ @media (max-width: 768px) { .kv-vendor-card, .card-vendor { padding: 16px; } .kv-badge-rank { width: 28px; height: 28px; font-size: 12px; } .kv-badge-pill { font-size: 10px; padding: 2px 6px; } } /* --- hero meta SP: vertical layout --- */ @media (max-width: 768px) { .kv-hero-meta { flex-direction: column; gap: 8px; padding: 10px 12px; font-size: 12px; } .kv-hero-meta__item { width: 100%; } } /* --- provider meta grid SP --- */ @media (max-width: 768px) { .kv-provider-meta-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px; } .kv-provider-meta-item__value { font-size: 14px; } } /* --- sticky header SP --- */ @media (max-width: 768px) { .kv-sticky-header { position: sticky; top: 0; background: #fff; z-index: 100; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } } /* ================================================================ */ /* Phase 2-B.0: v2 デザイントークン */ /* (design_assets_v2/colors_and_type.css 準拠) */ /* 既存 :root はそのまま保持。本ブロックは v2 で追加されたトークン。 */ /* 重複変数は CSS cascade により後勝ち = 本ブロックが優先される。 */ /* 既存テンプレ互換のため --kv-color-cta 等は再定義しない。 */ /* ================================================================ */ :root { /* === Primary scale (blue/navy — gaiheki rebrand: trustworthy housing/renovation) === */ --kv-color-primary-50: #EFF6FF; --kv-color-primary-100: #DBEAFE; --kv-color-primary-200: #BFDBFE; --kv-color-primary-300: #93C5FD; --kv-color-primary-400: #60A5FA; --kv-color-primary-500: #2563EB; --kv-color-primary-600: #1D4ED8; --kv-color-primary-700: #1E40AF; --kv-color-primary-800: #1E3A8A; --kv-color-primary-900: #172554; /* === Accent (teal — trust / quality, distinct from solar emerald) === */ --kv-color-accent-50: #F0FDFA; --kv-color-accent-100: #CCFBF1; --kv-color-accent-400: #2DD4BF; --kv-color-accent-500: #14B8A6; --kv-color-accent-600: #0D9488; --kv-color-accent-700: #0F766E; /* === Yellow (subsidy / announcement) === */ --kv-color-yellow-100: #FEF9C3; --kv-color-yellow-300: #FDE047; --kv-color-yellow-400: #FACC15; --kv-color-yellow-500: #EAB308; /* === Error / PR === */ --kv-color-error: #EF4444; --kv-color-pr-bg: #F3F4F6; --kv-color-pr-text: #6B7280; /* === Semantic surface tokens === */ --kv-bg-page: var(--kv-color-gray-50); --kv-bg-section: var(--kv-color-gray-100); --kv-bg-surface: #FFFFFF; --kv-fg-default: var(--kv-color-gray-900); --kv-fg-muted: var(--kv-color-gray-500); --kv-fg-subtle: var(--kv-color-gray-400); --kv-fg-link: var(--kv-color-primary-600); --kv-border: var(--kv-color-gray-200); --kv-border-strong: var(--kv-color-gray-300); /* === Type families === */ --kv-font-jp: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', system-ui, sans-serif; --kv-font-en: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --kv-font-base: var(--kv-font-jp); --kv-font-num: var(--kv-font-en); /* === Type scale === */ --kv-text-xs: 12px; --kv-text-sm: 14px; --kv-text-base: 16px; --kv-text-lg: 18px; --kv-text-xl: 20px; --kv-text-2xl: 24px; --kv-text-3xl: 28px; --kv-text-4xl: 34px; --kv-text-5xl: 44px; --kv-leading-tight: 1.25; --kv-leading-snug: 1.4; --kv-leading-normal: 1.7; --kv-leading-loose: 1.9; --kv-tracking-tight: -0.01em; --kv-tracking-normal: 0; --kv-tracking-wide: 0.04em; /* === Spacing (4px base) === */ --kv-space-1: 4px; --kv-space-2: 8px; --kv-space-3: 12px; --kv-space-4: 16px; --kv-space-5: 20px; --kv-space-6: 24px; --kv-space-8: 32px; --kv-space-10: 40px; --kv-space-12: 48px; --kv-space-16: 64px; --kv-space-20: 80px; /* === Radii === */ --kv-radius-sm: 4px; --kv-radius-md: 8px; --kv-radius-lg: 12px; --kv-radius-xl: 16px; --kv-radius-full: 9999px; /* === Shadows === */ --kv-shadow-sm: 0 1px 2px 0 rgba(17, 24, 39, 0.05); --kv-shadow-md: 0 4px 6px -1px rgba(17, 24, 39, 0.08), 0 2px 4px -2px rgba(17, 24, 39, 0.05); --kv-shadow-lg: 0 10px 15px -3px rgba(17, 24, 39, 0.10), 0 4px 6px -4px rgba(17, 24, 39, 0.05); --kv-shadow-xl: 0 20px 25px -5px rgba(17, 24, 39, 0.10), 0 8px 10px -6px rgba(17, 24, 39, 0.06); --kv-shadow-cta: 0 2px 6px rgba(217, 119, 6, 0.20); --kv-shadow-cta-hover: 0 6px 14px rgba(180, 83, 9, 0.28); /* === Layout === */ --kv-container: 1120px; --kv-container-narrow: 760px; --kv-header-h: 64px; /* === Motion === */ --kv-ease: cubic-bezier(0.4, 0, 0.2, 1); --kv-dur-fast: 120ms; --kv-dur-base: 180ms; --kv-dur-slow: 280ms; } /* ================================================================ */ /* Phase 2-B.3R: Frame 4 専用カスタムクラス追加 */ /* design_assets_v2/Frame 4 で使用される独自スタイルを solar.css に */ /* 移植(kv-gaiheki- プレフィックス統一)。Tailwind utility は既に */ /* compile されている line 1-2 でカバー。 */ /* ================================================================ */ /* Anchor scroll offset(tab nav 64px + 余白) */ .kv-gaiheki-anchor { scroll-margin-top: 80px; } /* Bar track/fill(口コミ分布) */ .kv-gaiheki-bar-track { height: 8px; background: #F3F4F6; border-radius: 9999px; overflow: hidden; display: block; } .kv-gaiheki-bar-fill { display: block; height: 100%; background: #2563EB; } /* Pricing Ribbon */ .kv-gaiheki-ribbon { position: absolute; top: 0; right: 0; background: #F97316; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 4px 10px; border-radius: 0 12px 0 8px; font-family: Inter, system-ui, sans-serif; } /* Comparison table */ .kv-gaiheki-cmp { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 680px; } .kv-gaiheki-cmp th, .kv-gaiheki-cmp td { padding: 12px 14px; border-bottom: 1px solid #E5E7EB; vertical-align: top; } .kv-gaiheki-cmp thead th { background: #F9FAFB; font-size: 12px; font-weight: 700; color: #374151; text-align: left; } .kv-gaiheki-cmp .kv-gaiheki-cmp-self { background: #EFF6FF; } .kv-gaiheki-cmp .kv-gaiheki-cmp-self-head { background: #DBEAFE !important; color: #1E3A8A; } .kv-gaiheki-cmp .kv-gaiheki-cmp-row-label { font-size: 12px; color: #6B7280; font-weight: 500; background: #F9FAFB; } /* Floating CTA thumbnail (PC のみ表示) */ .kv-gaiheki-floating-thumb { display: none; } @media (min-width: 768px) { .kv-gaiheki-floating-thumb { display: inline-flex; align-items: center; justify-content: center; } } /* Card hover */ .kv-gaiheki-card { transition: box-shadow 180ms cubic-bezier(.4,0,.2,1), border-color 180ms; } .kv-gaiheki-card:hover { box-shadow: 0 4px 6px -1px rgba(17,24,39,.08), 0 2px 4px -2px rgba(17,24,39,.05); border-color: #D1D5DB; } /* Accordion (FAQ details) */ .kv-gaiheki-acc summary { list-style: none; cursor: pointer; } .kv-gaiheki-acc summary::-webkit-details-marker { display: none; } .kv-gaiheki-acc[open] .kv-gaiheki-acc-icon { transform: rotate(180deg); } .kv-gaiheki-acc-icon { transition: transform 180ms cubic-bezier(.4,0,.2,1); display: inline-block; } /* Hero background (Frame 4: linear gradient + radial accents) */ .kv-gaiheki-hero { background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 60%, #BFDBFE 100%); position: relative; overflow: hidden; } .kv-gaiheki-hero::before { content: ''; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(circle at 20% 30%, rgba(37, 99, 235,.10) 0, transparent 38%), radial-gradient(circle at 80% 70%, rgba(217,119,6,.08) 0, transparent 48%); pointer-events: none; } /* Step line(フローのステップ間の線、Frame 4 では未使用だが拡張用) */ .kv-gaiheki-step-line { flex: 1; height: 2px; background: #93C5FD; } /* PR notice (既存仕様維持) */ .kv-pr-notice { background: #F3F4F6; color: #6B7280; font-size: 11px; text-align: center; padding: 6px 12px; letter-spacing: .04em; } /* ================================================================ */ /* Phase 2-B.3R: Frame 4 必須 utility class フォールバック */ /* ================================================================ */ /* Color: text */ .kv-gaiheki-text-ink { color: #1F2937; } .kv-gaiheki-text-ink-muted { color: #6B7280; } .kv-gaiheki-text-ink-subtle { color: #9CA3AF; } .kv-gaiheki-text-primary-200 { color: #BFDBFE; } .kv-gaiheki-text-primary-500 { color: #2563EB; } .kv-gaiheki-text-primary-600 { color: #1D4ED8; } .kv-gaiheki-text-primary-700 { color: #1E40AF; } .kv-gaiheki-text-accent-600 { color: #059669; } .kv-gaiheki-text-accent-700 { color: #047857; } .kv-gaiheki-text-gray-300 { color: #D1D5DB; } .kv-gaiheki-text-gray-400 { color: #9CA3AF; } .kv-gaiheki-text-gray-500 { color: #6B7280; } .kv-gaiheki-text-gray-700 { color: #374151; } .kv-gaiheki-text-gray-900 { color: #111827; } .kv-gaiheki-text-white { color: #ffffff; } /* Color: bg */ .kv-gaiheki-bg-white { background-color: #ffffff; } .kv-gaiheki-bg-page, .kv-gaiheki-bg-surface-page { background-color: #F9FAFB; } .kv-gaiheki-bg-section, .kv-gaiheki-bg-surface-section { background-color: #F3F4F6; } .kv-gaiheki-bg-primary-50 { background-color: #EFF6FF; } .kv-gaiheki-bg-primary-100 { background-color: #DBEAFE; } .kv-gaiheki-bg-primary-500 { background-color: #2563EB; } .kv-gaiheki-bg-primary-700 { background-color: #1E40AF; } .kv-gaiheki-bg-accent-50 { background-color: #ECFDF5; } .kv-gaiheki-bg-accent-500 { background-color: #10B981; } .kv-gaiheki-bg-gray-900 { background-color: #111827; } .kv-gaiheki-bg-yellow-100 { background-color: #FEF9C3; } .kv-gaiheki-bg-yellow-400 { background-color: #FACC15; } /* Color: border */ .kv-gaiheki-border-surface-border { border-color: #E5E7EB; } .kv-gaiheki-border-primary-100 { border-color: #DBEAFE; } .kv-gaiheki-border-primary-200 { border-color: #BFDBFE; } .kv-gaiheki-border-primary-300 { border-color: #93C5FD; } .kv-gaiheki-border-gray-800 { border-color: #1F2937; } /* Border width */ .kv-gaiheki-border { border-width: 1px; border-style: solid; } .kv-gaiheki-border-0 { border-width: 0; } .kv-gaiheki-border-2 { border-width: 2px; border-style: solid; } .kv-gaiheki-border-t { border-top-width: 1px; border-top-style: solid; } .kv-gaiheki-border-b { border-bottom-width: 1px; border-bottom-style: solid; } .kv-gaiheki-border-r { border-right-width: 1px; border-right-style: solid; } .kv-gaiheki-border-l { border-left-width: 1px; border-left-style: solid; } .kv-gaiheki-border-y { border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; } .kv-gaiheki-border-x { border-left-width: 1px; border-right-width: 1px; border-left-style: solid; border-right-style: solid; } /* Border radius */ .kv-gaiheki-rounded { border-radius: 4px; } .kv-gaiheki-rounded-md { border-radius: 6px; } .kv-gaiheki-rounded-lg { border-radius: 8px; } .kv-gaiheki-rounded-full { border-radius: 9999px; } .kv-gaiheki-rounded-kv-sm { border-radius: 4px; } .kv-gaiheki-rounded-kv-md { border-radius: 8px; } .kv-gaiheki-rounded-kv-lg { border-radius: 12px; } .kv-gaiheki-rounded-kv-xl { border-radius: 16px; } /* Layout: display */ .kv-gaiheki-block { display: block; } .kv-gaiheki-inline-block{ display: inline-block; } .kv-gaiheki-inline { display: inline; } .kv-gaiheki-flex { display: flex; } .kv-gaiheki-inline-flex { display: inline-flex; } .kv-gaiheki-grid { display: grid; } .kv-gaiheki-hidden { display: none; } /* Position */ .kv-gaiheki-relative { position: relative; } .kv-gaiheki-absolute { position: absolute; } .kv-gaiheki-fixed { position: fixed; } .kv-gaiheki-sticky { position: sticky; } .kv-gaiheki-inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .kv-gaiheki-top-0 { top: 0; } .kv-gaiheki-bottom-0 { bottom: 0; } .kv-gaiheki-left-0 { left: 0; } .kv-gaiheki-right-0 { right: 0; } .kv-gaiheki-z-30 { z-index: 30; } .kv-gaiheki-z-40 { z-index: 40; } /* Flex */ .kv-gaiheki-flex-row { flex-direction: row; } .kv-gaiheki-flex-col { flex-direction: column; } .kv-gaiheki-flex-wrap { flex-wrap: wrap; } .kv-gaiheki-flex-1 { flex: 1 1 0%; } .kv-gaiheki-flex-shrink-0, .kv-gaiheki-shrink-0 { flex-shrink: 0; } .kv-gaiheki-items-start { align-items: flex-start; } .kv-gaiheki-items-center { align-items: center; } .kv-gaiheki-items-end { align-items: flex-end; } .kv-gaiheki-items-baseline { align-items: baseline; } .kv-gaiheki-justify-start { justify-content: flex-start; } .kv-gaiheki-justify-center { justify-content: center; } .kv-gaiheki-justify-between { justify-content: space-between; } .kv-gaiheki-justify-end { justify-content: flex-end; } .kv-gaiheki-self-start { align-self: flex-start; } .kv-gaiheki-self-center { align-self: center; } /* Grid */ .kv-gaiheki-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .kv-gaiheki-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kv-gaiheki-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kv-gaiheki-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kv-gaiheki-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* Gap */ .kv-gaiheki-gap-1 { gap: 4px; } .kv-gaiheki-gap-1\.5 { gap: 6px; } .kv-gaiheki-gap-2 { gap: 8px; } .kv-gaiheki-gap-3 { gap: 12px; } .kv-gaiheki-gap-4 { gap: 16px; } .kv-gaiheki-gap-5 { gap: 20px; } .kv-gaiheki-gap-6 { gap: 24px; } .kv-gaiheki-gap-7 { gap: 28px; } .kv-gaiheki-gap-8 { gap: 32px; } /* Width / Height */ .kv-gaiheki-w-full { width: 100%; } .kv-gaiheki-w-auto { width: auto; } .kv-gaiheki-w-1\.5 { width: 6px; } .kv-gaiheki-w-7 { width: 28px; } .kv-gaiheki-w-8 { width: 32px; } .kv-gaiheki-w-10 { width: 40px; } .kv-gaiheki-w-12 { width: 48px; } .kv-gaiheki-h-1\.5 { height: 6px; } .kv-gaiheki-h-8 { height: 32px; } .kv-gaiheki-h-12 { height: 48px; } .kv-gaiheki-h-16 { height: 64px; } .kv-gaiheki-min-w-0 { min-width: 0; } .kv-gaiheki-max-w-full { max-width: 100%; } /* Margin */ .kv-gaiheki-m-0 { margin: 0; } .kv-gaiheki-mt-0 { margin-top: 0; } .kv-gaiheki-mt-0\.5 { margin-top: 2px; } .kv-gaiheki-mt-1 { margin-top: 4px; } .kv-gaiheki-mt-1\.5 { margin-top: 6px; } .kv-gaiheki-mt-2 { margin-top: 8px; } .kv-gaiheki-mt-3 { margin-top: 12px; } .kv-gaiheki-mt-4 { margin-top: 16px; } .kv-gaiheki-mt-5 { margin-top: 20px; } .kv-gaiheki-mt-6 { margin-top: 24px; } .kv-gaiheki-mt-7 { margin-top: 28px; } .kv-gaiheki-mt-8 { margin-top: 32px; } .kv-gaiheki-mt-10 { margin-top: 40px; } .kv-gaiheki-mb-0\.5 { margin-bottom: 2px; } .kv-gaiheki-mb-2 { margin-bottom: 8px; } .kv-gaiheki-mb-3 { margin-bottom: 12px; } .kv-gaiheki-mb-4 { margin-bottom: 16px; } .kv-gaiheki-mb-5 { margin-bottom: 20px; } .kv-gaiheki-mb-6 { margin-bottom: 24px; } .kv-gaiheki-mb-7 { margin-bottom: 28px; } .kv-gaiheki-mb-8 { margin-bottom: 32px; } .kv-gaiheki-ml-0\.5 { margin-left: 2px; } .kv-gaiheki-ml-1 { margin-left: 4px; } .kv-gaiheki-ml-2 { margin-left: 8px; } .kv-gaiheki-mr-1 { margin-right: 4px; } .kv-gaiheki-mr-2 { margin-right: 8px; } .kv-gaiheki-mx-auto { margin-left: auto; margin-right: auto; } .kv-gaiheki-mx-0\.5 { margin-left: 2px; margin-right: 2px; } /* Padding */ .kv-gaiheki-p-0 { padding: 0; } .kv-gaiheki-p-3 { padding: 12px; } .kv-gaiheki-p-4 { padding: 16px; } .kv-gaiheki-p-5 { padding: 20px; } .kv-gaiheki-p-6 { padding: 24px; } .kv-gaiheki-px-2 { padding-left: 8px; padding-right: 8px; } .kv-gaiheki-px-3 { padding-left: 12px; padding-right: 12px; } .kv-gaiheki-px-4 { padding-left: 16px; padding-right: 16px; } .kv-gaiheki-px-5 { padding-left: 20px; padding-right: 20px; } .kv-gaiheki-py-3 { padding-top: 12px; padding-bottom: 12px; } .kv-gaiheki-py-4 { padding-top: 16px; padding-bottom: 16px; } .kv-gaiheki-py-10 { padding-top: 40px; padding-bottom: 40px; } .kv-gaiheki-py-12 { padding-top: 48px; padding-bottom: 48px; } .kv-gaiheki-py-14 { padding-top: 56px; padding-bottom: 56px; } .kv-gaiheki-py-16 { padding-top: 64px; padding-bottom: 64px; } .kv-gaiheki-pt-1 { padding-top: 4px; } .kv-gaiheki-pt-2 { padding-top: 8px; } .kv-gaiheki-pt-4 { padding-top: 16px; } .kv-gaiheki-pt-6 { padding-top: 24px; } .kv-gaiheki-pb-4 { padding-bottom: 16px; } /* Typography */ .kv-gaiheki-text-xs { font-size: 12px; line-height: 16px; } .kv-gaiheki-text-sm { font-size: 14px; line-height: 20px; } .kv-gaiheki-text-base { font-size: 16px; line-height: 24px; } .kv-gaiheki-text-lg { font-size: 18px; line-height: 28px; } .kv-gaiheki-text-xl { font-size: 20px; line-height: 28px; } .kv-gaiheki-text-2xl { font-size: 24px; line-height: 32px; } .kv-gaiheki-text-3xl { font-size: 28px; line-height: 36px; } .kv-gaiheki-text-4xl { font-size: 34px; line-height: 40px; } .kv-gaiheki-text-5xl { font-size: 44px; line-height: 48px; } .kv-gaiheki-font-medium { font-weight: 500; } .kv-gaiheki-font-bold { font-weight: 700; } .kv-gaiheki-font-en { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } .kv-gaiheki-leading-tight { line-height: 1.25; } .kv-gaiheki-leading-snug { line-height: 1.4; } .kv-gaiheki-leading-relaxed { line-height: 1.625; } .kv-gaiheki-leading-normal { line-height: 1.7; } .kv-gaiheki-tracking-tight { letter-spacing: -0.01em; } .kv-gaiheki-tracking-wider { letter-spacing: 0.04em; } .kv-gaiheki-tracking-widest { letter-spacing: 0.08em; } .kv-gaiheki-text-left { text-align: left; } .kv-gaiheki-text-center { text-align: center; } .kv-gaiheki-text-right { text-align: right; } /* Misc */ .kv-gaiheki-overflow-hidden { overflow: hidden; } .kv-gaiheki-overflow-x-auto { overflow-x: auto; } .kv-gaiheki-no-underline { text-decoration: none; } .kv-gaiheki-cursor-pointer { cursor: pointer; } .kv-gaiheki-list-none { list-style: none; padding-left: 0; } .kv-gaiheki-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Hover */ .hover\:kv-gaiheki-text-primary-700:hover { color: #1E40AF; } .hover\:kv-gaiheki-text-white:hover { color: #ffffff; } .hover\:kv-gaiheki-bg-primary-50:hover { background-color: #EFF6FF; } .hover\:kv-gaiheki-underline:hover { text-decoration: underline; } /* Responsive sm (640px+) */ @media (min-width: 640px) { .kv-gaiheki-section .sm\:kv-gaiheki-block { display: block; } .kv-gaiheki-section .sm\:kv-gaiheki-inline-flex { display: inline-flex; } .kv-gaiheki-section .sm\:kv-gaiheki-hidden { display: none; } .kv-gaiheki-section .sm\:kv-gaiheki-flex-shrink-0 { flex-shrink: 0; } .kv-gaiheki-section .sm\:kv-gaiheki-flex-none { flex: none; } .kv-gaiheki-section .sm\:kv-gaiheki-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Responsive md (768px+) */ @media (min-width: 768px) { .kv-gaiheki-section .md\:kv-gaiheki-block { display: block; } .kv-gaiheki-section .md\:kv-gaiheki-hidden { display: none; } .kv-gaiheki-section .md\:kv-gaiheki-flex-row { flex-direction: row; } .kv-gaiheki-section .md\:kv-gaiheki-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kv-gaiheki-section .md\:kv-gaiheki-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kv-gaiheki-section .md\:kv-gaiheki-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kv-gaiheki-section .md\:kv-gaiheki-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kv-gaiheki-section .md\:kv-gaiheki-text-base { font-size: 16px; line-height: 24px; } .kv-gaiheki-section .md\:kv-gaiheki-text-lg { font-size: 18px; line-height: 28px; } .kv-gaiheki-section .md\:kv-gaiheki-text-xl { font-size: 20px; line-height: 28px; } .kv-gaiheki-section .md\:kv-gaiheki-text-2xl { font-size: 24px; line-height: 32px; } .kv-gaiheki-section .md\:kv-gaiheki-text-3xl { font-size: 28px; line-height: 36px; } .kv-gaiheki-section .md\:kv-gaiheki-text-4xl { font-size: 34px; line-height: 40px; } .kv-gaiheki-section .md\:kv-gaiheki-text-5xl { font-size: 44px; line-height: 48px; } .kv-gaiheki-section .md\:kv-gaiheki-py-12 { padding-top: 48px; padding-bottom: 48px; } .kv-gaiheki-section .md\:kv-gaiheki-py-14 { padding-top: 56px; padding-bottom: 56px; } .kv-gaiheki-section .md\:kv-gaiheki-divide-y-0 > * + * { border-top-width: 0; } } /* Responsive lg (1024px+) */ @media (min-width: 1024px) { .kv-gaiheki-section .lg\:kv-gaiheki-block { display: block; } .kv-gaiheki-section .lg\:kv-gaiheki-flex-row { flex-direction: row; } .kv-gaiheki-section .lg\:kv-gaiheki-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kv-gaiheki-section .lg\:kv-gaiheki-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ================================================================ */ /* Phase 2-B.3R5: スマホレスポンシブ強化(修正指示書 第3版) */ /* @media (max-width: 768px) で全セクションの SP 最適化 */ /* ================================================================ */ /* === 横スクロール禁止 === */ html, body { overflow-x: hidden; } /* === Hero: バッジ列 SP 調整 === */ @media (max-width: 768px) { .kv-gaiheki-hero .kv-gaiheki-tag { font-size: 11px !important; padding: 4px 10px; } /* Hero 全体: 縦余白圧縮 + Hero 内 padding 縮小 */ .kv-gaiheki-hero > div { padding-top: 24px !important; padding-bottom: 24px !important; } /* KPI ブロック強調 */ .kv-gaiheki-hero dl dt { font-size: 11px !important; } .kv-gaiheki-hero dl dd .kv-gaiheki-num { font-size: 22px !important; font-weight: 700 !important; } /* CONTACT カード: フル幅 + 上余白 */ .kv-gaiheki-hero aside { max-width: 100% !important; width: 100% !important; margin-top: 24px; padding: 20px 16px !important; } .kv-gaiheki-hero aside .kv-gaiheki-btn { width: 100%; } /* H1 + tagline サイズ調整 */ .kv-gaiheki-hero h1 { font-size: 24px !important; line-height: 1.3 !important; } .kv-gaiheki-hero p { font-size: 14px !important; } } /* === タブナビ: SP 横スクロール強化(既存実装の補強) === */ @media (max-width: 768px) { .kv-gaiheki-tabnav-inner, .kv-tab-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; white-space: nowrap; } .kv-gaiheki-tabnav-inner::-webkit-scrollbar, .kv-tab-nav::-webkit-scrollbar { display: none; } .kv-gaiheki-tab { flex-shrink: 0; padding: 12px 16px !important; font-size: 13px !important; min-height: 44px; } } /* === 強み: SP 1 列 + サイズ調整 === */ @media (max-width: 768px) { #kv-strength article { padding: 20px 16px !important; } #kv-strength h3 { font-size: 16px !important; line-height: 1.5 !important; margin-top: 8px !important; } #kv-strength p { font-size: 13px !important; line-height: 1.7 !important; } #kv-strength .kv-gaiheki-strength-num { font-size: 11px !important; letter-spacing: 0.5px !important; } #kv-strength .kv-gaiheki-tag { font-size: 11px !important; padding: 3px 8px; } } /* === FLOW: SP 縦線レイアウト === */ @media (max-width: 768px) { .kv-gaiheki-flow-list { display: flex !important; flex-direction: column !important; gap: 0 !important; position: relative; } .kv-gaiheki-flow-list .kv-gaiheki-flow-step { display: flex; gap: 12px; padding: 16px 0 !important; position: relative; background: transparent !important; border: none !important; border-radius: 0 !important; } .kv-gaiheki-flow-list .kv-gaiheki-flow-step.kv-gaiheki-flow-step--highlight { background: #EFF6FF !important; border: 2px solid #BFDBFE !important; border-radius: 12px !important; padding: 16px !important; } .kv-gaiheki-flow-list .kv-gaiheki-flow-step:not(:last-child)::before { content: ''; position: absolute; left: 19px; top: 56px; bottom: -8px; width: 2px; background: #BFDBFE; z-index: 0; } .kv-gaiheki-flow-list .kv-gaiheki-step-bullet { position: relative; z-index: 1; width: 38px !important; height: 38px !important; flex-shrink: 0; font-size: 14px !important; } .kv-gaiheki-flow-list .kv-gaiheki-flow-step__content { flex: 1; min-width: 0; } } /* === 取扱メーカー: SP 2 列均等配置 === */ @media (max-width: 768px) { #kv-mfr .kv-gaiheki-flex.kv-gaiheki-flex-wrap { gap: 8px !important; } #kv-mfr .kv-gaiheki-mfr { flex: 0 0 calc(50% - 4px); text-align: center; padding: 10px 8px !important; font-size: 12px !important; height: auto !important; min-height: 48px; box-sizing: border-box; white-space: normal !important; line-height: 1.3 !important; word-break: keep-all; } } /* === 料金: PLAN B 強化 === */ @media (max-width: 768px) { #kv-price .kv-gaiheki-grid { display: flex !important; flex-direction: column !important; gap: 16px !important; } #kv-price article { padding: 20px 16px !important; } /* popular プラン: 物理拡大 + 強い影 + ribbon 飛び出し */ #kv-price article.kv-gaiheki-bg-primary-50 { transform: scale(1.02); box-shadow: 0 4px 16px rgba(217, 119, 6, 0.20) !important; margin: 6px 0; } #kv-price article.kv-gaiheki-bg-primary-50 .kv-gaiheki-ribbon { top: -12px; right: 12px; border-radius: 6px; } /* 価格本体強調 */ #kv-price .kv-gaiheki-text-3xl { font-size: 28px !important; } #kv-price dd.kv-gaiheki-num.kv-gaiheki-text-base { font-size: 20px !important; } } /* === 口コミ: SP 1 カラム + 分布バー === */ @media (max-width: 768px) { .kv-gaiheki-reviews-layout { grid-template-columns: 1fr !important; gap: 16px !important; } #kv-review aside { padding: 20px !important; text-align: center; } #kv-review aside .kv-gaiheki-text-5xl { font-size: 36px !important; } /* 分布バー SP 最適化 */ #kv-review aside li { font-size: 12px !important; } #kv-review aside .kv-gaiheki-bar-track { height: 6px !important; border-radius: 3px; } /* レビューカード */ #kv-review article { padding: 16px !important; } #kv-review article h3 { font-size: 14px !important; font-weight: 600 !important; margin: 8px 0 !important; } #kv-review article p { font-size: 13px !important; line-height: 1.7 !important; } } /* === 他社比較: SP テーブル → カード形式 === */ @media (max-width: 768px) { #kv-cmp .kv-gaiheki-cmp, #kv-cmp .kv-gaiheki-overflow-x-auto { display: none !important; } .kv-gaiheki-cmp-cards { display: flex !important; flex-direction: column; gap: 16px; } .kv-gaiheki-cmp-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 16px; } .kv-gaiheki-cmp-card.kv-gaiheki-cmp-card--self { border: 2px solid #2563EB; background: #EFF6FF; } .kv-gaiheki-cmp-card__header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #E5E7EB; } .kv-gaiheki-cmp-card__tile { flex-shrink: 0; width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: Inter, sans-serif; font-size: 13px; } .kv-gaiheki-cmp-card__name { font-size: 15px; font-weight: 700; color: #1F2937; line-height: 1.4; } .kv-gaiheki-cmp-card__pr { font-size: 10px; color: #6B7280; display: block; margin-bottom: 2px; } .kv-gaiheki-cmp-card dl { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; font-size: 13px; margin: 0; } .kv-gaiheki-cmp-card dt { color: #6B7280; font-weight: normal; margin: 0; } .kv-gaiheki-cmp-card dd { margin: 0; color: #1F2937; } .kv-gaiheki-cmp-card dd.kv-gaiheki-cmp-dd--accent { color: #047857; font-weight: 700; } .kv-gaiheki-cmp-card dd.kv-gaiheki-cmp-dd--bold { font-weight: 700; } } @media (min-width: 769px) { .kv-gaiheki-cmp-cards { display: none !important; } } /* === 最下部 CTA: SP 2 ボタン縦並び === */ @media (max-width: 768px) { #kv-cta-final > div:last-child { padding: 32px 16px !important; } #kv-cta-final h2 { font-size: 22px !important; line-height: 1.4 !important; } #kv-cta-final .kv-gaiheki-flex.kv-gaiheki-items-center.kv-gaiheki-justify-center.kv-gaiheki-gap-3 { flex-direction: column !important; gap: 12px !important; margin-top: 24px !important; } #kv-cta-final .kv-gaiheki-btn { width: 100%; min-height: 52px !important; font-size: 15px !important; font-weight: 600 !important; } } /* === Floating CTA: SP 用最適化(既存実装の補強) === */ @media (max-width: 768px) { /* Floating CTA を SP で常時表示 + body 下部余白確保 */ body { padding-bottom: 72px; } .kv-gaiheki-floating { padding: 8px 12px !important; } } /* === ヘッダー SP 調整 === */ @media (max-width: 768px) { /* ヘッダー右上ボタンを SP では非表示(モバイルメニュー内に切替) */ #kv-gaiheki-cta-desktop { display: none !important; } } /* === タップ領域 44px 以上保証 === */ @media (max-width: 768px) { .kv-gaiheki-btn, .kv-gaiheki-tab, .kv-gaiheki-section a.kv-gaiheki-btn { min-height: 44px; } } /* ================================================================ */ /* Phase 2-B.3R6: 修正指示書 第4版 — 細部調整 */ /* ================================================================ */ /* === 1. 改行防止 + 見出しフォントサイズ調整 === */ .kv-gaiheki-hero h1, #kv-strength h2, #kv-target h2, #kv-cmp h2, #kv-review h2, #kv-price h2, #kv-mfr h2, #kv-flow h2, #kv-faq h2 { word-break: keep-all; overflow-wrap: break-word; line-break: strict; } .kv-gaiheki-hero h1 { /* 「ソルセル株式会社」を 1 語として扱う */ word-wrap: normal; } .kv-gaiheki-hero h1 .kv-gaiheki-nowrap, .kv-gaiheki-nowrap { white-space: nowrap; } @media (max-width: 768px) { .kv-gaiheki-hero h1 { font-size: 22px !important; line-height: 1.35 !important; } #kv-strength h2, #kv-target h2, #kv-cmp h2, #kv-review h2, #kv-price h2, #kv-mfr h2, #kv-flow h2, #kv-faq h2 { font-size: 18px !important; line-height: 1.45 !important; } } /* === 3. FIT CHECK セクション(target) SP 1 列縦並び === */ .kv-gaiheki-target-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .kv-gaiheki-target-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 20px; } .kv-gaiheki-target-card.kv-gaiheki-target-suitable { border-color: #A7F3D0; background: #F0FDF4; } .kv-gaiheki-target-card.kv-gaiheki-target-unsuitable { border-color: #BFDBFE; background: #EFF6FF; } .kv-gaiheki-target-icon { font-size: 24px; margin-bottom: 8px; line-height: 1; } .kv-gaiheki-target-headline { font-size: 16px; font-weight: 700; color: #1F2937; margin: 0 0 8px; line-height: 1.4; display: flex; align-items: center; gap: 6px; } .kv-gaiheki-target-body { font-size: 14px; color: #374151; line-height: 1.75; margin: 0; } @media (max-width: 768px) { .kv-gaiheki-target-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .kv-gaiheki-target-card { padding: 16px !important; } .kv-gaiheki-target-headline { font-size: 15px !important; } .kv-gaiheki-target-body { font-size: 13px !important; line-height: 1.7 !important; } } /* === 4. 取扱メーカー: grid 2 列均等(SP) === */ @media (max-width: 768px) { #kv-mfr .kv-gaiheki-flex.kv-gaiheki-flex-wrap { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; } #kv-mfr .kv-gaiheki-mfr { flex: none !important; min-height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 8px 12px !important; font-size: 12px !important; border: 1px solid #E5E7EB; border-radius: 6px; text-align: center; white-space: normal; line-height: 1.3; } } /* === 5. 料金プラン: 密度改善 + PLAN B 強化 === */ @media (max-width: 768px) { #kv-price article { padding: 16px !important; } #kv-price article .kv-gaiheki-text-3xl { font-size: 26px !important; } #kv-price article dd.kv-gaiheki-num.kv-gaiheki-text-base { font-size: 18px !important; } /* PLAN B: 薄黄色をはっきりと + オレンジ枠強化 */ #kv-price article.kv-gaiheki-bg-primary-50 { background: #EFF6FF !important; border: 2px solid #2563EB !important; box-shadow: 0 4px 12px rgba(217, 119, 6, 0.18) !important; } /* 「人気No.1」リボン: PLAN B 上飛び出し */ #kv-price article.kv-gaiheki-bg-primary-50 .kv-gaiheki-ribbon { top: -10px !important; right: 12px !important; border-radius: 20px !important; padding: 4px 12px !important; font-size: 11px !important; } } /* === 6. 評価分布バー: 視認性強化 === */ @media (max-width: 768px) { #kv-review aside ul { gap: 8px !important; } #kv-review aside li { display: grid !important; grid-template-columns: 28px 1fr 36px !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; } #kv-review aside .kv-gaiheki-bar-track { height: 10px !important; border-radius: 5px !important; background: #F5F5F5 !important; } #kv-review aside .kv-gaiheki-bar-fill { background: #3B82F6 !important; border-radius: 5px; transition: width 0.3s; } #kv-review aside li span:first-child { color: #3B82F6 !important; font-weight: 600; } #kv-review aside li span:last-child { font-weight: 600; color: #1F2937 !important; text-align: right; } } /* === 7. 他社比較カードヘッダー: 編集部評価を右上に大きく === */ @media (max-width: 768px) { /* カード header: 編集部評価を右上に大きく表示するエリア */ .kv-gaiheki-cmp-card__header { position: relative; padding-right: 64px; /* 評価スコア分を空ける */ } .kv-gaiheki-cmp-card__score { position: absolute; right: 0; top: 0; font-size: 22px; font-weight: 700; color: #2563EB; font-family: Inter, sans-serif; line-height: 1.1; } .kv-gaiheki-cmp-card__score span { font-size: 12px; color: #6B7280; font-weight: 500; } /* 比較項目 grid 整列 */ .kv-gaiheki-cmp-card dl { gap: 0 !important; } .kv-gaiheki-cmp-card dl > div, .kv-gaiheki-cmp-card dl { display: contents; } .kv-gaiheki-cmp-card dt, .kv-gaiheki-cmp-card dd { padding: 8px 0; border-bottom: 1px dotted #F0F0F0; font-size: 13px; } .kv-gaiheki-cmp-card dt:last-of-type, .kv-gaiheki-cmp-card dd:last-of-type { border-bottom: none; } } /* === 8. FAQ 開閉アイコン強化 === */ .kv-gaiheki-acc summary { position: relative; } .kv-gaiheki-acc summary svg.kv-gaiheki-acc-icon { stroke: #2563EB !important; stroke-width: 2.5 !important; flex-shrink: 0; } @media (max-width: 768px) { .kv-gaiheki-acc summary { padding: 14px 16px !important; min-height: 56px; } .kv-gaiheki-acc summary > span:first-child { font-size: 14px !important; line-height: 1.5 !important; flex: 1; } .kv-gaiheki-acc > div { padding: 0 16px 14px !important; font-size: 13px !important; line-height: 1.7 !important; } } /* === 9. 追従 CTA: 2:1 比率 + safe-area + 電話ボタン視認性 === */ @media (max-width: 768px) { .kv-gaiheki-floating { padding: 8px 12px !important; padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important; gap: 8px !important; } /* SP では Floating の名前 area 非表示、ボタン 2 個だけ */ .kv-gaiheki-floating .kv-gaiheki-flex-1.kv-gaiheki-hidden { display: none !important; } /* ボタン領域全体 */ .kv-gaiheki-floating > .kv-gaiheki-flex.kv-gaiheki-items-center { flex: 1 !important; gap: 8px !important; } /* メインボタン: 2/3 幅(視覚的比率) */ .kv-gaiheki-floating .kv-gaiheki-btn-primary { flex: 2 !important; min-height: 48px !important; font-size: 14px !important; font-weight: 600 !important; } /* 電話ボタン: 1/3 幅、ラベル「電話」明示 */ .kv-gaiheki-floating .kv-gaiheki-btn-secondary { flex: 1 !important; min-height: 48px !important; min-width: 80px !important; border-width: 2px !important; border-color: #2563EB !important; color: #2563EB !important; font-weight: 600 !important; } body { padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important; } } /* === 10. 関連業者: SP 縦 1 列 === */ @media (max-width: 768px) { /* 既存実装で kv-gaiheki-grid-cols-1 が SP 適用されているため追加 padding 調整のみ */ section .kv-gaiheki-grid.kv-gaiheki-grid-cols-1.sm\:kv-gaiheki-grid-cols-2.lg\:kv-gaiheki-grid-cols-3 { gap: 12px !important; } section .kv-gaiheki-grid.kv-gaiheki-grid-cols-1.sm\:kv-gaiheki-grid-cols-2.lg\:kv-gaiheki-grid-cols-3 > a { padding: 16px !important; } } /* === 2. ヘッダー SP 右上 CTA(短縮版) === */ @media (max-width: 768px) { #kv-gaiheki-cta-desktop, #kv-gaiheki-cta-mobile-header { display: inline-flex !important; min-height: 44px !important; padding: 8px 12px !important; font-size: 12px !important; font-weight: 700 !important; } /* PC 版 CTA は SP では非表示、SP 版 short CTA は表示 */ #kv-gaiheki-cta-desktop { display: none !important; } } @media (min-width: 769px) { #kv-gaiheki-cta-mobile-header { display: none !important; } } /* ================================================================ */ /* Phase 2-B.4: Frame 1 (TOP) 専用 component + utility 追加 */ /* design_assets_v2/Frame 1 - トップページ.html を 1:1 で再現 */ /* ================================================================ */ /* === Custom component classes (kv-* prefix, Frame 1 design 厳守) === */ /* Hero soft amber-on-cream backdrop */ .kv-hero-bg { background: radial-gradient(900px 420px at 85% -10%, rgba(96, 165, 250,0.35), transparent 60%), radial-gradient(700px 360px at 5% 110%, rgba(251,191,36,0.18), transparent 65%), linear-gradient(180deg, #EFF6FF 0%, #FFF7ED 60%, #F9FAFB 100%); } .kv-sun-deco { position: absolute; right: -60px; top: -60px; width: 280px; height: 280px; border-radius: 9999px; background: radial-gradient(circle at 30% 30%, rgba(96, 165, 250,.55), rgba(251,146,60,.15) 60%, transparent 75%); filter: blur(2px); pointer-events: none; } /* Audience tabs (pill, Hero 上) */ .kv-tab { padding: 10px 18px; font-size: 14px; font-weight: 700; border-radius: 9999px; color: #6B7280; background: transparent; border: 1px solid transparent; cursor: pointer; transition: all 180ms cubic-bezier(.4,0,.2,1); display: inline-flex; align-items: center; gap: 6px; line-height: 1; } .kv-tab[aria-selected="true"] { background: #fff; color: #1F2937; border-color: #BFDBFE; box-shadow: 0 1px 2px rgba(17,24,39,.05); } /* Search panel mode tabs (underline, area / station) */ .kv-mode { padding: 12px 16px; font-size: 14px; font-weight: 700; color: #6B7280; background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all 180ms cubic-bezier(.4,0,.2,1); white-space: nowrap; line-height: 1; } .kv-mode[aria-selected="true"] { color: #1F2937; border-bottom-color: #2563EB; } /* Prefecture chip(都道府県 list) */ .kv-region { background: #fff; border: 1px solid #E5E7EB; transition: all 180ms cubic-bezier(.4,0,.2,1); display: inline-block; } .kv-region:hover { background: #EFF6FF; border-color: #BFDBFE; color: #1E3A8A; } /* Horizontal scroll container */ .kv-hscroll { scrollbar-width: thin; } .kv-hscroll::-webkit-scrollbar { height: 6px; } .kv-hscroll::-webkit-scrollbar-thumb { background: #E5E7EB; border-radius: 3px; } /* Star glyph color */ .kv-stars { color: #2563EB; letter-spacing: 1px; } /* Number font feature (alias for kv-gaiheki-num) */ .kv-num { font-family: 'Inter', system-ui, sans-serif; font-feature-settings: "tnum" 1; } /* Small PR badge(Frame 1 デザイン:極小グレー) */ .kv-pr { display: inline-flex; align-items: center; padding: 2px 7px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .06em; background: #F3F4F6; color: #6B7280; border-radius: 4px; line-height: 1; } /* Generic card transition + hover */ .kv-card { transition: box-shadow 180ms cubic-bezier(.4,0,.2,1), border-color 180ms, transform 180ms; } .kv-card:hover { box-shadow: 0 4px 6px -1px rgba(17,24,39,.08), 0 2px 4px -2px rgba(17,24,39,.05); border-color: #D1D5DB; } /* FAQ アコーディオン(Frame 1, 既存 kv-gaiheki-acc と並行で kv-acc も用意) */ .kv-acc summary { list-style: none; cursor: pointer; } .kv-acc summary::-webkit-details-marker { display: none; } .kv-acc[open] .kv-acc-icon { transform: rotate(180deg); } .kv-acc-icon { transition: transform 180ms cubic-bezier(.4,0,.2,1); display: inline-block; flex-shrink: 0; } /* Tag (Frame 1 では .kv-tag を別途定義、既存 kv-gaiheki-tag と区別) */ .kv-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 500; white-space: nowrap; line-height: 1.4; } /* Button system (Frame 1, 既存 kv-gaiheki-btn と並行で kv-btn も用意) */ .kv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; border-radius: 8px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background 180ms, color 180ms, box-shadow 180ms, transform 120ms, border-color 180ms; } .kv-btn:active { transform: translateY(1px); } .kv-btn-sm { padding: 8px 14px; font-size: 13px; min-height: 36px; } .kv-btn-md { padding: 10px 18px; font-size: 14px; min-height: 44px; } .kv-btn-lg { padding: 14px 24px; font-size: 16px; min-height: 52px; } .kv-btn-xl { padding: 18px 28px; font-size: 18px; min-height: 60px; } /* primary は既存 .kv-btn-primary と重複するが上書きで Frame 1 仕様優先 */ .kv-btn-primary { background: #F97316; color: #fff; box-shadow: 0 2px 6px rgba(217,119,6,.20); border-color: transparent; } .kv-btn-primary:hover { background: #EA580C; box-shadow: 0 6px 14px rgba(180,83,9,.28); color: #fff; } .kv-btn-secondary { background: #fff; color: #1F2937; border-color: #D1D5DB; } .kv-btn-secondary:hover { background: #F9FAFB; border-color: #9CA3AF; color: #1F2937; } .kv-btn-ghost { background: transparent; color: #1E40AF; border-color: transparent; } .kv-btn-ghost:hover { background: #EFF6FF; color: #1E40AF; } /* Mobile menu (Frame 1, header) */ .kv-mobile-menu { display: none; } .kv-mobile-menu.open { display: block; } [hidden] { display: none !important; } /* === Tailwind arbitrary-value utility classes for Frame 1 === */ /* Aspect ratio (arbitrary values, CSP 制約で Tailwind 不可のため手動) */ .kv-gaiheki-aspect-\[4\/3\] { aspect-ratio: 4/3; width: 100%; overflow: hidden; } .kv-gaiheki-aspect-\[16\/9\] { aspect-ratio: 16/9; width: 100%; overflow: hidden; } /* Background size/position (画像カード用) */ .kv-gaiheki-bg-cover { background-size: cover; } .kv-gaiheki-bg-center { background-position: center; } /* Max width arbitrary */ .kv-gaiheki-max-w-\[1200px\] { max-width: 1200px; } .kv-gaiheki-max-w-\[820px\] { max-width: 820px; } .kv-gaiheki-max-w-\[760px\] { max-width: 760px; } .kv-gaiheki-max-w-3xl { max-width: 48rem; /* 768px */ } .kv-gaiheki-max-w-2xl { max-width: 42rem; /* 672px */ } /* Min height arbitrary */ .kv-gaiheki-min-h-\[44px\] { min-height: 44px; } .kv-gaiheki-min-h-\[48px\] { min-height: 48px; } .kv-gaiheki-min-h-\[52px\] { min-height: 52px; } .kv-gaiheki-min-h-\[56px\] { min-height: 56px; } .kv-gaiheki-min-h-\[60px\] { min-height: 60px; } /* Text size arbitrary */ .kv-gaiheki-text-\[10px\] { font-size: 10px; line-height: 14px; } .kv-gaiheki-text-\[11px\] { font-size: 11px; line-height: 16px; } .kv-gaiheki-text-\[13px\] { font-size: 13px; line-height: 18px; } .kv-gaiheki-text-\[40px\] { font-size: 40px; line-height: 1.2; } .kv-gaiheki-text-\[18px\] { font-size: 18px; line-height: 26px; } /* Leading arbitrary */ .kv-gaiheki-leading-\[1\.3\] { line-height: 1.3; } /* Background alpha (white/N) */ .kv-gaiheki-bg-white\/95 { background-color: rgba(255,255,255,.95); } .kv-gaiheki-bg-white\/97 { background-color: rgba(255,255,255,.97); } .kv-gaiheki-bg-white\/70 { background-color: rgba(255,255,255,.70); } .kv-gaiheki-bg-white\/45 { background-color: rgba(255,255,255,.45); } /* Background primary alpha */ .kv-gaiheki-bg-primary-500\/15 { background-color: rgba(37, 99, 235,.15); } /* Surface alpha */ .kv-gaiheki-bg-surface-page\/40 { background-color: rgba(249,250,251,.40); } /* Backdrop filter */ .kv-gaiheki-backdrop-blur { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Accent color (form controls) */ .kv-gaiheki-accent-primary-500 { accent-color: #2563EB; } /* Opacity */ .kv-gaiheki-opacity-90 { opacity: 0.9; } .kv-gaiheki-opacity-100 { opacity: 1; } /* Inset x */ .kv-gaiheki-inset-x-0 { left: 0; right: 0; } /* Grid 12-col system (補助金タイムライン用) */ .kv-gaiheki-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .kv-gaiheki-col-span-1 { grid-column: span 1 / span 1; } .kv-gaiheki-col-span-2 { grid-column: span 2 / span 2; } .kv-gaiheki-col-span-3 { grid-column: span 3 / span 3; } .kv-gaiheki-col-span-4 { grid-column: span 4 / span 4; } .kv-gaiheki-col-span-6 { grid-column: span 6 / span 6; } .kv-gaiheki-col-span-9 { grid-column: span 9 / span 9; } .kv-gaiheki-col-span-12 { grid-column: span 12 / span 12; } .kv-gaiheki-col-start-1 { grid-column-start: 1; } .kv-gaiheki-col-start-4 { grid-column-start: 4; } /* Gap x/y */ .kv-gaiheki-gap-x-2 { column-gap: 8px; } .kv-gaiheki-gap-x-4 { column-gap: 16px; } .kv-gaiheki-gap-x-6 { column-gap: 24px; } .kv-gaiheki-gap-x-8 { column-gap: 32px; } .kv-gaiheki-gap-y-1 { row-gap: 4px; } .kv-gaiheki-gap-y-2 { row-gap: 8px; } .kv-gaiheki-gap-y-4 { row-gap: 16px; } .kv-gaiheki-gap-y-6 { row-gap: 24px; } /* Width/Height: additions */ .kv-gaiheki-w-1 { width: 4px; } .kv-gaiheki-w-9 { width: 36px; } .kv-gaiheki-w-11 { width: 44px; } .kv-gaiheki-w-16 { width: 64px; } .kv-gaiheki-w-24 { width: 96px; } .kv-gaiheki-h-3 { height: 12px; } .kv-gaiheki-h-9 { height: 36px; } .kv-gaiheki-h-11 { height: 44px; } /* Padding additions */ .kv-gaiheki-pl-1 { padding-left: 4px; } .kv-gaiheki-pl-2 { padding-left: 8px; } .kv-gaiheki-pl-3 { padding-left: 12px; } .kv-gaiheki-pr-3 { padding-right: 12px; } .kv-gaiheki-px-3\.5 { padding-left: 14px; padding-right: 14px; } .kv-gaiheki-py-1\.5 { padding-top: 6px; padding-bottom: 6px; } .kv-gaiheki-py-2 { padding-top: 8px; padding-bottom: 8px; } .kv-gaiheki-py-2\.5 { padding-top: 10px; padding-bottom: 10px; } .kv-gaiheki-py-3\.5 { padding-top: 14px; padding-bottom: 14px; } .kv-gaiheki-px-4 { padding-left: 16px; padding-right: 16px; } .kv-gaiheki-pt-3 { padding-top: 12px; } .kv-gaiheki-pt-12 { padding-top: 48px; } .kv-gaiheki-pb-12 { padding-bottom: 48px; } .kv-gaiheki-pb-16 { padding-bottom: 64px; } /* Margin additions */ .kv-gaiheki-mt-2\.5 { margin-top: 10px; } .kv-gaiheki-mt-9 { margin-top: 36px; } .kv-gaiheki-mb-1 { margin-bottom: 4px; } .kv-gaiheki-mb-1\.5 { margin-bottom: 6px; } /* Whitespace */ .kv-gaiheki-whitespace-nowrap { white-space: nowrap; } /* Box shadow (Frame 1 design system, kv-card / kv-card-hover) */ .kv-gaiheki-shadow-kv-card { box-shadow: 0 1px 2px 0 rgba(17,24,39,0.05); } .kv-gaiheki-shadow-kv-card-hover { box-shadow: 0 4px 6px -1px rgba(17,24,39,0.08), 0 2px 4px -2px rgba(17,24,39,0.05); } /* Border color additions */ .kv-gaiheki-border-gray-300 { border-color: #D1D5DB; } /* Background color additions */ .kv-gaiheki-bg-gray-800 { background-color: #1F2937; } .kv-gaiheki-bg-gray-700 { background-color: #374151; } /* Hover utilities (gray hover for footer SNS) */ .hover\:kv-gaiheki-bg-gray-700:hover { background-color: #374151; } .hover\:kv-gaiheki-bg-surface-section:hover { background-color: #F3F4F6; } /* === Responsive additions === */ /* sm (640px+) extras */ @media (min-width: 640px) { .kv-gaiheki-section .sm\:kv-gaiheki-block { display: block; } .kv-gaiheki-section .sm\:kv-gaiheki-flex-shrink-0 { flex-shrink: 0; } .kv-gaiheki-section .sm\:kv-gaiheki-inline-flex { display: inline-flex; } .kv-gaiheki-section .sm\:kv-gaiheki-hidden { display: none; } } /* md (768px+) extras */ @media (min-width: 768px) { .kv-gaiheki-section .md\:kv-gaiheki-py-12 { padding-top: 48px; padding-bottom: 48px; } .kv-gaiheki-section .md\:kv-gaiheki-py-14 { padding-top: 56px; padding-bottom: 56px; } .kv-gaiheki-section .md\:kv-gaiheki-p-6 { padding: 24px; } .kv-gaiheki-section .md\:kv-gaiheki-px-6 { padding-left: 24px; padding-right: 24px; } .kv-gaiheki-section .md\:kv-gaiheki-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kv-gaiheki-section .md\:kv-gaiheki-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kv-gaiheki-section .md\:kv-gaiheki-text-\[40px\] { font-size: 40px; line-height: 1.2; } } /* lg (1024px+) extras */ @media (min-width: 1024px) { .kv-gaiheki-section .lg\:kv-gaiheki-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kv-gaiheki-section .lg\:kv-gaiheki-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* xl (1280px+) extras */ @media (min-width: 1280px) { .xl\:kv-gaiheki-inline { display: inline; } .xl\:kv-gaiheki-block { display: block; } } /* === Frame 1 Hero h1 強調(40px desktop) === */ .kv-gaiheki-hero-h1 { font-size: 28px; line-height: 1.3; font-weight: 700; color: #1F2937; letter-spacing: -0.01em; } @media (min-width: 768px) { .kv-gaiheki-hero-h1 { font-size: 40px; } } /* === Frame 1 SP optimizations === */ @media (max-width: 767px) { /* Hero タイトルとテキスト調整 */ .kv-hero-bg h1 { font-size: 26px !important; line-height: 1.3 !important; } .kv-hero-bg p { font-size: 14px !important; } /* 47都道府県 chip 縮小 */ .kv-region { padding: 6px 10px !important; font-size: 12px !important; } /* 路線カード密度 */ .kv-card .kv-gaiheki-text-sm { font-size: 13px !important; } } /* === Frame 1 Section anchors (smooth scroll target) === */ section[id]#area, section[id]#station, section[id]#column, section[id]#subsidy, section[id]#search { scroll-margin-top: 80px; } /* ================================================================ */ /* Phase 2-B.5: Frame 7 (補助金ガイド) 専用 utility + component */ /* ================================================================ */ /* === Red palette === */ .kv-gaiheki-bg-red-50 { background-color: #FEF2F2; } .kv-gaiheki-border-red-200 { border-color: #FECACA; } .kv-gaiheki-text-red-900 { color: #7F1D1D; } /* === Amber palette === */ .kv-gaiheki-bg-amber-50 { background-color: #EFF6FF; } .kv-gaiheki-border-amber-200 { border-color: #BFDBFE; } .kv-gaiheki-text-amber-900 { color: #172554; } .kv-gaiheki-text-amber-200 { color: #BFDBFE; } /* === Blue palette === */ .kv-gaiheki-bg-blue-50 { background-color: #EFF6FF; } .kv-gaiheki-text-blue-700 { color: #1D4ED8; } .kv-gaiheki-text-blue-900 { color: #1E3A8A; } /* === Gradients (Tailwind 風、CSS 変数アプローチ) === */ .kv-gaiheki-bg-gradient-to-r { background-image: linear-gradient(to right, var(--kv-grad-from, transparent), var(--kv-grad-to, transparent)); } .kv-gaiheki-bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--kv-grad-from, transparent), var(--kv-grad-to, transparent)); } .kv-gaiheki-from-primary-50 { --kv-grad-from: #EFF6FF; } .kv-gaiheki-from-amber-50 { --kv-grad-from: #EFF6FF; } .kv-gaiheki-to-white { --kv-grad-to: #ffffff; } .kv-gaiheki-to-primary-100 { --kv-grad-to: #DBEAFE; } /* === TOC links === */ .kv-toc-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; font-size: 14px; color: #1F2937; text-decoration: none; transition: all 180ms cubic-bezier(.4,0,.2,1); } .kv-toc-link:hover { background: #EFF6FF; border-color: #BFDBFE; color: #1E3A8A; } .kv-toc-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: #DBEAFE; color: #1E3A8A; border-radius: 999px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; flex-shrink: 0; } /* === Region tabs (補助金ガイドの地方ブロック切替) === */ .kv-region-tab { padding: 10px 16px; background: #fff; color: #6B7280; border: 1px solid #E5E7EB; border-radius: 999px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 180ms cubic-bezier(.4,0,.2,1); line-height: 1; white-space: nowrap; } .kv-region-tab:hover { background: #EFF6FF; color: #1E3A8A; border-color: #BFDBFE; } .kv-region-tab[aria-selected="true"] { background: #2563EB; color: #fff; border-color: #2563EB; box-shadow: 0 2px 6px rgba(37, 99, 235,.30); } /* === Prefecture tabs (地方内の都道府県切替) === */ .kv-pref-tab { padding: 6px 12px; background: transparent; color: #6B7280; border: 1px solid transparent; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 180ms cubic-bezier(.4,0,.2,1); line-height: 1.4; white-space: nowrap; } .kv-pref-tab:hover { background: #EFF6FF; color: #1E3A8A; } .kv-pref-tab[aria-selected="true"] { background: #DBEAFE; color: #1E3A8A; font-weight: 700; } /* === Tag variants === */ .kv-tag-cat { background: #DBEAFE; color: #1E3A8A; border: 1px solid #BFDBFE; } .kv-tag-info { background: #DBEAFE; color: #1E40AF; border: 1px solid #BFDBFE; } /* === Table (補助金詳細表) === */ .kv-tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .kv-tbl th, .kv-tbl td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #E5E7EB; vertical-align: top; } .kv-tbl thead th { background: #F9FAFB; font-weight: 700; color: #374151; font-size: 12px; } .kv-tbl tbody tr:last-child td { border-bottom: none; } /* === Step numbered badge === */ .kv-step-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #DBEAFE; color: #1E3A8A; border-radius: 999px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; flex-shrink: 0; } /* === Button on-nav variant === */ .kv-btn-onnav { background: #fff; color: #1E3A8A; border: 1px solid #BFDBFE; } .kv-btn-onnav:hover { background: #DBEAFE; color: #1E3A8A; } /* === Heading helper (h2 with consistent styling) === */ .kv-h2 { color: #1F2937; } /* === Arbitrary value utilities for Frame 7 === */ .kv-gaiheki-tracking-\[0\.18em\] { letter-spacing: 0.18em; } .kv-gaiheki-min-w-\[280px\] { min-width: 280px; } .kv-gaiheki-min-w-\[900px\] { min-width: 900px; } .kv-gaiheki-h-4 { height: 16px; } .kv-gaiheki-select-none { user-select: none; } .kv-gaiheki-overflow-x-auto { overflow-x: auto; } .kv-gaiheki-overflow-y-auto { overflow-y: auto; } .kv-gaiheki-mt-20 { margin-top: 80px; } /* === Hover variants === */ .hover\:kv-gaiheki-bg-amber-50:hover { background-color: #EFF6FF; } .hover\:kv-gaiheki-border-amber-200:hover { border-color: #BFDBFE; } /* === Border red === */ .kv-gaiheki-border-red-200 { border-color: #FECACA; } /* === Frame 7 SP optimizations === */ @media (max-width: 767px) { /* TOC links: 1 列 + 余白縮小 */ .kv-toc-link { padding: 10px 12px; font-size: 13px; } /* Region tabs: 横スクロール */ [role="tablist"][aria-label="地方ブロック"] { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } [role="tablist"][aria-label="地方ブロック"]::-webkit-scrollbar { display: none; } .kv-region-tab { flex-shrink: 0; padding: 8px 12px; font-size: 13px; } /* Pref tabs: コンパクト */ .kv-pref-tab { padding: 5px 10px; font-size: 12px; } /* Step number: スマホでも大きく */ .kv-step-num { width: 32px; height: 32px; font-size: 13px; } /* テーブル: 横スクロール */ .kv-tbl { font-size: 12px; } .kv-tbl th, .kv-tbl td { padding: 8px 10px; } } /* === Frame 7 section anchors === */ section[id^="sec-"] { scroll-margin-top: 80px; } /* ================================================================ */ /* Phase 2-B.6: Frame 6 (コラム一覧) 専用 utility + component */ /* ================================================================ */ /* === Category chip(コラムフィルター) === */ .kv-chip { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; background: #fff; border: 1px solid #E5E7EB; border-radius: 999px; font-size: 13px; color: #374151; text-decoration: none; white-space: nowrap; transition: all 180ms cubic-bezier(.4,0,.2,1); line-height: 1; } .kv-chip:hover { background: #EFF6FF; border-color: #BFDBFE; color: #1E3A8A; } .kv-chip.active, .kv-chip[aria-current="page"] { background: #2563EB; color: #fff; border-color: #2563EB; box-shadow: 0 1px 3px rgba(37, 99, 235,.30); } .kv-chip.active span, .kv-chip[aria-current="page"] span { color: rgba(255,255,255,.85); } /* === Tag variants (カテゴリ別カラー) === */ .kv-tag-mfr { background: #F3E8FF; color: #5B21B6; border: 1px solid #DDD6FE; } .kv-tag-cost { background: #FEE7D9; color: #9A3412; border: 1px solid #FDBA74; } .kv-tag-fail { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; } .kv-tag-battery { background: #DCFCE7; color: #166534; border: 1px solid #86EFAC; } .kv-tag-biz { background: #DBEAFE; color: #1E40AF; border: 1px solid #BFDBFE; } .kv-tag-basic { background: #ECFEFF; color: #155E75; border: 1px solid #A5F3FC; } /* === Image placeholder (eyecatch) gradient backgrounds === */ .kv-eye-1 { background: linear-gradient(135deg, #DBEAFE 0%, #FED7AA 100%); } .kv-eye-2 { background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%); } .kv-eye-3 { background: linear-gradient(135deg, #FED7AA 0%, #FDBA74 100%); } .kv-eye-4 { background: linear-gradient(135deg, #DCFCE7 0%, #86EFAC 100%); } .kv-eye-5 { background: linear-gradient(135deg, #FEE2E2 0%, #FCA5A5 100%); } .kv-eye-6 { background: linear-gradient(135deg, #F3E8FF 0%, #DDD6FE 100%); } .kv-eye-7 { background: linear-gradient(135deg, #ECFEFF 0%, #A5F3FC 100%); } .kv-eye-8 { background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%); } .kv-thumb { position: relative; width: 100%; overflow: hidden; } /* === Avatar bubble (監修者バッジ) === */ .kv-gaiheki-bg-amber-200 { background-color: #BFDBFE; } .kv-gaiheki-bg-purple-200 { background-color: #DDD6FE; } .kv-gaiheki-bg-orange-200 { background-color: #FED7AA; } .kv-gaiheki-bg-red-200 { background-color: #FECACA; } .kv-gaiheki-bg-green-200 { background-color: #BBF7D0; } .kv-gaiheki-bg-blue-200 { background-color: #BFDBFE; } .kv-gaiheki-text-amber-800 { color: #1E3A8A; } .kv-gaiheki-text-purple-800 { color: #5B21B6; } .kv-gaiheki-text-orange-800 { color: #9A3412; } .kv-gaiheki-text-red-800 { color: #991B1B; } .kv-gaiheki-text-green-800 { color: #166534; } .kv-gaiheki-text-blue-800 { color: #1E40AF; } /* === Line clamp (text truncation) === */ .kv-gaiheki-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kv-gaiheki-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* === Sticky offset for category filter (top-16 = 64px header) === */ .kv-gaiheki-top-16 { top: 64px; } .kv-gaiheki-z-20 { z-index: 20; } /* === w-5 h-5 (avatar size) === */ .kv-gaiheki-w-5 { width: 20px; } .kv-gaiheki-h-5 { height: 20px; } /* === lg layout: 1fr + sidebar 300px === */ .lg\:kv-gaiheki-grid-cols-\[1fr_300px\] { grid-template-columns: 1fr; } @media (min-width: 1024px) { .kv-gaiheki-section .lg\:kv-gaiheki-grid-cols-\[1fr_300px\] { grid-template-columns: 1fr 300px; } } /* === Pagination === */ .kv-page-num { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; background: #fff; border: 1px solid #E5E7EB; border-radius: 6px; font-size: 14px; color: #374151; text-decoration: none; transition: all 180ms; } .kv-page-num:hover { background: #EFF6FF; border-color: #BFDBFE; color: #1E3A8A; } .kv-page-num.active { background: #2563EB; color: #fff; border-color: #2563EB; } .kv-page-num[aria-disabled="true"] { opacity: 0.4; pointer-events: none; } /* === Sidebar sticky === */ .kv-sidebar-sticky { position: sticky; top: 96px; } /* === Frame 6 SP optimizations === */ @media (max-width: 1023px) { .kv-sidebar-sticky { position: static; top: auto; } } @media (max-width: 767px) { .kv-chip { padding: 6px 12px; font-size: 12px; } } /* ================================================================ */ /* Phase 2-B.7: Frame 6 single (個別記事) 専用 styles */ /* ================================================================ */ /* === Article prose styling (the_content() の出力に適用) === */ .prose-kv { color: #1F2937; font-size: 16px; line-height: 1.85; } .prose-kv > * + * { margin-top: 1.25em; } .prose-kv h2 { font-size: 24px; line-height: 1.4; font-weight: 700; color: #1F2937; margin: 2.5rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid #BFDBFE; scroll-margin-top: 80px; } .prose-kv h3 { font-size: 19px; line-height: 1.5; font-weight: 700; color: #1F2937; margin: 2rem 0 0.75rem; padding-left: 12px; border-left: 4px solid #2563EB; scroll-margin-top: 80px; } .prose-kv h4 { font-size: 17px; font-weight: 700; color: #1F2937; margin: 1.5rem 0 0.5rem; } .prose-kv p { margin: 1rem 0; line-height: 1.85; } .prose-kv strong { font-weight: 700; color: #1F2937; } .prose-kv a { color: #1E40AF; text-decoration: underline; text-underline-offset: 2px; } .prose-kv a:hover { color: #1E3A8A; } .prose-kv ul, .prose-kv ol { margin: 1rem 0 1.25rem; padding-left: 1.5rem; } .prose-kv ul > li { position: relative; padding-left: 0.6rem; margin: 0.55rem 0; line-height: 1.85; list-style: none; } .prose-kv ul > li::before { content: ''; position: absolute; left: -0.85rem; top: 0.7rem; width: 6px; height: 6px; border-radius: 9999px; background: #2563EB; } .prose-kv ol { counter-reset: olc; list-style: none; } .prose-kv ol > li { position: relative; padding-left: 0.6rem; margin: 0.55rem 0; line-height: 1.85; counter-increment: olc; } .prose-kv ol > li::before { content: counter(olc); position: absolute; left: -1.4rem; top: 0.15rem; width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: #EFF6FF; color: #1E40AF; font-family: Inter, sans-serif; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .prose-kv blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; background: #EFF6FF; border-left: 4px solid #93C5FD; border-radius: 0 8px 8px 0; color: #172554; font-size: 15px; line-height: 1.85; } .prose-kv blockquote p:last-child { margin: 0; } .prose-kv table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 14px; } .prose-kv th { background: #F9FAFB; color: #374151; font-weight: 700; text-align: left; padding: 12px 14px; border: 1px solid #E5E7EB; } .prose-kv td { padding: 12px 14px; border: 1px solid #E5E7EB; vertical-align: top; } .prose-kv figure { margin: 1.75rem 0; } .prose-kv figcaption { margin-top: 0.5rem; font-size: 12px; color: #6B7280; text-align: center; } .prose-kv img { max-width: 100%; height: auto; border-radius: 8px; } /* === Callout boxes (記事内ハイライト) === */ .kv-callout { margin: 1.5rem 0; padding: 1.1rem 1.25rem; background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 12px; } .kv-callout p { margin: 0; } .kv-callout-warn { background: #FEF2F2; border-color: #FCA5A5; color: #7F1D1D; } .kv-callout-info { background: #EFF6FF; border-color: #BFDBFE; color: #1E40AF; } /* === Sticky TOC sidebar(single article) === */ .kv-toc-list a { display: block; padding: 6px 8px 6px 12px; border-left: 2px solid #E5E7EB; font-size: 13px; color: #6B7280; line-height: 1.5; text-decoration: none; transition: all 150ms; } .kv-toc-list a:hover { color: #1E40AF; border-left-color: #60A5FA; background: #EFF6FF; } .kv-toc-list a.active { color: #1E3A8A; border-left-color: #1D4ED8; background: #EFF6FF; font-weight: 700; } .kv-toc-list a.lvl-3 { padding-left: 24px; font-size: 12px; } /* === Additional utility for Frame 6 single === */ .kv-gaiheki-w-10 { width: 40px; } .kv-gaiheki-h-10 { height: 40px; } .kv-gaiheki-w-20 { width: 80px; } .kv-gaiheki-h-20 { height: 80px; } .kv-gaiheki-w-9 { width: 36px; } .kv-gaiheki-h-9 { height: 36px; } .kv-gaiheki-bg-amber-100 { background-color: #DBEAFE; } .kv-gaiheki-bg-ink { background-color: #1F2937; } .kv-gaiheki-bg-blue-600 { background-color: #2563EB; } .kv-gaiheki-bg-green-500 { background-color: #22C55E; } .kv-gaiheki-bg-black { background-color: #000000; } .hover\:kv-gaiheki-bg-black:hover { background-color: #000000; } .hover\:kv-gaiheki-bg-blue-700:hover { background-color: #1D4ED8; } .hover\:kv-gaiheki-bg-green-600:hover { background-color: #16A34A; } /* arbitrary col layout (single article: 840px + 1fr) */ .lg\:kv-gaiheki-grid-cols-\[840px_1fr\] { grid-template-columns: 1fr; } @media (min-width: 1024px) { .kv-gaiheki-section .lg\:kv-gaiheki-grid-cols-\[840px_1fr\] { grid-template-columns: 840px 1fr; } } .kv-gaiheki-max-w-\[840px\] { max-width: 840px; } .lg\:kv-gaiheki-grid-cols-\[1fr_300px\] { grid-template-columns: 1fr; } /* SP: prose 調整 */ @media (max-width: 767px) { .prose-kv { font-size: 15px; } .prose-kv h2 { font-size: 21px; } .prose-kv h3 { font-size: 17px; } .prose-kv table { font-size: 13px; } .prose-kv th, .prose-kv td { padding: 10px 8px; } } /* ================================================================ */ /* Phase 2-B.8: Frame 3-A 全国エリア一覧 専用 styles */ /* ================================================================ */ /* Region jump pill */ .kv-region-pill { display: inline-flex; align-items: center; padding: 8px 14px; background: #fff; border: 1px solid #E5E7EB; border-radius: 999px; font-size: 13px; font-weight: 700; color: #374151; text-decoration: none; transition: all 180ms cubic-bezier(.4,0,.2,1); white-space: nowrap; } .kv-region-pill:hover { background: #EFF6FF; border-color: #BFDBFE; color: #1E3A8A; } /* Jump chip(都道府県 47) */ .kv-jump-chip { display: inline-flex; align-items: center; padding: 5px 10px; background: #fff; border: 1px solid #E5E7EB; border-radius: 6px; font-size: 12px; color: #374151; text-decoration: none; transition: all 180ms cubic-bezier(.4,0,.2,1); white-space: nowrap; } .kv-jump-chip:hover { background: #EFF6FF; border-color: #BFDBFE; color: #1E3A8A; } /* Section anchor scroll-margin (header 64px + 余裕) */ .kv-anchor { scroll-margin-top: 96px; } /* sr-only */ .kv-gaiheki-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Border 2 + primary-200 */ .kv-gaiheki-border-b-2 { border-bottom-width: 2px; border-bottom-style: solid; } /* Items baseline */ .kv-gaiheki-items-baseline { align-items: baseline; } /* arbitrary grid auto+1fr */ .md\:kv-gaiheki-grid-cols-\[auto_1fr\] { grid-template-columns: 1fr; } @media (min-width: 768px) { .kv-gaiheki-section .md\:kv-gaiheki-grid-cols-\[auto_1fr\] { grid-template-columns: auto 1fr; } } /* SVG map placeholder styling */ .kv-map-svg { width: 100%; max-width: 360px; height: auto; display: block; } .kv-map-svg .region { fill: #EFF6FF; stroke: #BFDBFE; stroke-width: 1.5; transition: fill 180ms; cursor: pointer; } .kv-map-svg a:hover .region, .kv-map-svg .region:hover { fill: #DBEAFE; } .kv-map-svg .label { font-size: 12px; font-family: 'Inter', sans-serif; fill: #1E3A8A; font-weight: 700; pointer-events: none; } /* ================================================================ */ /* Phase 2-B.9: Frame 5-A/B 路線一覧/路線別 専用 styles */ /* ================================================================ */ /* Operator pill (JR/メトロ等の運営会社ラベル) */ .kv-op-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.04em; } /* JR badge(四角、JY/JC 等) */ .kv-jr-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 4px; border-radius: 2px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; line-height: 1; } /* 東京メトロ等 路線記号(円形) */ .kv-metro-ring { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: #fff; border: 2px solid; border-radius: 9999px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; line-height: 1; } /* Line card 内のリンク色変更 */ .kv-line:hover { box-shadow: 0 4px 10px rgba(17,24,39,.08); } /* w-2 = 8px (路線色バー用) */ .kv-gaiheki-w-2 { width: 8px; } .kv-gaiheki-h-6 { height: 24px; } .kv-gaiheki-h-2 { height: 8px; } /* lg:grid-cols-6 */ @media (min-width: 1024px) { .kv-gaiheki-section .lg\:kv-gaiheki-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* ================================================================ */ /* Phase 2-B.10: Frame 2 法人向けトップ + Frame 8 404 専用 styles */ /* ================================================================ */ /* BtoB navy hero */ .kv-hero-biz { background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #1E3A5F 100%); color: #fff; } .kv-hero-grid { background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 32px 32px; } .kv-gaiheki-text-primary-300 { color: #93C5FD; } /* 404 (Frame 8) */ .kv-404-hero { background: linear-gradient(180deg, #EFF6FF 0%, #F9FAFB 100%); } .kv-404-number { font-family: 'Inter', sans-serif; font-size: clamp(80px, 18vw, 180px); font-weight: 700; color: #2563EB; line-height: 1; letter-spacing: -0.04em; } .kv-404-glyph { color: #93C5FD; opacity: 0.6; } /* ================================================================ */ /* Phase 2-B.14: SP 横スクロール示唆 + コラム個別 + ナビゲーション微調整 */ /* ================================================================ */ /* TOC アンカージャンプ: sticky header 高さ(64px)+ 余白 を確保 */ [id^="sec-"], [id^="kv-"], .kv-gaiheki-anchor { scroll-margin-top: 80px; } html { scroll-behavior: smooth; } /* SP 横スクロール示唆: 端に gradient overlay で「スクロールできる」ヒント */ @media (max-width: 767px) { .kv-gaiheki-overflow-x-auto { position: relative; background: linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) 0 50% / 24px 100% no-repeat local, linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 50% / 24px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.12), rgba(0,0,0,0)) 0 50% / 10px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.12), rgba(0,0,0,0)) 100% 50% / 10px 100% no-repeat scroll; } /* 横スクロール chip 列の最後にフェードヒントを add */ .kv-gaiheki-overflow-x-auto::after { content: "→"; position: sticky; right: 4px; bottom: 4px; font-size: 11px; color: rgba(0,0,0,0.4); pointer-events: none; } } /* ================================================================ */ /* Phase 2-B.14 second pass: Frame 6-B 細部対応 */ /* ================================================================ */ /* sticky sidebar + 2-col grid(PC 専用) */ .kv-sidebar-sticky { position: sticky; top: 80px; } @media (min-width: 1024px) { /* lg:kv-gaiheki-grid-cols-[840px_1fr] arbitrary-value 対応 */ .kv-gaiheki-section .lg\:kv-gaiheki-grid-cols-\[840px_1fr\] { grid-template-columns: 840px 1fr !important; } } /* 余白 utilities(mt-12 / pt-8) */ .kv-gaiheki-mt-12 { margin-top: 3rem; } .kv-gaiheki-pt-8 { padding-top: 2rem; } /* 本文中 callout(.kv-callout / .kv-callout-warn / .kv-callout-info) */ .kv-callout { margin: 1.5rem 0; padding: 1.1rem 1.25rem; background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 12px; } .kv-callout p { margin: 0; line-height: 1.75; } .kv-callout-warn { background: #FEF2F2; border-color: #FCA5A5; } .kv-callout-info { background: #EFF6FF; border-color: #BFDBFE; } /* 関連記事ミニカードの hover */ .kv-card { transition: box-shadow 180ms, border-color 180ms, transform 180ms; } .kv-card:hover { box-shadow: 0 4px 6px -1px rgba(17,24,39,.08), 0 2px 4px -2px rgba(17,24,39,.05); border-color: #D1D5DB; } /* ================================================================ */ /* Phase 2-B.14: 本文中の .kv-gaiheki-not-prose 内部は prose-kv の影響を打消し */ /* ================================================================ */ .prose-kv .kv-gaiheki-not-prose h1, .prose-kv .kv-gaiheki-not-prose h2, .prose-kv .kv-gaiheki-not-prose h3, .prose-kv .kv-gaiheki-not-prose h4, .prose-kv .kv-gaiheki-not-prose h5, .prose-kv .kv-gaiheki-not-prose h6 { margin: 0; padding: 0; border: none; background: none; line-height: 1.4; font-size: inherit; color: inherit; } .prose-kv .kv-gaiheki-not-prose p { margin: 0; line-height: 1.5; } .prose-kv .kv-gaiheki-not-prose ul, .prose-kv .kv-gaiheki-not-prose ol { margin: 0; padding: 0; list-style: none; counter-reset: none; } .prose-kv .kv-gaiheki-not-prose ul > li, .prose-kv .kv-gaiheki-not-prose ol > li { padding: 0; margin: 0; position: static; display: inline-flex; line-height: inherit; } .prose-kv .kv-gaiheki-not-prose ul > li::before, .prose-kv .kv-gaiheki-not-prose ol > li::before { display: none; content: none; } .prose-kv .kv-gaiheki-not-prose strong { background: none; padding: 0; } .prose-kv .kv-gaiheki-not-prose a { color: inherit; text-decoration: none; } .prose-kv .kv-gaiheki-not-prose .kv-btn-primary { color: #fff; background: #F97316; } .prose-kv .kv-gaiheki-not-prose .kv-btn-secondary { color: #1F2937; background: #fff; border: 1px solid #D1D5DB; } /* ================================================================ */ /* Phase 2-B.14: position:sticky を効かせるため、親階層の overflow を解除 */ /* SWELL のテーマ層が overflow:hidden を設定しているため sticky が無効化される問題に対処 */ /* ================================================================ */ @media (min-width: 1024px) { html, body, #page, #content, #main, main, .l-content, .l-mainContent, .l-mainContent__inner, article.post-562 { overflow: visible !important; } /* sticky 要素の祖先で transform/filter/perspective が設定されていると containing block が変わって sticky 無効になるので明示的に解除 */ .kv-gaiheki-bg-surface-page { transform: none !important; filter: none !important; perspective: none !important; overflow: visible !important; } .kv-sidebar-sticky { position: sticky !important; top: 80px !important; } } /* ================================================================ */ /* Phase 2-B.14: 業者カード未定義 utility を追加 */ /* ================================================================ */ /* gap 1.5(0.375rem)— タグ間の小さい隙間 */ .kv-gaiheki-gap-1\.5 { gap: 0.375rem; } /* md: の横並び切替(本文中業者カード PC レイアウト)*/ @media (min-width: 768px) { .kv-gaiheki-section .md\:kv-gaiheki-flex-row { flex-direction: row; } .kv-gaiheki-section .md\:kv-gaiheki-items-center { align-items: center; } .kv-gaiheki-section .md\:kv-gaiheki-items-start { align-items: flex-start; } .kv-gaiheki-section .md\:kv-gaiheki-w-auto { width: auto; } .kv-gaiheki-section .md\:kv-gaiheki-p-6 { padding: 1.5rem; } } /* タグの色違い (Frame 6-B 全種) */ .kv-tag-stor { background: #D1FAE5; color: #047857; } .kv-tag-fail { background: #FEE2E2; color: #B91C1C; } .kv-tag-corp { background: #DBEAFE; color: #1E40AF; } .kv-tag-mfr { background: #EDE9FE; color: #6D28D9; } .kv-tag-cost { background: #FFEDD5; color: #9A3412; } .kv-tag-intro { background: #E0F2FE; color: #075985; } /* Phase 2-B.14: px-6 / py-6 / mx-6 等が未定義だったため追加(都道府県別 panel の左右余白 0 解消) */ .kv-gaiheki-px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .kv-gaiheki-py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .kv-gaiheki-pt-6 { padding-top: 1.5rem; } .kv-gaiheki-pb-6 { padding-bottom: 1.5rem; } .kv-gaiheki-pl-6 { padding-left: 1.5rem; } .kv-gaiheki-pr-6 { padding-right: 1.5rem; } .kv-gaiheki-mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; } .kv-gaiheki-my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; } .kv-gaiheki-mt-6 { margin-top: 1.5rem; } .kv-gaiheki-mb-6 { margin-bottom: 1.5rem; } .kv-gaiheki-ml-6 { margin-left: 1.5rem; } .kv-gaiheki-mr-6 { margin-right: 1.5rem; } /* Phase 2-B.14: TOP おすすめ事業者 5 選を Frame 1 RANKING 準拠の 4 列比率に (CSS var --md-cols で article ごとに調整可能、PC で 132px / 96px / 1fr / 180px に) */ @media (min-width: 768px) { /* md:kv-gaiheki-grid 未定義だったため追加(これが無いと PC でも縦並びのままになる) */ .kv-gaiheki-section .md\:kv-gaiheki-grid { display: grid !important; } .kv-gaiheki-section .md\:kv-gaiheki-flex { display: flex !important; } .kv-gaiheki-section .md\:kv-gaiheki-block { display: block !important; } .kv-gaiheki-section .md\:kv-gaiheki-inline-flex { display: inline-flex !important; } .kv-gaiheki-section .md\:kv-gaiheki-gap-5 { gap: 1.25rem !important; } .kv-gaiheki-section .md\:kv-gaiheki-gap-4 { gap: 1rem !important; } .kv-gaiheki-section .md\:kv-gaiheki-gap-6 { gap: 1.5rem !important; } .kv-gaiheki-section .md\:kv-gaiheki-w-auto { width: auto !important; } .kv-gaiheki-section .md\:kv-gaiheki-w-\[180px\] { width: 180px !important; } .kv-gaiheki-section .md\:kv-gaiheki-text-lg { font-size: 1.125rem; line-height: 1.75rem; } .kv-gaiheki-md-cols-recommend { grid-template-columns: var(--md-cols, 44px 96px 1fr 180px) !important; } } /* ================================================================ */ /* Phase 2-B.14: Frame 4 業者詳細 SP 準拠のため未定義 utility / component を一括追加 */ /* ================================================================ */ /* arbitrary-value max-width / min-height */ .kv-gaiheki-max-w-\[1200px\] { max-width: 1200px; } .kv-gaiheki-max-w-\[820px\] { max-width: 820px; } .kv-gaiheki-min-h-\[56px\] { min-height: 56px; } .kv-gaiheki-text-\[10px\] { font-size: 10px; } .kv-gaiheki-text-\[11px\] { font-size: 11px; } .kv-gaiheki-text-\[18px\] { font-size: 18px; } .kv-gaiheki-pb-\[18px\] { padding-bottom: 18px; } .kv-gaiheki-w-32 { width: 8rem; } /* 0.5 系 spacing */ .kv-gaiheki-gap-y-3 { row-gap: 0.75rem; } .kv-gaiheki-h-1\.5 { height: 0.375rem; } .kv-gaiheki-w-1\.5 { width: 0.375rem; } .kv-gaiheki-mb-0\.5 { margin-bottom: 0.125rem; } .kv-gaiheki-ml-0\.5 { margin-left: 0.125rem; } .kv-gaiheki-mt-0\.5 { margin-top: 0.125rem; } .kv-gaiheki-mt-1\.5 { margin-top: 0.375rem; } .kv-gaiheki-mx-0\.5 { margin-left: 0.125rem; margin-right: 0.125rem; } .kv-gaiheki-py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; } .kv-gaiheki-ml-auto { margin-left: auto; } /* 透明度付き bg/text/border */ .kv-gaiheki-bg-primary-500\/15 { background-color: rgba(37, 99, 235,.15); } .kv-gaiheki-bg-transparent { background-color: transparent; } .kv-gaiheki-bg-white\/70 { background-color: rgba(255,255,255,.7); } .kv-gaiheki-bg-white\/95 { background-color: rgba(255,255,255,.95); } .kv-gaiheki-border-primary-500 { border-color: #2563EB; } .kv-gaiheki-border-white\/40 { border-color: rgba(255,255,255,.4); } .kv-gaiheki-text-white\/70 { color: rgba(255,255,255,.7); } .kv-gaiheki-text-white\/90 { color: rgba(255,255,255,.9); } .hover\:kv-gaiheki-bg-white\/10:hover { background-color: rgba(255,255,255,.1); } /* divide(子要素間の border) */ .kv-gaiheki-divide-y > * + * { border-top: 1px solid #E5E7EB; } .kv-gaiheki-divide-surface-border > * + * { border-color: #E5E7EB; } /* レスポンシブ追加 */ @media (min-width: 768px) { .kv-gaiheki-section .md\:kv-gaiheki-border-b-0 { border-bottom: 0 !important; } .kv-gaiheki-section .md\:kv-gaiheki-border-r { border-right: 1px solid #E5E7EB !important; } .kv-gaiheki-section .md\:kv-gaiheki-px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .kv-gaiheki-section .md\:kv-gaiheki-text-\[34px\] { font-size: 34px !important; line-height: 1.2 !important; } .kv-gaiheki-section .md\:kv-gaiheki-w-40 { width: 10rem !important; } } @media (min-width: 1024px) { .kv-gaiheki-section .lg\:kv-gaiheki-grid-cols-\[320px_1fr\] { grid-template-columns: 320px 1fr !important; } .kv-gaiheki-section .lg\:kv-gaiheki-w-\[340px\] { width: 340px !important; } } /* タグ色(Frame 4 で使用するパターン) */ .kv-tag-pr { background: #F3F4F6; color: #6B7280; font-family: Inter, system-ui, sans-serif; letter-spacing: .05em; } .kv-tag-yellow { background: #DBEAFE; color: #1E3A8A; } .kv-tag-orange { background: #FFEDD5; color: #9A3412; } .kv-tag-green { background: #D1FAE5; color: #065F46; } .kv-tag-blue { background: #DBEAFE; color: #1E40AF; } .kv-tag-gray { background: #F3F4F6; color: #374151; } /* component: 星評価 */ .kv-star { color: #F59E0B; font-size: 13px; letter-spacing: 1px; } .kv-star-empty { color: #E5E7EB; } /* component: ロゴ tile */ .kv-logo-tile { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 12px; background: #fff; border: 2px solid #BFDBFE; } .kv-logo-mark { font-family: Inter, system-ui, sans-serif; font-weight: 700; color: #1E40AF; font-size: 24px; letter-spacing: -.02em; } /* component: hero */ .kv-hero { background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 50%, #BFDBFE 100%); } /* component: tab nav */ .kv-tabnav { position: sticky; top: 64px; z-index: 20; background: rgba(255,255,255,.97); border-bottom: 1px solid #E5E7EB; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .kv-tabnav-inner { display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .kv-tabnav-inner::-webkit-scrollbar { display: none; } .kv-tab { flex-shrink: 0; padding: 14px 14px 12px; font-size: 13px; font-weight: 600; color: #6B7280; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; transition: all .15s; } .kv-tab:hover { color: #1E40AF; } .kv-tab-active { color: #1E40AF; border-bottom-color: #2563EB; } /* component: bar(評価などの横棒) */ .kv-bar-track { background: #F3F4F6; border-radius: 9999px; overflow: hidden; } .kv-bar-fill { height: 100%; background: linear-gradient(90deg, #2563EB, #1D4ED8); border-radius: 9999px; } /* component: 比較表(cmp) */ .kv-cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; } .kv-cmp th, .kv-cmp td { padding: 10px 12px; border-bottom: 1px solid #E5E7EB; vertical-align: top; text-align: left; } .kv-cmp-row-label { background: #F9FAFB; font-weight: 700; color: #374151; } .kv-cmp-self { background: #EFF6FF; } .kv-cmp-self-head { background: #DBEAFE !important; color: #1E3A8A; } /* component: step bullet / strength num */ .kv-step-bullet { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9999px; background: #2563EB; color: #fff; font-weight: 700; font-family: Inter, system-ui, sans-serif; font-size: 14px; } .kv-strength-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9999px; background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E40AF; font-weight: 700; font-family: Inter, system-ui, sans-serif; font-size: 12px; } /* component: メーカー / リボン / フローティング(プレースホルダ) */ .kv-mfr { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 6px; font-size: 12px; color: #374151; } .kv-ribbon { position: absolute; top: 12px; left: -8px; padding: 4px 12px; background: #2563EB; color: #fff; font-size: 11px; font-weight: 700; border-radius: 0 4px 4px 0; } .kv-floating { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: #fff; border-top: 1px solid #E5E7EB; padding: 10px 14px; box-shadow: 0 -4px 16px -2px rgba(17,24,39,.10); } .kv-floating-thumb { width: 48px; height: 48px; flex-shrink: 0; } @media (min-width: 1024px) { .kv-floating { display: none; } } /* ================================================================ */ /* Phase 2-B.14: Frame 2 法人向けトップ SP 準拠の追加 utility / component */ /* ================================================================ */ /* arbitrary-value */ .kv-gaiheki-max-w-\[1000px\] { max-width: 1000px; } .kv-gaiheki-min-h-\[48px\] { min-height: 48px; } .kv-gaiheki-min-w-\[640px\] { min-width: 640px; } .kv-gaiheki-leading-\[1\.25\] { line-height: 1.25; } .kv-gaiheki-leading-none { line-height: 1; } /* 不足 spacing */ .kv-gaiheki-pt-14 { padding-top: 3.5rem; } .kv-gaiheki-py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .kv-gaiheki-mb-1\.5 { margin-bottom: 0.375rem; } .kv-gaiheki-top-2 { top: 0.5rem; } /* utility 補完 */ .kv-gaiheki-bg-accent-100 { background-color: #D1FAE5; } .kv-gaiheki-bg-primary-50\/50 { background-color: rgba(255,251,235,.5); } .kv-gaiheki-bg-surface-page\/40 { background-color: rgba(249,250,251,.4); } .kv-gaiheki-text-gray-600 { color: #4B5563; } .kv-gaiheki-opacity-50 { opacity: 0.5; } .kv-gaiheki-items-stretch { align-items: stretch; } /* rotate(法人向け 3 モデル比較フロー図で使用) */ .kv-gaiheki-rotate-90 { transform: rotate(90deg); } .kv-gaiheki-rotate-0 { transform: rotate(0deg); } /* sm: breakpoint */ @media (min-width: 640px) { .kv-gaiheki-section .sm\:kv-gaiheki-flex-row { flex-direction: row !important; } } /* md: 追加 */ @media (min-width: 768px) { .kv-gaiheki-section .md\:kv-gaiheki-grid-cols-\[1fr_auto_1fr_auto_1fr\] { grid-template-columns: 1fr auto 1fr auto 1fr !important; } .kv-gaiheki-section .md\:kv-gaiheki-grid-cols-\[44px_96px_1fr_180px\] { grid-template-columns: 44px 96px 1fr 180px !important; } .kv-gaiheki-section .md\:kv-gaiheki-p-8 { padding: 2rem !important; } .kv-gaiheki-section .md\:kv-gaiheki-py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; } .kv-gaiheki-section .md\:kv-gaiheki-rotate-0 { transform: rotate(0deg) !important; } .kv-gaiheki-section .md\:kv-gaiheki-text-\[44px\] { font-size: 44px !important; line-height: 1.15 !important; } .kv-gaiheki-section .md\:kv-gaiheki-w-\[180px\] { width: 180px !important; } } /* lg: 追加 */ @media (min-width: 1024px) { .kv-gaiheki-section .lg\:kv-gaiheki-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } } /* button on dark(navy hero CTA) */ .kv-btn-on-dark { background: #fff; color: #1F2937; font-weight: 700; border-radius: 8px; padding: 12px 20px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .kv-btn-on-dark:hover { background: #F9FAFB; } /* component: フロー node / arrow(3 モデル比較で使用) */ .kv-flow-node { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; } .kv-flow-arrow { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9999px; background: #DBEAFE; color: #1E40AF; font-weight: 700; } /* Phase 2-D Step I (2026-05-25): md/lg breakpoint の col-span ユーティリティ追加 */ @media (min-width: 768px) { .kv-gaiheki-section .md\:kv-gaiheki-col-span-1 { grid-column: span 1 / span 1; } .kv-gaiheki-section .md\:kv-gaiheki-col-span-2 { grid-column: span 2 / span 2; } .kv-gaiheki-section .md\:kv-gaiheki-col-span-3 { grid-column: span 3 / span 3; } .kv-gaiheki-section .md\:kv-gaiheki-col-span-4 { grid-column: span 4 / span 4; } .md\:kv-gaiheki-col-span-1 { grid-column: span 1 / span 1; } .md\:kv-gaiheki-col-span-2 { grid-column: span 2 / span 2; } .md\:kv-gaiheki-col-span-3 { grid-column: span 3 / span 3; } .md\:kv-gaiheki-col-span-4 { grid-column: span 4 / span 4; } } @media (min-width: 1024px) { .kv-gaiheki-section .lg\:kv-gaiheki-col-span-1 { grid-column: span 1 / span 1; } .kv-gaiheki-section .lg\:kv-gaiheki-col-span-2 { grid-column: span 2 / span 2; } .kv-gaiheki-section .lg\:kv-gaiheki-col-span-3 { grid-column: span 3 / span 3; } .kv-gaiheki-section .lg\:kv-gaiheki-col-span-4 { grid-column: span 4 / span 4; } .lg\:kv-gaiheki-col-span-1 { grid-column: span 1 / span 1; } .lg\:kv-gaiheki-col-span-2 { grid-column: span 2 / span 2; } .lg\:kv-gaiheki-col-span-3 { grid-column: span 3 / span 3; } .lg\:kv-gaiheki-col-span-4 { grid-column: span 4 / span 4; } }