@charset "UTF-8";

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

/* 色 */
:root{
    --text-color: #333;
    --main-color: #69a5b3;
    --main-color-darkest: #0f2814;
    --cta-color: #ffa64d;
    --fv-color: rgba(167, 199, 231, 1);
    --fv-color-alpha: rgba(167, 199, 231, 0.1);
    --background-gradient-cta: var(--cta-color);
    --gray-color-light: #f0f0f0;
    --gray-color: #ccc;
    --gray-color-dark: #969696;
    --gray-color-darker: #999;
    --background-button: var(--main-color);
    --background-accent: #e6f7ff;
    --background-light: url(../img/common/bg_light.jpg) left top / 400px auto;
    --background-cta: var(--background-accent);
    --background-page-title: var(--background-light);
    --background-gradient-fv: linear-gradient(135deg, #b7e8ff 0%, #3bc4d4 100%);
    --background-gradient-people: linear-gradient(90deg, #b7e8ff 0%, #76d7f2 50%, #3bc4d4 100%);
    --background-footer-menu: #444;
    --background-footer: #333;
}
/* 文字サイズ */
:root {
    --fs-header-text: calc(16 * var(--px));
    --fs-footer-text: calc(15 * var(--px));
    --fs-banner-text: calc(11 * var(--px));
    --fs-logo-text: calc(14 * var(--px));
    --fs-footer-logo-text: calc(14 * var(--px));
    --fs-copy: calc(13 * var(--px));
    --fs-close-text: calc(12 * var(--px));
    --fs-base-tiny: calc(13 * var(--px));
    --fs-base-mini: calc(14 * var(--px));
    --fs-base-small: calc(15 * var(--px));
    --fs-base: calc(17 * var(--px));
    --fs-base-large: calc(20 * var(--px));
    --fs-entry-button: calc(23 * var(--px));
    --fs-title-small: calc(24 * var(--px));
    --fs-title: calc(34 * var(--px));
    --fs-title-large: calc(35 * var(--px));
    --fs-number: calc(60 * var(--px));
    --fs-title-fv: calc(60 * var(--px));
    --fs-text-fv: calc(20 * var(--px));
    --fs-scroll-fv: calc(24 * var(--px));
    --fs-lead: calc(24 * var(--px));
}
@media screen and (max-width: 1300px) {
    :root {
        --fs-entry-button: calc(20 * var(--px));
    }
}
@media screen and (max-width: 767px) {
    :root {
        --fs-header-text: calc(11 * var(--px));
        --fs-footer-text: calc(11 * var(--px));
        --fs-banner-text: calc(10 * var(--px));
        --fs-logo-text: calc(10 * var(--px));
        --fs-copy: calc(11 * var(--px));
        --fs-close-text: calc(10 * var(--px));
        --fs-base-tiny: calc(12 * var(--px));
        --fs-base-mini: calc(13 * var(--px));
        --fs-base-small: calc(14 * var(--px));
        --fs-base: calc(15 * var(--px));
        --fs-base-large: calc(16 * var(--px));
        --fs-entry-button: calc(18 * var(--px));
        --fs-title-small: calc(19 * var(--px));
        --fs-title: calc(20 * var(--px));
        --fs-title-large: calc(24 * var(--px));
        --fs-number: calc(35 * var(--px));
        --fs-title-fv: calc(30 * var(--px));
        --fs-text-fv: calc(14 * var(--px));
        --fs-scroll-fv: calc(15 * var(--px));
        --fs-lead: calc(17 * var(--px));
    }
}

/* 行間 */
:root {
    --lh-loose: 2.25;
    --lh-base: 2;
    --lh-medium: 1.75;
    --lh-tight: 1.5;
}
@media screen and (max-width: 767px) {
    :root {
        --lh-loose: 1.9;
        --lh-base: 1.6;
        --lh-medium: 1.5;
    }
}

/* 影 */
:root {
    --shadow-base: 0px 1px 2px rgba(0, 0, 0, 0.15);
    --shadow-text: 0 1px 3px rgba(0,0,0,0.5);
    --shadow-text-light: 0 1px 3px rgba(0,0,0,0.25);
    --shadow-text-white: 0 1px 3px rgba(255,255,255,0.5);
    --shadow-header-border: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* 余白 */
:root {
    --section-padding-small: calc(50 * var(--px)) 0;
    --section-margin-top: calc(80 * var(--px));
    --section-margin-top-small: calc(50 * var(--px));
    --section-padding: calc(80 * var(--px)) 0;
    --modal-padding: calc(45 * var(--px));
    --pagetop-padding: calc(50 * var(--px));
    --box-padding-column: calc(40 * var(--px)) calc(25 * var(--px));
    --box-padding-large: calc(60 * var(--px));
    --box-padding-medium-large: calc(50 * var(--px));
    --box-padding-medium: calc(40 * var(--px));
    --box-padding-small: calc(30 * var(--px));
    --box-padding-button: calc(40 * var(--px)) calc(25 * var(--px)); /* 狭いPC画面で応募モーダル内の文字が改行しないよう、左右にpaddingを設定 */
}
@media screen and (max-width: 1199px) {
    :root {
        --box-padding-button: calc(40 * var(--px)) calc(20 * var(--px)); /* 狭いPC画面で応募モーダル内の文字が改行しないよう、左右にpaddingを設定 */
    }
}
@media screen and (max-width: 767px) {
    :root {
        --wrapper-sp-padding: calc(20 * var(--px));
        --section-margin-top: calc(40 * var(--px));
        --section-margin-top-small: calc(30 * var(--px));
        --section-padding-small: calc(30 * var(--px)) var(--wrapper-sp-padding);
        --section-padding: calc(40 * var(--px)) var(--wrapper-sp-padding);
        --modal-padding: calc(30 * var(--px)) calc(20 * var(--px));
        --pagetop-padding: calc(25 * var(--px));
        --box-padding-column: calc(20 * var(--px));
        --box-padding-large: calc(30 * var(--px)) var(--wrapper-sp-padding);
        --box-padding-medium-large: calc(30 * var(--px)) var(--wrapper-sp-padding);
        --box-padding-medium: calc(30 * var(--px)) var(--wrapper-sp-padding);
        --box-padding-small: var(--wrapper-sp-padding);
        --box-padding-button: calc(20 * var(--px));
    }
}

/* 幅 */
:root {
    --col-width-2: calc(50% - (20 * var(--px)));
    --col-width-3: calc(33.333% - (26.667 * var(--px)));
    --col-margin: calc(40 * var(--px));
}
@media screen and (max-width: 767px) {
    :root {
        --col-width-2: 100%;
        --col-width-3: 100%;
        --col-margin: calc(20 * var(--px));
    }
}

/* その他 */
:root {
    --main-font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
    --hand-font-family: "Kiwi Maru", serif;
    --icon-font-family: 'Font Awesome 6 Free';
    --english-font-family: "Roboto", sans-serif;
    --english-margin-top: 0.2em;
    --link-hover-opacity: 0.7;
    --link-transition: all 0.3s ease-in-out;
    --fv-transition: all 0.5s ease-in-out;
    --bg-transition: opacity 0.3s ease-in-out;
    --radius-base: calc(5 * var(--px));
    --radius-large: calc(25 * var(--px));
    --fv-background-opacity: 0.9;
}
@media screen and (max-width: 767px) {
    :root {
        --link-hover-opacity: 1;
    }
}