:root {
    --color-main: #1769e8;
    --color-black: #152c46;
    --color-muted: #627082;
    --color-white: #fff;
    --color-bg-1: #142e48;
    --color-bg-2: #f6f8fb;
    --color-bg-3: #edf4fe;
    --color-line: #e3e9ef;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 120px;
}


body {
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: var(--font-weight-regular);
    color: var(--color-black);
}




.header__contact:hover {
    background: #0a50bb;
    transform: translateY(-2px);
}


/* トップバー */
.topbar {
    background-color: var(--color-bg-1);
    color: var(--color-white);
    width: 100%;
    padding: 0 36px;
}

.topbar__inner {
    display: flex;
    justify-content: space-between;
    max-width: 1240px;
    margin: auto;
    padding: 8px 0;
    font-size: 12px;
}



/* ヘッダー */
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--color-white);
    width: 100%;
    padding: 0 36px;
    border-bottom: 1px solid #e9edf1;
}

.header__inner {
    display: flex;
    gap: 24px;
    justify-content: space-between;
    align-items: center;
    max-width: 1240px;
    margin: auto;
    padding: 8px 0;
}

.header__logo,
.footer__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.header__logo img,
.footer__logo img {
    display: block;
    width: auto;
    height: 50px;
    object-fit: contain;
}

.header__nav {
    display: flex;
    gap: 20px;
    margin-left: auto;
}

.header__nav-link {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
}

.header__nav-link:hover {
    color: var(--color-main);
}

.header__contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    padding: 14px 20px;
    background: var(--color-main);
    color: #fff;
    border-radius: 8px;
    font-weight: var(--font-weight-semibold);
    transition: background .2s, transform .2s;
}

.header__menu-button {
    display: none;
}


/* ヒーロー */
.hero {
    width: 100%;
    min-height: 580px;
    padding: 0 36px;
    position: relative;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, #f5f5ef 0%, #f5f5efed 33%, #f5f5ef22 90%);
}

.hero--start::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, #142e48 0%, #142e48ed 33%, #142e4822 90%);
}


.hero--start {}

.hero__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 52%;
}

.hero__inner {
    max-width: 1240px;
    margin: auto;
    display: grid;
    gap: 40px;
    padding: 84px 0 120px 0;
}

.sp {
    display: none;
}

.hero__main {
    display: grid;
    gap: 20px;
}

.hero__heading {
    display: grid;
    gap: 20px;
}

.hero__eyebrow {
    font-size: 12px;
    letter-spacing: .18em;
    font-weight: var(--font-weight-bold);
    color: var(--color-main);
}

.hero--start .hero__eyebrow {
    color: var(--color-white);
}

.hero__title {
    letter-spacing: -.03em;
    font-size: clamp(36px, 4.1vw, 56px);
    font-weight: var(--font-weight-extrabold);
}

.hero--start .hero__title {
    color: var(--color-white);
}

.hero__title span {
    color: var(--color-main);
}

.hero--start .hero__span {
    color: var(--color-white);
}

.hero__description {
    line-height: 1.9;
}

.hero--start .hero__description {
    color: var(--color-white);
}

.hero__actions {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    padding: 15px 24px;
    font-weight: var(--font-weight-semibold);
}

.hero__button--primary {
    border-radius: 8px;
    background: var(--color-main);
    color: #fff;
    transition: background .2s, transform .2s;
}

.hero__button--primary:hover {
    background: #0a50bb;
    transform: translateY(-2px);
}

.hero--start .hero__button--primary {
    background: var(--color-white);
    color: var(--color-black);
}

.hero__button--secondary {
    padding: 15px 0;
    border-bottom: 1px solid var(--color-black);
}

.hero__button--secondary:hover {
    color: var(--color-main);
}

.hero__categories {
    display: flex;
    gap: 20px;
}

.hero__category {
    font-size: 12px;
}

.hero--start .hero__category {
    color: var(--color-white);
}


/* 予約・相談フォーム */
.booking {
    position: relative;
    margin-top: -47px;
    z-index: 2;
    padding: 0 36px;
}

.booking__inner {
    margin: auto;
    max-width: 1240px;
}

.booking__form {
    background-color: var(--color-white);
    padding: 26px 30px;
    border: 1px solid #e9edf1;
    border-radius: 8px;
    box-shadow: 0 14px 45px #142e4810;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr auto;
    gap: 20px;
}

.booking__field {
    display: grid;
    gap: 8px;
}

.booking__label {
    font-size: 14px;
    font-weight: var(--font-weight-bold);
}

.booking__select {
    width: 100%;
    min-height: 46px;
    border: 1px solid #dce3ea;
    border-radius: 6px;
    background: #fff;
    color: var(--color-black);
    padding: 9px 12px;
    font-size: 14px;
    background-image: url("image/CaretDown.svg");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
}

.booking__input {
    width: 100%;
    min-height: 46px;
    border: 1px solid #dce3ea;
    border-radius: 6px;
    background: #fff;
    color: var(--color-black);
    padding: 9px 12px;
    font-size: 16px;
}

.booking__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    padding: 15px 24px;
    font-weight: var(--font-weight-semibold);
    border-radius: 8px;
    background: var(--color-main);
    color: #fff;
}

.booking__button:hover {
    background: #0a50bb;
}

.booking__note {
    font-size: 14px;
    text-align: right;
    margin: 10px 0;
}


/* ダイアログ　モーダルUI */
/* ========================================
   Consultation Modal
======================================== */

.consultation-modal {
    width: min(90%, 640px);
    max-height: 90vh;
    padding: 0;
    border: none;
    border-radius: 16px;
    background: #fff;
    color: #333;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.consultation-modal::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

/* modal inner */
.consultation-modal__inner {
    padding: 40px;
}

/* header */
.consultation-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.consultation-modal__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
}

.consultation-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #f3f3f3;
    color: #333;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.consultation-modal__close:hover {
    background: #e8e8e8;
}

/* lead */
.consultation-modal__lead {
    margin: 0 0 24px;
    color: #666;
    font-size: 14px;
    line-height: 1.8;
}

/* consultation note */
.consultation-modal__note {
    padding: 24px;
    border-radius: 12px;
    background: #f7f9fa;
}

.consultation-modal__note-title {
    margin: 0 0 20px;
    font-size: 16px;
    font-weight: 700;
}

.consultation-modal__details {
    margin: 0;
}

.consultation-modal__detail {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #e5e5e5;
}

.consultation-modal__term,
.consultation-modal__description {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.consultation-modal__term {
    color: #666;
}

.consultation-modal__description {
    font-weight: 600;
}

.consultation-modal__note p:not(.consultation-modal__note-title):not(.consultation-modal__request) {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid #e5e5e5;
    font-size: 14px;
    line-height: 1.6;
}

.consultation-modal__note p:not(.consultation-modal__note-title):not(.consultation-modal__request) span {
    font-weight: 600;
}

.consultation-modal__request {
    margin: 20px 0 0;
    color: #555;
    font-size: 14px;
    line-height: 1.8;
}


.service-modal {
    width: min(90%, 640px);
    max-height: 90vh;
    padding: 0;
    border: none;
    border-radius: 16px;
    background: #fff;
    color: #333;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.service-modal::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.service-modal__inner {
    padding: 40px;
}

.service-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.service-modal__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
}

.service-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #f3f3f3;
    color: #333;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.service-modal__close:hover {
    background: #e8e8e8;
}

.service-modal__lead {
    margin: 0 0 24px;
    color: #666;
    font-size: 14px;
    line-height: 1.8;
}

.service-modal__note {
    margin: 0;
    color: #555;
    font-size: 14px;
    line-height: 1.8;
}

.service-modal__button {
    display: block;
    margin-top: 28px;
    padding: 16px 24px;
    border: none;
    border-radius: 8px;
    background: var(--color-main);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.service-modal__button:hover {
    opacity: 0.8;
}


/* actions */

.consultation-modal__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 24px;
}

.consultation-modal__copy,
.consultation-modal__tel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

/* copy button */
.consultation-modal__copy {
    border: none;
    background: #006fbc;
    color: #fff;
}

.consultation-modal__copy:hover {
    background: #005d9d;
}

/* telephone */
.consultation-modal__tel {
    border: 1px solid #006fbc;
    background: #fff;
    color: #006fbc;
}

.consultation-modal__tel:hover {
    background: #f0f8fc;
}

/* copied message */
.consultation-modal__copied {
    margin: 16px 0 0;
    color: #006fbc;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
}

.consultation-modal__copied[hidden] {
    display: none;
}


/* ========================================
   Responsive
======================================== */

@media (max-width: 767px) {

    .consultation-modal {
        width: calc(100% - 32px);
        max-height: calc(100vh - 32px);
        border-radius: 12px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .consultation-modal__inner,
    .service-modal__inner {
        padding: 28px 20px;
    }

    .consultation-modal__header {
        margin-bottom: 20px;
    }

    .consultation-modal__title {
        font-size: 20px;
    }

    .consultation-modal__close {
        width: 36px;
        height: 36px;
        font-size: 24px;
    }

    .consultation-modal__lead {
        font-size: 13px;
    }

    .consultation-modal__note {
        padding: 20px 16px;
    }

    .consultation-modal__note p:not(.consultation-modal__note-title):not(.consultation-modal__request) {
        display: block;
        padding: 10px 0;
    }

    .consultation-modal__note p:not(.consultation-modal__note-title):not(.consultation-modal__request) span {
        display: block;
        margin-top: 4px;
    }

    .consultation-modal__request {
        font-size: 13px;
    }

    .consultation-modal__actions {
        grid-template-columns: 1fr;
    }

    .consultation-modal__copy,
    .consultation-modal__tel {
        min-height: 50px;
    }
}


/* 清掃サービス */
.service {
    padding: 0 36px;
}

.service__inner {
    margin: auto;
    max-width: 1240px;
    padding: 80px 0;
    display: grid;
    gap: 40px;
}

.service__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.service__heading-main {
    display: grid;
    gap: 12px;
}

.service__eyebrow {
    color: var(--color-main);
    font-size: 12px;
    letter-spacing: .18em;
    font-weight: var(--font-weight-bold);
}

.service__title {
    font-size: 36px;
    line-height: 1.4;
    letter-spacing: -.02em;
    font-weight: var(--font-weight-bold);
}

.service__description {}

.service__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.service__item {
    cursor: pointer;
    padding: 0;
    border: 1px solid var(--color-line);
    background: #fff;
    text-align: left;
    border-radius: 10px;
    overflow: hidden;
    transition: background .2s, transform .2s;
}


.service__item:hover {
    transform: translateY(-8px);
}

.service__item:nth-child(1) .service__image {
    background: #edece6;
}

.service__item:nth-child(2) .service__image {
    background: #e7ece7;
}

.service__item:nth-child(3) .service__image {
    background: #e7edf3;
}

.service__item:nth-child(4) .service__image {
    background: #eee7df;
}

.service__image {
    height: 185px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
}

.service__image img {
    width: 76%;
    height: 83%;
    filter: drop-shadow(0 12px 9px #1536501c);
}


.service__content {
    padding: 20px;
}

.service__text {
    display: grid;
    gap: 12px;
}

.service__name {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
}

.service__summary {
    font-size: 14px;
}






/* 法人向けサービス */
.business {
    background-color: var(--color-bg-1);
    color: var(--color-white);
    padding: 0 36px;
}

.business__inner {
    padding: 80px 0;
    max-width: 1240px;
    margin: auto;
    display: grid;
    gap: 40px;
}


.business__heading {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: end;
}

.business__heading-main {
    display: grid;
    gap: 12px;
}

.business__eyebrow {
    color: var(--color-main);
    font-size: 12px;
    letter-spacing: .18em;
    font-weight: var(--font-weight-bold);
}

.business__title {
    font-size: 36px;
    line-height: 1.4;
    letter-spacing: -.02em;
    font-weight: var(--font-weight-bold);
}

.business__intro {
    display: grid;
    gap: 20px;
}

.business__description {
    line-height: 1.9;
}

.business__button {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    padding: 16px 24px;
    font-weight: var(--font-weight-semibold);
    border-radius: 8px;
    background: var(--color-white);
    color: var(--color-bg-1);
    transition: transform .2s;
}

.business__button:hover {
    transform: translateY(-2px);
}

.business__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.business__item {
    cursor: pointer;
    display: grid;
    gap: 40px;
    text-align: left;
    background: #203c58;
    border: 1px solid #476078;
    border-radius: 9px;
    padding: 24px 20px;
    align-content: space-between;
    transition: background .2s, transform .2s;
}

.business__item:hover {
    transform: translateY(-8px);
    background: #294d70;
}

.business__main {
    display: grid;
    gap: 20px;
}

.business__number {
    font-size: 12px;
    letter-spacing: .12em;
}

.business__content {
    display: grid;
    gap: 12px;
}

.business__name {
    font-size: 20px;
    letter-spacing: -.6px;
    font-weight: var(--font-weight-bold);
}

.business__text {
    font-size: 14px;
    line-height: 1.85;
}

.business__link {
    color: #aaceff;
}

.business__inquiry {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 40px;
    background-color: var(--color-white);
    color: var(--color-black);
    border-radius: 12px;
    padding: 36px;
    align-items: start;
}

.business__inquiry-info {
    display: grid;
    gap: 26px;
}

.business__inquiry-heading {
    display: grid;
    gap: 12px;
}

.business__inquiry-eyebrow {
    font-size: 12px;
    color: var(--color-main);
    font-weight: var(--font-weight-bold);
    letter-spacing: .18em;
}

.business__inquiry-title {
    font-size: 26px;
    font-weight: var(--font-weight-bold);
    line-height: 1.5;
    letter-spacing: -1px;
}


.business__inquiry-description {
    line-height: 1.9;
}

.business__phone {
    display: grid;
    gap: 8px;
}

.business__phone-label {
    font-size: 14px;
}

.business__phone-number {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
}

.b2b__form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.b2b__field {
    display: grid;
    gap: 8px;
}

.b2b__label {
    font-size: 14px;
    font-weight: var(--font-weight-bold);
}

.b2b__select {
    width: 100%;
    min-height: 46px;
    border: 1px solid #dce3ea;
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    padding: 9px 12px;
    font-size: 14px;
    background-image: url("image/CaretDown.svg");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
}

.b2b__input {
    width: 100%;
    min-height: 46px;
    border: 1px solid #dce3ea;
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    padding: 9px 12px;
    font-size: 16px;
}

.b2b__field--wide {
    grid-column: 1 / -1;
}

.b2b__optional {}

.b2b__textarea {
    width: 100%;
    min-height: 85px;
    border: 1px solid #dce3ea;
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    padding: 9px 12px;
    font-size: 16px;
}

.b2b__button {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    padding: 15px 24px;
    font-weight: var(--font-weight-semibold);
    border-radius: 8px;
    background: var(--color-main);
    color: #fff;
    transition: background .2s, transform .2s;
}

.b2b__button:hover {
    background: #0a50bb;
}

.b2b__note {
    grid-column: 1 / -1;
    font-size: 12px;
}




/* ケアについて */
.care {
    padding: 0 36px;
    background-color: var(--color-bg-2);
}

.care__inner {
    margin: auto;
    max-width: 1240px;
    padding: 80px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: start;
}

.care__visual {
    display: grid;
    gap: 12px;
}

.care__image img {
    height: 440px;
    width: 100%;
    object-fit: cover;
    object-position: 80% center;
    border-radius: 9px;
}

.care__visual-caption {
    font-size: 12px;
}

.care__content {
    display: grid;
    gap: 40px;
}

.care__heading {
    display: grid;
    gap: 24px;
}

.care__heading-main {
    display: grid;
    gap: 12px;
}

.care__eyebrow {
    color: var(--color-main);
    font-size: 12px;
    letter-spacing: .18em;
    font-weight: var(--font-weight-bold);
}

.care__title {
    font-size: 36px;
    line-height: 1.4;
    letter-spacing: -.02em;
    font-weight: var(--font-weight-bold);
}

.care__description {
    line-height: 1.95;
}

.care__steps {
    display: grid;
}

.care__step {
    display: flex;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-line);
}

.care__step-number {
    color: var(--color-main);
    font-weight: var(--font-weight-bold);
    font-size: 12px;
}

.care__step-content {
    display: grid;
    gap: 8px;
}

.care__step-title {
    font-weight: var(--font-weight-bold);
}

.care__step-description {}




/* ご利用の流れ */
.flow {
    padding: 0 36px;
}

.flow__inner {
    margin: auto;
    max-width: 1240px;
    padding: 80px 0;
    display: grid;
    gap: 40px;
}

.flow__heading {
    display: grid;
    gap: 12px;
}

.flow__eyebrow {
    color: var(--color-main);
    font-size: 12px;
    letter-spacing: .18em;
    font-weight: var(--font-weight-bold);
}

.flow__title {
    font-size: 36px;
    line-height: 1.4;
    letter-spacing: -.02em;
    font-weight: var(--font-weight-bold);
}

.flow__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.flow__step {
    padding: 8px 26px;
    border-left: 1px solid var(--color-line);
    display: grid;
    gap: 26px;
    align-content: start;
}

.flow__step:nth-child(1) {
    border-left: 0;
    padding-left: 0;
}

.flow__step-number {
    font-size: 12px;
    letter-spacing: 2px;
}

.flow__step-content {
    display: grid;
    gap: 20px;
}

.flow__step-title {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
}

.flow__step-description {
    font-size: 14px;
}



/* よくあるご質問 */
.faq {
    background-color: var(--color-bg-2);
    padding: 0 36px;
}

.faq__inner {
    margin: auto;
    max-width: 1240px;
    padding: 80px 0;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    align-items: start;
}

.faq__heading {
    display: grid;
    gap: 20px;
}

.faq__heading-main {
    display: grid;
    gap: 12px;
}

.faq__eyebrow {
    color: var(--color-main);
    font-size: 12px;
    letter-spacing: .18em;
    font-weight: var(--font-weight-bold);
}

.faq__title {
    font-size: 36px;
    line-height: 1.4;
    letter-spacing: -.02em;
    font-weight: var(--font-weight-bold);
}

.faq__description {}

.faq__list {
    display: grid;
}

.faq__item {
    border-bottom: 1px solid var(--color-line);
    padding: 28px 0;
}

.faq__item:nth-child(1) {
    padding-top: 0;
}

.faq__question {
    position: relative;
    padding-right: 40px;
    cursor: pointer;
    list-style: none;
    font-weight: var(--font-weight-bold);
}

.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 300;
}

.faq__item[open] .faq__question::after {
    content: "−";
}

.faq__answer {
    margin-top: 16px;
    line-height: 1.9;
}



/* 清掃のご相談 */
.contact {
    background-color: var(--color-bg-3);
    padding: 0 36px;
}

.contact__inner {
    margin: auto;
    max-width: 1240px;
    padding: 80px 0;
    display: grid;
    gap: 80px;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.contact__heading {
    display: grid;
    gap: 40px;
}

.contact__heading-content {
    display: grid;
    gap: 20px;
}

.contact__heading-main {
    display: grid;
    gap: 12px;
}

.contact__eyebrow {
    color: var(--color-main);
    font-size: 12px;
    letter-spacing: .18em;
    font-weight: var(--font-weight-bold);
}

.contact__title {
    font-size: 36px;
    line-height: 1.4;
    letter-spacing: -.02em;
    font-weight: var(--font-weight-bold);
}

.contact__description {
    line-height: 1.95;
}

.contact__phone {
    display: grid;
    gap: 12px;
}

.contact__phone-number {
    font-size: clamp(26px, 3.1vw, 38px);
    letter-spacing: 0;
    font-weight: var(--font-weight-black);
}

.contact__phone-description {
    font-size: 14px;
}

.contact__content {
    background-color: var(--color-white);
    padding: 32px 32px 54px;
    border-radius: 12px;
    border: 1px solid var(--color-line);
    display: grid;
    gap: 24px;
}

.contact__message {
    display: grid;
    gap: 12px;
}

.contact__message-title {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
}

.contact__message-description {
    line-height: 1.9;
}

.contact__actions {
    display: grid;
    gap: 12px;
}

.contact__buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.contact__button {
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border-radius: 8px;
    font-weight: var(--font-weight-semibold);
    transition: background .2s, transform .2s;
}

.contact__button--primary:hover {
    transform: translateY(-2px);
    background: #0a50bb;
}

.contact__button--secondary:hover {
    transform: translateY(-2px);
}


.contact__button--primary {
    background: var(--color-main);
    color: #fff;
}

.contact__button--secondary {
    border: 1px solid #ccd5df;
}

.contact__note {
    font-size: 12px;
    grid-column: 1 / -1;
}

.contact__form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contact__field {
    display: grid;
    gap: 8px;
}

.contact__label {
    font-size: 14px;
    font-weight: var(--font-weight-bold);
}

.contact__input {
    width: 100%;
    min-height: 46px;
    border: 1px solid #dce3ea;
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    padding: 9px 12px;
    font-size: 16px;
}

.contact__select {
    width: 100%;
    min-height: 46px;
    border: 1px solid #dce3ea;
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    padding: 9px 12px;
    font-size: 14px;
    background-image: url("image/CaretDown.svg");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
}

.contact__field--wide {
    grid-column: 1 / -1;
}

.contact__textarea {
    width: 100%;
    min-height: 85px;
    border: 1px solid #dce3ea;
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    padding: 9px 12px;
    font-size: 14px;
}

.contact__form-button {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    padding: 15px 24px;
    font-weight: var(--font-weight-bold);
    border-radius: 8px;
    background: var(--color-main);
    color: #fff;
    transition: background .2s, transform .2s;
}

.contact__form-button:hover {
    background: #0a50bb;
}

/* フッター */
footer {
    background-color: var(--color-bg-1);
    color: var(--color-white);
    padding: 0 36px;
}

.footer__inner {
    margin: auto;
    max-width: 1240px;
    padding: 50px 0 28px;
}

.footer__main {
    display: flex;
    justify-content: space-between;
}

.footer__company {
    display: grid;
    gap: 24px;
}

.footer__logo {}

.footer__logo span {
    letter-spacing: .03em;
    font-size: 32px;
    font-weight: var(--font-weight-black);
}

.footer__logo p {
    font-size: 10px;
    letter-spacing: .08em;
    margin-top: 8px;
}

.footer__address {
    font-size: 12px;
    line-height: 2;
}

.footer__nav {
    display: flex;
    gap: 24px;
}

.footer__link {
    font-size: 14px;
}

.footer__bottom {
    margin-top: 30px;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #304254;
}

.footer__copyright {
    font-size: 12px;
}

.footer__message {
    font-size: 12px;
}


.fixed__button {
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    background: var(--color-main);
    color: #fff;
    font-weight: var(--font-weight-semibold);
    transition: background .2s, transform .2s;
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 15;
    box-shadow: 0 6px 25px #13315326;
    border-radius: 30px;
}

.fixed__button:hover {
    background: #0a50bb;
    transform: translateY(-2px);
}






.quicklink {
    padding: 0 36px;
}

.quicklink__inner {
    margin: auto;
    max-width: 1240px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--color-line);
}

.quicklink__item {
    padding: 30px;
    text-align: center;
    border-right: 1px solid var(--color-line);
    font-weight: var(--font-weight-semibold);
    transition: background .2s, transform .2s;
}

.quicklink__item:hover {
    background: var(--color-bg-2);
    color: var(--color-main);
}

.quicklink__item:last-child {
    border: 0;
}


/* 始める前に、確かめておきたいこと。 */
.check {
    padding: 0 36px;
}

.check__inner {
    margin: auto;
    max-width: 1240px;
    padding: 80px 0;
    display: grid;
    gap: 40px;
}

.check__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.check__heading-main {
    display: grid;
    gap: 12px;
}

.check__eyebrow {
    color: var(--color-main);
    font-size: 12px;
    letter-spacing: .18em;
    font-weight: var(--font-weight-bold);
}

.check__title {
    font-size: 36px;
    line-height: 1.4;
    letter-spacing: -.02em;
    font-weight: var(--font-weight-bold);
}

.check__description {}

.check__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.check__item {
    border-top: 2px solid #cdd9e8;
    padding: 30px 20px 10px 0;
    display: grid;
    gap: 28px;
}

.check__number {
    font-size: 54px;
    line-height: 1;
    color: #dae3ed;
    letter-spacing: -2px;
    font-weight: var(--font-weight-black);
}

.check__content {
    display: grid;
    gap: 12px;
}

.check__item-title {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
}

.check__item-description {
    font-size: 14px;
    line-height: 1.9;
}

.check__link {
    color: var(--color-main);
}





/* 技術を学ぶことから、現場で必要な準備まで。 */

.training {
    padding: 0 36px;
    background-color: var(--color-bg-2);
}

.training__inner {
    margin: auto;
    max-width: 1240px;
    padding: 80px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.training__main {
    display: grid;
    gap: 40px;
}

.training__heading {
    display: grid;
    gap: 26px;
}

.training__heading-main {
    display: grid;
    gap: 12px;
}

.training__eyebrow {
    color: var(--color-main);
    font-size: 12px;
    letter-spacing: .18em;
    font-weight: var(--font-weight-bold);
}

.training__title {
    font-size: 36px;
    line-height: 1.4;
    letter-spacing: -.02em;
    font-weight: var(--font-weight-bold);
}

.training__description {
    line-height: 1.95;
}

.training__content {
    display: grid;
    gap: 20px;
}

.training__tabs {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid var(--color-line);
    overflow: auto;
}

.training__tab {
    border: 0;
    background: none;
    white-space: nowrap;
    padding: 12px 4px;
    font-size: 15px;
    color: var(--muted);
    border-bottom: 3px solid transparent;
}

.training__panels {}

.training__panel {
    display: none;
}

.training__panel-title {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
}

.training__panel.is-active {
    display: block;
    display: grid;
    gap: 12px;
}

.training__tab.is-active {
    color: var(--color-main);
    border-color: var(--color-main);
    font-weight: var(--font-weight-bold);
}

.training__panel-description {}

.training__checklist {
    background-color: var(--color-bg-3);
    min-height: 370px;
    padding: 36px;
    border-radius: 12px;
    display: grid;
}

.training__checklist-eyebrow {
    font-size: 12px;
    letter-spacing: 3px;
    color: var(--color-main);
    margin-bottom: 30px;
}

.training__checklist-content {}

.training__checklist-item {
    display: flex;
    gap: 22px;
    align-items: start;
    padding: 20px 0;
    border-bottom: 1px solid #ccd8e5;
}

.training__checklist-number {
    flex-shrink: 0;
    font-size: 28px;
    color: #7390ae;
}

.training__checklist-body {
    display: grid;
    gap: 12px;
}

.training__checklist-title {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
}

.training__checklist-description {
    font-size: 14px;
}




/* 製品紹介 */
.equipment {
    padding: 0 36px;
}

.equipment__inner {
    margin: auto;
    max-width: 1240px;
    padding: 80px 0;
    display: grid;
    gap: 40px;
}

.equipment__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.equipment__heading-main {
    display: grid;
    gap: 12px;
}

.equipment__eyebrow {
    color: var(--color-main);
    font-size: 12px;
    letter-spacing: .18em;
    font-weight: var(--font-weight-bold);
}

.equipment__title {
    font-size: 36px;
    line-height: 1.4;
    letter-spacing: -.02em;
    font-weight: var(--font-weight-bold);
}

.equipment__description {}

.equipment__content {
    display: grid;
    gap: 16px;
}

.equipment__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.equipment__item {
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 28px;
    background: #fff;
    display: grid;
    gap: 24px;
}

.equipment__number {
    font-size: 32px;
    color: var(--color-main);
}

.equipment__body {
    display: grid;
    gap: 16px;
}

.equipment__name {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
}

.equipment__item-description {
    line-height: 1.7;
}

.equipment__link {
    width: fit-content;
}

.equipment__link:hover {
    color: var(--color-main);
}

.equipment__note {
    font-size: 12px;
}


@media (max-width:900px) {
    .topbar__inner {
        justify-content: flex-end;
    }

    .topbar__message {
        display: none;
    }

    /* ヘッダー */
    .header__inner {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 12px;
    }

    .header__nav {
        padding: 20px 0 12px;
        border-top: 1px solid var(--color-line);
        width: 100%;
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .header__contact {
        grid-column: 2;
        grid-row: 1;
    }


    /* 予約・相談 */
    .booking__form {
        grid-template-columns: 1fr 1fr;
    }

    .booking__field:first-child,
    .booking__button {
        grid-column: 1 / -1;
    }


    /* 清掃サービス */
    .service__title {
        font-size: 32px;
    }


    /* 法人向け清掃 */
    .business__list {
        grid-template-columns: 1fr 1fr;
    }
}


@media(max-width:640px) {

    /* ヘッダー */
    header {
        padding: 0 20px;
    }

    .header__inner {
        display: flex;
        gap: 12px;
    }

    .header__contact {
        margin-left: auto;
    }

    .header__nav {
        display: none;
        position: absolute;
        top: 67px;
        left: 0;
        right: 0;
        z-index: 10;
        flex-direction: column;
        gap: 20px;
        width: auto;
        margin: 0;
        padding: 22px;
        border: 0;
        background: #fff;
        box-shadow: 0 12px 20px #0001;
        text-align: left
    }

    .header__nav.is-open {
        display: flex
    }

    .header__menu-button {
        display: grid;
        gap: 5px;
        align-items: center;
        justify-content: center;
    }

    .header__menu-line {
        width: 20px;
        height: 2px;
        background-color: var(--color-black);
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .header__menu-button.is-active .header__menu-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .header__menu-button.is-active .header__menu-line:nth-child(2) {
        opacity: 0;
    }

    .header__menu-button.is-active .header__menu-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .topbar {
        padding: 0 20px;
    }

    /* ヒーロー */
    .hero {
        padding: 0 20px;
    }

    .hero__image {
        object-position: 67% center;
    }

    .hero::after {
        background: linear-gradient(90deg, #f5f5eff5, #f5f5efba);
    }

    .hero--start::after {
        background: linear-gradient(90deg, #142e48f5, #142e48ba);
    }

    /* 予約・相談 */
    .booking {
        padding: 0 20px;
    }

    .booking__note {
        text-align: left;
    }

    /* 清掃サービス */

    .service {
        padding: 0 20px;
    }

    .service__heading {
        gap: 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .service__list {
        grid-template-columns: 1fr 1fr;
    }

    .service__image {
        height: 128px;
    }

    .service__content {
        padding: 12px;
    }

    /* 法人向けサービス */
    .business {
        padding: 0 20px;
    }

    .business__heading {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .business__inquiry {
        grid-template-columns: 1fr;
        padding: 24px;
        gap: 26px;
    }

    .business__item {
        padding: 20px 16px;
    }

    .business__link {
        font-size: 14px;
    }

    .b2b__form {
        grid-template-columns: 1fr;
    }

    /* ケアについて */
    .care {
        padding: 0 20px;
    }

    .care__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .care__image img {
        height: 300px;
    }

    /* 清掃の流れ */
    .flow {
        padding: 0 20px;
    }

    .flow__steps {
        grid-template-columns: 1fr 1fr;
        gap: 30px 20px;
    }

    .flow__step {
        padding: 0;
        border: 0;
    }


    /* よくあるご質問 */
    .faq {
        padding: 0 20px;
    }

    .faq__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }


    /* 相談 */
    .contact {
        padding: 0 20px;
    }

    .contact__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact__content {
        padding: 24px 24px 46px;
    }

    .contact__buttons {
        flex-direction: column;
    }


    /* フッター */
    footer {
        padding: 0 20px;
    }

    .footer__main {
        flex-direction: column;
        gap: 20px;
    }

    .fixed__button {
        right: 16px;
        bottom: 16px;
    }
}



@media (max-width:640px) {

    .quicklink,
    .check,
    .training,
    .equipment {
        padding: 0 20px;
    }

    .service__title,
    .business__title,
    .care__title,
    .flow__title,
    .faq__title,
    .contact__title,
    .check__title,
    .training__title,
    .equipment__title {
        font-size: 27px;
    }

    .quicklink__item {
        font-size: 14px;
    }

    .check__heading {
        gap: 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .check__list {
        grid-template-columns: 1fr;
    }

    .check__item {
        padding: 25px 0;
        display: grid;
        grid-template-columns: 60px 1fr;
        gap: 8px 20px;
    }

    .check__number {
        grid-row: 1 / 3;
        font-size: 40px;
    }

    .check__link {
        grid-column: 2;
    }

    .training__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .training__checklist {
        padding: 24px;
        min-height: 320px;
    }

    .equipment__heading {
        gap: 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .equipment__list {
        grid-template-columns: 1fr;
    }
}




@media(max-width:480px) {

    .hero__inner {
        gap: 20px;
    }

    .hero__actions {
        gap: 8px;
    }

    .booking__form {
        padding: 16px 20px;
        gap: 12px;
    }

    .contact__form {
        gap: 12px;
    }

    .sp {
        display: block;
    }

    .quicklink__inner {
        grid-template-columns: 1fr;
    }

    .quicklink__item {
        border: 0;
        border-bottom: 1px solid var(--color-line);
        padding: 15px;
    }

    .service__name,
    .business__name,
    .flow__step-title {
        font-size: 16px;
    }

    .check__item-title {
        font-size: 20px;
    }
}