@charset "utf-8";

/* body{ */
	/* min-width: 320px; */
	/* -webkit-box-sizing: border-box; */
	/* -moz-box-sizing: border-box; */
	/* box-sizing: border-box; */
/* } */

#magazine{
	margin: 0 auto;
	padding: 0 20px 32px;
	width: 100%;
	max-width: 600px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

}

#magazine .wrapper{
	margin: 0 auto;
	/*margin-top: 85px;*/
	padding-bottom: 32px;
	width: 100%;
	border: #ccc solid;
	border-width: 0 0 2px;
}

#magazine p{
	color: #666;
}



#advArea{
	display: table;
	margin: 0 auto 36px;
	
}

#bookcover,
#advText
{
	display: table-cell;
	vertical-align: top;
}

#advText{
	position: relative;
	z-index: 11;
	font-size: 20px;
	line-height: 28px;
	font-weight: bold;
}

#bookcover{
	padding-right: 0.8%;
	width: 37%;
}

#advArea img{
	width: 100%;
}

#cach{
	position: absolute;
	bottom: 0;
	font-size: 25px;
	color: #e26a0e;
	font-weight: bold;
}

#baloon{
	display: table;
	position: absolute;
	bottom: 32px;
	width: 124px;
	height: 124px;
	border: #3faee2 solid 4px;
	-webkit-border-radius: 62px;
	-moz-border-radius: 62px;
	border-radius: 62px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

}

#baloon em{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	color: #3faee2;
}

#magazine h1{
	margin-bottom: 20px;
	color: #3faee2;
	font-size: 32px;
	line-height: 40px;
	font-weight: bold;
}

#magazine #impText{
	margin: 0 auto 28px;
	padding: 0;
	font-size: 16px;
	line-height: 20px;
	text-align: center;
	color: #e26a0e;
	font-weight: bold;
}

#magazine p.notice{
	margin-bottom: 20px;
	color: #454545;
	font-size: 14px;
}

#magazine h2{
	margin-top: 0;
	margin-bottom: 12px;
	padding-left: 6px;
	font-size: 20px;
	font-weight: bold;
	border-left: #3faee2 solid 4px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.imgBox img{
	margin-bottom: 20px;
	border: #ccc solid 1px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#introduction{
	margin-bottom: 36px;
}

#introduction p{
	margin-bottom: 24px;
	font-size: 16px;
	line-height: 28px;
}

.b640,
.b480{
	display: none;
}

/* BUTTON +++++++++++++ */

#slideDwn{
	position: relative;
	z-index: 11;
	padding: 10px 0;
	text-align: center;
	font-size: 16px;
	border: #999 solid 1px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

#slideDwn:hover{
	background: #ebf5fa;
}

#slideDwn i{
	position: absolute;
	right: 10px;
}

#magazine a.button{
	display: block;
	margin-bottom: 32px;
	width: 100%;height: 60px;
	text-align: center;
	color: #fff;
	font-size: 18px;
	line-height: 60px;
	text-decoration: none;
	font-weight: bold;
	background: #3faee2;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.1) ;
	-moz-box-shadow:  0 2px 2px rgba(0,0,0,0.1) ;
	box-shadow:  0 2px 2px rgba(0,0,0,0.1) ;
}

#magazine a.button.personal{
	line-height: 40px;
	vertical-align: bottom;
}

#magazine a.button em{
	display: block;
	margin-top: -8px;
	font-size: 14px;
	font-weight: normal;
	line-height: 18px;
}

/* INTRODUCE +++++++++++++++++++++ */

#introduceBox{
	padding-top: 20px;
	font-size: 14px;
	color: #666;
	line-height: 22px;
}

#introduceBox .dlwrapper{
	margin-bottom: 20px;
}

#introduceBox h3{
	margin: 0 0 16px;
	padding: 4px;
	font-size: 14px;
	color: #000;
	background: #e3f4fc;
}

#introduceBox .subject h3{
	background: #ffe2c9;
}

#introduceBox b{
	display: block;
	margin: 0 0 8px;
	padding-top: 4px;
	font-weight: normal;
	color: #0071bc;
	border-bottom: #29abe2 solid 1px;
}

#introduceBox .subject b{
	color: #cc551b;
	border-bottom: #ffbfbf solid 1px;
	
}

#introduceBox dl{
	display: table;
	margin-bottom: 4px;
	width: 100%;
}

#introduceBox dt,
#introduceBox dd
{
	display: table-cell;
	vertical-align: middle;
	background: url('/top-page/images/preLogin/dot.png') 0 8px repeat-x;
}

#introduceBox dt em{
	padding-right: 4px;
	background: #fff;
}

#introduceBox dd em
{
	padding-left: 4px;
	background: #fff;
}

#introduceBox dt{
	text-align: left;
	font-weight: normal;
}

#introduceBox dd{
	text-align: right;
}

#cboxContent{
	margin: 0 !important;
	
}
#cboxPrevious,
#cboxNext,
#cboxClose{
	top: unset;
	text-indent: unset;
	height: unset;
	color: #29abe2 !important;
}

#cboxTitle,
#cboxCurrent{
	position: unset;
	top: unset;
	right: unset;
	
}

@media only screen and (max-width: 767px) and (min-width: 641px){

}

@media only screen and (max-width: 640px){
		
	#magazine{
		margin: 0 auto 32px;
		padding: 0 8px;
		width: 100%;
		max-width: 600px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	#magazine figure{
		display: block;
	}

	#magazine figure iframe,
	#magazine figure span{
		display: block;
		margin: 0 auto;
	}

	#magazine figure span{
		width: 16px;
		height: 16px;
	}

	#magazine figure iframe{
	}

	#advArea{
		padding-bottom: 32px;
		
	}

	#advText{
		font-size: 16px;
		line-height: 22px;
	}
		
	#cach{
		position:absolute;
		bottom: -28px;
		right: 0;
		width: 158%;
		font-size: 20px;
		color: #e26a0e;
		font-weight: bold;
	}

	#baloon{
		display: table;
		position: absolute;
		bottom: 0px;
		width: 100px;
		height: 100px;
		border: #3faee2 solid 3px;
		-webkit-border-radius: 50px;
		-moz-border-radius: 50px;
		border-radius: 50px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;

	}

	#baloon em{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		color: #3faee2;
	}
	.b640{
		display: inline;
	}
}

@media only screen and (max-width: 600px) {
			
	#introduceBox dl dt,
	#introduceBox dl dd{
		font-size: 13px;
	}

}

@media only screen and (max-width: 480px){
	.b480{
		display: inline;
	}
	
	
	#advArea{
		padding-top: 72px;
		
	}
	
	#advText {
		position: relative;
		z-index: 11;
	}
	
	#advText span{
		position: absolute;
		top: -72px;
		right: 0;
		width: 158%;
	}
	
/*	
#baloon{
	display: table;
	position: absolute;
	bottom: 0px;
	width: 124px;
	height: 124px;
	border: #3faee2 solid 3px;
	-webkit-border-radius: 62px;
	-moz-border-radius: 62px;
	border-radius: 62px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

}

#baloon em{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	color: #3faee2;
}

#bookcover {
    padding-right: 1.2%;
    width: 44%;
}*/

	#circleWanted h1,
	#magazine h1{
		margin-bottom: 16px;
		font-size: 24px;
		line-height: 28px;
	}
	
	#magazine .wrapper a.button:last-child{
		margin-bottom: 0;
	}
	
		
	#introduceBox dl{
		position: relative;
		z-index: 11;
		margin-bottom: 12px;
		line-height: 16px;
		/* border-bottom: #ccc dotted 1px; */
		background: url('/top-page/images/preLogin/dotDl.png') left bottom repeat-x;
	}
	
		
	#introduceBox dl dt,
	#introduceBox dl dd
	{
		display:inline;
	}
	
	#introduceBox dl dt{
		padding-right: 72px;
		background: unset;
		/* float: left; */
	}
	
	#introduceBox dl dd{
		position: absolute;
		right: 0;
		bottom: 2px;
		/*float: right; 
		display: inline-block;
		width: 100%; */
	}
	
}