@charset "utf-8";

/*------------------------------------------------
  base
-------------------------------------------------*/
/* 790 */



/*------------------------------------------------
  mainslide
-------------------------------------------------*/

#mainslide{
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	height:384px;
	margin:0px;
	padding:92px 0 0 0;
	text-align:center;
	background:url(../../image/top/mainslide_bg.jpg) no-repeat 0 0;
	z-index:1;
	overflow:hidden;
	}
	#mainslide #title{
		position:relative;
		left:-200px;
		width:321px;
		margin:0 auto 0px;
		animation:fade 2s linear 0s forwards 1;
		opacity:0;
		z-index:10;
	}
	#mainslide #main_copy{
		position:absolute;
		top:150px;
		left:calc(50% + 50px);
		padding-left:1.75rem;
		font-weight:bold;
		font-size:1.6rem;
		text-indent:-1.75rem;
		color:#1C499E;
		text-align:left;
		line-height:1.75;
		animation:fade 2s linear 0s forwards 1;
		z-index:10;
	}
	#mainslide #main_copy:after{
		content:" ";
		position:absolute;
		top:-52px;
		left:220px;
		width:154px;
		height:181px;
		z-index:10;
		background:url(../../image/top/copy_circle.png) no-repeat top left;
}
/* opacity */
@keyframes fade{
	0%   {opacity:0;}
	100% {opacity:1;}
}
/* copy_circle */
@keyframes copy_circle{
	0%   {width:0px;height:0px;transform:rotate(45deg);}
	50%  {width:154px;height:90px;transform:rotate(15deg);}
	100% {width:154px;height:181px;transform:rotate(0deg);}
}

#mainslide #gray_line{
	position:absolute;
	top:0px;
	left:570px;
	width:calc(100% - 770px);/*570+200*/
	height:384px;
	background:#D0DCDB;
	z-index:1;
	}
	#mainslide #gray_line:before,
	#mainslide #gray_line:after{
		content:" ";
		position:absolute;
		top:0px;
	}
	#mainslide #gray_line:before{
		left:-384px;
		border:192px solid transparent;
		border-right:192px solid #D0DCDB;
		border-bottom:192px solid #D0DCDB;
	}
	#mainslide #gray_line:after{
		right:-384px;
		border:192px solid transparent;
		border-left:192px solid #D0DCDB;
		border-top:192px solid #D0DCDB;
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	#mainslide{
		height:250px;
		padding:0px;
		background:url(../../image/top/mainslide_bg.jpg) no-repeat 0 0;
		background-size:contain;
		}
		#mainslide #title{
			display:none;
		}
		#mainslide #main_copy{
			position:relative;
			top:0px;
			left:0px;
			width:100%;
			padding:90px 20px 0;
			font-size:1.3rem;
			text-indent:0rem;
			text-align:center;
		}
		#mainslide #main_copy:after{
			display:none;
	}
	#mainslide #gray_line{
		left:270px;
	}
}


/* ------------------------------------------------
  bg_dot
------------------------------------------------- */

#bg_dot{
	position:relative;
	width:100%;
	height:auto;
	background:url(../../image/base/bg.png) repeat 0 0;
}

/* ------------------------------------------------
   h2
------------------------------------------------- */

.contents h2{
	display:inline-block;
	position:relative;
	width:auto;
	height:91px;
	margin:0 auto 20px;
	padding:25px 0 0 40px;
	font-weight:bold;
	font-size:1.8rem;
	text-align:left;
	letter-spacing:12px;
	background:url(../../image/base/h2_bg.png) no-repeat 0 0;
	color:#1C499E;
	}
	.contents h2 span{
		display:block;
		position:relative;
		padding-top:2px;
		font-weight:bold;
		font-size:0.77rem;
		letter-spacing:0px;
		color:#555;
}

/*------------------------------------------------
  thankyou
-------------------------------------------------*/

#thankyou{
	position:relative;
	min-height:370px;/*330+40*/
	padding:38px 20px 40px;
	background:url(../../image/top/thankyou.png) no-repeat center top;
	}
	#thankyou *{
		color:#FFF;
}
#thankyou h2{
	position:relative;
	width:500px;
	margin:0 auto 22px;
	font-size:1.3rem;
	letter-spacing:5px;
	text-align:center;
	}
	#thankyou h2:before,
	#thankyou h2:after{
		content:" ";
		position:absolute;
		width:150px;
		height:1px;
		top:calc(50% + 1px);
		background:rgba(255,255,255,0.5);
		}
		#thankyou h2:before{
			left:0px;
		}
		#thankyou h2:after{
			right:0px;
}
#thankyou p{
	margin:0 0 20px;
	font-size:0.84rem;
	line-height:1.42rem;
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	#thankyou h2{
		left:50%;
		margin:0 0 22px -250px;
	}
}

/*------------------------------------------------
  howto
-------------------------------------------------*/

#howto{
	padding:45px 0 25px;
}
#howto .contents{
	text-align:left;
}
#howto h2{
	height:auto;
	margin:0 0 76px;
	padding:0px 0 0 29px;
	background:none;
	text-align:left;
	}
	#howto h2 span{
		padding-top:0px;
	}
	#howto h2 span:after{
		content:" ";
		display:block;
		position:absolute;
		top:50%;
		right:12px;
		width:88px;
		height:1px;
		border-bottom:1px solid #1C499E;
	}
	#howto h2 span.howto_blank{
		display:inline-block;
		position:relative;
		width:10px;
	}
	#howto h2 span.howto_blank:after{
		display:none;
	}

#howto ul{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	flex-wrap:wrap;
	width:100%;
	padding:0 10px 0px 30px;
	list-style:none;
}
#howto ul li{
	position:relative;
	width:242px;
	max-width:100%;
	height:290px;
	margin:0 0 10px 0px;
	}
	#howto ul li img{
		position:relative;
		margin:0 auto 7px;
	}
	#howto ul li:nth-child(2) img{
		left:-13px;
	}
	#howto ul li:nth-child(3) img{
		left:-13px;
	}
	#howto ul li p{
		position:relative;
		min-height:82px;
		padding:22px 0 0 81px;
		font-size:0.8rem;
		text-align:left;
		color:#1C499E;
		line-height:1.5;
	}
	#howto ul li b{
		display:-webkit-flex;
		display:flex;
		justify-content:center;
		align-items:center;
		position:absolute;
		top:0px;
		left:10px;
		width:82px;
		height:82px;
		padding:0px;
		font-size:0.77rem;
		color:#000;
		}
		#howto ul li b:after{
			content:" ";
			position:absolute;
			top:0px;
			left:0px;
			width:70px;
			height:82px;
			background:url(../../image/page/howto_circle.png) no-repeat 0 0;
}

#howto #howto_point{
	position:relative;
	margin:0 0 15px;
	}
	#howto #howto_point h3{
		margin:0px;
		font-weight:bold;
		color:#1C499E;
	}
	#howto #howto_point p{
		margin:0 0 15px;
		font-size:0.77rem;
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	#howto{
		padding:10px 0 25px;
	}
	#howto .contents{
		text-align:center;
	}
	#howto h2{
		padding:0px;
		margin:0 0 25px;
	}

	#howto ul{
		justify-content:center;
		padding:0 10px 0px 10px;
	}
	#howto #howto_point{
		padding:0 15px;
		text-align:left;
	}
}


/*------------------------------------------------
  categoy
-------------------------------------------------*/

#categoy{
	padding:30px 0 22px;
	}
	#categoy .contents:before,
	#categoy .contents:after{
		content:" ";
		position:absolute;
		top:0px;
		width:100%;
		height:100%;
		background:#FFF;
		}
		#categoy .contents:before{
			left:-15px;
			border:1px solid rgba(28,73,158,0.5);
			z-index:-1;
			transform:rotate(-7deg);
		}
		#categoy .contents:after{
			left:-8px;
			border:1px solid rgba(28,73,158,0.3);
			z-index:-2;
			transform:rotate(-3deg);
	}
	#categoy #cate_seat{
		margin:0 auto 45px;
		padding:30px 50px;
		border:1px solid rgba(28,73,158,1);
		background:#FFF;
		z-index:1;
}

#categoy ul{
	list-style:none;
    column-count:3;
		line-height:45px;
	}
	#categoy ul li{
		position:relative;
		list-style:none;
		width:216px;
		height:44px;
		margin:0 0 7px;
		text-align:left;
		line-height:45px;
		}
		#categoy ul li:before{
			content:" ";
			position:absolute;
			top:0px;
			left:60px;
			width:138px;
			height:42px;
			border:1px solid #283B42;
			transition-duration:0.5s;
			}
			#categoy ul li:hover:before{
				left:5px;
				width:204px;
		}
		#categoy ul li:after{
			content:" ";
			position:absolute;
			top:7px;
			left:0px;
			width:216px;
			height:30px;
			background:#D0DCDB;
	}
	#categoy ul li a{
		display:block;
		position:relative;
		width:100%;
		height:100%;
		padding-left:60px;
		font-size:0.77rem;
		text-decoration:none;
		color:#283B42;
		line-height:45px;
		}
		#categoy ul li a:before{
			content:" ";
			position:absolute;
			top:7px;
			left:0px;
			width:0px;/* 216px */
			height:30px;
			background:#A9BEBD;
			transition-duration:0.5s;
			}
			#categoy ul li:hover a:before{
				width:216px;
		}
		#categoy ul li a:after{
			content:" ";
			position:absolute;
			top:7px;
			left:10px;
			width:29px;
			height:29px;
	}
	#categoy ul li#cate_shopping a:after{
		background:url(../../image/icon/icon_shopping.png) no-repeat 0 center;
	}
	#categoy ul li#cate_finance a:after{
		background:url(../../image/icon/icon_finance.png) no-repeat 0 center;
	}
	#categoy ul li#cate_beauty a:after{
		background:url(../../image/icon/icon_beauty.png) no-repeat 0 center;
	}
	#categoy ul li#cate_recreation a:after{
		background:url(../../image/icon/icon_recreation.png) no-repeat 0 center;
	}
	#categoy ul li#cate_restaurant a:after{
		background:url(../../image/icon/icon_restaurant.png) no-repeat 0 center;
	}
	#categoy ul li#cate_school a:after{
		background:url(../../image/icon/icon_school.png) no-repeat 0 center;
	}
	#categoy ul li#cate_realestate a:after{
		background:url(../../image/icon/icon_realestate.png) no-repeat 0 center;
	}
	#categoy ul li#cate_welfare a:after{
		background:url(../../image/icon/icon_welfare.png) no-repeat 0 center;
	}
	#categoy ul li#cate_professional a:after{
		background:url(../../image/icon/icon_professional.png) no-repeat 0 center;
	}
	#categoy ul li#cate_other a:after{
		background:url(../../image/icon/icon_other.png) no-repeat 0 center;
	}
		#categoy ul li a span{
			display:block;
			position:relative;
			width:140px;
			height:100%;
			padding:-2px 0 5px;
			text-align:center;
			font-weight:bold;
			font-size:0.84rem;
			color:#283B42;
			line-height:45px;
		}
		#categoy ul li a span:after{
			content:" ";
			position:absolute;
			z-index:-1;
			top:7px;
			left:0px;
			width:1px;
			height:30px;
			background:#283B42;
			transition-duration:0.5s;
			}
			#categoy ul li:hover a span:after{
				left:-55px;
}


/* --- responsive --- */
@media only screen and (max-width:767px){
	#categoy{
		padding:30px 20px 22px;
		}
		#categoy #cate_seat{
			padding:30px 30px;
	}

	#categoy ul{
	    column-count:1;
		text-align:center;
		}
		#categoy ul li{
			margin:0 auto 7px;
	}
}

/*------------------------------------------------
  cate_box
-------------------------------------------------*/

#cate_box{
	position:relative;
	text-align:center;
	}
	#cate_box section{
		position:relative;
		padding:35px 0 10px;
	}
	#cate_box section ul{
		display:-webkit-flex;
		display:flex;
		-webkit-box-pack:justify;
		-ms-flex-pack:justify;
		justify-content:space-between;
		flex-wrap:wrap;
		position:relative;
		list-style:none;
	}
	#cate_box section ul li{
		position:relative;
		width:366px;
		max-width:100%;
		min-height:435px;
		padding:6px;
		z-index:0;
		}
		#cate_box section ul li:before,
		#cate_box section ul li:after{
			content:" ";
			position:absolute;
			z-index:-1;
			}
			#cate_box section ul li:before{
				bottom:0px;
				right:0px;
				border:30px solid transparent;
				border-right:30px solid #1C499E;
				border-bottom:30px solid #1C499E;
			}
			#cate_box section ul li:after{
				right:0px;
				bottom:0px;
				width:1px;
				height:1px;
				background:#1C499E;
				transition-duration:0.75s;
				}
				#cate_box section ul li:hover:after{
					width:100%;
					height:100%;
	}
	#cate_box section ul li .shop_contents{
		width:100%;
		height: 100%;
		padding:18px;
		background:#D0DCDB;
		z-index:0;
	}
	#cate_box section ul li .shop_title{
		display:-webkit-flex;
		display:flex;
		justify-content:flex-start;
		align-items:center;
		position:relative;
		width:calc(100% + 36px);
		height:90px;
		margin:-18px 0 18px -18px;
		padding:0 75px 0 18px;
		background:#1C499E;
		text-align:left;
	}
	#cate_box section ul li h3{
		position:relative;
		font-size:1.3rem;
		color:#FFF;
		}
		#cate_box section ul li h3 span{
			display:block;
			position:relative;
			font-size:0.87rem;
			color:#FFF;
}

/* shop_logo */
#cate_box section ul li .shop_logo{
	display:-webkit-flex;
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	width:100%;
	height:140px;
	text-align:center;
	margin:0 0 15px;
	}
	#cate_box section ul li .shop_logo img{
		max-height:140px;
		width:auto;
}

/* thanks_detail */
#cate_box section ul li .thanks_detail{
	position:relative;
	min-height: calc(100% - 245px);/* 90 + 140 + 15 */
	padding:15px;
	text-align:center;
	background:#FFF;
	}
	#cate_box section ul li .thanks_detail h4{
		position:relative;
		margin:0 0 10px;
		font-weight:bold;
		font-size:0.9rem;
		text-align:center;
		border-bottom:1px solid #000;
	}
	#cate_box section ul li .thanks_detail p{
		position:relative;
		font-size:0.77rem;
		text-align:left;
		line-height:1.5;
}

/* shop_url */
#cate_box section ul li .shop_url{
	position:absolute;
	top:30px;
	right:21px;
	width:50px;
	height:50px;
	background:url(../../image/base/hp.png) no-repeat center center;
	z-index:10;
	}
	#cate_box section ul li .shop_url a{
		display:block;
		width:100%;
		height:100%;
		text-indent:-9999px;
		border:1px solid transparent;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		transition-duration:0.5s;
	}
	#cate_box section ul li .shop_url a:hover{
		border:1px solid #FFF;
		background:rgba(255,255,255,0.1);
}

/* shop_detail */
#cate_box section ul li .shop_detail{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	text-indent:-9999px;
	z-index:9;
	transition-duration:0.5s;
	}
	#cate_box section ul li .shop_detail:hover{
		background:rgba(255,255,255,0.2);
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	#cate_box{
		position:relative;
		text-align:center;
		}
		#cate_box section{
			position:relative;
			padding:35px 15px;
		}
		#cate_box section ul{
			justify-content:center;
		}
}

/* look_more */
#cate_box section .look_more{
	position: relative;
	width:787px;
	max-width: 100%;
	margin:20px auto 0;
	padding-top: 7px;
	text-align: right;
	border-top: 1px solid rgba(28,73,158,0.3);
	}
	#cate_box section .look_more a{
		display: inline-block;
		position: relative;
		left:0px;
		height: 30px;
		padding: 3px 10px 3px 25px;
		font-size: 0.87rem;
		text-decoration: none;
		background: #1C499E;
		color: #FFF;
		transition-duration:0.5s;
	}
	#cate_box section .look_more a:before{
		content:" ";
		position:absolute;
		top:0px;
		right:-15px;
		border:15px solid transparent;
		border-left:15px solid #1C499E;
		transition-duration:0.5s;
		z-index: -1;
	}
	#cate_box section .look_more a:after{
		content:" ";
		position:absolute;
		top:50%;
		left:10px;
		margin-top:-6px;
		border: 6px solid transparent;
		border-left: 6px solid rgba(255,255,255,1);
		transition-duration:0.5s;
	}
	#cate_box section .look_more a:hover{
		left:-15px;
		padding: 3px 10px 3px 10px;
	}
	#cate_box section .look_more a:hover:before{
		right:-30px;
	}
	#cate_box section .look_more a:hover:after{
		left:100%;
}

/*------------------------------------------------
  
-------------------------------------------------*/