@charset "UTF-8";

/**
 * Waku Wwaku Base - Index Stylesheet
 *
 * - Layout
 * - Main Visual
 * - Local Navigation
 * - Blog
 * - About
 * - Business
 * - Company
 *
 */


/* ----------------------------
	Layout
---------------------------- */
body {
	background: #fdfbf3;
}
.header {
	top: 550px;
}
.header-logo {
	top: -90px;
}
.main {
	padding-bottom: 20px;
	margin-bottom: 0;
}

@media screen and (max-width: 767px) {
	.header {
		height: 38px;
		position: absolute;
		top: 170px;
		left: 0;
		right: 0;
		z-index: 10000;
		-webkit-transform: translateY(0%);
		transform: translateY(0%);
	}
	.header-logo {
		top: -40px;
	}
	.header-btn {
		width: 40px;
		height: 36px;
		top: -1px;
	}
	.main {
		padding-bottom: 8px;
	}
}


/* Header Visibility
---------------------------- */
.header.header-hidden .header-logo,
.header.header-visible .header-logo {
	top: 0;
}

@media screen and (max-width: 767px) {
	.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.header-hidden,
	.header.header-visible {
		height: 60px;
	}
	.header.header-hidden .header-logo,
	.header.header-visible .header-logo {
		top: 0;
	}
	.header.header-hidden .header-btn,
	.header.header-visible .header-btn {
		width: 66.5px;
		height: 60px;
		top: 0;
	}
}

/* ----------------------------
	Main Visual
---------------------------- */
.main-visual {
	padding-top: 10px;
	width: 100%;
	height: 540px;
	position: relative;
}
.main-visual:before,
.main-visual:after {
	content: "";
	display: block;
	width: 100%;
	height: 10px;
	background-repeat: repeat-x;
	position: absolute;
	left: 0;
	right: 0;
	z-index: 2;
}
.main-visual:before {
	background-position: top center;
	background-image: url(../img/common/bg-threshold-top.png);
	top: 10px;
}
.main-visual:after {
	background-position: bottom center;
	background-image: url(../img/common/bg-threshold-bottom.png);
	bottom: 0;
}
.main-visual li {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: absolute;
	top: 10px;
	left: 0;
	right: 0;
	bottom: 0;
}
.main-visual li img {
	display: none;
}

@media screen and (max-width: 767px) {
	.main-visual {
		padding-top: 5px;
		height: 165px;
	}
	.main-visual:before,
	.main-visual:after {
		height: 5px;
		background-size: auto 5px;
	}
	.main-visual:before {
		top: 5px;
	}
	.main-visual li {
		top: 5px;
	}
}


/* Cross fade
---------------------------- */
.main-visual ul {
	height: 100%;
	overflow: hidden;
	position: relative;
}
.main-visual li {
	opacity: 0;
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	-webkit-transform-origin: center;
	transform-origin: center;

	/* Transition */
	-webkit-transition: none;
	transition: none;
}
.main-visual li.active {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);

	/* Transition */
	-webkit-transition: opacity 4.2s cubic-bezier(0.445, 0.05, 0.55, 0.95), -webkit-transform 8.8s cubic-bezier(0, 0, 1, 1) 0ms;
	transition: opacity 4.2s cubic-bezier(0.445, 0.05, 0.55, 0.95), transform 8.8s cubic-bezier(0, 0, 1, 1) 0ms;
}
[data-js="true"] .main-visual li img {
	display: none;
}


/* Main Visual Title
---------------------------- */
.main-visual > img {
	width: 309px;
	position: absolute;
	right: 45px;
	bottom: 40px;
}

@media screen and (max-width: 767px) {
	.main-visual > img {
		width: 127px;
		right: 8px;
		bottom: 24px;
	}
}


/* ----------------------------
	Local Navigation
---------------------------- */
.local-nav {
	display: none;
}

@media screen and (max-width: 767px) {
	.local-nav {
		display: block;
		margin-top: 60px;
		text-align: center;
	}
	.local-nav ul:after {
		content: "";
		display: block;
		clear: both;
	}
	.local-nav li {
		margin-bottom: 10px;
		width: 33.3333%;
		float: left;
		letter-spacing: 0;
		font-size: 10px;
	}
	.local-nav a {
		display: block;
		line-height: 1.4;
	}
	.local-nav a:before {
		content: "";
		display: block;
		height: 38px;
		background-repeat: no-repeat;
		background-position: center;
	}
	.local-nav-about a:before {
		background-image: url(../img/icon/icon-menu01.png);
		background-size: 32px auto;
	}
	.local-nav-event a:before {
		background-image: url(../img/icon/icon-menu02.png);
		background-size: 27px auto;
	}
	.local-nav-nursery a:before {
		background-image: url(../img/icon/icon-menu03.png);
		background-size: 30px auto;
	}
	.local-nav-consulting a:before {
		background-image: url(../img/icon/icon-menu04.png);
		background-size: 32px auto;
	}
	.local-nav-recruit a:before {
		background-image: url(../img/icon/icon-menu05.png);
		background-size: 26px auto;
	}
	.local-nav-contact a:before {
		background-image: url(../img/icon/icon-menu06.png);
		background-size: 33px auto;
	}
}



/* ----------------------------
	Blog
---------------------------- */
.blog {
	margin-top: 230px;
}

@media screen and (max-width: 767px) {
	.blog {
		margin-top: 42px;
	}
}



/* ----------------------------
	About
---------------------------- */
.about {
	margin-top: 40px;
	margin-bottom: 120px;
	height: 1140px;
	background-repeat: no-repeat;
	background-position: top center;
	background-image: url(../img/index/bg-main-pc.png);
}
.local-nav + .about {
  margin-top: 120px;
}
.about .container {
	height: 100%;
	background: url(../img/index/text-lead.png) no-repeat center 268px;
	position: relative;
}
.about section {
	width: 400px;
}
.about .heading { /* Override */
	margin-bottom: 30px;
}
.about figure {
	position: absolute;
}

@media screen and (max-width: 767px) {
	.about {
		margin-top: 0;
		margin-bottom: 76px;
		height: auto;
		background-size: cover;
	}
	.local-nav + .about {
  	margin-top: 0;
	}
	.about .container {
		height: 100%;
		background: none;
	}
	.about section {
		width: 100%;
	}
	.about .heading { /* Override */
		margin-bottom: 35px;
	}
	.about figure {
		display: none;
	}
}


/* About Vision
---------------------------- */
.about-vision {
	padding-top: 132px;
	margin-left: auto;
}
.about-vision figure {
	top: 550px;
	right: 15px;
}

@media screen and (max-width: 767px) {
	.about-vision {
		padding-top: 40px;
	}
}


/* About Place
---------------------------- */
.about-place {
	padding-top: 140px;
}
.about-place figure {
	top: 170px;
	left: 25px;
}

@media screen and (max-width: 767px) {
	.about-place {
		padding-top: 60px;
	}
}


/* ----------------------------
	Business
---------------------------- */
.business {
	margin-bottom: 110px;
	height: 435px;
	background: url(../img/index/bg-business.png) no-repeat bottom center;
	background-size: cover;
	text-align: center;
}
.business:before {
	content: "";
	display: inline-block;
	height: 100%;
	width: 0;
	vertical-align: middle;
}
.business li {
	display: inline-block;
	margin: 0 40px;
	width: 395px;
	vertical-align: middle;
}
.business a {
	display: block;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
}
.business a:hover {
	opacity: 0.6;
}

@media screen and (max-width: 767px) {
	.business {
		margin-bottom: 75px;
		padding-top: 53px;
		height: 368px;
		box-sizing: border-box;
	}
	.business:before {
		display: none;
	}
	.business li {
		display: block;
		margin: 22px auto;
		width: 270px;
	}
	.business a:hover {
		opacity: 1;
	}
}


/* ----------------------------
	Company
---------------------------- */
.company-head {
	margin-left: 16px;
}
.company-body {
	margin-left: 186px;
	width: 554px;
}
.company-body p {
	margin-bottom: 12px;
}

@media screen and (max-width: 767px) {
	.company-head {
		margin-left: 0;
		margin-bottom: 30px;
	}
	.company-body {
		margin-left: 0;
		width: 100%;
	}
}


/* Company Philosophy
---------------------------- */
.company-philosophy {
	margin-bottom: 70px;
}


/* Company Founder
---------------------------- */
.company-founder {
	margin-bottom: 100px;
	position: relative;
}

@media screen and (max-width: 767px) {
	.company-founder {
		margin-bottom: 70px;
	}
}

/* Background */
.company-founder:before {
	content: "";
	display: block;
	width: 318px;
	height: 466px;
	background: url(../img/common/bg-logo.png) no-repeat top center;
	background-size: contain;
	position: absolute;
	top: -266px;
	right: -80px;
	z-index: -1;
}

@media screen and (max-width: 767px) {
	.company-founder:before {
		width: 159px;
		height: 233px;
		top: -126px;
		right: -68px;
	}
}


/* Figure */
.company-founder dl {
	margin-bottom: 10px;
	text-align: center;
}
.company-founder dd {
	margin-top: 6px;
}

@media screen and (max-width: 767px) {
	.company-founder dl {
		margin-bottom: 20px;
	}
	.company-founder dt {
		margin: auto;
		width: 242px;
	}
	.company-founder dd {
		margin: 16px auto 0;
		width: 248px;
	}
}


/* Company Adviser
---------------------------- */
.company-adviser {
	margin-bottom: 100px;
	position: relative;
}

@media screen and (max-width: 767px) {
	.company-adviser {
		margin-bottom: 70px;
	}
}

/* Figure */
.company-adviser dl {
	margin-bottom: 10px;
	text-align: center;
}
.company-adviser dd {
	margin-top: 6px;
}
.company-adviser a:hover {
	text-decoration: underline;
}

@media screen and (max-width: 767px) {
	.company-adviser dl {
		margin-bottom: 20px;
	}
	.company-adviser dt {
		margin: auto;
		width: 242px;
	}
	.company-adviser dd {
		margin: 16px auto 0;
		width: 248px;
	}
}


/* Company Dietitian
---------------------------- */
.company-dietitian {
	margin-bottom: 100px;
	position: relative;
}

@media screen and (max-width: 767px) {
	.company-dietitian {
		margin-bottom: 70px;
	}
}

/* Figure */
.company-dietitian dl {
	margin-bottom: 10px;
	text-align: center;
}
.company-dietitian dd {
	margin-top: 6px;
}
.company-dietitian a:hover {
	text-decoration: underline;
}

@media screen and (max-width: 767px) {
	.company-dietitian dl {
		margin-bottom: 20px;
	}
	.company-dietitian dt {
		margin: auto;
		width: 242px;
	}
	.company-dietitian dd {
		margin: 16px auto 0;
		width: 248px;
	}
}


/* Company Overview
---------------------------- */
.company-overview {
	margin-bottom: 60px;
}

@media screen and (max-width: 767px) {
	.company-overview {
		margin-bottom: 45px;
	}
}

/* Background */
.company-overview .company-head {
	position: relative;
}
.company-overview .company-head:before {
	content: "";
	display: block;
	width: 295px;
	height: 305px;
	background: url(../img/common/bg-circle.png) no-repeat top center;
	background-size: contain;
	position: absolute;
    top: -132px;
    left: -105px;
	z-index: -1;
}

@media screen and (max-width: 767px) {
	.company-overview .company-head:before {
		width: 147.5px;
		height: 152.5px;
	    top: -60px;
	    left: -40px;
	}
}


/* Table */
.company-overview table {
	margin-top: -12px;
}

@media screen and (max-width: 767px) {
	.company-overview table {
		margin-top: 0;
	}
}



/* Comapany Information
---------------------------- */
.company-info {
	margin-left: 186px;
	margin-bottom: 80px;
    width: 554px;
}
.company-info-note {
	margin-right: -30px;
}
.company-info-logo {
	margin-top: 26px;
	text-align: center;
}
.company-info-logo a {
	display: inline-block;
	vertical-align: top;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
}
.company-info-logo a:hover {
	opacity: 0.6;
}

@media screen and (max-width: 767px) {
	.company-info {
		margin-left: 0;
		margin-bottom: 40px;
	    width: 100%;
	    text-align: center;
	}
	.company-info-note {
		margin-right: 0;
	}
	.company-info-logo {
		margin-top: 13px;
	}
	.company-info-logo a {
		width: 100px;
	}
	.company-info-logo a:hover {
		opacity: 1;
	}
}



/* Company Map
---------------------------- */
.company-map {
	height: 400px;
}

@media screen and (max-width: 767px) {
	.company-map {
		height: 215px;
	}
}