@media (min-width:980px) and ( max-width:1600px) {
    .tab {
        font-size: 22px;
    }

    .tab span{
        font-size: 34px;
    }
    
    .tab-button .is-active{
        font-size: 28px;
    }
    
    .tab-button .is-active span{
        font-size: 46px;
    }
}

@media (min-width:768px) and ( max-width:980px) {
    .tab {
        font-size: 18px;
        padding: 20px;
    }

    .tab span{
        font-size: 22px;
    }
    
    .tab-button .is-active{
        font-size: 22px;
    }
    
    .tab-button .is-active span{
        font-size: 34px;
    }
}

@media (min-width:768px) and ( max-width:1325px) {
    .tab br{
        display: block;
    }
}

@media (max-width: 1400px) {
    .container.caption .side_align{
        display: block;
    }
    
    .container.caption .img_container{
        width: 100%;
        min-width: 100%;
        margin-bottom: -140px;
    }
    
    .container.caption .img_container .img{
        max-width: 250px;
        margin-left: auto;
    }
    
    .container.caption .img_container .img img{
        position: static;
        transform: none;
        -webkit-transform: none;
        -ms-transform: none;
    }
    
    .container.caption{
        margin-bottom: 59px;
    }
}

@media (max-width: 1000px) {
    .message .container .img.pc{
        display: none;
    }
    
    .message .container .img.sp{
        display: block;
    }
}

@media (max-width: 768px) {
    
    /* 共通 */
    
    *{
        font-size: 15px;
        letter-spacing: 0;
    }
    
    .sp_none{
        display: none;
    }
    
    .pc_none{
        display: block;
    }
    
    section,
    .message{
        padding: 40px 0;
    }
    
    .container{
        width: 90%;
    }
    
    h2, h2 span{
        font-size: 4.3vw;
        letter-spacing: 0.15em;
    }
    
    h3{
        font-size: 9vw;
        line-height: 1.5em;
        letter-spacing: 0.15em;
        text-align: left;
        margin-right: -1em;
    }
    
    h4{
        font-size: 22px;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    /* header */
    
    header{
        padding: 10px 5%;
    }
    
    header h1 a img{
        max-width: 200px;
        max-height: 30px;
    }

    
    /* main */
    
    .main{
        min-height: 80vw;
        background-image: url(../images/main_bg_pattern.png), url(../images/main_bg_pattern.png), url(../images/main_bg_town01.png), url(../images/main_bg_town02.png), url(../images/main_bg_sky.png), url(../images/main_bg_grass.png);
        background-size: 37vw, 37vw, 50vw, 50vw, contain, auto 5%;
        background-position: top -10% left -20%, top -10% right -20%, bottom 5vw left 50vw, bottom 5vw right 50vw, top center, bottom center;
        padding-bottom: 8vw;
    }
    
    .main .container{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .main h2{
        top: 44%;
    }
    
    .main_text .img{
        width: 100%;
    }
    
    
    /* think */
    
    .think {
        padding: 50px 0 0;
    }
    
    .think p{
        font-size: 17px;
        line-height: 1.7
    }
    
    .think h4{
        font-size: 26px;
    }
    
    .think h4::before,
    .think h4::after{
        width: 40px;
        height: 28px;
    }
    
    .think h4::before{
        margin-right: 20px;
    }
    
    .think h4::after{
        margin-left: 20px;
    }
    
    
    /* message */
    
    .message{
        margin-bottom: 0;
    }
    
    .message .container{
        padding: 30px 30px 50px 30px;
        border-radius: 30px;
    }
    
    .message .container .img{
        margin-bottom: -90px;
        margin-left: -30px;
        padding-top: 20px;
        width: calc(100% + 60px);
    }
    
    .message .container .img img{
        position: static;
    }
    
    
    /* tab contents */
    
    .container.caption{
        padding: 30px;
        border-radius: 30px;
    }
    
    .content .container.caption h5{
        font-size: 15px;
        margin-bottom: 10px;
    }
    
    .tab-button{
        margin: 0 30px;
        align-items: stretch;
    }
    
    .tab{
        font-size: 13px;
        padding: 10px;
        border-radius: 10px;
        margin-bottom: 8px;
    }
    
    .tab:not(:last-of-type){
        margin-right: 8px;
    }
    
    .tab-button .tab::after{
        width: 40px;
        bottom: -6px;
    }
    
    .tab span{
        font-size: 18px;
    }
    
    .tab-button .is-active span{
        font-size: 22px;
    }
    
    .tab-button .is-active{
        font-size: 14px;
        border-radius: 10px 10px 0 0;
    }
    
    .container.caption h4{
        word-break: break-all;
    }
    
    .container.caption h4::before {
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }
    
    .content .container.caption a{
        font-size: 15px;
        margin: 20px 0 0;
    }
    
    .content .container.caption a::before{
        width: 22px;
        height: 22px;
        margin-right: 10px;
    }
    
    .container.caption .img_container .img{
        margin-top: 20px;
    }
    
    .movie .modal_open + p{
        font-size: 14px;
    }
    
    .modal .container{
        width: 90%;
        padding: 20px 8px 20px 20px;
        border-radius: 20px;
    }
    
    .modal .scroll{
        height: auto;
        max-height: calc(90vh - 100px);
        padding-right: 8px;
        overflow-y: scroll;
    }
    
    .modal .chapter a{
        font-size: 14px;
    }
    
    .video-js{
        margin-bottom: 0;
    }
    
    
    /* profile */
    
    .profile h5{
        font-size: 22px;
    }
    
    .profile_text{
        display: block;
    }
    
    .profile_text .img01{
        width: 100%;
        padding-right: 0;
        margin: 0 auto;
    }
    
    .profile_text .text{
        width: 100%;
    }
    
    .profile_text .img01 h6{
        padding-bottom: 20px;
    }
    
    .profile_text .text p{
        font-size: 14px;
    }
    
    .profile_text .text p:not(:last-of-type){
        padding-bottom: 10px;
    }
    
    .attention li{
        font-size: 13px;
    }
    
    
    /* footer */
    
    footer{
        padding: 30px 5%;
        flex-direction: column;
        align-items: center;
    }
    
    address{
        font-size: 12px;
        line-height: 2em;
    }
    
    footer .img{
        min-width: none;
    }
}