@charset "UTF-8";

@media only screen and (max-width:1200px){
    .container .row .top-content-r h2{
        margin-top:0px;
    }

    .img-first a img{
        margin-top:5px;
    }

    .banner .img-bottom .img-left{
        margin-top:20px;
    }
    
    
    .banner .img-bottom .img-right{
        margin-top:20px;
    }

    .whitebox {

        padding-top:25px;
        padding-bottom:0px;
    }

}


@media only screen and (max-width:991px){
    /*tablet用のcssを記述*/
    .pc{
        display: none !important;
    }
    
    .sp { 
        display: block !important;
    }
/*ハンバーガーメニュー----------------------------------------------*/
    #nav-drawer {
        position: relative;
    }
      
      /*チェックボックス等は非表示に*/
      .nav-unshown {
        display:none;
      }
      
      /*アイコンのスペース*/
      #nav-open{
        display: inline-block;
        width: 30px;
        height: 22px;
        vertical-align: middle;
        margin-top:30px;
        margin-left:10px;
        z-index: 999;
      }
      
      #nav-open span{
        width: 35px;
        height:35px;
        border-radius: 30px;
        background: red;
      }

      /*ハンバーガーアイコンをCSSだけで表現*/
      #nav-open span, #nav-open span:before, #nav-open span:after {
        position: absolute;
        height: 3px;/*線の太さ*/
        width: 25px;/*長さ*/
        border-radius: 5px;
        background: #555;
        display: block;
        content: '';
        cursor: pointer;
     
      }



      #nav-open span:before {
        bottom: -8px;
      }
      #nav-open span:after {
        bottom: -16px;
      }
      
      /*閉じる用の薄黒カバー*/
      #nav-close {
        display: none;/*はじめは隠しておく*/
        position: fixed;
        z-index: 99;
        top: 0;/*全体に広がるように*/
        left: 0;
        width: 100%;
        height: 100%;
        background: black;
        opacity: 0;
        transition: .3s ease-in-out;
      }
      
      /*中身*/
      #nav-content {
        overflow: auto;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;/*最前面に*/
        width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
        max-width: 330px;/*最大幅（調整してください）*/
        height: 100%;
        background: #fff;/*背景色*/
        transition: .3s ease-in-out;/*滑らかに表示*/
        -webkit-transform: translateX(-105%);
        transform: translateX(-105%);/*左に隠しておく*/
      }
      
      /*チェックが入ったらもろもろ表示*/
      #nav-input:checked ~ #nav-close {
        display: block;/*カバーを表示*/
        opacity: .5;
      }
      
      #nav-input:checked ~ #nav-content {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);/*中身を表示（右へスライド）*/
        box-shadow: 6px 0 25px rgba(0,0,0,.15);
      }

    /*ハンバーガーメニューここまで----------------------------------------------*/
    .header-sp-nav ul li{
        list-style-type: none;       
    }

    .header-sp-nav .sp-nav{
        background-color:#F0F0F0;
        width:100%;
        padding-left:0px;
    }

    .header-sp-nav .sp-nav li{
        border-bottom:2px solid white;
    }

    .header-sp-nav .sp-nav li a{
        color:#DD1D44;
        letter-spacing: 0.03em;
        font-size:14px;
        font-weight:bold;
        display:block;
        padding:15px 0px 15px 20px;
    }

    .header-sp-nav .sp-nav p{
        color:#4B4B4B;
        letter-spacing: 0.02em;
        margin-left:10px;
    }

    .header-sp-nav .sp-nav li:last-child{
        background-color:white;
        border-bottom:2px solid #F0F0F0;
    }

    .header-sp-nav .sp-nav li a p{
        display:inline;
    }

    .header-sp-nav .sp-nav .gray a img{
        float:right;
        margin-right:15px;
        margin-top:2px;
    }

    .header-sp-nav .sns{
        padding-left:15px;
    }

    .header-sp-nav .sns li{
        display:inline;
    }

    .header-sp-nav .sns li:last-child{
        padding-left:5px;
    }




    header .container .row .logo{
        margin:0 auto;
    }

    header .container .row{
        margin:0px;
    }

    header .container .row .logo h1 a img{
        margin:0px auto;
        margin-top:50px;
        width:50%;
    }
    header .container .row .header-right, header .global-nav{
        display: none !important;
    }

    .container .top-wrapper .top-content-l{
        width:100%;
        margin-top:50px;
        padding:0;
        margin-bottom:0px;
    }

    .container .top-wrapper .top-content-r{
        margin-top:40px;
        margin-bottom:10px;
    }

    .container .top-wrapper .top-content-r h2 {
        text-align:center;
    }

    .container .top-wrapper .top-content-r .banner .img-first a{
        display:block;
        margin-bottom:20px;
    }

    .container .top-wrapper .top-content-r{
        margin-top:40px;
        margin-bottom:10px;
    }
    
    .mid-wrapper{
        padding-top:50px;

    }

    .whitebox{
        padding:30px 50px;
    }

    .footer-left ul{
        text-align:center;
    }

    .footer-right .contact{
        text-align:center;
    }

    .footer-right{
        margin-top:10px;
    }

    header .container .row .logo h1 a img{
        margin-top:20px;
    }

    .header-sp-nav .sp-nav li a .sp-img{
        float:right;
        margin-top:5px;
        margin-right:15px;
    }

    .sp{
        margin-left:0px;
    }

    .top-border {
        width:100%;
        border-top:10px solid #DD1D44;
        margin-top:20px;
    }

/*施設紹介ページcss*/
    .main-image{
        margin:0 auto;
        margin-bottom:50px;
        height:100%;
        width:90%;
    }

    .under-page .main-content .faci-box{
        padding:10px;
        margin-left:0px;
        margin-bottom:0px;
    }

    .under-page h2{
        color:#DD1D44;
        font-size:32px;
        margin:40px 0px;
        text-align:center;
    }

/*学園理念ページcss*/
.under-page .philo-pict{
    width:100%;
    float:none;
    margin:0 auto;
    margin-top:20px;
}

.under-page h2 {
    margin-top:40px;
    margin-bottom:30px;
}

/*事業所概要ページcss*/

.table tr td span{
    display:block;
}

.table tr td{
    font-size:14px;
}

.t-first{
    width:25%;
}

}

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

      /*中身*/
      #nav-content {
        -webkit-transform: translateX(-105%);
        transform: translateX(-105%);/*左に隠しておく*/
      }

      #nav-input:checked ~ #nav-content {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);/*中身を表示（右へスライド）*/
        box-shadow: 6px 0 25px rgba(0,0,0,.15);
      }

      .header-sp-nav .sns{
        padding-left:0px;
        text-align:left;
        margin-left:15px;
    }

    .header-sp-nav .sns li:last-child{
        padding:0px;
        margin-left:0px;
    }

    .header-sp-nav .sp-nav .gray a img{
        margin-top:5px;
    }

    #nav-content{
        width:70%;
    }

    /*スマホ用のcssを記述*/
    .container .row .top-content-r p{
        font-size:14px;
        letter-spacing: 0.03em;
    }

    .container .top-wrapper .top-content-r h2 img{
        width:80%;
    
    }
    header .container .row .logo h1 a img{
        margin:0px auto;
        margin-top:10px;
        width:80%;
    }

    .container .top-wrapper .top-content-r .banner .img-first a{
        margin-bottom:15px;
    }

    .container .top-wrapper .top-content-l{
        margin-top:20px;
    } 


    .mid-content .mid-img{
        padding:15px;
    }

    .mid-content{
        margin-top:10px;
    }

    .mid-wrapper .container .mid-title{
        height:45px;
    }

    .mid-title h2{
        font-size:24px;
        letter-spacing: 0.01em;
    }
    
    .whitebox{
        background-color:#FBE5E4;
        padding:0px 15px;
    }

    .whitebox h3{
        font-size:24px;
    }

    .whitebox p{
        font-size:14px;
        letter-spacing: 0.03em;
    }
    
    .pc-footer{
        display: none !important;
    }

    .sp-footer{ 
        display: block !important;
    }
    
    .footer-logo-area{
        margin-top:20px;
        margin-bottom:20px;
    }

    .footer-logo-area .footer-logo a img{
        margin-top:0px;
        width:90%;
        margin-bottom:0px;
    }    

    .footer-logo-area .footer-logo p{
        display:block;
    }

    .footer-logo-area .footer-logo ul{
        margin-top:5px;
    }

    .footer-logo-area .footer-logo ul li{
        font-size:16px;
        margin-left:5px;
    }

    .footer-logo-area .footer-logo p{
        margin-bottom:0px;
        font-size:12px;
    }

    footer .copy p{
        font-size:12px;
    }

    .footer-sp-nav .sp-nav{
        background-color:#F0F0F0;
        width:100%;
        padding-left:0px;
    }

    .footer-sp-nav .sp-nav li{
        border-bottom:2px solid white;
        padding:0px;
        list-style-type: none;  
        height:56px;
    }

    .footer-sp-nav .sp-nav li a{
        color:#DD1D44;
        letter-spacing: 0.03em;
        font-size:14px;
        font-weight:bold;
        padding:15px 0px 15px 20px;
        display:block;
    }

    .footer-sp-nav .sp-nav p{
        color:#4B4B4B;
        letter-spacing: 0.02em;
        margin-left:10px;
    }

    .footer-sp-nav .sp-nav li:last-child{
        background-color:white;
        border-bottom:2px solid #F0F0F0;

    }

    .footer-sp-nav .sp-nav li a p{
        display:inline;
    }

    .footer-sp-nav .sp-nav .gray a img{
        float:right;
        margin-right:15px;
        margin-top:2px;
    }

    .sp-img{
        float:right;
        margin-right:17px;
        margin-top:4px;
    }

    .sns{
        padding-left:0px;
        text-align:center;
    }

    .sns li{
        display:inline;
    }

    .sns li:last-child{
        margin-left:10px;
    }

    .philo-box h2{
        font-size:22px;
    }

    .under-page .philo-word{
        font-size:16px;
    }
    
    .under-page h2 .kaigyo{
        margin-top:5px;
        font-size:24px;
    }

    .under-page .about-box .about-l img{
        width:80%;
    }

    .under-page .about-box{
        border-radius:0px;
    }

    .under-page .about-box{
        padding:40px 0px 40px 0px;
    }

    iframe{
        height:300px;
    }

    .relation-box p{
        font-size:14px;
        letter-spacing:0.08em;
    }
}