@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:500,700,400");

html {
    scroll-behavior: smooth;
}
.pc {
    display: block;
}

.sp {
    display: none;
}

p {
    line-break: normal;
    line-height: 2em;
}

@media only screen and (max-width: 768px) {
    .pc {
        display: none;
    }

    .sp {
        display: block;
    }
}

.screen textarea:focus,
.screen input:focus {
    outline: none;
}

.screen * {
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}

.screen div {
    -webkit-text-size-adjust: none;
}

.screen a {
    display: contents;
    text-decoration: none;
}

.full-width-a {
    width: 100%;
}

.full-height-a {
    height: 100%;
}

@keyframes reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.align-self-flex-start {
    align-self: flex-start;
}

.align-self-flex-end {
    align-self: flex-end;
}

.align-self-flex-center {
    align-self: center;
}


input:focus {
    outline: none;
}

.hidden,
.hidden * {
    pointer-events: none;
    visibility: hidden;
}

* {
    box-sizing: border-box;
}

:root {
    --lochmara: #0176bb;
    --mine-shaft: #2f302f;
    --white: #ffffff;

    --font-size-l: 18px;
    --font-size-m: 16px;
    --font-size-s: 14px;
    --font-size-xl: 24px;
    --font-size-xxl: 26px;
    --font-size-xxxl: 36px;
    --font-size-xxxxl: 40px;

    --font-family-mplus1c-bold: "M+1c-bold", Helvetica;
    --font-family-noto_sans_jp: "Noto Sans JP", Helvetica;
    /* Colors */
    --color-white: #fff;
    --color-yellowgreen: #76bd34;
    --color-maroon: #5b1300;
    --color-steelblue: #0176bb;
    --color-darkslategray: #2f302f;
    --color-red: #e50000;
    --color-yellow: #ffff30;
    --color-whitesmoke: #f7f7f7;
    --aqua-pearl: #63b3db;
    --black: #000000;
    --celeste: #cfcfcf;
    --crusta: #f17b2e;
    --denim: #2483c5;
    --denim-2: #2c6eb0;
    --dove-gray: #707070;
    --fiord: #415763;
    --limed-spruce: #37474f;
    --mercury: #e6e6e6;
    --picton-blue: #30aaee;
    --quill-gray: #d5d5d5;
    --scarlet: #ee1313;
    --shark: #292929;
    --tango: #ec711e;
    --tango-2: #ed7321;
    --tory-blue: #144f90;
    --zircon: #f2f9ff;
    --zircon-2: #f5f8fb;

    /* Gaps */
    --gap-xl: 1.25rem;
    --gap-31xl: 3.125rem;
    --gap-65xl: 5.25rem;
    --gap-11xl: 1.875rem;
    --gap-3xs: 0.625rem;
    --gap-8xs: 0.312rem;
    --gap-5xs: 0.5rem;
    --gap-21xl: 2.5rem;

    /* Border radiuses */
    --br-8xs: 5px;
    --br-9xs: 4px;
    --br-10xs: 3px;
    --br-3xs: 10px;
}


.notosansjp-normal-mine-shaft-16px {
    color: var(--mine-shaft);
    font-family: var(--font-family-noto_sans_jp);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 400;
}

.notosansjp-normal-mine-shaft-18px {
    color: var(--mine-shaft);
    font-family: var(--font-family-noto_sans_jp);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 400;
}

.notosansjp-bold-mine-shaft-18px {
    color: var(--mine-shaft);
    font-family: var(--font-family-noto_sans_jp);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 700;
}

.notosansjp-bold-mine-shaft-36px {
    color: var(--mine-shaft);
    font-family: var(--font-family-noto_sans_jp);
    font-size: var(--font-size-xxxl);
    font-style: normal;
    font-weight: 700;
}

.notosansjp-bold-mine-shaft-40px {
    color: var(--mine-shaft);
    font-family: var(--font-family-noto_sans_jp);
    font-size: var(--font-size-xxxxl);
    font-style: normal;
    font-weight: 700;
}

.notosansjp-bold-black-14px {
    color: var(--black);
    font-family: var(--font-family-noto_sans_jp);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 700;
}

.notosansjp-bold-black-16px {
    color: var(--black);
    font-family: var(--font-family-noto_sans_jp);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 700;
}

.notosansjp-bold-white-20px {
    color: var(--white);
    font-family: var(--font-family-noto_sans_jp);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
}

.notosansjp-bold-white-28px {
    color: var(--white);
    font-family: var(--font-family-noto_sans_jp);
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
}

.notosansjp-bold-white-34px {
    color: var(--white);
    font-family: var(--font-family-noto_sans_jp);
    font-size: var(--font-size-xxxl);
    font-style: normal;
    font-weight: 700;
}

.notosansjp-bold-white-36px {
    color: var(--white);
    font-family: var(--font-family-noto_sans_jp);
    font-size: var(--font-size-xxxl);
    font-style: normal;
    font-weight: 700;
}

.m1c-bold-lochmara-18px {
    color: var(--lochmara);
    font-family: var(--font-family-mplus1c-bold);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 700;
}

.notosansjp-bold-mine-shaft-24px {
    color: var(--mine-shaft);
    font-family: var(--font-family-noto_sans_jp);
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 700;
    line-height: 2rem;
}

.notosansjp-normal-white-14px {
    color: var(--white);
    font-family: var(--font-family-noto_sans_jp);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 400;
}

.notosansjp-bold-lochmara-14px {
    color: var(--lochmara);
    font-family: var(--font-family-noto_sans_jp);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 700;
}

.notosansjp-bold-tory-blue-20px {
    color: var(--tory-blue);
    font-family: var(--font-family-noto_sans_jp);
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 700;
}

.notosansjp-bold-tory-blue-24px {
    color: var(--tory-blue);
    font-family: var(--font-family-noto_sans_jp);
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 700;
    line-height: 2rem;
}


.notosansjp-bold-tory-blue-42px {
    color: var(--tory-blue);
    font-family: var(--font-family-noto_sans_jp);
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
}
.notosansjp-bold-picton-blue-42px {
    color: var(--picton-blue);
    font-family: var(--font-family-noto_sans_jp);
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
}

.notosansjp-normal-shark-16px {
    color: var(--shark);
    font-family: var(--font-family-noto_sans_jp);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 400;
}

.text-underline {
    text-decoration: underline;
    text-underline-offset: 0.5em;
}
/* SCROLLBAR */
[dark-scroll]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[dark-scroll]::-webkit-scrollbar-track-piece {
    background-color: #2b2b2b;
    border: 1px solid #1d1d1d;
}

[dark-scroll]::-webkit-scrollbar-thumb {
    height: 10px;
    background-color: #4d4d4d;
}

[dark-scroll]::-webkit-scrollbar-thumb:hover {
    background-color: #5a5a5a;
}

.bottom-arrow-btn {
    position: relative;
    background-color: #0176BB;
    height: 62px;
    width: 100%;
    border-radius: 28px;
}

.bottom-arrow-btn:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: solid 10px #0176BB;
    border-left: solid 15px transparent;
    border-right: solid 15px transparent;
}

.highlight-orange {
    color: var(--tango);
}
.highlight-blue {
    color: var(--picton-blue);
}