@charset "utf-8";

/* wd.css のパソコン用レイアウトを保ち、900px以下で組み替える。 */
.mobileNavigation,
.mobilePlanArt,
.planPriceText,
.serviceCardTitle,
.serviceCardPrice {
    display: none;
}

.serviceCards {
    display: contents;
}

/* 上部SVG、中央の説明文、下部SVGを一続きの枠にする。 */
.homeServices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

#homeLeftDiv,
#homeCenterDiv,
#homeRightDiv {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    float: none;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    background: #ffffdf;
    border: 4px solid #95c800;
    border-radius: 14px;
    box-shadow: inset 0 0 0 2px #fff;
    overflow: hidden;
}

#containerDiv .homeServices .homeStepTop {
    display: block;
    width: 100%;
    height: 154px;
    border: 0;
}

#containerDiv .homeServices .homeStepBottom {
    display: block;
    width: 100%;
    height: 48px;
    border: 0;
}

.homeServices > div > a,
.homeServices > div > p:last-child,
.homeServices > div > p:last-child a {
    display: block;
    width: 100%;
    line-height: 0;
}

.homeServices .home3DivSentence {
    flex: 1;
    height: auto;
    margin: 8px 12px 12px;
    font-size: 14px;
    line-height: 1.7;
}

/* フォーム部品のsize指定やMailFormProの動的な幅指定にも対応する。 */
#mailformpro input:not([type="hidden"]),
#mailformpro textarea,
#mailformpro select {
    box-sizing: border-box;
    max-width: 100%;
}

@media screen and (max-width: 900px) {
    body.wd {
        background-image: none;
        overflow-x: visible;
        line-height: 1.7;
    }

    #containerDiv,
    #headerDiv,
    #bodyDiv {
        width: 100%;
    }

    #containerDiv img {
        max-width: 100%;
        height: auto;
    }

    #containerDiv a {
        overflow-wrap: anywhere;
    }

    #titleTop {
        box-sizing: border-box;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: calc(100% * 110 / 900 + 8px) 16px 12px;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center top;
    }

    #titleTop h1,
    #titleTop h1[id] {
        float: none;
        padding: 0;
        font-size: 16px;
        font-weight: bold;
        line-height: 1.6;
    }

    #titleTop p {
        padding-top: 4px;
        font-size: 13px;
        line-height: 1.6;
    }

    .mobileNavigation {
        display: block;
        margin: 0 16px 12px;
        border: 1px solid #0085b9;
        border-radius: 4px;
        background: #fff;
    }

    .mobileNavigation summary {
        box-sizing: border-box;
        min-height: 48px;
        padding: 10px 16px;
        color: #004d73;
        font-weight: bold;
        cursor: pointer;
    }

    .mobileNavigation nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 8px;
        border-top: 1px solid #b7dce9;
    }

    .mobileNavigation nav a {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        min-height: 48px;
        padding: 10px 12px;
        color: #004d73;
        background: #eef8fc;
        border-radius: 3px;
        font-size: 15px;
        text-decoration: none;
    }

    .mobileNavigation a[aria-current="page"] {
        background: #00648c;
        color: #fff;
    }

    #containerDiv a:focus-visible,
    #containerDiv summary:focus-visible,
    #mailformpro input:focus-visible,
    #mailformpro textarea:focus-visible,
    #mailformpro button:focus-visible {
        outline: 3px solid #005a87;
        outline-offset: 3px;
    }

    #flashDiv {
        width: 100%;
        height: auto;
        line-height: 0;
    }

    #flashDiv img {
        display: block;
        width: 100%;
    }

    #flashShadowDiv {
        height: auto;
        min-height: 50px;
        padding: 0 16px 12px;
    }

    #flashShadowDiv p {
        margin-left: 0;
        padding-top: 18px;
        font-size: 13px;
        line-height: 1.7;
    }

    #mainContentDiv,
    #sidebarDiv,
    #stateMaincontentDiv {
        box-sizing: border-box;
        float: none;
        width: 100%;
        margin: 0;
        padding: 0 24px;
        overflow-wrap: anywhere;
    }

    #categoryDiv {
        display: flow-root;
        height: auto;
        margin-bottom: 32px;
    }

    #categoryImg {
        max-width: 35%;
    }

    #sidebarDiv {
        margin-top: 40px;
        padding-top: 24px;
        border-top: 1px solid #b7dce9;
    }

    #sidebarDivNaviUl {
        display: none;
    }

    .sidebarDivOthorUl {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 16px;
    }

    .sidebarDivOthorUl li {
        margin: 0;
    }

    .sidebarDivOthorUl a {
        display: inline-block;
    }

    .homeServices {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .homeServices .home3DivSentence {
        font-size: 16px;
    }

    .homeSentenceLeftDiv,
    .homeSentenceRightDiv {
        box-sizing: border-box;
        width: 50%;
        padding: 0 16px 0 0;
        margin-top: 32px;
    }

    .homeSentenceRightDiv {
        padding: 0 0 0 16px;
    }

    /* 画像に含まれるサービス名と料金は文字にし、説明は可変高にする。 */
    .serviceCards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
        margin-bottom: 32px;
    }

    #mainContentDiv .serviceCard {
        box-sizing: border-box;
        float: none;
        width: 100%;
        height: auto;
        margin: 0;
        background: #ffffed;
        border: 2px solid #66ccff;
        border-radius: 12px;
        overflow: hidden;
    }

    .serviceDivSentence {
        margin: 12px 16px;
        font-size: 16px;
        line-height: 1.7;
    }

    #planStandardDiv,
    #planBusinessDiv,
    #planEcDiv {
        box-sizing: border-box;
        width: 100%;
        height: auto;
        margin-bottom: 16px;
        background: #fff;
        border: 2px solid #9dc94b;
        border-radius: 8px;
        overflow: hidden;
    }

    #planBusinessDiv { border-color: #ff9933; }
    #planEcDiv { border-color: #66ccff; }

    .mobilePlanArt {
        display: block;
        width: 100%;
    }

    #planStandardDivSentence,
    #planBusinessDivSentence,
    #planEcDivSentence {
        box-sizing: border-box;
        float: none;
        width: 100%;
        margin: 0;
        padding: 16px;
        line-height: 1.7;
    }

    #planStandardDiv ul,
    #planBusinessDivUlLeft,
    #planBusinessDivUlRight,
    #planEcDivUlLeft,
    #planEcDivUlRight {
        float: none;
        margin: 0;
        padding: 0 16px 16px 36px;
        font-size: 16px;
        line-height: 1.7;
    }

    .planPriceImg,
    .planPriceImgBottom {
        display: none;
    }

    .planPriceText {
        display: block;
        margin-bottom: 40px;
        padding: 12px 16px;
        background: #f4f9e9;
        border: 1px solid #87b92f;
        border-radius: 6px;
        line-height: 1.8;
        color: #333;
    }

    .planPriceText > span { display: block; }
    .planPriceText strong { font-size: 22px; color: #a02600; white-space: nowrap; }
    .planPriceText small { font-size: 14px; white-space: nowrap; }
    .planPriceText del { margin-right: 8px; }

    .serviceCardTitle {
        display: block;
        padding: 12px 16px;
        font-size: 18px;
        line-height: 1.6;
        color: #555;
        border-bottom: 2px solid #ff9933;
    }

    .serviceCardPrice {
        display: block;
        margin: 12px 16px 16px;
        padding: 4px 12px;
        color: #fff;
        background: #467000;
        border-radius: 4px;
        text-align: right;
    }

    .flowArrowImg {
        display: block;
        margin: 32px auto;
    }

    .sentenceOnlyPL30Div,
    #mainContactForm {
        padding-left: 0;
    }

    #thanksDiv {
        padding-left: 0;
        line-height: 1.8;
    }

    #thanksDiv p { margin-bottom: 24px; }

    #profileSummaryDiv { width: 100%; }

    #profileSummaryDiv dl dt {
        float: none;
        width: auto;
        padding: 16px 0 4px;
        font-weight: bold;
    }

    #profileSummaryDiv dl dd {
        padding: 0 0 16px;
    }

    #sitemapUl { margin-left: 24px; }

    #footerLinkDiv {
        height: auto;
        margin-bottom: 24px;
        padding: 0 16px;
    }

    #footerLinkDiv ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #footerLinkDiv ul br { display: none; }
    #footerLinkDiv ul li { display: block; margin: 0; }

    #footerLinkDiv a {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 8px;
        color: #004564;
        background: #e4f6ff;
        font-size: 14px;
    }

    #footerCopyrightDiv {
        height: auto;
        padding: 0 16px 24px;
        color: #004564;
    }

    #footerCopyrightDiv a { color: #004564; }

    #mailformpro dl dt.mfp {
        box-sizing: border-box;
        float: none;
        width: 100%;
        padding: 12px 0 4px;
        text-align: left;
        font-size: 16px;
        font-weight: bold;
    }

    #mailformpro dl dd.mfp {
        padding: 8px 0 16px;
        border-top: 0;
        font-size: 16px;
    }

    #mailformpro input:not([type="hidden"]),
    #mailformpro select {
        min-height: 44px;
        margin-bottom: 8px;
        font-size: 16px;
    }

    #mailformpro input[type="email"],
    #mailformpro input[type="tel"],
    form#mailformpro textarea {
        width: 100% !important;
        font-size: 16px;
    }

    #mailformpro textarea { min-height: 200px; }
    #mailformpro .must { font-size: 12px; }

    #mailformpro .mfp_buttons button,
    #mfp_overlay .mfp_buttons button {
        min-height: 48px;
        margin: 8px;
        font-size: 16px;
    }

    #mfp_overlay,
    #mfp_overlay_inner {
        box-sizing: border-box;
        max-width: 100%;
    }

    #mfp_overlay_inner {
        width: min(640px, calc(100vw - 24px)) !important;
        padding: 12px;
    }

    #mfp_confirm_table tr th,
    #mfp_confirm_table tr td {
        display: block;
        box-sizing: border-box;
        width: 100%;
        white-space: normal;
        font-size: 16px;
    }

    /* 旧来のHTMLサイトマップは専用の表構造を保って折り返す。 */
    #cont {
        box-sizing: border-box;
        width: 100%;
        padding: 0 12px;
    }

    #cont table { table-layout: fixed; width: 100%; }
    #cont .lbullet { display: none; }
    #cont h1 { font-size: 26px; }
    #cont td, #cont th, #cont .lhead { overflow-wrap: anywhere; }
    #cont a { display: inline-block; padding: 10px 0; font-size: 16px; }
    #cont h3 a { float: none; }
}

@media screen and (max-width: 600px) {
    #mainContentDiv,
    #sidebarDiv,
    #stateMaincontentDiv { padding-right: 16px; padding-left: 16px; }

    #categoryImg {
        display: block;
        float: none;
        max-width: 100%;
        margin: 0 auto 16px;
    }

    .homeSentenceLeftDiv,
    .homeSentenceRightDiv {
        float: none;
        width: 100%;
        padding: 0;
    }

    .serviceCards { grid-template-columns: minmax(0, 1fr); }

    #mainContentDiv .mL20,
    #mainContentDiv .mL50,
    #mainContentDiv .mL100 { margin-left: 0; }
}

@media screen and (max-width: 700px) {
    .homeServices { grid-template-columns: minmax(0, 1fr); }
}