@charset "utf-8";

:root {
    --color-default: #444;
    --color-main: #1e6fe0;
    --color-light-blue: #ECF3F8;
    --color-pale-blue: #a8d5f5;
    --color-grayish-blue: #D2E8F8;
    --color-yellow: #fedc0d;
    --color-red: #DC3732;
    --header-inner-width: max(80rem, 1280px);
    --container-width: max(69.25rem, 1108px);
    --container-padding: 43px;
    --container-margin: 60px;
    --font-size-base: var(--fs16px);
    --font-gothic: "Noto Sans JP", "Yu Gothic", "Meiryo", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Arial", sans-serif;
    --font-en: "Times New Roman", serif;
    --transition-speed: .3s;
    --leading-trim: calc((1em - 1lh) / 2);

    --color-aizu-main: #76C034;
    --color-aizu-sub: #C8E6AE;
    --color-nakadori-main: #FFB55C;
    --color-nakadori-sub: #FFE1BE;
    --color-hamadori-main: #2BB6CC;
    --color-hamadori-sub: #B7EAF2;
}


html {
    scroll-behavior: smooth;
}

body {
    --header-height: var(--fs70px);
    position: relative;
    min-height: calc(100svh - var(--header-height));
    color: var(--color-default);
    font-family: var(--font-gothic);
    font-size: var(--font-size-base);
    font-weight: 500;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
    -webkit-text-size-adjust: 100%;
    /*padding-top: var(--header-height);*/
    padding-top: var(--fs70px);
    /* ※PCのみ */
    background: var(--color-light-blue);
    line-height: 1.9;
    overflow-x: hidden;

    /* - 白色背景ページ */
    &.is-white-bg {
        background-color: #fff;
    }

    /* - メニュー展開時 オーバーレイ */
    &::after {
        content: "";
        box-sizing: border-box;
        visibility: hidden;
        opacity: 0;
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        background: rgb(255 255 255 / .6);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        transition: opacity var(--transition-speed), visibility 0s var(--transition-speed);
        z-index: 3;

        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }
    }
}

input,
textarea,
select,
button {
    font-family: var(--font-gothic);
    font-weight: 500;
}

img {
    max-width: 100%;
    height: auto;
}

img[src$=".svg"] {
    width: 100%;
}

a {
    text-decoration: none;
}

a[href^="tel:"]:hover {
    opacity: 1;
}

a.link-text-color {
    color: var(--color-main);
    text-decoration: none;
}

.main-wrapper {
    position: relative;
    z-index: 1;
}

@media (min-width:1024px) {

    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }

}


@media (hover: hover) {
    main {
        & :where(a:any-link):hover {
            opacity: .5;
        }
    }

    #g-nav {
        & :where(a:any-link):hover {
            opacity: .5;
        }
    }

    .g-footer {
        & :where(a:any-link):hover {
            opacity: .5;
        }
    }
}


/* スクリーンリーダー用の非表示クラス */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* グローバルヘッダー
--------------------------------------------------------------- */

.g-header {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    font-size: var(--fs16px);
    line-height: 1;
    padding: 0;
    background: #FFF;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.08);
    z-index: 4;

    .g-header__inner {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 1em;
        align-items: end;
        max-width: var(--header-inner-width);
        height: 100%;
        padding: 0 var(--container-padding);
        margin: auto;
    }
}


/* グローバルヘッダー - ロゴ
--------------------------------------------------------------- */

.g-logo {
    display: grid;
    place-content: center start;
    height: 100%;
    line-height: 1;

    & a {
        display: block;
        color: var(--color-default);
        font-size: var(--fs12px);
        font-weight: 400;
        text-decoration: none;
    }

    .g-logo__caption {
        display: block;
        margin-bottom: .5em;
    }

    .g-logo__image img {
        width: 286px;
    }
}


/* グローバルヘッダー - ナビゲーションラッパー
--------------------------------------------------------------- */

.g-header__nav-area {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: end;
    align-items: end;
    padding-block: var(--fs10px);
}


/* グローバルヘッダーメニュー - ※PC限定
--------------------------------------------------------------- */

.g-desktop-menu {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-end;
    gap: 1em var(--fs30px);
    font-size: var(--fs14px);
    line-height: 1;

    &>li {
        position: relative;
        padding-bottom: .5em;
    }

    &>li:not(.g-desktop-menu__has-child)>a {
        display: block;
    }
}

.g-desktop-menu__has-child {

    &:hover>.g-dropdown-menu,
    &:focus-within>.g-dropdown-menu {
        visibility: visible;
        opacity: 1;
        transition-delay: 0s;
    }
}

.g-dropdown-menu__title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--fs10px);
    align-items: center;
    gap: 0 var(--fs6px);

    &::after {
        content: "";
        position: relative;
        top: .071em;
        /* 位置微調整 */
        display: block;
        width: 100%;
        min-width: 0;
        aspect-ratio: 1 / .6;
        mask: url(../img/ui/menu_has_child_icon__arrow.svg) center center / contain no-repeat;
        background: var(--color-default);
    }
}

.g-dropdown-menu {
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--transition-speed), visibility 0s var(--transition-speed);

    /* ドロップダウンのスタイリング */
    box-sizing: border-box;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /*gap: 1.83em;*/
    min-width: 9.687rem;
    font-size: var(--fs12px);
    /*padding: var(--fs20px) var(--fs15px);*/
    padding: var(--fs10px) 0;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.08);
    border-radius: var(--fs10px);
    z-index: 1;

    & a {
        display: block;
        padding: .8em var(--fs15px);
        line-height: 1.2;

        @media (hover: hover) {

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

}

@media (hover: hover) {

    .g-desktop-menu a:hover,
    .g-desktop-menu a:focus-within {
        color: var(--color-main);

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

.g-desktop-menu .current>a {
    color: var(--color-main);

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


/* グローバルメニュー - ※PC / SP 共通
--------------------------------------------------------------- */

.g-functions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
    gap: var(--fs30px);
    height: 100%;
    line-height: 1;
    margin-left: var(--fs25px);
    border-left: 1px solid #ddd;
    padding-left: var(--fs25px);
}

.function-button__icon {
    &::before {
        content: "";
        display: block;
        min-width: 0;
        mask: center center / contain no-repeat;
        background-color: var(--color-default);
        margin-inline: auto;
    }
}

.function-button {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: minmax(0, 1fr) 1em;
    gap: var(--fs8px);
    color: var(--color-default);
    font-size: var(--fs10px);
    text-align: center;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;

    /* - ログイン */
    &.function-button--login .function-button__icon::before {
        width: var(--fs23px);
        aspect-ratio: 1/1.201;
        mask-image: url(../img/ui/menu_icon__login.svg);
    }

    /* - マイページ */
    &.function-button--mypage .function-button__icon::before {
        width: var(--fs29px);
        aspect-ratio: 1/1;
        mask-image: url(../img/ui/menu_icon__mypage.svg);
    }

    /* - 企業の方 */
    &.function-button--company .function-button__icon::before {
        width: var(--fs30px);
        aspect-ratio: 1/.894;
        mask-image: url(../img/ui/menu_icon__company.svg);
    }

    /* MENU */
    &.function-button--menu {
        --menu-border-width: 3.09em;
        --menu-border-height: .181em;
        --menu-border-margin: .909em;
        --menu-border-color: var(--color-default);
        width: var(--menu-border-width);
        font-size: var(--fs11px);
        white-space: nowrap;
        touch-action: manipulation;
    }

    .function-button--menu__border {
        position: relative;
        display: block;
        width: var(--menu-border-width);
        height: 2em;

        &>span,
        &::before,
        &::after {
            content: "";
            position: absolute;
            inset: 0;
            display: block;
            height: var(--menu-border-height);
            margin: auto;
            background: var(--menu-border-color);
            border-radius: .09em;
            transition: transform var(--transition-speed), opacity var(--transition-speed);
            will-change: transform, opacity;
            /* ※transformとopacityのGPUレンダリングの事前準備 */
            backface-visibility: hidden;
        }

        &::before {
            transform: translate(0, calc(-1 * var(--menu-border-margin)));
        }

        &::after {
            transform: translate(0, var(--menu-border-margin));
        }
    }

    /*
    &.function-button--menu .function-button__icon::before {
        width: var(--fs34px);
        aspect-ratio: 1/.647;
        mask-image: url(../img/ui/menu_icon__open.svg);
    }
        */
}

@media (hover: hover) {

    .function-button:hover,
    .function-button:focus-visible {
        color: var(--color-main);

        .function-button__icon::before {
            background-color: var(--color-main);
        }

        &.function-button--menu {
            --menu-border-color: var(--color-main);
        }
    }
}

.is-g-nav-open {
    .function-button--menu {
        .function-button--menu__border>span {
            opacity: 0;
        }

        .function-button--menu__border::before {
            transform: rotate(35deg);
        }

        .function-button--menu__border::after {
            transform: rotate(-35deg);
        }
    }

    /*
    .function-button--menu .function-button__icon::before {
        mask-image: url(../img/ui/menu_icon__close.svg);
    }
        */
}


@media print,
screen and (min-width: 751px) and (max-width: 1260px) {

    /* 中間サイズ対応　グローバルメニュー / 
    --------------------------------------------------------------- */

    .g-desktop-menu {
        display: none;
    }

    .g-functions {
        border: 0;
    }

}


/* グローバルメニュー - スライドナビ
--------------------------------------------------------------- */

/* - 全体コンテナ */
#g-nav {
    box-sizing: border-box;
    position: fixed;
    top: var(--header-height);
    right: -29rem;
    width: 29rem;
    height: calc(100lvh - var(--header-height));
    min-height: calc(100lvh - var(--header-height));
    visibility: hidden;
    transition: right var(--transition-speed), visibility 0s var(--transition-speed);
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

#g-nav__inner {
    box-sizing: border-box;
    min-height: calc(100lvh - var(--header-height));
    padding: var(--fs20px) var(--fs47px);
    background: rgb(30 111 224 / .95);
}

/* - スライドナビ - アクティブクラス */
html:has(.is-g-nav-open) {
    overflow: hidden;
}

.is-g-nav-open {
    overflow: hidden;

    &::after {
        visibility: visible;
        opacity: 1;
        transition: opacity var(--transition-speed);
    }

    #g-nav {
        right: 0;
        visibility: visible;
        transition: right var(--transition-speed);
    }
}


/* スライドナビ - メニュー
--------------------------------------------------------------- */

/* -- メインメニュー  */
.g-menu-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .625em;
    font-size: var(--fs16px);

    & a {
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: .625em;
        min-height: 3.125em;
        color: var(--color-main);
        font-weight: 700;
        padding: .3em;
        background: #fff;
        /*border: 2px solid transparent;*/
        border-radius: .312em;
    }

    /* -- カラム結合 */
    .g-menu-actions__column-merge {
        grid-column: span 2
    }

    /* -- ログイン */
    .g-menu-actions__button--login {
        background-color: var(--color-yellow);
    }

    /* -- ふくしまの企業検索 */
    .g-menu-actions__button--company .icon {
        width: 1.25em;
    }

    /* -- 新卒求人 */
    .g-menu-actions__button--beginner .icon {
        width: 1.06em;
    }

    /* -- 一般求人 */
    .g-menu-actions__button--general .icon {
        width: 1.125em;
    }
}

/* -- ソーシャルメニュー  */
.g-menu-utility {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 3.16em;
    gap: .83em;
    font-size: var(--fs12px);
    align-items: start;
    margin-top: 1.33em;

    &>li {
        height: 100%;
    }

    &>li>a {
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 100%;
        font-weight: 700;
        border-radius: 100vmax;
        background: #fff;
    }

    .g-menu-utility__link--favorite {
        gap: .58em;
        color: var(--color-main);

        &::before {
            content: "";
            display: block;
            width: 1.25em;
            aspect-ratio: 1/1;
            background: url(../img/ui/label_button_favorite_icon_on.svg) center center / contain no-repeat;
        }
    }
}

/* -- ページメニュー  */
.g-menu-sitemap {
    position: relative;
    display: grid;
    gap: 1em;
    font-size: var(--fs14px);
    margin-top: 1.42em;

    & li {
        width: calc(50% - 1.35em);
    }

    & a {
        display: block;
        color: #fff;
    }

    &>li>a {
        display: grid;
        grid-template-columns: .44em minmax(0, 1fr);
        align-items: center;
        gap: .44em;

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

}

.g-menu-sitemap__child-menu {
    display: grid;
    gap: 1.1em;
    font-size: var(--fs12px);
    margin: 1.4em 0;
    padding-left: 1em;

    & li {
        width: 100%;
    }

    & a {
        display: grid;
        grid-template-columns: 1em minmax(0, 1fr);

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

.g-menu-sitemap__right-column {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(50% - 1.35em);

    & li {
        width: 100%;
    }
}

/* - インフォメーションメニュー */
.g-menu-information {
    display: grid;
    gap: 1em;
    font-size: var(--fs12px);
    margin-top: 2em;

    & li {
        width: 50%;
    }

    & a {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 1em;
        gap: 1em;
        color: #fff;

        &::after {
            content: "－";
        }
    }
}


/* PC限定 - グローバルヘッダー - コンパクトモード
--------------------------------------------------------------- */

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

    @keyframes fade-in-compact {
        0 {
            top: 0;
        }

        50% {
            top: -100%;
        }

        100% {
            top: 0;
        }
    }

    body.is-scrolled {
        --header-height: var(--fs47px);
    }

    body.is-scrolled .g-header {

        .g-logo__caption,
        .function-button__label {
            display: none;
        }

        .function-button {
            grid-template-rows: minmax(0, 1fr);
        }

        .g-functions {
            align-items: center;
        }
    }
}


/* メインコンテナ
--------------------------------------------------------------- */

.container {
    position: relative;
    max-width: var(--container-width);
    padding: 0 var(--container-padding);
    margin: 0 auto;
    z-index: 1;

    &.container--minimal {
        margin-block: var(--fs80px);
    }
}


/* コンテンツ領域 ※シングルボックス
--------------------------------------------------------------- */

.content-body {
    box-sizing: border-box;
    position: relative;
    font-size: var(--fs16px);
    padding: var(--fs65px) 9.927%;
    background: #fff;
    border-radius: 2.5em;
}

.content-body:has(.post-meta) {
    padding-top: var(--fs40px);
}

.company-tab--header+.content-body {
    border-top-left-radius: 0;
}


/* 目次以下、コンテンツ監視領域
--------------------------------------------------------------- */

.post-wrapper {
    position: relative;

    .toc-sentinel {
        position: absolute;
        top: 0;
        height: 1px;
        width: 1px;
        pointer-events: none;
    }
}



/* サイドナビ - 条件絞り込み
--------------------------------------------------------------- */

.filter-panel {
    position: relative;
    background: #fff;
    border-radius: 40px;
    padding: var(--fs38px) var(--fs24px);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);

    .button-conditions {
        margin-top: 1em;
    }

    .button-enter {
        margin-top: 2.28em;
    }

}

.filter-panel__inner {
    padding-inline: var(--fs4px);
}

.filter-panel__title {
    text-align: center;
    line-height: 1;
    margin-bottom: var(--fs38px);
}

.filter-panel__summary {
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs12px);
    margin: 2.5em 0 0;
    line-height: 1.7;
}


/* 条件絞り込み - チェックリスト
--------------------------------------------------------------- */

.filter-list-wrapper {
    margin-bottom: 1em;
}

.filter-list {
    display: grid;
    gap: .9em 0;
    line-height: 1.58;

    &.filter-list--2col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1em;
    }

    &.filter-list--4col {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1em;
    }

    &.filter-list--flex {
        display: flex;
        flex-wrap: wrap;
        gap: 1em 1.75em;
        line-height: 1.58;
    }

    @media print,
    screen and (min-width: 1023px) {
        &.filter-list--pc-flex {
            display: flex;
            flex-wrap: wrap;
            gap: 1em 1.75em;
            line-height: 1.58;
        }
    }

    /* - 子リスト用　三角マーク */
    .show-child-trigger {
        display: inline-block;
        width: var(--fs34px);
        min-width: 0;
        aspect-ratio: 1/.588;
        background: url(../img/ui/icon_pull.svg) center center / contain no-repeat;
        border: 0;
        cursor: pointer;
        margin-left: 0.5em;

        &.is-open {
            transform: rotate(180deg);
        }
    }

    & label:has(.show-child-trigger) {
        grid-template-columns: 1.25em auto auto;
        justify-content: start;
    }

    /* - 子リスト - 内包ラッパー */
    .filter-list-child__wrapper {
        display: none;
        padding-left: 1.68em;
        margin-top: 1em;

        &.is-open {
            display: block;
        }
    }

}


/* 条件絞り込み - ツールバー(検索結果 / 並べ替え)
--------------------------------------------------------------- */

.search-toolbar {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    height: var(--fs60px);
    background: var(--color-main);
    border-radius: 100vmax;
    margin-bottom: 2em;
}

.search-toolbar__count {
    box-sizing: border-box;
    display: grid;
    place-content: center;
    width: fit-content;
    height: 100%;
    color: var(--color-main);
    font-size: var(--fs20px);
    font-weight: 700;
    padding-inline: 1em;
    background: #fff;
    border: var(--fs4px) solid var(--color-main);
    border-radius: 100vmax;

    & span {
        color: #dc3732;
    }
}

.search-toolbar__console {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0 var(--fs17px);
    padding-right: var(--fs40px);
}


/* ニュース一覧コンテナ
--------------------------------------------------------------- */

.article-list-container {
    max-width: 888px;
    padding-bottom: 3.75em;
    margin: 0 auto;
}


/* スクロール表示 / 非表示用ラッパー
--------------------------------------------------------------- */

.scroll-show-wrapper {
    position: relative;
    display: none;
    z-index: 3;
}



/* グローバルフッター
--------------------------------------------------------------- */

.totop-button {
    position: fixed;
    right: var(--fs15px);
    bottom: var(--fs15px);
}

.g-footer {
    position: relative;
    color: #fff;
    background: #333333;
    line-height: 1.83;
    z-index: 2;
}

.g-footer__inner {
    max-width: var(--header-inner-width);
    padding: 0 var(--container-padding) var(--fs20px);
    margin-inline: auto;
}

/* -- フッター - SNS */
.g-footer__sns {
    display: grid;
    place-content: center;
    height: var(--fs90px);
    border-bottom: 1px solid #666;
}

.kf-sns-links {
    --kf-sns-links__icon-size: var(--fs38px);
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    align-items: center;
    gap: var(--fs11px);

    & a {
        display: grid;
        place-content: center;
        width: var(--kf-sns-links__icon-size);
        min-width: 0;
        aspect-ratio: 1/1;
        background: #fff center center / contain no-repeat;
        border-radius: 100vmax;
    }

    .kf-sns-links__link--x {
        background-image: url(../img/ui/sns_original_icon_x.svg);
        background-size: var(--fs18px) auto;
    }

    .kf-sns-links__link--instagram {
        /*background-image: url(../img/ui/sns_original_icon_instagram.svg);*/
        background-image: url(../img/ui/sns_original_icon_instagram.png);
        background-size: var(--fs22px) auto;
    }

    .kf-sns-links__link--line {
        background-image: url(../img/ui/sns_original_icon_line.svg);
        background-size: var(--fs30px) auto;
    }
}

/* -- フッター - コンテンツ */
.g-footer__column {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    font-size: var(--fs12px);
    padding: var(--fs40px) var(--fs12px) var(--fs30px);
    letter-spacing: .05em;
}

/* -- フッター - 問い合わせ先 */
.g-footer__contact {
    .g-footer__contact-division {
        font-size: var(--fs12px);
        font-weight: 600;
        margin-bottom: .33em;
    }
}

.g-footer__contact-item {
    display: grid;
    grid-template-columns: var(--fs13px) minmax(0, 1fr);
    align-items: center;
    gap: .5em;
    font-weight: 400;

    & a {
        color: #fff;
    }

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

    &.item--direct-phone::before {
        background-image: url(../img/ui/contact_icon__direct_phone.svg);
    }

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

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

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

/* -- フッター - メニュー */
.g-footer__nav-list {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: .75em 3em;

    & a {
        display: grid;
        grid-template-columns: var(--fs5px) minmax(0, 1fr);
        align-items: center;
        gap: .5em;
        color: #fff;
        text-decoration: none;

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

/* -- フッター - コピーライト */
.g-footer__copyright {
    display: block;
    font-size: var(--fs10px);
    font-weight: 400;
    text-align: center;
    letter-spacing: .05em;
    line-height: 1;
}


/* アンカー位置調整
--------------------------------------------------------------- */

[id] {
    scroll-margin-top: calc(var(--header-height) + 1em);
}

.content-body:has(.toc--sticky) [id] {
    scroll-margin-top: calc(var(--header-height) * 3 + 1em);
}



/* 以下、SP
--------------------------------------------------------------- */

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

    :root {
        --container-width: auto;
        --container-padding: 5.13vw;
        --container-margin: 50px;
        --font-size-base: 4.1vw;
    }


    body {
        --header-height: 13.33vw;
        padding-top: var(--header-height);
    }


    /* SP - グローバルヘッダー
    --------------------------------------------------------------- */

    .g-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        font-size: 4.1vw;
        box-shadow: 0px 0px 7.69vw rgba(0, 0, 0, 0.08);

        .g-header__inner {
            gap: 0;
            padding-inline: 3.85vw;
        }
    }


    /* SP - グローバルヘッダー - ロゴ
    --------------------------------------------------------------- */

    .g-logo {

        & a {
            font-size: 1.54vw;
        }

        .g-logo__image img {
            width: 39.49vw;
        }
    }


    /* SP - グローバルヘッダー - ナビゲーションラッパー
    --------------------------------------------------------------- */

    .g-header__nav-area {
        padding-block: 2.05vw;
    }


    /* SP - グローバルヘッダーメニュー - ※PC限定
    --------------------------------------------------------------- */

    .g-desktop-menu {
        display: none;
    }


    /* SP - グローバルメニュー - ※PC / SP 共通
    --------------------------------------------------------------- */

    .g-functions {
        gap: 5.13vw;
        margin-left: 0;
        border-left: 0;
        padding-left: 0;
    }

    .function-button {
        gap: 1.79vw;
        font-size: 2.31vw;

        /* - ログイン */
        &.function-button--login .function-button__icon::before {
            width: 4.36vw;
        }

        /* - マイページ */
        &.function-button--mypage .function-button__icon::before {
            width: 5.13vw;
        }

        /* - 企業の方 */
        &.function-button--company .function-button__icon::before {
            width: 5.64vw;
        }

        /* MENU */
        &.function-button--menu {
            --menu-border-width: 7.18vw;
            --menu-border-height: .51vw;
            --menu-border-margin: 2.05vw;
            font-size: 2.56vw;
        }

        .function-button--menu__border {
            height: 4.62vw;

            &>span,
            &::before,
            &::after {
                border-radius: .26vw;
            }
        }

        /*
        &.function-button--menu .function-button__icon::before {
            width: 7.18vw;
        }
            */
    }

    .is-g-nav-open {
        .function-button--menu .function-button__label {
            margin-left: -.1em;
        }
    }


    /* SP - グローバルメニュー - スライドナビ
    --------------------------------------------------------------- */

    /* - SP - 全体コンテナ */
    #g-nav {
        right: -100%;
        width: 100%;
        /*height: calc(100svh - var(--header-height));*/

        /*
        height: calc(100svh - var(--header-height));
        min-height: calc(100lvh - var(--header-height));
        */

        height: calc(100lvh - var(--header-height));
        height: calc(100dvh - var(--header-height));
        min-height: 0;
    }

    #g-nav__inner {
        padding: 5.13vw 5.13vw 20.51vw;

        min-height: 418.97vw;
    }


    /* SP - スライドナビ - メニュー
    --------------------------------------------------------------- */

    /* -- SP - メインメニュー  */
    .g-menu-actions {
        gap: 2.56vw;
        font-size: 4.1vw;
    }

    /* -- SP - ソーシャルメニュー  */
    .g-menu-utility {
        font-size: 3.08vw;
    }

    /* -- SP - ページメニュー  */
    .g-menu-sitemap {
        gap: 6.41vw;
        font-size: 4.1vw;
        margin-top: 7.69vw;

        & li {
            width: 100%;
        }
    }

    .g-menu-sitemap__child-menu {
        gap: 7.69vw;
        font-size: 3.59vw;
        margin: 7.69vw 0 1.28vw;

        & li {
            width: 100%;
        }
    }

    .g-menu-sitemap__right-column {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
    }

    /* - SP - インフォメーションメニュー */
    .g-menu-information {
        gap: 6.41vw;
        font-size: 3.59vw;
        margin-top: 10.26vw;

        & li {
            width: 100%;
        }

        & a {
            &::after {
                content: "━";
            }
        }
    }


    /* SP メインコンテナ
    --------------------------------------------------------------- */

    .container {

        &.container--minimal {
            margin-block: 12.82vw;
        }

    }


    /* SP コンテンツ領域 ※シングルボックス
    --------------------------------------------------------------- */

    .content-body {
        font-size: 4.1vw;
        padding: 10.26vw var(--container-padding);
        border-radius: 7.69vw;
    }

    .content-body:has(.post-meta) {
        padding-top: 5.13vw;
    }


    /* SP サイドナビ - 条件絞り込み
    --------------------------------------------------------------- */

    .filter-panel {
        border-radius: 7.69vw;
        padding: 7.69vw 7.18vw 12.05vw;
        box-shadow: 0px .77vw 1.54vw rgba(0, 0, 0, .16);

        .button-conditions {
            margin-top: 1em;
        }

        .button-enter {
            margin-top: 2.28em;
        }
    }

    .filter-panel__inner {
        padding-inline: 0;
    }

    .filter-panel__title {
        margin-bottom: 10.26vw;
    }

    .filter-panel__summary {
        font-size: 3.08vw;
        margin: 2.33em 0 0;
    }


    /* SP 条件絞り込み - チェックリスト
    --------------------------------------------------------------- */

    .filter-list-wrapper {
        margin-bottom: 1.5em;
    }

    .filter-list {

        & li {
            min-width: calc(50% - 0.875em);
        }

        .filter-list--2col {
            grid-template-columns: minmax(0, 1fr);
            gap: 1em 1.75em;
        }

        .filter-list--4col {
            grid-template-columns: minmax(0, 1fr);
            gap: 1em 1.75em;
        }

        .filter-list--sp-flex {
            display: flex;
            flex-wrap: wrap;
            gap: 1em 1.75em;
            line-height: 1.58;
        }
    }

    /* - SP 子リスト用　三角マーク */
    .show-child-trigger {
        width: 8.72vw;
    }


    /* SP 条件絞り込み - ツールバー(検索結果 / 並べ替え)
    --------------------------------------------------------------- */

    .search-toolbar {
        height: 12.82vw;
        margin-bottom: 11.54vw;
    }

    .search-toolbar__count {
        width: 100%;
        height: 12.82vw;
        font-size: 4.62vw;
        border-width: 1.03vw;
    }

    .search-toolbar:has(.search-toolbar__console) {
        display: block;
        height: auto;
        border-radius: 2.56vw;
        padding: 0 3.85vw 3.85vw;
        margin-top: 6.67vw;
    }

    .search-toolbar:has(.search-toolbar__console) .search-toolbar__count {
        position: relative;
        top: -6.67vw;
        width: calc(100% - 7.69vw);
        margin: 0 auto;
    }

    .search-toolbar__console {
        display: grid;
        /*
        grid-template-columns: 33.75% 1fr;
        */
        grid-template-columns: 1fr;
        gap: 0 4.36vw;
        padding: 0;
        margin-top: -3.33vw;

        .button {
            width: 100%;
            padding-inline: 0;
        }

        .sort-pulldown {
            width: 100%;

            & select {
                width: 100%;
            }
        }
    }


    /* SP ニュース一覧コンテナ
    --------------------------------------------------------------- */

    .article-list-container {
        padding-bottom: 10.26vw;
    }


    /* SP - グローバルフッター
    --------------------------------------------------------------- */

    .totop-button {
        right: var(--container-padding);
        bottom: var(--foot-banner-avoid);
    }

    .g-footer {
        --foot-banner-avoid: calc(4.62vw + 4.62vw + 12.31vw);
    }

    .g-footer__inner {
        /*padding-bottom: 21.79vw;*/
        padding-bottom: calc(21.79vw + 16.93vw);
    }

    /* -- SP - フッター - SNS */
    .g-footer__sns {
        height: 23.08vw;
    }

    .kf-sns-links {
        --kf-sns-links__icon-size: 9.74vw;
        gap: 2.56vw;

        .kf-sns-links__link--x {
            background-size: 4.62vw;
        }

        .kf-sns-links__link--instagram {
            background-size: 5.64vw;
        }

        .kf-sns-links__link--line {
            background-size: 7.69vw;
        }
    }

    /* -- SP -フッター - コンテンツ */
    .g-footer__column {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-content: start;
        gap: 0;
        font-size: 3.08vw;
        padding: 6.41vw 0 7.69vw;
    }

    /* -- SP -フッター - 問い合わせ先 */
    .g-footer__contact {
        order: 2;

        .g-footer__contact-division {
            font-size: 3.08vw;
        }
    }

    .g-footer__contact-item {
        grid-template-columns: 3.33vw minmax(0, 1fr);
    }

    /* -- SP -フッター - メニュー */
    .g-footer__nav {
        order: 1;
    }

    .g-footer__nav-list {
        display: grid;
        grid-auto-flow: row;
        grid-template-rows: none;
        grid-template-columns: minmax(0, 1fr);
        gap: 2.05vw;
        margin-bottom: 8.97vw;

        & a {
            grid-template-columns: 1.28vw minmax(0, 1fr);
        }
    }

    /* -- SP -フッター - コピーライト */
    .g-footer__copyright {
        font-size: 2.56vw;
    }


    /* SP 固定メニュー用 アンカー位置調整
	--------------------------------------------------------------- */

    .anchor-block {
        scroll-margin-top: 130px;
        /*
		margin-top:-10px;
		padding-top:10px;
		*/
    }

}


/* 以下、ライブラリ
--------------------------------------------------------------- */

.pc-only-block, .pcOnlyB {
    display: block;
}

.pc-only-inline, .pcOnlyI {
    display: inline;
}

.sp-only-block, .spOnlyB {
    display: none;
}

.sp-only-inline, .spOnlyI {
    display: none;
}

@media screen and (max-width:1023px) {
    .pc-only-block, .pcOnlyB {
        display: none;
    }

    .pc-only-inline, .pcOnlyI {
        display: none;
    }

    .sp-only-block, .spOnlyB {
        display: block;
    }

    .sp-only-inline, .spOnlyI {
        display: inline;
    }
}

.cf:after {
    content: "";
    display: block;
    clear: both;
}


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

div.job-print-template {
    display: none;
}

@media print {
    body:has(.job-print-template)>*:not(.job-print-template) {
        display: none;
    }

    body:has(.job-print-template) {
        background-color: #FFF;
        min-width: 0;
        padding: 0;
    }

    div.job-print-template {
        display: block;
    }
}

.print-column {
    display: grid;
    gap: 2em;

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

    &.print-column--2col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    &.print-column--3col {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1em;
    }
}

.print-block {
    --color: #4c4948;
    font-size: var(--fs12px);
    line-height: 1.8;
}

.print-block:not(:last-child) {
    margin-bottom: 2em;
}

.print-block__title-1 {
    padding: .3em .8em;
    border-left: var(--fs10px) solid var(--color);
    border-bottom: 1px solid var(--color);
    margin-bottom: .5em;
}

.print-block__title-2 {
    --border-color: #d3d3d4;
    position: relative;
    display: grid;
    grid-template-columns: 2.4em minmax(0, 1fr);
    justify-content: center;
    align-items: center;
    padding: 0;
    border: 1px solid var(--border-color);
    margin-bottom: .5em;

    &>div {
        display: grid;
        place-content: center;
        height: 100%;
        text-align: center;
        padding-inline: .8em;
        border-left: 1px solid var(--border-color);
    }

    &::before {
        content: "";
        box-sizing: border-box;
        display: block;
        width: 2.4em;
        min-width: 0;
        height: 100%;
        aspect-ratio: 1/1;
        background: #fff;
        border: .5em solid #efefef;
    }
}


@media print {

    :root {
        --header-inner-width: 1280px;
        --container-width: 1108px;
    }

    body:not(:has(.job-print-template)) {
        min-width: 1366px;
    }


    /* 固定要素の調整
    --------------------------------------------------------------- */

    .fixed-nav {
        display: none;
    }

    .toc {
        position: relative;
    }

    .g-header {
        position: absolute;
    }

}