@charset "utf-8";

/* Text
--------------------------------------------------------------- */

.text-important {
    color: var(--color-red);
}


/* Title - ページタイトル
--------------------------------------------------------------- */

.page-title-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    min-height: var(--fs106px);
    margin-bottom: var(--fs40px);

    .button {
        padding-inline: 1.25em;
    }

    .page-title {
        min-height: var(--fs106px);
    }
}

.page-title {
    display: grid;
    grid-template-columns: var(--fs90px) 1fr;
    align-items: center;
    gap: 0 var(--fs18px);
    color: var(--color-default);
    font-size: var(--fs38px);
    font-weight: 700;
    white-space: nowrap;
    height: 100%;
    margin-left: 1.73em;
    line-height: 1.447;

    &::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        mask: center center / contain no-repeat;
        background-color: var(--color-main);
    }

    &.page-title__job::before {
        mask-image: url(../img/ui/icon_general_medium.svg);
    }

    &.page-title__event::before {
        mask-image: url(../img/ui/icon_calendar_event.svg);
    }

    &.page-title__news::before {
        mask-image: url(../img/ui/icon_news.svg);
    }

    &.page-title__company::before {
        mask-image: url(../img/ui/icon_company.svg);
    }

    &.page-title__movie::before {
        mask-image: url(../img/ui/icon_movie.svg);
    }

    &.page-title__location::before {
        mask-image: url(../img/ui/icon_location.svg);
    }

    &.page-title__voice::before {
        mask-image: url(../img/ui/icon_voice.svg);
    }
}

.page-title-single {
    width: fit-content;
    font-size: var(--fs38px);
    font-weight: 700;
    line-height: 1.44;
    margin: 1em auto;
}


/* Fixed Nav
--------------------------------------------------------------- */

.fixed-nav {
    --fixed-nav__font-size: var(--fs12px);
    position: fixed;
    top: 25lvh;
    right: 0;
    z-index: 3;
}

.fixed-nav__list {
    display: grid;
    gap: 1em;
}

.fixed-nav__link {
    box-sizing: border-box;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: .36em;
    width: 5.33em;
    height: 5.83em;
    color: #fff;
    font-size: var(--fixed-nav__font-size);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    line-height: 1.16;
    background: var(--color-main);
    border-radius: .83em 0 0 .83em;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);

    @media (hover: hover) {
        &:hover {
            opacity: .6;
        }
    }
}

.fixed-nav__link--line {
    /*color: #4DC764;*/
    color: var(--color-default);
    background-color: #fff;

    .icon {
        width: 2.33em;
    }
}

.fixed-nav__link--company-search {
    .icon {
        width: 1.66em;
        background-color: #fff;
    }
}

.fixed-nav__link--job-search {
    .icon {
        width: 1.83em;
        background-color: #fff;
    }
}


/* button - ボタン
--------------------------------------------------------------- */

/* -- 基本スタイル */
.button {
    box-sizing: border-box;
    position: relative;
    display: block;
    width: fit-content;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .05em;
    line-height: 1.2;
    padding: .8em 2em;
    border-radius: 5px;
    cursor: pointer;

    /* -- 無効状態 */
    &.is-disabled {
        color: #fff;
        background-color: #ccc;
        border-color: #ccc;
        pointer-events: none;
        cursor: default;
    }
}

/* -- サイズ */
.button--large {
    font-size: var(--fs20px);
    border: 2px solid transparent;
}

.button--medium {
    font-size: var(--fs16px);
    padding-block: .86em;
    border: 2px solid transparent;
}

.button--small {
    font-size: var(--fs12px);
    padding-block: .86em;
    border: 1px solid transparent;
}

/* -- 配色パターン */
.button--primary {
    color: #fff;
    background-color: var(--color-main);
    border-color: var(--color-main);

    @media (hover: hover) {
        &:hover {
            opacity: 1;
            color: var(--color-main);
            background-color: #fff;
        }
    }
}

.button--secondary {
    color: var(--color-main);
    background-color: #fff;
    border-color: var(--color-main);

    @media (hover: hover) {
        &:hover {
            opacity: 1;
            color: #fff;
            background-color: var(--color-main);
        }
    }
}

.button--tertiary {
    color: var(--color-default);
    background-color: #fff;
    border-color: var(--color-default);

    @media (hover: hover) {
        &:hover {
            opacity: 1;
            color: #fff;
            background-color: var(--color-default);
        }
    }
}

.button--login {
    color: var(--color-default);
    padding-block: .66em;
    background-color: var(--color-yellow);
    border: var(--fs5px) solid var(--color-yellow);

    @media (hover: hover) {
        &:hover {
            opacity: 1;
            background-color: #FFEF8D;
            border-color: #FFEF8D;
        }
    }

    /* -- 無効状態 */
    &.is-disabled {
        color: var(--color-yellow);
        background-color: #fff;
        border-color: #FFF7C6;
        pointer-events: none;
        cursor: default;
    }
}


/* button - アイコン付きプロモボタン
--------------------------------------------------------------- */

/* -- 基準スタイル */
.promo-button {
    position: relative;
    display: grid;
    place-content: center;
    color: #fff;
    font-size: var(--fs27px);
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    background: var(--color-main);
    border-radius: 10px;

    &::after {
        content: "";
        position: absolute;
        right: var(--fs7px);
        bottom: var(--fs7px);
        display: block;
        width: var(--fs16px);
        min-width: 0;
        aspect-ratio: 1/1;
        background: url(../img/ui/search_icon_link.svg) center center / contain no-repeat;
    }
}


/* button - アイコン付きプロモボタン - LINE
--------------------------------------------------------------- */

.line-promo-button {
    position: relative;
    box-sizing: border-box;
    display: grid;
    place-content: center;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1/.835;
    font-weight: 700;
    text-align: center;
    line-height: 1;
    background: #fff;
    border: 4px solid #4DC764;
    border-radius: 10px;

    &::before {
        content: "";
        display: block;
        width: var(--fs63px);
        min-width: 0;
        aspect-ratio: 1/1;
        background: url(../img/ui/sns_original_icon_line.svg) center center / contain no-repeat;
        margin: 0 auto var(--fs15px);
    }

    &::after {
        content: "";
        position: absolute;
        right: var(--fs5px);
        bottom: var(--fs5px);
        display: block;
        width: var(--fs15px);
        min-width: 0;
        aspect-ratio: 1/1;
        background: url(../img/ui/sns_line_external.svg) center center / contain no-repeat;
    }

    .line-promo-button__caption {
        font-size: var(--fs12px);
        margin-bottom: var(--fs10px);
    }

    .line-promo-button__title {
        font-size: var(--fs18px);
    }

}


/* LINE button
--------------------------------------------------------------- */

.line-button {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: var(--fs49px) minmax(0, 1fr);
    align-items: center;
    gap: 0 var(--fs12px);
    width: fit-content;
    color: var(--color-default);
    font-size: var(--fs22px);
    font-weight: 600;
    height: var(--fs82px);
    padding-inline: var(--fs12px) var(--fs24px);
    background: #fff;
    border: var(--fs4px) solid #4CC764;
    border-radius: 100vmax;

    &::before {
        content: "";
        display: block;
        width: 100%;
        min-width: 0;
        aspect-ratio: 1/1;
        background: url(../img/ui/sns_original_icon_line.svg);
    }
}

.buttons-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
    margin-top: 1.5em;
}


/* button - 移住・企業認証関係
--------------------------------------------------------------- */

.marker-button {
    --border-width: var(--fs5px);
    position: relative;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: var(--fs54px) minmax(0, 1fr);
    align-items: center;
    gap: 0 var(--fs28px);
    width: 27.5rem;
    height: 7.5rem;
    color: #FFF3AD;
    font-size: var(--fs22px);
    font-weight: 700;
    background: var(--color-main);
    border: var(--border-width) solid #fff;
    border-radius: 20px;
    padding: 1em var(--fs22px);
    margin-inline: auto;
    line-height: 1.4;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);

    .icon {
        width: 100%;
        background-color: #fff;
    }

    &::after {
        content: "";
        position: absolute;
        right: calc(-1 * var(--border-width));
        bottom: calc(-1 * var(--border-width));
        display: block;
        width: var(--fs39px);
        min-width: 0;
        aspect-ratio: 1 / 1;
        background: #fff url(../img/ui/icon_right_medium.svg) center center / var(--fs10px) auto no-repeat;
        border-radius: 100vmax;
        margin: auto;
    }
}



/* Tag
--------------------------------------------------------------- */

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    font-size: var(--fs10px);
    line-height: 1;
}

.tag-list__item {
    box-sizing: border-box;
    display: block;
    color: var(--color-default);
    font-weight: 500;
    text-decoration: none;
    padding: .65em 1.6em;
    background: #ECF3F8;
    border-radius: 2px;
}

.tag-list__link-item {
    box-sizing: border-box;
    display: block;
    color: var(--color-default);
    font-weight: 500;
    text-decoration: none;
    padding: .65em 1.6em;
    background: #efefef;
    border: 1px solid #ccc;
    border-radius: 2px;
}



/* Category
--------------------------------------------------------------- */

.category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.3em;
    font-size: var(--fs10px);
    line-height: 1;
}

.category-list__item {
    display: block;
    text-decoration: none;
    background: #fff;
    border-radius: 100vmax;
    padding: .65em 1.91em;
    line-height: 1;

    &::before {
        content: "#";
    }
}



/* Search Form
--------------------------------------------------------------- */

.search-form-wrapper {
    position: relative;
}

.search-form-button {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 3em;
    height: 100%;
    font-size: var(--fs14px);
    background: url(../img/ui/search_form_icon.svg) right 1.07em center / 1.357em auto no-repeat;
    border: 0;
    overflow: hidden;
    cursor: pointer;
}

.search-form {
    box-sizing: border-box;
    width: 100%;
    font-size: var(--fs14px);
    font-weight: 500;
    /*background: #fff url(../img/ui/search_form_icon.svg) right 1.07em center / 1.357em auto no-repeat;*/
    padding: .65em 3em .65em 1.5em;
    border: 1px solid #ccc;
    border-radius: 100vmax;
    line-height: 1;

    &::placeholder {
        color: #ccc;
    }

    &:focus {
        border-color: var(--color-main);
        outline: none;
    }
}



/* keyword
--------------------------------------------------------------- */

.keyword-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1em .41em;
    font-size: var(--fs12px);
    line-height: 1;
}

.keyword-list__item {
    box-sizing: border-box;
    display: block;
    color: var(--color-main);
    font-weight: 700;
    text-decoration: none;
    padding: 1em 2.5em;
    border: 2px solid var(--color-main);
    background: #fff;
    border-radius: 100vmax;

    @media (hover: hover) {
        &:hover {
            opacity: 1;
            background-color: #ECF3F9;
        }
    }
}



/* conditions
--------------------------------------------------------------- */

.button-conditions {
    box-sizing: border-box;
    position: relative;
    display: block;
    width: 100%;
    color: var(--color-main);
    font-size: var(--fs14px);
    font-weight: 500;
    text-align: center;
    letter-spacing: .05em;
    line-height: 1;
    padding: .79em;
    background: #fff;
    border: 2px solid var(--color-main);
    border-radius: 10px;
    cursor: pointer;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        margin: auto;
    }

    &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 1.14em;
        bottom: 0;
        display: block;
        width: 1em;
        min-width: 0;
        aspect-ratio: 1/1;
        mask: url(../img/ui/conditions_icon.svg) center center / contain no-repeat;
        background-color: var(--color-main);
        margin: auto;
    }

    @media (hover: hover) {
        &:hover {
            opacity: 1;
            color: #fff;
            background-color: var(--color-main);

            &::after {
                background-color: #fff;
            }
        }
    }

    &.is-active {
        color: #fff;
        background-color: var(--color-main);

        &::after {
            background-color: #fff;
        }

        &::before {
            content: "選択中";
            left: .5em;
            color: var(--color-main);
            width: fit-content;
            height: fit-content;
            font-size: var(--fs12px);
            padding: .66em 1.1em;
            background-color: #FFF095;
            border-radius: 10px;
        }
    }
}



/* enter
--------------------------------------------------------------- */

.button-enter {
    box-sizing: border-box;
    display: block;
    width: 100%;
    color: #fff;
    font-size: var(--fs14px);
    font-weight: 500;
    letter-spacing: .05em;
    line-height: 1;
    padding: 1.28em;
    background: var(--color-main);
    border: 0;
    border-radius: 100vmax;
    cursor: pointer;

    @media (hover: hover) {
        &:hover {
            opacity: 1;
            color: var(--color-main);
            background-color: #ECF3F8;
        }
    }
}



/* Icon
--------------------------------------------------------------- */

/* -- アイコン基本スタイル */
.icon {
    display: block;
    min-width: 0;
    mask: center center / contain no-repeat;
    background-color: var(--color-pale-blue);
}

/* -- 新卒 */
.icon--beginner {
    width: 1.06em;
    aspect-ratio: 1/1.294;
    mask-image: url(../img/ui/icon_beginner.svg);
}

/* -- カレンダー */
.icon--calendar {
    width: 1.375em;
    aspect-ratio: 1/.955;
    mask-image: url(../img/ui/icon_calendar.svg);
}

/* -- 時間 */
.icon--clock {
    width: 1.375em;
    aspect-ratio: 1/1;
    mask-image: url(../img/ui/icon_clock.svg);
}

/* -- 地図(ピン) */
.icon--place {
    width: 1.18em;
    aspect-ratio: 1/1.158;
    mask-image: url(../img/ui/icon_place.svg);
}

/* -- 一般 ※求人用 */
.icon--general {
    width: 1.12em;
    aspect-ratio: 1/1.222;
    mask-image: url(../img/ui/icon_general.svg);
}

/* -- 一般 ※カテゴリ用 */
.icon--common {
    width: 1.12em;
    aspect-ratio: 1/1.222;
    mask-image: url(../img/ui/icon_general.svg);
    background-color: #666;
}

/* -- 分類(ビジネス) */
.icon--business {
    width: 1.375em;
    aspect-ratio: 1/.864;
    mask-image: url(../img/ui/icon_business.svg);
}

/* -- 注意 */
.icon--important {
    width: 1.625em;
    aspect-ratio: 1/.846;
    mask-image: url(../img/ui/icon_important.svg);
}

/* -- 外部リンク */
.icon--external {
    width: 1.12em;
    aspect-ratio: 1/1;
    mask-image: url(../img/ui/icon_external.svg);
    background-color: var(--color-main);
}

/* -- イベント */
.icon--event {
    width: 1.375em;
    aspect-ratio: 1/.909;
    mask-image: url(../img/ui/icon_event.svg);
}

/* -- 企業 */
.icon--company {
    width: 2.5em;
    aspect-ratio: 1/1.35;
    mask-image: url(../img/ui/icon_company.svg);
}

/* -- ニュース */
.icon--news {
    width: 3.125em;
    aspect-ratio: 1/1.04;
    mask-image: url(../img/ui/icon_news.svg);
}

/* -- イベントカレンダー */
.icon--calendar-event {
    width: 3.125em;
    aspect-ratio: 1/1;
    mask-image: url(../img/ui/icon_calendar_event.svg);
}

/* -- ムービー */
.icon--movie {
    width: 3.125em;
    aspect-ratio: 1/.891;
    mask-image: url(../img/ui/icon_movie.svg);
}

/* -- 地域・移住情報 */
.icon--location {
    width: 3.375em;
    aspect-ratio: 1/1;
    mask-image: url(../img/ui/icon_location.svg);
}

/* -- 移住支援金制度 */
.icon--iju {
    width: 3.375em;
    aspect-ratio: 1/.926;
    mask-image: url(../img/ui/icon_iju.svg);
}

/* -- 企業認証制度 */
.icon--nintei {
    width: 3.375em;
    aspect-ratio: 1/1;
    mask-image: url(../img/ui/icon_nintei.svg);
}

/* -- カテゴリ用専属 - 大学生等 */
.icon--students {
    width: 1.12em;
    aspect-ratio: 1/1.222;
    mask-image: url(../img/ui/icon_general.svg);
    background-color: #99B4FF;
}

/* -- カテゴリ用専属 - 高校生 */
.icon--highschool {
    width: 1.12em;
    aspect-ratio: 1/1.222;
    mask-image: url(../img/ui/icon_general.svg);
    background-color: #FAB5C2;
}

/* -- カテゴリ用専属 - 小中学生 */
.icon--kids {
    width: 1.12em;
    aspect-ratio: 1/1.222;
    mask-image: url(../img/ui/icon_general.svg);
    background-color: #C2E279;
}

/* -- カテゴリ用専属 - 保護者 */
.icon--parents {
    width: 1.12em;
    aspect-ratio: 1/1.222;
    mask-image: url(../img/ui/icon_general.svg);
    background-color: #99B4FF;
}

/* -- カテゴリ用専属 - 中途採用 */
.icon--midcareer {
    width: 1.375em;
    aspect-ratio: 1/1.222;
    mask-image: url(../img/ui/icon_midcareer.svg);
    background-color: #FFBD65;
}

/* -- カテゴリ用専属 - 新入社員 */
.icon--newgraduate {
    width: 1.06em;
    aspect-ratio: 1/1.294;
    mask-image: url(../img/ui/icon_beginner.svg);
    background-color: #96D7CA;
}

/* -- カテゴリ用専属 - 企業向け */
.icon--corporate {
    width: 1.1em;
    aspect-ratio: 1/1.35;
    mask-image: url(../img/ui/icon_company.svg);
}

/* -- ターム用専属 - 業種 */
.icon--industry {
    width: 1.06em;
    aspect-ratio: 1/1;
    mask-image: url(../img/ui/icon_industry.svg);
}

/* -- SNS公式 - LINE */
.icon--line {
    width: 2em;
    aspect-ratio: 1/1;
    mask: none;
    background: url(../img/ui/sns_original_icon_line.svg) center center / contain no-repeat;
}

/* -- 応募 - 送信中 */
.icon--send {
    width: 2em;
    aspect-ratio: 1/.623;
    mask: none;
    background: url(../img/ui/icon_send.svg) center center / contain no-repeat;
}

/* -- 応募 - 応募しました */
.icon--complete {
    width: 2em;
    aspect-ratio: 1/1;
    mask: none;
    background: url(../img/ui/icon_complete_fill.svg) center center / contain no-repeat;
}


/* NEW Mark
--------------------------------------------------------------- */

.new-mark {
    color: var(--color-default);
    font-size: var(--fs17px);
    font-weight: 700;
    background: #FEDC0D;
    line-height: 1;
}

.new-mark--circle {
    display: grid;
    place-content: center;
    min-width: 0;
    width: 4.1176em;
    aspect-ratio: 1/1;
    border-radius: 100vmax;
}

.new-mark--label {
    display: grid;
    place-content: center;
    width: fit-content;
    padding: .15em .86em;
    border-radius: 11px;
}



/* Pick up Mark
--------------------------------------------------------------- */

.pickup-mark {
    color: #3388FF;
    font-size: 2.375em;
    font-weight: 700;
    line-height: 1;
}


/* Form label
--------------------------------------------------------------- */

.form-label-indicator {
    display: grid;
    place-content: center;
    width: fit-content;
    font-size: var(--fs12px);
    font-weight: 500;
    padding: .28em .43em;
    background: #fff;
    line-height: 1;
    border: 1px solid;
    border-radius: 2px;

    &.is-required {
        color: #DC3732;
        border-color: #DC3732;
    }

    &.is-optional {
        color: var(--color-main);
        border-color: var(--color-main);
    }
}



/* checkbox
--------------------------------------------------------------- */

/* -- チェックボックス ラッパー要素 */
.checkbox {
    position: relative;
}

/* -- オリジナルアイコンの為、透過処理 */
.checkbox__input {
    appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;

    &:focus-visible+.checkbox__label {
        outline: 2px solid #000;

        &::before {
            background-color: #ECF3F8;
        }
    }
}

/* -- チェックボックス - 親コンテナ */
.checkbox__label {
    position: relative;
    display: grid;
    grid-template-columns: 1.25em minmax(0, 1fr);
    align-items: center;
    gap: .437em;
    width: fit-content;
    font-weight: 500;
    cursor: pointer;

    /* -- チェックマーク - 初期値 */
    &::before {
        content: "";
        box-sizing: border-box;
        display: block;
        min-width: 0;
        aspect-ratio: 1/1;
        background: #efefef;
        border: 1px solid #ccc;
        border-radius: .312em;
    }

    @media (hover: hover) {
        &:hover::before {
            background-color: #ECF3F8;
        }
    }
}

/* -- チェックマーク - チェック状態 */
.checkbox__input:checked+.checkbox__label::before {
    background: var(--color-main) url(../img/ui/checkbox_icon.svg) center center / .687em auto no-repeat;
    border: 0;
}



/* radio
--------------------------------------------------------------- */

/* -- ラジオボタン ラッパー要素 */
.radio {
    position: relative;
}

/* -- オリジナルアイコンの為、透過処理 */
.radio__input {
    appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;

    &:focus-visible+.radio__label {
        outline: 2px solid #000;

        &::before {
            background-color: #ECF3F8;
        }
    }
}

/* -- ラジオボタン - 親コンテナ */
.radio__label {
    position: relative;
    display: grid;
    grid-template-columns: 1.25em minmax(0, 1fr);
    align-items: center;
    gap: .437em;
    width: fit-content;
    font-weight: 500;
    cursor: pointer;

    /* -- チェックマーク - 初期値 */
    &::before {
        content: "";
        box-sizing: border-box;
        display: block;
        min-width: 0;
        aspect-ratio: 1/1;
        background: #efefef;
        border: 1px solid #ccc;
        border-radius: 100vmax;
    }

    @media (hover: hover) {
        &:hover::before {
            background-color: #ECF3F8;
        }
    }
}

/* -- チェックマーク - チェック状態 */
.radio__input:checked+.radio__label::before {
    background: #D2E8F8;
    border: .35em solid var(--color-main);
}



/* Contact Form
--------------------------------------------------------------- */

.contact-form {
    box-sizing: border-box;
    width: 100%;
    font-size: var(--fs14px);
    font-weight: 500;
    background: #fff;
    padding: .65em 3em .65em 1.5em;
    border: 1px solid #ccc;
    border-radius: .14em;
    line-height: 1;

    &::placeholder {
        color: #ccc;
    }

    &:focus {
        border-color: var(--color-main);
        outline: none;
    }
}

textarea.contact-form {
    padding: 1.5em;
    height: 10em;
    min-height: 5em;
    resize: vertical;
    line-height: 1.8;
}

.error-message {
    display: grid;
    grid-template-columns: 1.625em minmax(0, 1fr);
    align-items: center;
    gap: .2em;
    color: #DC3732;
    margin-top: .5em;

    &::before {
        content: "";
        display: block;
        width: 100%;
        aspect-ratio: 1 / .846;
        mask: url(../img/ui/icon_important.svg) center center / contain no-repeat;
        background-color: #DC3732;
    }
}

.complete-message {
    display: grid;
    grid-template-columns: 1.5em minmax(0, 1fr);
    align-items: center;
    gap: .625em;
    color: var(--color-main);
    margin-top: .5em;

    &::before {
        content: "";
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        mask: url(../img/ui/icon_complete.svg) center center / contain no-repeat;
        background-color: var(--color-main);
    }
}

#my-form button[type="submit"]:disabled,
#my-form button[type="button"]:disabled {
    pointer-events: none;
    background-color: #CCCCCC;
    border-color: transparent;
}

/* 確認・戻る・送信 */
#action-confirm,
#action-submit {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2em;

    & button[type="submit"] {
        margin-inline: 0;
    }

}


/* - 確認モード */
.contact-form.is-confirm-mode,
.contact-pulldown__select.is-confirm-mode {
    color: var(--color-default);
    font-size: var(--fs16px);
    border: 0;
    padding: 0;
}

input.is-confirm-mode:-webkit-autofill {
    color: var(--color-default);
    box-shadow: 0 0 0 1000px rgb(255, 255, 255) inset !important;
}

.contact-pulldown:has(.is-confirm-mode)::after {
    content: none;
}

@media print,
screen and (min-width: 1023px) {

    .event-form__group:has(.is-confirm-mode):not(.group--remarks, .group--policy) {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 1.5em;

        .event-form__label {
            margin-bottom: 0;
        }
    }

}

.event-form__group:has(.is-confirm-mode) {
    .checkbox__policy-text {
        display: none;
    }

    & textarea.contact-form {
        height: auto;
        min-height: 3em;
        resize: none;
    }
}




/* Sort Pulldown
--------------------------------------------------------------- */

.sort-pulldown {
    --sort-pulldown__font-size: var(--fs12px);
    position: relative;
    width: fit-content;
    height: fit-content;
    font-size: var(--sort-pulldown__font-size);
    line-height: 1;

    &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 1.25em;
        bottom: 0;
        display: block;
        width: 1.16em;
        min-width: 0;
        aspect-ratio: 1/.643;
        mask: url(../img/ui/select_icon.svg) center center / contain no-repeat;
        background-color: var(--color-main);
        margin: auto;
        pointer-events: none;
    }
}

.sort-pulldown__select {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    min-width: 11.83em;
    color: var(--color-main);
    font-size: var(--contact-pulldown__font-size);
    font-weight: 700;
    background: #fff;
    border: 1px solid var(--color-main);
    border-radius: .416em;
    padding: .96em 3.58em .96em 1.41em;
    line-height: 1;
    cursor: pointer;

    @media (hover: hover) {
        &:hover {
            background-color: var(--color-light-blue);
        }
    }

    &:focus {
        background-color: var(--color-light-blue);
    }
}



/* Contact Pulldown
--------------------------------------------------------------- */

.contact-pulldown {
    --contact-pulldown__font-size: var(--fs12px);
    position: relative;
    width: fit-content;
    height: fit-content;
    font-size: var(--contact-pulldown__font-size);
    line-height: 1;

    &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 1.25em;
        bottom: 0;
        display: block;
        width: 1.16em;
        min-width: 0;
        aspect-ratio: 1/.643;
        mask: url(../img/ui/select_icon.svg) center center / contain no-repeat;
        background-color: #ccc;
        margin: auto;
        pointer-events: none;
    }

    &:has(>.contact-pulldown__select__header) {
        display: flex;
        align-items: center;
    }
}

.contact-pulldown__select {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    min-width: 11.66em;
    color: var(--color-default);
    font-size: var(--contact-pulldown__font-size);
    font-weight: 500;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: .16em;
    padding: 1.1em 3.58em 1.1em 1.41em;
    line-height: 1;
    cursor: pointer;
}

.contact-pulldown__select__header {
    padding-right: 1em;
    font-size: var(--fs15px);
}

/* Company Tab 
--------------------------------------------------------------- */

.company-tab {
    --company-tab__font-size: var(--fs22px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 1.09em;
    width: fit-content;
    font-size: var(--company-tab__font-size);
    line-height: 1
}

.company-tab__item {
    min-width: 8.18em;
}

.company-tab__link {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    min-height: 2.72em;
    color: #fff;
    font-size: var(--company-tab__font-size);
    font-weight: 700;
    text-decoration: none;
    padding-inline: 1em;
    background: var(--color-main);

    &::before {
        content: "";
        display: block;
        min-width: 0;
        mask: center center / contain no-repeat;
        background-color: #fff;
    }

    &.company-tab__link--information::before {
        position: relative;
        top: .13em;
        width: 1.13em;
        aspect-ratio: 1/1.04;
        mask-image: url(../img/ui/company_tab_icon_information.svg);
        margin-right: .59em;
    }

    &.company-tab__link--pr::before {
        position: relative;
        top: .09em;
        width: 1.22em;
        aspect-ratio: 1/.815;
        mask-image: url(../img/ui/company_tab_icon_pr.svg);
        margin-right: .95em;
    }

    &.company-tab__link--job::before {
        width: 1.36em;
        aspect-ratio: 1/1;
        mask-image: url(../img/ui/company_tab_icon_job.svg);
        margin-right: .77em;
    }

    @media (hover: hover) {
        &:hover {
            opacity: 1;
            color: var(--color-main);
            background-color: #fff;

            &::before {
                background-color: var(--color-main);
            }
        }
    }
}

/* -- header型 */
.company-tab--header {
    .company-tab__link {
        border-radius: .9em .9em 0 0;

        @media (hover: hover) {
            &:hover {
                border-bottom: .27em solid #fff;
            }
        }

        &.current {
            color: var(--color-main);
            background-color: #fff;
            border-bottom: .27em solid #fff;

            &::before {
                background-color: var(--color-main);
            }
        }
    }
}

/* -- footer型 */
.company-tab--footer {
    margin-inline: auto;

    .company-tab__link {
        border-radius: 0 0 .9em .9em;
        margin-top: .27em;

        @media (hover: hover) {
            &:hover {
                border-top: .27em solid #fff;
                margin-top: 0;
            }
        }

        &.current {
            color: var(--color-main);
            background-color: #fff;
            border-top: .27em solid #fff;
            margin-top: 0;

            &::before {
                background-color: var(--color-main);
            }
        }
    }
}



/* Breadcrumb
--------------------------------------------------------------- */

.breadcrumb {
    --breadcrumb__font-size: var(--fs10px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1em 0;
    list-style: none;
    font-size: var(--breadcrumb__font-size);
    padding: 0;
    margin: 0;
    line-height: 1;

    & li:first-child a {
        display: grid;
        grid-template-columns: 1.2em 1fr;
        align-items: center;
        gap: 0 .6em;

        &::before {
            content: "";
            display: block;
            width: 100%;
            min-width: 0;
            aspect-ratio: 1/1;
            mask: url(../img/ui/breadcrumb_icon_home.svg) center center / contain no-repeat;
            background-color: var(--color-default);
        }
    }

    & li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    & li:not(:last-child)::after {
        content: "";
        display: block;
        width: .5em;
        min-width: 0;
        aspect-ratio: 1 / 1.6;
        mask: url(../img/ui/breadcrumb_icon_arrow.svg) center center / contain no-repeat;
        background-color: var(--color-default);
        margin: 0 1em;
    }

    @media (hover: hover) {
        &:hover {
            & li a:hover {
                opacity: 1;
                color: var(--color-main);
            }

            & li:first-child a:hover::before {
                background-color: var(--color-main);
            }
        }
    }
}



/* Label Button - corporate
--------------------------------------------------------------- */

.label-button-corporate {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.33em;
    align-items: center;
    gap: 1em;
    width: fit-content;
    min-height: 3.33em;
    color: var(--color-main);
    font-size: var(--fs12px);
    font-weight: 700;
    text-decoration: none;
    padding-inline: 1em .8em;
    border: 2px solid var(--color-main);
    border-radius: .416em;
    background: #fff;

    &::after {
        content: "";
        display: block;
        width: 100%;
        min-width: 0;
        aspect-ratio: 1/1;
        mask: url(../img/ui/icon_external.svg) center center / contain no-repeat;
        background-color: var(--color-main);
    }

    @media (hover: hover) {
        &:hover {
            opacity: 1;
            color: #fff;
            background-color: var(--color-main);

            &::after {
                background-color: #fff;
            }
        }
    }
}



/* Label Button - print
--------------------------------------------------------------- */

.label-button-print {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1.58em minmax(0, 1fr);
    align-items: center;
    gap: .5em;
    width: fit-content;
    min-height: 3.33em;
    color: var(--color-main);
    font-size: var(--fs12px);
    font-weight: 700;
    text-decoration: none;
    padding-inline: .58em;
    border: 2px solid var(--color-main);
    border-radius: .833em;
    background: var(--color-light-blue);
    cursor: pointer;

    &::before {
        content: "";
        display: block;
        width: 100%;
        min-width: 0;
        aspect-ratio: 1/1;
        mask: url(../img/ui/label_button_print_icon.svg) center center / contain no-repeat;
        background-color: var(--color-main);
    }

    &:active {
        background-color: #fff;
    }

    @media (hover: hover) {
        &:hover {
            opacity: 1;
            color: #fff;
            background-color: var(--color-main);

            &::before {
                background-color: #fff;
            }
        }
    }
}



/* Label Button - apply
--------------------------------------------------------------- */

.label-button-apply {
    position: relative;
    box-sizing: border-box;
    display: grid;
    align-items: center;
    width: fit-content;
    min-height: 3.33em;
    color: var(--color-default);
    font-size: var(--fs12px);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    padding-inline: 3.41em 1.66em;
    border-radius: .833em;
    border-color: transparent;
    background: var(--color-yellow);
    cursor: pointer;

    &::before {
        position: absolute;
        top: 0;
        bottom: 0;
        content: "";
        display: block;
        min-width: 0;
        aspect-ratio: 1/1;
        mask: center center / contain no-repeat;
        background-color: var(--color-default);
        margin-block: auto;
    }

    @media (hover: hover) {
        &:hover {
            opacity: 1;
            color: #fff;
            background-color: #444;

            &::before {
                background-color: #fff;
            }
        }
    }

    &.is-disabled {
        color: #fff;
        background-color: #ccc;
        pointer-events: none;

        &::before {
            background-color: #fff;
        }
    }

    /* -- 応募済み */
    &.is-applied {
        color: var(--color-main);
        background-color: #fff;
        border: 2px solid var(--color-main);
        pointer-events: none;

        &::before {
            mask: none;
            background: url(../img/ui/icon_complete_fill.svg) center center / contain no-repeat;
            background-color: none;
        }
    }
}

/* -- 応募 */
.label-button-apply--action {
    &::before {
        left: .75em;
        width: 1.5em;
        mask-image: url(../img/ui/label_button_apply_action.svg);
    }
}

/* -- 応募方法 */
.label-button-apply--method {
    &::before {
        left: .6em;
        width: 1.83em;
        mask-image: url(../img/ui/label_button_apply_method.svg);
    }
}

/* -- インターンシップ */
.label-button-apply--internship {
    min-width: 30em;

    &::before {
        left: .75em;
        width: 1.5em;
        mask-image: url(../img/ui/label_button_apply_action.svg);
    }
}

/* -- アクションボタン セットリスト */
.action-button-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: var(--fs15px);
}

.action-button-wrapper--footer {
    margin-top: 1.56em;
}


/* Label Button - favorite
--------------------------------------------------------------- */

.label-button-favorite {
    position: relative;
    box-sizing: border-box;
    display: grid;
    align-items: center;
    width: fit-content;
    min-height: 3.33em;
    color: #fff;
    font-size: var(--fs12px);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    padding-inline: 3.16em 1.66em;
    border: 2px solid var(--color-main);
    border-radius: .833em;
    background: var(--color-main);
    cursor: pointer;

    &::before {
        position: absolute;
        top: 0;
        left: .66em;
        bottom: 0;
        content: "";
        display: block;
        min-width: 0;
        width: 1.25em;
        aspect-ratio: 1/1;
        background: url(../img/ui/label_button_favorite_icon.svg) center center / contain no-repeat;
        margin-block: auto;
    }


    @media (hover: hover) {
        &:hover {
            opacity: 1;
            color: var(--color-main);
            background-color: #ECF3F8;

            &::before {
                background-image: url(../img/ui/label_button_favorite_icon_on.svg);
            }
        }
    }

    &.is-active {
        color: var(--color-main);
        background-color: #fff;

        &::before {
            background-image: url(../img/ui/label_button_favorite_icon_active.svg);
        }
    }
}



/* SNS ※企業アカウントリスト
--------------------------------------------------------------- */

.sns-links {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: .93em;
}

.sns-links__link {
    display: block;
    min-width: 0;
    width: 1.5em;
    aspect-ratio: 1/1;
    text-decoration: none;
    background: center center / contain no-repeat;
}

.sns-links__link--facebook {
    background-image: url(../img/ui/sns_links_icon_facebook.svg);
}

.sns-links__link--instagram {
    background-image: url(../img/ui/sns_links_icon_instagram.svg);
}

.sns-links__link--x {
    background-image: url(../img/ui/sns_links_icon_x.svg);
}

.sns-links__link--line {
    background-image: url(../img/ui/sns_links_icon_line.svg);
}



/* accessmap
--------------------------------------------------------------- */

.label-button-accessmap {
    display: block;
    width: fit-content;
    color: var(--color-main);
    font-size: var(--fs12px);
    font-weight: 500;
    text-align: center;
    line-height: 1;

    &::before {
        content: "";
        display: grid;
        place-content: center;
        min-width: 0;
        width: 2.083em;
        aspect-ratio: 1/1;
        background: var(--color-main) url(../img/ui/label_button_accessmap_icon.svg) center center / 1.16em auto no-repeat;
        border-radius: .416em;
        margin-bottom: .25em;
    }

    @media (hover: hover) {
        &:hover {
            opacity: .2;
        }
    }
}



/* heading - 汎用見出し
--------------------------------------------------------------- */

/* -- セクション */
.heading--section-1 {
    color: var(--color-default);
    font-size: var(--fs38px);
    font-weight: 700;
    line-height: 1.447;
}

/* -- 企業ページ */
.heading--page-1 {
    color: var(--color-main);
    font-size: var(--fs26px);
    font-weight: 700;
    line-height: 1.423;
    padding-bottom: .53em;
    border-bottom: 3px solid var(--color-main);
    border-radius: 1.5px;
    margin-bottom: .53em;
}

.heading--page-2 {
    position: relative;
    color: var(--color-main);
    font-size: var(--fs18px);
    font-weight: 700;
    line-height: 1.444;
    padding: .11em 0 .11em 1em;
    margin-bottom: 1.66em;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        display: block;
        width: .55em;
        height: 100%;
        border-radius: 100vmax;
        background-color: var(--color-main);
        margin: auto;
    }
}

.heading--page-3 {
    width: fit-content;
    font-size: var(--fs26px);
    font-weight: 700;
    line-height: 1.42;
    margin: 0 auto 1.8em;
}

.heading--page-4 {
    display: grid;
    grid-template-columns: var(--fs12px) minmax(0, 1fr) var(--fs12px);
    align-items: center;
    gap: 0 .57em;
    width: fit-content;
    font-size: var(--fs26px);
    font-weight: 700;
    text-align: center;
    text-indent: .2em;
    letter-spacing: .1em;
    line-height: 1.42;
    margin: 0 auto 1.46em;

    &::before,
    &::after {
        content: "";
        position: relative;
        top: .05em;
        display: block;
        width: 100%;
        height: 100%;
        border: var(--fs2px) solid var(--color-default);
        border-right: 0;
    }

    &::after {
        transform: scale(-1, 1);
    }
}

.heading--page-5 {
    color: var(--color-main);
    font-size: var(--fs22px);
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 1em;
}

.heading--page-6 {
    font-size: var(--fs32px);
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 1.4em;

    &::after {
        content: "";
        display: block;
        height: var(--fs14px);
        background: var(--color-light-blue);
        border-radius: 100vmax;
        margin-top: .3em;
    }
}


/* -- カードウィジェット */
.heading--widget-1 {
    color: var(--color-default);
    font-weight: 500;
    padding: .4em .937em;
    line-height: 1;
    background: var(--color-grayish-blue);
    border-radius: .625em;
    margin-bottom: .3em;
}

@media print,
screen and (min-width: 1024px) {
    .heading--pc-fs-32 {
        font-size: var(--fs32px);
    }
}

/* -- 掲載件数 */
.heading--result-1 {
    font-size: var(--fs20px);
    font-weight: 700;

    & span {
        color: var(--color-red);
    }
}



/* heading - デザイン見出し
--------------------------------------------------------------- */

/* -- 吹き出し風 */
.balloon-heading {
    position: relative;
    box-sizing: border-box;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: .375em 0;
    width: 11.875em;
    min-width: 0;
    aspect-ratio: 1/.421;
    color: #444;
    font-size: var(--fs16px);
    font-weight: 700;
    line-height: 1;
    background: #fff;
    border: 3px solid #666;
    margin: 0 auto;

    .balloon-heading__single {
        font-size: 1.625em;
    }

    .balloon-heading__en {
        font-size: 2.06em;
    }

    &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 1px;
        margin: auto;
        width: 1.437em;
        min-width: 0;
        aspect-ratio: 1/.64;
        background: #666;
        clip-path: polygon(100% 0, 0 0, 50% 100%);
        transform: translateY(calc(100% + 3px));
    }
}


/* hr separator - 区切り
--------------------------------------------------------------- */

.separator--solid {
    border: 0;
    height: 1px;
    line-height: 1;
    background: var(--color-main);
    margin: 4.06em 0;
}



/* table - 汎用テーブル
--------------------------------------------------------------- */

.data-table {
    position: relative;
    width: 100%;

    & th,
    & td {
        box-sizing: border-box;
        font-weight: 500;
        vertical-align: middle;
        padding: .625em 1.56em;
        border-block: 2px solid #ccc;
    }

    & th {
        width: 12.5em;
        background: var(--color-light-blue);
        line-height: 1.4;
    }

    & ul:not(.init) {
        & li {
            padding-left: 1em;
            text-indent: -1em;
        }

        & li:before {
            content: "・";
        }
    }

}


/* 所在地一覧用
--------------------------------------------------------------- */
.multi-address-box {
    margin-bottom: 0.6em;
    display: flex;
    gap: 0 0.5em;
    flex-wrap: wrap;

    .multi-address-box__name {
        width: 100%;
    }

    .label-button-accessmap {
        display: inline-block;
        gap: 0.25em;
        align-items: center;
        line-height: 1em;
        font-size: 0.8em;
        vertical-align: middle;
        margin-left: 0.5em;

        &:before {
            display: inline-block;
            width: 1.5em;
            background-size: 0.9em auto;
            margin-bottom: 0.15em;
            margin-right: 0.3em;
            vertical-align: middle;
        }
    }

    &:last-child {
        margin-bottom: 0;
    }
}



/* Parts Set - 各コンポーネントの組み合わせ
--------------------------------------------------------------- */

/* -- ラベルテキスト付きアイコン */
.labeled-icon {
    --labeled-icon__icon-max-size: 1.375em;
    display: grid;
    grid-template-columns: var(--labeled-icon__icon-max-size) minmax(0, 1fr);
    gap: 0 .375em;
    align-items: start;
    line-height: 1.4;

    .icon {
        max-width: var(--labeled-icon__icon-max-size);
    }

    .labeled-icon__icon {
        display: grid;
        place-content: center;
    }

    .labeled-icon__label {
        position: relative;
        top: -.062em;
    }
}


/* -- ラベルテキスト付きアイコンのリスト */
.labeled-icon-list {
    display: flex;
    flex-wrap: wrap;
    gap: .71em 1.42em;

    .labeled-icon {
        align-items: center;
        font-size: var(--fs14px);
    }

    .icon {
        font-size: var(--fs16px);
    }
}


/* List - お知らせ / ニュース
--------------------------------------------------------------- */

.article-list {

    .article-list__item:first-child {
        border-top: 2px solid #ccc;
    }

    .labeled-icon {
        align-items: center;
    }
}

.article-list__item {
    border-bottom: 2px solid #ccc;
}

.article-list__link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0 1.43em;
    text-decoration: none;
    padding: 1.5em 5.43em 1.5em 0;
    background: url(../img/ui/article_list_icon_arrow.svg) right 2.31em center / .81em auto no-repeat;
}

.article-list__title {
    grid-column: span 2;
}


/* List - 募集中の求人一覧
--------------------------------------------------------------- */

.job-list {
    .job-list__item:first-child {
        border-top: 2px solid var(--color-light-blue);
    }

    .labeled-icon {
        align-items: center;
    }

    .labeled-icon__label {
        font-size: var(--fs14px);
    }
}

.job-list__item {
    border-bottom: 2px solid var(--color-light-blue);
}

.job-list__link {
    display: block;
    padding-block: 1.25em .9em;
}

.job-list__title {
    color: var(--color-main);
    font-weight: 700;
    margin-top: .2em;
}


/* Tab - ページ切替
--------------------------------------------------------------- */

.tab-nav {
    --tab-nav__font-size: var(--fs22px);
    max-width: max(55.5rem, 888px);
    ;
    font-size: var(--tab-nav__font-size);
    margin: 0 auto 1.68em;
}

.tab-nav__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
}

.tab-nav__link {
    display: grid;
    place-content: center;
    width: 100%;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    padding-bottom: .63em;
    border-bottom: 5px solid #ccc;

    &.current {
        color: var(--color-main);
        border-color: var(--color-main);
    }

    @media (hover: hover) {
        &:hover {
            opacity: 1;
            color: var(--color-main);
            border-color: var(--color-main);
        }
    }
}


/* Splide - カルーセルスライダー
--------------------------------------------------------------- */

.splide-navigation {

    .splide__pagination {
        gap: var(--fs10px);

        .splide__pagination__page {
            box-sizing: border-box;
            width: var(--fs10px);
            height: auto;
            min-width: 0;
            aspect-ratio: 1/1;
            padding: 0;
            margin: 0;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 100vmax;
            cursor: pointer;

            &.is-active {
                background: var(--color-main);
                border: 0;
            }
        }
    }

    .splide__arrows {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--fs17px);
        margin: var(--fs45px) 0 0;
    }

    .splide__arrow {
        box-sizing: border-box;
        width: var(--fs26px);
        min-width: 0;
        aspect-ratio: 1/1;
        padding: 0;
        margin: 0;
        background: url(../js/splide/splide_arrow.svg) center center / contain no-repeat;
        border: 0;
        cursor: pointer;

        &.splide__arrow--next {
            transform: scale(-1, 1);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .splide__list {
        transition: transform .6s ease !important;
    }
}


/* - ページャーのみ版 */
.splide-navigation.is-pagination-only {
    margin: 0;

    .splide__pagination {
        margin-left: auto;
    }

    .splide__arrows {
        margin-top: var(--fs14px);
    }

    .splide__arrow {
        display: none;
    }
}

/* - スライドが全枚表示されており、カルーセルページャーが非表示の時は矢印も削除する */
.splide:not(.is-overflow) .splide__arrows {
    display: none;
}


/* Pager - ページャー
--------------------------------------------------------------- */

.pagination {
    /*margin-top: 3.75em;*/

    .wp-pagenavi {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: .3125em;
        line-height: 1;
        margin-top: 3.75em;

        & a,
        & span:not(.extend) {
            position: relative;
            box-sizing: border-box;
            display: grid;
            place-content: center;
            min-width: 2.25em;
            min-height: 2.25em;
            font-weight: 500;
            padding: .5em;
            background: #fff;
            border: .06em solid #ccc;
            border-radius: .187em;

            @media (hover: hover) {
                &:hover {
                    opacity: 1;
                    color: var(--color-main);
                    border-color: var(--color-main);
                }
            }
        }

        & span.current {
            color: var(--color-main);
            border-color: var(--color-main);
        }

        .previouspostslink {
            transform: scale(-1, 1);
        }

        .nextpostslink,
        .previouspostslink {
            color: transparent !important;

            &::before {
                content: "";
                position: absolute;
                inset: 0;
                display: block;
                width: .5em;
                min-width: 0;
                aspect-ratio: 1/1.5;
                mask: url(../img/ui/pagination_icon_arrow.svg) center center / contain no-repeat;
                background-color: var(--color-default);
                margin: auto;
            }

            @media (hover: hover) {
                &:hover::before {
                    background-color: var(--color-main);
                }
            }
        }
    }
}



/* Totop - 上に戻る
--------------------------------------------------------------- */

.totop-button__link {
    box-sizing: border-box;
    position: relative;
    display: block;
    width: var(--fs46px);
    min-width: 0;
    aspect-ratio: 1/1;
    height: 0;
    padding-top: 100%;
    text-decoration: none;
    background: #fff url(../img/ui/totop_icon_arrow.svg) center center / 1.5rem auto no-repeat;
    overflow: hidden;

    @media (hover: hover) {
        &:hover {
            opacity: 1;
            background-color: var(--color-light-blue);
        }
    }
}



/* Share SNS - ページフッター
--------------------------------------------------------------- */

.share-buttons {
    display: grid;
    grid-template-columns: repeat(3, 7.5rem);
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    font-size: var(--fs16px);
    line-height: 1;
    margin: 0 auto;
}

.share-buttons__link {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    height: var(--fs50px);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border-radius: .312rem;
    background: #fff;

    &::before {
        content: "";
        display: block;
        min-width: 0;
        aspect-ratio: 1/1;
        background: center center / contain no-repeat;
    }

    &.share-buttons__link--x {
        &::before {
            width: 1.56rem;
            background-image: url(../img/ui/sns_original_icon_x.svg);
            margin-right: .75em;
        }
    }

    &.share-buttons__link--facebook {
        color: #0b66ff;
        padding-right: .25em;

        &::before {
            width: 1.875rem;
            background-image: url(../img/ui/sns_original_icon_facebook.svg);
            margin-right: 1em;
        }
    }

    &.share-buttons__link--line {
        color: #4dc764;
        padding-right: .5em;

        &::before {
            width: 1.875rem;
            background-image: url(../img/ui/sns_original_icon_line.svg);
            margin-right: 1.12em;
        }
    }

    @media (hover: hover) {
        &:hover {
            opacity: .6;
        }
    }

}



/* 目次
--------------------------------------------------------------- */

.toc {
    opacity: 1;
    position: relative;
    display: block;
    color: var(--color-main);
    font-weight: 700;
    padding: var(--fs15px) var(--fs40px);
    background: var(--color-light-blue);
    border-radius: .312em;
    margin-bottom: 3.75em;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
    z-index: 3;
    transition: opacity .3s;

    &.toc--sticky {

        position: sticky;
        top: calc(var(--header-height) + 1em);

        /*
        ※アンカースクロールマージンと同じ値
        
        ※本来はsticky固定で済むが、目次展開時(トグル)のレイアウトシフトが酷いためfixed方式に代替
        擬似的にsticky状態の発動を再現するために.toc-sentinelの位置を活用
        */
    }

    &.is-sticky {
        /*
        position: fixed;
        top: calc(var(--header-height) + 1em);
*/
        padding-block: var(--fs3px);

        .button--small {
            padding-block: var(--fs5px);
        }
    }

    &.is-opacity {
        opacity: 0;
    }

}

.toc__header {
    display: grid;
    grid-template-columns: 1fr 8.5rem;
    justify-content: space-between;
    align-items: center;
}

.toc__toggle-button {
    width: 100%;

    &::after {
        content: "";
        position: absolute;
        top: 0;
        right: .66em;
        bottom: 0;
        display: block;
        width: 1em;
        min-width: 0;
        aspect-ratio: 1/1;
        mask: url(../img/ui/switch_icon__open.svg) center center / contain no-repeat;
        background-color: var(--color-main);
        margin: auto;
    }

    &.is-active::after {
        mask-image: url(../img/ui/switch_icon__close.svg);
    }

    @media (hover: hover) {
        &:hover::after {
            background-color: #fff;
        }
    }
}

.toc__title {
    font-size: 1.125em;
}

.toc .toc__title {
    cursor: pointer;
}


.toc__body {
    display: none;
    position: relative;
    padding: 0 0 1em;

    &::before {
        content: "";
        display: block;
        height: 5px;
        border-radius: 3px;
        background: var(--color-pale-blue);
        margin: var(--fs15px) 0 1.5em;
    }

    & ol {
        counter-reset: toc-counter;
        list-style: none;
    }

    & ol>li {
        padding-left: 1.7em;
        text-indent: -1.7em;
        counter-increment: toc-counter;
    }

    & ol a {
        display: block;
        width: fit-content;
        color: var(--color-main);
        margin-bottom: .8em;

        &::before {
            content: counters(toc-counter, '-') " ";
            font-weight: 700;
            margin-right: 1em;
        }

        &::after {
            content: "";
            display: inline-block;
            width: .81em;
            min-width: 0;
            aspect-ratio: 1/.769;
            mask: url(../img/ui/toc_icon.svg) center center / contain no-repeat;
            background-color: var(--color-main);
            margin-left: .6em;
        }
    }
}



/* カード - 基礎スタイル
--------------------------------------------------------------- */

.splide__slide .card {
    height: 100%;
}

.card {
    --card__font-size: var(--fs16px);
    box-sizing: border-box;
    position: relative;
    font-size: var(--card__font-size);
    line-height: 1.875;
    background: #fff;
    border-radius: 2.5em;

    .new-mark {
        position: absolute;
        top: calc(-1 * (var(--fs20px)));
        left: calc(-1 * (var(--fs20px)));
        z-index: 1;
    }

    & a:not([class]) {
        display: block;
    }
}

.card__thumbnail {
    overflow: hidden;

    & img {
        width: 100%;
        min-width: 0;
        height: auto;
        object-fit: cover;
        object-position: center center;
        border-radius: .625em;
        overflow: hidden;
    }
}

.card__text-link[target="_blank"] {
    &::after {
        content: "";
        position: relative;
        top: .1em;
        display: inline-block;
        min-width: 0;
        width: 1.12em;
        aspect-ratio: 1 / 1;
        mask: url(../img/ui/icon_external.svg) center center / contain no-repeat;
        background-color: var(--color-main);
    }
}

/* -- イベント型 */
.card--event {
    display: grid;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "media"
        "title"
        "meta";
    width: 330px;
    padding: 2.5em;

    .new-mark {
        top: calc(-1 * (var(--fs10px)));
        left: calc(-1 * (var(--fs10px)));
    }

    .card__media {
        grid-area: media;
        margin-bottom: 1.25em;
    }

    .card__title {
        grid-area: title;
        margin-bottom: 1.25em;

        & h3 {
            font-size: 100%;
            font-weight: 500;
        }

        & a {
            display: block;
            color: var(--color-main);
            font-weight: 700;
            text-decoration: underline dotted #95C1FF;
            -webkit-text-decoration: underline dotted #95C1FF;
            text-underline-offset: .5em;
        }
    }

    .card__meta {
        grid-area: meta;
        display: grid;
        align-items: start;
        height: fit-content;
        gap: .812em;
    }

    .card__thumbnail img {
        aspect-ratio: 1/.712;
    }
}

@media print,
screen and (min-width: 1024px) {

    /* -- イベント横型 */
    .card--event.card--horizontal {
        display: grid;
        grid-template-areas: "media title"
            "media meta";
        grid-template-columns: 55.97% 1fr;
        grid-template-rows: auto 1fr;
        align-items: start;
        gap: 0 1.56em;
        width: 100%;

        .new-mark {
            top: calc(-1 * (var(--fs20px)));
            left: calc(-1 * (var(--fs20px)));
        }

        .card__media {
            margin-bottom: 0;
        }

        .card__title {
            margin-bottom: 1.25em;
        }

        .card__meta {
            display: grid;
            gap: .812em;
        }

        .card__thumbnail img {
            aspect-ratio: 1/.712;
        }
    }

}

/* -- 求人型 */
.card--job {
    display: grid;
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas: "header"
        "title"
        "company-name"
        "meta"
        "media";
    width: 360px;
    line-height: 1.56;
    padding: 1.875em 1.875em 3.75em;

    .labeled-icon {
        font-size: .875em;
        align-items: center;
        line-height: 1;
    }

    .card__header {
        grid-area: header;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: .93em;
        margin-bottom: 1em;
    }

    .card__title {
        grid-area: title;
        margin-bottom: 1.2em;

        & h3 {
            font-size: 100%;
            font-weight: 700;

            & a {
                color: var(--color-main);
                font-size: var(--fs19px);
                font-weight: 700;
                text-decoration: underline dotted #95C1FF;
                -webkit-text-decoration: underline dotted #95C1FF;
                text-underline-offset: .5em;
                line-height: 1.78;
            }

        }
    }

    .card__company-name {
        grid-area: company-name;
        margin-bottom: 1em;
    }

    .card__meta {
        grid-area: meta;
        display: grid;
        align-items: start;
        gap: .812em;
        margin-bottom: 2em;
    }

    .card__media {
        grid-area: media;
    }

    .card__thumbnail {
        display: grid;
        place-content: center;
        min-width: 0;
        aspect-ratio: 1/.712;
    }

    .card__thumbnail img {
        display: block;
        max-width: 15.625em;
        object-fit: fill;
        /*
        aspect-ratio: 1/.712;
        */
        margin-inline: auto;
    }
}


@media print,
screen and (min-width: 1024px) {

    /* -- 求人 横型 */
    .card--job.card--horizontal {
        grid-template-rows: auto auto auto 1fr;
        grid-template-areas: "header header"
            "title media"
            "company-name media"
            "meta media";
        grid-template-columns: 1fr 42.67%;
        align-items: start;
        gap: 0 1.56em;
        width: 760px;


        .card__header {
            margin-bottom: 1em;
        }

        .card__title {
            margin-bottom: 1.4em;
        }

        .card__company-name {
            margin-bottom: 1em;
        }

        .card__meta {
            margin-bottom: 0;
        }

        .card__thumbnail img {
            max-width: none;
        }
    }
}

/* -- ピックアップ型 */
.card--pickup {
    display: grid;
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas: "company-name"
        "meta"
        "description"
        "tag";
    width: 360px;
    line-height: 1.56;
    padding: 3.125em 1.75em 3.56em;

    .labeled-icon {
        font-size: .875em;
        align-items: center;
        line-height: 1;

        .icon {
            font-size: var(--fs16px);
        }
    }

    .card__company-name {
        grid-area: company-name;
        margin-bottom: 1.6em;

        & h3 a {
            color: var(--color-main);
            font-size: var(--fs19px);
            font-weight: 700;
            text-decoration: underline dotted #95C1FF;
            -webkit-text-decoration: underline dotted #95C1FF;
            text-underline-offset: .5em;
            line-height: 1.78;
        }
    }

    .card__meta {
        grid-area: meta;
        display: flex;
        flex-wrap: wrap;
        gap: .812em;
        margin-bottom: 2em;
    }

    .card__description {
        grid-area: description;
        line-height: 1.875;
        margin-bottom: .8em;

        .card__description-item:not(:last-child) {
            margin-bottom: 1em;
        }

    }


    .card__tag {
        grid-area: tag;
    }
}


/* -- 最近チェックした企業 */
.card--company-checked {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-areas: "company-name"
        "meta";
    width: 360px;
    line-height: 1.56;
    padding: 3.125em 1.75em 2.5em;

    .labeled-icon {
        font-size: .875em;
        align-items: center;
        line-height: 1;

        .icon {
            font-size: var(--fs16px);
        }
    }

    .card__company-name {
        grid-area: company-name;
        margin-bottom: 1.6em;

        & h3 a {
            color: var(--color-main);
            font-size: var(--fs19px);
            font-weight: 700;
            text-decoration: underline dotted #95C1FF;
            -webkit-text-decoration: underline dotted #95C1FF;
            text-underline-offset: .5em;
            line-height: 1.78;
        }
    }

    .card__meta {
        grid-area: meta;
        display: flex;
        flex-wrap: wrap;
        gap: .812em;
    }
}


/* -- 企業情報 - フル */
.card--company-full {
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "meta meta"
        "company-name media"
        "description media"
        "tag date";
    grid-template-columns: minmax(0, 1fr) 37.31%;
    gap: 0 1.875em;
    width: 100%;
    padding: 2.187em 2.5em 2.5em;

    .pickup-mark {
        position: absolute;
        top: -.7em;
        right: var(--fs40px);
    }

    .labeled-icon {
        font-size: .875em;
        align-items: center;
        line-height: 1;

        .icon {
            font-size: var(--fs16px);
        }
    }

    .card__meta {
        grid-area: meta;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: .812em;
        margin-bottom: 1.25em;
    }

    .card__company-name {
        grid-area: company-name;
        color: var(--color-main);
        margin-bottom: 1.4em;

        & a {
            display: block;
            color: var(--color-main);
            font-size: var(--fs22px);
            font-weight: 700;
            text-decoration: underline dotted #95C1FF;
            -webkit-text-decoration: underline dotted #95C1FF;
            text-underline-offset: .5em;
        }
    }

    .card__description {
        grid-area: description;
        margin-bottom: 2em;
    }

    .card__description-item:not(:last-child) {
        margin-bottom: 1em;
    }

    @media print,
    screen and (min-width: 1024px) {
        .card__description-item--2col {
            display: grid;
            grid-template-columns: 4.625em minmax(0, 1fr);
            gap: 0 .625em;

            .heading--widget-1 {
                box-sizing: border-box;
                display: grid;
                place-content: center;
                height: 100%;
                text-align: center;
                padding-inline: 0;
                line-height: 1.4;
            }
        }
    }

    .card__tag {
        grid-area: tag;
    }

    .card__media {
        grid-area: media;

        .card__thumbnail {
            display: grid;
            min-width: 0;
            aspect-ratio: 1/.96;
            margin-bottom: 1.875em;
        }

        .card__thumbnail img {
            object-fit: fill;
            object-position: top;
        }
    }

    .card__date {
        display: grid;
        place-content: end end;
        font-size: .75em;
        text-align: right;
    }
}


/* -- 求人情報 - フル */
.card--job-full {
    display: grid;
    grid-template-rows: auto auto auto auto auto 1fr;
    grid-template-areas: "header header"
        "title title"
        "company-name media"
        "meta media"
        "tag media"
        "description media"
        "description date";
    grid-template-columns: minmax(0, 1fr) 37.31%;
    gap: 0 1.875em;
    align-items: start;
    width: 100%;
    padding: 1.625em 2.5em 2.375em;

    .labeled-icon {
        font-size: .875em;
        align-items: center;
        line-height: 1;

        .icon {
            font-size: var(--fs16px);
        }
    }

    .card__header {
        grid-area: header;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: .93em;
        margin-bottom: 1em;
    }

    .card__title {
        grid-area: title;
        margin-bottom: 1.4em;

        & h3 {
            font-size: 100%;
            font-weight: 700;

            & a {
                color: var(--color-main);
                font-size: var(--fs22px);
                font-weight: 700;
                text-decoration: underline dotted #95C1FF;
                -webkit-text-decoration: underline dotted #95C1FF;
                text-underline-offset: .5em;
            }
        }
    }

    .card__company-name {
        grid-area: company-name;
        margin-bottom: 1em;
    }

    .card__meta {
        grid-area: meta;
        display: flex;
        flex-wrap: wrap;
        gap: .812em;
        margin-bottom: 1em;
    }

    .card__tag {
        grid-area: tag;
        margin-bottom: 1.5em;
    }

    .card__description {
        grid-area: description;
    }

    .card__description-item:not(:last-child) {
        margin-bottom: 1em;
    }

    .card__media {
        grid-area: media;
        margin-bottom: 1em;

        .card__thumbnail {
            display: grid;
            min-width: 0;
            aspect-ratio: 1/.96;
        }

        .card__thumbnail img {
            object-fit: contain;
            object-position: top;
        }
    }

    .card__date {
        display: grid;
        place-content: end end;
        font-size: .75em;
        text-align: right;
        margin-bottom: 0.6em;
        line-height: 1.6;
    }
}


/* -- ボイス */
.card--voice {
    width: fit-content;
}

.card--voice .card__block {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "header"
        "media"
        "body";
    width: 460px;
    padding: 1.56em 2.5em 2.5em;

    .card__header {
        grid-area: header;

        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 1em;
        align-items: center;
        line-height: 1;
        margin-bottom: 1em;

        &::before {
            content: "";
            display: block;
        }
    }

    .card__category {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 1em;
        align-items: center;
        min-width: 11.78em;
        font-size: var(--fs14px);
        font-weight: 700;

        &::before,
        &::after {
            content: "";
            display: block;
            width: 2px;
            height: 1.14em;
            background: #ccc;
            border-radius: 1px;
            transform: rotate(-20deg);
        }

        &::after {
            transform: rotate(20deg);
            margin-left: auto;
        }
    }

    .card__date {
        font-size: var(--fs12px);
        text-align: right;
    }

    .card__media {
        grid-area: media;
        margin-bottom: 1.875em;
    }

    .card__thumbnail img {
        aspect-ratio: 1/.686;
    }

    .card__body {
        grid-area: body;

        & a {
            display: block;
            color: var(--color-main);
            text-decoration: underline dotted #95C1FF;
            -webkit-text-decoration: underline dotted #95C1FF;
            text-decoration-thickness: 2px;
            text-underline-offset: .5em;
        }

    }

    .card__company-name {
        font-size: var(--fs12px);
    }

    .card__person-name {
        font-weight: 700;
    }

    .card__person-profile {
        font-size: var(--fs12px);
    }
}


/* ムービー
--------------------------------------------------------------- */

/* -- リンクアイテム */
.movie-item {
    --movie__font-size: var(--fs16px);
    box-sizing: border-box;
    position: relative;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "header"
        "media"
        "body";
    width: 320px;
    font-size: var(--movie__font-size);

    .new-mark {
        position: absolute;
        top: calc(-1 * (var(--fs20px)));
        left: calc(-1 * (var(--fs20px)));
        z-index: 1;
    }

    .movie-item__header {
        margin-bottom: 1.125em;
    }

    .movie-item__thumbnail img {
        aspect-ratio: 1/.563;
    }

    .movie-item__body {
        margin-bottom: .6em;

        & a {
            display: block;
            color: var(--color-main);
            text-decoration: underline dotted #95C1FF;
            -webkit-text-decoration: underline dotted #95C1FF;
            text-decoration-thickness: 2px;
            text-underline-offset: .5em;
        }

    }

    .movie-item__date {
        font-size: var(--fs12px);
        line-height: 1;
        margin-bottom: .5em;
    }

    .movie-item__company-name {
        font-weight: 700;
    }

}

.movie-item__thumbnail {
    position: relative;
    overflow: hidden;

    & img {
        width: 100%;
        min-width: 0;
        height: auto;
        object-fit: cover;
        object-position: center center;
        overflow: hidden;
    }
}

/* -- ラージサイズ */
.movie-item.movie-item--large {
    width: 100%;
    margin-bottom: var(--fs65px);

    .movie-item__thumbnail::after {
        content: "";
        display: block;
        position: absolute;
        right: var(--fs20px);
        bottom: var(--fs20px);
        display: block;
        width: var(--fs53px);
        min-width: 0;
        aspect-ratio: 1/1;
        background: url(../img/ui/icon_playmark.svg) center center / contain no-repeat;
    }
}

.movie-item__column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1em;

    .movie-item__body {
        margin-bottom: 0;
    }

    .category-list {
        margin-top: var(--fs20px);
        margin-left: auto;
        justify-content: flex-end;
    }
}

.company-pr-section .movie-item__column .category-list__item {
    padding: 0;
    background: none;
    border-radius: 0;
}


/* -- ※追加：モーダルボタン型の場合 */
.movie-item__thumbnail__modal-button {
    box-sizing: border-box;
    display: block;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    appearance: none;
    cursor: pointer;

    @media (any-hover: hover) {
        &:hover {
            opacity: .5;
        }
    }
}

.movie-item__meta__modal-button {
    box-sizing: border-box;
    display: block;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    appearance: none;
    cursor: pointer;

    color: var(--color-main);
    font-size: var(--movie__font-size);
    text-decoration: underline dotted #95C1FF;
    -webkit-text-decoration: underline dotted #95C1FF;
    text-decoration-thickness: 2px;
    text-underline-offset: .5em;
    text-align: left;
    line-height: 1.9;

    @media (any-hover: hover) {
        &:hover {
            opacity: .5;
        }
    }
}


/* ムービー　埋め込みiframe
--------------------------------------------------------------- */

.wp-block-youtube__wrapper iframe {
    width: 100%;
    height: auto;
    min-width: 0;
    aspect-ratio: 1 / .563;
}


/* ムービー　再生マーク付・タグ、日付無し
--------------------------------------------------------------- */

.play-movie-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--fs60px) 6.75%;

    .play-movie-item .play-movie-item__thumbnail::after {
        width: var(--fs30px);
        right: var(--fs10px);
        bottom: var(--fs10px);
    }

}

.play-movie-item {

    .play-movie-item__thumbnail {
        position: relative;
        display: block;
        margin-bottom: 1em;

        &::after {
            content: "";
            display: block;
            position: absolute;
            right: var(--fs20px);
            bottom: var(--fs20px);
            display: block;
            width: var(--fs53px);
            min-width: 0;
            aspect-ratio: 1/1;
            background: url(../img/ui/icon_playmark.svg) center center / contain no-repeat;
        }

        & img {
            width: 100%;
            min-width: 0;
            height: auto;
            aspect-ratio: 1 / .563;
            object-fit: cover;
            object-position: center center;
            overflow: hidden;
        }
    }

    .play-movie-item__title {
        font-weight: 700;
        line-height: 1.5;
        padding-bottom: .4em;
        border-bottom: 1px solid var(--color-default);
        margin-bottom: .4em;
    }
}


/* QA → ※ACFテンプレート側に統合
--------------------------------------------------------------- */
/*
.qa-index {
    padding: 1.5em 3em;
    background: var(--color-light-blue);
    border-radius: 5px;
    margin-bottom: 3.125em;

    .qa-index__list {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5em 2em;
        line-height: 1.54;
    }

    & a {
        color: var(--color-main);
        font-weight: 500;

        &::after {
            content: "";
            display: inline-block;
            width: .81em;
            min-width: 0;
            aspect-ratio: 1 / .769;
            mask: url(../img/ui/toc_icon.svg) center center / contain no-repeat;
            background-color: var(--color-main);
            margin-left: .6em;
        }
    }
}

.qa-list__item {

    &:not(:last-child) {
        margin-bottom: 4em;
    }

    & dt,
    & dd {
        position: relative;
        display: grid;
        grid-template-columns: var(--fs40px) minmax(0, 1fr);
        gap: var(--fs10px);

        &::before {
            content: "";
            display: grid;
            place-content: center;
            font-size: var(--fs18px);
            font-weight: 700;
            width: 100%;
            min-width: 0;
            aspect-ratio: 1/1;
            border-radius: 100vmax;
            line-height: 1;
            margin-top: -.2em;
        }
    }

    & dt::before {
        content: "Q";
        color: #fff;
        background: var(--color-main);
    }

    & dd::before {
        content: "A";
        background: var(--color-yellow);
    }

    & dt {
        color: var(--color-main);
        font-size: var(--fs18px);
        font-weight: 700;
        margin-bottom: 2em;
    }
}
*/

/* アコーディオン → ※ACFテンプレート側に統合
--------------------------------------------------------------- */
/*
.details {
    position: relative;
    display: block;
    padding: var(--fs15px) var(--fs40px);
    background: #FFFCE3;
    border-radius: .312em;
    margin-bottom: 3.75em;
    z-index: 3;
    transition: opacity .3s;
}

.details__header {
    display: grid;
    grid-template-columns: 1fr 8.5rem;
    justify-content: space-between;
    align-items: center;
}

.details__title {
    color: var(--color-main);
    font-size: var(--fs18px);
    font-weight: 700;
}

.details__body {
    display: none;
    position: relative;
    padding: 0 0 1em;

    &::before {
        content: "";
        display: block;
        height: 5px;
        border-radius: 3px;
        background: var(--color-pale-blue);
        margin: var(--fs15px) 0 1.5em;
    }
}

.details__toggle-button {
    width: 100%;

    &::after {
        content: "";
        position: absolute;
        top: 0;
        right: .66em;
        bottom: 0;
        display: block;
        width: 1em;
        min-width: 0;
        aspect-ratio: 1/1;
        mask: url(../img/ui/switch_icon__open.svg) center center / contain no-repeat;
        background-color: var(--color-main);
        margin: auto;
    }

    &.is-active::after {
        mask-image: url(../img/ui/switch_icon__close.svg);
    }

    @media (hover: hover) {
        &:hover::after {
            background-color: #fff;
        }
    }
}
*/


/* サブリンク - テキスト
--------------------------------------------------------------- */

.sublink-wrapper {
    text-align: right;
    margin-top: 1.56em;
}

.sublink {
    position: relative;
    display: inline-block;
    color: var(--color-default);
    font-size: var(--fs14px);
    border-bottom: 1px solid var(--color-default);
    text-underline-offset: .5em;

    &::after {
        content: "";
        display: inline-block;
        width: .714em;
        min-width: 0;
        aspect-ratio: 1/1;
        background: var(--color-default);
        clip-path: polygon(0 0, 0% 100%, 100% 50%);
        margin-left: .5em;
    }
}


/* ふくしまで働く情報コーナー - バナーブロック
--------------------------------------------------------------- */

/* -- トップ用カラム型 */
.works-banner-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--fs40px) 2.7%;
}

.works-banner {
    text-align: left;

    .works-banner__link {
        display: block;
        text-decoration: none;
    }

    .works-banner__thumbnail {
        box-sizing: border-box;
        border-radius: 40px;
        border: var(--fs10px) solid var(--color-light-blue);
        overflow: hidden;
        margin-bottom: 1.625em;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);


        & img {
            width: 100%;
            min-width: 0;
            aspect-ratio: 1/.67;
            object-fit: cover;
            object-position: center center;
            overflow: hidden;
        }
    }

    .works-banner__category {
        display: block;
        width: fit-content;
        font-size: var(--fs10px);
        text-decoration: none;
        text-box-trim: trim-both;
        background: var(--color-light-blue);
        border-radius: 100vmax;
        padding: .65em 1.91em;
        margin-bottom: 1.2em;
        line-height: 1;
    }

    .works-banner__title {
        color: var(--color-main);
        font-weight: 700;
        text-decoration: underline dotted #95C1FF;
        -webkit-text-decoration: underline dotted #95C1FF;
        text-decoration-thickness: 2px;
        text-underline-offset: .5em;
        line-height: 2;

        &::after {
            content: "";
            position: relative;
            top: .1em;
            display: inline-block;
            min-width: 0;
            width: 1em;
            aspect-ratio: 1 / 1;
            mask: url(../img/ui/icon_external.svg) center center / contain no-repeat;
            background-color: var(--color-main);
            margin-left: .5em;
        }
    }
}

/* -- 下層用縦型 */
.works-banner-list.works-banner-list--row {
    max-width: 46.8rem;
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fs40px) 0;

    &:not(:last-child) {
        margin-bottom: 4em;
    }

    .works-banner__link {
        display: grid;
        grid-template-columns: 16.25rem minmax(0, 1fr);
        align-items: start;
        gap: 0 var(--fs30px);
    }

    .works-banner__thumbnail {
        margin-bottom: 0;
    }

    .works-banner__title {
        margin: .8em 0;
    }
}


/* 関連リンク → ACFブロックに移動
--------------------------------------------------------------- */
/*
.banner-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2em 0;
}

.banner-list__link {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 0 1em;
    width: fit-content;

    & img {
        width: 100%;
    }
}

.banner-list__title {
    color: var(--color-main);
    font-weight: 700;

    &::after {
        content: "";
        display: inline-block;
        min-width: 0;
        width: 1.12em;
        aspect-ratio: 1/1;
        mask: url(../img/ui/icon_external.svg) center center / contain no-repeat;
        background-color: var(--color-main);
        margin-left: .5em;
    }
}
*/


/* ローディング
--------------------------------------------------------------- */
.loader-animation,
.loader-animation:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
}

.loader-animation {
    margin: 30px auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(30, 111, 224, 0.2);
    border-right: 1.1em solid rgba(30, 111, 224, 0.2);
    border-bottom: 1.1em solid rgba(30, 111, 224, 0.2);
    border-left: 1.1em solid var(--color-main);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


/* 以下、SP ※390pxベース
--------------------------------------------------------------- */

@media screen and (max-width: 1023px) {

    /* SP Title - ページタイトル
    --------------------------------------------------------------- */

    .page-title-wrapper {
        min-height: 13.33vw;
        margin-bottom: 7.69vw;

        .button {
            font-size: 3.08vw;
            padding-inline: .58em;
            border-width: .51vw;
        }

        .page-title {
            min-height: 13.33vw;
        }
    }

    .page-title {
        grid-template-columns: 12.31vw 1fr;
        gap: 0 3.85vw;
        font-size: 8.21vw;
        line-height: 1.2;
        margin-left: 0;
    }

    .page-title-single {
        font-size: 5.64vw;
        line-height: 1.44;
        margin: 0 auto 7.69vw;
    }



    /* SP - Fixed Nav
    --------------------------------------------------------------- */

    .fixed-nav {
        --fixed-nav__font-size: 2.56vw;
        top: auto;
        left: 0;
        right: 0;
        bottom: 4.62vw;
        padding-inline: var(--container-padding);
    }

    .fixed-nav__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0 2.56vw;
    }

    .fixed-nav__link {
        display: grid;
        align-items: center;
        width: 100%;
        height: 12.31vw;
        border-radius: .5em;
        box-shadow: none;
    }

    .fixed-nav__link--line {
        color: var(--color-default);
        padding-left: 6.15vw;
        background: url(../img/ui/sns_original_icon_line.svg) 1.79vw center / 7.44vw auto no-repeat,
            url(../img/ui/sns_line_external.svg) right .77vw bottom .77vw / 2.31vw auto no-repeat,
            #fff;
        border: .77vw solid #4DC764;
    }

    .fixed-nav__link--company-search {
        padding-left: 1em;
        background: url(../img/ui/search_icon_company.svg) 2.05vw center / 6.41vw auto no-repeat,
            url(../img/ui/search_icon_link.svg) right 1.03vw bottom 1.03vw / 3.33vw auto no-repeat,
            var(--color-main);
    }

    .fixed-nav__link--job-search {
        padding-left: 1em;
        background: url(../img/ui/search_icon_job.svg) 2.05vw center / 6.41vw auto no-repeat,
            url(../img/ui/search_icon_link.svg) right 1.03vw bottom 1.03vw / 3.33vw auto no-repeat,
            var(--color-main);
    }



    /* SP - button - ボタン
    --------------------------------------------------------------- */

    /* -- SP - 基本スタイル */
    .button {
        border-radius: 1.28vw;
    }

    /* -- SP - サイズ */
    .button--large {
        font-size: 5.13vw;
        border: .51vw solid;
    }

    .button--medium {
        font-size: 4.1vw;
        border: .51vw solid;
    }

    .button--small {
        font-size: 3.08vw;
        border: .26vw solid;
    }

    /* -- SP 配色パターン */
    .button--login {
        border: .77vw solid var(--color-yellow);
    }


    /* SP button - アイコン付きプロモボタン
    --------------------------------------------------------------- */

    /* -- SP 基準スタイル */
    .promo-button {
        font-size: 5.64vw;
        border-radius: 2.56vw;

        &::after {
            right: 2.05vw;
            bottom: 2.05vw;
            width: 6.15vw;
        }
    }


    /* SP LINE button
    --------------------------------------------------------------- */

    .line-button {
        grid-template-columns: 12.56vw minmax(0, 1fr);
        gap: 0 3.08vw;
        font-size: 5.64vw;
        height: 21.03vw;
        padding-inline: 3.08vw 6.15vw;
        border-width: 1.03vw;
    }


    /* SP button - 移住・企業認証関係
    --------------------------------------------------------------- */

    .marker-button {
        --border-width: .77vw;
        position: relative;
        grid-template-columns: 11.54vw minmax(0, 1fr);
        place-content: center;
        gap: 0 5.13vw;
        width: auto;
        height: 24.1vw;
        min-height: 0;
        text-align: left;
        font-size: 1.125em;
        border-radius: 3.85vw;
        padding: 0 3.85vw;
        line-height: 1.4;
        box-shadow: 0px .77vw 1.54vw rgba(0, 0, 0, 0.16);

        .icon {
            width: 100%;
            background-color: #fff;
        }

        &::after {
            width: 6.41vw;
            background-size: 1.79vw;
        }
    }


    /* SP - Tag
    --------------------------------------------------------------- */

    .tag-list {
        font-size: 2.56vw;
    }

    .tag-list__item {
        border-radius: .51vw;
    }

    .tag-list__link-item {
        border-width: .26vw;
        border-radius: .51vw;
    }



    /* SP - Category
    --------------------------------------------------------------- */

    .category-list {
        font-size: 2.56vw;
    }

    .category-list__item {
        border-width: .26vw;
    }



    /* SP - Search Form
    --------------------------------------------------------------- */

    .search-form-button {
        font-size: 3.59vw;
    }

    .search-form {
        /*font-size: 3.59vw;*/
        font-size: max(4.1vw, 16px);
        border-width: .26vw;
    }



    /* SP - keyword
    --------------------------------------------------------------- */

    .keyword-list {
        font-size: 3.08vw;
    }

    .keyword-list__item {
        border-width: .51vw;
    }



    /* SP - conditions
    --------------------------------------------------------------- */

    .button-conditions {
        font-size: 3.59vw;
        border-width: .51vw;
        border-radius: 2.56vw;

        &.is-active {
            &::before {
                font-size: 3.08vw;
                border-radius: 2.56vw;
            }
        }
    }



    /* SP - enter
    --------------------------------------------------------------- */

    .button-enter {
        font-size: 3.59vw;
    }



    /* SP - Icon
    --------------------------------------------------------------- */

    .icon {
        font-size: 1em;
    }



    /* SP - NEW Mark
    --------------------------------------------------------------- */

    .new-mark {
        font-size: 4.36vw;
    }

    .new-mark--label {
        border-radius: 2.82vw;
    }



    /* SP - Pick up Mark
    --------------------------------------------------------------- */

    .pickup-mark {
        font-size: 9.74vw;
    }


    /* SP - Form label
    --------------------------------------------------------------- */

    .form-label-indicator {
        font-size: 3.08vw;
        border-width: .26vw;
        border-radius: .51vw;
    }



    /* SP - checkbox
    --------------------------------------------------------------- */

    /* -- SP -チェックボックス - 親コンテナ */
    .checkbox__label {


        /* -- SP -チェックマーク - 初期値 */
        &::before {
            border-width: .26vw;
        }
    }


    /* SP - radio
    --------------------------------------------------------------- */

    /* -- SP -ラジオボタン - 親コンテナ */
    .radio__label {

        /* -- SP -チェックマーク - 初期値 */
        &::before {
            border-width: .26vw;
        }
    }



    /* SP - Contact Form
    --------------------------------------------------------------- */

    .contact-form {
        /*font-size: 3.59vw;*/
        font-size: max(4.1vw, 16px);
        border-width: .26vw;
        border-radius: 1.28vw;
    }

    /* - SP 確認モード */
    .contact-form.is-confirm-mode,
    .contact-pulldown__select.is-confirm-mode {
        font-size: 3.59vw;
    }



    /* SP - Sort Pulldown
    --------------------------------------------------------------- */

    .sort-pulldown {
        --sort-pulldown__font-size: 3.08vw;
    }

    .sort-pulldown__select {
        border-width: .26vw;
    }



    /* SP - Contact Pulldown
    --------------------------------------------------------------- */

    .contact-pulldown {
        --contact-pulldown__font-size: 3.08vw;
    }

    .contact-pulldown__select {
        border-width: .26vw;
    }



    /* SP - Company Tab 
    --------------------------------------------------------------- */

    .company-tab {
        --company-tab__font-size: 3.08vw;
        gap: 0 2.31vw;
    }

    .company-tab__item {
        min-width: 23.08vw;
    }

    .company-tab__link {
        min-height: 9.74vw;
        padding-inline: 2.31vw;
    }

    /* -- SP header型 */
    .company-tab--header {
        .company-tab__link {
            border-radius: 2.56vw 2.56vw 0 0;
        }
    }

    /* -- SP footer型 */
    .company-tab--footer {
        margin-inline: auto;

        .company-tab__link {
            border-radius: 0 0 2.56vw 2.56vw;
        }
    }



    /* SP - Breadcrumb
    --------------------------------------------------------------- */

    .breadcrumb {
        --breadcrumb__font-size: 2.56vw;
        gap: .5em 0;
        line-height: 1.6;
    }



    /* SP - Label Button - corporate
    --------------------------------------------------------------- */

    .label-button-corporate {
        font-size: 3.08vw;
        border-width: .51vw;
    }



    /* SP - Label Button - print
    --------------------------------------------------------------- */

    .label-button-print {
        font-size: 3.08vw;
        border-width: .51vw;
    }



    /* SP - Label Button - apply
    --------------------------------------------------------------- */

    .label-button-apply {
        font-size: 3.08vw;
    }

    /* -- SP アクションボタン セットリスト */
    .action-button-list {
        gap: 0;
        justify-content: space-between;
    }

    /* -- ※ ボタンが2つだけの時 */
    .action-button-list:not(:has(.kando-job-apply-container)) {
        gap: 2.56vw;
        justify-content: flex-end;
    }

    .action-button-wrapper--footer {
        margin-top: 8.97vw;
    }

    /* -- SP インターンシップ */
    .label-button-apply--internship {
        min-width: 100%;
    }



    /* SP - Label Button - favorite
    --------------------------------------------------------------- */

    .label-button-favorite {
        font-size: 3.08vw;
        border-width: .51vw;
    }



    /* SP - SNS ※企業アカウントリスト
    --------------------------------------------------------------- */

    .sns-links {}



    /* SP - accessmap
    --------------------------------------------------------------- */

    .label-button-accessmap {
        font-size: 3.08vw;
    }



    /* SP - heading - 見出し
    --------------------------------------------------------------- */

    /* -- SP - セクション */
    .heading--section-1 {
        font-size: 8.21vw;

        &.is-sp-compact {
            font-size: 7.18vw;
        }
    }

    /* -- SP - 企業ページ */
    .heading--page-1 {
        font-size: 4.1vw;
        line-height: 1.5;
        padding-bottom: .875em;
        border-width: .77vw;
        border-radius: calc(.77vw / 2);
        margin-bottom: .875em;
    }

    .heading--page-2 {
        font-size: 4.62vw;
    }

    .heading--page-3 {
        font-size: 5.64vw;
        margin-bottom: 1.36em;
    }

    .heading--page-4 {
        grid-template-columns: 2.05vw minmax(0, 1fr) 2.05vw;
        font-size: 4.62vw;
        margin: 0 auto 5.13vw;

        &::before,
        &::after {
            top: .05em;
            border-width: .51vw;
        }
    }

    .heading--page-5 {
        font-size: 4.62vw;
        line-height: 1.88;
        margin-bottom: 1em;
    }

    .heading--page-6 {
        font-size: 6.67vw;

        &::after {
            height: 2.31vw;
        }
    }


    /* -- SP - カードウィジェット */
    .heading--widget-1 {}


    /* -- SP 掲載件数 */
    .heading--result-1 {
        font-size: 4.62vw;
    }


    /* SP - heading - デザイン見出し
    --------------------------------------------------------------- */

    /* -- SP - 吹き出し風 */
    .balloon-heading {
        font-size: 3.59vw;
        border-width: .77vw;

        &::after {
            transform: translateY(calc(100% + .51vw));
        }
    }


    /* SP hr separator - 区切り
    --------------------------------------------------------------- */

    .separator--solid {
        height: .26vw;
        margin: 10.26vw 0;
    }


    /* SP table - 汎用テーブル
    --------------------------------------------------------------- */

    .data-table {
        border-top: 2px solid #ccc;

        & th,
        & td {
            display: block;
            vertical-align: top;
            padding: .6em 0;
            border: 0;
            border-bottom: 2px solid #ccc;
        }

        & th {
            width: 100%;
        }
    }

    /* SP 所在地一覧用
	--------------------------------------------------------------- */
    .multi-address-box {
        flex-wrap: wrap;
        gap: 0 0.5em;

        .multi-address-box__postcode {
            width: 100%;
        }

        .label-button-accessmap {
            font-size: 0.8em;
            margin-bottom: 0.1em;

            &:before {
                width: 1.5em;
                background-size: 0.9em auto;
                margin-bottom: 0;
            }
        }

        &:last-child {
            margin-bottom: 0;
        }
    }


    /* SP - Parts Set - 各コンポーネントの組み合わせ
    --------------------------------------------------------------- */

    /* -- SP ラベルテキスト付きアイコン */
    .labeled-icon {
        --labeled-icon__icon-max-size: 5.64vw;
        font-size: 4.1vw;
    }


    /* -- SP ラベルテキスト付きアイコンのリスト */
    .labeled-icon-list {
        gap: 1.54vw 3.08vw;

        .labeled-icon {
            font-size: 3.59vw;
        }

        .icon {
            font-size: 4.1vw;
        }
    }


    /* SP - List - お知らせ / ニュース
    --------------------------------------------------------------- */

    .article-list {
        .article-list__item:first-child {
            border-width: .51vw;
        }

        .article-list__date,
        .labeled-icon {
            font-size: 3.59vw;
        }
    }

    .article-list__item {
        border-width: .51vw;
    }

    .article-list__link {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0 1.43em;
        text-decoration: none;
        padding: 1.625em 2.93em 1.625em 0;
        background-position: right .625em center;
    }

    .article-list__title {
        grid-column: span 2;
    }


    /* SP List - 募集中の求人一覧
    --------------------------------------------------------------- */

    .job-list {
        .job-list__item:first-child {
            border-width: .51vw;
        }

        .labeled-icon__label {
            font-size: 3.59vw;
        }
    }

    .job-list__item {
        border-width: .51vw;
    }

    .job-list__link {
        padding-block: 1.25em .9em;
    }

    .job-list__title {
        font-size: 4.1vw;
        margin-top: .2em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    /* SP - Tab - ページ切替
    --------------------------------------------------------------- */

    .tab-nav {
        --tab-nav__font-size: 4.62vw;
        margin-bottom: 1.68em;
    }

    .tab-nav__link {
        padding-bottom: 3.59vw;
        border-width: 1.28vw;
    }


    /* SP Splide - カルーセルスライダー
    --------------------------------------------------------------- */

    .splide-navigation {

        .splide__pagination {
            gap: 2.56vw;

            .splide__pagination__page {
                width: 2.56vw;
            }
        }

        .splide__arrows {
            gap: 4.36vw;
            margin: 7.69vw 0 0;
        }

        .splide__arrow {
            width: 6.67vw;
        }
    }

    /* - SP ページャーのみ版 */
    .splide-navigation.is-pagination-only {
        .splide__pagination {
            margin-inline: auto;
        }

        .splide__arrows {
            margin-top: 3.08vw;
        }
    }



    /* SP - Pager - ページャー
    --------------------------------------------------------------- */

    .pagination {
        /*margin-top: 10.26vw;*/

        .wp-pagenavi {
            margin-top: 10.26vw;
        }
    }



    /* SP - Totop - 上に戻る
    --------------------------------------------------------------- */

    .totop-button__link {
        width: 11.79vw;
        background-size: 6.15vw auto;
    }



    /* SP 目次
    --------------------------------------------------------------- */

    .toc {
        padding: 5.13vw;
        border-radius: 1.28vw;
        box-shadow: 0px 0px 2.56vw rgba(0, 0, 0, 0.16);
        margin-bottom: 7.18vw;

        &.is-sticky {
            padding-block: .77vw;

            .button--small {
                padding-block: 1.28vw;
            }

        }
    }

    .toc__header {
        grid-template-columns: 1fr 23.08vw;
    }

    .toc__toggle-button {

        &::after {
            right: .66em;
            width: 1em;
        }
    }

    .toc__title {
        font-size: 1.125em;
    }

    .toc__body {
        padding: 0 0 1em;

        &::before {
            height: 1.28vw;
            border-radius: .77vw;
            margin: 3.85vw 0 5.13vw;
        }

        & ol a {
            margin-bottom: .8em;
        }
    }



    /* SP - Share SNS - ページフッター
    --------------------------------------------------------------- */

    .share-buttons {
        grid-template-columns: repeat(3, 27.69vw);
        gap: 3.33vw;
        font-size: 3.59vw;
    }

    .share-buttons__link {
        height: 11.54vw;
        border-radius: 1.28vw;

        &.share-buttons__link--x {
            &::before {
                width: 5.9vw;
            }
        }

        &.share-buttons__link--facebook {
            padding-right: .25em;

            &::before {
                width: 6.92vw;
            }
        }

        &.share-buttons__link--line {
            padding-right: .5em;

            &::before {
                width: 6.92vw;
            }
        }
    }



    /* SP - カード - 基礎スタイル
    --------------------------------------------------------------- */

    .card {
        --card__font-size: 4.1vw;
        border-radius: 7.69vw;

        .new-mark {
            position: absolute;
            top: -2.56vw;
            left: -2.56vw;
        }
    }

    .card__thumbnail {
        & img {
            border-radius: 2.56vw;
        }
    }

    /* -- SP イベント型 */
    .card--event {
        width: 89.74vw;
        padding: 10.26vw;

        .new-mark {
            top: -2.56vw;
            left: -2.56vw;
        }

        .card__meta {
            .labeled-icon {
                font-size: 4.1vw;
            }
        }

        .card__thumbnail img {
            aspect-ratio: 1/.659;
        }
    }


    /* -- SP 求人型 */
    .card--job {
        width: 84.62vw;
        padding: 6.41vw 5.13vw 5.13vw;

        .card__title h3 a {
            font-size: 1.18em;
        }

        .card__thumbnail {
            border-radius: 2.56vw;
            overflow: hidden;
        }

        .card__thumbnail img {
            max-width: none;
        }
    }


    /* -- SP ピックアップ型 */
    .card--pickup {
        width: 84.62vw;
        padding: 12.82vw 5.13vw 6.92vw;

        .labeled-icon {
            .icon {
                font-size: 4.1vw;
            }
        }

        .card__company-name {

            & h3 a {
                font-size: 1.18em;
            }
        }

    }


    /* -- SP 最近チェックした企業 */
    .card--company-checked {
        width: 84.62vw;
        padding: 12.82vw 5.13vw 6.92vw;

        .labeled-icon {
            .icon {
                font-size: 4.1vw;
            }
        }

        .card__company-name {
            & h3 a {
                font-size: 1.18em;
            }
        }

    }


    /* -- SP 企業情報 - フル */
    .card--company-full {
        display: grid;
        grid-template-rows: auto auto auto auto auto 1fr;
        grid-template-areas: "meta"
            "company-name"
            "description"
            "tag"
            "media"
            "date";
        grid-template-columns: minmax(0, 1fr);
        gap: 1em 0;
        padding: 10.26vw 5.13vw 6.41vw;

        .pickup-mark {
            top: -.7em;
            right: 5.13vw;
        }

        .labeled-icon {
            .icon {
                font-size: 4.1vw;
            }
        }

        .card__meta {
            margin-bottom: .937em;
        }

        .card__company-name {
            margin-bottom: .6em;

            & a {
                font-size: 1.18em;
            }

        }

        .card__description {
            grid-area: description;
            margin-bottom: .5em;
        }

        .card__description-item:not(:last-child) {
            margin-bottom: 1em;
        }

        .card__tag {
            margin-bottom: 1em;
        }

        .card__media {
            .card__thumbnail {
                display: block;
                aspect-ratio: auto;
                margin-bottom: 1.5em;
            }
        }

        .card__date {
            font-size: 3.08vw;
        }
    }


    /* -- SP 求人情報 - フル */
    .card--job-full {
        display: grid;
        grid-template-rows: auto auto auto auto auto auto auto 1fr;
        grid-template-areas: "header"
            "title"
            "company-name"
            "meta"
            "tag"
            "description"
            "media"
            "date";
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 6.41vw 5.13vw;

        .labeled-icon {
            .icon {
                font-size: 4.1vw;
            }
        }

        .card__header {
            margin-bottom: 1em;
        }

        .card__title {
            margin-bottom: 1em;

            & h3 a {
                font-size: 1.18em;
            }
        }

        .card__company-name {
            margin-bottom: 1em;
        }

        .card__meta {
            margin-bottom: 1em;
        }

        .card__tag {
            margin-bottom: 1.5em;
        }

        .card__description {
            margin-bottom: 1em;
        }

        .card__description-item:not(:last-child) {
            margin-bottom: 1em;
        }

        .card__media {
            margin-bottom: 1em;

            .card__thumbnail {
                aspect-ratio: auto;
            }

            .card__thumbnail img {
                /*aspect-ratio: 1/.96;*/
            }
        }

        .card__date {
            font-size: 3.08vw;
        }
    }


    /* -- SP ボイス */
    .card--voice .card__block {
        width: 92.31vw;
        padding: 1.25em 2.5em 2.18em;

        .card__category {
            gap: 1.3em;
            min-width: 0;
            font-size: 3.08vw;
        }

        .card__date {
            font-size: 2.56vw;
        }

        .card__media {
            margin-bottom: 1.875em;
        }

        .card__thumbnail img {
            aspect-ratio: 1/.726;
        }

        .card__company-name {
            font-size: 3.08vw;
        }

        .card__person-profile {
            font-size: 3.08vw;
        }
    }


    /* SP ムービー
    --------------------------------------------------------------- */

    /* -- SP リンクアイテム */
    .movie-item {
        --movie__font-size: 4.1vw;
        width: 82.05vw;

        .movie-item__date {
            font-size: 3.08vw;
        }
    }


    /* -- SP ラージサイズ */
    .movie-item.movie-item--large {
        margin-bottom: 7.69vw;

        .movie-item__thumbnail::after {
            width: 13.59vw;
            right: auto;
            bottom: auto;
            inset: 0;
            margin: auto;
        }
    }

    .movie-item__column {
        grid-template-columns: minmax(0, 1fr);
        gap: .8em;

        .category-list {
            margin-top: 0;
            margin-left: 0;
            justify-content: flex-start;
        }
    }


    /* SP ムービー　再生マーク付・タグ、日付無し
    --------------------------------------------------------------- */

    .play-movie-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 7.69vw;

        .play-movie-item .play-movie-item__thumbnail::after {
            width: 13.59vw;
            right: auto;
            bottom: auto;
            inset: 0;
            margin: auto;
        }
    }

    .play-movie-item {
        .play-movie-item__thumbnail {
            margin-bottom: 1em;

            &::after {
                width: 13.59vw;
                right: auto;
                bottom: auto;
                inset: 0;
                margin: auto;
            }
        }
    }


    /* SP QA → ※ACFテンプレート側に統合
    --------------------------------------------------------------- */
    /*
    .qa-index {
        padding: 1em 1.5em;
        border-radius: 1.28vw;

        .qa-index__list {
            gap: 1em;
        }

        & li {
            width: 100%;
        }

        & a {
            font-size: .9em;
        }
    }

    .qa-list__item {
        & dt {
            font-size: 1em;
        }
    }
*/

    /* SP アコーディオン → ※ACFテンプレート側に統合
    --------------------------------------------------------------- */
    /*
    .details {
        padding: 5.13vw;
        border-radius: 1.28vw;
        margin-bottom: 7.18vw;
    }

    .details__header {
        grid-template-columns: 1fr 23.08vw;
    }

    .details__title {
        font-size: 1.125em;
    }

    .details__body {
        padding: 0 0 1em;

        &::before {
            height: 1.28vw;
            border-radius: .77vw;
            margin: 3.85vw 0 5.13vw;
        }
    }

    .details__toggle-button {
        width: 100%;
    }
*/


    /* SP サブリンク - テキスト
    --------------------------------------------------------------- */

    .sublink {
        font-size: 3.59vw;
    }


    /* SP ふくしまで働く情報コーナー - バナーブロック
    --------------------------------------------------------------- */

    /* -- SP トップ用カラム型 */
    .works-banner-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7.69vw 6.41vw;
    }

    .works-banner {
        .works-banner__thumbnail {
            border-radius: 7.69vw;
            border-width: 1.54vw;
            margin-bottom: 3.85vw;
            box-shadow: 0px .77vw 1.54vw rgba(0, 0, 0, 0.16);
        }

        .works-banner__category {
            font-size: var(--fs10px);
            padding: .65em 1.6em;
            margin-bottom: 2.56vw;
        }

        .works-banner__title {
            font-size: 3.59vw;
        }
    }


    /* -- SP 下層用縦型 */
    .works-banner-list.works-banner-list--row {
        max-width: none;
        padding-inline: var(--container-padding);
        gap: 15.38vw 0;

        .works-banner__link {
            display: block;
            grid-template-columns: minmax(0, 1fr);
            gap: 0;
        }

        .works-banner__thumbnail {
            border-width: 2.56vw;
            margin-bottom: 0;
        }

        .works-banner__title {
            font-size: 1em;
            margin: 1.2em 0 .8em;
        }
    }


    /* SP 関連リンク → ACFブロックに移動
    --------------------------------------------------------------- */
    /*
    .banner-list {
        gap: 3em 0;
    }

    .banner-list__link {
        grid-template-columns: minmax(0, 1fr);
        gap: .5em;
        width: auto;
    }

    .banner-list__title {
        line-height: 1.56;
    }

    .banner-list__caption {
        font-size: .9em;
    }
*/

}




/* 以下、プリント
--------------------------------------------------------------- */

@media print {}