@charset "UTF-8";
/* CSS Document */

@media screen and (max-width: 767px){
    
/*==========基本設定==========*/  
.pc{
    display:none;
}

.sp{
    display:block;
}

.content{
    width: 90%;
}

.sp_br{
    display:inline;
}

.pc_br{
    display:none;
}

/*==========テキスト設定==========*/ 

h2{
    font-size:  2.5rem;
    margin-bottom: 0.5em;
    line-height: 1.5em;
}

h3{
    font-size: 2.4rem;
    margin-bottom: 0.3em;
    line-height: 1.5em;
}

/*==========箱の並びの設定==========*/
.content{
    width: 90%;
}

.box{
    flex-direction: column;
}

.box .box-two,
.box .box-three,
.box .box-four,
.box .one-two,
.box .one-three{
    width: 100%;
}
    
    hr{
        margin-bottom: 5em;
    }
    
/*==========共通==========*/
    
.sec01, .sec02, .sec03, .sec04, .sec05, .sec06,
.home .sec02, .home .sec03{
    margin-bottom: 20em;
}
    
.w-70{
    width: 100%;
}

.post_area img{
    border-radius: 10px;
}

.works hr,
.works_detail hr,
.blog hr,
.blog_detail hr{
    margin-bottom: 10em;
}
    
/*==========ヘッダーの設定==========*/    
.mv-logo img {
    width: 60%;
}

.key{
    margin-bottom: 10em;
}



/*==========グローバルメニューの設定==========*/ 
    .header_box img{
        width: 100%;
    }
    
    .header {
        margin-bottom: 0em;
		height: 20px;
    }

    
/*==========footer==========*/
    footer {
        padding-top: 10em;
    }
    
    .footer_box_l{
        width: 100%;
    }
    
    .footer_logo img {
        margin: 0 auto 5em;
    }

    footer .txt_left{
        text-align: center;
    }

    .copy{
        padding-top: 5em;
    }

    footer .box{
        align-content: center;
        flex-direction: row;
    }
    
    footer #menu-gnavi-1{
        flex-direction: column;
    }
    
    footer #menu-gnavi-1 li a{
        display: block;
        text-align: center;
    }
    
    #menu-gnavi-1 li {
        padding: 0;
    }
    
     .footer-contact .left{
        padding: 5em 2em;
    }
    
    .footer-contact li {
        height: auto;
    }
    
    footer .footer_logo img {
        width: 50%;
    }
    
    footer .footer_logo {
        margin: 0px auto 5em;
    }
    
    footer .box {
        width: 90%;
    }
	
	footer .right .box{
		flex-direction: column;
		align-content: flex-start;
	}
	
	footer .right li{
		margin-bottom: 0.5em;
	}
	
	footer .left{
		margin-bottom: 1em;
	}
 
/*==========top==========*/
	.home #sec01 .left{
		margin-bottom: 1em;
	}
	.home #sec02 .w-80{
		width: 90%;
	}
	
	.home #sec03{
		width: 90%;
		margin: 0 auto;
		margin-bottom: 10em;
	}
	
	.home #sec03 .box{
		flex-direction: row;
	}
	
	.home #sec03 .left {
		width: 45%;
		padding: 0;
	}
	
	.home #sec03 .right{
		width: 50%;
	}
	
	.home #sec02 ul, #sec03 .news_box {
		margin-bottom: 1em;
	}
	
/*==========ABOUT==========*/
	.about #sec02 .box-three {
		margin-bottom: 1em;
	}
	
/*==========PROJECT==========*/
	.program .content .box-three, .project .content .box-three {
		width: 100%;
	}
	
/*==========detail==========*/
	.single .thum_box, .detail .thum_box, .news_detail .thum_box {
		width: 100%;
	}
	
	.single header, .detail header,
	.terminology_detail header,
	.news_detail header{
		margin-bottom: 8em!important;
	}
	
	.single .content .w-80, .detail .content .w-80{
		width: 100%;
	}

/*==========用語集==========*/
	.terminology_detail .content .w-80,
	.news_detail .content .w-80{
		width: 100%;
	}
	
/*==========お知らせ==========*/
	.news .content .news_box .box{
		flex-direction: row;
	}

	.news .content .news_box .left {
		width: 45%;
		padding: 0;
	}

	.news .content .news_box .right{
		width: 54%;
	}
	
	.news .content{
		margin-bottom: 10em;
	}
	
	.news_detail .cat_title_box .box{
		flex-direction: row;
	}
	
/*==========お問い合わせ==========*/
	.contact #sec01 p{
		text-align: left;
	}
	
	.form-group {
		flex-direction: column;
	}
	
	.form-group label {
    	width: 100%;
		padding-top: 0;
		margin-bottom: 1em;
        display: block;
	}
	
	.form-group input[type="text"], .form-group input[type="tel"], .form-group input[type="email"], .form-group textarea {
		width: 100%;
	}
	
	.textarea {
		height: 300px;
	}

    .form-group p{
        width: 100%;
    }
    .form-group-radio .wpcf7-radio {
        width: 280px;
    }
    .form-group-radio .wpcf7-list-item, .form-group-radio .wpcf7-list-item label {
        margin: 0;
    }
	
}/*end*/

@media all and (max-width:991px){

#gnavi .box{
    flex-flow: column;
}
/*==========ハンバーガーメニューの設定==========*/  
    
.hamburger {
  display : block;
  position: fixed;
  z-index : 999;
  right : 13px;
  top   : 5px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;

}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #0E6197;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

nav.globalMenuSp {
  position: fixed;
  z-index : 999;
  top  : 0;
  left : 100vw;
  color: #fff;
  background: #fff;
  text-align: center;
  width: 100%;
  height: 100vh;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
  padding: 2em 5em 10em 5em;
  margin-bottom: 5em;
}

nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  margin-bottom: 3em;
  height:55%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
}
	
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}
	
/*nav.globalMenuSp ul li:hover{
  background :#ddd;
}*/

nav.globalMenuSp ul li a {
  display: block;
  padding: 0.7em 0;
  text-decoration :none;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  opacity: 100;
　visibility: visible;
    left: 0;
    padding: 5em;
}
    
    #menu-gnavi{
        flex-direction: column;
    }
    
	.nav_contact a {
		background-color: white;
		color: #333333;
		border: none;
	}

	.nav_contact a:hover{
	color: #333333!important;
	background-color: white;
	border: none;
	border-radius: 2px;
	padding: 0.7em 1.5em;
	transition: none;
}
	
	
	.scroll-infinity__item {
		margin-right: 0.9em;
	}
}