@charset "utf-8";
/* // ==========================================================================
// トップ
// ========================================================================== */
/** ==========================================================================
* MARK: top-content 共通コンテンツ
* ========================================================================== */
.top-content {
    display: flex;
    flex-direction: column;
}

.top-content__title {
    font-family: var(--font-serif-ja);
    font-weight: 500;
    font-size: 25px;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    padding-bottom: 24px;
    position: relative;
    z-index: 0;
    &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        background-image: linear-gradient(to right, #509a87 0%, #5679a1 30%, #de6c60 90%);
        width: 48px;
        height: 1px;
    }
    @media screen and (min-width: 768px) {
        font-size: 40px;
        padding-bottom: 36px;
    }
}

.top-content__body {
    display: flex;
    flex-direction: column;
    gap: 27px;
    margin-top: 24px;
    @media screen and (min-width: 768px) {
        margin-top: 36px;
    }
}

.top-content__text {
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.08em;
    color: var(--color-text);
    text-indent: 0.08em;
}

.top-content__btn {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    @media screen and (min-width: 768px) {
        justify-content: flex-start;
    }
}

/** ==========================================================================
* MARK: top-visual
* ========================================================================== */
.top-visual {
    img {
        aspect-ratio: 375 / 400;
    }
    @media screen and (min-width: 768px) {
        img {
            aspect-ratio: 1380 / 400;
        }
    }
}

/** ==========================================================================
* MARK: top-notice
* ========================================================================== */
.top-notice {
    padding-top: 32px;
}

.top-notice__inner {
    max-width: 1180px;
    padding-inline: var(--padding-SP);
    margin-inline: auto;
    @media screen and (min-width: 768px) {
        padding-inline: var(--padding-TB);
    }
}

.top-notice__container {
    background-color: var(--color-secondary);
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 20px;
    padding-block: 20px 24px;
    padding-inline: 20px;
    border: 1px solid var(--color-accent-dark);
    @media screen and (min-width: 768px) {
        grid-template-columns: 183px 1fr;
        gap: 32px;
        padding-block: 24px;
        padding-inline: 0 40px;
    }
}

.top-notice__head {
    padding-bottom: 16px;
    font-family: var(--font-serif-ja);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.12em;
    color: var(--color-accent-dark);
    border-bottom: 1px solid var(--color-gray-border-02);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    &::before {
        content: '\f129';
        font-family: var(--font-awesome);
        font-weight: 300;
        font-size: 11px;
        color: var(--color-accent-dark);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        padding-bottom: 2px;
        padding-left: 2px;
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        border: 1px solid var(--color-accent-dark);
    }
    @media screen and (min-width: 768px) {
        height: 100%;
        padding-block: 9px;
        font-size: 20px;
        flex-direction: column;
        border-bottom: none;
        border-right: 1px solid var(--color-gray-border-02);
        &::before {
            font-size: 14px;
        }
    }
}

.top-notice__body {
}

/** ==========================================================================
* MARK: top-annual
* ========================================================================== */
.top-annual {
    padding-top: 32px;
}

.top-annual__inner {
    max-width: 1180px;
    padding-inline: var(--padding-SP);
    margin-inline: auto;
    @media screen and (min-width: 768px) {
        padding-inline: var(--padding-TB);
    }
}

.top-annual__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-block: 24px 48px;
    padding-inline: 24px;
    position: relative;
    z-index: 0;
    text-decoration: none;
    overflow: hidden;
    &::before {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        left: 50%;
        translate: -50% 0;
        bottom: -8px;
        width: 260px;
        height: 270px;
        transform: skewX(-15deg);
        transform-origin: left bottom;
        background: linear-gradient(to bottom, color-mix(in oklch, #42a1da 20%, transparent) 0%, color-mix(in oklch, #42a1da 60%, transparent) 50%, color-mix(in oklch, #42a1da 20%, transparent) 100%);
        filter: blur(50px);
    }
    &::after {
        content: '';
        display: block;
        position: absolute;
        inset: 0;
        z-index: -2;
        background-image: var(--color-gradation-blue);
        transition: opacity var(--transition-duration);
    }
    @media screen and (min-width: 768px) {
        flex-direction: row;
        padding-block: 57px;
        padding-inline: 80px 170px;
        gap: 64px;
        &::before {
            left: 32px;
            translate: 0 0;
        }
    }
}

.top-annual__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    @media screen and (min-width: 768px) {
        gap: 8px;
    }
}

.top-annual__label {
    font-family: var(--font-serif-ja);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.25em;
    color: var(--color-secondary);
    border: 1px solid currentColor;
    padding-block: 2px;
    padding-inline: 24px;
    text-align: center;
    @media screen and (min-width: 768px) {
        font-size: 18px;
        width: 100%;
    }
}

.top-annual__title {
    font-family: var(--font-serif-ja);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: 0.24em;
    text-indent: 0.24em; /* 上のラベルと幅を同じにするため調整 */
    margin-inline: -0.24em; /* テキストのインデント分を相殺 */
    color: var(--color-secondary);
    text-align: center;
    @media screen and (min-width: 768px) {
        font-size: 40px;
        line-height: 1.5;
    }
}

.top-annual__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
    @media screen and (min-width: 768px) {
        gap: 12px;
    }
}

.top-annual__text {
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--color-secondary);
    word-break: keep-all;
    white-space: nowrap;
    text-indent: -3em;
    padding-left: 3em;
    @media screen and (min-width: 768px) {
        font-size: 17px;
        letter-spacing: 0.12em;
    }
}

.top-annual__arrow {
    position: absolute;
    bottom: 8px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px solid color-mix(in oklch, var(--color-secondary) 32%, transparent);
    img {
        width: 20px;
        height: auto;
        aspect-ratio: 10 / 1;
        object-fit: contain;
    }
    @media screen and (min-width: 768px) {
        width: 90px;
        bottom: unset;
        top: 50%;
        right: 40px;
        translate: 0 -50%;
        transition: translate var(--transition-duration);
        img {
            width: 40px;
        }
    }
}

/* MARK: hover */
@media (any-hover: hover) {
    @media screen and (min-width: 768px) {
        .top-annual__container {
            &:hover {
                &::after {
                    opacity: 0.9;
                }
                .top-annual__arrow {
                    translate: 10px -50%;
                }
            }
        }
    }
}

/** ==========================================================================
* MARK: top-about
* ========================================================================== */
.top-about {
    position: relative;
    z-index: 0;
    overflow: hidden;
    @media screen and (min-width: 768px) {
    }
}

.top-about__inner {
    padding-inline: var(--padding-SP);
    margin-inline: auto;
    padding-block: 56px;
    position: relative;
    z-index: 0;
    &::before {
        content: 'About';
        display: block;
        position: absolute;
        z-index: -1;
        right: -16px;
        top: 0;
        font-family: var(--font-serif-en);
        font-weight: 400;
        font-size: 120px;
        line-height: 1;
        letter-spacing: 0.04em;
        color: #e0e6e9;
        writing-mode: vertical-rl;
        translate: 10px 0;
    }
    @media screen and (min-width: 768px) {
        padding-block: 138px 104px;
        padding-inline: 50px;
        max-width: 1260px;
        &::before {
            top: 48px;
            right: -50px;
            font-size: 150px;
            writing-mode: initial;
            translate: 0 0;
        }
    }
}

.top-about__container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    @media screen and (min-width: 768px) {
        grid-template-columns: 596fr 560fr;
        gap: 64px;
        margin-right: -50px;
    }
}

.top-about__content {
    @media screen and (min-width: 768px) {
        padding-left: 40px;
    }
}

.top-about__visual {
    @media screen and (min-width: 768px) {
    }
}

.top-about__img {
    box-shadow: var(--dropshadow);
    &[data-number='01'] {
        width: 55%;
        img {
            aspect-ratio: 290 / 193;
        }
    }
    &[data-number='02'] {
        width: 35%;
        margin-left: auto;
        margin-top: -14.6%;
        img {
            aspect-ratio: 195 / 130;
        }
    }
    &[data-number='03'] {
        width: 90%;
        margin-top: 7%;
        margin-left: 7%;
        img {
            aspect-ratio: 400 / 262;
        }
    }
    @media screen and (min-width: 768px) {
        &[data-number='01'] {
            width: 52%;
            margin-left: 4%;
        }
        &[data-number='02'] {
            width: 35%;
            margin-top: -13.5%;
        }
        &[data-number='03'] {
            width: 71%;
            margin-top: 3.5%;
            margin-left: 0;
        }
    }
}

/** ==========================================================================
* MARK: top-mission
* ========================================================================== */
.top-mission {
    position: relative;
    z-index: 1;
    background-color: var(--color-background-base--lightgray);
    box-shadow: var(--dropshadow);
    overflow: hidden;
    @media screen and (min-width: 768px) {
    }
}

.top-mission__inner {
    padding-inline: var(--padding-SP);
    margin-inline: auto;
    padding-block: 56px;
    position: relative;
    z-index: 0;
    &::before {
        content: 'Mission';
        display: block;
        position: absolute;
        z-index: -1;
        right: -16px;
        top: 0;
        font-family: var(--font-serif-en);
        font-weight: 400;
        font-size: 120px;
        line-height: 1;
        letter-spacing: 0.04em;
        color: #e0e6e9;
        writing-mode: vertical-rl;
        translate: 10px 0;
    }
    @media screen and (min-width: 768px) {
        padding-block: 120px;
        padding-inline: 50px;
        max-width: 1260px;
        &::before {
            top: 40px;
            right: unset;
            left: -60px;
            font-size: 150px;
            writing-mode: initial;
            translate: 0 0;
            color: #edebe8;
        }
    }
}

.top-mission__container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    @media screen and (min-width: 768px) {
        grid-template-columns: 480fr 596fr;
        grid-template-areas: 'visual content';
        gap: 84px;
        > .top-mission__content {
            grid-area: content;
        }
        > .top-mission__visual {
            grid-area: visual;
        }
    }
}

.top-mission__content {
    @media screen and (min-width: 768px) {
    }
}

.top-mission__visual {
    @media screen and (min-width: 768px) {
    }
}

.top-mission__img {
    box-shadow: var(--dropshadow);
    &[data-number='01'] {
        width: 55%;
        img {
            aspect-ratio: 290 / 193;
        }
    }
    &[data-number='02'] {
        width: 35%;
        margin-left: auto;
        margin-top: -14.6%;
        img {
            aspect-ratio: 195 / 130;
        }
    }
    &[data-number='03'] {
        width: 90%;
        margin-top: 7%;
        margin-left: 7%;
        img {
            aspect-ratio: 400 / 262;
        }
    }
    @media screen and (min-width: 768px) {
        &[data-number='01'] {
            width: 52%;
            margin-left: 4%;
        }
        &[data-number='02'] {
            width: 35%;
            margin-top: -13.5%;
        }
        &[data-number='03'] {
            width: 71%;
            margin-top: 3.5%;
            margin-left: 0;
        }
    }
}

/** ==========================================================================
* MARK: top-leadership
* ========================================================================== */
.top-leadership {
    position: relative;
    z-index: 1;
    background: linear-gradient(to bottom, #e8e7e1 0%, #f3f2ee 100%);
    overflow: hidden;
    @media screen and (min-width: 768px) {
    }
}

.top-leadership__inner {
    max-width: 1380px;
    padding-block: 56px;
    padding-inline: var(--padding-SP);
    margin-inline: auto;
    position: relative;
    z-index: 0;
    &::before {
        content: 'Leadership';
        display: block;
        position: absolute;
        z-index: -1;
        right: 0;
        top: 0;
        font-family: var(--font-serif-en);
        font-weight: 400;
        font-size: 120px;
        line-height: 1;
        letter-spacing: 0.04em;
        color: color-mix(in oklch, var(--color-secondary) 56%, transparent);
        writing-mode: vertical-rl;
        translate: 24px 0;
    }
    @media screen and (min-width: 768px) {
        padding-block: 102px 120px;
        padding-inline: 130px;
        &::before {
            font-size: 176px;
        }
    }
}

.top-leadership__head {
    display: flex;
    flex-direction: column;
    gap: 32px;
    @media screen and (min-width: 768px) {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
}

.top-leadership__heading {
    font-family: var(--font-serif-ja);
    font-weight: 500;
    font-size: 25px;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    @media screen and (min-width: 768px) {
        font-size: 40px;
        line-height: 1.2;
    }
}

.top-leadership__text {
    line-height: 1.6;
    letter-spacing: 0.08em;
    color: var(--color-gray-text);
    @media screen and (min-width: 768px) {
    }
}

.top-leadership__container {
    margin-top: 40px;
    display: grid;
    gap: 40px;
    @media screen and (min-width: 768px) {
        margin-top: 56px;
        gap: 64px;
    }
}

.top-leadership__content {
    display: grid;
    gap: 20px;
    &[data-color='red'] {
        --_item-color: var(--color-foreground-sub--red);
    }
    &[data-color='green'] {
        --_item-color: var(--color-foreground-sub--green);
    }
    &[data-color='blue'] {
        --_item-color: var(--color-foreground-sub--blue);
    }
    @media screen and (min-width: 768px) {
        gap: 30px;
    }
}

.top-leadership__label {
    font-weight: 500;
    font-size: 20px;
    line-height: 1.6;
    letter-spacing: 0.1em;
    color: var(--color-gray-text);
    padding-left: 24px;
    position: relative;
    z-index: 0;
    &::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 5px;
        height: 100%;
        background-color: var(--_item-color);
    }
    @media screen and (min-width: 768px) {
    }
}

.top-leadership__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    @media screen and (min-width: 768px) {
        grid-template-columns: repeat(3, 1fr);
        gap: 80px;
    }
}

/** ==========================================================================
* MARK: top-history
* ========================================================================== */
.top-history {
    position: relative;
    z-index: 1;
    background-image: var(--color-gradation-blue);
    overflow: hidden;
    @media screen and (min-width: 768px) {
    }
}

.top-history__inner {
    padding-inline: var(--padding-SP);
    margin-inline: auto;
    padding-block: 56px;
    position: relative;
    z-index: 0;
    &::before {
        content: 'History';
        display: block;
        position: absolute;
        z-index: -1;
        right: 0;
        top: 10px;
        font-family: var(--font-serif-en);
        font-weight: 400;
        font-size: 120px;
        line-height: 1;
        letter-spacing: 0.04em;
        color: color-mix(in oklch, var(--color-secondary) 6%, transparent);
        writing-mode: vertical-rl;
        translate: 24px 0;
    }
    @media screen and (min-width: 768px) {
        padding-block: 104px;
        padding-inline: 170px;
        max-width: 1380px;
        &::before {
            font-size: 176px;
        }
    }
}

.top-history__heading {
    font-family: var(--font-serif-ja);
    font-weight: 500;
    font-size: 25px;
    letter-spacing: 0.08em;
    color: var(--color-secondary);
    @media screen and (min-width: 768px) {
        font-size: 42px;
    }
}

.top-history__container {
    margin-top: 32px;
    @media screen and (min-width: 768px) {
    }
}

.top-history__list {
    background-color: var(--color-secondary);
    @media screen and (min-width: 768px) {
    }
}

.top-history__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-block: 24px;
    padding-inline: 14px;
    &:not(:first-child) {
        border-top: 1px solid var(--color-gray-border);
    }
    @media screen and (min-width: 768px) {
        gap: 32px;
        padding-inline: 40px;
    }
}

.top-history__head {
    width: 88px;
    height: 80px;
    flex-shrink: 0;
    background-color: #98855b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    box-shadow: 4px 4px 0 #e5dbc3;
    @media screen and (min-width: 768px) {
    }
}

.top-history__year {
    font-family: var(--font-serif-ja);
    font-weight: 500;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0.08em;
    color: var(--color-secondary);
    /* 2つ目以降の要素がある場合は1つ目も含め18pxにする */
    &:has(+ .top-history__year),
    &:nth-child(n + 2) {
        font-size: 18px;
    }
    &:not(:first-child) {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 6px;
        &::before {
            content: '';
            display: block;
            width: 1px;
            height: 12px;
            background-color: var(--color-secondary);
        }
    }
    @media screen and (min-width: 768px) {
    }
}

.top-history__content {
    flex-grow: 1;
    display: flex;
    align-items: center;
    @media screen and (min-width: 768px) {
    }
}

.top-history__text {
    font-family: var(--font-serif-ja);
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    @media screen and (min-width: 768px) {
        font-size: 18px;
    }
}

.top-history__btn {
    display: grid;
    place-items: center;
    margin-top: 36px;
    @media screen and (min-width: 768px) {
        margin-top: 56px;
    }
}