@charset "utf-8";


/*------ハンバーガーメニューCSS---------*/
.kotei{
	position: fixed;
	top:0;
	right: 0;
	width: 100%;
	z-index: 9998;
}
/*----------ハンバーガーメニュー--------*/
.H_nav input[type="checkbox"],
.H_nav .hamburger-lines {
	display: none; /* チェックボックスと線を隠す */
}
/*------------スマホになった時--------------*/
@media only screen and (max-width: 1000px) {
	
.H_nav {/*------menuの土台---------*/
	width: 100%;
	height: 0;
	top: 0;
	right: 0;/* 右か左か */
	display: block;
	position: absolute; /* koteiに固定 */
}
	
/*--------チェックボックス----------*/		
.H_nav input[type="checkbox"],
.H_nav .hamburger {
	display: block; /* チェックボックスと線を見せる */
}	
.H_nav input[type="checkbox"] {
	position: absolute;
	display: block;
	cursor: pointer;
	height: 100px;
	width: 90px;
	top: 34px;
	right: 5px;
	z-index: 5;
	opacity: 0;/*--ここを１にしてチェックボックスの位置を調節---*/
}
	
/*--------ハンバーガーの線------------*/
.H_nav .hamburger {/*---線のdiv----*/
	position: absolute;/* ヘッダーに固定 */
	height: 80px;
	width: 85px;
	top: 42px;
	right: 5px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: #fff;
	padding: 8px 0px; 
	border: solid #0065D6 3px;
}
.H_nav .hamburger .line {/*---線自体のデザイン----*/
	display: block;
	height: 8px;
	width: 75%;
	border-radius: 10px;
	background: #0065D6;/*---線の色----*/
	margin: auto;
}

/*---------クリックしたらバツになる----------*/
.H_nav .hamburger .line1 {
	transform-origin: 0% 0%;
	transition: transform 0.1s ease-in-out;
}
.H_nav .hamburger .line2 {
    transition: transform 0.1s ease-in-out;
}
.H_nav .hamburger .line3 {
	transform-origin: 0% 100%;
	transition: transform 0.1s ease-in-out;
}
/*---------クリックした後の変化-----------*/
.H_nav input[type="checkbox"]:checked ~ .hamburger .line1 {
	transform: rotate(32deg);/*---線の角度----*/
	background:#f0065D6;/*---色が変わる----*/
	width: 74px;
	margin-left: 10px;
}
.H_nav input[type="checkbox"]:checked ~ .hamburger .line2 {
    transform: scaleY(0);
}
.H_nav input[type="checkbox"]:checked ~ .hamburger .line3 {
    transform: rotate(-32deg);/*---線の角度----*/
	background:#0065D6;/*---色が変わる----*/
	width: 74px;
	margin-left: 10px;
}

/*--------クリックしたらmeneが出る----------*/	
.H_nav input[type="checkbox"]:checked ~ .menu {
   transform: translateY(0);
}
	
.H_nav .menu {/*------menuの土台---------*/
	width: 100%;
	background:#0065D6;
	box-shadow: #000 0 0 20px;
	padding: 90px 0 20px 0;
	transform: translateY(-150%);/*----XY軸ここ----*/
	transition: transform 0.5s ease-in-out;
	flex-direction: column;
/*----中のテキストの位置、右か左かなど----*/
}
.H_nav .menu a{
	margin: 0px;
	padding: 20px 0;
	font-size: 40px;
	transition:ease-in-out 0.5s;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.H_nav .menu a:hover{
	background-color:#4CA3F2;
	opacity: 1;
}
.menu hr{
	width: 100%;
	border: dashed 1px #fff;		
}
.H_nav .menu span{
	font-size: 20px;
	font-family: "font_M";
	}
.H_nav .menu p{
	font-size: 50px;
	display: block;
	color: #ffff00;
	line-height: 55px;
	}
.H_nav .jikan span{
	line-height: 30px;
	
	}
}

/*-------------ハンバーガーメニューCSSここまで----------------*/