/* ================================================

FRONT-PAGE

================================================ */

/* ········ 見出し ········ */

.top-heading02 {
    line-height: 1.5;
    font-size: var(--fontSize-2xl);
    font-weight: var(--fontWeight-medium);
    margin-bottom: var(--space-md);
}

/* ----------------------------------------
FRONT-PAGE FV
---------------------------------------- */
/* FV 1枚画像版 */
.fv {
    width: 100%;
    height: 100vh;
    min-height: 500px;
    position: relative;
    overflow: hidden;
}

.fv__image {
    width: 100%;
    height: 100%;
    opacity: 0;
    /* fade用初期状態 */
}

.fv__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom 8% right 50%;
    display: block;
    transform: scale(1);
    transition: transform 7s ease 0.3s;
    /* ★ 1秒遅延追加 */
}

/* ローディング完了後のアニメーション */
.fv__image.animated img {
    transform: scale(1.1);
}

/* レスポンシブ */
@media (max-width: 768px) {
    .fv {
        aspect-ratio: 20/27;
        height: auto;
        min-height: 520px;
    }
}

/* ----------------------------------------
TOP-MESSAGE
---------------------------------------- */
.top-message {
    padding: clamp(40px, 6.54vw, 160px) var(--padding-container);
}

.top-message__wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(16px, 2.9vw, 90px);

}

.top-message .top-heading02 {
    font-weight: var(--fontWeight-bold);
    font-feature-settings: normal;
    letter-spacing: var(--letterSpacing-20);
    text-align: left;
}

.top-message__text {
    line-height: 2.25;
}

.top-message__illust {
    width: clamp(200px, 36vw, 540px);
    align-self: flex-end;
}

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

@media (width < 768px) {
    .top-message__wrap {
        flex-direction: column;
    }

    .top-message__content .btn-wrap .btn {
        margin-inline: auto;
    }

    .top-message__illust {
        width: clamp(10px, 95%, 400px);
        align-self: flex-end;
    }
}

@media (width < 400px) {

    .top-message .top-heading02 {
        font-size: clamp(16px, 5.5vw, 26px);
    }
}

/* ----------------------------------------
TOP-OFFICE 事業所案内
---------------------------------------- */

.top-office {
    background-color: var(--color-bg-l-pink);
}

.top-office__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5vw;
    margin-bottom: var(--space-3xl);
}

.top-office__content {
    flex: 7;
    max-width: 650px;
}

.top-office__illust {
    flex: 3;
    min-width: 240px;
}

.top-office__wrap {
    background-color: #fff;
    /* border-radius: max(3.3cqi,20px); */
    border-radius: var(--border-radius-lg);
    padding: var(--space-3xl);

    ul {
        display: grid;
        /* 240px以下でカラム落ち */
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-2xl) var(--space-lg);

        li .top-office__img img {
            transition: all 0.3s ease-in-out;
        }

        /* liをhoverした時のスタイル */
        li:hover .top-office__img img {
            opacity: 0.8;
            transition: all 0.3s ease-in-out;
        }
    }

    li {
        container-type: inline-size;
        container-name: office-card;
    }

    .top-office__img {
        /* border-radius: min(8.2cqi,20px); */
        border-radius: var(--border-radius-sm);

        aspect-ratio: 240/194;
        overflow: hidden;
        margin-bottom: 1em;

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

    .top-office__name-hiuchiya {
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.25em;
    }

    .top-office__name-hiuchiya::after {
        content: "";
        background: url(../../img/common/icon_blank.svg) no-repeat center center;
        color: currentColor;
        width: 1em;
        height: 1em;
    }

    p {
        line-height: 1.5;
    }
}

@media (width < 768px) {
    .top-office__wrap ul {
        grid-template-columns: 1fr 1fr;
    }

    .top-office__head {
        flex-direction: column;
    }

    .top-office__content {
        flex: unset;
    }

    .top-office__illust {
        flex: unset;
        width: clamp(200px, 75%, 300px);
        align-self: flex-end;
    }
}

@media (width < 580px) {
    .top-office__wrap {
        padding: 5vw 5vw calc(5vw + 1em);
    }

    .top-office__wrap ul {
        grid-template-columns: 1fr;
    }

}

/* ----------------------------------------
TOP-JOURNEY これまでの歩み
---------------------------------------- */
.top-journey__inner {
    display: flex;
    gap: var(--space-3xl);
    /* max-width: 820px; */
}

.top-journey {
    .top-heading02 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        white-space: nowrap;
        gap: clamp(1em, 9vw, 120px);
    }

    .top-heading02::after {
        content: "";
        display: block;
        background: url(../../img/common/illust_4.webp) no-repeat center / contain;
        width: 5em;
        aspect-ratio: 938 / 1145;
    }

    .btn {
        margin-inline: auto;
    }


    .top-journey__img {
        flex: 1;
        margin-bottom: var(--space-lg);
        aspect-ratio: 930/540;
        /* border-radius: 3cqi; */
        border-radius: var(--border-radius-lg);
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: bottom center;
        }
    }

    @media (width < 768px) {
        .top-journey__inner {
            flex-direction: column;
        }


        .top-heading02 {
            margin-bottom: 0;
            align-items: flex-end;
        }

    }
}


/* ----------------------------------------
TOP-NEWS
---------------------------------------- */

.top-news__inner {
    display: flex;
    column-gap: var(--space-9xl);
}

.top-news__wrap {
    flex: 1;
}

.top-news__wrap li {
    display: flex;
    flex-direction: column;
    background-image: radial-gradient(circle, #000000 1px, transparent 1px);
    background-position: left top;
    background-repeat: repeat-x;
    background-size: 8px 4px;
    /* 横8px（間隔）、縦4px（高さ） */
    gap: 1em;
}

.top-news__wrap li:last-of-type {
    background-image:
        radial-gradient(circle, #000000 1px, transparent 1px),
        radial-gradient(circle, #000000 1px, transparent 1px);
    background-position:
        left top,
        left bottom;
    background-repeat: repeat-x, repeat-x;
    background-size: 8px 4px, 8px 4px;
}

.top-news__wrap li a {
    display: block;
    padding: 1.5em 0;
    text-decoration: none;
    color: inherit;
}

.top-news__wrap .btn-wrap .btn {
    margin-inline: auto;
}

.top-news__head {
    display: flex;
    align-items: center;
    margin-bottom: 0.5em;
}

.top-news__head .btn-category {
    border: 1px solid var(--category-color);
    color: var(--category-color);
    pointer-events: none;
    font-size: var(--fontSize-sm);
}

.top-news__head p {
    margin-right: 1em;
}

.top-news__btn {
    width: clamp(174px, 16vw, 194px);
}

@media (width < 768px) {
    .top-news__inner {
        flex-direction: column;
    }
}

/* ----------------------------------------
TOP-NOTE
---------------------------------------- */
.top-note {
    background-color: var(--color-bg-l-pink);

    h2 {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1em;
        margin-bottom: var(--space-xl);
    }

    h2::before {
        content: "";
        background-image: url(../../img/page/top/illust_note.webp);
        background-size: contain;
        background-repeat: no-repeat;
        width: 4.5em;
        height: 3em;
        display: block;
    }

    .top-note__cards {
        display: grid;
        /* 240px以下でカラム落ち */
        grid-template-columns: repeat(3, 1fr);
        column-gap: clamp(16px, 2.9vw, 32px);
    }

    .top-note__card {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        background-color: #fff;
        padding-bottom: 1em;
        margin-bottom: clamp(16px, 4.8vw, 43px);

        /* &:last-of-type{
            margin-bottom: 0;
        } */

        .top-note__img {
            margin-bottom: 1em;
            aspect-ratio: 252/180;
            overflow: hidden;

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

        .note-thumbnail {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
        }

        .top-note__date {}

        p {
            padding-inline: 1em;
        }
    }

    .top-note__card:hover .note-thumbnail {
        opacity: 0.8;
        transition: all 0.3s ease-in-out;
    }

    .btn-wrap {
        margin-top: 0;
        text-align: center;
    }

    @media (width < 768px) {
        .top-note__cards {
            grid-template-columns: 1fr;
        }
    }
}

/* ----------------------------------------
TOP-ACCESS
---------------------------------------- */
.top-access__inner {
    align-items: flex-end;
    gap: var(--space-xl);
    container-type: inline-size;
    container-name: content;
}

.top-access__map {
    flex: 6;
    /* border-radius: clamp(8px, 3.23cqi, 30px); */
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    aspect-ratio: 760/480;

    iframe {
        width: 100%;
        height: 100%;
        vertical-align: bottom;
    }
}

.top-access__content {
    flex: 4;

    h2 {
        position: relative;
    }

    h2::after {
        content: "";
        background-image: url(../../img/page/top/illust_car.webp);
        background-size: contain;
        background-repeat: no-repeat;
        width: 4.5em;
        height: 3em;
        display: block;
        position: absolute;
        top: -190%;
        left: 36%;
    }
}

@media (width < 768px) {

    .top-access__content h2::after {
        top: 0%;
        left: 70%;
    }
}