@charset "UTF-8";
/*------------------------------------------------------------------------------
	KAWASHIMA COFFEE - polvoron CSS
	URL: ../
	Date: 2017-05-25
	Copyright (C) 2017 KAWASHIMA COFFEE All Rights Reserved.
------------------------------------------------------------------------------*/

@font-face {
    font-family: 'HuiFont';
    src: url('../font/HuiFont.eot');
    src: url('../font/HuiFont.eot?#iefix') format('eot'),
         url('../font/HuiFont.woff') format('woff'),
         url('../font/HuiFont.ttf') format('truetype'),
         url('../font/HuiFont.svg#webfontjSpbZQRv') format('svg');
}

@font-face {
    font-family: 'Swistblnk-Monthoers';
    src: url('../font/Swistblnk-Monthoers.ttf.eot');
    src: url('../font/Swistblnk-Monthoers.ttf.eot?#iefix') format('eot'),
         url('../font/Swistblnk-Monthoers.ttf.woff') format('woff'),
         url('../font/Swistblnk-Monthoers.ttf.svg#webfontjSpbZQRv') format('svg');
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

body {
	background:url(../../polvoron/img/bg_001.png);
	font-family:'HuiFont';
	color:#231815;
}

p#pagetopBtn{
	width:500px;
	position:fixed;
	top:-150px;
	right:-150px;
	text-align:right;
	z-index:999999;
}

#wrapper{
	margin:auto;
}

#wrapper header{
	margin-bottom:60px;	
}

#wrapper header h1 img{
	width:100%;
	height:auto;	
}

#wrapper #material{
	margin-bottom:80px;	
}

#wrapper #material h2{
    font-family: 'Swistblnk-Monthoers';
	font-size:60px;
	color:#117d40;
	text-align:center;
	background:url(../../polvoron/img/bg_003.png) repeat-x center 28px;
	margin-bottom:20px;
}

#wrapper #material h2 strong{
	font-family:'HuiFont';
	font-size:22px;
	color:#231815;
	display:block;
}

#wrapper #material ul{
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-justify-content: space-around; /* Safari */
  justify-content:         space-around;
}

#wrapper #material ul li{
	text-align:center;
	font-size:18px;
	font-weight:bold;
}

#wrapper #material ul li img{
	margin-bottom:20px;
}

#wrapper #material ul li strong{
	display:block;	
}

#wrapper #process{
	background:#fff url(../../polvoron/img/bg_009.png) no-repeat 20px 2320px;
	position: relative;
	padding-bottom:60px;
}

#wrapper #process .illust1,
#wrapper #process .illust2,
#wrapper #process .illust3,
#wrapper #process .illust4{
	position:absolute;	
}

#wrapper #process .illust1{
	margin-top:-50px;
	margin-left:-50px;
	left:50%;
}

#wrapper #process .illust2{
	top:80px;
	left:20px;	
}

#wrapper #process .illust3{
	top:140px;
	right:340px;	
}

#wrapper #process .illust4{
	top:140px;
	right:20px;
}

#wrapper #process h2{
    font-family: 'Swistblnk-Monthoers';
	font-size:60px;
	color:#117d40;
	text-align:center;
	padding-top:60px;
	background: url(../../polvoron/img/bg_004.png) no-repeat center 88px;
	margin-bottom:60px;
}

#wrapper #process h2 strong{
	font-family:'HuiFont';
	font-size:22px;
	color:#231815;
	display:block;
}

#wrapper #process ul{
	margin: 0 20px 0 20px;
	overflow:hidden;
	background:url(../../polvoron/img/bg_011.png) repeat-y center 100px;
	background-size:12% auto;
}

#wrapper #process ul li{
	float:left;
	width:46%;
}

#wrapper #process ul li:nth-child(2n){
	float:right;
	margin-top:60px;
}

#wrapper #process ul li:nth-child(1),
#wrapper #process ul li:nth-child(2n-1){
	margin-bottom:60px;
}

#wrapper #process ul li:nth-child(2){
	margin-top:100px;
}

#wrapper #process ul li p{
	margin-bottom:10px;	
}

#wrapper #process ul li dl{
	line-height:1.2;
	font-size:18px;
}

#wrapper #process ul li dt{
	width:20%;
	float:left;
	margin-right:20px;
	padding-top:5px;
}

#wrapper #process ul li dd{
	height: 100px;
	display: flex;
	align-items: center;
	background:url(../../polvoron/img/bg_010.png) no-repeat bottom left;
}

#wrapper #process ul li img{
	width:100%;
	height:auto;	
}

#wrapper #process ul li:last-child{
	float:right;
	width:auto;
	margin-top:40px;
}

#wrapper #process .close{
	text-align:center;
}

#wrapper #process .close a{
	display: inline-block;
	color:#fff;
	background:#117d40;
	border-radius:40px;
	padding:10px 0;
	font-size:22px;
	width:120px;
}

footer{
	padding:20px 0;
	text-align:center;	
}

footer .logo{
	margin-bottom:20px;
    mix-blend-mode: multiply;
}

footer #copyright{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	
}

/*--EOF-----------------------------------------------------------------------*/