/* ---------------------------------------------
*   Custom Properties
--------------------------------------------- */
:root {
    --design-width: 1280;
    --contents-width: 335;
    --contents-side-padding: 20;
    --minwidth: calc(var(--contents-width) + var(--contents-side-padding) * 2);
    --fixed-header-height: 70;
    --root-fz: 16;
    --line-height: 1.875;
    --contents-width-pc: 375;
    --page-bottom-pb: 10;
    --page-top-btn-pt: 30;
    --hover-opacity-ratio: 0.7;
    --hover-duration: .3s;
    --color-base-1: #2C2C2C;
    --color-base-1-rgb: 44, 44, 44;
    --color-black-1: #000;
    --color-black-1-rgb: 0, 0, 0;
    --color-black-2: #231815;
    --color-black-2-rgb: 35, 24, 21;
    --color-black-3: #000101;
    --color-black-3-rgb: 0, 1, 1;
    --color-white-1: #fff;
    --color-white-1-rgb: 255, 255, 255;
    --color-white-2: #fefefe;
    --color-white-2-rgb: 254, 254, 254;
    --color-gray-1: #7D7D7D;
    --color-gray-1-rgb: 125, 125, 125;
    --color-gray-2: #D9D9D9;
    --color-gray-2-rgb: 217, 217, 217;
    --color-gray-3: #F9F9F9;
    --color-gray-3-rgb: 249, 249, 249;
    --color-gray-4: #F2F2F2;
    --color-gray-4-rgb: 242, 242, 242;
    --color-gray-5: #9F9F9F;
    --color-gray-5-rgb: 159, 159, 159;
    --color-gray-6: #BFC0C0;
    --color-gray-6-rgb: 191, 192, 192;
    --color-gray-7: #DADBDB;
    --color-gray-7-rgb: 218, 219, 219;
    --color-red-1: #E7242E;
    --color-red-1-rgb: 231, 36, 46;
    --color-red-2: #E61243;
    --color-red-2-rgb: 230, 18, 67;
    --color-purple-1: #9F5EB1;
    --color-purple-1-rgb: 159, 94, 177;
    --color-green-1: #009E6B;
    --color-green-1-rgb: 0, 158, 107;
    --color-orange-1: #FF8D00;
    --color-orange-1-rgb: 255, 141, 0;
    --color-blue-1: #0097E0;
    --color-blue-1-rgb: 0, 151, 224;
    --color-blue-2: #79C3D0;
    --color-blue-2-rgb: 121, 195, 208;
    --color-card-1: #EAF6FD;
    --color-card-1-rgb: 234, 246, 253;
    --color-card-2: #FDEDE4;
    --color-card-2-rgb: 253, 237, 228;
    --color-card-3: #F3EBF4;
    --color-card-3-rgb: 243, 235, 244;
    --color-card-4: #EBF5EC;
    --color-card-4-rgb: 235, 245, 236;
    --color-card-5: #FFF7E1;
    --color-card-5-rgb: 255, 247, 225;
    --color-dot-1: #E481A2;
    --color-dot-1-rgb: 228, 129, 162;
    --color-dot-2: #218CCC;
    --color-dot-2-rgb: 33, 140, 204;
    --color-dot-3: #3CAA6A;
    --color-dot-3-rgb: 60, 170, 106;
    --color-dot-4: #F2A93B;
    --color-dot-4-rgb: 242, 169, 59;
    --color-dot-5: #E04E35;
    --color-dot-5-rgb: 224, 78, 53;
    --color-link-1: #0033CC;
    --color-link-1-rgb: 0, 51, 204;
    --ff-root: "BIZ UDPGothic", sans-serif;
    --ff-udp-mincho: "BIZ UDPMincho", serif;
}
@media screen and (min-width: 751px) {
    :root {
        --contents-wrap-width: 375;
    }
}
@media screen and (max-width: 750px) {
    :root {
        --design-width: 375;
        --contents-width: 335;
        --contents-side-padding: 20;
        --minwidth: 320;
        --fixed-header-height: 70;
        --root-fz: 16;
        --line-height: 1.875;
    }
}

/* ---------------------------------------------
*   Universal selector
--------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ---------------------------------------------
*   html, body
--------------------------------------------- */
html,
body {
    color: var(--color-base-1);
    font-size: calc(var(--root-fz) * 1px);
    font-family: var(--ff-root);
    -webkit-text-size-adjust: 100%;
}
@media screen and (max-width: 750px) {
    html,
    body {
        font-size: calc(var(--root-fz) / var(--design-width) * 100vw);
    }
}

html:has(.js-scroll-trigger) {
    overscroll-behavior-y: contain;
}
html:has(.js-scroll-trigger):has(.is-scroll-end) {
    overscroll-behavior-y: auto;
}

html.is-noscroll {
    min-height: 100%;
    min-height: 100dvh;
}

body {
    min-width: calc(var(--minwidth) * 1px);
    line-height: var(--line-height);
}
@media screen and (min-width: 751px) {
    body {
        overflow-x: hidden;
    }
}
body:focus-visible {
    outline: none;
    box-shadow: none;
}
.is-noscroll body {
    position: fixed;
    width: 100%;
    height: 100%;
    height: 100dvh;
    overflow-y: scroll;
}

body.is-fixed {
    padding-right: calc(100vw - 100%);
}
/* ---------------------------------------------
*   <a> tag
--------------------------------------------- */
a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* ---------------------------------------------
*   <img> tag
--------------------------------------------- */
img {
    max-width: 100%;
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* ---------------------------------------------
*   <hr> tag as anchor target
--------------------------------------------- */
a[id] {
    display: block;
    width: auto;
    padding: 20px 0 0 0;
    border: 0;
    margin: 20px 0 0 0;
    background: 0;
    pointer-events: none;
}
@media screen and (max-width: 750px) {
    a[id] {
        padding-top: calc(20 / var(--design-width) * 100vw);
        margin-top: calc(20 / var(--design-width) * 100vw);
    }
}

hr[id] {
    height: 0;
}

/* ---------------------------------------------
*   Outline
--------------------------------------------- */
:focus-visible {
    outline: 4px solid var(--color-base-1);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--color-white-1);
}