@charset "utf-8";

/*	===================================================================
	Basement
=================================================================== */
:root {
    --gray: #f2faff;
    --yellow: #fee81c;
    --cream: #fffdf7;
    --orange: #fb5a00;
    --red: #e60012;
    --blue: #088dca;
    --black: #011e58;
    --green: #28ba15;

    --base: var(--white, white);
    --accent: var(--blue);
    --border: #ccc;
    --marker: var(--yellow);
    --alert: var(--red);
    --action: var(--green);

 
    --main-width: 100%;
    --b: 360;
    --px: (100vw / var(--b));
    --header-height: calc(40 * var(--px));
    --cta-fixed-height: calc(78 * var(--px));


    --m: calc(15 * var(--px));
    --m2: calc( var(--m) * 2);
    --m3: calc( var(--m) * 3);
    --m4: calc( var(--m) * 4);
    --m5: calc( var(--m) * 5);

    --ms: calc( var(--m) / 3 * 2);

	--transition: 0.3s 0s ease;

    interpolate-size: allow-keywords;
}
@media screen and (min-width: 768px) {
	:root {
        --main-width: 500px;
        --px: (var(--main-width) / var(--b));
    }
}

html {
    font-size: 62.5%;
	-webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
	scroll-behavior: smooth;
}

body {
	font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-size: 1.5rem;
	font-weight: 500;
	font-style: normal;
	line-height: 1.5;
	color: var(--black, black);
	overflow-x: clip;
    

    width: 100svw;
    background: white;

	position: relative;
}
@media screen and (min-width: 768px) {
    html {
        font-size: 81.25%;
    }
}



/*	===================================================================
	Object
=================================================================== */
* {
	box-sizing: border-box;
}


/** テキスト */
:is(h1, h2, h3, h4, h5, h6) {
    font-weight: 700;
}
p strong {
    font-weight: 700;
    color: var(--yellow);
}
ul:is(:not([class]), .normal), ol {
	margin-block: 0.75lh;
}
ol {
	list-style: decimal;
	padding-inline-start: 1.5ic;
}
dt {
    font-weight: 400;
}
img,
iframe {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	vertical-align: middle;
}
img {
	outline: 0;
	-o-object-fit: contain;
	object-fit: contain;
}


picture {
	line-height: 0;
	overflow: hidden;
}
:target {
	scroll-margin-block: 5ex;
}
*::before,
*::after {
	content: "";
	display: none;
	box-sizing: border-box;
}

/** 改行 */
:is(br, wbr)[pc], .pc {
	display: none;
}
@media screen and (min-width: 768px) {
    :is(h1, h2, h3, h4, h5, h6) {
        font-weight: 700;
    }
    :is(br, wbr)[sp], .sp {
		display: none;
	}
	:is(br, wbr)[pc] {
		display: inline;
	}
	.pc {
		display: block;
	}
}

/** リンク */
a {
	--visited: var(--link);
    --focus: var(--hover);
    text-decoration: none;
    transition: var(--transition);
}
a:has(img) {
	display: block;
}
a:not([class]) {
	color: currentColor;
	text-underline-offset: 4px;
}
@media screen and (min-width: 768px) {
    a[href*="tel:"] {
        /*pointer-events: none;*/
    }
}

@media (hover: hover) {
	a:not([class]) {
		text-decoration: underline;
	}
	a:not([class]):hover {
		text-decoration: none;
	}
}

a:link {
	--color: var(--link);
}
a:visited {
	--color: var(--visited);
}
:is(a, button) {
	background: var(--bg);
	color: var(--color);
}
:is(a, button):focus {
	--bg: var(--focus-bg, var(--hover-bg, transparent));
	--color: var(--focus, var(--hover));
}
@media (hover: hover) {
    a:is([href*="tel:"], [href*="https://"]) {
        position: relative;
        z-index: 0;
    }
    a:is([href*="tel:"], [href*="https://"]) img {
        transition: var(--transition);
    }
    a:is([href*="tel:"], [href*="https://"])::after {
        display: block;
        width: 100%;
        height: 100%;
        background: var(--white, white);
        border-radius: 21px;

        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    header nav a::after {
        border-radius: 8px;
    }
    a:is([href*="tel:"], [href*="https://"]):hover img {
        opacity: 0.7;
    }
}
@media (hover: hover) {
}

.note {
    display: block;
    font-size: 1rem;
    text-indent: -1ic;
    padding-left: 1ic;
}
.small {
    font-size: 68%;
}

.btn {
    display: block;
    width: fit-content;
    padding: 0.5lh 1ic;
    background: var(--action);
    margin-inline: auto;
    color: var(--white, white);
    text-align: center;
}

.orange {
    color: var(--orange);
}



/*  section
-------------------------------------------------------------------- */
section > img {
    text-align: center;
}

@media screen and (min-width: 768px) {

}


/*  CTA
-------------------------------------------------------------------- */
.cta {
    padding-block: 0 var(--m);
    padding-inline: var(--m);
    background:white;
    position: relative;
}
.cta h2 {
    padding-block: var(--m2);
    text-align: center;
    font-size: 1.8rem;
}
.cta a {
    width: calc(330 * var(--px));
    height: fit-content;
    margin-inline: auto;
    position: relative;
}
.cta a img {
    pointer-events: none;
}
.cta a[href*="tel:"] {

}
.cta a[href*="https://"] {
    margin-top: var(--m);
}
.cta .note {
    margin-top: var(--m);
    font-weight: 700;
}

@media screen and (min-width: 768px) {}


/*  追従CTA
-------------------------------------------------------------------- */
#cta-fixed {
    width: 100%;
    height: var(--cta-fixed-height);

    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;

    transition: var(--transition);
}
#cta-fixed a {
    position: absolute;
    bottom: calc(8 * var(--px));
}
#cta-fixed a[href*="tel:"] {
    width: calc(165 * var(--px));
    left: calc(15 * var(--px));
}

#cta-fixed nav a[href*="#contact"] {
    width: calc(155 * var(--px));
    right: calc(15 * var(--px));
    transition: 0.1s 0s ease;
}
@media screen and (min-width: 768px) {
    #cta-fixed {
        display: none;
    }
}

.grecaptcha-badge {
    z-index: 90;
    transition: var(--transition), right 0.3s !important;
}
/*body:is(.is_show_recaptcha, .is_hide_cta_fixed) #cta-fixed,*/
body:is(.is_hide_cta_fixed) #cta-fixed,
body:not(.is_show_recaptcha) .grecaptcha-badge {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}
body:is(.is_show_recaptcha) #cta-fixed {
    width: calc(195 / 360 * 100vw);
}
body:is(.is_show_recaptcha) #cta-fixed .lead-full,
body:not(.is_show_recaptcha) #cta-fixed .lead-tel,
body:is(.is_show_recaptcha) #cta-fixed a[href*="#contact"] {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}


/*	===================================================================
	ヘッダー・フッター
=================================================================== */
.tagline {
    width: 100%;
    max-width: var(--main-width);
    margin-inline: auto;
    background: var(--white, white);
}
.tagline img {
    height: 100%;
}
header {
    width: 100%;
    max-width: var(--main-width);
    margin-inline: auto;
    height: var(--header-height);
    background: white;
    position: relative;
    z-index: 2;
}
header a[href*="tel:"] {
    width: calc(120 * var(--px));
    height: calc(42 * var(--px));
    position: absolute;
    right: calc(2 * var(--px));
    top: calc(5 * var(--px));
}
@media screen and (min-width: 768px) {}
@media (hover: hover) {
    header a {
        position: relative;
        z-index: 0;
    }
    header a img {
        transition: var(--transition);
    }
    header a::after {
        display: block;
        width: 100%;
        height: 100%;
        background: var(--white, white);
        border-radius: 6px;

        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    header a:hover img {
        opacity: 0.7;
    }
}

/*  main
-------------------------------------------------------------------- */
main.content {
    width: 100%;
}

@media screen and (min-width: 768px) {
    main.content {
        width: auto;
        max-width: var(--main-width);
        margin-inline: auto;
        box-shadow: 0 0 var(--m5) calc(-1 * var(--m2)) rgba(0,0,0,.6);

        position: relative;
        z-index: 1;
    }
}

/*  サンクスページ
-------------------------------------------------------------------- */
body#thanks main.content {
    padding-top: var(--m3);
    padding-inline: var(--m2);
    min-height: calc(100svh - var(--m5) );
    background: var(--base);
    color: var(--black, black);
}
body#thanks h2 {
    padding-bottom: var(--m);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--m);
    font-size: 2.7rem;
    font-weight: bold;
    text-align: center;
}
body#thanks .nav-home {
    margin-top: var(--m2);
    color: var(--white, white);
}




/*	===================================================================
	ビルボード
=================================================================== */
section#billboard {
    position: relative;
}

section#billboard + .cta {
    padding-top: var(--m);
}

@media screen and (min-width: 768px) {}


/*	===================================================================
	こんなトラブル
=================================================================== */
section#trouble {
    padding-top: var(--m2);
    color: white;
    background: var(--black);
}
section#trouble .checklist {
    margin-top: var(--m2);
    padding-inline: var(--m);
    display: flex;
    flex-wrap: wrap;
    gap: var(--m);
}
section#trouble .checklist > div {
    flex: 1 1 40%;
    padding: var(--m) var(--ms);
    background: white;
    box-shadow: inset 0 0 0 3px #fff7ad;
    border-radius: 6px;
    font-size: 1.2rem;
    color: var(--black);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--m);
}
section#trouble .checklist > div:last-of-type {
    flex-direction: row;
    text-align: left;
}
section#trouble .checklist img {
    width: calc(68 * var(--px));
}

section#trouble .dangerous {
    padding-block: var(--m2);
    padding-inline: var(--m) calc(90 * var(--px));
    position: relative;
}
section#trouble .dangerous::before {
    display: block;
    width: calc(26 * var(--px));
    height: calc(9 * var(--px));
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: var(--yellow);
    position: absolute;
    left: 50%;
    top: var(--m);
    translate: -50% 0;
}
section#trouble .dangerous h3 {
    margin-bottom: var(--m);
}
section#trouble .dangerous p {
    font-size: 1.2rem;
}
section#trouble img[src*="dangerous-image"] {
    width: calc(125 * var(--px));
    position: absolute;
    right: 0;
    top: var(--m);
}

section#trouble + .cta {
    background: linear-gradient(to bottom, var(--black) 45%, var(--gray) 45%);
}


/*	===================================================================
	３つの理由
=================================================================== */
section#reason {
    padding-block: var(--m2);
    background: var(--gray);
}
section#reason h2 {
    margin-bottom: var(--m2);
}
section#reason .block {
    padding-bottom: var(--m2);
    position: relative;
}
section#reason .block + .block {
    margin-top: var(--m2);
}
section#reason .block p {
    width: calc(100% - var(--m2));
    padding: var(--m);
    background: white;
    font-size: 1.2rem;
    position: absolute;
    left: 50%;
    bottom: 0;
    translate: -50% 0;
}
@media screen and (min-width: 768px) {}




/*	===================================================================
	施工事例
=================================================================== */
section#case {
    padding-block: var(--m2);
    background: var(--cream);
}
section#case h2 { 
    margin-bottom: var(--m2);
}
section#case .block + .block {
    margin-top: var(--m2);
}
section#case .block > :not(img) {
    margin-inline: var(--m);
}
section#case :is(.problem, .factor) {
    padding: var(--m);
    text-align: center;
    font-weight: 700;
}
section#case .problem {
    margin-top: calc(-1 * var(--m2));
    background: var(--blue);
    border-radius: 3px;
    color: white;
    position: relative;
}
section#case :is(.problem, .factor) dt {
    width: calc(95 * var(--px));
    border-radius: 3px;
    margin-inline: auto;
    margin-bottom: var(--ms);
    font-size: 1.2rem;
}
section#case .problem dt {
    background: white;
    color: var(--black);
}
section#case .factor {
    margin-top: var(--m);
}
section#case .factor dt {
    background: var(--orange);
    color: white;
}
section#case .solution {
    padding-top: var(--m);
    display: flex;
    align-items: center;
    gap: var(--m);
    position: relative;
}
section#case .solution::before {
    display: block;
    width: 24px;
    height: 7px;
    background: var(--black);
    clip-path: polygon(0 0, 50% calc(100% - 3px), 100% 0, 100% 3px, 50% 100%, 0 3px);
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50% 0;
}
section#case img[src*="case-mark"] {
    width: calc(80 * var(--px));
}
section#case .data {
    margin-top: var(--m);
    font-size: 1.3rem;
    text-align: center;
}


/*	===================================================================
	レビュー
=================================================================== */
section#review {
    padding-block: var(--m3);
}
section#review h2 {
    margin-bottom: var(--m2);
}
section#review .block {
    margin-inline: var(--m2);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--m);
}
section#review .block + .block {
    margin-top: var(--m2);
    border-top: 1px solid var(--black);
    padding-top: var(--m2);
}
section#review .block img {
    width: calc(58 * var(--px));
}
section#review .block > p {
    flex: 0 1 100%;
}
section#review .data {
    font-size: 1.2rem;
}
section#review .data p:first-child {
    font-size: 1.5rem;
    font-weight: 700;
}
@media screen and (min-width: 768px) {

}


/*	===================================================================
	見分け方
=================================================================== */
section#warning {
    padding-block: var(--m3) 0;
    background: var(--black);
    position: relative;
    z-index: 0;
}
section#warning h2 {
    margin-bottom: var(--m2);
    position: relative;
    z-index: 0;
}
section#warning img[src*="warning-image"] {
    width: calc(110 * var(--px));
    position: absolute;
    right: 0;
    top: var(--m);
    z-index: 1;
}
section#warning .block {
    padding: var(--m);
    border-radius: 3px;
    background: white;
    margin-inline: var(--m);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ms);
    position: relative;
    z-index: 2;
}
section#warning .block + .block {
    margin-top: var(--m);
}
section#warning img[src*="warning-mark"] {
    width: calc(50 * var(--px));
}
section#warning h3 {
    flex: 1;
}
section#warning p {
    flex: 0 0 100%;
    border-top: 1px solid var(--black);
    padding-top: var(--m);
}

/*	===================================================================
	比較
=================================================================== */
section#compare {
    padding-bottom: var(--m2);
    background: var(--black);
}
section#compare h2 {
    padding-block: var(--m3);
}
section#compare img[src*="compare-table"] {
    width: calc(330 * var(--px));
    margin-inline: auto;
}

/*	===================================================================
	概要
=================================================================== */
section#overview {
    padding-block: var(--m2);
    padding-inline: var(--m);
    position: relative;
}
section#overview .text {
    padding-right: calc(113 * var(--px));
}
section#overview h2 {
    font-size: 1.8rem;
    margin-bottom: var(--m);
}
section#overview .text p {
    font-size: 1.2rem;
}
section#overview .text p + p {
    margin-top: 1lh;
}
section#overview img[src*="overview-image"] {
    width: calc(128 * var(--px));
    position: absolute;
    right: 0;
    top: var(--m2);
    z-index: -1;
}
section#overview .payment {
    margin-block: var(--m);
    border-radius: 6px;
    padding: var(--m);
    background: var(--blue);
    text-align: center;
}
section#overview .payment h3 {
    color: white;
    font-size: 1.8rem;
    margin-bottom: var(--m);
}
section#overview .payment p {
    font-size: 1.2rem;
    padding-block: 0.3lh;
    padding-inline: 1ic;
    border-radius: 3px;
    background: white;
}

/*	===================================================================
	サービス
=================================================================== */
section#service {
    padding-bottom: var(--m);
}
section#service h2 {
    padding-block: var(--m3) var(--m2);
}
section#service .notice {
    margin-top: var(--m4);
    margin-inline: var(--m2);
    padding-block: var(--m4) var(--m);
    padding-inline: var(--m2);
    border-radius: calc(6 * var(--px));
    background: var(--yellow);
    position: relative;
}
section#service .notice img[src*="service-mark"] {
    width: calc(200 * var(--px));
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50% -50%;
}
section#service p.note {
    margin-top: var(--m);
    margin-inline: var(--m2);
}
@media screen and (min-width: 768px) {
}

/*	===================================================================
	流れ
=================================================================== */
section#step {
    padding-block: var(--m2);
    background: var(--cream)
}
section#step h2 {
    margin-bottom: var(--m2);
}
section#step .block {
    display: flex;
}
section#step .block + .block {
    margin-top: var(--m2);
}
section#step .block img {
    width: 41%;
}
section#step .text {
    flex: 1;
    padding-inline: var(--m);
}
section#step .label {
    padding-inline: 1ic;
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.5lh;
}
section#step .block:nth-of-type(4n+1) .label {background: var(--orange)}
section#step .block:nth-of-type(4n+2) .label {background: var(--black)}
section#step .block:nth-of-type(4n+3) .label {background: var(--blue)}
section#step .block:nth-of-type(4n+4) .label {background: var(--green)}
section#step p {
    margin-top: 0.5lh;
    font-size: 1.4rem;
}

@media screen and (min-width: 768px) {
}


/*	===================================================================
	よくある質問
=================================================================== */
section#faq {
    padding-block: var(--m2);
}

details {
    margin-top: var(--m2);
    margin-inline: var(--m);
    padding-block: var(--m);
    border-radius: 3px;
    border: 2px solid var(--black);
    background: var(--white, white);
    transition: var(--transition);
}
@media (prefers-reduced-motion: no-preference) {
    details::details-content {
        overflow: clip;
        transition-duration: 0.3s;
        transition-property: content-visibility, block-size;
        transition-behavior: allow-discrete;
    }
}
details:not([open])::details-content {
    block-size: 0;
}

:is(summary, details .text) {
    margin-left: var(--m);
    padding-left: var(--m2);
    position: relative;
}
details img[src*="faq"] {
    width: calc(30 * var(--px));
    position: absolute;
    left: 0;
    top: 0;
}

summary {
    list-style: none;
    padding-right: var(--m2);
    cursor: pointer;
    font-size: 120%;
    font-weight: 900;
}
summary::-webkit-details-marker {
    display: none;
}
summary::before {
    --color: var(--black, black);
    --size: calc(12 * var(--px));
    display: block;
    width: var(--size);
    height: var(--size);
    border-right: 3px solid var(--color);
    border-bottom: 3px solid var(--color);
    rotate: 45deg;

    position: absolute;
    top: 0;
    right: var(--m);
    translate: 0 50%;

    transition: var(--transition);

}
details[open] summary::before {
    rotate: -135deg;
    translate: 0 75%;
}
details .text {
    margin-top: var(--m);
    border-top: 1px solid var(--border);
    padding-top: var(--m);
    padding-right: var(--m);
    margin-right: var(--m);
}
details .text img[src*="faq"] {
    top: var(--m);
}
details .text p + p {
    margin-top: 1lh;
}
details .note {
    font-size: 1.2rem;
}


@media screen and (min-width: 768px) {
}


/*	===================================================================
	フォーム
=================================================================== */
section#contact {
    padding-block: var(--m2);
    background: var(--black);
}
section#contact h2 {
    margin-bottom: var(--m2);
}
section#contact p {
    padding-inline: var(--m2);
    color: white;
}
section#contact a[href*="https://"] {
    margin-block: var(--m2) var(--m);
    margin-inline: var(--m2);
}
section#contact .note {
    text-align: center;
}

@media screen and (min-width: 768px) {
}


/*	===================================================================
	会社概要
=================================================================== */
section#company {
    padding-block: var(--m) var(--m3);
    background: var(--base);
}
section#company table {
    margin-top: var(--m2);
    margin-inline: auto;
    width: calc(100% - var(--m4));
    border-collapse: collapse;
    
    border-spacing: 1px;
}
section#company :is(th, td) {
    box-sizing: content-box;
    padding: 0.5lh 1ic;
    border: 1px solid var(--black, black);
}
section#company th {
    width: 4ic;
}
@media screen and (min-width: 768px) {
   
}


/*	==フッター
=================================================================== */
footer {
    padding-top: var(--m);
    padding-bottom: var(--cta-fixed-height);
    background: var(--black);
    color: white;
    font-size: 75%;
    text-align: center;
}

@media screen and (min-width: 768px) {
    footer {
        padding-block: var(--m2);
    }
}