/* CSS Document */

article{
	padding:50px 0;
	}
	article header{
		margin-bottom:20px;
		}
	article h2{
		position:relative;
		padding:120px 0 0 0;
		font-size:21px;
		font-size:2.1rem;
		font-weight:normal;
		line-height:1.2em;
		text-align:center;
		}
	article h2 i{
		position:absolute;
		top:0;
		left:50%;
		width:100px;
		height:100px;
		margin-left:-50px;
		background:#fff;
		border:6px solid #000;
		border-radius:100%;
		box-sizing:border-box;
		overflow:hidden;
		}
	article p+p{
		margin:0;
		}
	article footer,
	article section+footer{
		clear:both;
		margin-top:0;
		padding-top:20px;
		text-align:center;
		}
		article footer div{
			padding-top:20px;
			}
		article footer h3{
			position:relative;
			padding:20px 0 0 0;
			font-size:21px;
			font-size:2.1rem;
			font-weight:normal;
			line-height:1.2em;
			text-align:center;
			}
	article aside{
		clear:both;
		padding-top:20px;
		text-align:center;
		}

#header{
	margin-bottom:0;
	}

#main{
	width:100%;
	padding-bottom:0;
	}
	#main > * {
		float:none;
		margin:0;
		width:100%;
		}

#mainImg{
	padding:20px 0;
	box-sizing:border-box;
	overflow:hidden;
	}
	#mainImg .wrap{
		position:relative;
		}
	#mainImg h1{
		display:inline-block;
		max-width:80%;
		margin-bottom:50px;
		}
	#mainImg p{
		display:none;
		}
	#mainImg i{
		position:absolute;
		right:0;
		bottom:0;
		}

#pageLink{
	display:table;
	table-layout:fixed;
	background:url(../images/readBg.png);
	}
	#pageLink a{
		display:table-cell;
		/*padding:10px;*/
		padding:10px 5px;
		background:#ccc;
		color:#fff;
		font-weight:bold;
		line-height:1em;
		vertical-align:middle;
		text-align:center;
		}
		#pageLink a:hover{
			text-decoration:none;
			}
		#pageLink a:nth-child(1){
			background:#05aff2;
			/*background:#f28705;*/
			}
			#pageLink a:nth-child(1):hover{
				background:#37bff5;
				/*background:#f59f37;*/
				}
			#pageLink a:nth-child(1) img{
				width:80%;
				margin:10%;
				}
		#pageLink a:nth-child(2){
			/*background:#05aff2;*/
			background:#f28705;
			}
			#pageLink a:nth-child(2):hover{
				/*background:#37bff5;*/
				background:#f59f37;
				}
			#pageLink a:nth-child(2) img{
				width:80%;
				margin:10%;
				}
		#pageLink a:nth-child(3){
			background:#f2637e;
			}
			#pageLink a:nth-child(3):hover{
				background:#f58298;
				}
	#pageLink i{
		display:block;
		width:60px;
		height:60px;
		margin:auto;
		padding-bottom:10px;
		}
		#pageLink i img{
			vertical-align:middle;
			}

#read{
	background:url(../images/readBg.png);
	overflow:hidden;
	}
	#read .wrap{
		position:relative;
		padding:60px 0;
		}
	#read p{
		line-height:180%;
		padding-right:35%;
		}
	#read i{
		position:absolute;
		width:30%;
		right:0;
		/*bottom:40px;*/
		bottom:0px;
		}
		#read i{
			max-width:253px;
			}
	#read .sns{
		color:#05aff2;
		}
	#read .campaign{
		color:#f28705;
		}

#sns{
	/*padding-top:0;*/
	border-top:1px solid #05aff2;
	}
	#sns header{
		position:relative;
		padding:50px 0 30px 0;
		}
		#sns header:before{
			content:"";
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			/*
			background:#cdeffc;
			opacity:.7;
			*/
			z-index:-1;
			}
		#sns header p{
			/*margin:30px 0;*/
			margin:0 0 300px 0;
			font-size:18px;
			font-size:1.8rem;
			font-weight:bold;
			line-height:1.4em;
			color:#fff;
			}
		#sns header figure{
			display:inline-block;
			width:28%;
			margin:0 1%;
			border:3px solid #fff;
			border-radius:5px;
			overflow:hidden;
			}
		#sns header .thumbBox{
			padding-top:70% !important;
			background-size:cover !important;
			}
		#sns header .backstretch{
			}
	#sns h2{
		color:#05aff2;
		margin-bottom:20px;
		}
		#sns h2 i{
			border-color:#05aff2;
			}
			#sns h2 i img{
				width:90%;
				margin:5%;
				}
	#sns section{
		position:relative;
		float:left;
		width:24%;
		margin:1.33% 0 0 1.33%;
		padding:0;
		}
		#sns section:nth-of-type(-n+4){
			margin-top:0px;
			}
		#sns section:nth-of-type(4n+1){
			margin-left:0;
			}
		#sns section h3{
			position:absolute;
			left:0;
			bottom:0;
			width:100%;
			background:rgba(0,0,0,0.5);
			color:#fff;
			font-size:90%;
			font-weight:normal;
			line-height:2em;
			text-align:center;
			z-index:1;
			}
	#sns footer{ }
		#sns footer h3{
			margin-bottom:20px;
			color:#05aff2;
			font-size:200%;
			}
		#sns footer dl{
			background:#fff;
			border:3px solid #05aff2;
			text-align:center;
			}
		#sns footer dt,
		#sns footer dd{
			}
		#sns footer dt{
			display:inline-block;
			width:7em;
			margin:15px auto 0 auto;
			border:2px solid #05aff2;
			border-radius:100px;
			color:#05aff2;
			font-weight:bold;
			line-height:30px;
			text-align:center;
			}
		#sns footer dd{
			padding:10px;
			background:#fff;
			border-bottom:1px dotted #05aff2;
			text-align:left;
			}
			#sns footer dd:last-child{
				border:none;
				}
		#sns footer ol{
			counter-reset: chapter;
			}
			#sns footer ol li{
				padding-left:1.5em;
				}
			#sns footer ol li:before{
				content:counter(chapter)".";
				counter-increment: chapter;
				float:left;
				margin-left:-1.5em;
				color:#05aff2;
				font-weight:bold;
				}
		#sns footer li{
			margin-top:0.5em;
			}
		#sns footer span{
			display:block;
			padding-left:1em;
			text-indent:-1em;
			color:#e85353;
			}
	#sns iframe,#sns blockquote,#sns p{
			text-align:center;
			margin-left:auto;
			margin-right:auto;
			}
	#sns .thumbBox{
		padding-top:100% !important;
		background-size:contain !important;
		background:#f2f2f2;
		}
	#sns .but{
		background:#05aff2;
		}

#campaign{ 
	border-top:1px solid #f28705;
	}
	#campaign h2{
		color:#f28705;
		}
		#campaign h2 i{
			border-color:#f28705;
			background:#f2f2f2;
			}
			#campaign h2 i img{
				width:70%;
				margin:15%;
				}
	#campaign section{ }
		#campaign section+section{
			margin-top:50px;
			}
		#campaign section:nth-of-type(even) h3 i{
			left:10px;
			right:auto;
			}
	#campaign h3{
		position:relative;
		margin:0 -15px 20px -15px;
		padding:0.5em;
		background:#b79367;
		color:#fff;
		font-size:18px;
		font-size:1.8rem;
		text-align:center;
		}
		#campaign h3 small{
			display:block;
			margin-left:0.5em;
			font-size:75%;
			font-weight:normal;
			}
	#campaign .spot{
		position:relative;
		border:1px solid #ccc;
		border-top:none;
		}
		#campaign .spot:before{
			content:'';
			position:absolute;
			top:0;
			left:50%;
			width:0;
			height:100%;
			border-left:1px solid #ccc;
			z-index:1;
			}
		#campaign .spot:after{
			content:'';
			display:block;
			clear:both;
			}
		#campaign .spot a{
			float:left;
			width:50%;
			padding:10px;
			color:inherit;
			vertical-align:top;
			box-sizing:border-box;
			}
			#campaign .spot a:nth-of-type(odd){
				position:relative;
				}
				#campaign .spot a:nth-of-type(odd):before{
					content:'';
					position:absolute;
					top:0;
					left:0;
					width:200%;
					height:0;
					border-top:1px solid #ccc;
					z-index:1;
					}
			#campaign .spot a:nth-of-type(n+3){
				}
			#campaign .spot a:nth-of-type(2n+1){
				clear:both;
				}
			#campaign .spot a:hover{
				text-decoration:none;
				}
		#campaign .spot figure{
			margin:-10px;
			padding-bottom:20px;
			}
		#campaign .spot h4{
			width:100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			-o-text-overflow: ellipsis; /* Opera9,10対応 */
			padding-left:1.2em;
			font-size:16px;
			font-size:1.6rem;
			line-height:1.2em;
			}
			#campaign .spot h4 i{
				float:left;
				margin-left:-1.2em;
				color:#f28705;
				line-height:1.4em;
				}
		#campaign .spot p{
			margin-top:0.5em;
			font-size:14px;
			font-size:1.4rem;
			line-height:1.2em;
			}
			#campaign .spot p+p{
				padding:10px 10px 10px 30px;
				background:#fcf5ea;
				}
			#campaign .spot p+p i{
				float:left;
				margin-left:-20px;
				color:#f2ce94;
				font-size:18px;
				}
	#campaign .but{
		background:#f28705;
		}

#passport{
	background:#fce0e5;
	}
	#passport h2{
		color:#f2637e;
		}
		#passport h2 i{
			border-color:#f2637e;
			}
			#passport h2 i img{
				width:80%;
				margin:10%;
				}
	#passport section{
		text-align:center;
		}
	#passport .but{
		background:#f2637e;
		}

#pr{
	background:#fafafa;
	}
	#pr h2{
		padding-top:0px;
		}
	#pr p{
		text-align:center;
		margin-bottom:10px;
		}	
	#pr img{
		width:auto;
		max-width:300px;
		}

.but{
	display:inline-block;
	padding:1em 2em;
	background:#ccc;
	border:none;
	border-radius:2px;
	color:#fff;
	line-height:1.2em;
	}
	.but:hover{
		text-decoration:none;
		color:#fff;
		opacity:.8;
		}

@media screen and (max-width: 740px) {
	#read .wrap{
		position:relative;
		padding:40px 0;
		}
	#read p{
		padding-right:0%;
		}
	#read i{
		display:none;
		}
}