/**
 * 追加・上書き用スタイル
 */

/* .button-custon: グラデーション同士は transition できないため、重ね＋opacity でクロスフェード */

/* タイトル */
.title {
    display: flex;
    align-items: center;
}

.subtitle {
    color: var(--primary);
}

/* 仕事体験 */
.work-style__content {
    position: relative;
    max-height: 30rem;
}

.work-style__content img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 30rem;
}

.work-style__button a {
    background: rgba(25, 132, 179, 0.2);
}



.message {
    background: linear-gradient(180deg, #E2F1FF 0%, #FFFFFF 100%);

}

.message__box {
    align-items: center;
}

.message__left {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 768px) {
    .message__left {
        order: 2;
    }

    .message__right {
        order: 1;
    }

    .title {
        flex-wrap: wrap;
    }
}

.to-be__text {
    font-size: 1.6rem;
    line-height: 200%;
}

.to-be__content {
    max-width: 100rem;
    width: 100%;
    margin: 0 auto;
    display: flex;
    gap: 5.6rem;
}

.to-be__left {
    width: 47.8%;
}

.to-be__right {
    width: 52.2%;
}

.to-be__item {
    font-size: 1.6rem;
    align-items: center;
    display: flex;
}

.to-be__heading {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 5.4rem;
    height: 5.4rem;
}

.to-be__item:nth-of-type(1) .to-be__heading {
    color: #82C24A;
    border: 1px solid #82C24A;
    border-radius: 50%;
}

.to-be__item:nth-of-type(2) .to-be__heading {
    color: #15B2DB;
    border: 1px solid #15B2DB;
    border-radius: 50%;
}

.to-be__item:nth-of-type(3) .to-be__heading {
    color: #E42E2B;
    border: 1px solid #E42E2B;
    border-radius: 50%;
}

.to-be__item:nth-of-type(4) .to-be__heading {
    color: #F68B07;
    border: 1px solid #F68B07;
    border-radius: 50%;
}

@media (max-width: 768px) {
    .to-be__content {
        flex-direction: column;
        gap: var(--spacing-4);
    }

    .to-be__left {
        width: 100%;
        max-width: 30rem;
        margin: 0 auto;
    }

    .to-be__right {
        width: 100%;
    }
}

.background-secondary .subtitle {
    color: var(--white);
}

.table__header {
    font-weight: 400;
}

.button.button-custon {
    position: relative;
    isolation: isolate;
    background: transparent;
    transition: color 0.35s ease, border-color 0.35s ease;
}

.button.button-custon::before,
.button.button-custon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
    transition: opacity 0.35s ease;
}

.button.button-custon::before {
    background: var(--button-background02);
    opacity: 1;
}

.button.button-custon::after {
    background: var(--button-hover-background02);
    opacity: 0;
}

.button.button-custon:hover {
    background: transparent;
    border-color: var(--button-hover-background02);
}

.button.button-custon:hover::before {
    opacity: 0;
}

.button.button-custon:hover::after {
    opacity: 1;
}

.button .button-typeA {
    display: flex;
    align-items: center;
}

.button__arrow {
    display: flex;
    align-items: center;
}

.button__arrow svg path {
    stroke: currentColor;
}

.button__line {
    background: currentColor;
    width: 2px;
    height: 2rem;
    display: inline-block;
}

.entry-typeA {
    background-image: url(img/pc/common/sec_entry_bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
}

.entry-typeA .entry__bottom {
    max-width: 90rem;
    margin: 0 auto;
    width: 100%;
}

.entry-typeA .entry__title {
    font-weight: 400;
}

.entry-typeA .entry__top {
    text-align: center;
}

.entry-typeA .button {
    width: 100%;
}

.entry-typeA .button__text {
    width: 100%;
    display: inline-block;
}

.entry-typeA .entry__items {
    justify-content: center;
}

@media screen and (max-width: 768px) {
    .entry-typeA {
        background-image: url(img/sp/common/sec_entry_bg.jpg);
    }
}

.loop {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.loop__content {
    width: fit-content;
    flex-wrap: nowrap;
    animation: loop 80s linear infinite;
}

.loop__items {
    white-space: nowrap;
    flex-wrap: nowrap;
}

.loop__item {
    color: #81C2FF;
    opacity: .4;
}

.scroll__item img {
    display: block;
    width: 100%;
}

@keyframes loop {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.loop-typeB .loop__content {
    animation: loop 30s linear infinite;
}

.loop-typeB .loop__content {
    background: var(--secondary);
}

.loop-typeB .loop__item {
    color: var(--white);
}

/* サンクスページ */
.thanks {
    max-width: 84rem;
    width: 100%;
    margin: 0 auto;
}

.thanks__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--secondary);
}

.thanks__check {
    width: 6rem;
    height: 6rem;
}

.thanks__check-circle,
.thanks__check-mark {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 1.5s ease-in-out;
}

.thanks__check-circle {
    transition-delay: 0s;
}

.thanks__check-mark {
    transition-delay: 0.5s;
}

.thanks__icon.animated .thanks__check-circle {
    stroke-dashoffset: 0;
}

.thanks__icon.animated .thanks__check-mark {
    stroke-dashoffset: 0;
}

.thanks__title {
    color: var(--secondary);
    text-align: center;
    display: flex;
    flex-direction: column;
}

.thanks__subtitle {
    color: var(--text-color);
    display: block;
}

.thanks__text {
    text-align: center;
    line-height: 180%;
}

.privacy__caption {
    display: flex;
    justify-content: center;
    line-height: 180%;
    text-align: center;
}

.thanks__button {
    max-width: 50rem;
    width: 100%;
    margin: 0 auto;
}

.thanks__button .button__line {
    right: 5.5rem;
    position: absolute;
}

.thanks__button a {
    width: 100%;
    display: flex;
    justify-content: space-between;
    color: var(--secondary);
    border-color: var(--secondary);
    background: transparent;
}

.thanks__button a:hover {
    background: var(--secondary);
    color: var(--white);
    border-color: var(--secondary);
}

.thanks__top {
    text-align: center;
}

.thanks__top a {
    display: inline-block;
    background: #00213B;
    color: #ffffff;
    border-radius: 4px;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .thanks__check {
        width: 6rem;
        height: 6rem;
    }
}

/* テーブルのスタイル */
.table__content {
    width: 100%;
    border-collapse: collapse;
}

.table__header {
    width: 25%;
    text-align: left;
    vertical-align: middle;
}

.table__data {
    width: 75%;
    text-align: left;
    vertical-align: middle;
}


/* スマホ対応（768px以下） */
@media screen and (max-width: 768px) {
    .table__item {
        display: flex;
        flex-direction: column;
    }

    .table__header {
        width: 100%;
    }

    .table__data {
        width: 100%;
    }
}


.table-typeA .table__content {
    border: 1px solid #D9D9D9;
}

.table-typeA .table__item {
    border-bottom: 1px solid #D9D9D9;
    transition: background-color 0.3s ease;
}

.table-typeA .table__item:last-child {
    border-bottom: none;
}

.table-typeA .table__header {
    background: var(--primary);
    color: var(--white);
    font-weight: 400;
}


.table__title {
    color: var(--primary);
}

.table__title02 {
    color: var(--secondary);
}

.table-typeB .table__header {
    border-bottom: 2px solid var(--secondary);
}

.table-typeB .table__data {
    border-bottom: 1px solid var(--secondary);
}

.table02 .table__header {
    background: var(--secondary);
}


.table-typeC .table__item:nth-of-type(1) .table__header {
    border-top: 1px solid #D9D9D9;
}

.table-typeC .table__item:nth-of-type(1) .table__data {
    border-top: 1px solid #D9D9D9;
}


.table-typeC .table__header {
    border-bottom: 1px solid #D9D9D9;
    display: block;
}

.table-typeC .table__data {
    border-bottom: 1px solid #D9D9D9;
    display: block;
}

.table-typeC .table__item {
    display: flex;
}



.table-typeD .table__content {
    border: 1px solid #D9D9D9;
}

.table-typeD .table__item {
    border-bottom: 1px dotted #D9D9D9;
    transition: background-color 0.3s ease;
}

.table-typeD .table__item:last-child {
    border-bottom: none;
}

.table-typeE .table__header {
    border-bottom: 2px solid var(--text-color);
}

.table-typeE .table__data {
    border-bottom: 2px solid var(--border-color);
}



/* オプション */
@media screen and (max-width: 768px) {
    .table-sp-nowrap .table__item {
        flex-direction: row;
    }

    .table-sp-nowrap .table__header {
        padding: var(--spacing-2) var(--spacing-2);
        font-size: var(--text-base-sp);
        width: 35%;
    }

    .table-sp-nowrap .table__data {
        padding: var(--spacing-2) var(--spacing-2);
        font-size: var(--text-base-sp);
        width: 65%;
    }
}

.flow-typeA .flow__item {
    border-radius: 10px;
    text-align: center;
    border: 1px solid var(--secondary);
    position: relative;
    background: #fff;
}

.flow-typeA .flow__item:nth-last-of-type(1) {
    background: var(--primary) !important;
    color: var(--primary-text) !important;
}

.flow-typeA .flow__item:nth-last-of-type(1) .flow__title {
    color: #fff !important;
}

.flow-typeA .flow__title {
    line-height: 120%;
    font-weight: 600;
    color: var(--text-color);
}

.flow-typeA .flow__number {
    line-height: 120%;
    color: var(--primary);
}

.flow-typeA .flow__item:nth-last-of-type(1) .flow__number {
    color: #fff !important;
}

.flow-typeA .flow__arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(100%);
    display: flex;
}

.flow-typeA .flow__arrow svg {
    width: 2.4rem;
    height: 3.3rem;
}

.flow-typeA .flow__arrow svg path {
    fill: var(--primary);
}

@media (max-width: 768px) {
    .flow-typeA .flow__arrow {
        position: absolute;
        right: 50%;
        top: auto;
        bottom: -3rem;
        transform: translateY(0%) translateX(50%) rotate(90deg);
    }

    .flow-typeA .flow__arrow svg {
        width: 2.4rem;
        height: 3.3rem;
    }
}

.flow-typeB .flow__items {
    counter-reset: number;
    padding-left: 2.5rem;
}

.flow-typeB .flow__item {
    position: relative;
}

.flow-typeB .flow__item::before {
    position: absolute;
    content: "";
    width: 4px;
    height: 100%;
    background: var(--secondary);
    left: 0;
    bottom: -2.8rem;
}

.flow-typeB .flow__item:nth-last-of-type(1):before {
    display: none;
}

.flow-typeB .flow__title {
    position: relative;
}

.flow-typeB .flow__title::before {
    position: absolute;
    content: counter(number);
    counter-increment: number;
    background: var(--secondary);
    color: var(--secondary-text);
    font-size: var(--heading04);
    letter-spacing: var(--heading04-letter-spacing);
    font-weight: var(--heading04-weight);
    line-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: calc(-1 * var(--spacing-7) - 2.2rem);
    transform: translateY(-50%);
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
}


.flow-typeB .flow__number {
    background: var(--secondary);
    color: var(--secondary-text);
    display: inline-block;
    line-height: normal;
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    .flow-typeB .flow__title::before {
        left: calc(-4.8rem - 3.5rem);
        font-size: var(--heading04-sp);
    }
}

.flow-typeC .flow__content {
    position: relative;
    width: fit-content;
    margin: 0 auto;
}

.flow-typeC .flow__items {
    display: flex;
    align-items: center;
    justify-self: center;
    gap: var(--spacing-2);
}

.flow-typeC .flow__arrow {
    display: flex;
}

.flow-typeC .flow__arrow svg {
    width: 4.9rem;
    height: 1.5rem;
}


.flow-typeC .flow__arrow path {
    fill: var(--secondary);
}

.flow-typeC .flow__title {
    background: #fff;
    border: 2px solid var(--secondary);
    border-radius: 10px;
    text-align: center;
    padding: var(--spacing-2) var(--spacing-4);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: var(--secondary);
    letter-spacing: .5em;
    line-height: 1;
    min-height: 34rem;
    cursor: pointer;
}

.flow-typeC .flow__item.active .flow__title {
    background: var(--secondary);
    color: var(--secondary-text);
}

.flow-typeC .flow__box {
    display: none;
    position: absolute;
    left: 0;
    width: 100%;
}

.flow-typeC .flow__item.active .flow__box {
    display: block;
    animation: flowBoxIn 0.4s ease forwards;
}

@keyframes flowBoxIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media(max-width: 768px) {
    .flow-typeC .flow__content {
        width: 100%;
    }

    .flow-typeC .flow__items {
        flex-direction: column;
        width: 100%;
    }

    .flow-typeC .flow__item {
        width: 100%;
    }

    .flow-typeC .flow__title {
        width: 100%;
        min-height: auto;
        padding: var(--spacing-2) var(--spacing-4);
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        line-height: normal;
        text-align: left;
        text-align: center;
        line-height: var(--heading04-line-height);
        letter-spacing: var(--heading04-letter-spacing);
    }

    .flow-typeC .flow__item .flow__box {
        position: static;
    }

    .flow-typeC .flow__arrow svg {
        transform: rotate(90deg);
        height: 4rem;
        width: 4.2rem;
    }
}

/* 共通 */
.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question {
    cursor: pointer;
    list-style: none;
    position: relative;
    display: flex;
}

.faq__question-text {
    display: block;
    width: 100%;
}

.faq__question-icon {
    display: inline-block;
    margin-right: var(--spacing-3);
}

.faq__answer-icon {
    display: inline-block;
    margin-right: var(--spacing-3);
    color: var(--secondary);
}




.faq-typeA .faq__item {}

.faq-typeA .faq__item[open] .faq__answer {
    border-bottom: 1px solid var(--border-color);
    background: #F3F3F3;
}

.faq-typeB .faq__question {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.faq-typeB .faq__answer {
    border-bottom: 1px solid var(--border-color);
}

/* <details> 開閉と矢印・十字アイコンを同期（main.js の .toggle.active が無くても動く） */
details.faq__item[open]>.faq__question.toggle .toggle-icon-arrow::before {
    transform: translate(-50%, -50%) rotate(-45deg);
}

details.faq__item[open]>.faq__question.toggle .toggle-icon-cross::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.work-style__button a {
    background: rgba(25, 132, 179, 0.4) !important;
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.work-style__button a:hover {
    background: #fff !important;
    color: var(--primary) !important;
    opacity: .8;
}


@media (max-width: 768px) {
    .work-style__button a {
        width: calc(100% - 3rem);
    }

    .work-style__button a .button__line {
        display: none;
    }

    .work-style__button a .button__arrow {
        display: none;
    }

    .work-style__button a {
        background: #fff !important;
        color: var(--primary) !important;
        opacity: .8;
    }
}

.work.work-typeB .work__img {
    position: relative;
}

.work.work-typeB .work__tag {
    background: var(--white);
    color: var(--secondary);
    position: absolute;
    top: 0;
    left: 0;
}

.work.work-typeB .work__title {
    text-align: center;
}

.benefits__title {
    text-align: center;
}

.benefits.benefits-typeB .benefits__item {
    border: 1px solid var(--border-color);
    background: #fff;
    border-radius: 5px;
    place-content: start;
}

.benefits.benefits-typeB .benefits__img {
    max-width: 8.1rem;
    width: 100%;
    max-height: 8rem;
    margin: 0 auto;
}

.career-typeA .career__title {
    background: var(--secondary);
    color: var(--secondary-text);
    color: #fff;
}

.career-typeA .career__text {
    border: 2px solid var(--secondary);
}

.career-typeA .career__arrow {
    display: flex;
    justify-content: center;
}

.career-typeA .career__arrow svg {
    width: 3.2rem;
    height: 1.6rem;
    fill: var(--secondary);
}

.career-typeB .career__items {
    display: flex;
    align-items: end;
}

.career-typeB .career__item {
    width: 25%;
}

.career-typeB .career__title {
    text-align: center;
}

.career__subtitle {
    text-align: center;
}

/* 透明度の変数を定義 */
.career-typeB {
    --career-opacity-1: 20%;
    --career-opacity-2: 40%;
    --career-opacity-3: 60%;
    --career-opacity-4: 80%;
    --career-opacity-5: 100%;
}

.career-typeB .career__item:nth-of-type(1) .career__content {
    background: color-mix(in srgb, var(--secondary) var(--career-opacity-1), transparent);
    height: 15rem;
    color: var(--text-color);
}

.career-typeB .career__item:nth-of-type(2) .career__content {
    background: color-mix(in srgb, var(--secondary) var(--career-opacity-2), transparent);
    height: 20rem;
    color: var(--text-color);
}

.career-typeB .career__item:nth-of-type(3) .career__content {
    background: color-mix(in srgb, var(--secondary) var(--career-opacity-3), transparent);
    height: 25rem;
    color: #fff;
}

.career-typeB .career__item:nth-of-type(4) .career__content {
    background: color-mix(in srgb, var(--secondary) var(--career-opacity-4), transparent);
    height: 30rem;
    color: #fff;
    background: linear-gradient(180deg, #1984B3 0%, #035697 100%);

}

.career-typeB .career__item:nth-of-type(5) .career__content {
    background: color-mix(in srgb, var(--secondary) var(--career-opacity-5), transparent);
    height: 32rem;
    color: #fff;
    background: linear-gradient(180deg, #1984B3 0%, #035697 100%);

}

.career__steps {
    display: flex;
}

.career__step {
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4.8rem;
    clip-path: polygon(0px 0px, calc(100% - 18px) 0px, calc(100% - 0px) calc(50% - -0.5217px), calc(100% - 18px) calc(100% - 0px), 0px calc(100% - 0px), 0px 0px);

}

.career__step.first {
    width: 30rem;
    color: var(--text-color);
    background-color: color-mix(in srgb, var(--secondary) 30%, transparent);
}

.career__step.second {
    width: calc(100% - 30rem);
    background: linear-gradient(90deg, rgba(25, 132, 179, 0.6) 0%, #035697 100%);
    clip-path: none;
}

.career__step.third {
    background: linear-gradient(270deg, #035697 0%, #1984B3 50%, #035697 100%);
    clip-path: none;

}

@media screen and (max-width: 768px) {
    .career-typeB .career__items {
        flex-direction: column;
        align-items: start;
    }

    .career-typeB .career__item {
        height: auto;
        width: 100%;
        display: flex;
        text-align: left;
        flex-direction: row-reverse;
        justify-content: start;
    }

    .career-typeB .career__item:nth-of-type(1) .career__content {
        width: 12rem;
        height: auto;
    }

    .career-typeB .career__item:nth-of-type(2) .career__content {
        width: 15rem;
        height: auto;
    }

    .career-typeB .career__item:nth-of-type(3) .career__content {
        width: 18rem;
        height: auto;
    }

    .career-typeB .career__item:nth-of-type(4) .career__content {
        width: 21rem;
        height: auto;
    }

    .career-typeB .career__item:nth-of-type(5) .career__content {
        width: 24rem;
        height: auto;
    }

    .career-typeB .career__subtitle {
        text-align: left;
    }

    .career-typeB .career__title {
        display: flex;
        align-items: center;
    }

    .career__step.first {
        max-width: 12rem;
    }

    .career__step.second {
        width: calc(100% - 12rem);
    }

    .career__step.third {
        height: 8rem;
    }
}

.career.career-typeC .career__head {
    display: flex;
    align-items: center;
}

.career.career-typeC .career__left {
    max-width: 18rem;
    width: 100%;
}

.career.career-typeC .career__post {
    color: var(--tertiary);
}

.career.career-typeC .career__title {
    color: var(--secondary);
}

.career.career-typeC .career__description {
    background: var(--secondary);
    color: var(--tertiary-text);
    width: fit-content;
}

.career.career-typeC .career__number {
    color: var(--secondary);
}

/* career-typeC：外側＝事例ごとの career__content をスライド。年次は .career__items--static で横並び（非 Splide） */
.career.career-typeC .career__slider--case {
    position: relative;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 5.6rem;
}

.career.career-typeC .career__slider--case .splide__track {
    overflow: hidden;
}

.career.career-typeC .career__slider--case .splide__slide>.career__content {
    min-width: 0;
}

.career.career-typeC .career__slider-nav--case {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
    pointer-events: none;
    z-index: 3;
}

.career.career-typeC .career__slider-nav--case .career__slider-button--case {
    pointer-events: auto;
}

.career.career-typeC .career__content {
    min-width: 0;
}

.career.career-typeC .career__body {
    min-width: 0;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}


section.career.career-typeC {
    background: linear-gradient(180deg, #E2F1FF 0%, #FFFFFF 100%);
    overflow: hidden;

}

@media screen and (max-width: 768px) {
    .career__slider-button svg {
        width: 5rem;
        height: 5rem;
    }

    .career__slider-button svg path {
        width: 2rem;
        height: 5rem;
    }

    .career.career-typeC .career__slider--case {
        padding: 0;
    }

    .career.career-typeC .career__left {
        max-width: 12rem;
    }

    .career.career-typeC .career__body {
        background: transparent;
        border: 0;
        padding: 0;
    }

    .career.career-typeC .career__item {
        background: #fff;
        padding: var(--spacing-3);
    }

    .career.career-typeC .career__item::before {
        display: none;
    }

    .career.career-typeC .career__slider-nav--case {
        top: 65%;
    }

    button#career-case-prev svg {
        position: absolute;
        left: -8%;
    }

    button#career-case-next svg {
        position: absolute;
        right: -8%;
    }


}

.career.career-typeC .career__item {
    position: relative;
}

.career.career-typeC .career__item::before {
    position: absolute;
    content: "";
    width: 1px;
    height: 100%;
    background: var(--border-color);
    right: 0;
    top: 0;

}

.career.career-typeC .career__item:nth-last-of-type(1)::before {
    display: none;
}

.support__content {
    display: flex;
    align-content: center;
}

.support__item:nth-of-type(1) {
    border-top: 1px solid var(--border-color);
}

.support__item {
    display: flex;
    border-bottom: 1px solid var(--border-color);
}

.support__left {
    width: 100%;
    max-width: 28rem;
}

.support__title {
    flex-shrink: 0;
    min-width: 27rem;
}

.support__items {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 768px) {
    .support__content {
        flex-direction: column;
    }

    .support__item:nth-of-type(1) {
        border-top: 1px solid var(--border-color);
    }

    .support__item {
        flex-direction: column;
    }

    .support__left {
        width: 100%;
        max-width: 100%;
    }
}

.chart-typeA {
    --percentage: 0;
    --bg-color: #f2f2f2;
    background-image: conic-gradient(var(--color) calc(var(--percentage) * 1%), var(--bg-color) calc(var(--percentage) * 1%) 100%);
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    position: relative;
}

.chart-typeA .chart__number {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translate(0%, -50%);
    color: #fff;
}

.chart-typeB {
    --percentage1: 0;
    --percentage2: 0;
    --percentage3: 0;
    --percentage4: 0;
    --bg-color: #f2f2f2;
    background-image: conic-gradient(var(--color1) calc(var(--percentage1) * 1%),
            var(--color2) calc(var(--percentage1) * 1%) calc((var(--percentage1) + var(--percentage2)) * 1%),
            var(--color3) calc((var(--percentage1) + var(--percentage2)) * 1%) calc((var(--percentage1) + var(--percentage2) + var(--percentage3)) * 1%),
            var(--color4) calc((var(--percentage1) + var(--percentage2) + var(--percentage3)) * 1%) calc((var(--percentage1) + var(--percentage2) + var(--percentage3) + var(--percentage4)) * 1%),
            var(--bg-color) calc((var(--percentage1) + var(--percentage2) + var(--percentage3) + var(--percentage4)) * 1%) 100%);
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    position: relative;
}

.chart-typeB .number__items {
    align-items: center;
}

.chart-typeB .chart__number {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translate(0%, -50%);
    color: #fff;
}

.number__content {
    align-items: end;
}

.number__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.number__color {
    width: 1.6rem;
    height: 1rem;
    display: inline-block;
}

.chart-typeC {
    --percentage: 0;
    --bg-color: #f2f2f2;
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    position: relative;
    background-image: radial-gradient(#fff 55%, transparent 55%), conic-gradient(var(--color) calc(var(--percentage) * 1%), var(--bg-color) calc(var(--percentage) * 1%) 100%);
}

.chart-typeC .chart__number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.chart-typeD .chart__box {
    width: 100%;
    height: 4rem;
    position: relative;
}


.chart-typeD .chart__bg {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #f2f2f2;
    right: 0;
}

.chart-typeD .chart__color {
    background: var(--color);
    width: 0%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: width 1s ease-in-out;
}

.chart-typeD.animated .chart__color {
    width: var(--target);
}

.chart-typeD .chart__items {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    gap: var(--spacing-2);
    align-items: center;
}

.chart-typeD .chart__item {
    display: contents;
}

.chart-typeD .chart__label {
    white-space: nowrap;
}

.chart-typeD .chart__number {
    white-space: nowrap;
}


.number-typeA.count__item {
    border: 1px solid #e0e0e0;
    text-align: center;
    border-radius: 8px;
}

.number-typeA .number__icon {
    max-width: 4.8rem;
    width: 100%;
    margin: 0 auto;
}

.number-typeA .count__number {
    color: var(--secondary);
}

/* 小数：「.」以降を小さく（PC＝heading01-sp、SP＝heading02-sp） */
.count__number-value--split {
    display: inline-flex;
    align-items: baseline;
}

.count__number-decimal {
    font-size: var(--heading01-sp);
    line-height: var(--heading01-line-height);
    letter-spacing: var(--heading01-letter-spacing);
    font-weight: var(--heading01-weight);
}

@media screen and (max-width: 768px) {
    .count__number-decimal {
        font-size: var(--heading02-sp);
        line-height: var(--heading02-line-height);
        letter-spacing: var(--heading02-letter-spacing);
        font-weight: var(--heading02-weight);
    }
}

/* typeA：インライン style 廃止用 */
.number-typeA__figure {
    color: var(--secondary);
}

.number-typeA .count__number--ratio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}

.number-typeA__bonus {
    color: var(--secondary);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.25em;
    flex-wrap: wrap;
}

.number-typeA__milestone {
    color: var(--secondary);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.25em;
    flex-wrap: wrap;
}

.number-typeA__desc {
    color: var(--secondary);
}

/* 画像+テキスト */
.president-message-typeA .president-message__content {
    align-items: start;
}

.president-message-typeA .president-message__text {
    line-height: 200%;
}

.president-message-typeA .president-message__info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-2);
}

.president-message-typeB .president-message__text {
    line-height: 200%;
}

.president-message-typeB .president-message__info {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: var(--spacing-2);
}

.president-message__title {
    letter-spacing: 3px;
}

.president-message__text {
    font-size: 1.6rem;
}

@media (max-width: 768px) {
    .president-message__text {
        font-size: 1.4rem;
    }
}

.mvv.mvv-typeA {
    background: linear-gradient(180deg, #E2F1FF 0%, #FFFFFF 100%);

}

.mvv.mvv-typeA .mvv__content {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
}

.mvv.mvv-typeA .mvv__img {
    max-width: 45.8333%;
    width: 100%;
}

.mvv.mvv-typeA .mvv__box {
    max-width: 54.1667%;
    width: 100%;
}

@media screen and (max-width: 768px) {
    .mvv.mvv-typeA .mvv__img {
        max-width: 100%;
    }

    .mvv.mvv-typeA .mvv__box {
        max-width: 100%;
    }

    .mvv.mvv-typeA .mvv__content {
        flex-direction: column;
    }
}

.mvv-typeB {
    background: var(--black);
    color: var(--white);
}

.mvv.mvv-typeB .mvv__item {
    align-items: center;
    width: 100%;
    border-top: 1px solid var(--white);
    flex-wrap: nowrap;
}

.mvv.mvv-typeB .mvv__item:nth-of-type(1) {
    border-bottom: none;
}

.mvv.mvv-typeB .mvv__item:nth-last-of-type(1) {
    border-bottom: 1px solid var(--white);
}

.mvv.mvv-typeB .mvv__icon,
.mvv.mvv-typeB .mvv__title {
    max-width: 27rem;
    width: 100%;
    height: 100%;
    text-align: center;
}

.mvv.mvv-typeB .mvv__icon img {
    display: block;
    max-width: 8rem;
    margin: 0 auto;
}


.mvv.mvv-typeB .mvv__title {
    text-align: center;
}

.mvv.mvv-typeB .mvv__content {
    width: 100%;
}

.mvv__subtitle {
    color: var(--tertiary);
}

@media screen and (max-width: 768px) {
    .mvv.mvv-typeB .mvv__item {
        flex-direction: column;
    }

    .mvv.mvv-typeB .mvv__icon,
    .mvv.mvv-typeB .mvv__title {
        max-width: 100%;
    }
}

.history-typeA {
    position: relative;
    overflow: hidden;
}

/* 上部のもや */
.history-typeA::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 10rem;
    background: linear-gradient(to bottom, var(--site-background) 0%, var(--site-background) 30%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

/* 下部のもや */
.history-typeA::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 10rem;
    background: linear-gradient(to top, var(--site-background) 0%, var(--site-background) 30%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

.history-typeA .history__items {
    width: fit-content;
    background: var(--secondary);
    color: var(--secondary-text);
    opacity: .8;
    border-radius: 10px;
}

.history-typeA .history__item {
    align-items: center;
}

.history-typeA .history__date {
    flex-direction: column;
    gap: 0;
    text-align: center;
}

.history-typeA .history__item {
    border-bottom: 1px solid #D9D9D9;
}

.history-typeA .history__bg {
    position: absolute;
    top: -10rem;
    right: 0;
    width: 100rem;
    height: 100%;
    z-index: -1;
}

.history-typeA .history__images {
    transform: rotate(21.115deg);
}

/* 1番目と3番目の画像：下方向 */
.history__image:nth-of-type(1),
.history__image:nth-of-type(3) {
    animation: imageLoop 30s linear infinite;
}

/* 2番目の画像：上方向（逆） */
.history__image:nth-of-type(2) {
    animation: imageLoopReverse 30s linear infinite;
}

@keyframes imageLoop {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 2445px;
    }
}

@keyframes imageLoopReverse {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 -2445px;
    }
}

.history__image {
    width: 100%;
    height: 100%;
    aspect-ratio: 400 / 2445;
    object-fit: cover;
    background-image: url(../img/business.png);
    background-size: 400 2445;
    background-position: 0 0;
    background-repeat: repeat-y;
    object-fit: cover;
    flex-shrink: 0;
    filter: grayscale(100%);
    opacity: .3;
}

@media screen and (max-width: 768px) {
    .history__bg {
        width: 40rem;
        right: -10rem;
        top: 0;
    }

    .history-typeA .history__item {
        align-items: start;
    }

    .history-typeA .history__date {
        width: 100%;
        align-items: start;
    }
}

/* ========== history-typeB ========== */
/* スクロールはラッパー側。ul は全アイテム分の高さに伸び、::before の縦線が最後までつながる */
.history-typeB__scroll {
    height: 600px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #005596 #e0e0eb;
}

.history-typeB__scroll::-webkit-scrollbar {
    width: 12px;
}

.history-typeB__scroll::-webkit-scrollbar-track {
    background-color: #e0e0eb;
}

.history-typeB__scroll::-webkit-scrollbar-thumb {
    background-color: #005596;
    border-radius: 0;
}

/* 矢印ボタンを非表示（WebKit では増減を個別指定すると確実） */
.history-typeB__scroll::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.history-typeB__scroll::-webkit-scrollbar-button:vertical:start:decrement,
.history-typeB__scroll::-webkit-scrollbar-button:vertical:end:increment {
    display: none;
    width: 0;
    min-width: 0;
    height: 0;
    min-height: 0;
}

.history-typeB .history__items {
    position: relative;
    list-style: none;
}

/* 縦線 */
.history-typeB .history__items::before {
    content: '';
    position: absolute;
    left: 0.6rem;
    top: 1rem;
    bottom: 0;
    width: 3px;
    background-color: var(--secondary);
}

.history-typeB .history__item {
    align-items: start;
    flex-wrap: nowrap;
    gap: var(--spacing-5);
    border-bottom: none;
}

.history-typeB .history__timeline {
    position: relative;
    flex-shrink: 0;
    width: 1.2rem;
    align-self: flex-start;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    margin-left: 1.5px;
    margin-top: 1rem;
}

.history-typeB .history__dot {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background-color: var(--secondary);
    flex-shrink: 0;
}

.history-typeB .history__date {
    flex-shrink: 0;
    width: 16rem;
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: var(--text-lg-line-height);
    letter-spacing: var(--text-lg-letter-spacing);
}

.history-typeB .history__content {
    flex: 1;
}

@media screen and (max-width: 768px) {
    .history-typeB .history__item {
        gap: var(--spacing-2);
    }

    .history-typeB .history__date {
        width: 10rem;
        font-size: var(--text-lg-sp);
    }
}


.history-typeC .history__item {
    width: 50%;
    margin-left: auto;
    position: relative;
    padding-left: calc(var(--spacing-6) + 1.2rem);
}

.history-typeC .history__item:nth-of-type(even) {
    margin-left: 0;
    margin-right: auto;
    padding-left: 0;
    padding-right: calc(var(--spacing-6) + 1.2rem);
    display: flex;
    flex-direction: column;
    align-items: end;
}


.history-typeC .history__item::before {
    position: absolute;
    content: "";
    width: 1.2rem;
    height: 1.2rem;
    background: var(--tertiary);
    left: -0.6rem;
    top: 0;
}

.history-typeC .history__item:nth-of-type(even)::before {
    left: auto;
    right: -0.6rem;
}

/* 縦線も同じ中央軸（ブロックの角から 2px の半分だけ内側＝-1px） */
.history-typeC .history__item::after {
    position: absolute;
    content: "";
    width: 2px;
    height: 100%;
    background: var(--tertiary);
    top: 0;
    left: -1px;
}

.history-typeC .history__item:nth-of-type(even)::after {
    left: auto;
    right: -1px;
}

.history-typeC .history__month {
    flex-shrink: 0;
}

.history-typeC .history__date {
    display: flex;
    color: var(--secondary);
}

.history-typeC .history__box {
    display: flex;
}

.history-typeC .history__img {
    max-width: 30rem;
    width: 100%;
}

/* SP: 奇数だけ margin-left:auto のままだと右寄せ50%が残る。偶数だけ上書きしても揃わない */
@media screen and (max-width: 768px) {
    .history-typeC .history__item {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: calc(var(--spacing-3) + 1.2rem);
        padding-right: 0;
    }

    .history-typeC .history__item:nth-of-type(even) {
        padding-left: calc(var(--spacing-3) + 1.2rem);
        padding-right: 0;
        align-items: flex-start;
    }

    /* 1カラム・左基準：ドット／縦線をパディング左端基準に（中央50%用の負の値はやめる） */
    .history-typeC .history__item::before {
        left: 0;
        top: 0;
    }

    .history-typeC .history__item:nth-of-type(even)::before {
        left: 0;
        right: auto;
    }

    .history-typeC .history__item::after {
        left: calc(0.6rem - 1px);
    }

    .history-typeC .history__item:nth-of-type(even)::after {
        left: calc(0.6rem - 1px);
        right: auto;
    }
}

.map-typeA .map__content {
    /* HTML の gap-y-5 より詰める（地図と住所ブロックの間が空きすぎる場合） */
    row-gap: var(--spacing-4);
}

.map-typeA .map__head {
    aspect-ratio: 1200 / 280;
}

.map-typeA .map__head iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.map-typeA .map__bottom {
    /* HTML の gap-y-3 相当を詰めたい場合はここで上書き（必要なら gap-y-2 へ） */
    gap: var(--spacing-3);
}

.map-typeA .map__box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
}

.map-typeA .map__button {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    border: 2px solid var(--text-color);
    border-radius: 50px;
    font-size: var(--caption);
    line-height: 160%;
}

.map-typeA .map__icon {
    display: flex;
    align-items: center;
}

.map-typeA .map__img {
    max-width: 2.8rem;
    flex-shrink: 0;
}

/* width:100% だと flex 内で見出しが行幅いっぱいに伸び、番号側（.map__access）が極端に狭くなりハイフンで折り返す */
.map__heading {
    flex-shrink: 0;
    max-width: 6rem;
    min-width: 6rem;
    margin: 0;
}

/*
 * .flex の gap（--gap-y が大きい）を丸ごと上書き。TEL/FAX 行の下に余計な行間が乗らないようにする。
 */
.map-typeA .map__item.flex {
    flex-wrap: wrap;
}

.map-typeA .map__item.flex .map__group {
    flex: 0 1 auto;
    min-width: min(100%, 14rem);
    max-width: 100%;
}

.map-typeA .map__item.flex .map__access {
    overflow-wrap: normal;
}

.map-typeA .map__group {
    display: flex;
    align-items: start;
    min-width: 0;
}

.map-typeA .map__item {
    align-items: center;
}

.map-typeA .map__items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.map-typeA .map__items>.map__item:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 768px) {
    .map-typeA .map__head {
        aspect-ratio: 345 / 146;
    }
}

/* --------------------------------------------------------------------------
   フッター（採用サイト / Figma 準拠・初回実装版）
   -------------------------------------------------------------------------- */
.site-footer--recruit {
    --footer-bg: #035697;
    --footer-btn-dark: #00213b;
    background: var(--footer-bg);
    color: #fff;
}

.site-footer__main {
    padding-top: 8rem;
    padding-bottom: 5.6rem;
}

.site-footer__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4rem 3.2rem;
    margin-bottom: 5.6rem;
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    min-width: min(100%, 32.5rem);
}

.site-footer__logo {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.2rem;
    text-decoration: none;
    color: inherit;
}

.site-footer__logo-img img {
    display: block;
    height: auto;
    max-width: 100%;
}

.site-footer__recruit {
    font-family: var(--english-font-family, 'Manrope', sans-serif);
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #fff;
    transform: translateY(-0.2rem);
}

.site-footer__sns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__sns-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.5rem;
    color: #fff;
    transition: opacity 0.2s ease;
}

.site-footer__sns-link:hover {
    opacity: 0.75;
}

.site-footer__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 1.6rem;
    flex: 1 1 auto;
    min-width: min(100%, 28rem);
}

.site-footer__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    min-height: 4.8rem;
    padding: 0 1.2rem;
    border-radius: 0.4rem;
    font-size: 1.4rem;
    font-weight: var(--semibold, 600);
    letter-spacing: var(--text-lg-letter-spacing, 0.1em);
    line-height: 2;
    text-decoration: none;
    color: #fff;
    box-sizing: border-box;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.site-footer__btn:hover {
    opacity: 0.92;
}

.site-footer__btn--fill {
    background: var(--footer-btn-dark);
}

.site-footer__btn--outline {
    background: transparent;
    border: 0.15rem solid #fff;
}

.site-footer__btn-rule {
    width: 0.1rem;
    align-self: stretch;
    min-height: 2rem;
    margin: 0.4rem 0;
    background: rgba(255, 255, 255, 0.45);
}

.site-footer__btn-icon {
    display: flex;
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    align-items: center;
    justify-content: center;
}

.site-footer__btn-icon svg {
    width: 100%;
    height: 100%;
}

.site-footer__nav {
    margin: 0;
}

.site-footer__cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3.2rem;
}

.site-footer__col-title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 1.2rem;
    font-family: var(--english-font-family, 'Manrope', sans-serif);
    font-size: 1.6rem;
    font-weight: var(--heading04-weight, 600);
    line-height: 2;
    letter-spacing: var(--text-lg-letter-spacing, 0.1em);
    color: #fff;
}

.site-footer__col-dot {
    flex-shrink: 0;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: #fff;
}

.site-footer__links {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.site-footer__links a {
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2;
    letter-spacing: var(--text-lg-letter-spacing, 0.1em);
    color: #fff;
    text-decoration: none;
}

.site-footer__links a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.site-footer__bottom {
    border-top: 0.1rem solid #fff;
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
}

.site-footer__copy {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.6;
    letter-spacing: 0.1em;
    color: #fff;
}

@media screen and (max-width: 768px) {
    .site-footer__main {
        padding-top: 5.6rem;
        padding-bottom: 4rem;
    }

    .site-footer__top {
        flex-direction: column;
        margin-bottom: 4rem;
    }

    .site-footer__actions {
        justify-content: flex-start;
        width: 100%;
    }

    .site-footer__btn {
        flex: 1 1 auto;
        min-width: min(100%, 28rem);
    }

    .site-footer__cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.4rem 2rem;
    }
}

@media screen and (max-width: 1024px) {
    .site-footer__cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 480px) {
    .site-footer__cols {
        grid-template-columns: 1fr;
    }

    .site-footer__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .site-footer__btn {
        width: 100%;
        min-width: 0;
    }

    .site-footer__bottom {
        padding: 1.2rem 0;
        font: 1.2rem;
        text-align: center;
    }

    .site-footer__copy {
        font-size: 1.2rem;
    }

    .site-footer__actions.pc {
        display: none;
    }
}

.interview__title-line {
    display: block;
}

.interview__title {
    color: var(--secondary);
}

.interview__img {
    position: relative;
    overflow: hidden;
}

.interview__img img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

/* ホバー時のみ画像上にグラデーション重ね */
.interview__img::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 80%, #035697 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.interview__item:hover .interview__img::after {
    opacity: 1;
}

.interview__arrow {
    position: absolute;
    bottom: var(--spacing-3);
    right: var(--spacing-3);
    z-index: 2;
    width: 4rem;
    height: 4rem;
}

.interview__tag {
    position: absolute;
    top: var(--spacing-3);
    left: var(--spacing-3);
    display: inline-block;
    z-index: 2;
}

.interview__arrow svg {
    width: 100%;
    height: 100%;
}

.interview__arrow path {
    transition: stroke 0.35s ease;
}

.interview__item:hover .interview__arrow path {
    stroke: #fff;
}

.interview__items {
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    margin-top: -1px;
}

.interview__item {
    border-right: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
}

.interview__item:hover .interview__title span {
    background: var(--primary);
    color: var(--white);
    width: fit-content;
}



section.interview.interview-typeA {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

/* フロント用インタビュー一覧スニペット：SP のみ横スクロール＋矢印（769px 以上は grid のみ・矢印非表示） */
.interview-latest__slider {
    min-width: 0;
}

.interview-latest__nav {
    display: none;
}

@media screen and (min-width: 769px) {
    .interview-latest__slider {
        display: contents;
    }
}

@media screen and (max-width: 768px) {
    .interview-latest__slider {
        position: relative;
    }

    .interview-latest .interview__items {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        grid-template-columns: unset;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        overscroll-behavior-x: contain;
    }

    .interview-latest .interview__item {
        flex: 0 0 min(88vw, 42rem);
        scroll-snap-align: start;
        max-width: none;
    }

    /* カード列の左右端・縦中央に矢印（下ではなくオーバーレイ） */
    .interview-latest__nav {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        pointer-events: none;
        z-index: 2;
    }

    .interview-latest__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
        border: none;
        background: transparent;
        color: var(--secondary);
        cursor: pointer;
        line-height: 0;
        transition: opacity 0.2s ease;
        pointer-events: auto;
    }

    .interview-latest__btn:hover:not(:disabled) {
        opacity: 0.85;
    }

    .interview-latest__btn:disabled {
        opacity: 0.3;
        cursor: default;
        pointer-events: none;
    }

    .interview-latest__btn svg {
        display: block;
        width: 4.8rem;
        height: 4.8rem;
    }
}

.interview__item:nth-of-type(3n) {
    border-right: none;
}

.pagenation__items {
    display: flex;
    justify-content: center;
}

.pagenation__item a {
    display: block;
    position: relative;
}

.pagenation__item a::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--text-color);
}

.pagenation__nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagenation__nav.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}

@media screen and (max-width: 768px) {
    .interview__item {
        border-right: none;
    }
}

.interview-tabs__list {
    max-width: 90rem;
    width: 100%;
    margin: 0 auto;
}

.interview-tabs__item {
    text-align: center;
    padding-bottom: .8rem;
    border-bottom: 2px solid var(--text-color);
}

.interview-tabs__current {
    color: var(--secondary);
}

.interview-tabs__item:has(.interview-tabs__current) {
    border-bottom-color: var(--secondary);
}

.pagenation__item {
    font-size: 1.6rem;
}

.pagenation__item a {
    color: var(--primary);
}

@media screen and (max-width: 768px) {
    .interview-tabs__list {
        max-width: calc(100% - 3rem);
        width: 100%;
        margin: 0 auto;
    }
}

/* 記事ページメインビジュアル */

.article-mv-typeA.article-mv {
    position: relative;
}

.article-mv-typeA .article-mv__box {
    position: absolute;
    bottom: var(--spacing-7-full);
    left: var(--spacing-7-full);
}

.article-mv-typeA .article-mv__info {
    color: var(--secondary);
}

.article-mv-typeA .article-mv__text {
    display: flex;
    flex-direction: column;
}

.article-mv-typeA .article-mv__text span {
    background: var(--primary);
    color: var(--white);
    width: fit-content;
}

/* PC / SP 出し分け（詳細度で show-pc / small-hide と干渉しないようブレークポイントで明示） */
@media screen and (min-width: 769px) {
    .article-mv-typeA .article-mv__text-pc.show-pc {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .article-mv-typeA .article-mv__text-sp.small-hide {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    .article-mv-typeA .article-mv__text-pc.show-pc {
        display: none !important;
    }

    .article-mv-typeA .article-mv__text-sp.small-hide {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
}

/* 記事ページメインビジュアル */

.article-mv__img {
    position: relative;
}

/* .article-mv__img::after {
    background-image: url(img/pc/interview/lower_mv_bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 1440 / 600;
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
} */

/* .article-mv.article-mv-typeA {
    background-image: url(img/pc/interview/lower_mv_bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 1440 / 600;
} */

.article-mv__name {
    color: var(--text-color);
}

.article-mv__post {
    color: var(--text-color);
}

@media screen and (max-width: 768px) {
    .article-mv__img::after {
        aspect-ratio: 375 / 540;
    }

    .article-mv-typeA.article-mv {
        aspect-ratio: 375 / 540;
    }
}

.field__title {
    text-align: center;
}

.field__item {
    place-content: start;
}

.feature.feature-typeA .feature__icon {
    max-width: 7.8rem;
    width: 100%;
    margin: 0 auto;
}

.feature.feature-typeA .feature__number {
    background: var(--primary);
    color: var(--white);
    text-align: center;
    display: block;
    width: fit-content;
    border-radius: 50%;
    width: 6.8rem;
    height: 6.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.feature.feature-typeA .feature__title {
    text-align: center;
}

.feature__item {
    border: 1px solid var(--border-color);
    background: #fff;
    position: relative;
}

/* トップ first-animation：#DCEEF5＋ロゴ → 青が全面覆う → さらに左から抜けて MV（2.4s＝SWEEP_MS）→ フェード */
.first-animation {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #DCEEF5;
    overflow: hidden;
    touch-action: none;
}

.first-animation__inner {
    position: relative;
    z-index: 2;
    transition: opacity 0.2s ease;
}

.first-animation__svg {
    display: block;
    width: min(42vw, 200px);
    height: auto;
}

/* 横に潰さず、左から幅が伸びて現れる（clip-path） */
.first-animation__parts {
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
    transition: clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        -webkit-clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.first-animation--parts-in .first-animation__parts {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
}

/* ① 左から青が入って画面を覆う → ② そのまま左基準で右へ抜ける（前半は #DCEEF5 を消さない） */
.first-animation__sweep {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #035697;
    transform: translateX(-100%);
    pointer-events: none;
}

.first-animation--sweeping {
    animation: first-animation-bg 2.4s linear forwards;
}

.first-animation--sweeping .first-animation__inner {
    animation: first-animation-logo-under-sweep 2.4s linear forwards;
}

.first-animation--sweeping .first-animation__sweep {
    animation: first-animation-sweep 2.4s linear forwards;
}

@keyframes first-animation-bg {

    0%,
    49.99% {
        background-color: #DCEEF5;
    }

    50%,
    100% {
        background-color: transparent;
    }
}

@keyframes first-animation-logo-under-sweep {

    0%,
    49.99% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

@keyframes first-animation-sweep {
    0% {
        transform: translateX(-100%);
    }

    42% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }
}

.first-animation--done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {

    .first-animation__parts {
        clip-path: none;
        -webkit-clip-path: none;
        transition: none;
    }

    .first-animation--sweeping {
        animation: none;
        background-color: transparent;
    }

    .first-animation--sweeping .first-animation__inner {
        animation: none;
        opacity: 0;
    }

    .first-animation--sweeping .first-animation__sweep {
        animation: none;
        transform: translateX(100%);
    }
}

.mv {
    position: relative;
}

.mv__content {
    position: relative;
    overflow: hidden;

}

.mv__box {
    position: absolute;
    content: "";
    left: calc(7.2 * var(--unit-full));
    bottom: calc(10 * var(--unit-full));
}

.mv__title {
    font-size: calc(8 * var(--unit-full));
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
}

.mv__text {
    color: #fff;
}

.top-loop {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    transform: translateY(50%) !important;
}

.top-loop li {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #035697;
    opacity: 1;
    font-size: 10rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.mv__dec {
    position: absolute;
    left: -50%;
    top: 50%;
    transform: translateY(-50%);
    width: 95vw;
}

@media screen and (max-width: 768px) {
    .mv__box {
        position: static;
        background: var(--background-secondary);
        padding: 2rem 1.5rem;
        padding-bottom: 5rem;
    }

    .mv__title {
        font-size: calc(3.3 * var(--unit-sp-full));
    }

    .mv__text {
        margin-top: .8rem;
    }

    .top-loop {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        transform: translateY(50%) !important;
        z-index: 1 !important;
    }

    .top-loop li {
        color: transparent;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 1px #035697;
        opacity: 1;
        font-size: 6rem;
        line-height: 1.4;
        letter-spacing: 0.02em;
    }

    .mv__dec {
        display: none;
    }
}

/* ---------- SP ドロワー（Figma ドロワー相当） ---------- */
.drawer {
    position: fixed;
    inset: 0;
    z-index: 10001;
    pointer-events: none;
    visibility: hidden;
}

.drawer.active {
    pointer-events: auto;
    visibility: visible;
}

.drawer__backdrop {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.drawer.active .drawer__backdrop {
    opacity: 1;
}

.drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: -4px 0 24px rgba(0, 33, 59, 0.08);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.drawer.active .drawer__panel {
    transform: translateX(0);
}

.drawer__top {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    padding: var(--spacing-4-sp) var(--spacing-4-sp) 0;
}

.drawer__close {
    position: relative;
    width: var(--spacing-7);
    height: var(--spacing-7);
    min-width: 4.4rem;
    min-height: 4.4rem;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.drawer__close-bar {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2rem;
    height: 3px;
    background: var(--primary, #035697);
    border-radius: 1px;
}

.drawer__close-bar:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

.drawer__close-bar:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.drawer__scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--spacing-4-sp) var(--spacing-6-sp);
    box-sizing: border-box;
}

.drawer__sections {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.drawer__accordion {
    border-bottom: 1px solid #d9d9d9;
}

.drawer__accordion:last-child {
    border-bottom: none;
}

.drawer__accordion-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    list-style: none;
    cursor: pointer;
    padding: var(--spacing-3) 0;
    margin: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.drawer__accordion-summary::-webkit-details-marker {
    display: none;
}

.drawer__accordion-summary::marker {
    content: "";
}

.drawer__accordion .drawer__title {
    flex: 1;
    text-align: left;
}

.drawer__accordion-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #035697);
}

.drawer__accordion-icon svg {
    display: block;
}

/* 閉じているときはプラス、開いているときは縦線を隠してマイナス */
.drawer__accordion-icon-v {
    transform-origin: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.drawer__accordion[open] .drawer__accordion-icon-v {
    opacity: 0;
    transform: scaleY(0);
}

.drawer__accordion .drawer__links {
    padding-bottom: var(--spacing-4);
    margin-top: calc(-1 * var(--spacing-1));
}

/* wp_nav_menu + Drawer_Sections_Walker 用（セクション間の余白） */
.drawer__sections>.drawer__section:not(:last-child) {
    margin-bottom: var(--spacing-5-sp);
}

.drawer__head {
    border-bottom: 1px solid #d9d9d9;
    padding-bottom: var(--spacing-3);
    margin-bottom: var(--spacing-2);
}

.drawer__title {
    margin: 0;
    font-family: var(--heading-font-family);
    font-weight: var(--heading04-weight, 600);
    font-size: var(--text-lg-sp);
    line-height: var(--text-lg-line-height);
    letter-spacing: var(--text-lg-letter-spacing);
    color: var(--primary, #035697);
}

.drawer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.drawer__link {
    display: block;
    font-family: var(--base-font-family);
    font-weight: var(--text-base-weight);
    font-size: var(--text-base-sp);
    line-height: var(--text-base-line-height);
    letter-spacing: var(--text-base-letter-spacing);
    color: var(--text-color, #00213b);
    text-decoration: none;
}

.drawer__link:hover {
    color: var(--primary, #035697);
}

.drawer__sns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-5-sp);
    margin-top: var(--spacing-6-sp);
    padding-top: var(--spacing-3);
}

.drawer__sns-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #035697);
    min-width: 4.4rem;
    min-height: 4.4rem;
}

.drawer__sns-link svg {
    display: block;
    width: 3.2rem;
    height: 3.2rem;
}

.drawer__cta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4-sp);
    margin-top: var(--spacing-5-sp);
}

.drawer__cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    min-height: 5.6rem;
    padding: var(--spacing-3) var(--spacing-4-sp);
    border-radius: var(--button-border-radius, 4px);
    border: 1px solid var(--white, #fff);
    text-decoration: none;
    box-sizing: border-box;
}

.drawer__cta-btn--primary {
    background: #035697;
    color: #fff;
}

.drawer__cta-btn--entry {
    background: linear-gradient(90deg, #1663e0 0%, #207de8 50%, #3abef2 100%);
    color: #fff;
}

.drawer__cta-text {
    flex: 1;
    text-align: center;
    font-family: var(--base-font-family);
    font-weight: var(--semibold, 600);
    font-size: 2rem;
    line-height: var(--text-lg-line-height);
    letter-spacing: var(--text-lg-letter-spacing);
}

.drawer__cta-sep {
    width: 1px;
    align-self: stretch;
    min-height: 2.4rem;
    background: rgba(255, 255, 255, 0.5);
}

.drawer__cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
}

.drawer__cta-icon svg {
    display: block;
}

/* ハンバーガー → 開閉時は X 風（ドロワーと同期）
   高さが線3本+gapより小さいと flex で潰れて線が見えなくなるため、最低でも 4rem 程度は確保する */
.menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 0.4rem;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    box-sizing: border-box;
    flex-shrink: 0;
}

.menu__line {
    display: block;
    width: 1.6rem;
    height: 2px;
    background: var(--text-color, #00213b);
    flex-shrink: 0;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

.menu.active .menu__line01 {
    transform: translateY(1.1rem) rotate(45deg);
}

.menu.active .menu__line02 {
    opacity: 0;
}

.menu__line03 {
    width: .8rem;
}

.menu.active .menu__line03 {
    transform: translateY(-1.1rem) rotate(-45deg);
}

/* device.css の .small-hide（SP で display:block）より後勝ちで flex にする */
@media screen and (max-width: 768px) {

    .header .menu.small-hide {
        display: flex;
    }
}

@media screen and (min-width: 769px) {

    .drawer {
        display: none !important;
    }
}




/* スクロール量に応じて .select の --select-progress (0〜1) が変化（main.js の minScenePx と対応） */
.select-scene {
    min-height: 220vh;
    width: 100%;
    flex-shrink: 0;
}

.select-sticky {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.select {
    --select-progress: 0;
    text-align: center;
    background-color: #e8f4fa;
    background-image: url(img/pc/top/sec1_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: auto;
    isolation: isolate;
    /* 横だけはみ出しを抑える。hidden+visible だと仕様上 y が auto になり内側スクロールバーが出るため clip を使う */
    overflow-x: clip;
    overflow-y: visible;
}

.select .container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    min-height: 100vh;
}

.select::before {
    position: absolute;
    content: "";
    z-index: 0;
    pointer-events: none;
    background-image: url(img/pc/top/sec1_img_cycle.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 27.4rem;
    aspect-ratio: 274 / 299;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(calc(1 + var(--select-progress) * 4));
    filter: blur(calc(var(--select-progress) * 3px));
    transform-origin: center center;
    will-change: transform, filter;
}

@media screen and (max-width: 768px) {
    .select {
        padding: 6rem 0;
    }
}

.profile {
    background-image: url(img/pc/top/profile__bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 8rem 0;
}

.profile__item {
    border-radius: 4px;
}

.profile .title {
    color: #fff;
}

.profile .title span {
    color: #fff;
}

.profile__link svg {
    width: 100%;
    height: 100%;
}

.profile__link:hover svg rect {
    fill: #035697;
}

/* sticky でその場に留まり、一定量スクロールで 2 枚目が一気に表示（--about-work-fade は 0 か 1、main.js） */
.about-work-scene {
    /* 固定ヘッダー分、止まったときに上を空ける */
    --about-work-sticky-top: 80px;
    /* 表示ブロックの高さ（ヘッダー下の残りビューポート） */
    --about-work-height: calc(100vh - var(--about-work-sticky-top));
    /* 以前の 300vh（=100vh×3）に相当するスクロール量 */
    min-height: calc(3 * var(--about-work-height));
}

.about-work-sticky {
    position: sticky;
    top: var(--about-work-sticky-top);
    height: var(--about-work-height);
    min-height: var(--about-work-height);
    overflow: hidden;
}

.about-work-stack {
    --about-work-fade: 0;
    position: relative;
    width: 100%;
    height: var(--about-work-height);
    min-height: var(--about-work-height);
}

.about-work-stack>.about-work {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.about-work-stack>.about-work:not(.about-work--panel2) {
    z-index: 1;
    /* 2枚目表示時は 1 枚目を消す（下に残ると透けて見える） */
    opacity: calc(1 - var(--about-work-fade));
}

.about-work--panel2 {
    z-index: 2;
    opacity: var(--about-work-fade);
    pointer-events: none;
}

.about-work {
    position: relative;
}

.about-work__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.about-work__bg picture,
.about-work__bg img {
    display: block;
    width: 100%;
    height: 100%;
}

.about-work__bg img {
    object-fit: cover;
}

.about-work__content {
    position: absolute;
    content: "";
    right: 7vw;
    bottom: 50%;
    transform: translateY(50%);
    max-width: calc(49.2 * var(--unit-full));
    width: 100%;
    z-index: 1;
}

.about-work__buttons {
    flex-wrap: nowrap;
    display: flex;
    gap: 1.6rem;
}

.about-work__buttons a {
    width: 50%;
}

.about-work__buttons a:nth-of-type(1) {
    background: #00213B;
}

.about-work__buttons a:nth-of-type(1):hover {
    background: #fff;
    color: #00213B;
}

.about-work__buttons .button__text {
    width: 100%;
}

@media (max-width: 768px) {
    .about-work-scene {
        --about-work-sticky-top: 60px;
    }

    .about-work-sticky {
        width: 100%;
        max-width: min(100%, var(--content-max-width-full));
        margin-left: auto;
        margin-right: auto;
    }

    .about-work {
        background-image: url(img/sp/top/sec2_bg_cover.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .about-work__content {
        right: auto;
        left: 1.5rem;
        max-width: 100%;
        width: calc(100% - 3rem);
        bottom: 0;
        box-sizing: border-box;
    }

    .about-work-stack>.about-work {
        height: var(--about-work-height);
    }

    .about-work__bg {
        position: static;
    }

    .about-work__content {
        position: static;
        transform: none;
        width: calc(100% - 3rem);
        margin: 0 auto;

    }
}

.date {
    background-image: url(img/pc/top/sec5_bg.jpg);
    background-size: contain;
    background-repeat: repeat;
    padding-bottom: 15rem;
}

.date__item {
    background: #fff;
}

.date__icon {
    text-align: center;
}

.date__arrow {
    text-align: right;
}

@keyframes float-fuwa {
    0% {
        transform: translateY(0) scale(1);
    }

    20% {
        transform: translateY(-5px) scale(1.05);
    }

    40% {
        transform: translateY(0) scale(0.98);
    }

    60% {
        transform: translateY(6px) scale(1.03);
    }

    80% {
        transform: translateY(0) scale(1);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

.date__item:hover #date__icno01 {
    animation: float-fuwa 2s ease-in-out infinite;
}

/* データカード2：棒グラフ3本は初期は低く、ホバーで本来の高さ（各バーの下辺を軸に scaleY） */
.date__item .date__bars path {
    transform-box: fill-box;
    transform-origin: bottom center;
    transform: scaleY(0.35);
    transition: transform 0.45s ease;
}

.date__item:hover .date__bars path {
    transform: scaleY(1);
}

/* 採用情報カード：ペン先付近を軸に、ノートに書くような往復（mask1/2 の描画グループ .date__pen） */
@keyframes date-pen-write {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(-2px, 3px) rotate(-5deg);
    }

    50% {
        transform: translate(1px, 5px) rotate(4deg);
    }

    75% {
        transform: translate(-1px, 2px) rotate(-3deg);
    }
}

.date__item .date__pen {
    transform-origin: 84px 114px;
}

.date__item:hover .date__pen {
    animation: date-pen-write 0.85s ease-in-out infinite;
}

@media (max-width: 768px) {
    .date__item:hover #date__icno01 {
        animation: none;
    }

    .date__item .date__bars path,
    .date__item:hover .date__bars path {
        transform: none;
        transition: none;
    }

    .date__item .date__pen,
    .date__item:hover .date__pen {
        animation: none;
        transform: none;
    }

    .date {
        background-image: url(img/sp/top/sec5_bg.jpg);
        padding-bottom: 10rem;
    }
}

.date__title {
    display: flex;
    flex-direction: column;
}

.introduction__img img {
    max-width: 58.8rem;
    width: 100%;
    margin: 0 auto;
}

.introduction__tabs {
    max-width: 59.2rem;
    width: 100%;
    margin: 0 auto;
}

.introduction__box {
    display: flex;
    align-items: start;
    gap: 4rem;
}

.introduction__left {
    width: calc(100% - 64.666%);
}

.introduction__right {
    width: 64.666%;
}

.introduction__item {
    background: #E2F1FF;
}

.introduction__heading {
    text-align: center;
}

@media (max-width : 768px) {
    .introduction__box {
        flex-direction: column;
        gap: 2.4rem;
    }

    .introduction__left,
    .introduction__right {
        width: 100%;
    }

}



.introduction__tab {
    text-align: center;
    display: flex;
    border-bottom: 2px solid var(--primary);
    padding-right: 2rem;
}

button.introduction__tab {
    background: transparent;
    border-left: 0;
    border-top: 0;
    border-right: 0;
    font: inherit;
    color: inherit;
}