@charset "utf-8";

@media screen and (min-width: 300px) {/*【スマートフォン横】*/
	.sp_menu{
		display:inline;
	}
	.pc_menu{
		display:none;
	}
	.navbar{
		position: fixed;
		width: 100vw;
		height: auto;
		background-color: #ffffff;
		z-index:900;
	}
	.navbar .logo_box{
		display:block;
		text-align:left;
		padding:1.2em 0 1.2em .5em;
		width: 100%;

	}
	.navbar .logo_box .logo{
		width:40%;
		height:auto;
	}
	/* -- ul#menu -- */
	.sp_menu > ul#menu {
		list-style-type: none;
		width: 100%;
		background: #ffffff;
		opacity: 0.9;
		position: absolute;
		left: 0px;
		top: 70px;
		z-index: 990;
		display: none;
	}
	.sp_menu > ul#menu li {
		text-align: center;
	}
	.sp_menu > ul#menu > li.menuon {
		text-shadow: 1px 1px 0px #ffffff, 3px 3px 2px #006400;
	}
	.sp_menu > ul#menu li a {
		text-decoration: none;
		display: block;
		padding: 15px 0;
	}
	.sp_menu > ul#menu li a:hover {
		background: #a9a9a9;
		opacity: 0.7;
	}
	/* -- div#sp-icon -- */
	.sp_menu > div#sp-icon {
		width: 70px;
		height: 70px;
		position: absolute;
		right: 0px;
		top: 0px;
		z-index: 999;
	}
	.sp_menu > div#sp-icon:hover {
		cursor: pointer;
		opacity: 0.7;
	}
	.sp_menu > div#sp-icon span,
	.sp_menu > div#sp-icon span:before,
	.sp_menu > div#sp-icon span:after {
		display: inline-block;
		width: 30px;
		height: 3px;
		background: #000000;
		position: absolute;
		transition-property: transform;
		transition-duration: 0.3s;
	}
	.sp_menu > div#sp-icon span {
		left: 50%;
		top: 50%;
		transform: translate( -50%, -50% );
	}
	.sp_menu > div#sp-icon span:before {
		content: "";
		transform: translateY( -10px ) rotate( 0deg );
	}
	.sp_menu > div#sp-icon span:after {
		content: "";
		transform: translateY( 10px ) rotate( 0deg );
	}
	.sp_menu > div.sp-open span {
		background: transparent !important;
	}
	.sp_menu > div.sp-open span:before {
		transform: rotate( 45deg ) !important;
	}
	.sp_menu > div.sp-open span:after {
		transform: rotate( -45deg ) !important;
	}
	/* -- /ul#menu -- */
	.pc_menu > ul#menu {
		display:none;
	}

 }/*@media screen and (min-width: 481px)【スマートフォン横】*/
@media screen and (min-width: 1170px) {/*【タブレット縦以上,PC】*/
	.sp_menu{
		display:none;
	}
	.pc_menu{
		display:inline;
		width:calc(100% - 300px);
	}
	.navbar{
		position: fixed;
		width: 100%;
		height: auto;
		background-color: #ffffff;
		z-index:1000;

		display:-webkit-box;
	  	display:-ms-flexbox;
		display:flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;

	}
	.navbar .logo_box{
		display:block;
		text-align:center;
		padding-top:.5em;
		width:300px;
	}
	.navbar .logo_box .logo{
		width:295px;
		height:auto;
	}
	/*menu*/
	.pc_menu > ul#menu_pc {
		text-align: right;
		width:100%;
		padding: 0.5em 1em;
		margin: 1em auto 0 auto;
		font-weight: bold;
		color: #006400;/*文字色*/
		background: #FFF;
		/*border: solid 3px #006400;
		border-radius: 10px;*/
	}
	.pc_menu > ul#menu_pc > li {
		display:inline-block;
		margin:10px;
	}
	.pc_menu > ul#menu_pc > li.menuon,
	.pc_menu > ul#menu_pc > li > a:hover {
		text-shadow: 1px 1px 0px #ffffff, 3px 3px 2px #006400;
	}
	.pc_menu > ul#menu_pc > li > a > i.fas{
		margin-right:1em;
	}
	i.fa-brands.fa-square-facebook{
		font-size:1.8em;
	}
 } 
@media screen and (min-width: 481px) {/*【スマートフォン横】*/
	.navbar .logo_box .logo{
		width:auto;
		height:50px;
	}

}