@charset "UTF-8";

/* デザイン上の1pxを、画面幅に応じてスケーリングした値として定義 */
:root {
    /* PC用（基準の幅は1240px）*/
    --px: min(1px, calc(100vw / 1240));
}
@media screen and (max-width: 767px){
    :root {
        /* SP用（基準の幅は375px）*/
        --px: min(1px, calc(100vw / 375));
    }
}

/* 色 */
:root{
    --cl-white: #fff;
    --cl-text: #333;
    --cl-text-light: #555;
    --cl-main: #FFF0C7;
    --cl-main-light: #FFF6DE;
    --cl-beige: #F3F3E8;
    --cl-beige-light: #F9F8F3;
    --cl-fc: #505FCB;
    --cl-recruit: #00AFFF;
    --cl-gray-light: #F4F4F4;
    --cl-link-border: #E3E3E3;
    --cl-gray: #D2D2D2;
    --cl-gray-dark: #B4B4B4;
    --cl-gray-darker: #777;
    --cl-gold: #FECC1F;
    --cl-gold-light: #FFE49A;
    --cl-arrow: #F1AE61;
    --cl-green: #00774F;
    --cl-green-light: #EDF3F1;
    --cl-orange: #EB8C1E;
    --cl-button: #FFD3A5;
    --cl-footer: #333;
    --cl-footer-company: #444;
    --cl-footer-company-title: #555;
    --cl-optional: #9E9E9E;
    --cl-error-background: #fce0e0;
    --cl-error-border: #ff5f5f;
    --cl-error-text: #d00;
}

/* 文字サイズ */
:root {
    --fs-text-5s: calc(12 * var(--px));
    --fs-text-4s: calc(13 * var(--px));
    --fs-text-3s: calc(14 * var(--px));
    --fs-text-ss: calc(15 * var(--px));
    --fs-text-s: calc(16 * var(--px));
    --fs-text-m: calc(17 * var(--px));
    --fs-text-ml: calc(18 * var(--px));
    --fs-text-l: calc(19 * var(--px));
    --fs-title-3s: calc(22 * var(--px));
    --fs-title-s: calc(24 * var(--px));
    --fs-title-m: calc(26 * var(--px));
    --fs-title-l: calc(28 * var(--px));
    --fs-title-ll: calc(30 * var(--px));
    --fs-title-3l: calc(32 * var(--px));
    --fs-company-icon: calc(38 * var(--px));
    --fs-arrow: calc(17 * var(--px));
    --fs-footer-sns: calc(30 * var(--px));
    --fs-youtube: calc(21 * var(--px));
    --fs-contact-icon: calc(60 * var(--px));
    --fs-contact-arrow: calc(30 * var(--px));
    --fs-input: calc(16 * var(--px));
    --fs-agree-arrow: calc(20 * var(--px));
    --fs-text-date: calc(16 * var(--px));
    --fs-text-date-details: calc(17 * var(--px));
    --fs-text-news-icon: calc(14 * var(--px));
    --fs-business-text: calc(18 * var(--px));
    --fs-title-index: calc(26 * var(--px));
}
@media screen and (max-width: 767px){
    :root {
        --fs-text-4s: calc(12 * var(--px));
        --fs-text-3s: calc(12 * var(--px));
        --fs-text-ss: calc(13 * var(--px));
        --fs-text-s: calc(14 * var(--px));
        --fs-text-m: calc(15 * var(--px));
        --fs-text-ml: calc(16 * var(--px));
        --fs-text-l: calc(16 * var(--px));
        --fs-text-ll: calc(17 * var(--px));
        --fs-title-3s: calc(17 * var(--px));
        --fs-title-s: calc(18 * var(--px));
        --fs-title-m: calc(19 * var(--px));
        --fs-title-l: calc(20 * var(--px));
        --fs-title-ll: calc(21 * var(--px));
        --fs-title-3l: calc(22 * var(--px));
        --fs-footer-sns: calc(25 * var(--px));
        --fs-sp-nav-close: calc(20 * var(--px));
        --fs-company-icon: calc(18 * var(--px));
        --fs-arrow: calc(14 * var(--px));
        --fs-youtube: calc(16 * var(--px));
        --fs-contact-icon: calc(40 * var(--px));
        --fs-contact-arrow: calc(16 * var(--px));
        --fs-agree-arrow: calc(16 * var(--px));
        --fs-text-date: calc(12 * var(--px));
        --fs-text-date-details: calc(13 * var(--px));
        --fs-title-index: calc(22 * var(--px));
    }
}

/* 行間 */
:root {
    --lh-m: 1.7;
    --lh-s: 1.5;
}
@media screen and (max-width: 767px){
    :root {
        --lh-m: 1.6;
        --lh-s: 1.3;
    }
}

/* 余白 */
:root {
    /* フッター */
    --pt-footer: calc(60 * var(--px));
    --pb-footer: calc(60 * var(--px));
    /* メイン部分 */
    --pt-main: calc(50 * var(--px));
    --pb-main: calc(80 * var(--px));
    /* パンくずリストの余白 */
    --pt-breadcrumb: calc(15 * var(--px));
    --pb-breadcrumb: calc(15 * var(--px));
    /* セクション間の上余白 */
    --mt-section: calc(80 * var(--px));
    /* 色付きの箱の余白 */
    --p-item: calc(50 * var(--px));
    --p-item-small: calc(40 * var(--px));
    --p-item-company: calc(35 * var(--px));
    --p-item-company-link: calc(35 * var(--px)) calc(35 * var(--px)) calc(45 * var(--px));
    /* タイトルの下のコンテンツの上余白 */
    --mt-section-title-bottom: calc(50 * var(--px));
    --mt-brackets-title-bottom: calc(25 * var(--px));
    --mt-section-title-bottom-narrow: calc(var(--mt-section-title-bottom) * 0.5);
    --mt-brackets-title-bottom-narrow: calc(var(--mt-brackets-title-bottom) * 0.5);
}
@media screen and (max-width: 767px){
    :root {
        /* フッター */
        --pt-footer: calc(35 * var(--px));
        --pb-footer: calc(35 * var(--px));
        /* メイン部分 */
        --pt-main: calc(30 * var(--px));
        --pb-main: calc(60 * var(--px));
        /* スマホ（左右方向） */
        --px-sp: calc(20 * var(--px));
        /* パンくずリストの余白 */
        --pt-breadcrumb: calc(8 * var(--px));
        --pb-breadcrumb: calc(8 * var(--px));
        /* セクション間の上余白 */
        --mt-section: calc(40 * var(--px));
        /* 色付きの箱の余白 */
        --p-item: calc(25 * var(--px)) calc(20 * var(--px));
        --p-item-small: calc(20 * var(--px));
        --p-item-company: calc(25 * var(--px)) calc(20 * var(--px));
        --p-item-company-link: calc(25 * var(--px)) calc(20 * var(--px)) calc(40 * var(--px));
        /* タイトルの下のコンテンツの上余白 */
        --mt-section-title-bottom: calc(30 * var(--px));
        --mt-brackets-title-bottom: calc(20 * var(--px));
    }
}

/* 角丸 */
:root {
    --radius-base: calc(10 * var(--px));
}

/* 影 */
:root {
    --shadow-header: 0 calc(2 * var(--px)) calc(4 * var(--px)) rgba(0, 0, 0, 0.1);
    --shadow-base: 0 calc(1 * var(--px)) calc(3 * var(--px)) calc(1 * var(--px)) rgba(0, 0, 0, 0.15), 0 calc(1 * var(--px)) calc(2 * var(--px)) 0 rgba(0, 0, 0, 0.30);
}

/* フォント */
:root {
    --font-main: YakuHanJP, 'Noto Sans JP', sans-serif;
    --font-icon: 'Font Awesome 6 Free';
}

/* その他 */
:root {
    --ls-title: calc(1 * var(--px));
    --ls-sub-title: calc(0.5 * var(--px));
}
@media screen and (max-width: 767px){
    :root {
        --ls-title: calc(0.5 * var(--px));
        --ls-sub-title: calc(0.25 * var(--px));
    }
}

/* その他 */
:root {
    --size-arrow: calc(26 * var(--px));
    --link-hover-opacity: 0.7;
    --link-transition: all 0.3s ease-in-out;
    --js-hidden-transition: opacity 0.5s ease-in-out;
}
@media screen and (max-width: 767px){
    :root {
        --size-arrow: calc(22 * var(--px));
        --link-hover-opacity: 1;
    }
}