/************************************/
/* 蝓ｺ譛ｬ險ｭ螳�                          */
/************************************/
/*
縲燭SS鬆�分縲�
繝ｻ繝�ぅ繧ｹ繝励Ξ繧､
繝ｻ繝昴ず繧ｷ繝ｧ繝ｳ
繝ｻ菴咲ｽｮ
繝ｻ繧ｵ繧､繧ｺ
繝ｻ繝槭�繧ｸ繝ｳ遲�
繝ｻ縺昴�莉�
*/

/*
z-index
header:3000逡ｪ蜿ｰ
footer:2000逡ｪ蜿ｰ
main:1000逡ｪ蜿ｰ
*/

/*
縲舌Γ繝｢縲�
蜻ｽ蜷崎ｦ丞援

*/

/************************************/
/* 繝悶Ο繧ｰ繝医ャ繝�                       */
/************************************/

/*---top_slide_area---*/

.blog-top_slider {
    width: 100% !important;
    /* display: flex; */
    overflow: hidden;
    padding: 1% 0;
}

.blog-top_slider .slider__inner_b {
    display: flex;
    padding: 0;
}

.blog-top_slider .slider__item_b {
    width: 300px;
    margin: 0 6px;
    background-color: #fff;
    box-sizing: border-box;
    position: relative;
}


.blog-top_slider .slider__item_b figure {
    margin: 0;
}

.blog-top_slider .slider__item_b img {
    width: 100%;
    position: relative;
}

.blog-top_slider .slider__item_b h3 {
    display: block;
    width: 100%;
    margin: 0;
    text-align: left;
    color: #252525;
    background-color: #fff;
    padding: 10px;
    font-size: 1.2rem;
    font-weight: 600;
    box-sizing: border-box;
}

.blog-top_slider .slider__item_b h3 .blog_index_date {
    font-size: 1rem;
    margin: 0;
    display: block;
}

.blog-top_slider:hover .animation {
    animation-play-state: paused;
}

.blog-top_slider.animation {
    animation: blog-top-loop-slide 50s linear infinite;
}

@keyframes blog-top-loop-slide {
    0% {
        transform: translateX(calc(100% / 3));
    }

    to {
        transform: translateX(calc(-100% / 3 * 2));
    }
}


.reverse {
    width: 100% !important;
    overflow: hidden;
    padding: 1% 0;
}

.reverse .reverse__inner_c {
    display: flex;
    padding: 0;
}

.reverse .reverse__item_b {
    width: 300px;
    margin: 0 6px;
    background-color: #fff;
    box-sizing: border-box;
}

.reverse .reverse__item_b figure {
    margin: 0;
    position: relative;
}

.reverse .reverse__item_b figure .overlay {
    position: absolute;
    top: 0;
}

.reverse .reverse__item_b img {
    width: 100%;
    position: relative;
}

.reverse .reverse__item_b h3 {
    display: block;
    width: 100%;
    margin: 0;
    text-align: left;
    color: #252525;
    background-color: #fff;
    padding: 10px;
    font-size: 1.2rem;
    font-weight: 600;
    box-sizing: border-box;
    word-wrap: break-word;
}

.reverse .reverse__item_b h3 .blog_index_date {
    font-size: 1rem;
    margin: 0;
    display: block;
}

.reverse_slider {
    display: flex;
}

.reverse:hover .animation {
    animation-play-state: paused;
}

.reverse_slider.animation {
    animation: reverse-loop-slide 50s linear infinite;
}

@keyframes reverse-loop-slide {
    0% {
        transform: translateX(calc(-100% / 3));
    }

    to {
        transform: translateX(calc(-100% / 3 * 2));
    }
}


.operation_blog_area {
    width: 1000px;
    margin: 100px auto;
}

.operation_blog_area h3 {
    font-size: 2rem;
    border-left: 8px solid #c00000;
    padding-left: 20px;
    margin-bottom: 20px;
}

.o-b_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.o-b_item {
    width: 300px;
    margin: 1%;
    background-color: #f2f2f2;
    padding: 6px;
    box-sizing: border-box;
    position: relative;
}

.o-b_item figure {
    width: 100%;
    margin: 0;
    position: relative;
}

.o-b_item figure img {
    width: 100%;
    margin: 0;
    position: relative;
}

.overlay {
    width: 100%;
    position: absolute;
    top: 0;
}

.counter_wrap {
    width: 100%;
    display: flex;
    padding: 0px 10px 6px;

}

.counter_wrap .good_counter {
    display: flex;
    color: #000;
    margin: 0;
    align-items: center;
}

.counter_wrap .good_counter a {
    color: #000;

}

.counter_wrap .good_counter img {
    width: 14px;
    display: flex;
    color: #000;
    margin: 0 4px;
}

.counter_wrap .closed {
    margin: 0;
    padding: 6px 20px;
    border: 1px solid #c00000;
    border-radius: 2px;
    color: #c00000;
    font-weight: 600;
    text-align: center;
    margin-left: auto;
}

.counter_wrap .open {
    margin: 0;
    padding: 6px 20px;
    border: 1px solid #000;
    border-radius: 2px;
    color: #000;
    font-weight: 600;
    text-align: center;
    margin-left: auto;
}

.o-b_item h3 {
    display: block;
    width: 100%;
    margin: 0;
    text-align: left;
    color: #252525;
    border-left: none;
    padding: 20px 10px;
    font-size: 1.2rem;
    font-weight: 600;

    box-sizing: border-box;
    word-wrap: break-word;
}

.movie_tit_item {
    border-left: 4px solid #c00000;
    border-right: 4px solid #c00000;
    width: 100%;
    min-height: 96px;

    background-color: #fff;
}

.o-b_item h3 .blog_index_date {
    font-size: 1rem;
    margin: 0;
    display: block;
}

.blog_mv {
    width: 1000px;
    margin: 0 auto;
    padding: 60px 0 0;
}

.blog_mv img {
    width: 100%;
    margin: 0 auto;
}

.blog_page_area {
    width: 1000px;
    margin: 0 auto;
    padding: 60px 0 100px;
}

.blog_page_area h3 {
    font-size: 2rem;
    border-left: 8px solid #c00000;
    padding-left: 20px;
    margin-bottom: 20px;
    word-wrap: break-word;
}

.blog_date {
    font-size: 1.2rem;
    margin: 0;
    padding-bottom: 20px;
    border-bottom: 1px solid #f2f2f2;
}

.blog_date span {
    margin-left: 20px;
}

.blog_date span a img {
    vertical-align: bottom;
    width: 20px;
    margin: 0 10px;
}

.blog_page_area p {
    font-size: 1.4rem;
    line-height: 2.6rem;
}


@media screen and (max-width : 1100px) {

    .operation_blog_area {
        width: 90%;
        margin: 100px auto;
    }

    .o-b_wrap {
        display: flex;
        flex-wrap: wrap
    }

    .o-b_item {
        width: 46%;
        margin: 2%;
        background-color: #f2f2f2;
        padding: 6px;
        box-sizing: border-box;
    }

    .blog_mv {
        width: 90%;
        margin: 0 auto;
        padding: 60px 0 0;
    }


    .blog_page_area {
        width: 90%;
        margin: 0 auto;
        padding: 60px 0 60px;
    }




}



@media screen and (max-width : 767px) {


    .operation_blog_area {
        width: 96%;
        margin: 60px auto;
    }

    .o-b_wrap {
        display: flex;
        flex-wrap: wrap
    }

    /*
.o-b_item{
	width: 48%;
	margin: 1%;
	background-color: #f2f2f2;
	padding: 6px;
	box-sizing: border-box;
}*/
    .o-b_item {
        width: 100%;
        margin: 4%;
        background-color: #f2f2f2;
        padding: 6px;
        box-sizing: border-box;
    }


    .blog_mv {
        width: 96%;
        margin: 0 auto;
        padding: 60px 0 0;
    }


    .blog_page_area {
        width: 96%;
        margin: 0 auto;
        padding: 60px 0 60px;
    }

    .o-b_item .counter_wrap {
        width: 100%;
        display: block;
        padding: 0px 10px 6px;
    }

    .o-b_item .counter_wrap .good_counter {
        width: 100%;
        display: flex;
        color: #000;
        margin: 0 0 6px;
        align-items: center;
    }

    .o-b_item h3 {
        padding: 10px 10px;
    }
}


.modal {
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

.modal__bg {
    background: rgba(0, 0, 0, 0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}

.modal__content {
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
}

.modal__content h3 {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.modal__content h4 {
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 15px;
}

.modal__content p {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.modal__content .btn_a,
.modal__content .btn_b {
    margin: 10px auto;
    width: 200px;
    padding: 10px 20px;
    font-size: 1.2rem;
}

.modal__content input {
    margin: 10px auto;
    width: 200px;
    padding: 10px 20px;
    font-size: 1.2rem;
    border-radius: 8px !important;
    border: 4px solid #c00000 !important;
}

@media screen and (max-width : 1100px) {

    .modal__content {
        width: 90%;
    }

}

/*--------4/16 霑ｽ險倥ヶ繝ｭ繧ｰ陦ｨ遉ｺ逶ｴ縺�---------*/

.blog_page_area .ql-editor {
    height: 100%;
}

.blog_page_area .ql-editor img {
    width: 100%;
}

.operation_blog_area .btn_a {
    margin-top: 20px;
    margin-left: auto;
    width: 200px;
    padding: 10px 20px;
    font-size: 1.4rem;
}

@media screen and (max-width : 767px) {

    .operation_blog_area .btn_a {
        margin-left: 0;
        margin: 20px auto 0;
        width: 200px;
    }

}