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

    --x-dark-gray: #555252;
    --dark-gray: #6F6F6F;
    --gray: #707070;
    --right-gray: #C7C7C7;
    --xx-right-gray: #F7F7F7;

    --x-small: 0.75rem;
    /* 12px */
    --small: 0.875rem;
    /* 14px */
    --regular: 1rem;
    /* 16px */
    --large: 1.125rem;
    /* 18px */
    --x-large: 1.25rem;
    /* 20px */
    --xx-large: 1.375rem;
    /* 22px */
    --xxx-large: 1.5rem;
    /* 24px */

}

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

/* 日本語フォント（デフォルト：Noto Sans JP） */
body,
html,
:lang(ja) {
    font-family: "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: "Open Sans", "Avenir", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}



html {
    color: var(--text-color);

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

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

    @media (max-width: 768px) {
        font-size: 14px;
    }

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

.container {
    margin: 0 auto;
    padding: 0 12rem;
}

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

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