@charset "utf-8";

/*================================================================================
 
	Service: Windows Tablet
	FileName: top.css
	LastUpdate: 2014/06/08

================================================================================*/

/*==================================================================
  ■HERO エリア
==================================================================*/

div#heroAreaTop{width:100%; celar:both; overflow:hidden; margin:0 0 10px 0;}
div#heroAreaTop div#heroTopInner{width:100%; margin:0 auto; clear:both;}
div#heroAreaTop div#heroTopInner img{width:100%; height:auto;}

div.pcHero{display:block;}
div.mobHero{display:none;}


		    /* add 2014/06/08 */ 
				div.topicArea div.topicBoxL{width:358px; float:left;}
				div.topicArea div.topicBoxL h2.topicTit{font-size:2.0rem !important; margin:0 !important;}
				div.topicArea div.topicBoxL div.topicSubBox{display:block; border-bottom:1px solid #CCC; padding:0px 0 10px 0 !important;}
				div.topicArea div.topicBoxL div.topicSubBox p.nextBtn{padding:5px 0 0 0;}	
				div.topicArea div.topicBoxR{width:330px; float:right;}
				div.topicArea div.topicBoxR img{vertical-align:top;}
				
				div.topicArea div.topicBoxL ul{display:none;}
				
				@media only screen and (max-width: 481px) {
				div.topicArea div.topicBoxL h2.topicTit{font-size:1.8rem !important; margin:0 !important;}
				div.topicArea div.topicBoxL{width:auto; float:none;}
				div.topicArea div.topicBoxL img{width:100%; height:auto;}
				div.topicArea div.topicBoxL div.topicSubBox{border-bottom:1px solid #CCC; padding:10px 0 !important;}
				div.topicArea div.topicBoxR{width:auto; float:none;}
				div.topicArea div.topicBoxR img{width:100%; height:auto;}
				div.topicArea div.topicBoxL div.topicSubBox{display:none;}
				div.topicArea div.topicBoxL ul{display:block; padding:10px 0 0 0;}
				div.topicArea div.topicBoxL ul li{display:block; margin:0 0 5px 0;}
				}



/*==================================================================
  ■INDEX エリア
==================================================================*/

article#contentsArea section.articleSection h2{color:#505050;}
article#contentsArea section.articleSection.indexSection{margin:0 0 25px 0;}
article#contentsArea section.articleSection.indexSection dl.charmList{width:230px; float:left; margin:0 0 10px 7px; background:#001E93;}
article#contentsArea section.articleSection.indexSection dl.charmList:first-child{margin:0;}
article#contentsArea section.articleSection.indexSection dl.charmList dt{}
article#contentsArea section.articleSection.indexSection dl.charmList dd{}
article#contentsArea section.articleSection.indexSection dl.charmList dd a{font-size:12px; font-size:1.2rem; color:#FFF; display:block; padding:2px 8px 3px 8px; color:#FFF !important; text-decoration:none;}
article#contentsArea section.articleSection.indexSection dl.charmList dd a span{font-size:20px; font-size:2.0rem; display:block;}
article#contentsArea section.articleSection.indexSection dl.charmList dd a span img{vertical-align:middle; padding:0 0 0 10px;}




				article#contentsArea section.articleSection div.topicArea{margin:0 0 20px 0; clear:both; overflow:hidden;}
				article#contentsArea section.articleSection div.topicArea div.topicBox{padding:0 0 25px 0; border-bottom:1px solid #A1A1A1; clear:btoh; overflow:hidden;}
				article#contentsArea section.articleSection div.topicArea div.topicBox div.topicBoxL{width:230px; float:left; margin:0 10px 0 0;}
				article#contentsArea section.articleSection div.topicArea div.topicBox div.topicBoxR{width:465px; float:left;}
				article#contentsArea section.articleSection div.topicArea div.topicBox div.topicBoxR h3{font-size:2.0rem; line-height:130%; color:#001E93; padding:0 0 10px 0;}
				article#contentsArea section.articleSection div.topicArea div.topicBox div.topicBoxR dl.compList{padding:20px 0;}
				article#contentsArea section.articleSection div.topicArea div.topicBox div.topicBoxR dl.compList dt{}
				article#contentsArea section.articleSection div.topicArea div.topicBox div.topicBoxR dl.compList dd{}
				article#contentsArea section.articleSection div.topicArea div.topicBox div.topicBoxR dl.compList dd span{font-size:1.5rem;}
				
				p.pcThumbs{display:block;}
				p.mobThumbs{display:none;}

				div.topicArea div.topicSubBox{width:352px; float:left; margin:15px 0 0 0px;}
				div.topicArea div.topicSubBox div.topicSubInnerL{width:80px; float:left; margin:0 10px 0 0;}
			 div.topicArea div.topicSubBox div.topicSubInnerR{width:250px; float:left;}	
				div.topicArea div.topicSubBox div.topicSubInnerR h3{font-size:1.4rem; line-height:130%; color:#001E93; padding:8px 0 0 0;}
				div.topicArea div.topicSubBox div.topicSubInnerR p.comingTxt{color:#FD0000; padding:5px 0 0 0;}
				.topicPCTxt{display:block;}
				.topicMBTxt{display:none;}
				.pb10{padding-bottom:10px !important;}


@media only screen and (min-width: 481px) and (max-width: 768px) { /* Begin Media Query */
article#contentsArea section.articleSection figure img{width:100% !important;}

article#contentsArea section.articleSection.indexSection dl.charmList{margin:0 0 10px 22px;}
}

@media only screen and (max-width: 481px) {
div.pcHero{display:none;}
div.mobHero{display:block;}

div#contentsWrap article#contentsArea section.articleSection.indexSection dl{clear:both:}

article#contentsArea section.articleSection.indexSection dl.charmList{width:100%; margin:0; background:#001E93; margin:0 0 10px 0;}
article#contentsArea section.articleSection.indexSection dl.charmList dt{width:30%; float:left;}
article#contentsArea section.articleSection.indexSection dl.charmList dt img{width:100%; vertical-align:top;}
article#contentsArea section.articleSection.indexSection dl.charmList dd{width:68%; float:left; padding:5px 0 0 0;}
article#contentsArea section.articleSection.indexSection dl.charmList dd a{font-size:10px; font-size:1.0rem;}



				p.pcThumbs{display:none;}
				p.mobThumbs{display:block;}
				.topicPCTxt{display:none;}
				.topicMBTxt{display:block;}
				article#contentsArea section.articleSection div.topicArea div.topicBox{border:none; padding:0;}
				article#contentsArea section.articleSection div.topicArea div.topicBox div.topicBoxL{width:28%; float:left; margin:0 10px 0 0;}
				article#contentsArea section.articleSection div.topicArea div.topicBox div.topicBoxR{width:56%; float:left;}
				article#contentsArea section.articleSection div.topicArea div.topicBox div.topicBoxR h3{font-size:1.5rem; line-height:130%; color:#001E93; padding:0 0 10px 0;}
				article#contentsArea section.articleSection div.topicArea div.topicBox div.topicBoxR p.topicTxt{clear:both;}
				
				div.topicArea div.topicSubBox{border-top:1px solid #A1A1A1;  padding:5px 0 0 0;}
				div.topicArea div.topicSubBox div.topicSubInnerR h3 span{display:block;}
				div.topicArea div.topicSubBox div.topicSubInnerR{width:60%; float:left;}	

}

/*==================================================================
  ■HERO Slider エリア
==================================================================*/

/**
 * BxSlider v4.0 - Fully loaded, responsive content slider
 * http://bxslider.com
 *
 * Written by: Steven Wanderski, 2012
 * http://stevenwanderski.com
 * (while drinking Belgian ales and listening to jazz)
 *
 * CEO and founder of bxCreative, LTD
 * http://bxcreative.com
 */

/** RESET AND LAYOUT
===================================*/

.bx-wrapper { position: relative; margin: 0 auto 30px; padding: 0;  *zoom: 1;}
.bx-wrapper img { width: 100%; display: block; }

/** THEME
===================================*/
/*
.bx-wrapper .bx-viewport {
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px #ccc;
	box-shadow: 0 0 5px #ccc;
	border: solid #fff 5px;
	left: -5px;
	background: #fff;
}*/

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto { position: absolute; bottom: -30px; width: 100%; }

/* LOADER */
.bx-wrapper .bx-loading { min-height: 50px; background: url(/japan/msbc/common/images/bx_loader.gif) center center no-repeat #fff; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000; }

/* PAGER */
.bx-wrapper .bx-pager { text-align: center; font-size: .85em; font-family: Arial; font-weight: bold; color: #666; padding-top: 20px; }
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block;  *zoom: 1;
 *display: inline;
}
.bx-wrapper .bx-pager.bx-default-pager a { background: #d2d2d2; text-indent: 9999px; display: block; width: 10px; height: 10px; margin: 0 5px; outline: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active { background: #9c9c9c; }

/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev { left: 10px; background: url(/japan/msbc/common/images/controls.png) no-repeat 0 -32px; }
.bx-wrapper .bx-next { right: 10px; background: url(/japan/msbc/common/images/controls.png) no-repeat -43px -32px; }
.bx-wrapper .bx-prev:hover { background-position: 0 0; }
.bx-wrapper .bx-next:hover { background-position: -43px 0; }
.bx-wrapper .bx-controls-direction a { position: absolute; top: 50%; margin-top: -16px; outline: 0; width: 32px; height: 32px; text-indent: -9999px; z-index: 9999; }
.bx-wrapper .bx-controls-direction a.disabled { display: none; }

/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto { text-align: right; }
.bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: 9999px; width: 10px; height: 11px; outline: 0; background: url(../../info/common/images/controls.png) -86px -11px no-repeat; margin: 0 3px; }
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active { background-position: -86px 0; }
.bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0; background: url(../../info/common/images/controls.png) -86px -44px no-repeat; margin: 0 3px; }
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active { background-position: -86px -33px; }

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align: center; width: 80%; }
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 0; width: 35px; }

/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption { position: absolute; bottom: 0; left: 0; background: #666\9; background: rgba(80, 80, 80, 0.75); width: 100%; }
.bx-wrapper .bx-caption span { color: #fff; font-family: Arial; display: block; font-size: .85em; padding: 10px; }

/* ADD STYLE */
.bx-wrapper .bx-has-pager .bx-pager {
/text-align:center; width: 100% !important; /*for IE6 - 7*/ }

/* ADD STYLE */
.bx-wrapper .bx-has-pager .bx-pager {width: 100% !important; padding:0 0 0 430px;}
.bxslider { position: relative; }
.bxslider li {text-align:center; width: 100%; height: auto; background: #FFF; display:block; margin:0 auto;}
.bxslider li img{}


@media only screen and (min-width: 481px) and (max-width: 768px) {
.bx-wrapper .bx-has-pager .bx-pager {width: 100% !important; padding:0 0 0 322px;}
}

@media only screen and (max-width: 481px) {
.bx-wrapper .bx-has-pager .bx-pager {width: 100% !important; padding:0 0 0 0; text-align:right;}
}