@charset "UTF-8";
@media screen and (max-width : 1000px) {
	.pc { display: none !important; }
}
@media screen and (min-width : 999px) {
	.sp { display: none !important; }
}
@media screen and (max-width : 1200px) {
	.inner{ max-width: 100%; }
}

a { color: #1A73E8; transition: .3s; text-decoration: none; }
a:hover { opacity: 0.6; }
.inner { width: 1200px; margin: 0 auto; padding: 0; box-sizing: border-box; }


/* header */
#header { position: absolute; top: 0; width: 100%; z-index: 10; transition: .3s; display: flex; justify-content: space-between; align-items: center; }
#header h1 a { text-indent: 100%; white-space: nowrap; overflow: hidden; display: block; background: url(../img/common/logo.png) no-repeat; background-size: cover; width: 180px; height: 180px; position: absolute; top: 20px; left: 40px; }

#header ul { display: flex; margin: 30px 40px 0 0; align-items: center; }
#header ul li { font-size: 18px; line-height: 40px; font-weight: 700; margin-right: 30px; }
#header ul li a { color: #323232; }
#header ul li.contact { margin: 0; }
#header ul li.contact a { width: 160px; background: #F08200; color: #FFF; display: inline-block; text-align: center; border-radius: 20px; }

#header .fixnav { width: 100%; z-index: 999; position: fixed; top: -80px; transition: .3s; background: #FFFD; box-shadow: 0 0 20px #0002; display: flex; justify-content: space-between; }
#header .fixnav div img { width: 285px; height: 62px; margin: 10px 20px; }
#header .fixnav ul { margin: 10px 20px; }
#header.scrolled .fixnav { top: 0; }

#footer { padding: 60px 0; border-top: solid 2px #EDEDED; }
#footer a { color: #323232; }
#footer ul { width: 100%; max-width: 1200px; display: flex; justify-content: center; flex-wrap: wrap; margin: 0 auto; }
#footer ul+ul { margin: 30px auto 0; }
#footer ul li { margin: 0 15px 30px; font-size: 18px; font-weight: 700; }
#footer p { font-size: 14px; text-align: center; }

@media only screen and (max-width: 1200px) {
	#header h1 a { width: 120px; height: 137px; top: 20px; left: 20px; }
	#header ul { margin: 20px; }
	#header ul li { font-size: 16px; margin-right: 20px; }
	#header .fixnav div img { width: 190px; height: 41.333px; margin: 10px; }
	#header .fixnav ul { margin: 10px; }
	
}

@media only screen and (max-width: 1000px) {
	.inner { width: 100%; }

	/* navi */
	#header #menu { display: block; position: fixed; top: 0; right: 0; z-index: 9999; width: 30px; }
	#header #menu span { position: absolute; width: 100%; height: 3px; background: #4bb448; transition: .3s; }
	#header #menu span:nth-of-type(1) { top: 24px; }
	#header #menu span:nth-of-type(2) { top: 35px; }
	#header #menu span:nth-of-type(3) { top: 46px; }
	#header #menu.active span:nth-of-type(1) { transform: translateY(11px) rotate(-45deg); background: #FFF; }
	#header #menu.active span:nth-of-type(2) { opacity: 0; }
	#header #menu.active span:nth-of-type(3) { transform: translateY(-11px) rotate(45deg); background: #FFF; }

	/* gnav */
	#gnav{ float: none; width: 100%; max-width: 400px; height: 100%; position: fixed; top: 0; right: 0; z-index: 9998; opacity: 0; transition: .3s; transform: translate(100%,-100%); background-image: linear-gradient(#4bb448, #26b58e); padding-top: 70px; display: block; overflow-y: auto; box-sizing: border-box; box-shadow: 0 0 20px #0002; }
	#gnav.open { opacity: 1; transition: all 0.25s; transform: translate(0); }
	@keyframes slide-in {
		50% { opacity: 0; transform: translateX(-10px); }
		100% { opacity: 1; transform: translateX(0); }
	}
	#gnav.close { opacity: 1; animation: fade-out 0.25s ease-out forwards; }
	@keyframes fade-out {
		100% { opacity: 0; }
	}
	#gnav ul { display: block; text-align: left; clear: both; float: none; border: none; padding:0; margin: 0 20px; }
	#gnav.open ul { transform: translateX(-10%); opacity: 0; animation: slide-in 0.5s ease-out forwards; }
	#gnav ul li { font-size: 18px; line-height: 30px; border-top: solid 1px #E6E6E6; margin: 0; }
	#gnav ul li a { display: block; color: #FFF; padding: 10px; }
	#gnav ul li.contact { padding-top: 20px; }
	#gnav ul li.contact a { width: 100%; display: block; line-height: 50px; border-radius: 25px; padding: 0; }

	#header .fixnav { width: auto; top: 20px; right: 70px; background: none; box-shadow: none; display: block; }
	#header.scrolled .fixnav { top: 20px; }
	#header .fixnav div { position: fixed; top: -70px; left: 0; transition: .3s; background: #FFFD; border-radius: 0 0 20px 0; padding: 15px 20px; }
	#header .fixnav div img { margin: 0; }
	#header.scrolled .fixnav div { top: 0; }
	#header .fixnav ul { display: block; margin: 0; }
	#header .fixnav li { display: none; }
	#header .fixnav li.contact { display: block; }
	#header .fixnav li.contact a { display: block; width: 120px; line-height: 30px; border-radius: 15px; font-size: 14px; }
	
@media only screen and (max-width: 600px) {
	#header h1 a { width: 90px; height: 90px; top: 20px; left: 20px; }
	
	#header #menu { width: 25px; }
	#header #menu span { height: 2px; }
	#header #menu span:nth-of-type(1) { top: 24px; }
	#header #menu span:nth-of-type(2) { top: 32px; }
	#header #menu span:nth-of-type(3) { top: 40px; }
	#header #menu.active span:nth-of-type(1) { transform: translateY(8px) rotate(-45deg); }
	#header #menu.active span:nth-of-type(3) { transform: translateY(-8px) rotate(45deg); }
	
	#gnav{ max-width: 300px; padding-top: 65px; }
	#gnav ul li { font-size: 16px; line-height: 25px; }
	#gnav ul li a { padding: 10px 0; }

	#header .fixnav { right: 55px; }
	#header .fixnav div { top: -60px; padding: 10px; }
	#header .fixnav li.contact a { width: 100px; line-height: 25px; }

	#footer ul+ul { margin: 30px auto 0; }
	#footer ul li { margin: 0 15px 15px; font-size: 16px; }
}