@charset "utf-8";

/*	===================================================================
	Basement
=================================================================== */
:root {
    --gray: #E4ECF0;
    --green: #3ecf43;
    --yellow: #f7ca00;
    --red: #ff5117;
    --dark-red: #992d09;
    --blue: #009dd1;

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

 
    --main-width: 100%;
    --b: 360;
    --px: (100vw / var(--b));
    --tagline-height: calc(40 * var(--px));
    --header-height: calc(50 * 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.75;
	color: var(--black, black);
	overflow-x: clip;

    width: 100svw;
    background: #fcf7ee;

	position: relative;
}
@media screen and (min-width: 768px) {
    body {
        font-size: 1.9rem;
    }
}



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

/** フォント */
.condesed {
    font-family: "Reddit Sans Condensed", sans-serif;
    /*font-family: "Asap Condensed", sans-serif;*/
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

/** テキスト */
:is(h1, h2, h3, h4, h5, h6) {
    font-weight: 500;
}
p + p {
    margin-top: 1lh;
}
p strong {
    font-weight: 900;
    background: linear-gradient(to top, var(--marker) , var(--marker) 40%, transparent 40%, transparent);
}
.note {
    font-size: 75%;
}
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: 400;
    }
    :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) {
	:is(a, button):hover {
		--bg: var(--hover-bg, transparent);
		--color: var(--hover);
	}
}


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

/*  main
-------------------------------------------------------------------- */
main.content {
    width: 100%;
    background: var(--white, white);
}

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

        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
-------------------------------------------------------------------- */
section > img {
    text-align: center;
}

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

}


/*  CTA
-------------------------------------------------------------------- */
.cta {
    background: var(--accent);
    position: relative;
}
:is(#billboard, .cta) a[href*="tel:"] {
    width: calc(343 * var(--px));
    height: fit-content;
    position: absolute;
    left: 50%;
    bottom: var(--m);
    translate: -50% 0;
}
:is(#billboard, .cta) a[href*="tel:"] .number {
    width: max-content;
    font-size: 6.1rem;
    line-height: 1;
    scale: 0.83 1;
    color: white;
    text-shadow: 3px 3px 0 var(--dark-red);
    position: absolute;
    left: 50%;
    top: 54%;
    translate: -50% -50%;
    z-index: 1;
}
:is(#billboard, .cta) a[href*="tel:"] img {
    pointer-events: none;
}
.cta a[href*="contact"] {
    width: calc(338 * var(--px));
    margin-inline: auto;
}
.cta .note {
    margin-top: var(--m);
    color: var(--white, white);
    text-align: center;
}
@media screen and (min-width: 768px) {
}
@media (hover: hover) {
    :is(#billboard, .cta) a {
        position: relative;
        z-index: 0;
    }
    :is(#billboard, .cta) a img {
        transition: var(--transition);
    }
    :is(#billboard, .cta) a::after {
        display: block;
        width: 100%;
        height: 100%;
        background: var(--white, white);
        border-radius: calc(9 * var(--px));

        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    :is(#billboard, .cta) a:hover img {
        opacity: 0.7;
    }
}


/*  追従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;
    height: var(--tagline-height);
    background: var(--white, white);
}
.tagline img {
    height: 100%;
}
header {
    width: 100%;
    max-width: var(--main-width);
    margin-inline: auto;
    height: var(--header-height);
    background: var(--black, black);
    position: relative;
}
header .now {
    color: var(--white, white);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.1em;
    position: absolute;
    left: calc(8 * var(--px));
    bottom: calc(6 * var(--px));
}
header .now > span {
    color: var(--yellow);
    font-size: 2.7rem;
    font-weight: 900;
}
header img[src*="header-time"] {
    width: calc(66 * var(--px));
    position: absolute;
    left: calc(8 * var(--px));
    top: calc(6 * var(--px));
}
header img[src*="header-call"] {
    width: calc(145 * var(--px));
    position: absolute;
    right: calc(8 * var(--px));
    top: calc(26 * var(--px));
}
header a[href*="tel:"] {
    width: calc(100 * var(--px));
    height: calc(55 * var(--px));
    position: absolute;
    right: calc(8 * var(--px));
    top: calc(-35 * var(--px));
}
header a[href*="contact"] {
    display: none;
}
@media screen and (min-width: 768px) {
    header .now {
        font-size: 1.8rem;
    }
    header .now > span {
        font-size: 3.6rem;
    }
}
@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;
    }
}





/*	===================================================================
	ビルボード
=================================================================== */
section#billboard {
    position: relative;
}
section#billboard h3 {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    translate: 0 50%;
    z-index: 10;
}
section#billboard a[href*="tel:"] {
    width: calc(343 * var(--px));
    position: absolute;
    left: 50%;
    top: calc(373 * var(--px));
    translate: -50% 0;
}
@media screen and (min-width: 768px) {
}

section#billboard + .cta {
    padding-block: var(--m4) var(--m2);
}

/*	===================================================================
	こんなトラブル
=================================================================== */
section#trouble {
    padding-top: var(--m3);
    background: #6c8c9c;
}
section#trouble .checklist {
    margin-top: var(--m3);
    padding-inline: var(--m2);
    position: relative;
}
section#trouble .checklist::before {
    content: "CHECK LIST";
    display: block;
    width: fit-content;
    padding-inline: 1em;
    background: #6c8c9c;
    font-size: 1.2rem;
    font-weight: 800;
    color: #8abacc;
    letter-spacing: 0.5em;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50% -50%;
}
section#trouble .checklist ul {
    padding-block: var(--m2);
    padding-inline: var(--m);
    border: 2px solid #8abacc;
    border-radius: 6px;
}
section#trouble .checklist li {
    color: var(--white, white);
    padding-inline: 1.5ic 0;
    position: relative;
}
section#trouble .checklist li::before {
    --size: calc(1lh / 1.5);
    display: block;
    width: var(--size);
    height: var(--size);
    background: url("imgs/trouble-check.webp") no-repeat;
    background-size: contain;
    position: absolute;
    left: 0;
    top: calc((1lh - 1ic) / 2);
}
section#trouble .checklist li + li {
    margin-top: 0.3lh;
}
section#trouble .dangerous {
    margin-top: var(--m2);
    background: linear-gradient(to bottom, transparent, transparent 50%, var(--accent) 50%);
    position: relative;
}
section#trouble .dangerous .container {
    width: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    translate: 0 -50%;
}
section#trouble .dangerous .text {
    margin-top: var(--m2);
    margin-inline: var(--m2);
    padding-block: var(--m3) var(--m2);
    padding-inline: var(--m2);
    border: 2px solid #8abacc;
    border-radius: 6px;
    background: #dae8ed;
    position: relative;
}
section#trouble .dangerous img[src*="trouble-mark"] {
    width: calc(54 * var(--px));
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50% -50%;
}
@media screen and (min-width: 768px) {
    section#trouble .checklist li {
        font-size: 2rem;
    }
}

/*	===================================================================
	３つの理由
=================================================================== */
section#reason {}
section#reason h2 {
    padding-block: var(--m2);
}
section#reason .block p {
    margin-block: var(--m) var(--m3);
    padding-inline: var(--m2);
}
@media screen and (min-width: 768px) {
}


/*	===================================================================
	レビュー
=================================================================== */
section#review {
    padding-block: var(--m3);
    background: #dae8ed;
}
section#review .container img {
    margin-top: var(--m3);
}
@media screen and (min-width: 768px) {

}




/*	===================================================================
	施工事例
=================================================================== */
section#case h2 { 
    padding-block: var(--m3) var(--m2);
}
section#case .block p {
    margin-block: var(--m);
    padding-inline: var(--m2);
}
section#case li {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
}
section#case li + li {
    margin-top: var(--m);
}
section#case li span {
    display: inline-block;
    padding-block: 0.2lh;
    padding-inline: 0.5ic;
    border-radius: 3px;
    margin-right: 0.5ic;
    font-size: 1.4rem;
}
section#case li:first-child span {
    background: #cee8f0;
}
section#case li:last-child span {
    background: var(--green);
    color: var(--white, white);
}


/*	===================================================================
	見分け方
=================================================================== */
section#warning {
    background: #e8faff;
}
section#warning h2 {
    padding-block: var(--m3) var(--m2);
}


/*	===================================================================
	比較
=================================================================== */
section#compare {
    padding-bottom: var(--m2);
    background: #e8faff;
}
section#compare h2 {
    padding-block: var(--m3) var(--m2);
}
section#compare p {
    margin-block: var(--m2);
    padding-inline: var(--m2);
}




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

/*	===================================================================
	流れ
=================================================================== */
section#step {
    padding-block: var(--m2) var(--m3);
}
section#step .container img {
    margin-top: var(--m2);
}
section#step p.note {
    margin-top: var(--m2);
    margin-inline: var(--m2);
}

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


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

details {
    margin-top: var(--m2);
    margin-inline: var(--m);
    padding-block: var(--m);
    border-radius: 10px;
    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(--m3);
    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(--gray);
    padding-top: var(--m);
    padding-right: var(--m);
}
details .text img[src*="faq"] {
    top: var(--m);
}


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


/*	===================================================================
	フォーム
=================================================================== */
section#contact {
    padding-block: var(--m2);
}
section#contact form {
    margin-top: var(--m2);
    margin-inline: var(--m);
}
section#contact dt {
    margin-bottom: 0.25lh;
    font-weight: bold;
}
section#contact dd + dd {
    margin-top: var(--m);
}
section#contact :is([type="text"], [type="tel"], [type="email"], select, textarea) {
    border: 1px solid #c4c2bf;
    border-radius: 3px;
}
section#contact button {
    width: 100%;
    margin-inline: 0;
}
@media (hover: hover) {
    section#contact button {
        position: relative;
        z-index: 0;
    }
    section#contact button::before,
    section#contact button::after {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 6px;
        position: absolute;
        top: 0;
        left: 0;
    }
    section#contact button::before {
        background: var(--action);
        z-index: -1;
        transition: var(--transition);
    }
    section#contact button::after {
        background: var(--white, white);
        z-index: -2;
    }
    section#contact button:hover::before {
        opacity: 0.7;
    }
}

@media screen and (min-width: 768px) {
    section#contact {}
    section#contact form {}
}

/*  form
-------------------------------------------------------------------- */
form {}
form dl {}
form dl + dl {
    margin-top: var(--m);
}
form dd {
	-webkit-margin-start: 0;
	margin-inline-start: 0;
}
form button {
	border: none;
	cursor: pointer;
}
form dt {
    position: relative;
}
form dd {}
form dl:has([required]) dt::before {
	content: var(--item-text, "必須");
	display: block;
	padding-inline: 0.5ic;
	background: var(--alert);
    color: var(--white, white);
    font-weight: 500;

    position: absolute;
    top: 0;
    right: 0;
    scale: 0.75;
}
form label {
    width: fit-content;
    max-width: 100%;
    padding-block: 0.25lh;
}
form label:has(input:is([type="checkbox"], [type="radio"])) {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	-moz-column-gap: 0.5ic;
	column-gap: 0.5ic;
}
form dd .note {
	flex: 0 0 100%;
	font-size: 75%;
	color: #a69a85;
}
form dd:has(input:user-invalid) .note {
	color: var(--alert, red);
}
form :is(input, textarea)::placeholder,
option[disabled] {
    color: #c4c2bf;
}
form input:is([type="text"], [type="email"], [type="tel"], [type="url"]),
form textarea,
form select {
	padding-inline: 0.5ic;
    background: var(--white, white);
    outline: transparent;
}
form input:is([type="text"], [type="email"], [type="tel"], [type="url"]):focus-visible,
form textarea:focus-visible,
form select:focus-visible {
	outline: var(--outline, dodgerBlue) auto 1px;
    border-color: transparent;
}
form input:is([type="text"], [type="email"], [type="tel"], [type="url"]):user-invalid,
form textarea:user-invalid,
form select:user-invalid {
	outline: var(--alert, red) auto 1px;
}
form input:is([type="text"], [type="email"], [type="tel"], [type="url"]),
form textarea {
    width: 100%;
	box-sizing: border-box;
    padding-block: 0.5lh;
}
form input:is([type="checkbox"], [type="radio"]) {
	appearance: auto;
    inline-size: 1ic;
    block-size: 1ic;
    accent-color: var(--action);
}
form label:has(select) {
    position: relative;
}
form label:has(select)::after {
    --size: calc(12 * var(--px));
    display: block;
    width: var(--size);
    height: var(--size);
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    rotate: 45deg;

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

    transition: var(--transition);
    pointer-events: none;
}

form select {
	appearance: none;
    width: 100%;
    padding-block: 0.5lh;
    padding-right: var(--m2);
	cursor: pointer;
}
form textarea {
	min-height: 10lh;
	field-sizing: content;
}

form [type="submit"]:is(button, input) {
    margin-block: var(--m2) var(--m);
    width: fit-content;
	margin-inline: auto;
	font-size: 120%;
}
@media (hover: hover) {
	form [type="submit"]:is(button, input) {
		cursor: pointer;
	}
}
@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(--accent);
    color: var(--base);
    font-size: 75%;
    text-align: center;
}

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