@charset "UTF-8";

/* topWrapper
================================================== */
.topWrapper {
	background: url(/professional/magazine/B/images/B_00_B_topBg.jpg) no-repeat;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: contain;
	width: 100%;
	height: 100%;
	backface-visibility:hidden;
}
@media screen and (max-width: 639px) {
	.topWrapper {
		background: url(/professional/magazine/B/images/B_00_B_topBg.jpg) no-repeat;
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 160% auto;
		width: 100%;
		height: 100%;
		backface-visibility:hidden;
	}
}

/* topArea
================================================== */
.topWrapper {
	padding-top: 80px;
}
#topArea {
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 40px 0;
}
@media screen and (max-width: 639px) {
	#topArea {
		padding: 0 0 0;
	}
}
.topBox {
	float: left;
	width: 46%;
	padding: 2% 2% 1%;
	margin: 0;
}
@media screen and (max-width: 639px) {
	.topBox {
		float: none;
		width: 80%;
		padding: 2% 10%;
		margin: 0;
	}
}
.topBox img{
	width: 100%;
}
.topBox img:hover{
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
}
.topBox .over {
	height: auto;
}
#mainLogo {
	background: url(../images/B_00_B_04_mainLogoBg_new2.png) no-repeat;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: contain;
	backface-visibility:hidden;
}

/* articleArea
================================================== */
#articleArea {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 40px 40px;
}
#articleArea h2 {
	float: left;
	width: 31%;
	padding: 1%;
	margin: 0;
}
@media (max-width: 639px) {
	#articleArea h2 {
		float: none;
		width: 94%;
		padding: 3%;
		margin: 0;
	}
}
#articleArea img{
	width: 100%;
}
#articleArea img{
	height: auto;
    -moz-transition: -moz-transform 0.3s linear;
    -webkit-transition: -webkit-transform 0.3s linear;
    -o-transition: -o-transform 0.3s linear;
    -ms-transition: -ms-transform 0.3s linear;
    transition: transform 0.3s linear;
}
#articleArea img:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
	transition: .3s;
}
@media (max-width: 639px) {
	#articleArea img{
		height: auto;
		-moz-transition: none;
		-webkit-transition: none;
		-o-transition: none;
		-ms-transition: none;
		transition: 0;
	}
	#articleArea img:hover {
		-webkit-transform: none;
		-moz-transform: none;
		-o-transform: none;
		-ms-transform: none;
		transform: none;
		transition: 0;
	}
}

/* load(回転)
================================================== */
.mainload {
	width: auto;
	height: auto;
    -webkit-animation: spin 30s linear infinite;
    -moz-animation: spin 30s linear infinite;
    -ms-animation: spin 30s linear infinite;
    -o-animation: spin 30s linear infinite;
    animation: spin 30s linear infinite;
}

/* popup
================================================== */
.lock {
    overflow:hidden;
}
.modal-content {
    position:relative;
    display:none;
	cursor: default;
	max-width: 800px;
	left: 0!important;
	margin: 5% auto;
}
.modal-content p{
	color: #fff;
}
.modal-overlay {
    z-index:1500;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:120%;
}
.modal-wrap {
    z-index: 12500;
    display: none;
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:auto;
	cursor: pointer;
}
.modal-open {
    color:#00f;
    text-decoration:underline;
}
.modal-open:hover {
    cursor:pointer;
    color:#f00;
}
@media (max-width: 960px) {
	.modal-content {
		left: 0!important;
		width: 86%;
	}
}
/* modalBox
================================================== */
.modalBox {
	border: solid 1px #666;
	padding: 20px 5% 2%;
    background-color:rgba(0,0,0,0.90);
	border-radius: 3px; 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.modal-content p.modalTxt {
	font-size: 110%;
	line-height: 200%;
	padding-top: 4%;
	text-align: center;
}
@media (max-width: 800px) {
	.modal-content p.modalTxt {
		font-size: 90%;
		text-align: left;
	}
}
.modal-close {
	width: 60px;
	margin: 0 auto;
	cursor: pointer;
	padding-top: 4%;
}
.modal-close img {
	width: 100%;
}
@media (max-width: 800px) {
	.modal-close {
		width: 40px;
	}
}
.modalMark {
	width: 100px;
	margin: 0 auto;
}
.modalMark img{
	width: 100%;
}
@media (max-width: 639px) {
	.modalMark {
		width: 18%;
	}
}