:root {
        --topPage_transition: 3.5vw;
        --titleC_height: 7.6258vw;
        --titleR_transY: -3.7621vw;
        --titleEn: 7.3208vw;
        --titleEn_transY: 3.5587vw;
        --titleJp: 2.4403vw;
        --titleJp_transX: -6.1007vw;
        --titleJp_transY: -1.9vw;
        --infoTable_width: 76.254vw;
        --news_fontsize: 1.0471vw;

        --SBS_font: 4.6609vw;
        --firstletter: 5.4377vw;
        --mada: 4.3502vw;
        --mada_padding_T: 3.9044vw;
        --mada_padding_B: 1.5252vw;
        --circle_size: 43.502vw;
        --SBS_before_T: -6.2145vw;
        --SBS_before_L: -4.6298vw;
        --tt_width: 28.775vw;
        --tt_height: 17.692vw;
        --tt_fontsize: 1.9420vw;
        --tt_margin_T: 9.3218vw;
        --tt_margin_B: 6.2145vw;
        --tt_margin_L: 24.8582vw;
        --btn_fontsize: 2.0336vw;

        --circle_T: -6.2145vw;
        --circle_wide: 2.5vw;
        --picture_width: 38.13vw;
        --picture_height: 25.419vw;
        --slide_C: 48.446vw;
        --slide_gap: 3.5vw;
        --textbox_fontsize: 1.9420vw;
        --textbox_padding: 3.1073vw;
        --textbox_margin_TB: 3.1073vw;
        --textbox_margin_LR: 7.7682vw;
        --btn_margin_TB: 0.77682vw;
        --btn_margin_LR: 3.8841vw;
        --btn_padding_TB: 0.46609vw;
        --btn_padding_LR: 0.77682vw;
        --btnB: 1.5536vw;
    }


/* お知らせ */
#information {
    padding-top: var(--topPage_transition);
    margin-top: calc(-1*var(--topPage_transition));
}

.information {
    width: var(--infoTable_width);
    height: auto;
    margin: 0 auto 10vw auto;
}

.information_frame {
    width: 100%;
    height: 17.0157vw;
    overflow-y: scroll;
}

.info_title_c {
    display: grid;
    grid-template-columns: 0 1fr;
    height: var(--titleC_height);
    margin: 5px 0px 20px 0px;
}

.info_title_r {
    display: grid;
    grid-template-rows: repeat(2, auto);
    transform: translateY(var(--titleR_transY));
}

#info_title_en {
    position: relative;
    transform: translateY(var(--titleEn_transY));
    margin: 5px 0px;
    color: #bbb;
    font-size: var(--titleEn);
    font-weight: bold;
    text-align: left;
}

#info_title_jp {
    position: relative;
    transform: translate(var(--titleJp_transX), var(--titleJp_transY));
    font-size: var(--titleJp);
    font-weight: bold;
    text-align: center;
    z-index: 1;
}

.information_frame>:nth-child(odd) {
    background-color: #FFFAF0;
}

.information_frame>:nth-child(even) {
    background-color: #afc1e06f;
}

.info_news {
    display: grid;
    grid-template-columns: 0.6fr 0.5fr 3fr;
    gap: 3px;
    height: auto;
    min-height: 2.2906vw;
}

.info_relative {
    position: relative;
}

.info_day {
    width: 8.8174vw;
}

.info_category {
    width: 5.5628vw;
    margin: 3px 0px;
}

.info_topic {
    height: auto;
    margin: 3px 5px 3px 0px;
    text-align: left;
}

.info_topic .solo {
    height: 1.8979vw;
    line-height: 1.8979vw;
}

.day {
    position: absolute;
    min-width: 85px;
    height: 1.5249vw;
    line-height: 1.5249vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--news_fontsize);
    text-align: center;
}

.category {
    position: absolute;
    font-size: 0.98168vw;
    width: 5.2356vw;
    height: 1.5249vw;
    line-height: 1.5249vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--news_fontsize);
    color: #fff;
    text-align: center;
    border-radius: 50%;
}

.topic {
    font-size: var(--news_fontsize);
    height: 1.5249vw;
    line-height: 1.5249vw;
}

/* /お知らせ */

.menu {
    width: 84.73%;
    margin: 0 auto;
}

.SBS {
    position: relative;
    padding-top: 6px;
    font-size: var(--SBS_font);
    font-weight: bold;
    text-align: left;
}

.SBS p {
    position: relative;
    line-height: 0.95;
    margin: 0%;
    padding: 0%;
    z-index: 10;
}

.SBS p:first-letter {
    color: #413788;
    font-size: var(--firstletter);
}

.SBS:before {
    content: "";
    position: absolute;
    width: var(--circle_size);
    height: var(--circle_size);
    top: var(--SBS_before_T);
    left: var(--SBS_before_L);
    background-color: #6b9bd6;
    border-radius: 50%;
    opacity: 0.7;
    z-index: 1;
}

.mada {
    text-align: left;
    padding-top: var(--mada_padding_T);
}

.mada p {
    position: relative;
    line-height: 0.95;
    padding-bottom: var(--mada_padding_B);
    margin: 0px;
    font-size: var(--mada);
    font-weight: bold;
    z-index: 10;
}

.top_text {
    margin: var(--tt_margin_T) 0px var(--tt_margin_B) var(--tt_margin_L);
    font-size: var(--tt_fontsize);
    text-align: left;
}

.altern {
    display: grid;
    grid-template-rows: repeat(3, auto);
    gap: 8vw;
    margin-top: 7vw;
}

.altern:last-child {
    padding-bottom: 10vw;
}

.slide_left {
    position: relative;
    display: grid;
    grid-template-columns: var(--slide_C) var(--slide_C);
    gap: calc(100%- var(--slide_C)*2);
    z-index: 10;

    opacity: 0;
    transform: translateX(-20%);
    transition: 2000ms;
}

.slide_left.is-visible {
    opacity: 1;
    transform: translateX(0%);
}

.slide_right {
    position: relative;
    display: grid;
    grid-template-columns: var(--slide_C) var(--slide_C);
    gap: var(--slide_gap);
    z-index: 10;

    opacity: 0;
    transform: translateX(20%);
    transition: 2000ms;
}

.slide_right.is-visible {
    opacity: 1;
    transform: translateX(0%);
}

.texts {
    color: white;
    background-color: #ccc;
    text-align: center;
    align-items: center;
}

.textbox {
    position: relative;
    display: grid;
    grid-template-rows: repeat(3, auto);
    gap: 1vw;
    width: var(--tt_width);
    height: var(--tt_height);
    padding: var(--textbox_padding);
    margin: var(--textbox_margin_TB) auto;
    color: black;
    background-color: white;
    font-size: var(--textbox_fontsize);
    z-index: 10;
}

.circle1:before {
    content: "";
    position: absolute;
    width: var(--circle_size);
    height: var(--circle_size);
    top: var(--circle_T);
    right: var(--circle_wide);
    background-color: #899bd6;
    border-radius: 50%;
    opacity: 0.7;
    z-index: 1;
}

.circle2:before {
    content: "";
    position: absolute;
    width: var(--circle_size);
    height: var(--circle_size);
    top: var(--circle_T);
    left: var(--circle_wide);
    background-color: #a79bd6;
    border-radius: 50%;
    opacity: 0.7;
    z-index: 1;
}

.circle3:before {
    content: "";
    position: absolute;
    width: var(--circle_size);
    height: var(--circle_size);
    top: var(--circle_T);
    right: var(--circle_wide);
    background-color: #c59bd6;
    border-radius: 50%;
    opacity: 0.7;
    z-index: 1;
}

.detail_button {
    position: relative;
    padding: var(--btn_padding_TB) var(--btn_padding_LR);
    margin: var(--btn_margin_TB) var(--btn_margin_LR);
    background-color: #fff;
    font-size: var(--btn_fontsize);
    text-align: center;

    border: 0.065445vw solid #888;
    border-radius: 100px;
    box-shadow: 1px 1px 1px #ccc;
}

.detail_button:hover {
    cursor: pointer;
}

.detail_button:before {
    content: "";
    display: block;
    position: absolute;
    width: var(--btnB);
    height: var(--btnB);
    top: 50%;
    right: 2.25vw;
    transform: rotate(45deg) translateY(-50%);

    border-top: 0.1vw solid #000;
    border-right: 0.1vw solid #000;
}

.detail_button:hover::before {
    animation-name: move;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

@keyframes move {
    0% {
        transform: rotate(45deg) translateY(-50%);
        animation-timing-function: linear;
    }

    25% {
        transform: translateX(6px) rotate(45deg) translateY(-50%);
        animation-timing-function: linear;
    }

    75% {
        transform: translateX(-6px) rotate(45deg) translateY(-50%);
        animation-timing-function: linear;
    }

    100% {
        transform: rotate(45deg) translateY(-50%);
        animation-timing-function: linear;
    }
}