@charset "UTF-8";

/**
 * オリジナルcss
 */

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;900&display=swap');


.cdp-copy-alert-success{
    display: none !important;
}

.main_visual_area{
    height: calc(100vh - 100px);
    position: relative;
}

.main_visual_image{
    width: 100%;
    height: 100%;
}

.main_visual_image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main_visual_text{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main_visual_text:before{
    content: '';
    background-color: rgba(0,0,0,0.2);
    position: absolute;
    width: 100%;
    height: 100%;
}

.main_visual_text .catch_copy{
    display: inline-block;
    text-align: center;
    font-family: "M PLUS Rounded 1c", serif;
    font-weight: 900;
    font-size: 40px;
    position: relative;
    color: #FFF;
    text-shadow: rgb(255, 62, 96) 2px 2px 10px;
    margin-top: 25%;
}

.main_visual_text .catch_copy::before,
.main_visual_text .catch_copy::after{
    content: '';
    display: inline-block;
    width: 1px;
    height: 1.3em;
    margin-bottom: -0.2em;
    border-right: 5px dotted #FFF;
}

.main_visual_text .catch_copy::before{
    transform: rotate(-15deg);
    margin-right: 20px;
}

.main_visual_text .catch_copy::after{
    transform: rotate(15deg);
    margin-left: 20px;
}

.flexslider .slides img{
    height: 100%;
}

.top_content{
    max-width: 1110px;
    margin: 150px auto;
}

.top_content_fullwidth{
    width: 100%;
}

.fullwidth_inner{
    max-width: 1110px;
    margin: 0 auto;
}

.metaslider{
    height: 100%;
}

.metaslider img{
    height: 100% !important;
}

body .metaslider .coin-slider, body .metaslider .nivoSlider, body .metaslider .nivoSlider img, body .metaslider .rslides, body .metaslider .rslides li, body .metaslider .flexslider ul.slides, body .metaslider .flexslider .slides li, body .metaslider .flexslider .slides ul, body .metaslider .flexslider .slides ol, body .metaslider .flexslider .slides img, body .metaslider .flexslider .flex-direction-nav, body .metaslider .flexslider .flex-direction-nav li{
    height: 100%;
}

.metaslider.nav-hidden .flexslider{
    height: 100%;
}

#metaslider_container_90{
    height: 100%;
}


.pink_line{
    border-bottom: 4px solid #FF3E60;
}

.bold{
    font-weight: bold;
}

.center{
    text-align: center;
}

.top_content h2{
    color: #365B73;
    font-family: "M PLUS Rounded 1c", serif;
    font-weight: 900;
}

.top_content h3{
    text-align: center;
    color: #349EB5;
}


.test-content_list ul{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1%;
}

.test-content_list ul li{
    border-radius: 20px;
    background: #FFBFD1;
}

.test-content_list ul .image_area{
    position: relative;
    width: 100%;
    padding-top: 75%;
    box-sizing: border-box;
    background: #FFF;
    border-radius: 10px;
}

.test-content_list ul .image_area .image_wrap img{
    object-fit: contain;
}



/* お知らせ */

.top_content.news .news_post_list ul{
    -webkit-flex-direction: column;
    flex-direction: column;
    margin: 0;
}

.top_content.news .news_post_list ul li{
    padding: 20px 0;
    border-bottom: 1px solid #aaa;
}

.top_content.news .news_post_list ul li:last-child{
    border: none;
}

.top_content.news .news_post_list .news_post{
    display: -webkit-flex;
    display: flex;
}

.top_content.news .news_post_list .news_post h3,
.top_content.news .news_post_list .news_post p{
    margin: 0;
}

.top_content.news .news_post_list .news_post .date{
    width: 10%;
    line-height: 40px;
}

.top_content.news .news_post_list .news_post h3{
    width: 40%;
    text-align: left;
    color: #000;
    padding-right: 20px;
}

.top_content.news .news_post_list .news_post p{
    width: 50%;
}



/* 富士ジャグリングクラブとは？ */
.top_content.about .summary{
    padding: 50px;
    max-width: 800px;
    margin: 50px auto;
    border: 10px double #15C1E0;
    border-radius: 30px;
}

.top_content.about .summary ul{
    display: block;
}

.top_content.about .summary ul li{
    border-bottom: 1px solid #15C1E0;
    padding: 20px 0;
    display: -webkit-flex;
    display: flex;
}

.top_content.about .summary ul li span{
    width: 150px;
    flex-shrink: 0;
    font-weight: bold;
}

.top_content.about .summary ul li p{
    margin: 0;
}

.top_content.about .summary ul li:last-child{
    border: none;
}


.top_content.about .about_main{
    display: -webkit-flex;
    display: flex;
}

.top_content.about .about_main > div{
    width: 50%;
    flex-shrink: 0;
}

.top_content.about .about_main .text_area{
    padding-right: 20px;
    box-sizing: border-box;
}

.top_content.about .about_main .photo_area{
    position: relative;
    padding-top: 33%;
}

.top_content.about .calender{
    max-width: 800px;
    margin: 80px auto;
}

.top_content.about .calender span.fc-title{
    font-size: 12px;
}

.top_content.about .calender .fc-unthemed th.fc-sun{
    background: #FF3E60;
    color: #FFF;
}

.top_content.about .calender .fc-unthemed th.fc-sat{
    background: #349EB5;
    color: #FFF;
}

.top_content.about .calender .fc-row .fc-content-skeleton td, .top_content.about .calender .fc-row .fc-helper-skeleton td{
    border-color: #ddd;
}



/* 特徴 */
.top_content.feature .feature_area{
    display: -webkit-flex;
    display: flex;
}

.top_content.feature .feature_area > div{
    flex-shrink: 0;
    width: 50%;
}

.top_content.feature .feature_area .image_area{
    position: relative;
    padding-top: 33%;
}

.top_content.feature .feature_area .text_area{
    padding: 20px;
}

.top_content.feature .feature_area .text_area h3{
    text-align: left;
    margin-bottom: 0;
}

.top_content.feature .feature_area .text_area p{
    margin:  0;
}


/* よくあるご質問 */
.top_content.faq ul{
    display: block;
    max-width: 900px;
    margin: 0 auto;
}

.top_content.faq ul li{
    width: 100%;
    margin-bottom: 40px;
    padding-left: 5px;
    box-sizing: border-box;
}

.top_content.faq ul li h3{
    text-align: left;
    margin: 0;
}

.top_content.faq ul li p{
    margin: 0;
}

.top_content.faq ul li .q_cont, .top_content.faq ul li .a_cont{
    display: flex;
    align-items: flex-start;
}

.top_content.faq ul li .q_cont{
    margin-bottom: 5px;
    align-items: center;
}

.top_content.faq ul li .deco{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    color: #FFF;
    margin-right: 30px;
    border-radius: 10px;
    font-family: "M PLUS Rounded 1c", serif;
    font-weight: 900;
    font-size: 25px;
    position: relative;
}

.top_content.faq ul li .q_cont .deco{
    background-color: #1e8cbe;
}

.top_content.faq ul li .q_cont .deco::before{
    content: '';
    position: absolute;
    width: 12px;
    height: 10px;
    top: 25%;
    right: -10px;
    clip-path: ellipse(12px 10px at 0% 0%);
    background-color: #1e8cbe;
}

.top_content.faq ul li .a_cont .deco{
    background-color: #FF3E60;
    margin-top: 10px;
}

.top_content.faq ul li .a_cont .deco::before{
    content: '';
    position: absolute;
    width: 12px;
    height: 10px;
    top: 25%;
    left: -10px;
    clip-path: ellipse(12px 10px at 100% 0%);
    background-color: #FF3E60;
}


/* あゆみ */
.top_content.history .history_list{
    max-width: 800px;
    margin: 0 auto;
}

.top_content.history .history_list ul{
    display: block;
    border-top: 3px solid #15C1E0;
}

.top_content.history .history_list ul li{
    border-bottom: 1px solid #15C1E0;
    padding: 20px 0;
    display: -webkit-flex;
    display: flex;
}

.top_content.history .history_list .year{
    width: 150px;
    flex-shrink: 0;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 40px;
    color: #349EB5;
}

.top_content.history .history_list .year span{
    display: block;
    font-size: 0.7em;
    font-weight: normal;
    line-height: 1.4;
    color: #888;
}

.top_content.history .history_list ul li p{
    margin: 0;
}

.top_content.history .history_list ul li.now .year{
    color: #FF3E60;
}


@media screen and (max-width:740px){
    .top_content.history .history_list ul li{
        padding: 15px 0;
    }

    .top_content.history .history_list .year{
        width: 100px;
        font-size: 1em;
        line-height: 30px;
    }
}

@media screen and (max-width:500px){
    .top_content.history .history_list ul li{
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    .top_content.history .history_list .year{
        width: 100%;
    }

    .top_content.history .history_list .year span{
        display: inline;
        margin-left: 0.5em;
        line-height: 30px;
    }
}



/* アクセス */
.top_content.access .access_detail_wrap{
    max-width: 750px;
    margin: 0 auto 50px;
    display: flex;
}

.top_content.access .text_area{
    width: 50%;
    padding-right: 2%;
    box-sizing: border-box;
}

.top_content.access .text_area h3{
    text-align: left;
    margin-top: 0;
}

.top_content.access .googlemap{
    width: 50%;
}

.top_content.access .googlemap iframe{
    width: 100%;
    aspect-ratio: 4/3;
}

@media screen and (max-width: 1110px){
    #header .header_button{
        display: none;
    }

    .top_content{
        margin: 100px auto;
    }

    .top_content.news .news_post_list .news_post{
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .top_content.news .news_post_list .news_post .date{
        width: 100%;
        flex-shrink: 0;
        font-size: 0.9em;
    }

    .top_content.news .news_post_list .news_post .date{
        line-height: 100%;
        margin-bottom: 5px;
    }

    .top_content.news .news_post_list .news_post h3,
    .top_content.news .news_post_list .news_post p{
        line-height: 140%;
    }
}
@media screen and (max-width:740px){
    .top_content{
        margin: 50px auto 100px;
    }

    .main_visual_area{
        height: 0;
        padding-top: 66%;
    }

    .main_visual_image{
        position: absolute;
        top: 0;
        left: 0;
    }

    .main_visual_text .catch_copy{
        font-size: 22px;
    }

    .top_content.news .news_post_list ul li{
        padding: 10px 0;
    }

    .top_content.news .news_post_list .news_post .date{
        margin: 0;
        line-height: 140%;
        width: 100px;
        font-size: 0.8em;
    }

    .top_content.news .news_post_list .news_post h3{
        font-size: 14px;
        width: calc(100% - 100px);
        box-sizing: border-box;
    }

    .top_content.news .news_post_list .news_post p{
        display: none;
    }

    .top_content.about .about_main{
        -webkit-flex-direction: column;
        flex-direction: column;
        max-width: 500px;
        margin: 0 auto;
    }

    .top_content.about .about_main .text_area{
        padding-right: 0;
    }

    .top_content.about .about_main > div{
        width: 100%;
    }

    .top_content.about .about_main .photo_area{
        padding-top: 66%;
    }

    .top_content.about .summary{
        padding: 30px 15px;
    }

    .top_content.about .summary ul li span{
        width: 100px;
        font-size: 0.9em;
    }

    .top_content.feature .feature_area{
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;
        max-width: 500px;
        margin: 0 auto;
    }

    .top_content.feature .feature_area > div{
        width: 100%;
    }

    .top_content.feature .feature_area .image_area{
        padding-top: 66%;
    }

    .top_content.feature .feature_area .text_area{
        box-sizing: border-box;
        padding: 0 0 20px 0;
        margin-top: -20px;
    }

}
@media screen and (max-width:639px){
}
@media screen and (max-width:500px){
    .main_visual_text .catch_copy{
        width: 95%;
        font-size: 16px;
    }

    .main_visual_text .catch_copy::before,
    .main_visual_text .catch_copy::after{
        border-right: 2px dotted #FFF;
    }
    .main_visual_text .catch_copy::before{
        margin-right: 5px;
    }
    .main_visual_text .catch_copy::after{
        margin-left: 5px;
    }

    .top_content.about .summary ul li span{
        width: 25%;
    }

    .top_content.access .access_detail_wrap{
        flex-direction: column;
    }

    .top_content.access .text_area,
    .top_content.access .googlemap{
        width: 100%;
    }
}

