@charset "utf-8";
/* CSS Document */
.menu-trigger{
	display: none;
}
.sp-menu{
	display: none;
}
@media screen and (max-width:999px){
.menu-trigger {	
	position: relative;
	top: 0px;
	display: block;
	float: right;
    transition: all .4s;
    box-sizing: border-box;
    cursor: pointer;
    width: 50px;
    height: 50px;
    z-index: 5;
}
.menu-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
    cursor: pointer;
    float: right;
    position: absolute;
    background: #000;
    width: 30px;
    height: 2px;
    left: 0;
    right: 0;
    margin: auto;
}
.menu-trigger span:nth-of-type(1) {
    top: 15px;
}
.menu-trigger span:nth-of-type(2) {
    top: 0;
    bottom: 0;
}
.menu-trigger span:nth-of-type(3) {
    bottom: 15px;
}
#gNavi {
    display: none;
    position: fixed;
    top: 75px;
    left: 0;
    background: #fff;
    width: 100%;
    height: calc(100vh - 75px);
    z-index: 3;
}
	#gNavi li{
		float: none;
		margin-bottom: 20px;
		text-align: center;
	}
	#gNavi li a{
		width: 122px;
		border-left: 1px solid #dddddd;
		border-right: 1px solid #dddddd;
		display: inline-block;
		background-position: center !important;
	}
	#gNavi li img{
		display: inline-block;
	}
.menu-trigger.active span:nth-of-type(1) {
    -webkit-transform: translateY(9px) rotate(-45deg);
    transform: translateY(9px) rotate(-45deg);
}

.menu-trigger.active span:nth-of-type(2) {
    opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
    -webkit-transform: translateY(-9px) rotate(45deg);
    transform: translateY(-9px) rotate(45deg);
}
	h2{
		width: 100%;
	}
	h2 img{
		width: 100%;
	}
	#main{
		width: 100%;
	}
	#conts{
		width: 100%;
		float: none;
	}
	#header .headerBox{
		width: 100%;
	}
	#gNavi{
		float: none;
		display: none;
	}
	#footer .footerBox{
		width: 100%;
	}
	#footer ul{
		width: 100%;
		float: none;
	}
	#footer p{
		width: 100%;
		float: none;
	}
	.pageTop{
		width: 100%;
	}
	body{
		min-width: 100%;
	}
	.logo img{
		height: 50px;
		width: auto;
	}
	#header .headerBox{
		padding: 2px 0 5px;
	}
	#header h1{
		margin-bottom: 3px;
		font-size: 10px;
		text-align: center;
	}
	#container{
		padding-top: 80px;
	}
	#main{
		width: 90%;
		margin: 0 auto;
	}
	#sideBar{
		float: none;
		margin: 20px auto 0;
	}
	#conts dt{
		width: 100%;
		display: block;
	}
	#conts dd{
		display: block;
		width: 100%;
		padding-left: 0;
	}
	#footer{
		padding: 13px 5%;
	}
	#footer ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	#footer li{
		margin-bottom: 10px;
	}
	#footer li a{
		padding: 0 10px;
	}
	#footer p{
		text-align: center;
	}
	.pageTop{
		text-align: center;
	}
	#pagePath{
		width: 100%;
		padding: 0 5%;
	}
	#conts h3{
		background-position: bottom center !important;
	}
	#conts .inner .textBox,
	#conts .inner01 .textBox{
		width: 100%;
		float: none;
	}
	#conts .inner .photoBox,
	#conts .inner01 .photoBox{
		float: none;
		text-align: center;
		margin-bottom: 10px;
	}
	#conts .comTable .address dt,
	#conts .comTable .address dd,
	#conts .news dt,
	#conts .news dd{
		width: 100%;
		padding: 0;
		display: block;
		text-align: left;
		float: none;
	}
	.content_header{
		padding-top: 75px;
		margin-top: -75px;
	}
	#conts .map img{
		width: 100%;
		height: auto;
	}
	#conts .inner01 th,
	#conts .inner01 td,
	#conts .comTable td,
	#conts .comTable th{
		width: 100%;
		display: block;
		box-sizing: border-box;
	}
	#conts .inner01 colgroup col,
	#conts .comTable colgroup col{
		width: 100%;
		display: block;
	}
	table{
		width: 100% !important;
	}
	table td{
		width: 100% !important;
		display: block;
	}
	table td iframe{
		width: 100%;
	}
	table td img{
		width: 100%;
		height: auto;
	}
	.main_title{
		font-size: 24px;
		background: url(../img/common/h2_img_sp2.jpg) no-repeat right bottom;
		background-size: cover;
	}
	.access_table td img{
		margin: 10px auto 0;
	}
	#conts h4{
		background: none;
		border: 2px solid #e8e8eb;
		padding: 10px;
	}
	#conts h4 span{
		padding: 0 0 0 10px;
		border-left: 3px solid #3b3e8c;
		background: none;
	}
	.sp-menu ul{
		list-style: none;
		text-align: center;
	}


	/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
	.sp-menu ul li{
		position: relative;
	}

	/*ナビゲーションのリンク設定*/
	.sp-menu ul li a{
		display: block;
		text-decoration: none;
		color: #000;
		padding:15px;
		transition:all .3s;
	}

	.sp-menu ul li a:hover{
		color:#ccc;	
	}

	/*==矢印の設定*/

	/*2階層目を持つliの矢印の設定*/
	.sp-menu ul li.has-child::before{
		content:'';
		position: absolute;
		right:30px;
		top:20px;
		width:6px;
		height:6px;
		border-top: 2px solid #fff;
		border-right:2px solid #fff;
		transform: rotate(45deg);
	}

	/*3階層目を持つliの矢印の設定*/
	.sp-menu ul ul li.has-child::before{
		content:'';
		position: absolute;
		left:15px;
		top:21px;
		width:6px;
		height:6px;
		border-top: 2px solid #fff;
		border-right:2px solid #fff;
		transform: rotate(45deg);
	}

	/*== 2・3階層目の共通設定 */

	/*下の階層を持っているulの指定*/
	.sp-menu li.has-child ul{
		/*絶対配置で位置を指定*/
		position: absolute;
		left:100%;
		top:10px;
		z-index: 4;
		/*形状を指定*/
		background:#666;
		width:180px;
		/*はじめは非表示*/
		visibility: hidden;
		opacity: 0;
		/*アニメーション設定*/
		transition: all .3s;
	}

	/*hoverしたら表示*/
	.sp-menu li.has-child:hover > ul,
	.sp-menu li.has-child ul li:hover > ul,
	.sp-menu li.has-child:active > ul,
	.sp-menu li.has-child ul li:active > ul{
	  visibility: visible;
	  opacity: 1;
	}

	/*ナビゲーションaタグの形状*/
	.sp-menu li.has-child ul li a{
		color: #333;
		border-bottom:solid 1px #ccc;
		background: #fff;
	}

	.sp-menu li.has-child ul li:last-child > a{
		border-bottom:none;
	   }

	.sp-menu li.has-child ul li a:hover,
	.sp-menu li.has-child ul li a:active{
		background:#d3d4fa;
	}

	/*==3階層目*/

	/*3階層目の位置*/
	.sp-menu li.has-child ul ul{
		top:0;
		left:182px;
		background:#66ADF5;
	}

	.sp-menu li.has-child ul ul li a:hover,
	.sp-menu li.has-child ul ul li a:active{
		background:#448ED3;
	}
	.sp-menu{
		display: none;
		color: #fff;
		position: fixed;
		top: 75px;
		left: 0;
		width: 100%;
		z-index: 3;
		font-size: 14px;
		max-height: calc(100vh - 75px);
		overflow-y: auto;
	}
	.sp-menu li.has-child ul,
	.sp-menu li.has-child ul ul{
		position: relative;
		left:0;
		top:0;
		width:100%;
		visibility:visible;/*JSで制御するため一旦表示*/
		opacity:1;/*JSで制御するため一旦表示*/
		display: none;/*JSのslidetoggleで表示させるため非表示に*/
		transition:none;/*JSで制御するためCSSのアニメーションを切る*/
	}

	.sp-menu ul li a{
		border-bottom:1px solid #fff;
		color: #fff;
		padding: 15px 0;
		text-align: center;
		display: block;
		text-decoration: none;
		background: #3b3e8c;
	}

	/*矢印の向き*/
	.sp-menu ul li.has-child::before,
	.sp-menu ul ul li.has-child::before{
		transform: rotate(135deg);
		left:20px;
	}

	.sp-menu ul li.has-child.active::before{
		transform: rotate(-45deg);
	}
}