@charset "utf-8";
/* --------------------------------------------------------------
**- @ class
---------------------------------------------------------------*/
.delete    {text-decoration:line-through; }
.red       {color:#981C41; }
.blue      {color:#068DD7;}
.grey      {color:#999;}
.caps      {padding-left:1em;}
	.caps span {position:relative;margin-left:-1em;}
/*- layout -*/
.lefty     {float:left;}
.righty    {float:right;}
.floatClear{clear:both;}
.txtright  {text-align:right;}
.txtcenter {text-align:center;}
/*- margin -*/
.mrgTop1em {margin-top:1em;}
.mrgTop5   {margin-top:5px;}
.mrgTop10  {margin-top:10px;}
.mrgBtm1em {margin-bottom:1em;}
.mrgBtm40  {margin-bottom:40px;}
.mrgBtm20  {margin-bottom:20px;}
.mrgLeft10 {margin-left:10px;}
.pdTop1em  {padding-top:1em;}
.pdBtm1em  {padding-bottom:1em;}
/*- this contents class -*/
.inner {
	display:block;
	margin:0 auto;
	width:100%;
	max-width:960px;
	text-align:left;
}
/* --------------------------------------------------------------
**- @ font
---------------------------------------------------------------*/
body {
    font-size:13px;
    *font-size:small;
    *font:x-small;
	text-decoration:none;
	line-height:1.5;
	color: #333;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','verdana','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	}
h1, h2, h3, h4, h5 { font-size:108%;/*14px*/ }
table {
	font-size:inherit;
    font:100%;
	}
a { color:#333; }
	a:link { text-decoration:none; color:#000; }
	a:visited { text-decoration:none; color:#000; }
	a:hover { text-decoration:none; color:#981C41; }
	a:focus { overflow:hidden; }
/* --------------------------------------------------------------
**- @ body
---------------------------------------------------------------*/
html { height:100%; overflow:hidden; }
body {
	height:100%;
	position:relative;
	text-align:center;
	background:url(../img/bg_contents.png);
	overflow:hidden;
	}
/* --------------------------------------------------------------
**- @ header
---------------------------------------------------------------*/
header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	padding: 10px 0;
	width: 100%;
	height: 44px;
	background-color: #FFF;
	border-bottom: 1px #CECECE solid;
}
header h1 {
	padding-left: 16px;
}
/* --------------------------------------------------------------
**- @ contents
---------------------------------------------------------------*/
#contents {
	position:absolute;
	top:60px; left:0;
	z-index:0;
	width:100%; height:100%;
}
#pages {
	position: relative;
	width: 100%; height: 100%;
}
.page {
  position:absolute;
  top:50%; left:50%;
  margin-top:-421px;
  width:1190px;/* 595*2 */  height:842px;
  text-align:right;
 /*  overflow: hidden; */
}
#currentPage { margin-left:-595px;}
#nextPage { margin-left:645px; /* 595 + margin(50) */ }
#stanby_nextPage { margin-left:1885px; /* 1190 + 595 + margin*2 */ }
#prevPage { margin-left:-1835px; /* 1190 + 595 + margin */ }
#stanby_prevPage { margin-left:3075px; /* 1190*2 + 595 + margin*2 */ }

.page .item {
	position:relative;
	z-index:1;
	width:100%; height:100%;
	overflow:visible;
	text-align:right;
}
.page img {
  width:100%; height:100%;
  box-shadow:1px 2px 4px rgba(0,0,0,.6);
}
/*.page .page1 {
	float:left;
	width:auto !important; height:100%;
}*/

.page .item .page1 {
  width: auto;
  margin: 0 auto;
}

#currentPage .item{
  text-align: center;
}

#landscape .page img { width: 50%;}
#portrait .page .page1 { float: none; text-align: center;}
#landscape .page .page1 {  width: auto;}

/*#portrait .page img { width: 100%;}*/
.isIE8 .page img {
	filter:
		progid:DXImageTransform.Microsoft.Shadow(color=#cdcdcd,direction=0,strength=2)
		progid:DXImageTransform.Microsoft.Shadow(color=#cdcdcd,direction=90,strength=4)
		progid:DXImageTransform.Microsoft.Shadow(color=#cdcdcd,direction=180,strength=4)
		progid:DXImageTransform.Microsoft.Shadow(color=#cdcdcd,direction=270,strength=2);

}

@media only screen and (min-width: 569px){
  .page img {
  	width:50%;
  }
}
#zoomArea {
	position:absolute;
	top:10000px; left:50%;
	z-index: 100;
	width:2000px; height:100%;
}
	#zoomArea #dragable {
		overflow:hidden;
	}
	#zoomArea .lefty{
    width: 100%;
	}
	#zoomArea .righty{
	}
  #zoomArea .lefty img, #zoomArea .righty img{
    width: auto;
    max-width: 100%;
  }
  @media only screen and (min-width: 569px){
    #zoomArea .lefty{
      float:left;
      width: 50%;
      max-width:1000px;
    }
    #zoomArea .righty{
      float:right;
      width: 50%;
      max-width:1000px;
    }
  }

#dragHelper {
	display: none;
	position: absolute;
	top: 50%; left: 50%;
	z-index: 10;
	width: 100%; height: 100%;
}

.page .btn {
	display:table;
	position:absolute;
	top:0; left:0;
	z-index:10;
	width:100%; height:100%;
	background:url(../img/bg_black.png);
}
.page .btn a {
	padding:0 20px;
	display:table-cell;
	width:100%; height:100%;
	vertical-align:middle;
	cursor:pointer;
	color:#fff;
	font-size:40px;
}
#prevPage .btn {
	text-align:right;
}
#nextPage .btn {
	text-align:left;
}

/* --------------------------------------------------------------
**- @ nav
---------------------------------------------------------------*/
nav {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 10;
	padding: 10px 0;
	width: 100%;
	height: 44px;
	background-color: #FFF;
	border-top: 1px #CECECE solid;
}
nav ul { float: left; overflow: hidden; /zoom: 1;}
	nav li {
		float:left;
		margin-right:10px;
	}
	  nav #start, nav #end {
	  	position:relative;
	  	top:0px;
	  	width:100px; height:46px;
	  }
	  nav #back, nav #next {
	  	position:relative;
	  	top:0px;
	  	width:80px; height:46px;
	  }
		nav li a {
			position:relative;
			display:block;
			width: 100%; height: 100%;
			background-repeat: no-repeat;
			background-position: 0 0;
			overflow: hidden;
			text-indent: -9999px;
		}
			nav #start a{background-image: url(../img/btn_start_off.png);}
				nav #start a:hover{background-image: url(../img/btn_start_on.png);}
			nav #back a{background-image: url(../img/btn_back_off.png);}
				nav #back a:hover{background-image: url(../img/btn_back_on.png);}
			nav #next a{background-image: url(../img/btn_next_off.png);}
				nav #next a:hover{background-image: url(../img/btn_next_on.png);}
			nav #end a{background-image: url(../img/btn_end_off.png);}
				nav #end a:hover{background-image: url(../img/btn_end_on.png);}

#mobilebtn {
	display: none;
}
#pagenum {
	position: relative;
	float: right;
	width: 100px; height: 46px;
	border: 1px #ccc solid;
	border-radius: 4px;
	line-height: 46px;
	text-align: center;
	color: #333;
	font-size: 18px;
}
	#current_num {
		font-size: 26px;
		color: #73A437;
	}

#zoom {
	position: relative;
	float: left;
	width:120px; height:46px;
	overflow: hidden;
	text-indent: -9999px;
}
	#zoom a {
		display: block;
		width: 100%; height: 100%;
	}
	.zoomOne {
		background: #fff url(../img/btn_zoom_off.png) no-repeat left top;
	}
		.zoomOne:hover {
			background: #fff url(../img/btn_zoom_on.png) no-repeat left top;
		}
	.zoomClose {
		background: #fff url(../img/btn_close_off.png) no-repeat left top;
	}
		.zoomClose:hover {
			background: #fff url(../img/btn_close_on.png) no-repeat left top;
		}
#zoom.active {
	width: 100%;
	text-align: center;
}
	#zoom.active a{
		width: 120px;
		margin: 0 auto;
	}

#loading {
	position: absolute;
	top:0; left: 0;
	z-index: 9998;
	width: 100%; height: 100%;
	background-color: rgba(255,255,255,.8);
}
#loading p {
	position: absolute;
	top: 50%; left: 50%;
	margin: -80px 0 0 -80px;
	width: 160px; height: 160px;
	background-color: rgba(19,43,140,.6);
	color: #fff;
	font-weight: bold;
	font-size: 18px;
	border-radius: 10px;
}
.no-cssanimations #loading {
	background-color:#fff;
	filter: alpha(opacity = 80);
}
.no-cssanimations #loading p {
	padding-top:20px;
	background:#B50080 url(../img/loader.gif) no-repeat center center;
}
.no-js #loading {
	display: none;
}
/* --------------------------------------------------------------
**- @ mobile device
---------------------------------------------------------------*/
/*.isiPad, .isiPhone, .isAndroid { height: 100%; padding-top: 30px;}*/
#dragHelper, #mobilebtn {
  display: block;
}
@media only screen and (min-width: 569px){
  #mobilebtn {
    display: none;
  }
}
@media only screen and (min-width: 769px){
  #dragHelper {
    display: none;
  }
}
header, #start, #next, #end, #back, #zoom {
  display: none;
}
@media only screen and (min-width: 569px){
  #start, #next, #end, #back, #zoom {
    display: block;
  }
}
@media only screen and (min-width: 769px){
  header {
    display: block;
  }
}

@media only screen and (min-width: 569px){
}

/*.isiPad #mobilebtn, .isiPhone #mobilebtn, .isAndroid #mobilebtn,
.isiPad #dragHelper, .isiPhone #dragHelper, .isAndroid #dragHelper {
	display: block;
}*/
 #zoomArea {
  width: 200%;
  max-width:2000px;
}
@media only screen and (min-width: 569px){
  #zoomArea {
    width: 2000px;
  }
}

#portrait.isiPad #contents, #portrait.isiPhone #contents, #portrait.isAndroid #contents {
	top: 40px;
}
#mobilebtn {
	position:absolute;
	top:0; right:0;
	width:128px; height:65px;
	text-align:center;
	overflow:hidden;
}
#mobilebtn a {
	position:relative;
	display:block;
	width: 100%; height: 100%;
  background-image: url('../img/btn_zoom_mobile.png');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
	text-indent: -9999px;
	overflow: hidden;
	}
	#mobilebtn .zoomClose {
		background-image: url(../img/btn_close_mobile.png);
	}

/*.isiPad #pagenum, .isiPhone #pagenum, .isAndroid #pagenum {
	height: 80px;
	line-height: 80px;
	border: none;
}*/
#portrait #mobilebtn .zoomOne {
	display: block;
}
#portrait #mobilebtn .zoomLeft,
#portrait #mobilebtn .zoomRight {
	display: none;
}

#landscape #mobilebtn .zoomOne {
	/*display: none;*/
}
#landscape #mobilebtn .zoomLeft,
#landscape #mobilebtn .zoomRight {
	display: none;
}
/*
	ローディングアニメーション
*/
.no-cssanimations #circularG,
.no-cssanimations .circularG {
	display:none;
}
#circularG{
	position:absolute;
	top: 50%; left: 50%;
	z-index: 9999;
	margin: -35px 0 0 -45px;
	width:90px;
	height:90px
}
.circularG{
	position:absolute;
	background-color:#ffffff;
	width:20px;
	height:20px;
	-moz-border-radius:14px;
	-moz-animation-name:bounce_circularG;
	-moz-animation-duration:1.04s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-direction:linear;
	-webkit-border-radius:14px;
	-webkit-animation-name:bounce_circularG;
	-webkit-animation-duration:1.04s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:linear;
	-ms-border-radius:14px;
	-ms-animation-name:bounce_circularG;
	-ms-animation-duration:1.04s;
	-ms-animation-iteration-count:infinite;
	-ms-animation-direction:linear;
	-o-border-radius:14px;
	-o-animation-name:bounce_circularG;
	-o-animation-duration:1.04s;
	-o-animation-iteration-count:infinite;
	-o-animation-direction:linear;
	border-radius:14px;
	animation-name:bounce_circularG;
	animation-duration:1.04s;
	animation-iteration-count:infinite;
	animation-direction:linear;
}
#circularG_1{
	left:0;
	top:35px;
	-moz-animation-delay:0.39s;
	-webkit-animation-delay:0.39s;
	-ms-animation-delay:0.39s;
	-o-animation-delay:0.39s;
	animation-delay:0.39s;
}
#circularG_2{
	left:10px;
	top:10px;
	-moz-animation-delay:0.52s;
	-webkit-animation-delay:0.52s;
	-ms-animation-delay:0.52s;
	-o-animation-delay:0.52s;
	animation-delay:0.52s;
}
#circularG_3{
	top:0;
	left:35px;
	-moz-animation-delay:0.65s;
	-webkit-animation-delay:0.65s;
	-ms-animation-delay:0.65s;
	-o-animation-delay:0.65s;
	animation-delay:0.65s;
}
#circularG_4{
	right:10px;
	top:10px;
	-moz-animation-delay:0.78s;
	-webkit-animation-delay:0.78s;
	-ms-animation-delay:0.78s;
	-o-animation-delay:0.78s;
	animation-delay:0.78s;
}
#circularG_5{
	right:0;
	top:35px;
	-moz-animation-delay:0.91s;
	-webkit-animation-delay:0.91s;
	-ms-animation-delay:0.91s;
	-o-animation-delay:0.91s;
	animation-delay:0.91s;
}
#circularG_6{
	right:10px;
	bottom:10px;
	-moz-animation-delay:1.04s;
	-webkit-animation-delay:1.04s;
	-ms-animation-delay:1.04s;
	-o-animation-delay:1.04s;
	animation-delay:1.04s;
}
#circularG_7{
	left:35px;
	bottom:0;
	-moz-animation-delay:1.17s;
	-webkit-animation-delay:1.17s;
	-ms-animation-delay:1.17s;
	-o-animation-delay:1.17s;
	animation-delay:1.17s;
}
#circularG_8{
	left:10px;
	bottom:10px;
	-moz-animation-delay:1.3s;
	-webkit-animation-delay:1.3s;
	-ms-animation-delay:1.3s;
	-o-animation-delay:1.3s;
	animation-delay:1.3s;
}
@-moz-keyframes bounce_circularG{
	0%{ -moz-transform:scale(1)}
	100%{ -moz-transform:scale(.3)}
}
@-webkit-keyframes bounce_circularG{
	0%{ -webkit-transform:scale(1) }
	100%{ -webkit-transform:scale(.3)}
}
@-ms-keyframes bounce_circularG{
	0%{-ms-transform:scale(1)}
	100%{-ms-transform:scale(.3)}
}
@-o-keyframes bounce_circularG{
	0%{-o-transform:scale(1)}
	100%{-o-transform:scale(.3)}
}
@keyframes bounce_circularG{
	0%{transform:scale(1)}
	100%{transform:scale(.3)}
}
/*
	ローディングアニメーションここまで
*/
/* --------------------------------------------------------------
**- @ error arat
---------------------------------------------------------------*/
noscript {
	position:absolute;
	top:0; left:0;
	z-index:100;
	width:100%; height:100%;
	border:10px #B50080 solid;
	background-color:#FFF;
	box-sizing:border-box;
	font-size:30px;
	font-weight:bold;
	color:#B50080;
}
noscript table,noscript td {
	width:100%; height:100%;
	text-align:center;
	vertical-align:middle;
}
.isIE noscript {display:none;}
#ie67 {
	display:none;
	position:absolute;
	top:0; left:0;
	z-index:100;
	width:100%; height:100%;
	background-color:#FFF;
	font-size:30px;
	font-weight:bold;
	color:#B50080;
}
#ie67 table{
	border:10px #B50080 solid;
}
#ie67 table, #ie67 td {
	width:100%; height:100%;
	text-align:center;
	vertical-align:middle;
}
.isIE6 #ie67, .isIE7 #ie67 {
	display:block;
}

#ie67 a {
	font-size:20px;
	font-weight:normal;
}