body {
    width: 90%;
    max-height: 1024px;
    margin: 0 auto;
    background-color: #ffd;
    line-height: 1.8;
}

a:hover {
    opacity: .8;
    border-bottom: 1px solid #333;
    padding-bottom: .3rem;
    display: inline;
}

a.this-page {
    padding-bottom: 2px;
    border-bottom: 2px solid #ff7f50cc;
}

header {
    width: 100%;
    padding: 2rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: #fcfcf0;
    box-shadow: .5rem 0 .3rem #3336;
}

/*  スマホ用メニューボタンを消す*/
#side-menu-toggle {
    display: none;
}

label.toggle-switch {
    display: none;
    border: 1px solid #3336;
    padding: .8em .5em;
    border-radius: 0.5rem;
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 30;
    background: #fff7;
    cursor: pointer;
}

.header-sec {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.header-sec h1 {
    margin: 1rem;
    font-size: 3.2rem;
}

.header-sec h1 span {
    font-size: 60%;
    margin-right: .25em;
}

nav.header-nav-1st ul,
nav.header-nav-2nd ul {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

nav.header-nav-1st ul {
    justify-content: center;
}

nav.header-nav-2nd ul {
    margin-bottom: .5rem;
    justify-content: end;
}

nav.header-nav-1st {
    width: 100%;
    margin: 4rem auto 1rem;
}

nav.header-nav-2nd {
    width: 50%;
    position: absolute;
    top: 0;
    right: 0;
}

nav.header-nav-2nd p {
    font-size: 90%;
    text-align: right;
}

nav.header-nav-2nd li:first-child {
    position: relative;
}

nav.header-nav-2nd li:first-child a:before {
    content: url(./img/phone_in_talk_24dp_5F6368_FILL0_wght400_GRAD0_opsz24.svg);
    width: 1em;
    height: 1em;
    position: absolute;
    left: -1.75em;
    top: .25em;
}


main {
    padding: 3rem 3rem 6rem;
    margin-top: 20rem;

}

main>article {
    width: 90%;
    max-width: 1200px;
    padding: 3rem;
    margin: 0 auto;
}

/* top */
.top-message {
    text-align: center;
    margin: 3rem auto;
    width: fit-content;
}

.top-message h2 {
    margin: 2rem 0;
    font-size: 3rem;
}

.top-message p {
    font-size: 1.8rem;
}

article h2.page-title {
    /* width: 80%; */
    margin: 3rem auto;
    padding: .5rem;
    border-bottom: 1px dotted #333;
}

section.news {
    margin: 0 auto;
    width: 60%;
    padding: 2rem;
    background-color: white;
    border-radius: 8px;
    border: 1px solid #ccc;
    box-shadow: 0 0 3px #3333;
}

section.news ul {
    list-style-type: disc;
    padding-left: 1em;
}

section .news-date {
    text-align: right;
}

section .news-txt {
    margin: 1rem;
}

footer {
    width: 100%;
    position: absolute;
    left: 0;
    padding: 2rem;
    background-color: #fcfcf0;
}

.footer-1st,
.footer-2nd,
.footer-copyright {
    width: 90%;
    max-width: 1024px;
    margin: 0 auto;
}

.footer-1st ul,
.footer-2nd ul {
    margin: 0 auto 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 65%;
}

.footer-copyright {
    margin: 6rem auto 0;
    text-align: center;
}

/* 新築 */
.page-title {
    font-size: 3rem;
}

.page-message {
    font-size: 2rem;
    margin: 3rem 0;
    text-align: center;
}

section.box {
    margin: 0 auto 6rem;
    width: 95%;
    padding: 1rem 2rem 2rem;
    background-color: white;
    border-radius: 8px;
    border: 1px solid #ccc;
    box-shadow: 0 0 3px #3333;
    position: relative;
}

section.box::after {
    /* イメージのfloat を解除 */
    content: "";
    display: block;
    clear: both;
}

.box-title {
    margin-bottom: .75rem;
    font-size: 2.4rem;
    border-bottom: 1px solid #ccc;
}

.box-img {
    margin: 0 0 1rem 1rem;
    width: 300px;
    height: 225px;
    object-fit: cover;
    float: right;
    border: 2px solid #ccc;
}

.box-txt::after {
    content: "";
    display: block;
    clear: both;
}

.box-title_h4 {
    margin: 2rem 0 .5rem;
}

.box-list {
    padding-left: 2rem;
    list-style-type: disc;
}

.box-btn a {
    background-color: #ff7f50cc;
    padding: 1rem 2rem;
    border-radius: 1rem;
    color: white;
    position: absolute;
    bottom: 2rem;
    right: 2rem;
}

/* maintenance */
.box-dl {
    padding: 0 .5rem;
}

.box-dl dt {
    margin: 0 0 .5rem;
    text-indent: .5em;
    background-color: #390;
    color: white;
}

.box-dl dd {
    margin-bottom: 3rem;
}

.maintenance .box-list,
.works .box-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4rem 1rem;
}

.chips_li {
    width: 30%;
    height: auto;
    list-style-type: none;

}

.chips_li img {
    width: 100%;
}

.chips_li h4 {
    text-align: center;
}

/* works */
.process .box {
    margin-bottom: 8rem;
    position: relative;
}

.process .box:before {
    content: "Next";
    color: white;
    position: absolute;
    bottom: -2em;
    left: calc(50% - 2em);
    background-color: #f58e40;
    padding: 0 1em;
    z-index: 2;
}

.process .box:after {
    position: absolute;
    bottom: -55px;
    left: calc(50% - 50.25px);
    display: inline-block;
    width: 105px;
    height: 50px;
    background: #f58e40;
    clip-path: polygon(0 36.4%, 18.6% 36.4%, 18.6% 0, 81.4% 0, 81.4% 36.4%, 100% 36.4%, 50% 100%);
}

.process .box:nth-of-type(n) h3::before {
    font-size: 80%;
    margin-right: 1em;
    color: #f58e40;
}

.process .box:nth-of-type(1) h3::before {
    content: "Step.1";
}

.process .box:nth-of-type(2) h3::before {
    content: "Step.2";
}

.process .box:nth-of-type(3) h3::before {
    content: "Step.3";
}

.process .box:nth-of-type(4) h3::before {
    content: "Step.4";
}

.process .box:nth-of-type(5) h3::before {
    content: "Step.5";
}

.process .box:nth-of-type(4) h3::before {
    content: "Step.4";
}

.process .box:nth-of-type(5) h3::before {
    content: "Step.5";
}

.process .box:nth-of-type(6) h3::before {
    content: "Step.6";
}

.process .box:nth-of-type(7) h3::before {
    content: "Step.7";
}

.process .box:nth-of-type(8) h3::before {
    content: "Step.8";
}

.process .box:nth-of-type(9) h3::before {
    content: "Step.9";
}

.process .box:nth-of-type(10) h3::before {
    content: "Step.10";
}

.process .box:nth-of-type(11) h3::before {
    content: "Step.11";
}

.process .box:last-child::before,
.process .box:last-child::after {
    content: none;
}

/* だから安心 */
/* 会社案内 */
.about table {
    width: 100%;
    border-collapse: collapse;
}

.about th,
.about td {
    border: 1px solid #999;
    padding: 1rem;
}

/* お問い合わせ */
table.inquiry {
    width: 80%;
    margin: 0 auto;
}

table.inquiry th,
table.inquiry td {
    padding: 1rem;
    border-bottom: 1px dashed #ccc;
}

table.inquiry th {
    width: 10em;
    text-align: right;
    padding: 1rem 1em;
}

td.inquiry-chbox,
td.inquiry-radio {
    display: flex;
    flex-wrap: wrap;
}

td.inquiry-chbox label,
td.inquiry-radio label {
    width: 33%;
}

td.inquiry-chbox label input[type="checkbox"],
td.inquiry-radio label input[type="radio"] {
    margin-right: .5em;
}

td.inquiry-chbox label:hover,
td.inquiry-radio label:hover {
    cursor: pointer;
}

table.inquiry input[type="text"],
table.inquiry input[type="email"],
table.inquiry input[type="tel"],
table.inquiry textarea {
    width: 80%;
    padding: .5rem;
    font-size: 1.6rem;
}

table.inquiry textarea {
    height: 10em;
}

p.submit-btn {
    text-align: center;
}

p.submit-btn input[type="submit"] {
    width: 10em;
    margin: 1em 0;
    padding: .5em;
    border: 1px solid #3337;
    border-radius: .8rem;
    cursor: pointer;
    transition: all .5s;
}

p.submit-btn input[type="submit"]:hover {
    background-color: #f58e4077;
    border-color: #f58e40;
}

/* 送信完了ページ */
main#thanks .box p {
    margin: 3em 0;
    text-align: center;
}



/* smart phone */
/* 画面サイズ 600px 未満 */
@media screen and (max-width:1200px) {
    body {
        position: relative;
    }

    header {
        display: block;
        height: 14rem;
    }

    .header-sec {
        position: initial;
    }

    .header-sec h1 a {
        display: flex;
        flex-direction: column;
        width: initial;
        text-align: center;
    }

    nav.header-nav-2nd {
        display: none;
    }

    nav.header-nav-1st ul, nav.header-nav-2nd ul {
        gap: 1rem;
    }

    nav.header-nav-1st ul li,
    nav.header-nav-2nd ul li {
        width: 100%;
        text-align: center;
        border-bottom: dashed 1px #999;
    }

    /* nav.header-nav-1st ul li a,
    nav.header-nav-2nd ul li a {
        font-size: 3vw;
    } */

    label.toggle-switch {
        display: block;
    }

    input[type=checkbox]#side-menu-toggle {
        display: none;
    }

    #side-menu-toggle:not(:checked)~.header-nav-1st {
        opacity: 0;
        margin-top: -23em;
        /* display: none; */
    }

    #side-menu-toggle:has(checked)~.header-nav-1st {
        opacity: 1;
        margin-top: 0;
        /* display: block; */
    }

    nav.header-nav-1st {
        /* margin: 2rem auto 1rem; */
        width: 100vw;
        margin: 2rem 0 1rem calc(-5% - 25px);
        transition: all .3s ease;
        z-index: 15;
        background-color: #fff;
    }

    main {
        width: 100%;
        padding: 0;

    }

    main>article {
        width: 100%;
        padding: 0;
    }

    article h2.page-title {
        text-align: center;
    }

    section.news {
        width: 100%;
        padding: 3rem;
        margin: 0 auto;
    }

    .box-list {
        padding-left: 6rem;
    }

    .box-btn a {
        position: initial;
        display: block;
        text-align: center;
        font-size: 2rem;
    }

    /* maintenance */
    .maintenance .box-list {
        padding: 0;
    }

    .chips_li {
        width: 100%;
        padding-bottom: 3rem;
        margin-bottom: 6rem;
        border-bottom: 1px dashed #000;
    }

    .chips_li:last-child {
        border: none;
    }

    .chips_li h4 {
        font-size: 4rem;
    }

    .chips_li p {
        text-align: center;
        font-size: 4rem;
    }

    .process .box {
        margin-bottom: 10rem;
    }

    /* .process .box:before {
        font-size: 3rem;
        left: calc(50% - 3.25em);
        bottom: -3rem;
        width: 100px;
        text-align: center;
    }
    .process .box:after{
        width:30%;
        left:33%;
    } */
    .process .box:after {
        left: calc(50% - 15%);
        width: 30%;
    }

    .process .box:before {
        bottom: -1.1em;
        left: calc(50% - 2.7em);
        padding: 0 1.6em;
        font-size: 3rem;
    }

    /* footer */
    footer {
        width: 100vw;
        left: -5%;
        padding: 0;
    }

    .footer-1st {
        display: none;
    }

    .footer-copyright {
        margin: 1em auto;
        text-align: center;
    }
}