@charset "UTF-8";

/**
 * Waku Wwaku Base - Layout Stylesheet
 *
 * - Header
 * - Menu
 * - Main
 * - Page
 * - Footer
 *
 */



/* ----------------------------
	Header
---------------------------- */
.header {
	width: 100%;
	min-width: 970px;
	height: 126px;
	background: rgba(253, 251, 242, 0.9);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10000;
}
.header .container {
	height: 100%;
	position: relative;
}

@media screen and (max-width: 767px) {
	.header {
		width: 100%;
		min-width: 0px;
		height: 60px;
		background: rgba(253, 251, 242, 0.9);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10000;
		-webkit-transform: translateY(0%);
		transform: translateY(0%);
	}
}


/* Header Visibility
---------------------------- */
.header.header-hidden {
	position: fixed;
	top: 0;
	-webkit-transform: translateY(-170%);
	transform: translateY(-170%);
	-webkit-transition: transform 0.4s;
	transition: transform 0.4s;
}
.header.header-visible {
	position: fixed;
	top: 0;
	-webkit-transform: translateY(0%);
	transform: translateY(0%);
	-webkit-transition: transform 0.4s;
	transition: transform 0.4s;
}


/* Header Logo
---------------------------- */
.header-logo {
	width: 141px;
	height: 196px;
	position: absolute;
	top: 4px;
	left: 50%;
	margin-left: -70px;
}
.header-logo a {
	display: block;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
}
.header-logo a:hover {
	opacity: 0.6;
}

@media screen and (max-width: 767px) {
	.header-logo {
		width: 58px;
		height: 82px;
		top: 2px;
		margin-left: -29px;
	}
	.header-visible .header-logo,
	.header-hidden .header-logo {
		display: none;
	}
}


/* Header Menu
---------------------------- */
.header-menu li {
	position: absolute;
	top: 50%;
	margin-top: -44px;
}
.header-menu a {
	display: block;
	width: 122px;
	height: 88px;
	position: relative;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
}
.header-menu a:hover {
	opacity: 0.6;
}
.header-menu a:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.header-menu span {
	display: block;
	padding-top: 88px;
	height: 0;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
}

@media screen and (max-width: 767px) {
	.header-menu {
		display: none;
	}
}


/* Header Menu Individual
---------------------------- */

/* About */
.header-menu-about {
	left: 0;
}
.header-menu-about a:before {
	background-image: url(../img/icon/icon-menu01.png);
}
.header-menu-about span {
	background-image: url(../img/common/menu-text-about.png);
}

/* Event */
.header-menu-event {
	left: 136px;
}
.header-menu-event a:before {
	background-image: url(../img/icon/icon-menu02.png);
}
.header-menu-event span {
	background-image: url(../img/common/menu-text-event.png);
}

/* Nursery */
.header-menu-nursery {
	left: 270px;
}
.header-menu-nursery a:before {
	background-image: url(../img/icon/icon-menu03.png);
}
.header-menu-nursery span {
	background-image: url(../img/common/menu-text-nursery.png);
}

/* Consulting */
.header-menu-consulting {
	right: 258px;
}
.header-menu-consulting a:before {
	background-image: url(../img/icon/icon-menu04.png);
}
.header-menu-consulting span {
	background-image: url(../img/common/menu-text-consulting.png);
}

/* Recruit */
.header-menu-recruit {
	right: 124px;
}
.header-menu-recruit a:before {
	background-image: url(../img/icon/icon-menu05.png);
}
.header-menu-recruit span {
	background-image: url(../img/common/menu-text-recruit.png);
}

/* Contact */
.header-menu-contact {
	right: 0px;
}
.header-menu-contact a:before {
	background-image: url(../img/icon/icon-menu06.png);
}
.header-menu-contact span {
	background-image: url(../img/common/menu-text-contact.png);
}


/* Header Button
---------------------------- */
.header-btn {
	display: none;
}

@media screen and (max-width: 767px) {
	.header-btn {
		display: block;
		width: 66.5px;
		height: 60px;
		position: absolute;
		top: 0;
		right: 0;
	}
}



/* ----------------------------
	Menu
---------------------------- */
.menu {
	display: none;
	background: #fdfbf3;
	overflow: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	font-size: 14px;
	color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10001;
}

@media screen and (max-width: 767px) {
	.menu {
		display: block;
		-webkit-transform: scale(1, 0);
		transform: scale(1, 0);
		opacity: 0;
		-webkit-transform-origin: top center;
		transform-origin: top center;
		-webkit-transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
		transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	}
}


/* Menu Open
---------------------------- */
@media screen and (max-width: 767px) {
	.menu-open {
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
		opacity: 1;
	}
}

/* Menu Head
---------------------------- */
.menu-head {
	height: 53px;
	line-height: 53px;
	text-align: center;
	background: #3a7c3c;
}


/* Menu Logo
---------------------------- */
.menu-logo {
	height: 127px;
	line-height: 127px;
	text-align: center;
}
.menu-logo img {
	vertical-align: middle;
}


/* Menu List
---------------------------- */
.menu-list a,
.menu-list span {
	display: block;
	padding: 12px 5.625% 12px 38px;
	color: #fff;
}

/* Arrow */
.menu-list a {
	position: relative;
}
.menu-list a:before {
	content: "";
	display: block;
	width: 12px;
	height: 15px;
	background-repeat: no-repeat;
	background-position: top center;
	background-image: url(../img/icon/icon-arrow-white.png);
	background-size: contain;
	position: absolute;
	left: 20px;
	top: 16px;
}

/* About */
.menu-list-about > a {
	background: #ff9712;
}

/* Event */
.menu-list-event > a {
	background: #1eadf1;
}

/* Nursery */
.menu-list-nursery > span {
	background: #9dc53a;
}

/* Consulting */
.menu-list-consulting > span {
	background: #fe6959;
}

/* Recruit */
.menu-list-recruit > a {
	background: #f3d800;
}

/* Blog */
.menu-list-blog > a {
	background: #ffcb3d;
}

/* Contact */
.menu-list-contact > a {
	background: #e0739c;
}


/* Menu List Sub
---------------------------- */
.menu-list-sub {
	overflow: hidden;
}
.menu-list-sub ul {
	overflow: hidden;
	margin-bottom: -1px;
}
.menu-list-sub:after {
	content: "";
	display: block;
	clear: both;
}
.menu-list-sub li {
	width: 50%;
	float: left;
	border-bottom: 1px solid #c6c6c6;
	border-right: 1px solid #c6c6c6;
	box-sizing: border-box;
    overflow: hidden;
}
.menu-list-sub li:nth-child(even) {
	border-right: 0;
}
.menu-list-sub a {
	padding: 14px 5.625% 14px 46px;
	height: 100%;
	box-sizing: border-box;
	line-height: 1.5;
	font-size: 13px;
	color: #535353;
}
.menu-list-sub a:before {
	content: "";
	display: block;
}

/* Nursery */
.menu-list-nursery a:before {
	background-image: url(../img/icon/icon-arrow-green.png);
	left: 26px;
}

/* Consulting */
.menu-list-consulting a:before {
	background-image: url(../img/icon/icon-arrow-red.png);
	left: 26px;
}


/* Menu Close
---------------------------- */
.menu-close {
	width: 53px;
	height: 53px;
	position: absolute;
	top: 0;
	right: 0;
}
.menu-close button {
	display: block;
	width: 100%;
	height: 100%;
}



/* ----------------------------
	Main
---------------------------- */
.main {
	padding-bottom: 200px;
	margin-bottom: -65px;
	overflow: hidden;
	word-break: break-all;
}

@media screen and (max-width: 767px) {
	.main {
		padding-bottom: 100px;
		margin-bottom: -40px;
	}
}



/* ----------------------------
	Page
---------------------------- */

/* Page Visual
---------------------------- */
.page-visual {
	height: 433px;
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
	position: relative;
}
.page-visual:after {
	content: "";
	display: block;
	height: 10px;
	background-repeat: repeat-x;
	background-position: bottom center;
	background-image: url(../img/common/bg-threshold-bottom.png);
	position: absolute;
	left: 0;
	right: 0;
	top: 423px;
	z-index: 2;
}
.page-visual img {
	display: none;
}

@media screen and (max-width: 767px) {
	.page-visual {
		height: 200px;
	}
	.page-visual:after {
		height: 5px;
		background-size: auto 5px;
		top: 195px;
	}
}


/* Page Head
---------------------------- */
.page-head {
	display: -webkit-box; /* Less than android 4.3 */
	display: -ms-flexbox; /* IE10 */
	display: -webkit-flex; /* Less than iOS8 */
	display: flex;
	-webkit-box-pack: justify; /* Less than android 4.3 */
	-ms-flex-pack: justify; /* IE10 */
	-webkit-justify-content: space-between; /* Less than iOS8 */
	justify-content: space-between;
	-webkit-box-align: center; /* Less than android 4.3 */
	-ms-flex-align: center; /* IE 10 */
	-webkit-align-items: center; /* Less than iOS8 */
	align-items: center;
	margin-bottom: 68px;
}

@media screen and (max-width: 767px) {
	.page-head {
		display: block;
		margin-bottom: 0;
	}
}

/* Title */
.page-head h2 {
	padding: 35px 0;
	min-width: 250px;
	text-align: center;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(../img/icon/icon-consulting.png); /* DEFAULT */
	font-size: 18px;
}

@media screen and (max-width: 767px) {
	.page-head h2 {
		min-width: 0;
		background-size: 36px auto;
		font-size: 16px;
	}
}

/* List */
.page-head ul {
	display: -webkit-box; /* Less than android 4.3 */
	display: -ms-flexbox; /* IE10 */
	display: -webkit-flex; /* Less than iOS8 */
	display: flex;
	-webkit-box-pack: justify; /* Less than android 4.3 */
	-ms-flex-pack: justify; /* IE10 */
	-webkit-justify-content: space-between; /* Less than iOS8 */
	justify-content: space-between;
	margin-right: -16px;
	line-height: 1.5;
	position: relative;
	top: 2px;
}
.page-head li {
	border-left: 1px solid #a6a6a6;
}
.page-head li:first-child {
	border-left: 0;
}
.page-head li a {
	display: block;
	padding: 0 16px;
	position: relative;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
}
.page-head li a:before {
	content: "";
	display: block;
	width: 154px; /* DEFAULT */
	height: 8px;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(../img/common/bg-line-red-short.png); /* DEFAULT */
	opacity: 0;
	visibility: hidden;
	position: absolute;
	bottom: -16px;
	left: 50%;
	margin-left: -77px; /* DEFAULT */
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
}
.page-head li a.current,
.page-head li a:hover {
	color: #f56a4e; /* DEFAULT */
}
.page-head li a.current:before,
.page-head li a:hover:before {
	visibility: visible;
	opacity: 1;
}

@media screen and (max-width: 767px) {
	.page-head ul {
		display: none;
	}
}


/* Page Main
---------------------------- */
.page-main {
	position: relative;
}
.page-main:before,
.page-main:after,
.page-body:before {
	content: "";
	display: block;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: contain;
	position: absolute;
	z-index: -1;
}

@media screen and (max-width: 767px) {
	.page-main:before,
	.page-main:after,
	.page-body:before {
		display: none;
	}
}

/* Polka */
.page-main:before {
	width: 253px;
	height: 48px;
	background-image: url(../img/consulting/common/bg-polka.png); /* DEFAULT */
	top: 790px;
	left: -40px;
}

@media screen and (max-width: 767px) {
	.page-main:before {
		width: 126.5px;
		height: 24px;
		top: 592px;
		left: -20px;
	}
}

/* Rain */
.page-main:after {
	width: 371px;
	height: 340px;
	background-image: url(../img/consulting/common/bg-rain.png); /* DEFAULT */
	top: 1360px;
	right: -135px;
}

@media screen and (max-width: 767px) {
	.page-main:after {
		width: 185.5px;
		height: 170px;
		top: 1020px;
		right: -135px;
	}
}

/* Sun */
.page-body:before {
	width: 294px;
	height: 302px;
	background-image: url(../img/consulting/common/bg-sun.png); /* DEFAULT */
	top: 2030px;
	left: -65px;
}

@media screen and (max-width: 767px) {
	.page-body:before {
		width: 147px;
		height: 151px;
		top: 1522px;
		left: -32.5px;
	}
}


/* Page Side
---------------------------- */
.page-side {

}
.page-side-body {
	width: 335px;
	height: 336px;
	background-repeat: no-repeat;
	background-position: top center;
	background-image: url(../img/consulting/common/bg-nav.png); /* DEFAULT */
	background-size: contain;
	box-sizing: border-box;
	text-align: right;
	color: #fff;
	position: absolute;
	top: 32px;
	left: -100px;
	z-index: 2;
}

@media screen and (max-width: 767px) {
	.page-side-body {
		display: -webkit-box; /* Less than android 4.3 */
		display: -ms-flexbox; /* IE10 */
		display: -webkit-flex; /* Less than iOS8 */
		display: flex;
		-webkit-box-pack: center; /* Less than android 4.3 */
		-ms-flex-pack: center; /* IE10 */
		-webkit-justify-content: center; /* Less than iOS8 */
		justify-content: center;
		-webkit-box-orient: vertical; /* Less than android 4.3 */
		-webkit-flex-direction: column; /* Less than iOS8 */
		-ms-flex-direction: column; /* IE10 */
		flex-direction: column;
		margin: 0 auto 35px;
		padding: 15px 30px 30px;
		width: 284px;
		height: 284px;
		position: static;
	}
}

/* Title */
.page-side-body h3 {
	padding-right: 14px;
	padding-bottom: 25px;
	min-width: 171px;
	background-position: bottom right;
	background-repeat: no-repeat;
	background-image: url(../img/common/bg-dashed.png);
	box-sizing: border-box;
	line-height: 1.25;
	font-size: 26px;
	position: absolute;
	right: 60px;
	bottom: 194px;
}

@media screen and (max-width: 767px) {
	.page-side-body h3 {
		padding-right: 0;
		padding-bottom: 15px;
		min-width: 0;
		background-position: center bottom;
		background-repeat: repeat-x;
		background-size: auto 3px;
		text-align: center;
		font-size: 20px;
		position: static;
	}
}

/* List */
.page-side-body ul {
	line-height: 1.25;
	position: absolute;
	top: 160px;
	right: 74px;
}
.page-side-body li {
	margin-bottom: 12px;
}
.page-side-body li a {
	display: inline-block;
	vertical-align: top;
	color: #fff;
}
.page-side-body li a.current,
.page-side-body li a:hover {
	padding-left: 20px;
	background: url(../img/icon/icon-triangle.png) no-repeat left 3px;
	position: relative;
}

@media screen and (max-width: 767px) {
	.page-side-body ul {
		margin-top: 15px;
		position: static;
	}
	.page-side-body li {
		margin-bottom: 0;
	}
	.page-side-body li a {
		display: block;
		padding: 6px 0;
		text-align: center;
	}
	.page-side-body li a:before {
		content: "";
		display: inline-block;
		margin-right: 6px;
		width: 7px;
		height: 10px;
		background: url(../img/icon/icon-triangle.png) no-repeat left center;
		background-size: contain;
	}
	.page-side-body li a.current,
	.page-side-body li a:hover {
		padding-left: 0;
		background: none;
		position: static;
	}
}

/* Fixed */
.page-side-fixed {
	position: fixed;
	left: 50%;
	top: 160px;
	margin-left: -565px;
}
@media screen and (max-width: 970px) {
	.page-side-fixed {
		left: 0;
		margin-left: -80px;
	}
}

/* Bottom */
.page-side-bottom {
	position: absolute;
	bottom: -160px;
	top: auto;
}


/* Page Side Banner
---------------------------- */
.page-side-banner {
	width: 340px;
	height: 63px;
	position: absolute;
	left: -84px;
	top: -50px;
	z-index: 2;
}
.page-side-banner a {
	display: block;
	padding-left: 74px;
	height: 100%;
	line-height: 63px;
	background: url(../img/common/bg-ribon.png) no-repeat top left;
	text-align: left;
	font-weight: bold;
	font-size: 17px;
	color: #fff;
	position: relative;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
}
.page-side-banner a:hover {
	opacity: 0.6;
}
.page-side-banner a:before {
	content: "";
	display: inline-block;
	width: 17px;
	height: 17px;
	background: url(../img/icon/icon-star.png) no-repeat top center;
	position: absolute;
	left: 52px;
	top: 50%;
	margin-top: -9px;
}
.page-side-banner small {
	margin-left: 4px;
	padding-left: 12px;
	background: url(../img/icon/icon-arrow-right-yellow.png) no-repeat left center;
	font-size: 13px;
	color: #ffdb49;
	position: relative;
	top: -1px;
}

@media screen and (max-width: 767px) {
	.page-side-banner {
		display: none;
	}
}


/* Page Main
---------------------------- */
.page-section {
	margin-top: 120px;
}
.page-section:first-child {
	margin-top: 0;
}
.page-section-body {
	padding-left: 260px;
}
.page-section-item {
	margin-top: 70px;
}
.page-section-item:first-child {
	margin-top: 0;
}
.page-section-item > header {
	margin-bottom: 34px;
}

@media screen and (max-width: 767px) {
	.page-section {
		margin-top: 60px;
	}
	.page-section-body {
		padding-left: 0;
	}
	.page-section-item {
		margin-top: 35px;
	}
	.page-section-item > header {
		margin-bottom: 17px;
	}
}





/* ----------------------------
	Footer
---------------------------- */
.footer {
	background-repeat: no-repeat;
	background-position: center top;
	background-image: url(../img/common/bg-footer-pc.png);
	background-size: cover;
	color: #fff;
}
.footer .container {
	height: 100%;
}
.footer-inner {
	padding-top: 100px;
	padding-bottom: 40px;
	padding-left: 60px;
	padding-right: 60px;
	height: 100%;
	box-sizing: border-box;
	position: relative;
}
.footer-inner:after {
	content: "";
	display: block;
	clear: both;
}
.footer a {
	color: #fff;
}

@media screen and (max-width: 767px) {
	.footer {
		height: 299px;
		background-image: url(../img/common/bg-footer-sp.png);
		background-size: auto 100%;
	}
	.footer .container {
		padding: 0;
	}
	.footer-inner {
		padding-top: 32px;
		padding-left: 0;
		padding-right: 0;
	}
}


/* Footer Information
---------------------------- */
.footer-info {
	margin-right: 60px;
	width: 280px;
	float: left;
	font-size: 13px;
}
.footer-info a {
	display: inline-block;
	vertical-align: top;
}
.footer-info a:hover {
	text-decoration: underline;
}

@media screen and (max-width: 767px) {
	.footer-info {
		margin-right: 0;
		width: 100%;
		float: none;
		text-align: center;
		font-size: 10px;
	}
	.footer-info a:hover {
		text-decoration: none;
	}
}

/* Logo */
.footer-info-logo {
	width: 79px;
}
.footer-info-logo a {
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
}
.footer-info-logo a:hover {
	opacity: 0.6;
}

@media screen and (max-width: 767px) {
	.footer-info-logo {
		margin: auto;
		width: 53px;
	}
	.footer-info-logo a:hover {
		opacity: 1;
	}
}

/* Tel */
.footer-info-tel {
	margin-top: 8px;
}
.footer-info-tel a {
	font-weight: bold;
	font-size: 18px;
}
.footer-info-tel a:before {
	content: "";
	display: inline-block;
	margin-right: 5px;
	width: 18px;
	height: 15px;
	background: url(../img/icon/icon-tel.png) no-repeat top left;
	background-size: contain;
	position: relative;
	top: 1px;
}

@media screen and (max-width: 767px) {
	.footer-info-tel {
		margin-top: 10px;
	}
	.footer-info-tel a {
		font-size: 14px;
	}
	.footer-info-tel a:before {
		margin-right: 4px;
		width: 14px;
		height: 12px;
	}
}

/* Email */
.footer-info-email a {
	font-size: 14px;
}

@media screen and (max-width: 767px) {
	.footer-info-eamil a {
		font-size: 12px;
	}
}

/* Address */
.footer-info-address {
	margin-top: 8px;
	line-height: 1.5;
}

@media screen and (max-width: 767px) {
	.footer-info-address {
		margin-top: 4px;
	}
}


/* Footer Menu
---------------------------- */
.footer-menu {
	width: 470px;
	float: right;
	font-size: 14px;
}
.footer-menu-column {
	width: 270px;
	float: left;
}
.footer-menu-column:first-child {
	width: 200px;
}
.footer-menu-section {
	margin-top: 20px;
}
.footer-menu-section:first-child {
	margin-top: 0;
}
.footer-menu-section li {
	margin-top: 2px;
}
.footer-menu a {
	display: inline-block;
	padding-left: 20px;
	vertical-align: top;
}
.footer-menu a:hover {
	text-decoration: underline;
}
.footer-menu-section > a {
	font-size: 16px;
	position: relative;
}
.footer-menu-section > a:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 11px;
	border-color: transparent transparent transparent #ffffff;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -8px;
}

@media screen and (max-width: 767px) {
	.footer-menu {
		width: auto;
		float: none;
	}
	.footer-menu-column,
	.footer-menu-column:first-child {
		width: auto;
		float: none;
	}
	.footer-menu-section {
		display: none;
	}
}


/* Footer SNS
---------------------------- */
.footer-sns li {
	display: inline-block;
	margin: 0;
	margin-right: 16px;
	vertical-align: top;
}
.footer-sns li a {
	display: block;
	padding: 0;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
}
.footer-sns li a:hover {
	opacity: 0.6;
}

@media screen and (max-width: 767px) {
	.footer-sns {
		display: block;
		margin-top: 12px;
		text-align: center;
	}
	.footer-sns li {
		margin: 0 4px;
		width: 38px;
	}
}


/* Footer Top
---------------------------- */
.footer-top {
	position: fixed;
	right: 50px;
	bottom: 50px;
}
.footer-top a {
	display: block;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
}
.footer-top a:hover {
	opacity: 0.6;
}

@media screen and (max-width: 767px) {
	.footer-top {
		width: 78px;
		height: 78px;
		right: 0;
		bottom: 0;
	}
	.footer-top a {
		padding: 20px;
	}
	.footer-top a:hover {
		opacity: 1;
	}
}


/* Footer Copy
---------------------------- */
.footer-copy {
	padding-top: 35px;
	font-size: 14px;
	text-align: center;
	clear: both;
}
.footer-copy small {
	display: block;
}

@media screen and (max-width: 767px) {
	.footer-copy {
		padding-top: 0;
		width: 100%;
		letter-spacing: 0;
		font-size: 10px;
		position: absolute;
		bottom: 20px;
		left: 0;
		right: 0;
	}
}