/* ---------------------------------------------
*   Custom Properties
--------------------------------------------- */
:root {
    --design-width: 1440;
    --contents-width: 1200;
    --contents-side-padding: 10;
    --minwidth: 320;
    --fixed-header-height: 94;
    --font-size-base: 16;
    --font-size-h1: 2.25em;
    --font-size-h2: 2em;
    --font-size-h3: 1.5em;
    --font-size-lead: 1.25em;
    --font-size-medium: 1em;
    --font-size-small: 0.875em;
    --font-size-x-small: 0.75em;
    --font-size-xx-small-sp: 0.625em;
    --line-height: 1.5;
    --spacing-rem: 1rem;
    --spacing-rem-small: calc(var(--spacing-rem) / 2);
    --spacing-rem-large: calc(var(--spacing-rem) * 1.5);
    --spacing-rem-x-large: calc(var(--spacing-rem) * 2);
    --border-radius: 1rem;
    --border-radius-small: calc(var(--border-radius) / 2);
    --border-radius-large: calc(var(--border-radius) * 2);
    --spacing-em: 1em;
    --spacing-em-small: calc(var(--spacing-em) / 2);
    --spacing-em-large: calc(var(--spacing-em) * 1.5);
    --spacing-em-x-large: calc(var(--spacing-em) * 2);
    --spacing-vertical: 5rem;
    --spacing-horizontal: 1rem;
    --spacing-vertical-side: 4rem;
    --hover-opacity-ratio: 0.8;
    --transition-seconds: .3s;
    --color-font-base: #222;
    --color-font-base-rgb: 34, 34, 34;
    --color-white: #ffffff;
    --color-white-rgb: 255, 255, 255;
    --color-primary: #ff6200;
    --color-primary-rgb: 255, 98, 0;
    --color-secondary: #fcd13e;
    --color-secondary-rgb: 252, 209, 62;
    --color-primary-light: #FFEFE5;
    --color-primary-light-rgb: 255, 239, 229;
    --color-border: #D9D7D7;
    --color-border-rgb: 217, 215, 215;
    --color-beige: #F0EDEA;
    --color-beige-rgb: 240, 237, 234;
    --color-lightest-gray: #F8F6F6;
    --color-lightest-gray-rgb: 248, 246, 246;
    --color-light-gray: #F1F0F0;
    --color-light-gray-rgb: 241, 240, 240;
    --color-gray: #E5E3E3;
    --color-gray-rgb: 229, 227, 227;
    --color-dark-gray: #66615E;
    --color-dark-gray-rgb: 102, 97, 94;
    --color-disabled: #AAAAAA;
    --color-disabled-rgb: 170, 170, 170;
    --color-error: #FF0000;
    --color-error-rgb: 255, 0, 0;
    --color-error-background: #FF0000;
    --color-error-background-rgb: 255, 0, 0;
    --color-success: #008006;
    --color-success-rgb: 0, 128, 6;
    --ff-root: "Noto Sans JP", sans-serif;
    --ff-font-en: "Montserrat", sans-serif;
}
@media screen and (max-width: 767px) {
    :root {
        --design-width: 390;
        --contents-width: 358;
        --contents-side-padding: 82;
        --minwidth: 320;
        --fixed-header-height: 82;
        --font-size-h1: 1.375em;
        --font-size-h2: 1.5em;
        --font-size-h3: 1.125em;
        --font-size-lead: 1em;
        --spacing-vertical: 3rem;
        --spacing-horizontal: 1rem;
    }
}

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

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

body {
    min-width: calc(var(--minwidth) * 1px);
    line-height: var(--line-height);
}

/* ---------------------------------------------
*   <a> tag
--------------------------------------------- */
a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

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

/* ---------------------------------------------
*   <hr> tag as anchor target
--------------------------------------------- */
hr[id^=anchor-] {
    display: block;
    width: auto;
    height: 0;
    padding: calc(var(--fixed-header-height) * 1px) 0 0 0;
    border: 0;
    margin: calc(var(--fixed-header-height) * -1px) 0 0 0;
    background: 0;
    pointer-events: none;
}
@media screen and (max-width: 1024px) {
    hr[id^=anchor-] {
        padding: calc(var(--fixed-header-height) / var(--font-size-base) * 1rem) 0 0 0;
        margin: calc(-var(--fixed-header-height) / var(--font-size-base) * 1rem) 0 0 0;
    }
}