@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap");
.mincho {
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.tukusi {
    font-family: "FOT-筑紫オールド明朝 Pro R", "TsukuOldMinPro-R", serif;
}

.hlv {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.century {
    font-family: "Questrial", sans-serif;
}

.minimunWidth {
    width: 720px;
    margin-right: auto;
    margin-left: auto;
}

.inrWidth {
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
}

.outerWidth {
    width: 1200px;
    margin-right: auto;
    margin-left: auto;
}

.fullWidth {
    margin-right: auto;
    margin-left: auto;
}

@media print,
screen and (min-width: 1400px) {
    .fullWidth {
        width: 1400px;
    }
    .inrWidth {
        width: 1000px;
    }
    .minimumWidth {
        width: 720px;
    }
}

@media print,
screen and (min-width: 1200px) and (max-width: 1400px) {
    .fullWidth {
        width: 100%;
    }
    .outerWidth {
        width: 1200px;
    }
    .inrWidth {
        width: 1000px;
    }
    .minimumWidth {
        width: 720px;
    }
}

@media print,
screen and (min-width: 768px) and (max-width: 1400px) {
    .fullWidth {
        width: 90% !important;
    }
}

@media print,
screen and (min-width: 768px) and (max-width: 1200px) {
    .outerWidth {
        width: 95% !important;
    }
    .minimumWidth {
        width: 720px;
    }
}

@media print,
screen and (min-width: 768px) and (max-width: 1000px) {
    .inrWidth {
        width: 95% !important;
    }
}

@media screen and (max-width: 768px) {
    .minimumWidth {
        width: 90%;
    }
    .inrWidth {
        width: 90%;
    }
    .outerWidth {
        width: 90% !important;
    }
    .fullWidth {
        width: 90% !important;
    }
}


/*----------------------------------------
HEADER
-----------------------------------------*/


/*----------------------------------------
FOOTER
-----------------------------------------*/


/*----------------------------------------
MAIN
-----------------------------------------*/

input[type="text"],
input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
}

@media screen and (min-width: 769px) {
    #OseTOP .mv {
        position: relative;
    }
    #OseTOP .mv::before {
        position: absolute;
        width: 100%;
        height: 100%;
        content: "";
        background: rgba(34, 34, 34, 0.5);
        display: block;
        z-index: 1;
        pointer-events: none;
    }
    #OseTOP .mv h1 {
        position: absolute;
        top: 5%;
        left: 5%;
        color: #fff;
        font-size: 3rem;
        font-weight: bold;
        z-index: 10;
        transition: all 2s;
    }
    #OseTOP .mv .slick-dotted.slick-slider {
        margin-bottom: 0 !important;
    }
    #OseTOP .mv .gallery li img {
        width: 100vw;
    }
    #OseTOP .mv .gallery .slick-dots {
        display: none !important;
    }
    #OseTOP .mv .choice-btn {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        width: 90%;
        max-width: 1200px;
        z-index: 2;
    }
    #OseTOP .mv .choice-btn li {
        width: 25%;
        min-height: 85px;
        font-size: 1.6rem;
        color: #fff;
        text-align: center;
        border-right: 2px solid #fff;
        line-height: 1.4;
        letter-spacing: 0;
        padding-bottom: 5px;
        position: relative;
        cursor: pointer;
    }
    #OseTOP .mv .choice-btn li span {
        position: absolute;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

@media screen and (min-width: 769px) and (max-width: 1110px) {
    #OseTOP .mv .choice-btn li {
        font-size: 1.2rem;
    }
}

@media screen and (min-width: 769px) and (max-width: 900px) {
    #OseTOP .mv .choice-btn li {
        font-size: 1rem;
    }
}

@media screen and (min-width: 769px) {
    #OseTOP .mv .choice-btn li:first-of-type {
        border-left: 2px solid #fff;
    }
    #OseTOP .mv .choice-btn li.slick-current {
        background: rgba(187, 4, 20, 0.5);
    }
    #OseTOP .mv .choice-btn li.slick-current::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: #fff;
        animation: border_anim 7s linear forwards;
    }
    @keyframes border_anim {
        0% {
            width: 0%;
        }
        100% {
            width: 100%;
        }
    }
    #OseTOP .sec01 {
        background: url(../img/ose2022/top/bg.jpg) no-repeat;
        background-size: cover;
        background-position: right top;
        padding: 50px 0 60px;
    }
    #OseTOP .sec01 .h2_h3 {
        margin-bottom: 60px;
        text-align: center;
    }
    #OseTOP .sec01 .h2_h3 h2 img {
        width: 500px;
    }
    #OseTOP .sec01 .h2_h3 h3 {
        color: #fff;
    }
    #OseTOP .sec01 ul {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
    }
    #OseTOP .sec01 ul li {
        width: 30%;
        margin-bottom: 0 !important;
    }
}

@media screen and (min-width: 769px) and (max-width: 950px) {
    #OseTOP .sec01 ul li .txt h3 {
        font-size: 1.3rem;
    }
    #OseTOP .sec01 ul li .txt p {
        font-size: 1.5rem;
    }
}

@media screen and (min-width: 769px) {
    #OseTOP .sec01 .view_more {
        text-align: center;
        margin-right: 0;
    }
    #OseTOP .sec01 .view_more a::after {
        background: #fff;
    }
    #OseTOP .event2022 {
        background: #f4f3f3;
        background: linear-gradient(90deg, #f4f3f3 0%, #f4f3f3 20%, #fff8ff 20%, #fbd5ea 80%, #fbd5ea 100%);
    }
    #OseTOP .event2022 h3 {
        color: #000;
    }
    #OseTOP .event2022 .calender2022 {
        box-shadow: 0 0 8px gray;
        border-radius: 20px 0 0 0;
    }
    #OseTOP .event2022 .calender2022 .em-calnav {
        color: #e50012;
    }
    #OseTOP .event2022 .calender2022 .em-calendar thead td {
        background: #e50012;
    }
    #OseTOP .event2022 .calender2022 .eventful {
        background: #e50012 !important;
    }
    #OseTOP .event2022 .slide_area .slick-list {
        box-shadow: 0 0 8px gray;
        border-radius: 0 0 20px 0;
        background: #fff;
    }
    #OseTOP .event2022 .slide_area .slick-slide {
        margin-bottom: 0 !important;
        box-shadow: none;
    }
    #OseTOP .event2022 .slide_area .slick-slide .img {
        /* padding-bottom: 53%; */
    }
    #OseTOP .event2022 .slide_area .slick-slide.pick_up::before {
        background: #e50012;
        padding: 8px 20px;
    }
    #OseTOP .event2022 .slide_area .slick-slide.pick_up .date2022 {
        color: #e50012;
    }
    #OseTOP .event2022 .slide_area .slick-next::before {
        background: url(../img/ose2022/top/slide_arw_r_red.png) no-repeat;
        background-size: contain;
        background-position: center;
    }
    #OseTOP .event2022 .slide_area .slick-dots li {
        margin: 10px 0 0;
    }
    #OseTOP .event2022 .slide_area .slick-dots .slick-active button::before {
        background: #e50012;
    }
}

@media screen and (min-width: 769px) and (max-width: 840px) {
    #OseTOP .event2022 .search_area .LFT,
    #OseTOP .event2022 .search_area .RGT {
        min-width: auto;
        width: 100%;
    }
}

@media screen and (min-width: 769px) {
    #OseTOP .event2022 .event__list ul {
        justify-content: space-between;
    }
    #OseTOP .event2022 .event__list li {
        width: 30%;
        margin-bottom: 0 !important;
        box-shadow: 0 0 8px gray;
        border-radius: 0 0 20px 0;
    }
    #OseTOP .event2022 .event__list li.new::before {
        background: #e50012;
        padding: 8px 20px;
    }
    #OseTOP .event2022 .event__list li .date2022 {
        color: #e50012;
    }
    #OseTOP .info {
        background: #f4f3f3;
    }
}

@media screen and (min-width: 769px) and (max-width: 1250px) {
    #OseTOP .info .info__df__lft h2,
    #OseTOP .info .info__df__lft h3 {
        margin-left: 2%;
    }
    #OseTOP .info .more {
        margin-right: 2%;
    }
}

@media screen and (min-width: 769px) and (max-width: 1120px) {
    #OseTOP .info .info__df__lft h2 img {
        max-width: 300px;
    }
}

@media screen and (min-width: 769px) {
    #OseTOP .about {
        background: white;
        background: -moz-linear-gradient(90deg, white 5%, #ffdfe1 100%);
        background: -webkit-linear-gradient(90deg, white 5%, #ffdfe1 100%);
        background: linear-gradient(90deg, white 5%, #ffdfe1 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffddef", GradientType=1);
        text-align: center;
        padding: 60px 0;
    }
    #OseTOP .about .view_more {
        text-align: center;
    }
}

@media screen and (max-width: 768px) {
    #OseTOP .mv {
        position: relative;
    }
    #OseTOP .mv::before {
        position: absolute;
        width: 100%;
        height: 100%;
        content: "";
        background: rgba(34, 34, 34, 0.5);
        display: block;
        z-index: 1;
        pointer-events: none;
    }
    #OseTOP .mv h1 {
        position: absolute;
        top: 5%;
        left: 5%;
        color: #fff;
        font-size: 3rem;
        font-weight: bold;
        z-index: 1;
    }
    #OseTOP .mv .gallery li img {
        width: 100vw;
    }
    #OseTOP .mv .slick-dotted.slick-slider {
        margin-bottom: 0 !important;
    }
    #OseTOP .mv .slick-dots {
        bottom: 5%;
        right: 5%;
        display: flex;
        flex-direction: column;
        width: 20px;
        z-index: 10;
    }
    #OseTOP .mv .slick-dots li {
        width: 20px;
        height: 20px;
        margin: 0 0 8px;
    }
    #OseTOP .mv .slick-dots li button {
        width: 20px;
        height: 20px;
    }
    #OseTOP .mv .slick-dots li button::before {
        width: 20px;
        height: 20px;
        content: "";
        background: #fff;
        border-radius: 50%;
        opacity: 1;
    }
    #OseTOP .mv .slick-dots li.slick-active button::before {
        background: #e50012;
    }
    #OseTOP .sec01 {
        background: url(../img/ose2022/top/bg.jpg) no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-position: right top;
        padding: 50px 0 80px;
    }
    #OseTOP .sec01 .h2_h3 {
        margin-bottom: 40px;
        text-align: center;
    }
    #OseTOP .sec01 .h2_h3 h2 img {
        width: 210px;
    }
    #OseTOP .sec01 .h2_h3 h3 {
        color: #fff;
    }
    #OseTOP .sec01 .slick-dots {
        position: absolute;
        left: 50%;
        bottom: -20px;
        transform: translate(-50%, 0);
        width: 105px;
        display: flex;
        padding: 0;
        list-style: none;
        text-align: center;
    }
    #OseTOP .sec01 .slick-dots li {
        width: 25px;
        height: 25px;
        margin-right: 5px;
    }
    #OseTOP .sec01 .slick-dots li button {
        width: 25px;
        height: 25px;
    }
    #OseTOP .sec01 .slick-dots li button::before {
        width: 25px;
        height: 25px;
        content: "";
        background: #fff;
        border-radius: 50%;
        opacity: 1;
    }
    #OseTOP .sec01 .slick-dots li.slick-active button::before {
        background: #e50012;
    }
    #OseTOP .sec01 .view_more {
        text-align: center;
    }
    #OseTOP .sec01 .view_more a::after {
        background: #fff;
    }
    #OseTOP .event2022 {
        background: #f4f3f3;
        background: linear-gradient(90deg, #f4f3f3 0%, #f4f3f3 20%, #fff8ff 20%, #fbd5ea 80%, #fbd5ea 100%);
        padding: 80px 0;
    }
    #OseTOP .event2022 h3 {
        color: #000;
    }
    #OseTOP .event2022 .calender2022 {
        box-shadow: 0 0 8px gray;
        border-radius: 20px 0 0 0;
    }
    #OseTOP .event2022 .calender2022 .em-calnav {
        color: #e50012;
    }
    #OseTOP .event2022 .calender2022 .em-calendar thead td {
        background: #e50012;
    }
    #OseTOP .event2022 .calender2022 .eventful {
        background: #e50012 !important;
    }
    #OseTOP .event2022 .slide_area .slick-list {
        box-shadow: 0 0 8px gray;
        border-radius: 0 0 20px 0;
    }
    #OseTOP .event2022 .slide_area .slick-slide {
        margin-bottom: 0 !important;
    }
    #OseTOP .event2022 .slide_area .slick-slide .img {
        padding-bottom: 53%;
    }
    #OseTOP .event2022 .slide_area .slick-slide.pick_up::before {
        background: #e50012;
        padding: 8px 20px;
    }
    #OseTOP .event2022 .slide_area .slick-slide.pick_up .date2022 {
        color: #e50012;
    }
    #OseTOP .event2022 .slide_area .slick-next {
        bottom: -45px;
    }
    #OseTOP .event2022 .slide_area .slick-next::before {
        background: url(../img/ose2022/top/slide_arw_r_red.png) no-repeat;
        background-size: contain;
        background-position: center;
    }
    #OseTOP .event2022 .slide_area .slick-dots {
        bottom: -35px;
    }
    #OseTOP .event2022 .slide_area .slick-dots .slick-active button::before {
        background: #e50012;
    }
    #OseTOP .event2022 .event__list {
        margin-top: 100px;
    }
    #OseTOP .event2022 .event__list li {
        box-shadow: 0 0 8px gray;
        border-radius: 0 0 20px 0;
    }
    #OseTOP .event2022 .event__list li.new::before {
        background: #e50012;
        padding: 8px 20px;
    }
    #OseTOP .event2022 .event__list li .date2022 {
        color: #e50012;
    }
    #OseTOP .info {
        background: #f4f3f3;
    }
}

@media screen and (max-width: 768px) and (max-width: 1250px) {
    #OseTOP .info .info__df__lft h2,
    #OseTOP .info .info__df__lft h3 {
        margin-left: 2%;
    }
    #OseTOP .info .more {
        margin-right: 2%;
    }
}

@media screen and (max-width: 768px) and (max-width: 1120px) {
    #OseTOP .info .info__df__lft h2 img {
        max-width: 300px;
    }
}

@media screen and (max-width: 768px) {
    #OseTOP .about {
        background: white;
        background: -moz-linear-gradient(90deg, white 5%, #ffdfe1 100%);
        background: -webkit-linear-gradient(90deg, white 5%, #ffdfe1 100%);
        background: linear-gradient(90deg, white 5%, #ffdfe1 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffddef", GradientType=1);
        text-align: center;
    }
    #OseTOP .about .view_more {
        text-align: center;
    }
    #OseTOP .about h2 img {
        width: 200px;
    }
}