﻿/*
@-ms-viewport
{
	width: 1024px;
}

@-webkit-viewport
{
	width: 1024px;
}

@-o-viewport
{
	width: 1024px;
}

@-moz-viewport
{
	width: 1024px;
}

@viewport
{
	width: 1024px;
}
*/


.html
{
/*
	background-color: #7F7F7F;
*/
	background-color: transparent;
}

.cls_page
{
	z-index: 1;
	width: 1024px;
	min-height: 768px;
	background-image: none;
	border-style: none;
	border-color: #000000;
	background-color: #FFFFFF;
/*
	display: none;
*/
	position:relative;
	margin: 0 auto;
	margin-top: 30px;
	margin-bottom: 30px;

}

.cls_base_image
{
	z-index: 2;
	width: 1024px;
	position: relative;
	margin-right: -10000px;
}

.cls_close_img
{
	z-index: 8;
	width: 30px;
	height: 30px;
	position: relative;
	left: 15px;
	top: 15px;
/*
	position: absolute;
	top: 84px;
	left: 974px;
*/
}

.cls_close
{
	z-index: 12;
	left: 959px;
	top: 69px;
	width: 60px;
	height: 60px;
	position: absolute;
	cursor:pointer;
}


.cls_pointer
{
	z-index:10;
	cursor:pointer;

/*
	background-color:#88ccaa;
	opacity:0.5;
*/
}


.cls_nextpagebtn
{
	z-index:11;
	left:784px;
	top:512px;
	width:92px;
	height:90px;
	position:absolute;
}

.cls_nextpage
{
	z-index:11;
	left:800px;
	top:512px;
	width:92px;
	height:90px;
	position:absolute;
}

.cls_backpage
{
	z-index:11;
	left:128px;
	top:512px;
	width:92px;
	height:90px;
	position:absolute;
}

.cls_center_image
{
	z-index:3;
	left: 142px;
	top: 191px;
	width: 740px;
	height: 433px;
	position:absolute;
}

.cls_frame
{
	z-index: 4;
	left: 0px;
	top: 0px;
	width: 1024px;
	height: 768px;
	background-color: transparent;
	position: absolute;
}

.cls_frame_edge
{
	width: 1024px;
	height: 768px;
	border: none;
}

.cls_scrollArea
{
	z-index: 4;
	position: absolute;
	left: 165px;
	top: 331px;
	width: 428px;
	height: 240px;

	clip: rect(0px,428px,240px,0px);
}

.cls_scrollBase
{
	position: relative;
}

.cls_scrollShadowTop{
	z-index: 5;
	position: absolute;
	left: 160px;
	top: 331px;
	width: 435px;
	height: 17px;
}
.cls_scrollShadowBottom{
	z-index: 5;
	position: absolute;
	left: 160px;
	top: 555px;
	width: 435px;
	height: 17px;
}



.cls_top_bar{
	z-index: 20;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 1024px;
	height: 64px;
}

.cls_top_bar{
	width: 1024px;
	height: 64px;
}

.cls_top_bar_index{
	z-index: 21;
	position: absolute;
	left: 870px;
	top: 0px;
	width: 72px;
	height: 70px;
}

.cls_top_bar_up{
	z-index: 21;
	position: absolute;
	left: 947px;
	top: 0px;
	width: 72px;
	height: 70px;
}




#page_main{
	display: none;
}
#page_top{
	display: block;
}

/*
1552,360
416,60

776,180,208,30
*/

#jsanime1_frame{
	z-index: 6;
	position: absolute;
}
iframe{
	border: 0;
}

#nextlink{
	z-index: 10;
	position: absolute;
}

#page_kbt{
	display: block;
}
#page_kmn{
	display: none;
}
#page_rds{
	display: none;
}
#page_esb{
	display: none;
}
#page_rsc{
	display: none;
}

/*--------------------------------- panel page ---------------------------------*/
#page_top .subject{
	position: absolute;
	left: 0px;
	top: 90px;
	width: 1024px;
	height: 28px;
	text-align: center;
	font-size: 18px;
	line-height: 28px;
}

#page_top .htitleblock{
	position: relative;
	top: 128px;
	height: 50px;
	text-align: center;
	font-size: 34px;
	font-weight: bold;
	line-height: 50px;
}

#page_top .htitle{
	display: inline;
	border-bottom: 2px solid #808080;
}

#topimg_a{
	z-index: 100;
	position: absolute;
	left: 0px;
	top: 198px;
	width: 1024px;
	height: 570px;

/*
	display: none;
*/
}

.cls_topimg_b{
	position: absolute;
	left: 0px;
	top: 282px;
	width: 1024px;
	height: 486px;
}

#page_top .btxt{
	position: absolute;
	left: 0px;
	top: 200px;
	width: 100%;
	height: 75px;
	line-height: 20px;
	font-size: 15px;
	text-align: center;
}


.pagetop_to1{
	position: absolute;
	left: 40px;
	top: 326px;
	width: 185px;
	height: 398px;
}

.pagetop_to2{
	position: absolute;
	left: 230px;
	top: 326px;
	width: 185px;
	height: 398px;
}

.pagetop_to3{
	position: absolute;
	left: 420px;
	top: 326px;
	width: 185px;
	height: 398px;
}

.pagetop_to4{
	position: absolute;
	left: 609px;
	top: 326px;
	width: 185px;
	height: 398px;
}

.pagetop_to5{
	position: absolute;
	left: 799px;
	top: 326px;
	width: 185px;
	height: 398px;
}



/*--------------------------------- video ---------------------------------*/
#videoData{
	z-index: 8;
	position: absolute;
}




/*--------------------------------- scroll ---------------------------------*/
#scrollArea, #scrollArea2{
	z-index: 5;
	display: none;
}

#scrollRange, #scrollRange2{
	z-index: 5;
	position: absolute;
	left: 307px;
	top: 338px;
	width: 145px;
	height: 270px;
	clip: rect(0,145px,270px,0);
}
#scrollBase, #scrollBase2{
	z-index: 5;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 145px;
/*	height: 342px;*/
	height: 370px;
/*
	clip: rect(0,145px,270px,0);
*/
}

#scrollRangeTouch, #scrollRangeTouch2{
	z-index: 8;
	position: absolute;
	left: 307px;
	top: 338px;
	width: 145px;
	height: 270px;
	clip: rect(0,145px,270px,0);
}
#scrollBaseTouch, #scrollBaseTouch2{
	z-index: 8;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 145px;
/*	height: 342px;*/
	height: 370px;
}

#scrollRange2, #scrollRangeTouch2{
	left: 256px;
	width: 728px;
}
#scrollBase2, #scrollBaseTouch2{
	width: 728px;
}
#scrollBase2Bar{
	z-index: 9;
	position: absolute;
	left: 724px;
	top: 0px;
}

#scrollAttend{
	z-index: 6;
	position: absolute;
	left: 301px;
	top: 630px;
	width: 156px;
	height: 89px;
}

.cls_scrollShadowTop{
	z-index: 5;
	position: absolute;
	left: 307px;
	top: 338px;
	width: 146px;
	height: 25px;
}
.cls_scrollShadowBottom{
	z-index: 5;
	position: absolute;
	left: 307px;
	top: 583px;
	width: 146px;
	height: 25px;
}

#scrolllink{
	position: absolute;
	left: 0px;
	top: 297px;
	width: 145px;
	height: 44px;
}

#idx40block{
	z-index: 10;
	display: none;
	position: absolute;
	left: 745px;
	top: 331px;
	width: 220px;
	height: 13px;
	background-color: #f4f4f4;
}

/*--------------------------------- panel page ---------------------------------*/
.cls_basepage{
	position: absolute;
	left: 0;
	top: 0;
	width: 1024px;
	height: 768px;
}







/*--------------------------------- text base setting ---------------------------------*/


.subtitle_area{
	position: absolute;
	left: 40px;
	top: 81px;
	width: 960px;
}

.subtitle_area h2{
	font-size: 31px;
	line-height: 40px;
}
.subtitle_area p{
	font-size: 15px;
	line-height: 20px;

	font-weight: bold;
}


#page_rsc .subtitle_area p{
	font-size: 14px;
}



.lnav_area{
	position: absolute;
	left: 0;
	top: 210px;

	font-weight: bold;
}

.lnav_area .bar{
	position: relative;
	width: 250px;
	height: 50px;
	margin-bottom: 16px;
}

.lnav_area .bar .icon{
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 50px;
}
.lnav_area .bar .iconv{
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 50px;
}

.lnav_area .bar .body{
	position: absolute;
	left: 40px;
	top: 0;
	width: 200px;
	height: 50px;
	line-height: 50px;
	font-size: 17px;

	background-color: #f2f2f2;

	letter-spacing: 0px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.lnav_area .bar .num{
/*	display: inline-block;*/
/*	margin-left: 6px;*/
	position: absolute;
	left: 6px;
	top: 0;
/*	width: 17px;*/
}
.lnav_area .bar .text{
/*	display: inline-block;*/
	position: absolute;
	left: 23px;
	top: 0;
	width: 177px;
	letter-spacing: -1px;
}

.lnav_area .mark{
}


.cls_kbt .lnav_area .bar .icon{
/*	background-color: #faa749;*/
	background: #faa749 url(/-/Media/Ricoh/Sites/co_jp/mfp-ex/input/kankatsu/gamen/images/nav_mark1.png) no-repeat center center;
	background-size: 25px 25px;
}
.cls_kbt .lnav_area .bar .iconv{
	background: #faa749 url(/-/Media/Ricoh/Sites/co_jp/mfp-ex/input/kankatsu/gamen/images/nav_markv1.png) no-repeat center center;
	background-size: 25px 25px;
}
.cls_kbt .lnav_area .bar .now{
	background-color: #faa749;
}

.cls_kmn .lnav_area .bar .icon{
	background: #f15b66 url(/-/Media/Ricoh/Sites/co_jp/mfp-ex/input/kankatsu/gamen/images/nav_mark2.png) no-repeat center center;
	background-size: 25px 25px;
}
.cls_kmn .lnav_area .bar .iconv{
	background: #f15b66 url(/-/Media/Ricoh/Sites/co_jp/mfp-ex/input/kankatsu/gamen/images/nav_markv2.png) no-repeat center center;
	background-size: 25px 25px;
}
.cls_kmn .lnav_area .bar .now{
	background-color: #f15b66;
}

.cls_rds .lnav_area .bar .icon{
	background: #8071b4 url(/-/Media/Ricoh/Sites/co_jp/mfp-ex/input/kankatsu/gamen/images/nav_mark3.png) no-repeat center center;
	background-size: 25px 25px;
}
.cls_rds .lnav_area .bar .iconv{
	background: #8071b4 url(/-/Media/Ricoh/Sites/co_jp/mfp-ex/input/kankatsu/gamen/images/nav_markv3.png) no-repeat center center;
	background-size: 25px 25px;
}
.cls_rds .lnav_area .bar .now{
	background-color: #8071b4;
}

.cls_esb .lnav_area .bar .icon{
	background: #59b1e3 url(/-/Media/Ricoh/Sites/co_jp/mfp-ex/input/kankatsu/gamen/images/nav_mark4.png) no-repeat center center;
	background-size: 25px 25px;
}
.cls_esb .lnav_area .bar .iconv{
	background: #59b1e3 url(/-/Media/Ricoh/Sites/co_jp/mfp-ex/input/kankatsu/gamen/images/nav_markv4.png) no-repeat center center;
	background-size: 25px 25px;
}
.cls_esb .lnav_area .bar .now{
	background-color: #59b1e3;
}

.cls_rsc .lnav_area .bar .icon{
	background: #67c18d url(/-/Media/Ricoh/Sites/co_jp/mfp-ex/input/kankatsu/gamen/images/nav_mark5.png) no-repeat center center;
	background-size: 25px 25px;
}
.cls_rsc .lnav_area .bar .iconv{
	background: #67c18d url(/-/Media/Ricoh/Sites/co_jp/mfp-ex/input/kankatsu/gamen/images/nav_mark5.png) no-repeat center center;
	background-size: 25px 25px;
}
.cls_rsc .lnav_area .bar .now{
	background-color: #67c18d;
}


.lnav_area .bar .s1n2fix{
	font-size: 16px;
}

.lnav_area .bar .s2n3fix{
	font-size: 14px;
}
.lnav_area .bar .s2n4fix{
	font-size: 14px;
}

.lnav_area .bar .s3fix{
	margin-top: 6px;
	line-height: 20px;
	font-size: 16px;
}

.lnav_area .bar .s3u{
	font-size: 13px;
}


.esb_link{
	position: absolute;
	left: 34px;
	top: 560px;
	width: 186px;
	height: 177px;
}
.esb_link img{
	width: 186px;
	height: 177px;
}

.color_txt_orange{
	color: #faa749;
}
.color_bg_orange{
	background-color: #faa749;
}
.color_bg_gray{
	background-color: #f2f2f2;
}

.color_txt_nav2{
	color: #f15b66;
}
.color_bg_nav2{
	background-color: #f15b66;
}

.color_txt_nav3{
	color: #8071b4;
}
.color_bg_nav3{
	background-color: #8071b4;
}

.color_txt_nav4{
	color: #59b1e3;
}
.color_bg_nav4{
	background-color: #59b1e3;
}

.color_txt_nav5{
	color: #67c18d;
}
.color_bg_nav5{
	background-color: #67c18d;
}

.subremark{
	font-size: 10px;
}


/*--------------------------------- main image -----------------------------------*/
.cls_panel_img{
	z-index: 3;
	position: absolute;
	left: 256px;
	top: 180px;
	width: 300px;
	height: 30px;
}

.cls_panel_img img{
	width: 300px;
	height: 30px;
}

.cls_panel_bottom{
	z-index: 3;
	position: absolute;
	left: 256px;
	top: 637px;
	width: 728px;
	height: 87px;
}


.cls_panel{
	z-index: 5;
	position: absolute;
	left: 256px;
	top: 180px;
	width: 728px;
	height: 544px;
}

.cls_panel .bar{
	position: absolute;
	left: 11px;
	top: 0px;
	width: 289px;
	height: 30px;
	line-height: 30px;

	font-size: 16px;
	font-weight: bold;
}

.cls_panel .main{
	position: absolute;
	left: 0px;
	top: 30px;
	width: 728px;
	height: 427px;
}

.cls_panel .main .cls_mainimg{
	width: 728px;
	height: 427px;
}

.cls_panel .main .cls_mainimg_sub{
	position: absolute;
	left: 520px;
	top: -30px;
	width: 208px;
	height: 30px;

	display: none;
}
/*776,180,208,30*/

.cls_panel .remark{
	position: absolute;
	left: 0px;
	top: 457px;
	width: 728px;
	height: 87px;

	display: table;
}


.cls_panel .remark p{
	display: table-cell;
	text-align: center;
	vertical-align: middle;

	font-size: 14px;
	line-height: 20px;
	font-weight: bold;

}

.cls_panel .remark_movfix{
	top: 448px;
}






