/* ===========================
--- Intro
============================ */
.intro {
	width:100%;
	background: url("../img/bg1.png") no-repeat top center;
	position:relative;	
	background-size: cover;
}
.intro .slogan,.intro .page-scroll{
	text-align: center;
	position: relative;
	right: -20%;
}
.intro .slogan p{
	font-size: 2.5em;
	margin-top: -50px;
}

/* ===========================
--- answer/activity
============================ */

.comment2{
	position: relative;
	padding: 20px 10px 10px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	background-color: #e5f7ff;
	font-size: 0.9em;
}

/* ===========================
--- answer/activity
============================ */

.comment3{
	position: relative;
	padding: 20px 10px 10px 10px;
	background-color: #ffffff;
	font-size: 0.9em;
}

/* ===========================
--- backnumber
============================ */

#backnumber .vol1, #backnumber .vol2,#backnumber .vol3,
#backnumber .vol4,#backnumber .vol5,#backnumber .vol6,#backnumber .vol7{
	width:96%;
	position:relative;	
	margin: 0 auto;
}
#backnumber .vol1 {
	background: url(../img/backnumber1.png) no-repeat top center;
	background-size: cover;
}
#backnumber .vol2 {
	background: url(../img/backnumber2.png) no-repeat top center;
	background-size: cover;
}
#backnumber .vol3 {
	background: url(../img/backnumber3.png) no-repeat top center;
	background-size: cover;
}
#backnumber .vol4 {
	background: url(../img/backnumber4.png) no-repeat bottom center;
	background-size: cover;
}
#backnumber .vol5 {
	background: url(../img/backnumber5.png) no-repeat bottom center;
	background-size: cover;
}
#backnumber .vol6 {
	background: url(../img/backnumber6.png) no-repeat bottom center;
	background-size: cover;
}
#backnumber .vol7 {
	background: url(../img/backnumber7.png) no-repeat bottom center;
	background-size: cover;
}
#backnumber .intro .slogan{
	text-align: center;
	position: relative;
	right: 25%;
}
#backnumber .intro .slogan p {
	font-size: 1.3em;
	padding-top: 10px;
	margin-top: 0px;
	margin-left: -15%;
}
#backnumber .intro:hover {opacity: 0.7;}

/* Media queries */
@media (max-width:1024px) {
	.intro .slogan p{
		font-size: 1.8em;
        margin-left: 100px;
	}
}
@media (max-width:901px) {
#backnumber .vol1 .slogan p,
	#backnumber .vol2 .slogan p,
	#backnumber .vol3 .slogan p,
	#backnumber .vol4 .slogan p,
	#backnumber .vol5 .slogan p,
	#backnumber .vol6 .slogan p,
    #backnumber .vol7 .slogan p{
		font-size: 1.1em;
		margin-top: 0px;
		background-color: rgba(255,255,255,0);
	}
}
@media (max-width:768px) {
	.intro .slogan p{
        margin-top: -50px;
        margin-left: 0px;
    }
	
	.intro .slogan img{width: 40px;}
	
	#separator p{font-size: .9em;}
	
	.link iframe,.link img{max-width: 360px;}
}

@media (max-width:650px) {
	.intro .slogan,	.intro .page-scroll{
		text-align: center;
		position: relative;
		left: 0%;
	}
	.intro .slogan p{
		font-size: 1.3em;
		font-weight: 700;
		color: #444;
		background-color: rgba(255,255,255,0.7);
		margin-top: 50px;
	}
	#backnumber .intro .slogan p{
		font-weight: 100;
		color: #444;
		margin-left: -35%;
	}
}

@media (max-width:480px) {
	.intro {
		background: url(../img/bg1_sp.png) no-repeat top center;
		background-size: cover;
	}
	#intro.intro {padding:25% 0px 10% 0px;}

	.section-heading h2 {font-size: 30px;}
	
	#backnumber .intro .slogan p{
		font-size: 0.9em;
		margin-top: 0px;
	}
}

/*iphone5*/
@media (max-width:320px) {
	.section-heading h2 {font-size: 25px;}
}