@charset "UTF-8";

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

/* 教科の色 */
:root {
    --philosophy-color: #fcaf17;
    --philosophy-color-light: color-mix(in srgb, var(--philosophy-color) 25%, #fff);
    --philosophy-color-lighter: color-mix(in srgb, var(--philosophy-color) 10%, #fff);
    --philosophy-sub-color: #e8810f; /* blog固有 */

    --programming-color: #ee242c;
    --programming-color-light: color-mix(in srgb, var(--programming-color) 25%, #fff);
    --programming-color-lighter: color-mix(in srgb, var(--programming-color) 10%, #fff);

    --science-color: #b6d43e;
    --science-color-light: color-mix(in srgb, var(--science-color) 25%, #fff);
    --science-color-lighter: color-mix(in srgb, var(--science-color) 10%, #fff);
    --science-sub-color: #9dc03a; /* blog固有 */

    --money-color: #09a4e5;
    --money-color-light: color-mix(in srgb, var(--money-color) 25%, #fff);
    --money-color-lighter: color-mix(in srgb, var(--money-color) 10%, #fff);
    --money-sub-color: #0097c4; /* blog固有 */

    --english-color: #aa68aa;
    --english-color-light: color-mix(in srgb, var(--english-color) 25%, #fff);
    --english-color-lighter: color-mix(in srgb, var(--english-color) 10%, #fff);
    --english-sub-color: #aa68aa88; /* blog固有 */
}

/* 色 */
:root {
    --brand-color: #005c3f;
    --cv-color: #ea5b6f;
    --text-color: #333;
    --gray-color-lighter: #fafafa;
    --gray-color-light: #f0f0f0;
    --gray-color-midlight: #e1e1e1;
    --gray-color: #d2d2d2;
    --gray-color-dark: #b4b4b4;
    --gray-color-darker: #999;
    --button-color: #2a9d90;
    --important-button-color: #f5a300;
    --section-yellow-color: #fefbee;
    --play-color: #f03;
}

/* 文字サイズ */
:root {
    --fs-menu-text : calc(14.5 * var(--px));
    --fs-tiny-text : calc(13 * var(--px));
    --fs-small-text : calc(15 * var(--px));
    --fs-base: calc(17 * var(--px));
    --fs-small-title: calc(19 * var(--px));
    --fs-title: calc(22 * var(--px));
    --fs-large-title: calc(25 * var(--px));
    --fs-section-title: calc(32 * var(--px));
    --fs-shorts-title: calc(17 * var(--px));
}
@media screen and (max-width: 767px) {
    :root {
        --fs-tiny-text : calc(12 * var(--px));
        --fs-small-text : calc(13 * var(--px));
        --fs-base: calc(15 * var(--px));
        --fs-small-title: calc(17 * var(--px));
        --fs-title: calc(20 * var(--px));
        --fs-large-title: calc(22 * var(--px));
        --fs-section-title: calc(22 * var(--px));
        --fs-shorts-title: calc(13 * var(--px));
    }
}

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

/* その他 */
:root {
    --main-font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
    --icon-font-family: 'Font Awesome 6 Free';
    --number-font-family: "Roboto", sans-serif;
    --link-hover-opacity: 0.7;
    --link-transition: all 0.3s ease-in-out;
    --link-opacity-transition: opacity 0.3s ease-in-out;
    --image-zoom-transform: scale(1.1);
    --section-margin-top: calc(100 * var(--px));
    --page-top-padding-top: calc(60 * var(--px));
    --text-margin-top: calc(30 * var(--px));
    --radius-base: calc(15 * var(--px));
    --radius-base-top: var(--radius-base) var(--radius-base) 0 0;
    --radius-base-bottom: 0 0 var(--radius-base) var(--radius-base);
    --radius-base-left: var(--radius-base) 0 0 var(--radius-base);
    --radius-base-right: 0 var(--radius-base) var(--radius-base) 0;
    --radius-light: calc(10 * var(--px));
    --radius-light-top: var(--radius-light) var(--radius-light) 0 0;
    --radius-light-bottom: 0 0 var(--radius-light) var(--radius-light);
    --radius-light-left: var(--radius-light) 0 0 var(--radius-light);
    --radius-light-right: 0 var(--radius-light) var(--radius-light) 0;
    --shadow-base: rgba(0, 0, 0, 0.15) 0px 0px calc(12 * var(--px)) 0px;
    --shadow-light: rgba(0, 0, 0, 0.15) 0px 0px calc(6 * var(--px)) 0px;
    --shadow-text: 0 0 calc(3 * var(--px)) var(--text-color);
    --transition-animation: all .3s 0s ease;
}
@media screen and (max-width: 767px) {
    :root {
        --section-margin-top: calc(50 * var(--px));
        --page-top-padding-top: calc(40 * var(--px));
        --text-margin-top: calc(20 * var(--px));
    }
}