@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP&family=Roboto:wght@700&display=swap');

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * RESET...............リセット
 * GLOBAL-VARIABLES....グローバル変数
 * ELEMENTS............要素
 * COMMON..............共通
 */





/*------------------------------------*\
    $RESET
\*------------------------------------*/
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
    all: unset;
    display: revert;
}

*,
*::before,
*::after { box-sizing: border-box }

ol, ul {
    list-style: none;
}

table {
    border-collapse: collapse;
}

textarea {
    form-sizing: content;
    white-space: revert;
}

:focus {
    outline: none;
}

a, button, select {
    cursor: pointer;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--white) inset !important;
    -webkit-text-fill-color: inherit !important;
}

input {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

input:where(:not([type=datetime]):not([type=date]):not([type=month]):not([type=week]):not([type=time]):not([type=datetime-local]))::-webkit-calendar-picker-indicator {
    display: none !important;
}





/*------------------------------------*\
    $GLOBAL-VARIABLES
\*------------------------------------*/
:root {
    /**
     * Color set
     */
    --neutralColor: #333333;
    --secondaryNeutralColor: #6C6E6F;
    --accentColor: #FF8B71;

    /**
     * Font set
     */
    --fontGothic: 'Noto Sans JP', sans-serif;
    --fontMincho: 'Noto Serif JP', serif;
    --fontEN    : 'Lato', sans-serif;
    --fontEN2   : 'Roboto', sans-serif;

    /**
     * Types of easing
     */
    --linear        : cubic-bezier(0.250, 0.250, 0.750, 0.750);
    --easeOutQuart  : cubic-bezier(0.165, 0.84,  0.44,  1    );

}





/*------------------------------------*\
    $ELEMENTS
\*------------------------------------*/
html {
    background-color: white;
    color: var(--neutralColor);
    font-family: var(--fontGothic);
    font-size: 62.5%;
    font-weight: 400;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: none;
       -moz-text-size-adjust: none;
            text-size-adjust: none;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
}

picture, img {
    display: block;
    max-width: 100%;
    pointer-events: none;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700 }

strong { font-weight: 700 }

a, button {
    cursor: pointer;
}





/*------------------------------------*\
    $COMMON
\*------------------------------------*/
@media screen and (min-width: 1024px) {
    .less1024 { display: none !important }
}
@media screen and (max-width: 1023px) {
    .over1024 { display: none !important }
}