@charset "utf-8";

@import url("../../common/css/reset.css");
@import url("../../common/css/layout.css");
@import url("../../common/css/page.css");

section{
	line-height:1.8;
}

/* concept */

#concept{
	display:table;
}

h1{
	text-align:center;
	margin-bottom:30px;
}

#concept div{
	background: #FFF;
	display:table-cell;
	padding: 30px;
	width:50%;
	border-radius: 20px 0px 0px 20px;
	vertical-align:top;
}

#concept div + div{
	background: #FFF;
	display:table-cell;
	border-radius: 0 20px 20px 0;
	padding: 30px 30px 30px 0;
	width: 75%;
	overflow:hidden;
}

#concept p + p{
	margin-top:1em;
}

#concept div > img{
	vertical-align:bottom;
	width:100%;
	height:auto;
}

/* charm */

#charm{
	margin-top:60px;
}

#charm h2{
	margin-bottom:30px;
	text-align:center;
}


#charm section{
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	background: #FFF;
	border-radius:20px;
	float:left;
	padding: 30px;
	position:relative;
	width:300px;
}

#charm section + section{
	margin-left:30px;
}

#charm section:before {
	content:"";
	display:block;
	height:40px;
	margin-left:-15px;
	position:absolute;
	top:0; left:50%;
	width:30px;	
}

#charm section:nth-of-type(1):before {
	background:url(../img/charm/01.gif) no-repeat;
	background-size:auto 100%;
}

#charm section:nth-of-type(2):before {
	background:url(../img/charm/02.gif) no-repeat;
	background-size:auto 100%;
}

#charm section:nth-of-type(3):before {
	background:url(../img/charm/03.gif) no-repeat;
	background-size:auto 100%;
}

#charm section h3{
	text-align:center;
	margin:2em 0 20px;
	height:30px;
	vertical-align:middle;
}

#charm section .photo{
	height:auto;
	margin-top:1em;
	width:100%;
	vertical-align:bottom;
}