@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap');

html:not([lang="en-US"]) .en,
html:not([lang="ja-JP"]) .ja {
    display: none !important;
}

body {
    overflow-x: hidden;

    background-color: var(--bg-color);
    color: var(--font-color);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    font-size: var(--font-size);
}

.ja {
    font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "YU Gothic UI", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.ja * {
    font-size: calc(0.9*var(--font-size));
}

header {

}




.header-left {
    display: inline-block;
    float: left;
}

main {
    margin: 3.6rem 2rem;
    min-height: calc(100vh - 8rem - 3rem);
}


h1, h2, h3, h4, h5, h6 {
    color: var(--h-font-color);
    font-weight: 500;
    margin: 0;
}

.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--h-font-color);
    font-weight: 500;
    margin: 0;
}


h1, .h1 {font-size: 2.8rem !important;}
h2, .h2 {font-size: 2.4rem !important;}
h3, .h3 {font-size: 2.2rem !important;}
h4, .h4 {font-size: 2rem !important;}

p {
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    margin-bottom: calc(1.25*var(--font-size));
}

.ja p {
    font-size: calc(0.9*var(--font-size));
}


p.ja {
    font-size: calc(0.9*var(--font-size));
}

strong {
    color: var(--strong-color);
}

.primary-color {
    color: var(--primary-color) !important;
}

.button {
    font-size: var(--font-size);
    background-color: var(--bg-color);
    border: 1px solid var(--font-color);
    color: var(--font-color);
    padding: 1rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 3px;
    font-weight: var(--font-weight);
}



.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 1.8rem;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    transform: translateY(0.3rem);

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';

    color: var(--font-color);
  }

.md18 {font-size: 1.8rem;}
.md24 {font-size: 2.4rem;}
.md36 {font-size: 3.6rem;}
.md48 {font-size: 4.8rem;}

.pseudo-button {
    user-select: none;
}
.pseudo-button + .pseudo-button {
    padding-left: 1rem;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.float-l {
    float: left;
}
.float-r {
    float: right;
}


input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    
}

label {
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    user-select: none;
    display: block;
}


footer {
    height: 3rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: calc(0.85*var(--font-size));
}