:root {
    --main-accent-color: #226471;
    --base-color: #F7F6F1;
    --sub-base-color: #F2F0E9;
    --black: #313131;
    --white: #ffffff;
    --gray: #707070;

}

* {
    font-family: "Noto Sans JP", "Open Sans", sans-serif;
    letter-spacing: .08em;
    line-height: 145%;
    box-sizing: border-box;
}

body {
    padding-right: 3.2rem;

    @media (max-width: 1440px) {
        padding-right: 2.22vw;
    }

    @media (max-width: 768px) {
        padding-right: 2rem;
    }
}

/* 日本語フォント（デフォルト：Noto Sans JP） */
body,
html,
:lang(ja) {
    font-family: "Lato", "Noto Sans JP", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* Shippori Mincho用クラス */
.font-mincho {
    font-family: "Shippori Mincho", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

/* 英語フォント */
[lang="en"],
:lang(en),
.en,
.font-en {
    font-family: "Lato", Roboto, "Helvetica Neue", Arial, sans-serif;
}



html {
    background-image: url(../img/common/bg-cross.svg);
    background-repeat: repeat;
    background-size: 1.6%;
    color: var(--text-color);

    @media (min-width: 1440px) {
        font-size: 10px;
    }

    @media (max-width: 1440px) {
        font-size: calc(100vw / 144);
    }

    @media (max-width: 768px) {
        font-size: 10px;
        background-size: 5%;
    }
}

main {
    padding-top: 7rem;

    @media (max-width: 1440px) {
        padding-top: 4.861vw;
    }

    @media (max-width: 769px) {
        padding-top: 5.6rem;
    }
}

.container {
    margin: 0 auto;
    padding: 0 12rem;
    width: 83%;
    min-width: 1440px;
    max-width: 1920px;

    @media (max-width: 1440px) {
        width: 95%;
        min-width: unset;
        padding: 0 8.333vw;
    }

    @media (max-width: 769px) {
        padding: 0 2.4rem;
        width: 100%;
    }
}

.container-s {
    margin: 0 auto;
    width: 83%;
    padding: 0 12rem;
    max-width: 1020px;

    @media (max-width: 1440px) {
        width: 95%;
        min-width: unset;
        padding: 0 8.333vw;
    }

    @media (max-width: 769px) {
        width: 90%;
        padding: 0;
    }
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

video {
    width: 100%;
    height: auto;
}

.grecaptcha-badge {
    visibility: hidden;
}

input:-internal-autofill-selected,
textarea:-internal-autofill-selected,
select:-internal-autofill-selected {
    -webkit-text-fill-color: #333 !important;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}