* {
    line-height: 1.8;
}
:root {
    --heading_color: #ffb300;
    --shadow_color: #aaa;
    --animation_time: 20s;
    --overview_color: #100de3;
    --article_time: 30s;
    --recreation_time: 10s;
    --recreation3_time: 35s;
}
.rounded20 {
    border-radius: 20px !important;
}
.flex_wrap {
    display: flex;
    flex-wrap: wrap;
}
.flex_nowrap {
    display: flex;
    flex-wrap: nowrap;
}
.flex_column {
    display: flex;
    flex-direction: column;
}
.gap1 {
    gap: 1em;
}
.gapy1 {
    gap: 1em;
}
.mt_header {
    margin-top: calc(var(--img_logo) + 1.5rem);
}
.container {
    display: flex;
    flex-direction: column;
    width: min(var(--width_max), 96%);
    margin: 0.5em auto 2em;
    gap: 1rem;
}
.g_meeting_heading {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    color: rgb(255, 145, 0);
    font-size: 1.5rem;
    font-weight: bold;
    padding-top: 0.25em;
    padding-left: 1em;
    border-top: 1px solid var(--heading_color);
    border-left: 10px solid var(--heading_color);
    border-bottom: 5px solid var(--heading_color);
    background: linear-gradient(to right, transparent, transparent, var(--heading_color));
    background-color: #fff;
    /* text-shadow: 0 1px 1px #ff8400; */
    letter-spacing: 0.2em;
    box-shadow: 5px 5px 5px #aaa;
    position: relative;
    &::before {
        content: "";
        width: 10px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(to right,#fff 50%, var(--heading_color) 50%);
        z-index: 100;
    }
    & span {
        font-weight: bold;
    }
}

.top_img {
    display: flex;
    width: 100%;
    /* border: 2px solid var(--heading_color); */
    & img {
        width: 100%;
    }
}
/* 前書き　ここから */
.preface {
    /* display: none; */
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1em;
    & .subtitle2 {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(0.9rem,3vw,1.5rem);
        padding: 0.25em 1em;
        text-shadow: 0.07em 0.07em 0.025em #fff;
        background-color: #fcd179;
        font-weight: bold;
        gap: 0 1em;
        & span {
            font-size: clamp(1.2rem,2.5vw,1.5rem);
            font-weight: bold;
        }
    }
    & .preface_container {
        display: flex;
        flex-wrap: nowrap;
        gap: 1em;
        .preface_text {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            width: calc(100% - calc(1em + max(300px,30%)));
            padding: 1em;
            font-size: clamp(0.9rem, 1.75vw, 1.2rem);
            border: 10px double rgb(251, 180, 0);
            .border_double {
                width: 100%;
                padding: 1em;
                border-radius: 0.5em;
            }
        }
        .preface_img {
            /* display: flex; */
            display: block;
            overflow: hidden;
            width: max(300px, 30%);
            height: 100%;
            aspect-ratio: 3 / 2;
            border-radius: 0.5em;
            img {
                width: 100%;
            }
        }
        @media (width < 900px) {
            flex-direction: column;
            align-items: center;
            .preface_text {
                width: 100%;
            }
        }
    }
}
/* 前書き　ここまで */

/* 研修／レクリエーション　ここから */
.article ,.recreation {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 2em;
}
.contents_container {
    display: flex;
    flex-direction: column;
    gap: 1em;
    .subtitle {
        margin-left: 0.5em;
        padding: 0.5em 1em 0.25em;
        font-size: clamp(1rem, 3vw , 1.3rem);
        border-radius: 0.5em;
        font-weight: bold;
        line-height: 1.2;
        &.theme1 {
            color: #004fcd;
            background-color: #fff;
            /* background: linear-gradient(#fff 0%, #fff 10%, #eee 90%, #eee 100%); */
            background: linear-gradient(#ccebf4 0%, #ccebf4 40%, #99d6e7 90%, #99d6e7 100%);
            border: 1px solid #99d6e7;
        }
        &.theme2 {
            color: #ff7002;
            background: linear-gradient(#f8e0ab 0%, #f8e0ab 10%, #fbca61 90%, #fbca61 100%);
            /* background: linear-gradient(#FCBD39 0%, #FCBD39 10%, #E16D15 90%, #E16D15 100%); */
        }
        &.rec {
            color: #FFF;
            letter-spacing: 0.1em;
            /* background: linear-gradient(#FFF 0%, #fff 30%, #C1C1C1 100%); */
            opacity    : .5;
            background : linear-gradient(315deg, 
                                        red    5.3%,
                                        orange 23.3%,
                                        orange 19.6%,
                                        yellow 37.6%,
                                        yellow 33.9%,
                                        green  51.9%,
                                        green  48.2%,
                                        aqua   66.2%,
                                        aqua   62.5%,
                                        blue   80.5%,
                                        blue   76.8%,
                                        purple 94.8%);

            text-shadow: 0.05em 0.05em 0.05em #555;
            border: 1px solid #c1c1c1;
            font-family: "Kosugi Maru", sans-serif;
        }
        @media(width < 900px) {
            display: none;
        }
    }
    .item_container {
        display: flex;
        flex-direction: row;
        gap: 3em;
        .item_left {
            display: flex;
            width: 70%;
            gap: 1em;
            .item1 {
                display: none;
                position: relative;
                aspect-ratio: 3 / 2;
                .article_img {
                    display: flex;
                    overflow: hidden;
                    border-radius: 0.5em;
                    img {
                        width: 100%;
                    }
                }
                .recreation_img {
                    display: flex;
                    overflow: hidden;
                    border-radius: 0.5em;
                    position: absolute;
                    top: 0;
                    left: 0;
                    img {
                        width: 100%;
                    }
                    &.one {
                        animation: recreation_one var(--recreation_time) infinite;
                    }
                    &.two {
                        animation: recreation_two var(--recreation_time) infinite;
                    }
                }
                @media(width < 900px) {
                    display: flex;
                }
            }
            .item2 {
                width: 100%;
                padding-left: 1em;
                align-self: center;
                /* line-height: 1.8; */
            }
            @media (width < 900px) {
                flex-direction: column;
                align-items: center;
                width: 100%;
                .item1 {
                    width: max(300px,50%);
                }
                .item2 {
                    width: 90%;
                }
            }
        }
        .item_right {
            margin-left: 0.75em;
            width: 30%;
            aspect-ratio: 4 / 2.25;
            border-radius: 0.5em;
            position: relative;
            .article_img{
                display: flex;
                width: 100%;
                overflow: hidden;
                border: 1px solid #ccc;
                border-radius: 0.5em;
                position: absolute;
                top: 0;
                left: 0;
                img{
                    width: 100%;
                }
                &.one {
                    animation: article_one var(--article_time) infinite;
                }
                &.two {
                    animation: article_two var(--article_time) infinite;
                }
                &.three {
                    animation: article_three var(--article_time) infinite;
                }
                &.four {
                    animation: article_four var(--article_time) infinite;
                }
                &.five {
                    animation: article_five var(--article_time) infinite;
                }
            }
            .recreation_img{
                display: flex;
                width: 100%;
                overflow: hidden;
                border: 1px solid #ccc;
                border-radius: 0.5em;
                position: absolute;
                top: 0;
                left: 0;
                img{
                    width: 100%;
                }
                &.one {
                    animation: recreation3_one var(--recreation3_time) infinite;
                }
                &.two {
                    animation: recreation3_two var(--recreation3_time) infinite;
                }
                &.three {
                    animation: recreation3_three var(--recreation3_time) infinite;
                }
                &.four {
                    animation: recreation3_four var(--recreation3_time) infinite;
                }
                &.five {
                    animation: recreation3_five var(--recreation3_time) infinite;
                }
                &.six {
                    animation: recreation3_six var(--recreation3_time) infinite;
                }
                &.seven {
                    animation: recreation3_seven var(--recreation3_time) infinite;
                }
            }
            @media (width < 900px) {
                width: max(300px,50%);
            }
        }
        @media (width < 900px) {
            flex-direction: column;
            align-items: center;
            .item_left {
                order: 1;
            }
            .item_right {
                order: 2;
            }
        }
    }
}

@keyframes article_one {
    0% {
        opacity: 1;
    }
    16% {
        opacity: 1;
    }
    20% {
        opacity: 0;
    }
    96%{
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes article_two {
    0% {
        opacity: 0;
    }
    16% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    36%{
        opacity: 1;
    }
    40% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes article_three {
    0% {
        opacity: 0;
    }
    36% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    56%{
        opacity: 1;
    }
    60% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes article_four {
    0% {
        opacity: 0;
    }
    56% {
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    76%{
        opacity: 1;
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes article_five {
    0% {
        opacity: 0;
    }
    76% {
        opacity: 0;
    }
    80% {
        opacity: 1;
    }
    96%{
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes recreation_one {
    0% {
        opacity: 1;
    }
    30% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes recreation_two {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes recreation3_one {
    0% {
        opacity: 1;
    }
    12% {
        opacity: 1;
    }
    15% {
        opacity: 0;
    }
    97% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes recreation3_two {
    0% {
        opacity: 0;
    }
    12% {
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    27% {
        opacity: 1;
    }
    30% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes recreation3_three {
    0% {
        opacity: 0;
    }
    27% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    41% {
        opacity: 1;
    }
    44% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes recreation3_four {
    0% {
        opacity: 0;
    }
    41% {
        opacity: 0;
    }
    44% {
        opacity: 1;
    }
    55% {
        opacity: 1;
    }
    58% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes recreation3_five {
    0% {
        opacity: 0;
    }
    55% {
        opacity: 0;
    }
    58% {
        opacity: 1;
    }
    69% {
        opacity: 1;
    }
    72% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes recreation3_six {
    0% {
        opacity: 0;
    }
    69% {
        opacity: 0;
    }
    72% {
        opacity: 1;
    }
    83% {
        opacity: 1;
    }
    86% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes recreation3_seven {
    0% {
        opacity: 0;
    }
    83% {
        opacity: 0;
    }
    86% {
        opacity: 1;
    }
    97% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
/* 研修／レクリエーション　ここから */

/* 優秀社員賞、ゲスト紹介　ここから */
.introduction {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    gap: 1em;
    & .mvp {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        overflow: hidden;
        .conference {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 90%;
            font-size: 1rem;
            gap: 2em 3em;
            & .mvp_img {
                width: 180px;
                height: 180px;
                border: 1px solid var(--shadow_color);
                border-radius: 50%;
                overflow: hidden;
                box-shadow: 3px 3px 5px var(--shadow_color);
                object-fit: contain;
                & img {
                    width: 100%;
                }
            }
            & .mvp_text {
                display: flex;
                flex-direction: column;
                width: calc(100% - calc(180px + 1em));
                gap: 1em;
                /* align-self: center; */
            }
        }
    }
    & .guest {
        width: calc(40% - 1rem);
        display: flex;
        flex-direction: column;
        align-items:center;
        & .guest_text {
            width: 90%;
            & span {
                font-size: 0.75rem;
            }
        }
    }
}
/* 優秀社員賞、ゲスト紹介　ここまで */
/* 実行委員から　ここから */
.executive_committee {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 1em;
    overflow: hidden;
    & .executive_committee_containar {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 3em;
        width: 90%;
        & .executive_committee_img {
            width: 180px;
            height: 180px;
            border-radius: 1000px;
            overflow: hidden;
            border: 1px solid var(--shadow_color);
            box-shadow: 3px 3px 5px var(--shadow_color);
            & img {
                width: 100%;
            }
        }
        & .executive_committee_text {
            display: flex;
            flex-direction: column;
            width: calc(100% - calc(180px + 1em));
            gap: 1em;
            align-self: center;
        }
    }
}
/* 実行委員から　ここまで */
    @media (width < 900px) {
        /* 前書きエリア　ここから */
        .overview2 {
            & .subtitle2 {
                flex-direction: column;
                align-items: center;
                & span {
                    font-size: clamp(1.15rem,4vw,1.5rem);
                    font-weight: bold;
                }
            }
            & .overview_containar {
                width: 100%;
                flex-direction: column-reverse;
                align-items: center;
                & .overview2_item1 {
                    width: max(300px, 60%);
                }
                & .overview2_item2 {
                    width: max(300px, 60%);
                    & .overview2_img {
                        display: none;
                    }
                }
                & .overview2_item3 {
                    display: none;
                }
            }
        }
        /* 前書きエリア　ここまで */

        /* 挨拶・食事風景・社員交流記事　ここから */
        .article {
            & .conference {
                flex-direction: column;
                align-items: center;
                & .conference_item {
                    width: max(300px, 60%);
                }
            }
        }
        /* 挨拶・食事風景・社員交流記事　ここまで */

        /* レクリエーション　ここから */
        .recreation {
            .recreation_container {
                flex-direction: column;
                align-items: center;
                width: 90%;
                gap: 1em;
            }
        }
        /* レクリエーション　ここまで */

        /* 優秀社員賞、ゲスト紹介　ここから */
        .introduction {
            flex-direction: column;
            & .mvp {
                width: 100%;
                align-items: center;
                & .conference {
                    flex-direction: column-reverse;
                    align-items: center;
                    & .mvp_text {
                    width: max(300px, 60%);
                    }
                }
            }
            & .guest {
                width: 100%;
                & .guest_text {
                    width: max(300px, 60%);
                }
            }
        }
        /* 優秀社員賞、ゲスト紹介　ここまで */

        /* 実行委員から　ここから */
        .executive_committee {
            & .executive_committee_containar {
                flex-direction: column-reverse;
                align-items: center;
                & .executive_committee_text {
                    width: max(300px, 60%);
                }
            }
        }
        /* 実行委員から　ここまで */
    }