@charset 'utf-8';
/*
Theme Name: chikutaku
Theme URI: http://chikutaku.co.jp/
*/


body,
h1,
h2,
h3,
h4,
h5,
ul,
p{
	margin: 0;
	padding: 0;
}

body{
	font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

.container{
	max-width: 1100px;
	margin: 0 auto;
}

.side-blog{
	position: fixed;
	top: 30%;
	left: 20px;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	z-index: 3000;
	font-family: 'Damion', cursive;
	font-size: 2.2rem;
	text-decoration: none;
	color: #333;
}


/* header */

header.top{
	background: url('../img/chiku001.jpg');
	background-size: cover;
	height: 600px;
	position: relative;
}

header.page{
	background-size: cover;
	height: 300px;
	position: relative;
}

header.philosophy{
	background: url('../img/chiku003.jpg');
}

header.company{
	background: url('../img/chiku005.jpg')
}

header nav{
	display: flex; 
	justify-content: space-around;
	width: 100%;
	z-index: 9999;
}

header nav a{
	color: #fff;
	width: 16.66666%;
	height: 45px;
	text-decoration: none;
	display: block;
	text-align: center;
	background: rgba(0,100,0,.7);
	padding: 10px 0;
	transition: all .3s 0s ease;
}

header nav a:hover{
	color: rgba(0,100,0,.7);
	background: #fff;
}

header nav a.menu-logo{
	background: #fff;
}


.header-image p{
	color: #fff;
	padding: 5px 10px;
	font-size: 2.8em;
	line-height: 2.3;
	display: inline-block;
	position: absolute;
	left: 100px;
	letter-spacing: 5px;
	font-weight: bold;
	text-shadow: 0px 0px 8px rgba(0,120,0,1);
}

.header-image p:nth-of-type(1){
	top: 150px;
}

.header-image.page p:nth-of-type(1){
	top: 110px;
}

.header-image p:nth-of-type(2){
	top: 230px;
}

.header-image p:nth-of-type(3){
	top: 310px;
}

.header-logo-image{
	width: 300px;
	position: absolute;
	top: 100px;
	right: 100px;
	background: rgba(255,255,255,.7);
	padding: 10px 30px 10px 0;
}

/* main */

.main-container{
	max-width: 1000px;
	margin: 0 auto;
	background: #F9F9F9;
	position: absolute;
	left: 0;
	right: 0;
	top: 500px;
}

.main-container.page{
	max-width: 1000px;
	margin: 0 auto;
	background: #F9F9F9;
	position: absolute;
	left: 0;
	right: 0;
	top: 250px;
}

.main-container h1{
	text-align: center;
	font-size: 2.2rem;
}

.main-section{
	padding: 50px 0;
}

.main-section > h1{
	margin-bottom: 50px;
}

.page .main-section > h1{
	margin-bottom: 0;
}



.main-section > h1::after{
	content: '';
	display: block;
	width: 100px;
	height: 8px;
	background: #38773F;
	margin: 10px auto 0;
}

/* service */

.service-block{
	position: relative;
	display: flex;
	align-items: center;
	margin: 200px 0;
}


.page .service-block:nth-of-type(1){
	margin: 80px 0 150px;
}

.service-block.page{
	margin: 40px 0 80px;
}

.service-block.page:nth-of-type(1){
	margin: 80px 0 150px;
}

.page .service-block.page:nth-of-type(1){
	margin: 0 0 150px;
}

.service-block.company table{
	width: 80%;
	margin: 0 auto;
	border-collapse: collapse;
}

.service-block.company table td{
	padding: 15px 0;
	border: 1px solid #ccc;
}

.service-block.company table td:nth-of-type(1){
	width: 30%;
	text-align: center;
}

.service-block.company table td:nth-of-type(2){
	width: 70%;
	padding-left: 30px;
}


.service-block > div{
	background: #fff;
	color: #000;
	width: 400px;
	height: auto;
	z-index: 1000;
	padding: 30px;
}

.page .service-block > div{
	background: #fff;
}

.service-block > div h2{
	text-align: center;
	margin: 20px 0 30px 0;
	font-size: 2rem;
}

.service-block:nth-of-type(odd){
	justify-content: flex-end;
}

.service-block:nth-of-type(even){
	justify-content: flex-start;
}

.service-block > img{
	object-fit: cover;
	width: 80%;
	height: 350px;
	position: absolute;
	opacity: 0;
}

.service-block.page > p{
	width: 85%;
	margin: 0 auto;
	text-align: center;
	font-size: 2rem;
	opacity: 0;
}

.service-block.company > p{
	text-align: left;
	font-size: 1.5rem;
}

.service-block > div{
	opacity: 0;
}

.service-block:nth-of-type(odd) img{
	left: 0;
}

.service-block:nth-of-type(even) img{
	right: 0;
}


/* performance */

#performance{
	background: url('../img/back001.jpg');
	padding: 80px 0 30px;
}

.performance-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.performance-list > a{
	display: block;
	width: 40%;
	height: 280px;
	margin: 20px 5%;
	text-decoration: none;
	background: rgba(0,0,0,.7);
	color: #fff;
}

.performance-list > a h3{
	text-align: center;
	margin: 1% 0 0 0;
	font-size: .9rem;
	font-weight: normal;
}

.performance-list > a h4{
	text-align: center;
	margin: 20px 0;
	font-size: 1.2rem;
	font-size: normal;
}

.performance-list > .perf-1{
	background: url('../img/chiku01.jpg');
	background-size: cover;
}

.performance-list > .perf-2{
	background: url('../img/chiku02.jpg');
	background-size: cover;
}

.performance-list > .perf-3{
	background: url('../img/chiku03.jpg');
	background-size: cover;
}

.performance-list > .perf-4{
	background: url('../img/chiku04.jpg');
	background-size: cover;
}

.performance-list > .perf-5{
	background: url('../img/chiku05.jpg');
	background-size: cover;
}

.performance-list > .perf-6{
	background: url('../img/chiku06.jpg');
	background-size: cover;
}

.performance-list > .perf-7{
	background: url('../img/chiku07.jpg');
	background-size: cover;
}

.performance-list > .perf-8{
	background: url('../img/chiku007.jpg');
	background-size: cover;
}

.performance-list > a .black-filter{
	width: 100%;
	height: 25%;
	background: rgba(0,0,0,.7);
	padding: 20px;
	box-sizing: border-box;
}


/* top-bar */

.top-bar{
	text-align: center;
	color: #fff;
	background: #000;	
	padding: 3px 0;
	cursor: pointer;
	user-select: none;
}


.performance-block{
	text-align: center;
	margin-top: 100px;
}

.performance-block:nth-of-type(1){
	margin-top: 0;
}

.perf-detail{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.perf-detail > img{
	width: 50%;
}

.perf-detail > table{
	width: 40%;
	border-collapse: collapse;
}

.perf-detail > table th,
.perf-detail > table td{
	text-align: center;
	padding: 10px 0;
	font-size: 1.4rem;
	border: 1px solid #aaa;
}

.perf-detail > table td:nth-of-type(1){
	width: 50%;
}

.perf-detail > table td:nth-of-type(2){
	width: 50%;
}

.perf-detail > table tr:nth-of-type(1) th{
	background: #999;
	color: #fff;
}

.perf-product{
	display: flex;
	justify-content: flex-start;
	margin-top: 50px;
	flex-wrap: wrap;
}

.perf-product > div{
	width: 20%;
	margin: 0 2%;
}

.perf-product > div h3{
	margin: 15px 0;
	font-size: 1rem;
}

.perf-product > div p{
	font-size: .9rem;
	text-align: left;
}


.blog-block{
	background: #F9F9F9 !important;
	text-align: center;
	width: 90% !important;
	height: auto !important;
	padding: 50px 1% !important;
	margin: 0 auto;
}

.service-block.blog{
	flex-wrap: wrap !important;
	justify-content: flex-start !important;
}

.blog-block > p:nth-of-type(2){
	width: 70%;
	margin: 0 auto;
	text-align: left;
}

.blog-block > h2 > a{
	font-size: 1.5rem;
	color: #555 !important;
	text-decoration: none !important;
	border-bottom: 1px solid #48B127 !important;
}





/*wp-pagenavi base*/

.wp-pagenavi {
	clear: both;
	text-align:center;
 	background: #F9F9F9 !important;
 	width: 100% !important;
}
.wp-pagenavi a, .wp-pagenavi span {
	color: #999;
	background-color: #FFF;
	border: solid 1px #e0e0d2;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration:none;
}
.wp-pagenavi a:hover{
    color:#FFF; 
    background-color:#999; 
    border-color:#999;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background-color: #66cccc;
	border-color: #66cccc;
	font-weight: bold;
    }

.post-content{
	width: 80%;
	margin: 0 auto;
	text-align: left;
}

.page .post-date{
	margin: 40px 0;
}


.blog .prev{
	float: right;
}

.blog .next{
	float: left;
}

.kouji-image{
	width: 80%;
	margin: 0 auto;
}

.kouji-image > img{
	width: 100%;
}

.kouji-date{
	margin: 30px 0;
}

.kouji-shisetsu{
	font-size: 1.5rem;
}

.navigation{
	background: #F9F9F9 !important;
	width: 100% !important;
}


/* footer */

footer{
	padding: 50px 20px;
}

footer .footer-link{
	display: flex;
	justify-content: space-around;
}

footer .footer-link a{
	display: block;
	width: 28%;
}

footer .footer-link a img{
	width: 100%;
}

footer .footer-profile{
	text-align: center;
}

footer .footer-link{
	margin-top: 30px;
}