@charset "utf-8";

/* 下層ページをトップと同じ見え方にそろえる。各ページの CSS の後に読む
   2026-11-03 畔栁さん：トップと同じデザインで、スマホはカードを横に送り縦に長くしない */

/* 本文の幅はトップとフッターに合わせる */
.inner,
.sectionNext .inner,
.sectionGallery .inner {
    max-width: calc(var(--wrap) + var(--gut) * 2);
}

/* 見出し。英字はトップと同じ大きさ、和文は細めで大きく */
.sectionTitle {
    margin-bottom: 40px;
}

.sectionTitle .titleEn {
    font-family: var(--en);
    font-size: clamp(38px, 3.6vw, 52px);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: .04em;
}

.sectionTitle .titleJp {
    margin-top: 14px;
    color: var(--fg-2);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: .06em;
}

.respectSub,
.choseTitle,
.outsideNote,
.cadTitle,
.careSub,
.budgetTitle,
.faqItem .itemTitle {
    font-size: clamp(21px, 2vw, 28px);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: .06em;
}

/* トップの工事の種類と同じ灰色の面で、白が続きすぎないようにする */
.sectionChose.isLight,
.sectionGallery {
    background: var(--gray);
}

.faqCare {
    padding: clamp(28px, 3.4vw, 44px);
    background: var(--gray);
}

/* 施工事例の写真の左端を本文にそろえる */
.galleryTrack {
    padding-left: max(var(--gut), calc((100vw - var(--wrap)) / 2));
    scroll-padding-left: max(var(--gut), calc((100vw - var(--wrap)) / 2));
}

/* 本文の引用は小さく控えめに。斜体は和文に使わない */
.detailContent blockquote {
    margin: 20px 0 0;
    padding: 0;
    color: var(--fg-2);
    font-size: 15px;
    line-height: 1.9;
}

.detailContent blockquote p+p {
    margin-top: 2px;
}

.detailContent cite {
    font-size: 13px;
    font-style: normal;
}

/* 問い合わせ。電話の下に写真を置き、質問は1行で読めるようにする */
.telPhoto {
    margin-top: 28px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--r);
}

.telPhoto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.formField {
    grid-template-columns: 176px 1fr;
}

.formRadio {
    grid-template-columns: 1fr auto;
    align-items: center;
}

.formRadio .formFieldLeft {
    padding-top: 0;
    align-self: center;
}

.wpcf7-form textarea {
    height: 190px;
    min-height: 0;
}

.btnSubmit input,
.inputSubmit,
.inputBack {
    min-height: 56px;
    border-radius: var(--r);
}

/* 段と段の空き：白地が続く所は 1440 幅で約140px までに詰める（2026-11-03 畔栁さん「余白の部分が多い」） */
.sectionServiceTop,
.sectionServicePhoto,
.sectionServiceFaq,
.sectionServiceNext,
.sectionServiceColumn,
.sectionAreaMenu,
.sectionArea,
.companyInfoArea,
.companyMessageArea,
.sectionGalleryAll,
.workDetail {
    padding-top: clamp(44px, 4.8vw, 72px);
    padding-bottom: clamp(44px, 4.8vw, 72px);
}

.sectionWork {
    padding-top: clamp(44px, 4.8vw, 72px);
    padding-bottom: clamp(56px, 6vw, 96px);
}

@media (max-width: 900px) {

    /* 工事名の英字は1行に収める */
    .pageTitle.isService .titleEn {
        font-size: clamp(24px, 6.6vw, 30px);
        letter-spacing: 0;
    }

    .telPhoto {
        display: none;
    }

    .formRadio {
        display: grid;
        gap: 2px 16px;
    }

    /* カードは横に送る */
    .flowList,
    .careList,
    .galleryList {
        display: flex;
        gap: 10px;
        margin: 0 calc(var(--gut) * -1);
        padding: 0 var(--gut) 4px;
        overflow-x: auto;
        scroll-padding-left: var(--gut);
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .flowList::-webkit-scrollbar,
    .careList::-webkit-scrollbar,
    .galleryList::-webkit-scrollbar,
    .glList::-webkit-scrollbar,
    .glFilter::-webkit-scrollbar {
        display: none;
    }

    .flowList>li,
    .careList li,
    .careList li+li,
    .galleryList>li,
    .galleryList>li:has(.listChild) {
        flex: 0 0 min(80vw, 320px);
        grid-column: auto;
        margin: 0;
        scroll-snap-align: start;
    }

    .sectionGallery {
        padding: 48px 0;
    }

    /* 施工の流れ */
    .flowList>li {
        padding: 20px 18px 22px;
        border: 0;
        background: var(--gray);
    }

    /* よくある質問の相談の例 */
    .faqCare {
        padding: 24px 0;
        background: none;
    }

    .careList li,
    .careList li+li {
        padding: 18px;
        border: 0;
        background: var(--gray);
    }

    /* 工事の一覧は写真に名前を重ねた2列。トップと同じ形 */
    .serviceAllList,
    .outsideList {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .serviceAllList a,
    .outsideList a {
        position: relative;
        color: #fff;
    }

    .allPhoto,
    .outsideList .outsidePhoto {
        position: relative;
        height: auto;
        aspect-ratio: 16 / 10;
        margin: 0;
    }

    .allPhoto::after,
    .outsideList .outsidePhoto::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(0deg, rgba(18, 20, 24, .76) 0%, rgba(18, 20, 24, 0) 62%);
    }

    .allName,
    .outsideList .outsideName {
        position: absolute;
        left: 10px;
        right: 8px;
        bottom: 8px;
        margin: 0;
        font-size: 12.5px;
        line-height: 1.5;
        word-break: auto-phrase;
    }

    .allLead {
        display: none;
    }

    /* 施工写真は2段で横に送る */
    .glFilter {
        flex-wrap: nowrap;
        margin: 0 calc(var(--gut) * -1) 16px;
        padding: 0 var(--gut);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .glFilter button {
        white-space: nowrap;
    }

    .glList {
        display: grid;
        grid-auto-columns: 44vw;
        grid-auto-flow: column;
        grid-template-rows: repeat(2, 33vw);
        gap: 6px;
        margin: 0 calc(var(--gut) * -1);
        padding: 0 var(--gut);
        overflow-x: auto;
        columns: auto;
        scroll-padding-left: var(--gut);
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .glList>li {
        margin: 0;
        overflow: hidden;
        scroll-snap-align: start;
    }

    .glList img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* よくある質問は分類を切り替えて1分類ずつ見せる */
    .faqBody.isTabs .faqItem {
        display: none;
        margin: 0;
    }

    .faqBody.isTabs .faqItem.isOn {
        display: block;
    }

    .shortCut a.is-on {
        background: var(--ink);
        color: #fff;
    }
}