@charset "utf-8";

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

	CommonElements

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

#modal a:link { text-decoration:none; color: #000;}
#modal a:visited { text-decoration:none; color: #000;}
#modal a:active { text-decoration:none; color: #000;}
#modal a:hover { text-decoration:none; color: #000;}

#modal h1 {
	margin-bottom: 20px;
	padding: 10px 0;
	color: #000;
	font-size: 3.0em;
background-color:#ffffff;
	font-weight: bold;
}
#modal h2 {
	margin-bottom: 20px;
	padding: 10px 0;
	color: #000;
	font-size: 3.0em;
	font-weight: bold;
	background-color:#ffffff;
	text-align: left;
}
#modal h2 span{
	font-size: 0.5em;
}
#modal h3{font-size: 1.2em ;font-weight: bold;}
#modal p.copy{font-size: smaller;color:#999;}
#modal p.contents{font-size: 1.0em ;line-height: 1.8em;margin-top: 10px;padding-top:10px;border-top:1px solid #ccc; }



#modal{background: url("../img/overlay.png");}


#modal {
  position:fixed;
  z-index:9000;
  display:none;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

#viwerBox{
  position:fixed;
	/*position:absolute;*/
	width:100%;
  height:100%;
  z-index:9001;
  display: none;
	font-size: 100%;
	line-height: 140%;
	font-family: Arial,Helvetica,sans-serif;
	background: #000;
    font-family: 'メイリオ', Meiryo, Verdana, sans-serif;
	-ms-touch-action: manipulation;
}
#viwerBox.textL {	font-size: 13px;}
#viwerBox.textL h3{	font-size: 16px;}
#viwerBox.textM {	font-size: 11px;}
#viwerBox.textS {	font-size: 8px;;}
#viwerBox.textSS {	font-size: 6px;}
#viwerBox.textL  div.caption{	font-size: 15px;}
#viwerBox.textM   div.caption{	font-size: 11px;}
#viwerBox.textS   div.caption{	font-size: 10px;}
#viwerBox.textSS   div.caption{	font-size: 7px;}
#viwerBox.textS .lang_english  div.caption{	font-size: 10px;line-height: 1.2em;}
#viwerBox.textSS .lang_english div.caption{	font-size: 7px;line-height: 1.1em;}
#viwerBox.textL .copy{	font-size: 9px;}
#viwerBox.textM .copy{ 	font-size: 7px;}
#viwerBox.textS .copy{	font-size: 6px;}
#viwerBox.textSS .copy{	font-size: 5px;}
#viwerBox.textL #paging{	font-size: 22px;padding: 0;}
#viwerBox.textM #paging{	font-size: 15px;padding: 0;}
#viwerBox.textS #paging{	font-size: 12px;padding: 0;}
#viwerBox.textSS #paging{	font-size: 8px;padding: 0;}

#viwerBox.textSS  .contents {padding: 2px;}
#viwerBox.textSS   div h3{	line-height: 1.2em;}

#viwerBox.textS		.mobile div.caption{font-size: 10x;}			/* エクスペディアでの見え */
#viwerBox.textS 	.mobile .lang_english  div.caption{	font-size: 9px;}	/* エクスペディアでの見え */

#viwerBox.textSS.vertical 		.mobile .captionWrap{display: none;}					/* 最小サイズの縦はキャプション非表示 */
#viwerBox.textSS.vertical 		.mobile ul li div.photo{float: none;margin: 0 auto;}	/* 最小サイズの縦は写真中央 */
#viwerBox.textSS.horizontal 	.mobile .captionWrap{display: block;}					/* 最小サイズの横はキャプション表示 */
#viwerBox.textSS.horizontal 	.mobile ul li div.photo{float: left;margin: 0 auto;}	/* 最小サイズの横は写真左寄せ */
#viwerBox.textSS.horizontal 	.mobile div.caption{font-size: 7px;}
#viwerBox.textSS.horizontal 	.mobile .lang_english  div.caption{	line-height: 1.00em;}
#viwerBox.vertical 		.tablet .captionWrap{display: none;}					/* 最小サイズの縦はキャプション非表示 */
#viwerBox.vertical 		.tablet ul li div.photo{float: none;margin: 0 auto;}	/* 最小サイズの縦は写真中央 */
#viwerBox.horizontal 	.tablet .captionWrap{display: block;}					/* 最小サイズの横はキャプション表示 */
#viwerBox.horizontal 	.tablet ul li div.photo{float: left;margin: 0 auto;}	/* 最小サイズの横は写真左寄せ */


.vertical .mobile  p.contents{display: none;}


/* Customize your modal window here, you can add background image too */
#viwerBox #view {
  width:375px;
  height:203px;
}


#viewerBox{
}
#viewer{z-index:9999}

#modal #viewerContainer {
	position:relative;
	/*margin: 0 auto;
	width: 400px;*/
	text-align: center;
	overflow: hidden;
}

#indexDiv{display: none;}


p.contents i{font-style:italic;}



/* #slidePanel
--------------------------- */
#slidePanel {margin: 0 auto;position: absolute;}

/* #slideDiv
--------------------------- */
#slideDiv {
	margin: 0 auto;
	text-align: left;
	position: absolute;
	/*position: relative;*/
	top:0;
	z-index:1;
}
#slideDiv ul {
	top: 0;
	left: 0;
/*	height: 400px;*/
	position: absolute;
	overflow: hidden;
}
#slideDiv ul li {
	float: left;
	display: block;
	overflow: hidden;
}


.moveprev {
	top: 0;
/*	left: 0;*/
	position: absolute;
	cursor: pointer;
	text-align: center;
}
.moveprev img{width: 100%;}

.movenext {
	top: 0;
	right: 0;
	position: absolute;
	cursor: pointer;
	text-align: center;
}
.movenext img{width: 100%;}

/* thumbPanel
--------------------------- */
#thumbPanel{
	/*position:relatice;*/
	z-index: 100;
	/*text-align: center;*/
	margin:auto;
	display: none;
	margin: 0 auto;
}

/* #thumbDiv
--------------------------- */
#thumbDiv {
	/*
	margin: 10px auto;
	width: 400px;
	height: 100px;
	text-align: center;
	*/
}
#thumbDiv ul {
/*	width: 400px;
	height: 100px;
*/
}
#thumbDiv ul li {
	/*
	width: 100px;
	height: 100px;
	float: left;
	cursor: pointer;
	display: inline;
	*/
}
#thumbDiv ul li.active {
	filter:alpha(opacity=100)!important;
	-moz-opacity: 1!important;
	opacity: 1!important;
}






/* =======================================
	ClearFixElements
======================================= */
#slideDiv ul:after,
#thumbDiv ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

#slideDiv ul,
#thumbDiv ul {
/*	display: inline-block;*/
	overflow: hidden;
}

#btnClose{display: block;}
#btnClose img{width:100%;}
#btnIndex{display: block;}
#btnIndex img{width:100%;}
#thumbClose img{width:100%;}

#paging{text-align: center;font-size: 1.5em;margin-top: 20px;padding: 0;}
#thumbClose{display: block;	cursor: pointer;}



#slidePanel ul li div.photo{float:left;position:relative;background-image: url("../img/parts/loading.gif") ;background-position: center center;background-repeat: no-repeat;}
#slidePanel ul li div.photo img{display: none;}
#slidePanel ul li div.captionWrap{
	display: inline-block;
}


#slidePanel div.caption{padding: 0 2%;display: inline-block;line-height: 1.2em;vartical-align:middle;}

#slideDiv ul li.fullscreen div{display: table-cell;vertical-align: middle;}
/**+html div.caption{margin-top: 60%;}*/
*+html .fullscreen h2{margin-bottom:1%;font-size: 1.3em;}

#slidePanel ul li div.photo p.copy{
	color:#fff;
	position: absolute;bottom:10px;right:10px;
	/*font-weight:bold;*/
	text-shadow:
		2px 2px 5px #000,
		-2px 2px 5px #000,
		2px -2px 5px #000,
		-2px -2px 5px #000;
}


#flickmask ul li div {vertical-align:middle;text-align: center;overflow:hidden; }
#flickmask ul li div img{vertical-align:middle;}

#slidePanel div.caption {position: relative;}
#slidePanel div.caption div{width:95%;margin: 0 auto;}
#slidePanel div.caption p.contents{width: auto;}
#slidePanel em{display: none;}





#controll{float: right;background-color: #000000;height:100%;position: relative;display:none;}
#controll #switcher{ /*height:200px;*/bottom:0;position: absolute;cursor: pointer;}
#thumbControll{float: right;background-color: #000000;height:100%;position: absolute;top:0;right:0;}
#slidePanel  .controll{position: absolute;top:0;right:0;}
#slidePanel  .controll a{display: block;}



#slidePanel  p{text-align: left;padding: 5px;color:#ccc;}
#slidePanel  h3{text-align: left;padding: 5px 5px 0 5px;color:#ccc;}

#slidePanel  .captionWrap{background-color: #000000;}

#thumbPanel{position: absolute;width:100%;height:100%;background: #000000; }
#thumbPanel #thumbFrame{position: relative;}

#thumbPanel #thumbDiv {position: absolute;	top: 0;left: 0;overflow: hidden;}
#thumbPanel #thumbDiv ul{
/*	top: -15px;*/
	left: 0;
	position: absolute;
	overflow: hidden;
	}
#thumbPanel #thumbDiv ul li{display: block;float: left;overflow: hidden;}
#thumbPanel #thumbDiv table {display: block; float: left; padding: 0;margin: 0px;border-collapse:collapse;}
#thumbPanel #thumbDiv table tbody {margin: 0;padding: 0;}
#thumbPanel #thumbDiv table tr {margin: 0;padding: 0;}
#thumbPanel #thumbDiv table tr td{vertical-align: middle;text-align: center;overflow: hidden;margin: 0;padding: 0;table-layout: fixed;}
#thumbPanel #thumbDiv table tr td div{background-color: #242424;display: table-cell;vertical-align: middle;text-align: center;}
#thumbPanel #thumbDiv table tr td div.active{border:4px solid #41bfdb;overflow: hidden;}
#thumbPanel #thumbDiv table tr td div.active img{ margin: -4px;}
#thumbPanel #thumbDiv table tr td img{ vertical-align: middle;cursor: pointer;}

#slidePanel  .fullscreen img{width:100%;background-color: #ffffff;padding: 0px 0 0 0 ;}







#slidePanel  .gotoPhoto {bottom:50px;position: absolute;}
#slidePanel  .gotoPhoto img{width:100%;}

.hidden{display: none;}


#tmpl_footer_wrapper{z-index:1;}



/* =======================================
	Language Switch
======================================= */
#language {display:none;}
#language{position:absolute;bottom:50px;margin-bottom:0px;left:40px;}
#language ul {display:block;display: none; }
#language ul li{display:block;width:100px;height:40px; background-position: 0 top ;}
#language #languageBtn{background:transparent url(../img/parts/btn_language.png) no-repeat ;width:100px;height:40px; }
#language #lang_portgur{background-image: url(../img/parts/btn_language_p.png) ;}

#language #lang_english{background-image: url(../img/parts/btn_language_e.png) ;}
#language #lang_japanese{background-image: url(../img/parts/btn_language_j.png) ;}
#language #lang_portgur{background-image: url(../img/parts/btn_language_p.png) ;}

.lang_english #language #lang_english{background-position: 0 bottom ;}
.lang_japanese #language #lang_japanese{background-position: 0 bottom ;}
.lang_portgur #language #lang_portgur{background-position: 0 bottom ;}




/* =======================================
	Language  lang_japanese lang_english lang_local
======================================= */
.lang_japanese .en{display:none !important;}
.lang_japanese .loc{display:none !important;}
.lang_english .jp{display:none !important;}
.lang_english .loc{display:none !important;}
.lang_local .en{display:none !important;}
.lang_local .jp{display:none !important;}



#paging{text-align: center;font-size: 2.0em;margin-top: 20px;}