@charset "utf-8";

/*

緑　#75BA29 rgba(117,186,41,0.5)
濃　#004B2D rgba(0,75,45,0.5)

*/

/* ------------------------------------------------
   base
-------------------------------------------------*/

#main_contents{
	position:relative;
	min-height:170px;
	padding-top:40px;
	background:url(../../image/page/single_bg.png) repeat-x center -20px;
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	#wrapper{
		padding-top:0px;
	}
}

/* ------------------------------------------------
  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;
}


/*------------------------------------------------
  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 0 30px;
	list-style:none;
}
#howto ul li{
	position:relative;
	width:242px;
	max-width:100%;
	height:290px;
	margin:0 0 10px 0px;
	background:url(../../image/page/howto_bg.png) no-repeat 0 0;
	}
	#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;
	}
}

/*------------------------------------------------
  ticket_detail
-------------------------------------------------*/

#ticket_detail{
	padding-bottom:60px;
}
#ticket_detail .contents{
	padding:6px;
	}
	#ticket_detail .contents:before,
	#ticket_detail .contents:after{
		content:" ";
		position:absolute;
		z-index:-1;
		}
		#ticket_detail .contents:before{
			bottom:0px;
			right:0px;
			border:30px solid transparent;
			border-right:30px solid #1C499E;
			border-bottom:30px solid #1C499E;
	}
	#ticket_detail .shop_contents{
		width:100%;
		padding:18px;
		background:#D0DCDB;
		z-index:0;
	}
	#ticket_detail .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;
	}
	#ticket_detail h3{
		position:relative;
		font-size:1.3rem;
		color:#FFF;
		}
		#ticket_detail h3 span{
			display:block;
			position:relative;
			font-size:0.87rem;
			color:#FFF;
}

/* thanks_ticket */
#ticket_detail .thanks_ticket{
	position:relative;
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	flex-wrap:wrap;
}
/* shop_logo */
#ticket_detail .shop_photo{
	display:-webkit-flex;
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	width:375px;
	max-width:100%;
}

/* thanks_detail */
#ticket_detail .thanks_detail{
	position:relative;
	width:320px;
	max-width:100%;
	padding:50px 15px 15px;
	text-align:center;
	background:#FFF;
	}
	#ticket_detail .thanks_detail h4{
		position:relative;
		margin:0 0 15px;
		padding:0 0 10px;
		font-weight:bold;
		font-size:0.9rem;
		text-align:center;
		border-bottom:1px solid #000;
	}
	#ticket_detail .thanks_detail p{
		position:relative;
		margin:0 0 15px;
		padding:0 10px;
		font-size:0.77rem;
		text-align:left;
		line-height:1.75;
	}
	#ticket_detail .thanks_detail p.ticket_end{
		position:relative;
		margin:0px;
		font-weight:bold;
		text-align:right;
}

/* shop_url */
#ticket_detail .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;
	}
	#ticket_detail .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;
	}
	#ticket_detail .shop_url a:hover{
		border:1px solid #FFF;
		background:rgba(255,255,255,0.1);
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	#ticket_detail{
		padding:0 15px 60px;
	}
	/* shop_logo */
	#ticket_detail .shop_photo{
		margin:0 0 15px;
	}
	/* thanks_detail */
	#ticket_detail .thanks_detail{
		width:100%;
		padding:30px 15px 15px;
	}
}

/*------------------------------------------------
  message
-------------------------------------------------*/

#message{
	padding:54px 20px 90px;
	}
	#message:before,
	#message:after{
		content:" ";
		position:absolute;
		left:0px;
		width:100%;
	}
	#message:before{
		top:0px;
		height:calc(100% - 190px);
		background:#D0DCDB;
	}
	#message:after{
		bottom:0px;
		height:190px;
		background:url(../../image/page/message_bg.png) repeat-x center 0;
}

#message h2{
	position:relative;
	width:auto;
	height:auto;
	margin:0 auto 22px;
	padding:0px;
	font-weight:bold;
	font-size:1.8rem;
	text-align:left;
	letter-spacing:12px;
	text-align:center;
	background:none;
	}
	#message h2:before,
	#message h2:after{
		content:" ";
		position:absolute;
		width:40px;
		height:1px;
		top:calc(50% - 6px);
		background:#1C499E;
		}
		#message h2:before{
			left:-70px;
			transform:rotate(45deg);
		}
		#message h2:after{
			right:-70px;
			transform:rotate(-45deg);
	}
	#message span{
		display:block;
		position:relative;
		padding-top:2px;
		font-weight:bold;
		font-size:0.77rem;
		letter-spacing:0px;
		color:#1C499E;
	}
	#message p{
		font-size:0.84rem;
		line-height:2.2;
}

/* --- responsive --- */
@media only screen and (max-width:767px){
}


/* ------------------------------------------------
   co_detail
------------------------------------------------- */

#co_detail{
	padding:80px 0 80px;
	text-align:left;
	}
	#co_detail:before,
	#co_detail:after{
		content:" ";
		position:absolute;
	}
	#co_detail:before{
		top:80px;
		width:100%;
		height:450px;
		background:url(../../image/base/bg.png) repeat 0 0;
	}
	#co_detail:after{
		top:80px;
		left:0px;
		width:calc(50% - 534px);/* 350 +180 */
		height:450px;
		background:#FFF;
}
#co_detail .contents{
	width:710px;
	}
	#co_detail .contents:after{
		content:" ";
		position:absolute;
		top:0px;
		left:-180px;
		border:225px solid transparent;
		border-top:225px solid #FFF;
		border-left:225px solid #FFF;
}
#co_detail h2{
	height:auto;
	margin:0 0 40px;
	padding:0px;
	background:none;
	text-align:left;
	}
	#co_detail h2 span{
		padding-top:0px;
	}
	#co_detail h2 span:after{
		content:" ";
		display:block;
		position:absolute;
		top:50%;
		right:12px;
		width:145px;
		height:1px;
		border-bottom:1px solid #1C499E;
	}
	#co_detail h2 span.howto_blank{
		display:inline-block;
		position:relative;
		width:10px;
	}
	#co_detail h2 span.howto_blank:after{
		display:none;
}

/* co_info */
#co_info{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	flex-wrap:wrap;
	width:100%;
	margin:0 auto 45px;
	}
	#co_info .shop_logo{
		display:-webkit-flex;
		display:flex;
		justify-content:center;
		align-items:center;
		width:346px;
		max-width:100%;
		height:272px;
		padding:15px;
		border:1px solid rgba(28,73,158,0.5);
		background:#FFF;
	}
	#co_info .shop_us{
		width:320px;
		max-width:100%;
		font-size:0.84rem;
	}
	#co_info .shop_us p{
		font-size:0.84rem;
		line-height:2;
}

/* co_data */
#co_data{
	width:700px;
	max-width: 100%;
	margin:0 auto;
	}
	#co_data ul{
		list-style:none;
	}
	#co_data ul li{
		margin:0 0 3px;
		font-size:0.84rem;
	}
	#co_data ul li span{
		display:inline-block;
		margin:0 10px 0 0;
		padding:1px 7px;
		font-size:0.84rem;
		background:rgba(28,73,158,1);
		color:#FFF;
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	#co_detail{
		padding:50px 20px 50px;
		}
		#co_info .shop_logo{
			margin:0 0 15px;
	}
	#co_info .shop_us{
		width:100%;
		max-width:100%;
		font-size:0.84rem;
	}
}

/* ------------------------------------------------
   pagetopback
------------------------------------------------- */

#pagetopback{
	display:inline-block;
	position:absolute;
	top:80px;
	left:50%;
	width:395px;/*868*/
	text-align:right;
	z-index:250;
	}
	#pagetopback a{
		display:inline-block;
		position:relative;
		margin:0 auto;
		font-weight:bold;
		font-size:0.77rem;
		text-decoration:none;
		color:rgba(28,73,158,1);
	}
	#pagetopback a:before{
		content:" ";
		position:relative;
		display:inline-block;
		top:1px;
		left:-6px;
		width:0px;
		height:0px;
		border: 6px solid transparent;
		border-right: 6px solid rgba(28,73,158,1);
	}
	#pagetopback a:hover{
		text-decoration:underline;
}

/* ------------------------------------------------
   end_btn
------------------------------------------------- */

#end_btn{
	position:relative;
	padding:20px 10px;
	width:787px;
	max-width:100%;
	margin:0 auto;
	text-align:center;
	border-top:1px dotted rgba(28,73,158,1);
	}
	#end_btn a{
		display:inline-block;
		position:relative;
		margin:0 auto;
		padding:7px 25px;
		text-decoration:none;
		background:rgba(28,73,158,1);
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		color:#FFF;
	}
	#end_btn a:before{
		content:" ";
		position:relative;
		display:inline-block;
		top:0px;
		left:-6px;
		width:0px;
		height:0px;
		border: 6px solid transparent;
		border-right: 6px solid rgba(255,255,255,1);
	}
	#end_btn a:hover{
		opacity:0.8;
}

















