/* PHP end -------------------------------------------------------------------------------- */


@charset "UTF-8";
/* https://cocohp.com/8027/ */

@media screen and  (max-width: 700px){
	nav{
	 width: 80%;
	 height: 70px;
	 position: fixed; top: 10px; right: 0em; z-index: 30;
	}

 
	.drawer{
	 display: flex;
	 flex-direction: row;
	 align-items: center;
	 justify-content: space-between;
	 position: relative;
	 height: 70px;
	 padding: 0 1em;
	}
	.menu ul{
	 list-style: none;
	 margin: 0;
	 padding: 0;
	}
	.menu ul li {
		margin: 0px;
	}
}
	

/*ナビゲーション部分*/
 
.menu ul li a {
	display:block;
	font-weight:700;
	font-size:1.2em;
	padding: 1em;
	border-bottom: 3px dotted #000;
	/* color:#fff;  */
	color:#fff;		text-decoration:none;
}
 
 
.menu ul li a:hover
{background-color:rgba(0,0,0,0.7);
color:yellow;}
 

.menu{
 
  text-align:center;
  /* background-color:rgba(0,0,0,1);  */ /* ★★★★★ */
  background-color:rgba(0,0,0,0.8);     transition: 0.3s ease;/*滑らかに表示*/
  -webkit-transform: translateX(100%);/*画面より100%外へ押し出し非表示にさせる*/
 
/*  transform: translateX(-100%);/*右から出す場合は、マイナス100%としてください*/
 
}
 
/*OPEN時の動き*/
.menu.open {
 -webkit-transform: translateX(0%);
 transform: translateX(0%);/*メニューを元の位置へ戻す*/
 
}
 
/*トグルボタンのスタイルを指定*/
.Toggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    width: 46px !important;
    height: 46px !important;
    border: solid 1px #333;         border-radius: 8px; 
    padding-left: 11px;
    padding-right:0;
    background:rgba(255,255,255,0.6);         cursor: pointer;
    z-index: 3;
    right:10px;
}
 
.Toggle span { /*色を指定　★*/
    display: block;
    position: absolute;
    width: 22px;
	border-bottom: solid 5px #333;         -webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
    -moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
    transition: .35s ease-in-out;			/*変化の速度を指定*/

 
}
 /*各ボーダー少しずつずらす*/
.Toggle span:nth-child(1) {
    top:9px;
}
 .Toggle span:nth-child(2) {
    top: 20px;
}
 .Toggle span:nth-child(3) {
    top: 31px;
}
.Toggle.active span:nth-child(1) {
    top: 20px;
/* 1番目のspanをマイナス45度に */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
    top: 21px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
 
/*----------------------------------ここからPCモニターの記述-----------*/
@media screen and (min-width: 701px) {
	nav{
	 display:static;
	 margin: 0 auto;
	 background-color: #000;
	}
	
	.drawer{
		 display: none;}
	.Toggle{
	 display: none;
	}
	.menu{
	 max-width: 1220px;
	width: 100%;
	font-size:1.3em; /* ★ */
	font-family:;
	font-weight:700;
	background-color: #000;
	margin:0 auto;
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}
	.menu ul{
	 height: 65px;
	 display: flex;
	 flex-wrap: wrap;
/* 	 justify-content: flex-end; *//* ★ */
	 justify-content: center;
	 align-items: center;
	 list-style: none;
	 margin: 0;
	 padding: 0;
	}
	

	.menu ul li a{
	 padding: 0 2em;/* ★調整 1.2em */
	 border-bottom: none;
	 color:white;
	}
	.menu ul li a:hover{
	background-color:transparent;
	color:yellow;
	}
}