/* code.html 由来のユーティリティCSS（Tailwind preflight/リセットは除外し既存テーマへの影響を防止） */
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
*, ::before, ::after{--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:rgb(59 130 246 / 0.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:rgb(59 130 246 / 0.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: }
.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0px}.bottom-6{bottom:1.5rem}.left-0{left:0px}.left-\[15\%\]{left:15%}.right-0{right:0px}.right-4{right:1rem}.right-6{right:1.5rem}.right-\[15\%\]{right:15%}.top-0{top:0px}.top-1\/2{top:50%}.top-12{top:3rem}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:0.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-stack-lg{margin-bottom:48px}.mb-stack-md{margin-bottom:24px}.mt-16{margin-top:4rem}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.mt-stack-lg{margin-top:48px}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-1{height:0.25rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-20{height:5rem}.h-24{height:6rem}.h-8{height:2rem}.h-full{height:100%}.min-h-\[3\.5rem\]{min-height:3.5rem}.min-h-\[870px\]{min-height:870px}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-24{width:6rem}.w-8{width:2rem}.w-full{width:100%}.min-w-\[120px\]{min-width:120px}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-container-max{max-width:1200px}.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.shrink-0{flex-shrink:0}.-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes bounce{0%, 100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,0.2,1)}}.animate-bounce{animation:bounce 1s infinite}.cursor-pointer{cursor:pointer}.list-none{list-style-type:none}.appearance-none{-webkit-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:0.25rem}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-gutter{gap:24px}.gap-stack-lg{gap:48px}.gap-x-2{column-gap:0.5rem}.gap-x-6{column-gap:1.5rem}.gap-x-8{column-gap:2rem}.gap-y-1{row-gap:0.25rem}.gap-y-10{row-gap:2.5rem}.gap-y-2{row-gap:0.5rem}.gap-y-4{row-gap:1rem}.space-y-2 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-4 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-6 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-y-stack-lg > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(48px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(48px * var(--tw-space-y-reverse))}.space-y-stack-md > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(24px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(24px * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.rounded{border-radius:0.125rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:0.75rem}.rounded-lg{border-radius:0.25rem}.rounded-xl{border-radius:0.5rem}.border{border-width:1px}.border-8{border-width:8px}.border-b{border-bottom-width:1px}.border-b-4{border-bottom-width:4px}.border-t{border-top-width:1px}.border-t-4{border-top-width:4px}.border-outline-variant{--tw-border-opacity:1;border-color:rgb(233 188 182 / var(--tw-border-opacity, 1))}.border-primary{--tw-border-opacity:1;border-color:rgb(230 0 18 / var(--tw-border-opacity, 1))}.border-surface-container{--tw-border-opacity:1;border-color:rgb(240 237 237 / var(--tw-border-opacity, 1))}.border-white\/20{border-color:rgb(255 255 255 / 0.2)}.bg-\[\#4d4d4d\]{--tw-bg-opacity:1;background-color:rgb(77 77 77 / var(--tw-bg-opacity, 1))}.bg-accent-orange{--tw-bg-opacity:1;background-color:rgb(255 140 0 / var(--tw-bg-opacity, 1))}.bg-outline-variant{--tw-bg-opacity:1;background-color:rgb(233 188 182 / var(--tw-bg-opacity, 1))}.bg-primary{--tw-bg-opacity:1;background-color:rgb(230 0 18 / var(--tw-bg-opacity, 1))}.bg-primary\/10{background-color:rgb(230 0 18 / 0.1)}.bg-surface{--tw-bg-opacity:1;background-color:rgb(251 249 248 / var(--tw-bg-opacity, 1))}.bg-surface-bright{--tw-bg-opacity:1;background-color:rgb(251 249 248 / var(--tw-bg-opacity, 1))}.bg-surface-container{--tw-bg-opacity:1;background-color:rgb(240 237 237 / var(--tw-bg-opacity, 1))}.bg-surface-container-highest{--tw-bg-opacity:1;background-color:rgb(228 226 225 / var(--tw-bg-opacity, 1))}.bg-surface-container-low{--tw-bg-opacity:1;background-color:rgb(246 243 242 / var(--tw-bg-opacity, 1))}.bg-surface-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-surface-white{--tw-gradient-from:#FFFFFF var(--tw-gradient-from-position);--tw-gradient-to:rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-surface-white\/95{--tw-gradient-to:rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), rgb(255 255 255 / 0.95) var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.object-cover{object-fit:cover}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-12{padding-left:3rem;padding-right:3rem}.px-4{padding-left:1rem;padding-right:1rem}.px-margin-mobile{padding-left:16px;padding-right:16px}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-stack-lg{padding-top:48px;padding-bottom:48px}.pb-10{padding-bottom:2.5rem}.pb-2{padding-bottom:0.5rem}.pb-8{padding-bottom:2rem}.pl-8{padding-left:2rem}.pr-16{padding-right:4rem}.pt-0{padding-top:0px}.pt-12{padding-top:3rem}.pt-20{padding-top:5rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.text-left{text-align:left}.text-center{text-align:center}.font-display-lg{font-family:Noto Sans JP}.font-headline-md{font-family:Noto Sans JP}.font-headline-sm{font-family:Noto Sans JP}.font-label-md{font-family:Noto Sans JP}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-5xl{font-size:3rem;line-height:1}.text-\[10px\]{font-size:10px}.text-body-lg{font-size:18px;line-height:28px;font-weight:400}.text-body-md{font-size:16px;line-height:24px;font-weight:400}.text-caption{font-size:12px;line-height:16px;font-weight:400}.text-display-lg{font-size:40px;line-height:52px;letter-spacing:-0.02em;font-weight:700}.text-display-lg-mobile{font-size:32px;line-height:40px;letter-spacing:-0.01em;font-weight:700}.text-headline-md{font-size:24px;line-height:32px;font-weight:700}.text-headline-sm{font-size:20px;line-height:28px;font-weight:700}.text-label-md{font-size:14px;line-height:20px;letter-spacing:0.05em;font-weight:700}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.uppercase{text-transform:uppercase}.leading-none{line-height:1}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-widest{letter-spacing:0.1em}.text-footer-text{--tw-text-opacity:1;color:rgb(102 102 102 / var(--tw-text-opacity, 1))}.text-on-surface{--tw-text-opacity:1;color:rgb(27 28 28 / var(--tw-text-opacity, 1))}.text-on-surface-variant{--tw-text-opacity:1;color:rgb(95 63 59 / var(--tw-text-opacity, 1))}.text-outline-variant{--tw-text-opacity:1;color:rgb(233 188 182 / var(--tw-text-opacity, 1))}.text-primary{--tw-text-opacity:1;color:rgb(230 0 18 / var(--tw-text-opacity, 1))}.text-tertiary{--tw-text-opacity:1;color:rgb(0 88 178 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.opacity-40{opacity:0.4}.opacity-70{opacity:0.7}.opacity-80{opacity:0.8}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.selection\:bg-primary *::selection{--tw-bg-opacity:1;background-color:rgb(230 0 18 / var(--tw-bg-opacity, 1))}.selection\:text-white *::selection{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.selection\:bg-primary::selection{--tw-bg-opacity:1;background-color:rgb(230 0 18 / var(--tw-bg-opacity, 1))}.selection\:text-white::selection{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-accent-orange:hover{--tw-bg-opacity:1;background-color:rgb(255 140 0 / var(--tw-bg-opacity, 1))}.hover\:text-primary:hover{--tw-text-opacity:1;color:rgb(230 0 18 / var(--tw-text-opacity, 1))}.hover\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.focus\:border-primary:focus{--tw-border-opacity:1;border-color:rgb(230 0 18 / var(--tw-border-opacity, 1))}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\:ring-primary:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(230 0 18 / var(--tw-ring-opacity, 1))}.group[open] .group-open\:rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (min-width: 640px){.sm\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.sm\:flex-row{flex-direction:row}}@media (min-width: 768px){.md\:block{display:block}.md\:hidden{display:none}.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.md\:flex-row{flex-direction:row}.md\:p-10{padding:2.5rem}.md\:px-margin-desktop{padding-left:48px;padding-right:48px}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-display-lg{font-size:40px;line-height:52px;letter-spacing:-0.02em;font-weight:700}.md\:text-headline-md{font-size:24px;line-height:32px;font-weight:700}}@media (min-width: 1024px){.lg\:col-span-2{grid-column:span 2 / span 2}.lg\:flex{display:flex}.lg\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}}
/* ========== front-main overrides（テーマ干渉の打ち消し） ========== */
/*
* 実際のDOM:
* .entry-content > .wp-block-group.top_company
* > .wp-block-group__inner-container.is-layout-constrained
* > .front-main-block
* 直下セレクタ (.entry-content > .front-main-block) は当たらないため、
* .front-main-block を直接狙う + トップの幅制約を解除する。
*/
/* 1) トップページ: .site / コンテンツ幅の制約を解除 */
body.home .site {
max-width: none;
padding-left: 0;
padding-right: 0;
}
body.home #content.site-content,
body.home #content-area.content-area,
body.home #site-main.site-main,
body.home .entry-content {
max-width: none;
width: 100%;
margin-left: 0;
margin-right: 0;
}
/* WPブロックの is-layout-constrained による中央寄せ・幅制限を解除 */
body.home .entry-content .is-layout-constrained > :where(:not(.alignleft):not(.alignright)),
body.home .entry-content .wp-block-group__inner-container > * {
max-width: none !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body.home .entry-content .wp-block-group,
body.home .entry-content .wp-block-group__inner-container,
body.home .entry-content .is-layout-constrained {
max-width: none !important;
width: 100% !important;
}
/* フッター（問い合わせ先一覧含む）は従来どおり中央寄せ */
body.home .site-footer,
body.home .footer-select-service {
max-width: var(--el-content-width);
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
box-sizing: border-box;
}
/*
* 1-b) ヘッダー（position:fixed）直下の隙間を解消
* テーマは body に 5.5rem / 4.5rem の上余白を持つが、
* .site-header の実高は 4rem（>=48rem）/ 50px（<48rem）のため差分が白い帯になる。
*/
body.home {
padding-top: 4rem;
}
@media (max-width: 47.9375rem) {
body.home {
padding-top: 50px;
}
}
/* 2) テーマ style.css「.site-main a { color:#0066CC; underline }」打ち消し */
.site-main .front-main-block a {
color: inherit !important;
text-decoration: none !important;
}
.site-main .front-main-block a:hover {
text-decoration: none !important;
}
.site-main .front-main-block a.text-white,
.site-main .front-main-block .text-white {
color: #fff !important;
}
.site-main .front-main-block a.text-primary,
.site-main .front-main-block .text-primary {
color: #e60012 !important;
}
.site-main .front-main-block a.text-tertiary,
.site-main .front-main-block .text-tertiary {
color: #0058b2 !important;
}
.site-main .front-main-block a.text-on-surface {
color: #1b1c1c !important;
}
.site-main .front-main-block a.text-footer-text {
color: #666 !important;
}
.site-main .front-main-block a.underline {
text-decoration: underline !important;
}
/* code.html の preflight 相当: CTAボタンのブラウザ既定の黒枠を解除 */
.site-main .front-main-block .front-main-cta-button {
-webkit-appearance: none;
appearance: none;
border: 0;
font: inherit;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.site-main .front-main-block .front-main-cta-button .front-main-cta-button__icon {
flex-shrink: 0;
width: 18px;
height: 18px;
color: currentColor;
}
/* FV: 見出し〜説明文 / 説明文〜#sokujitu-tool の白余白を揃える
（ツールの border-t-4 + 上方向の影を踏まえ、どちらも 8px。space-y の 24px は打ち消し） */
.site-main .front-main-block .space-y-stack-md > p.text-body-lg.max-w-xl {
margin-top: 8px !important;
margin-bottom: 0 !important;
}
.site-main .front-main-block #sokujitu-tool {
margin-top: 8px !important;
}
/* FV: 電話CTA（お急ぎの方はこちら） */
.site-main .front-main-block a.front-fv-tel-cta {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
max-width: none;
margin: 0.75rem 0 0;
padding: 1.25rem 1.5rem 1.125rem;
box-sizing: border-box;
background: #fff;
border: 1px solid #d9d9d9;
border-radius: 2px;
box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
text-decoration: none !important;
color: #1b1c1c !important;
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.site-main .front-main-block a.front-fv-tel-cta:hover {
border-color: #bdbdbd;
box-shadow: 0 2px 8px rgb(0 0 0 / 0.08);
}
.site-main .front-main-block .front-fv-tel-cta__lead,
.site-main .front-main-block .front-fv-tel-cta__hours {
margin: 0;
padding: 0;
font-size: 14px;
line-height: 1.5;
font-weight: 400;
color: #1b1c1c;
text-align: center;
}
.site-main .front-main-block .front-fv-tel-cta__number {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.625rem;
}
.site-main .front-main-block .front-fv-tel-cta__icon {
display: block;
width: 48px;
height: auto;
flex-shrink: 0;
}
.site-main .front-main-block .front-fv-tel-cta__tel {
font-size: clamp(1.5rem, 4.5vw, 2rem);
line-height: 1.1;
font-weight: 700;
letter-spacing: 0.02em;
color: #1b1c1c;
}
/* 3) テーマの h1/h2/h3 装飾をリセット */
.site-main .front-main-block h1,
.site-main .front-main-block h2,
.site-main .front-main-block h3,
.home .site-main .front-main-block h2 {
background: none !important;
background-image: none !important;
background-color: transparent !important;
border: none !important;
border-bottom: none !important;
border-left: none !important;
margin: 0 !important;
padding: 0 !important;
font-size: unset;
font-weight: unset;
line-height: unset;
color: inherit;
}
/* 見出しリセット後のユーティリティ再適用 */
.site-main .front-main-block .text-display-lg-mobile {
font-size: 32px !important;
line-height: 40px !important;
letter-spacing: -0.01em !important;
font-weight: 700 !important;
}
.site-main .front-main-block .text-display-lg {
font-size: 40px !important;
line-height: 52px !important;
letter-spacing: -0.02em !important;
font-weight: 700 !important;
}
.site-main .front-main-block .text-headline-md {
font-size: 24px !important;
line-height: 32px !important;
font-weight: 700 !important;
}
.site-main .front-main-block .text-headline-sm {
font-size: 20px !important;
line-height: 28px !important;
font-weight: 700 !important;
}
.site-main .front-main-block .font-black { font-weight: 900 !important; }
.site-main .front-main-block .font-bold { font-weight: 700 !important; }
.site-main .front-main-block .leading-tight { line-height: 1.25 !important; }
.site-main .front-main-block .leading-snug { line-height: 1.375 !important; }
.site-main .front-main-block .leading-none { line-height: 1 !important; }
/*
* 見出しの margin:0 !important リセットで潰れた余白ユーティリティを再適用
* ※ .home .site-main .front-main-block h2 より specificity を高くする
*/
.site-main .front-main-block .mb-2 { margin-bottom: 0.5rem !important; }
.site-main .front-main-block .mb-4 { margin-bottom: 1rem !important; }
.site-main .front-main-block .mb-6 { margin-bottom: 1.5rem !important; }
.site-main .front-main-block .mb-8 { margin-bottom: 2rem !important; }
.site-main .front-main-block .mb-12 { margin-bottom: 3rem !important; }
.site-main .front-main-block .mb-stack-md { margin-bottom: 24px !important; }
.site-main .front-main-block .mb-stack-lg { margin-bottom: 48px !important; }
.site-main .front-main-block .mt-4 { margin-top: 1rem !important; }
.site-main .front-main-block .mt-8 { margin-top: 2rem !important; }
.site-main .front-main-block .mt-stack-lg { margin-top: 48px !important; }
.site-main .front-main-block .mb-0 { margin-bottom: 0 !important; }
.home .site-main .front-main-block h1.mb-4,
.home .site-main .front-main-block h2.mb-4,
.home .site-main .front-main-block h3.mb-4,
.site-main .front-main-block h1.mb-4,
.site-main .front-main-block h2.mb-4,
.site-main .front-main-block h3.mb-4 {
margin-bottom: 1rem !important;
}
.home .site-main .front-main-block h1.mb-6,
.home .site-main .front-main-block h2.mb-6,
.home .site-main .front-main-block h3.mb-6,
.site-main .front-main-block h1.mb-6,
.site-main .front-main-block h2.mb-6,
.site-main .front-main-block h3.mb-6 {
margin-bottom: 1.5rem !important;
}
.home .site-main .front-main-block h1.mb-8,
.home .site-main .front-main-block h2.mb-8,
.home .site-main .front-main-block h3.mb-8,
.site-main .front-main-block h1.mb-8,
.site-main .front-main-block h2.mb-8,
.site-main .front-main-block h3.mb-8 {
margin-bottom: 2rem !important;
}
.home .site-main .front-main-block h1.mb-stack-md,
.home .site-main .front-main-block h2.mb-stack-md,
.home .site-main .front-main-block h3.mb-stack-md,
.site-main .front-main-block h1.mb-stack-md,
.site-main .front-main-block h2.mb-stack-md,
.site-main .front-main-block h3.mb-stack-md {
margin-bottom: 24px !important;
}
.home .site-main .front-main-block h1.mb-stack-lg,
.home .site-main .front-main-block h2.mb-stack-lg,
.home .site-main .front-main-block h3.mb-stack-lg,
.site-main .front-main-block h1.mb-stack-lg,
.site-main .front-main-block h2.mb-stack-lg,
.site-main .front-main-block h3.mb-stack-lg {
margin-bottom: 48px !important;
}
/* code.html の見出し下線（border-b-4 + pb-2）を再現 */
.home .site-main .front-main-block h1.pb-2,
.home .site-main .front-main-block h2.pb-2,
.home .site-main .front-main-block h3.pb-2,
.site-main .front-main-block h1.pb-2,
.site-main .front-main-block h2.pb-2,
.site-main .front-main-block h3.pb-2 {
padding-bottom: 0.5rem !important;
}
/*
* セクション見出し統一
* font-size:24px / line-height:34px / 赤下線（.w-24.h-1.bg-primary）
*/
.site-main .front-main-block h2.front-section-heading,
.home .site-main .front-main-block h2.front-section-heading {
font-size: 24px !important;
line-height: 34px !important;
font-weight: 700 !important;
letter-spacing: normal !important;
text-align: center;
color: #1b1c1c;
}
.site-main .front-main-block .text-solve-cta,
.home .site-main .front-main-block .text-solve-cta {
font-size: clamp(28px, 2.8vw, 40px) !important;
line-height: 1.4 !important;
font-weight: 700 !important;
}
@media (min-width: 768px) {
.site-main .front-main-block .md\:text-display-lg {
font-size: 40px !important;
line-height: 52px !important;
letter-spacing: -0.02em !important;
font-weight: 700 !important;
}
.site-main .front-main-block .md\:text-headline-md {
font-size: 24px !important;
line-height: 32px !important;
font-weight: 700 !important;
}
.site-main .front-main-block .md\:text-3xl {
font-size: 1.875rem !important;
line-height: 2.25rem !important;
}
}
/* 意図的なボーダーユーティリティ（見出しの border:none リセットより優先させる） */
.site-main .front-main-block .border-b-4,
.home .site-main .front-main-block .border-b-4 {
border-bottom-width: 4px !important;
border-bottom-style: solid !important;
}
.site-main .front-main-block .border-t-4,
.home .site-main .front-main-block .border-t-4 {
border-top-width: 4px !important;
border-top-style: solid !important;
}
.site-main .front-main-block .border-primary,
.home .site-main .front-main-block .border-primary {
border-color: rgb(230 0 18) !important;
}
/* テーマの list / p 余白の干渉を軽減 */
.site-main .front-main-block ul {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.site-main .front-main-block p {
margin: 0;
}
/*
* ========== ブロック②: WEB受付フォーム ==========
* 都道府県ページ等の旧 .top_form / .group-shadow デザインに戻す。
* アクセント色のみ #E60012 に統一。
*/
.site-main .front-form-block {
background-color: #fff;
}
.site-main .front-form-block .front-form-section {
/* 都道府県ページの .group-shadow.top_form → footer 間に合わせ、余分な下余白は持たない */
padding-bottom: 0;
background-color: #fff;
}
/* 内部リンク〜WEBフォーム間: スペーサー高さを半分に（50px → 25px） */
.site-main .front-form-block #before_form.wp-block-spacer {
height: 25px !important;
}
/* 旧 top_form カード（.group-shadow）をそのまま見せる */
.site-main .front-form-block .wp-block-group.group-shadow,
.site-main .front-form-block .wp-block-group.top_form {
padding: 0 20px 20px;
border: 1px solid #eee;
border-radius: 10px;
box-shadow: 4px 4px 10px #efefef;
margin-bottom: 40px;
background-color: #fff;
}
.site-main .front-form-block .screen-reader-response {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* 旧見出し: fit-content の下線付き h2（front-main-block の h2 リセットを上書き） */
.site-main .front-form-block .top_form h2.wp-block-heading {
text-align: center !important;
border: none !important;
border-bottom: 4px solid #E60012 !important;
width: fit-content !important;
max-width: 100% !important;
margin: 0 auto 2rem !important;
padding: 2rem 0 0.5rem !important;
font-size: 24px !important;
line-height: normal !important;
font-weight: 400 !important;
color: #333 !important;
background: none !important;
}
.site-main .front-form-block .wpcf7-form > p {
margin: 0 0 1rem;
}
.site-main .front-form-block .wpcf7-form > p > label {
display: block;
}
.site-main .front-form-block .top_form .wpcf7-radio .wpcf7-list-item {
display: block;
}
.site-main .front-form-block .top_form .wpcf7-list-item {
margin-left: 0;
margin-top: 0.3rem;
}
.site-main .front-form-block .top_form .wpcf7-list-item-label {
font-size: 16px;
}
.site-main .front-form-block .top_form input[type="text"],
.site-main .front-form-block .top_form input[type="tel"],
.site-main .front-form-block .top_form input[type="email"],
.site-main .front-form-block .top_form input[type="date"],
.site-main .front-form-block .top_form select {
box-sizing: border-box;
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #fff;
font-family: inherit;
font-size: 16px;
line-height: 1.5;
color: #101010;
}
.site-main .front-form-block .top_form input[type="text"]:focus,
.site-main .front-form-block .top_form input[type="tel"]:focus,
.site-main .front-form-block .top_form input[type="email"]:focus,
.site-main .front-form-block .top_form input[type="date"]:focus,
.site-main .front-form-block .top_form select:focus {
outline: none;
border-color: #E60012;
}
.site-main .front-form-block .top_form .wpcf7-submit {
-webkit-appearance: none;
appearance: none;
display: block;
width: 100%;
margin-top: 20px;
padding: 15px 20px;
border: none;
border-radius: 4px;
background-color: #E60012;
color: #fff;
font-family: inherit;
font-size: 1.2rem;
font-weight: 700;
line-height: 1.4;
cursor: pointer;
box-shadow: 4px 4px 10px #ccc;
}
.site-main .front-form-block .top_form .wpcf7-submit:hover {
opacity: 0.92;
}
.site-main .front-form-block .top_form .wpcf7-spinner {
display: none;
}
.site-main .front-form-block .top_form .form-privacy-policy {
margin: 20px 0 0;
font-size: 14px;
font-weight: 400;
line-height: 1.7;
color: #333;
}
.site-main .front-form-block .top_form .form-privacy-policy a {
color: #06c !important;
text-decoration: underline !important;
text-decoration-color: #06c !important;
}
.site-main .front-form-block .top_form .form-service-note {
margin: 0 0 8px;
font-size: 14px;
font-weight: 400;
line-height: 1.7;
color: #333333;
}
.site-main .front-form-block .wpcf7-response-output[aria-hidden="true"] {
display: none;
}
/*
* ========== キーワード検索（CTA と都道府県一覧の間） ==========
* 入力欄の見た目はテーマ標準 .top_search-box に戻す。
*/
body.home .entry-content > .front-main-search-wrap,
body.home .entry-content .front-main-search-wrap {
background-color: #fff;
padding: 48px 16px 0;
margin: 0 !important;
max-width: none !important;
width: 100% !important;
}
@media (min-width: 768px) {
body.home .entry-content > .front-main-search-wrap,
body.home .entry-content .front-main-search-wrap {
padding-left: 48px;
padding-right: 48px;
}
}
body.home .front-main-search-wrap .wp-block-group__inner-container,
body.home .front-main-search-wrap.is-layout-constrained > :where(:not(.alignleft):not(.alignright)) {
max-width: var(--el-content-width, 1110px) !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* テーマ .top_search-box 準拠（stitch 上書きを解除）
* フォームは縦並び（ラベル上＋入力欄）にし、ピル型枠は inside-wrapper に移す */
body.home .front-main-search-wrap .front-main-search.top_search-box,
body.home .front-main-search-wrap .wp-block-search.top_search-box,
body.home .front-main-search-wrap .wp-block-search.front-main-search {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
position: static;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 auto !important;
max-width: 100%;
width: 100%;
background: transparent !important;
box-shadow: none !important;
}
@media screen and (min-width: 720px) {
body.home .front-main-search-wrap .front-main-search.top_search-box,
body.home .front-main-search-wrap .wp-block-search.top_search-box,
body.home .front-main-search-wrap .wp-block-search.front-main-search {
/* 本番: コンテンツ幅(--el-content-width)の60% ≈ 666px */
max-width: calc(var(--el-content-width, 1110px) * 0.6) !important;
width: calc(var(--el-content-width, 1110px) * 0.6) !important;
}
}
/* 「サイト内検索」ラベルを中央見出しとして表示（text-headline-sm font-bold mb-4 相当） */
body.home .front-main-search-wrap .wp-block-search__label,
body.home .front-main-search-wrap .wp-block-search__label.screen-reader-text {
position: static !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
margin: 0 0 1rem !important;
overflow: visible !important;
clip: auto !important;
clip-path: none !important;
white-space: normal !important;
border: 0 !important;
display: block !important;
text-align: center !important;
color: #1B1C1C !important;
font-size: 20px !important;
line-height: 28px !important;
font-weight: 700 !important;
}
/* スマホ: front-main-block 内 .text-headline-sm と同じ 16/24 */
@media (max-width: 767px) {
body.home .front-main-search-wrap .wp-block-search__label,
body.home .front-main-search-wrap .wp-block-search__label.screen-reader-text {
font-size: 16px !important;
line-height: 24px !important;
}
}
body.home .front-main-search-wrap .wp-block-search__inside-wrapper {
position: static;
display: flex;
align-items: center;
flex-grow: 1;
width: 100%;
box-sizing: border-box;
border: 2px solid #ddd !important;
border-radius: 20px !important;
padding: 5px 10px !important;
background: #fff !important;
}
body.home .front-main-search-wrap .wp-block-search__input,
body.home .front-main-search-wrap input[type="search"] {
box-sizing: border-box;
width: auto;
height: auto;
flex-grow: 1;
margin: 0 10px 0 0;
padding: 10px !important;
border: none !important;
border-radius: 0 !important;
outline: none !important;
background-color: transparent !important;
background-image: url(/wp-content/themes/electric/assets/images/search_icon.png) !important;
background-repeat: no-repeat !important;
background-position: right 10px center !important;
background-size: 20px 20px !important;
box-shadow: none !important;
font-family: inherit;
font-size: 16px !important;
line-height: normal;
color: inherit;
-webkit-appearance: none;
appearance: none;
}
body.home .front-main-search-wrap .wp-block-search__input:focus,
body.home .front-main-search-wrap input[type="search"]:focus {
border: none !important;
box-shadow: none !important;
outline: none !important;
}
body.home .front-main-search-wrap input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
/* stitch 用 Material アイコンを無効化 */
body.home .front-main-search-wrap .wp-block-search__inside-wrapper::after {
content: none !important;
display: none !important;
}
/* セクション上下余白（見出し上部・セクション末尾）を従来の約2倍へ */
.site-main .front-main-block .py-stack-lg {
padding-top: 96px !important;
padding-bottom: 96px !important;
}
/* FV: オレンジラベル上部の余白を気持ち狭く（96px → 48px） */
.site-main .front-main-block > section.relative > .py-stack-lg {
padding-top: 48px !important;
}
/* 都道府県一覧ブロックの上余白を検索とつなげる（従来32pxの約2倍） */
body.home .entry-content > .front-main-block.bg-surface-container-low > section.py-stack-lg {
background-color: #fff !important;
padding-top: 64px !important;
/* WEBフォームとの間の下余白を半分に（96px → 48px） */
padding-bottom: 48px !important;
}
/*
* ==========================================================================
* スマホ対応（stitch_top/code.html のモバイルモック準拠）
* 内容・マークアップは変更せず、タイポグラフィと余白のみ縮小する。
* ==========================================================================
*/
@media (max-width: 767px) {
/* --- セクション余白 : 従来モバイル32px の約2倍 --- */
.site-main .front-main-block .py-stack-lg,
.site-main .front-main-block section.py-stack-lg {
padding-top: 64px !important;
padding-bottom: 64px !important;
}
/* FV: オレンジラベル上部余白（モバイルも気持ち狭く） */
.site-main .front-main-block > section.relative > .py-stack-lg {
padding-top: 32px !important;
}
body.home .entry-content > .front-main-block.bg-surface-container-low > section.py-stack-lg {
padding-bottom: 32px !important;
}
.site-main .front-main-block .mb-stack-lg {
margin-bottom: 24px !important;
}
.site-main .front-main-block .mt-stack-lg,
.site-main .front-main-block .mt-16 {
margin-top: 32px !important;
}
.site-main .front-main-block .gap-stack-lg {
gap: 32px !important;
}
.site-main .front-main-block .gap-gutter {
gap: 16px !important;
}
.site-main .front-main-block .space-y-stack-md > :not([hidden]) ~ :not([hidden]) {
margin-top: 16px;
}
/* --- ファーストビュー --- */
.site-main .front-main-block .min-h-\[870px\] {
min-height: 600px !important;
}
.site-main .front-main-block h1.text-display-lg-mobile {
font-size: 30px !important;
line-height: 40px !important;
}
.site-main .front-main-block .space-y-stack-md > h1 {
margin-top: 20px !important;
}
/* --- セクション見出し : 24/34 -> 20/28、赤下線 96 -> 64 --- */
.site-main .front-main-block h2.front-section-heading,
.home .site-main .front-main-block h2.front-section-heading {
font-size: 20px !important;
line-height: 28px !important;
}
.site-main .front-main-block .w-24.h-1 {
width: 64px !important;
}
/* --- 本文タイポグラフィ : headline-sm -> 16 / body-md -> 14 --- */
.site-main .front-main-block .text-headline-sm {
font-size: 16px !important;
line-height: 24px !important;
}
.site-main .front-main-block .text-body-md {
font-size: 14px !important;
line-height: 22px !important;
}
.site-main .front-main-block .text-body-lg {
font-size: 15px !important;
line-height: 24px !important;
}
.site-main .front-main-block .text-solve-cta,
.home .site-main .front-main-block .text-solve-cta {
font-size: 20px !important;
line-height: 1.4 !important;
}
/* --- カード : p-8 -> 24、アイコン円とバッジを縮小 --- */
.site-main .front-main-block .p-8 {
padding: 24px !important;
}
.site-main .front-main-block .min-h-\[3\.5rem\] {
min-height: 0 !important;
}
.site-main .front-main-block .w-16.h-16.rounded-full {
width: 48px !important;
height: 48px !important;
margin-bottom: 16px !important;
}
.site-main .front-main-block .w-16.h-16.rounded-full .text-3xl {
font-size: 24px !important;
}
.site-main .front-main-block .w-12.h-12.rounded-lg {
width: 40px !important;
height: 40px !important;
margin-bottom: 16px !important;
font-size: 20px !important;
}
/* --- 開通の流れ : 円 96 -> 64、番号 32 -> 24 --- */
.site-main .front-main-block .w-24.h-24.rounded-full {
width: 64px !important;
height: 64px !important;
margin-bottom: 16px !important;
border-width: 4px !important;
}
.site-main .front-main-block .w-24.h-24.rounded-full.text-display-lg-mobile {
font-size: 24px !important;
line-height: 1 !important;
}
/* --- 申し込みCTAボタン : カードと同じ全幅・16px --- */
.site-main .front-main-block a.front-main-cta-button {
display: inline-flex !important;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 100% !important;
max-width: 100% !important;
padding: 16px 12px !important;
font-size: 16px !important;
line-height: 24px !important;
text-align: center;
}
.site-main .front-main-block .mt-16.flex.justify-center {
width: 100%;
}
/* --- FAQ : p-6 -> 16、本文 14px --- */
.site-main .front-main-block details > summary.p-6 {
padding: 16px !important;
font-size: 15px;
line-height: 22px;
gap: 8px;
}
.site-main .front-main-block details > div.p-6 {
padding: 16px !important;
font-size: 14px !important;
line-height: 22px !important;
}
/* --- 下部CTA（赤背景） --- */
.site-main .front-main-block .bg-primary h2.text-display-lg-mobile {
font-size: 22px !important;
line-height: 32px !important;
}
.site-main .front-main-block .bg-primary .text-display-lg {
font-size: 24px !important;
line-height: 32px !important;
letter-spacing: 0 !important;
gap: 8px !important;
}
.site-main .front-main-block .bg-primary .text-5xl {
font-size: 28px !important;
line-height: 1 !important;
}
/* --- FV フリーダイヤルCTA --- */
.site-main .front-main-block a.front-fv-tel-cta {
padding: 16px 12px;
gap: 0.375rem;
}
.site-main .front-main-block .front-fv-tel-cta__lead,
.site-main .front-main-block .front-fv-tel-cta__hours {
font-size: 12px;
line-height: 1.5;
}
.site-main .front-main-block .front-fv-tel-cta__icon {
width: 38px;
}
.site-main .front-main-block .front-fv-tel-cta__tel {
font-size: 22px;
}
/* --- 都道府県・会社一覧 --- */
.site-main .front-main-block .min-w-\[120px\] {
min-width: 0 !important;
}
.site-main .front-main-block .space-y-6 .text-sm,
.site-main .front-main-block .flex-wrap.text-sm {
font-size: 13px !important;
line-height: 20px !important;
}
.site-main .front-main-block .space-y-stack-lg > :not([hidden]) ~ :not([hidden]) {
margin-top: 24px;
}
.site-main .front-main-block a.p-4 {
padding: 12px !important;
}
.site-main .front-main-block a.p-4 .font-bold {
font-size: 14px;
}
/* --- キーワード検索 : ラッパー余白のみ調整（入力欄は .top_search-box 準拠） --- */
body.home .entry-content > .front-main-search-wrap,
body.home .entry-content .front-main-search-wrap {
padding-top: 32px;
}
/* --- WEB受付フォーム --- */
.site-main .front-form-block .front-form-section {
padding-bottom: 0;
}
.site-main .front-form-block .wp-block-group.group-shadow,
.site-main .front-form-block .wp-block-group.top_form {
padding: 0 16px 16px;
/* 都道府県ページの .group-shadow（margin-bottom: 40px）に合わせる */
margin-bottom: 40px;
}
.site-main .front-form-block .top_form h2.wp-block-heading {
font-size: 20px !important;
padding-top: 1.5rem !important;
margin-bottom: 1.5rem !important;
}
.site-main .front-form-block .top_form .wpcf7-submit {
font-size: 1.1rem;
padding: 14px 16px;
}
}
/* スマホS（320px 前後）: さらに一段階小さく */
@media (max-width: 359px) {
.site-main .front-main-block h1.text-display-lg-mobile {
font-size: 26px !important;
line-height: 36px !important;
}
.site-main .front-main-block h2.front-section-heading,
.home .site-main .front-main-block h2.front-section-heading {
font-size: 18px !important;
line-height: 26px !important;
}
.site-main .front-main-block .bg-primary h2.text-display-lg-mobile {
font-size: 20px !important;
line-height: 30px !important;
}
.site-main .front-main-block .bg-primary .text-display-lg {
font-size: 21px !important;
}
.site-main .front-main-block .bg-primary .text-5xl {
font-size: 24px !important;
}
.site-main .front-main-block .front-fv-tel-cta__tel {
font-size: 20px;
}
.site-main .front-main-block .front-fv-tel-cta__icon {
width: 34px;
}
.site-main .front-main-block a.front-main-cta-button {
font-size: 15px !important;
}
.site-main .front-main-block .p-8 {
padding: 20px !important;
}
.site-main .front-main-block details > summary.p-6 {
font-size: 14px;
}
}
/*
* 電力会社を都道府県から探す（.group-shadow.top_pref）
* front-main-block 内でも本番 top_pref の見た目を再現する。
* ※ front-main-block の a/h2/ul リセットを上書きするため !important を使用。
*/
.site-main .front-main-block .group-shadow.top_pref {
background-color: #fff;
padding: 0 20px 20px;
border-radius: 10px;
box-shadow: 4px 4px 10px #efefef;
border: 1px solid #eee;
margin-bottom: 40px;
}
.site-main .front-main-block .group-shadow.top_pref h2,
.site-main .front-main-block .group-shadow.top_pref h2.wp-block-heading,
.home .site-main .front-main-block .group-shadow.top_pref h2 {
font-size: 20px !important;
line-height: normal !important;
font-weight: 400 !important;
text-align: center !important;
color: #333 !important;
background: none !important;
border: none !important;
margin: 1rem 0 !important;
padding: 0 !important;
}
.site-main .front-main-block .group-shadow.top_pref h3,
.home .site-main .front-main-block .group-shadow.top_pref h3 {
font-size: 16px !important;
line-height: normal !important;
font-weight: 400 !important;
color: #333 !important;
background: none !important;
border: none !important;
margin: 1rem 0 0.25rem !important;
padding: 0 !important;
}
.site-main .front-main-block .group-shadow.top_pref .pref_container {
max-width: 80% !important;
width: 80% !important;
margin-left: auto !important;
margin-right: auto !important;
}
.site-main .front-main-block .group-shadow.top_pref ul {
list-style: none !important;
padding: 0 !important;
/* 本番実測: margin-bottom 32px（テーマ 1.5rem より広めに見える） */
margin: 0 0 2rem !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
}
.site-main .front-main-block .group-shadow.top_pref li {
background-color: #fff;
font-size: 16px;
flex-basis: auto;
box-sizing: border-box;
position: relative;
text-align: center;
text-indent: -10px;
margin: 0 !important;
}
.site-main .front-main-block .group-shadow.top_pref li::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 1.5em;
border-right: 1px solid #000;
}
.site-main .front-main-block .group-shadow.top_pref li a {
color: #0066CC !important;
text-decoration: underline !important;
display: block !important;
padding: 5px 10px !important;
font-size: 16px !important;
line-height: normal !important;
}
.site-main .front-main-block .group-shadow.top_pref li a:hover {
text-decoration: none !important;
}
@media (max-width: 719px) {
.site-main .front-main-block .group-shadow.top_pref .pref_container {
max-width: 100% !important;
width: 100% !important;
}
.site-main .front-main-block .group-shadow.top_pref li {
flex-basis: calc((100% - 20px) / 3);
}
}
/*
* 電力会社から探す / ガス会社から探す（.group-shadow.top + .pref-button-list）
* front-main-block 内でも本番 pref-button-list の見た目を再現する。
*/
.site-main .front-main-block .group-shadow.top:not(.top_pref) {
background-color: #fff;
padding: 0 20px 20px;
border-radius: 10px;
box-shadow: 4px 4px 10px #efefef;
border: 1px solid #eee;
margin-bottom: 40px;
}
.site-main .front-main-block .group-shadow.top:not(.top_pref) h2,
.site-main .front-main-block .group-shadow.top:not(.top_pref) h2.wp-block-heading,
.home .site-main .front-main-block .group-shadow.top:not(.top_pref) h2 {
font-size: 20px !important;
line-height: normal !important;
font-weight: 400 !important;
text-align: center !important;
color: #333 !important;
background: none !important;
border: none !important;
margin: 1rem 0 !important;
padding: 0 !important;
}
.site-main .front-main-block .group-shadow.top:not(.top_pref) ul.pref-button-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 0 18px !important;
justify-content: space-between !important;
}
.site-main .front-main-block .group-shadow.top:not(.top_pref) ul.pref-button-list::after {
content: "";
display: block;
width: 32%;
}
.site-main .front-main-block .group-shadow.top:not(.top_pref) .pref-button-list li {
list-style: none !important;
margin: 0.1rem 0 !important;
/* 本番モバイル: 2カラム */
flex-basis: calc((100% - 10px) / 2);
}
.site-main .front-main-block .group-shadow.top:not(.top_pref) .pref-button-list li a {
display: block !important;
margin: 0 !important;
background-color: transparent;
background-image: url(/wp-content/themes/electric/assets/images/cancel_arrow.svg) !important;
background-repeat: no-repeat !important;
background-position: calc(100% - clamp(10px, 2.735vw, 20px)) center !important;
padding: 10px 35px 10px 20px !important;
color: #000 !important;
border: 1px solid #fff !important;
border-radius: 5px !important;
text-align: left !important;
font-size: 16px !important;
line-height: normal !important;
text-decoration: none !important;
position: relative;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) !important;
}
.site-main .front-main-block .group-shadow.top:not(.top_pref) .pref-button-list li a:hover {
background-color: #f8f8f8 !important;
text-decoration: none !important;
}
@media (min-width: 48rem) {
.site-main .front-main-block .group-shadow.top:not(.top_pref) .pref-button-list li,
.site-main .front-main-block .group-shadow.top:not(.top_pref) .pref-button-list li:nth-child(3n) {
flex-basis: calc(33% - 12px);
}
}
@media (max-width: 47.9375rem) {
.site-main .front-main-block .group-shadow.top:not(.top_pref) ul.pref-button-list {
gap: 5px !important;
justify-content: space-between !important;
}
.site-main .front-main-block .group-shadow.top:not(.top_pref) ul.pref-button-list::after {
display: none;
}
}