/* ▼▼ ここからメイン */

#titleArea{
	background: url(../img/main.jpg) no-repeat;
	background-size: cover;
	padding: 8% 0;
	overflow: hidden;
	width: 100%;
	height: 600px;
	position: relative;
	display: table;
	}
	#titleArea span.illust_l{
		display: block;
		height: 100%;
		position: absolute;
		left: 0%;
		top:0%;
		}
	#titleArea span.illust_r{
		display: block;
		height: 100%;
		position: absolute;
		right: 0%;
		top:0%;
		}
	#titleArea span img {height: 100%;}
	#titleArea h1{
		text-align: center;
		display: table-cell;
		vertical-align: middle;
		}
		#titleArea h1 img{
			width: 50%;
			}
			#titleArea h1 + p img{width: 50%;}
		#titleArea p{
			text-align: center;
			}
/* #disc */
#disc{
	overflow: hidden;
	text-align: center;
	margin: 50px 0;
	width: 100%;
	background: url(../img/bg_line_pc.png) no-repeat 50% 85%;
	height: 350px;
	}
#disc > p{
	text-align: center;
	}
dl{
	width: 600px;
	overflow: hidden;
	margin: 20px auto 0;
	}
dt{
	float: left;
	clear: both;
	margin: 20px 0 0;
	}
dd{
	overflow: hidden;
	font-size: 25px;
	font-weight: bold;
	padding: 5px 0 0 20px;
    margin: 20px 0 0;
	}
	dd span{background: linear-gradient(transparent 70%, #fffd3e 70%);}
	
section{
	padding: 50px 15px;
	overflow: hidden;
	}
#service_01{
	position: relative;
	background: #faf3f7;
	}
#service_02{
	position: relative;
	background: #faf9f1;
	}

.inner{
	width: 100%;
	overflow: hidden;
	max-width: 790px;
	margin: 0 auto;
	}
.inner > div{
	width: 45%;
	float: left;
	overflow: hidden;
	margin: 0 0 20px
	}
.inner > div:nth-child(even){margin-left: 10%;}
.inner > div > p:first-child{
	text-align: center;
	}
.bg_box{
	text-align: center;
 	position: relative;
    height:155px;
    vertical-align:middle;
	}
	#service_01 .bg_box{background: url(../img/sec_1.png) no-repeat;}
	#service_02 .bg_box{background: url(../img/sec_2.png) no-repeat;}
.catch{
	font-weight: bold;
	font-size: 22px;
	position: relative;
	margin: 50px 0 0 20px;
	padding: 8px 25px;
	background: #fff;
	border-radius: 30px;
	display: inline-block;
	}	
	.catch p:before{
		font-family: FontAwesome;
		content: "\f111";
		position: absolute;
		font-size: 15px;
		left: 90px;
		bottom: -30px;
		color: #fff;
		}
		.catch p:after{
			font-family: FontAwesome;
			content: "\f111";
			position: absolute;
			font-size: 30px;
			left: 60px;
			bottom: -25px;
			color: #fff;
			}
			.catch p {
				margin: 0; 
				padding: 0;
				text-align: center;
				}
				.catch br{display: none;}
h3{
	color: #da3068;
	font-size: 20px;
	margin: 0 0 10px;
	}
.btn a{
	margin: 10px 0 0;
	display: inline-block;
	background: #333;
	color: #fff;
	text-decoration: none;
	font-size: 18px;
	text-align: center;
	padding: 10px;
	width: 100%;
	}
	.btn a:after{
		content: "\f0da";
		font-family: "FontAwesome";
		position: absolute;
		padding-left: 0.5em;
		}
/* #service_02 */	
#service_02 .inner > div{
	float: none;
	margin: 0 auto 20px
	}
#service_02 h3 {color: #f78234;}
	
/* #shop_list */
h4{
	text-align: center;
	font-size: 30px;
	margin: 0 0 20px;
	}
#shop_list .container{
	max-width: 790px;
	width: 100%;
	}
#shop_list .container > p{
	font-size: 20px;
	font-weight: bold;
	margin: 0 0 10px;
	}
	#shop_list .container > p:before{
		content: "■";
		color: #e60012;
		margin-right: 5px;
		}
#shop_list ul{
	width: 100%;
	overflow: hidden;
	}
	#shop_list ul li{
		width: 47%;
		float: left;
		padding: 5px;
		margin: 0 0 40px;
		cursor: pointer;
		}
		#shop_list ul li:nth-child(even){margin-left: 4%;}
		#shop_list ul li .shop{
			box-shadow: 3px 3px #faccd0;
			width: 100%;
			position: relative;
			overflow: hidden;
			}
#shop_list ul li .shop > p{
	float: left;
	width: 47%;
	}
	#shop_list ul li .shop > p img{width: 100%;}
#shop_list ul li .shop div{
	overflow: hidden;
	}
	
#shop_list ul li .shop div .shop_logo{
	text-align: center;
	width: 100%;
	margin: 20px 0 0;
	}
#shop_list ul li .shop div p.name{
	vertical-align: bottom;
	position: absolute;
	bottom: 3px;
	font-size: 14px;
	padding-left: 10px;
	line-height: 1;
	}

/* ▼▼ フッター */
footer {
	width: 100%;
	padding: 20px 0;
	clear: both;
	overflow: hidden;
	}
#footer_inner {
	max-width: 960px;
	margin: 0 auto;
	overflow: hidden;
	}
	#footer_inner > p{
		text-align: center;
		}


/* ▼ ページ上部へ戻る */
.pagetop {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 2000;
	cursor: pointer;
	}
	
/* ▼ コピーライト */
#copyright {
	font-size: 12px;
	color: #8b8b8b;
	}
/* ▼▼▼ 768px〜1024px
=====================================*/
@media screen and (max-width: 1024px) {
#titleArea{
	height: 500px;
	}
#titleArea h1{margin: 0;}
.catch{margin-left: 0;}
.bg_box {
    margin-left: 5%;
    }
#service_01 .bg_box, #service_02 .bg_box{
	background-size: 15%;
    padding: 10px 0;
    background-position: left bottom;
    }
}						
					
/* ▼▼▼ 480px〜768px
=====================================*/
@media screen and (max-width: 768px) {	

/* #wrapper {width: 100%;padding-top: 51px;} */
/* タイトル */
#site_title {
	overflow: hidden;
	}
h1.title {
	padding: 20px 10px;
	margin-bottom: 30px;
	overflow: hidden;
	}	
.title02{
	text-align: center;
	margin: 0 0 20px;
	}
#titleArea{
	padding: 15px 0;
	margin: 0 0 20px;
	height: 200px;
	}
	#titleArea h1 img {
    width: 75%;
	}
/* ▼▼ ここからメイン */
#main,footer,#footer_inner {
	float: none;
	width: 100%;
	}
/* #disc */

#disc {
	background: url(../img/bg_line_sp.png) no-repeat 50% 90%;
	background-size: 90%;
	margin: 20px 0;
	height: 230px;
	}
#disc > p{
	margin: 0 auto 0;
	width: 40%;
	}
dl{
	margin: 10px 0;
	width: 100%;
	}
dt{
	float: none;
	margin: 0;
	width: 25%;
	text-align: center;
	margin: 0 auto 5px;
	}
dd{
	font-size: 16px;
	padding: 0;
    margin: 0;
    text-align: center;
    margin: 0 0 10px;
	}
section{
	padding: 30px 15px;
	}
.inner > div{
	width: 90%;
	float: none;
	margin: 0 auto 40px
	}
.inner > div:nth-child(even){margin: 0 auto 40px;}
.bg_box{
	text-align: center;
	margin-left: 0px;
	}
#service_01 .title02{margin-top: 20px;}
#service_01 .bg_box,
#service_02 .bg_box{
	background-size: 20%;
	padding: 25px 0;
    background-position: 50% 0%;}
.catch{
	font-size: 16px;
	margin: 50px 0 0 20px;
	padding: 8px 15px;
	margin-left: 0;
	}	
.catch p {
	margin: 0; 
	padding: 0;
	text-align: center;
	}
	.catch p br{display: block;}

h3{
	margin: 0 0 5px;
	font-size: 19px;
	}
/* #service_02 */	
#service_02 .inner > div{
	float: none;
	margin: 0 auto 20px
	}
/* #shop_list */
h4{
	font-size: 20px;
	}
h4 img{width: 20%;}
#shop_list > p{
	font-size: 16px;
	}
	#shop_list > p:before{
		margin-right: 5px;
		}
#shop_list ul{
	width: 100%;
	overflow: hidden;
	margin: 0 0 20px;
	}
	#shop_list ul li{
		width: 99%;
		margin: 0 0 20px;
		}
		#shop_list ul li:nth-child(even){margin-left: 0;}
#shop_list ul li div .shop_logo{
	margin: 10px 0 0;
	}
#shop_list ul li div p.name{
	vertical-align: bottom;
	position: absolute;
	bottom: 3px;
	font-size: 12px;
	line-height: 1;
	}
/* ▼▼ フッター */
footer {padding: 0 20px;}

/* ▼ ページ上部へ戻る */
.pagetop {
	bottom: 20px;
	right: 20px;
	z-index: 2000;
	cursor: pointer;
	}
	.pagetop img{width: 50px;}
		
}