:root {
    --window-width: 1154px;
    --window-height: 600px;
    --window-aspect-ratio: calc(var(--window-height) / var(--window-width));

    --content-padding: 10px;
    --frame-padding: 4px;
    --text-padding-horizontal: 22px;
    --text-padding-vertical: 22px;
    --title-height: 88px;
    --title-font-size: 32px;
    --font-size: 15px;
    --line-height: 28px;
    --scrollbar-width: 14px;
    --popup-frame-width: calc(var(--window-width) - (2 * var(--content-padding)));
    --popup-frame-height: calc(var(--window-height) - (2 * var(--content-padding)));
    --title-area-width: calc((var(--window-width) - (2 * (var(--frame-padding) + var(--text-padding-horizontal) + var(--content-padding)))));
    --body-area-height: calc(var(--window-height) - var(--text-padding-vertical) - var(--title-height) - (2 * (var(--content-padding) + var(--frame-padding))));
}

body {
    margin: 0;
    color: white;       /* 文字色 */
    font-size: calc(var(--font-size) / var(--window-height) * var(--window-aspect-ratio) * 100vw);      /* 文字サイズ */
    line-height: calc(var(--line-height) / var(--window-height) * var(--window-aspect-ratio) * 100vw);  /* 行サイズ */
    background-color: #000000;
}

.content {
    padding: calc(var(--content-padding) / var(--window-width) * 100vw);
}

/* 見出しテキストスタイル */
.text_heading {
    color: #A8A8DB;     /* 文字色 */
}

/* 注意書きテキストスタイル */
.text_caution {
    color: #FF376E;     /* 文字色 */
}

/* フレーム画像（タイトル表示スペースなし） */
.popup_frame {
    width: calc(var(--popup-frame-width) / var(--window-width) * 100vw);
    height: calc(var(--popup-frame-height) / var(--window-height) * var(--window-aspect-ratio) * 100vw);
    background-image: url(../img/common/PopupFrame.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* フレーム画像（タイトル表示スペースあり） */
.popup_frame_with_title {
    width: calc(var(--popup-frame-width) / var(--window-width) * 100vw);
    height: calc(var(--popup-frame-height) / var(--window-height) * var(--window-aspect-ratio) * 100vw);
    background-image: url(../img/common/PopupFrame_line.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* タイトルテキストスタイル */
.text_title {
    font-size: calc(var(--title-font-size) / var(--window-height) * var(--window-aspect-ratio) * 100vw);
    font-weight: bold;
}

/* タイトル表示エリア */
.title_area {
    position: absolute;
    width: calc(var(--title-area-width) / var(--window-width) * 100vw);
    height: calc(var(--title-height) / var(--window-height) * var(--window-aspect-ratio) * 100vw);
    line-height: calc(var(--title-height) / var(--window-height) * var(--window-aspect-ratio) * 100vw);
    margin-top: calc(var(--frame-padding) / var(--window-width) * 100vw);
    margin-left: calc(var(--frame-padding) / var(--window-width) * 100vw);
    padding: 0 calc(var(--text-padding-horizontal) / var(--window-width) * 100vw);
}

/* 本文表示エリア */
.body_area_with_title {
    position: absolute;
    width: calc((var(--window-width) - (2 * (var(--content-padding) + var(--frame-padding))) - var(--scrollbar-width)) / var(--window-width) * 100vw);
    height: calc(var(--body-area-height) / var(--window-height) * var(--window-aspect-ratio) * 100vw);
    margin-top: calc((var(--title-height) + var(--text-padding-vertical)) / var(--window-height) * var(--window-aspect-ratio) * 100vw);
    margin-left: calc(var(--frame-padding) / var(--window-width) * 100vw);
    overflow-y: auto;
}

/* 本文のテキスト */
.body_text {
    position: absolute;
    margin: 0 calc(var(--text-padding-horizontal) / var(--window-width) * 100vw);
}

/* scrollbar */
@media not (forced-colors: active) {
    @supports selector(::-webkit-scrollbar) {
        ::-webkit-scrollbar {
            width: calc(var(--scrollbar-width) / var(--window-width) * 100vw);
            height: 0;
        }
        ::-webkit-scrollbar-track {
            border-image: url(../img/common/ScrollBar_Base.png) 40% 0 fill / auto / 0 stretch;
        }
        ::-webkit-scrollbar-thumb {
            border-image: url(../img/common/ScrollBar_Handle.png) 40% 0 fill / auto / 0 stretch;
        }
    }
    @supports not selector(::-webkit-scrollbar) {
        .scroller {
            scrollbar-color: #CED4DE #000000;
        }
    }
}