/*
* Theme Name: KleinerFeigling Singapore Ver.1
* Author: KleinerFeigling Singapore Ver.1
* Version: 1.0
*/

body {}
a {
	transition: 0.5s cubic-bezier(0, .75, .5, 1.4);
}
a:hover {
	opacity: 0.7;
}
.show_pc {
	display: block !important;
}
.show_sp {
	display: none !important;
}
/*header*/
header {
	background-color: #8cd223;
}
header img {
	width: 100%;
	height: auto;
}
header .header_inner {
	width: 90%;
	max-width: 920px;
	margin: 0 auto;
}
header nav {
	display: flex;
	padding: 10px 0;
}
header ul.nav_logo_wrap {
	width: 9%;
	margin: 0 auto 0 0;
}
header .nav_wrap {
	width: 88%;
	margin: 0 0 0 auto;
}
header .nav_wrap ul {
	width: 100%;
	display: flex;
}
header .nav_wrap ul li {
	width: 11%;
	margin: 0 auto;
	overflow: hidden;
}
header .nav_wrap ul li:last-child {
	width: 11%;
	margin: 0 0 0 auto;
}
header .menu {
	display: none;
}
header .nav_wrap ul li img {
width: 200%;
}
header .nav_wrap ul li a:hover img {
transform: translate(-50%,0);
}
/*footer*/
footer {
	background-color: #8cd223;
}
footer .foot_wrapper {
	width: 100%;
	max-width: 1366px;
	margin: 0 auto;
}
footer .foot_contents_wrapper {
	width: 85%;
	padding: 70px 0;
	margin: 0 auto;
	position: relative;
	display: flex;
}
footer .foot_contents_wrapper .sns_wrapper {
	width: 50%;
}
footer .foot_contents_wrapper .sns_wrapper h2 {
	width: 21.26%;
	margin: 0 auto 40px;
	position: relative;
}
footer .foot_contents_wrapper .sns_wrapper h2::before {
	content: url("assets/img/common/sns_ico01.svg");
	width: 54.83%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-100%, -100%);
	transition: all 0.6s cubic-bezier(.2, 1.6, .8, 1.2);
	opacity: 0;
}
footer.active .foot_contents_wrapper .sns_wrapper h2::before {
	transform: translate(-100%, 0);
	opacity: 1;
}
footer .foot_contents_wrapper .sns_wrapper h2::after {
	content: url("assets/img/common/sns_ico02.svg");
	width: 54.83%;
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(100%, -100%);
	transition: all 0.6s cubic-bezier(.2, 1.6, .8, 1.2);
	transition-delay: 0.1s;
	opacity: 0;
}
footer.active .foot_contents_wrapper .sns_wrapper h2::after {
	transform: translate(100%, 0);
	opacity: 1;
}
footer .foot_contents_wrapper .sns_wrapper ul {
	display: flex;
	width: 40%;
	margin: 0 auto;
}
footer .foot_contents_wrapper .sns_wrapper li {
	width: 20%;
	margin: 0 auto;
}
footer .foot_contents_wrapper .company_wrapper {
	width: 50%;
}
footer .foot_contents_wrapper .company_wrapper h2 {
	width: 42.6%;
	margin: 0 auto 40px;
	position: relative;
}
footer .foot_contents_wrapper .company_wrapper h2::before {
	content: url("assets/img/common/company_ico01.svg");
	width: 27.4%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-100%, -100%);
	transition: all 0.6s cubic-bezier(.2, 1.6, .8, 1.2);
	transition-delay: 0.1s;
	opacity: 0;
}
footer.active .foot_contents_wrapper .company_wrapper h2::before {
	transform: translate(-100%, 0);
	opacity: 1;
}
footer .foot_contents_wrapper .company_wrapper h2::after {
	content: url("assets/img/common/company_ico02.svg");
	width: 27.4%;
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(100%, -100%);
	transition: all 0.6s cubic-bezier(.2, 1.6, .8, 1.2);
	transition-delay: 0.2s;
	opacity: 0;
}
footer.active .foot_contents_wrapper .company_wrapper h2::after {
	transform: translate(100%, 0);
	opacity: 1;
}
footer .foot_contents_wrapper .company_wrapper ul {
	display: flex;
	width: 90%;
	margin: 0 auto;
}
footer .foot_contents_wrapper .company_wrapper li {
	width: 42%;
	margin: 0 auto;
	background-color: #ffd600;
	border-radius: 999px;
}
footer .foot_contents_wrapper .company_wrapper li img {
	width: 100%;
	height: auto;
	padding: 0 15px;
}
footer .foot_copyright_wraper {
	width: 100%;
	background-color: #58267d;
	padding: 15px 0;
}
footer .foot_copyright_wraper p {
	font-size: 12px;
	line-height: 1.8;
	text-align: center;
	font-weight: 400;
	color: #FFF;
}

@media only screen and (max-width: 768px) {
	.show_pc {
		display: none !important;
	}
	.show_sp {
		display: block !important;
	}
	/*header*/
	header .header_inner {
		width: 100%;
		height: 60px;
		position: relative;
	}
	header nav {
		display: block;
		padding: 10px 0;
	}
	header ul.nav_logo_wrap {
		width: 40px;
		margin: 0 0 0 10px;
		position: fixed;
		z-index: 101;
	}
	header nav .nav_wrap {
		background-color: rgba(88, 38, 125, 0.95) !important;
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 100;
		transition: all 1000ms cubic-bezier(0.23, 1, 0.32, 1);
		transform: translate(0, -100%);
	}
	header nav.on .nav_wrap {
		background-color: #58267d;
		width: 100%;
		display: block;
		transform: translate(0, 0);
	}
	header .nav_wrap ul {
		width: 100%;
		display: block;
		padding: 75px 50px;
	}
	header .nav_wrap ul li {
		width: 100%;
		margin: 0 auto;
		border-top: 1px solid #8cd223;
	}
	header .nav_wrap ul li:last-child {
		width: 100%;
		margin: 0 auto;
		border-bottom: 1px solid #8cd223;
	}
	header .nav_wrap ul li img {
width: 100%;
}
header .nav_wrap ul li a:hover img {
transform: translate(0,0);
}
	header .menu {
		display: block;
		width: 50px;
		height: 50px;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 100;
		cursor: pointer;
	}
	header .menu::before {
		content: "";
		width: 100%;
		height: 6px;
		position: fixed;
		top: 0;
		left: 0;
	}
	header .btn_menu {
		position: absolute;
		top: 18px;
		left: 15px;
	}
	header .btn_menu li {
		background-color: #58267d;
		width: 20px;
		height: 1px;
		position: absolute;
		transition: 0.4s;
	}
	header nav.on .btn_menu li {
		background-color: #8cd223;
	}
	header .btn_menu li:nth-child(1) {
		top: 0;
		transform: translate3d(0, 50%, 0);
	}
	header .btn_menu li:nth-child(2) {
		top: 7px;
		transform: translate3d(0, 50%, 0);
	}
	header .btn_menu li:nth-child(3) {
		top: 14px;
		transform: translate3d(0, 50%, 0);
	}
	header nav.on .btn_menu li:nth-of-type(1) {
		-webkit-transform: translateY(7px) rotate(-45deg);
		transform: translateY(7px) rotate(-45deg);
	}
	header nav.on .btn_menu li:nth-of-type(2) {
		opacity: 0;
	}
	header nav.on .btn_menu li:nth-of-type(3) {
		-webkit-transform: translateY(-7px) rotate(45deg);
		transform: translateY(-7px) rotate(45deg);
	}
	/*footer*/
	footer .foot_contents_wrapper {
		width: 78%;
		padding: 40px 0;
		margin: 0 auto;
		position: relative;
		display: block;
	}
	footer .foot_contents_wrapper .sns_wrapper {
		width: 100%;
		padding-bottom: 40px;
		margin-bottom: 40px;
		border-bottom: 1px solid #58267d;
	}
	footer .foot_contents_wrapper .sns_wrapper h2 {
		width: 21.26%;
		margin: 0 auto 20px;
		position: relative;
	}
	footer .foot_contents_wrapper .sns_wrapper h2::before {
		content: url("assets/img/common/sns_ico01.svg");
		width: 54.83%;
		position: absolute;
		top: 0;
		left: 0;
		transform: translate(-100%, -100%);
	}
	footer .foot_contents_wrapper .sns_wrapper h2::after {
		content: url("assets/img/common/sns_ico02.svg");
		width: 54.83%;
		position: absolute;
		top: 0;
		right: 0;
		transform: translate(100%, -100%);
	}
	footer .foot_contents_wrapper .sns_wrapper ul {
		display: flex;
		width: 40%;
		margin: 0 auto;
	}
	footer .foot_contents_wrapper .sns_wrapper li {
		width: 20%;
		margin: 0 auto;
	}
	footer .foot_contents_wrapper .company_wrapper {
		width: 100%;
	}
	footer .foot_contents_wrapper .company_wrapper h2 {
		width: 42.6%;
		margin: 0 auto 20px;
		position: relative;
	}
	footer .foot_contents_wrapper .company_wrapper h2::before {
		content: url("assets/img/common/company_ico01.svg");
		width: 27.4%;
		position: absolute;
		top: 0;
		left: 0;
	}
	footer .foot_contents_wrapper .company_wrapper h2::after {
		content: url("assets/img/common/company_ico02.svg");
		width: 27.4%;
		position: absolute;
		top: 0;
		right: 0;
		transform: translate(100%, -100%);
	}
	footer .foot_contents_wrapper .company_wrapper ul {
		display: block;
		width: 58%;
		margin: 0 auto;
	}
	footer .foot_contents_wrapper .company_wrapper li {
		width: 100%;
		margin: 0 auto 10px;
		background-color: #ffd600;
		border-radius: 999px;
	}
	footer .foot_contents_wrapper .company_wrapper li img {
		width: 100%;
		height: auto;
		padding: 0 15px;
	}
	footer .foot_copyright_wraper {
		width: 100%;
		background-color: #58267d;
		padding: 15px 0;
	}
	footer .foot_copyright_wraper p {
		font-size: 10px;
		line-height: 1.8;
	}
}