@charset "utf-8";

/*	===================================================================
	Basement
=================================================================== */
:root {
    --white: white;
    --gray: #e8f7ff;
    --black: black;
    --blue: #004ba6;
    --sky: #78d1ff;
    --yellow: #ffe100;
    --red: #ff3829;
	--green: #00cc2c;

    --base: var(--sky);
    --main: var(--sky);
    --sub: var(--white);
    --light: var(--yellow);
    --accent: var(--blue);
    --border: var(--white);
    --marker: var(--yellow);
    --alert: var(--red);
    --action: var(--green);

	--b: 360;
	--px: (100vw / var(--b));
    --main-width: 100%;
	--logo-width: 197;
    --tagline-height: calc(30 * var(--px));
    --header-height: calc(50 * var(--px));
    --cta-fixed-height: calc(100 * 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;
}
@media screen and (min-width: 768px) {
	:root {
		--px: (var(--main-width) / var(--b));
        --main-width: 450px;
        --tagline-height: calc(25 * var(--px));
		--header-height: fit-content;
		--m: calc(15 * var(--px));
    }
}

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;

	transition: 0.5s 0s ease;
}

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

    width: 100svw;
    background: var(--base);

	position: relative;
}

@media screen and (min-width: 768px) {
	body {
        background: #FCF9EF url('imgs/bg.webp') repeat;
    }
}



/*	===================================================================
	Object
=================================================================== */
img[src*="logo"] {
    aspect-ratio: var(--logo-width) / 28;
}



* {
	box-sizing: border-box;
}


/** テキスト */
:is(h1, h2, h3, h4, h5, h6) {
    font-weight: 500;
}
p + p {
    margin-top: 1lh;
}
p strong {
    font-weight: bold;
    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 (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);
    text-align: center;
}

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

@media screen and (min-width: 768px) {
    main.content {
        padding-top: var(--tagline-height);
        width: auto;
        max-width: var(--main-width);
        margin-inline: auto;
        background: var(--base);
        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(--main);
    color: var(--white);
}
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);
}


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

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

}


/*  CTA
-------------------------------------------------------------------- */
.cta {
    background: var(--accent);
}
.cta > img {
    margin-bottom: calc(6.5 * var(--px));
}
.cta nav {
    padding: var(--m);
    padding-top: 0;
}
.cta a + a {
    margin-top: var(--m);
}
.cta .note {
    padding-bottom: var(--m);
    color: white;
    text-align: center;
}
@media screen and (min-width: 768px) {
    .cta {
        padding-top: calc(6.5px * var(--px));
    }
    .cta > img {
        margin-bottom: calc(6.5px * var(--px));
    }
    .cta a[href*="tel"] {
        pointer-events: none;
    }
}
@media (hover: hover) {
    .cta a {
        position: relative;
        z-index: 0;
    }
    .cta a img {
        transition: var(--transition);
    }
    .cta a[href="#contact"]::after {
        display: block;
        width: 100%;
        height: 100%;
        background: var(--white);
        border-radius: 6px;

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



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

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

    transition: var(--transition);
}
#cta-fixed :is(.lead-full, .lead-tel, a) {
    position: absolute;
}
#cta-fixed :is(.lead-full, .lead-tel) {
    width: 100%;
    left: 0;
    top: 0;
    transition: var(--transition);
}
#cta-fixed a {
    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 * var(--px));
}
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%;
    height: var(--tagline-height);
    background: var(--accent);
}
.tagline img {
    margin-inline: auto;
}
header {
    width: 100%;
    height: var(--header-height);
    padding-inline: var(--m);
    background: var(--base);

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
header > img {
    flex: 0 0 100%;
}
header h1 {
    width: calc(var(--logo-width) * var(--px));
}
header nav {
    display: flex;
    gap: calc(5 * var(--px));
}

@media screen and (min-width: 768px) {
    .tagline {
        height: calc(25 * var(--px));

        position: fixed;
        top: 0;
        z-index: 100;
    }
    .tagline img {
        width: var(--main-width);
        height: 100%;
    }
    header {
        width: 1200px;
        background: transparent;
        position: fixed;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        z-index: 0;
    }
    header h1 {
        width: 320px;
    }
    header nav {
        display: block;
    }
    header a {
        width: 320px;
        height: auto;
    }
    header a:not([href="#contact"]) {
        margin-bottom: var(--m2);
        pointer-events: none;
    }
    body#thanks header {
        top: calc(50% - var(--m5));
    }
}
@media (hover: hover) {
    header a {
        position: relative;
        z-index: 0;
    }
    header a img {
        transition: var(--transition);
    }
    header a[href="#contact"]::after {
        display: block;
        width: 100%;
        height: 100%;
        background: var(--white);
        border-radius: 6px;

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

@media screen and (max-width: 767px) {
    header a {
        height: calc(34 * var(--px));
    }
    header a[href*="tel"] {
        width: calc(76 * var(--px));
    }
    header a[href*="contact"] {
        width: calc(34 * var(--px));
    }
}






/*	===================================================================
	ビルボード
=================================================================== */
section#billboard {
    position: relative;
}
@media screen and (min-width: 768px) {}


/*	===================================================================
	トラブル解決
=================================================================== */
section#problem {
    padding-top: var(--m2);
    background: var(--gray);
}
section#problem .container {
    margin-top: var(--m);
    padding: calc(20 * var(--px));
    display: flex;
    flex-wrap: wrap;
    gap: var(--m2);
}
section#problem .container img {
    width: 100%;
}
@media screen and (min-width: 768px) {}


/*	===================================================================
	料金
=================================================================== */
section#price {
    padding-block: var(--m);
    background: var(--accent);
}
section#price > img + img {
    margin-top: var(--m2);
}
@media screen and (min-width: 768px) {

}


/*	===================================================================
	特徴
=================================================================== */
section#feature {
    padding-block: var(--m2) var(--m);
    background: var(--white);
}

section#feature h3 {
    margin-top: var(--m2);
    margin-bottom: var(--m);
}
@media screen and (min-width: 768px) {}


/*	===================================================================
	流れ
=================================================================== */
section#step {
    padding-block: var(--m2) var(--m3);
    background: var(--gray);
}
section#step .container {
    margin-top: var(--m);
    padding: var(--m2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--m2);
}

section#step > img {
    margin-top: var(--m3);
}
@media screen and (min-width: 768px) {
    section#step {}
}


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

details {
    margin-top: var(--m3);
    margin-inline: var(--m);
    background: var(--white);
    border-radius: 10px;
    overflow: clip;
    transition: var(--transition);
}
section#faq h2 + details {
    margin-top: var(--m2);
}
summary {
    list-style: none;
    position: relative;
    cursor: pointer;
}
summary::-webkit-details-marker {
    display: none;
}
summary::before {
    --color: var(--black);
    --size: calc(9 * var(--px));
    display: none;
    width: var(--size);
    height: var(--size);
    border-right: 2px solid var(--color);
    border-bottom: 2px solid var(--color);
    rotate: 45deg;

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

    transition: var(--transition);

}
details[open] summary::before {
    --color: var(--gray);
    rotate: -135deg;
}

details > p {
    margin-inline: var(--m);
	transition: opacity 0.3s 0.2s ease, max-height 0.5s 0s ease;
}
details summary + p {
    border-top: 1px solid currentColor;
    padding-top: var(--m);
}
details:not([open]) > p {
    opacity: 0;
	max-height: 0;
}
details[open] {
    padding-bottom: var(--m2);
}
details[open] > p {
    opacity: 1;
	max-height: 100%;
}

@media screen and (min-width: 768px) {
    details {}
    summary {}
    summary::before {
        --size: calc(12 * var(--px));
        top: calc(80 / 2 * var(--px));
    }
    details > p {}
}



/*	===================================================================
	エリア
=================================================================== */
section#area {}
@media screen and (min-width: 768px) {
    section#area {}
}


/*	===================================================================
	フォーム
=================================================================== */
section#contact {
    padding-block: var(--m2) var(--m3);
    background: var(--base);
}
section#contact form {
    margin-top: var(--m2);
    margin-inline: var(--m);
    padding: var(--m);
    background: var(--white);
    border-radius: 10px;
    font-size: 1.6rem;
}
section#contact dt {
    margin-bottom: 0.25lh;
    font-weight: bold;
}
section#contact dd + dd {
    margin-top: var(--m);
}

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);
        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);
    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;
    color: var(--white);
}
form dd .note {
	flex: 0 0 100%;
	font-size: 75%;
	color: gray;
}
form dd:has(input:user-invalid) .note {
	color: var(--alert, red);
}
form :is(input, textarea)::placeholder,
option[disabled] {
    color: #acacac;
}
form input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="date"]), 
form textarea,
form select {
    padding-block: 0.3lh;
	padding-inline: 0.5ic;
    background: var(--white);
    border: 1px solid #a2a8ab;
    border-radius: 3px;
    outline: transparent;
}
form input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="date"]):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"], [type="date"]):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"], [type="date"]),
form textarea {
    width: 100%;
	box-sizing: border-box;
}
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(9 * var(--px));
    display: block;
    width: var(--size);
    height: var(--size);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    rotate: 45deg;

    position: absolute;
    top: 50%;
    right: var(--m);
    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: 1.8rem;

}
@media (hover: hover) {
	form [type="submit"]:is(button, input) {
		cursor: pointer;
	}
}
@media screen and (min-width: 768px) {
    form label:has(select)::after {
        --size: calc(12 * var(--px));
    }
}


/*	===================================================================
	会社概要
=================================================================== */
section#company {
    padding-block: var(--m2) 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: 0;
}
section#company tr {
    border-block: 1px solid var(--white);
}
section#company :is(th, td) {
    padding: 0.5lh 1ic;
    color: var(--white);
}
@media screen and (min-width: 768px) {
   
}


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

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