/* -------------------------------
全体のデザイン
------------------------------- */

@charset "utf-8";

html{
    height: 100%;
    overflow-x: hidden;
}

body{
-webkit-font-smoothing: antialiased;
}

@font-face {
font-family: 'HannariMincho';
src: url('/rentoku/sinsai/age20/font/hannari.eot'); /* IE9 Compat Modes */
src: url('/rentoku/sinsai/age20/font/hannari?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/rentoku/sinsai/age20/font/hannari.woff') format('woff'), /* Modern Browsers */
       url('/rentoku/sinsai/age20/font/hannari.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/rentoku/sinsai/age20/font/hannari.svg#svgFontName') format('svg'); /* Legacy iOS */
}
#content_section{
margin:0px auto 0px auto;
width:980px;
padding-bottom:60px;
}


/* -------------------------------
共通ナビゲーション
------------------------------- */

.menu-button-open{
position:fixed;
top:10px;
left:10px;
z-index:999999;
}

.menu-button-close{
position:fixed;
top:10px;
left:350px;
display:none;
z-index:999999;
}


.nav-primary{
width:100%;
min-width:980px;
height:40px;
background :#2c3c49;
}

.nav-primary-bottom{
width:100%;
min-width:980px;
height:40px;
position:fixed;
bottom:0;
}

#panel{
position:fixed;
top:0px;
left:0px;
z-index:999999;
height: 100%;
width: 300px;
padding:20px;
float: left;
display: none;
color: #666;
border-right:1px solid #ffffff;
background: #303035; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMzAzMDM1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzExMTExMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(-45deg,  #303035 0%, #111111 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#303035), color-stop(100%,#111111)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #303035 0%,#111111 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #303035 0%,#111111 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #303035 0%,#111111 100%); /* IE10+ */
background: linear-gradient(135deg,  #303035 0%,#111111 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303035', endColorstr='#111111',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */

}

.nav-primary-area{
width:980px;
margin:0px auto;
padding:0px 0px;
position:relative;
}

.nav-primary-area-left{
position:absolute;
top:0;
left:0;
}

.nav-primary-area-right{
float:right;
}

/* -------------------------------
共通ナビゲーション・フッター
------------------------------- */

.nav-primary-area-right-plus{
padding-top:8px;
height:25px;
}

.nav-margin{
margin:0 20px;
}

/* -------------------------------
共通ナビゲーション SNSボタン
------------------------------- */

#sharelist {
list-style-type: none;
}
#sharelist li {
            display: inline-block;
            margin-right:20px;
        }
        #sharelist div {
            display: inline-block;
        }
        #sharelist a {
            display: inline-block;
            text-decoration: none;
            vertical-align: top;
        }

        #facebook span,
        #twitter span {
            color: #333;
            font-size: 25px;
            padding: 0 2px;
            margin-top: 7px;
        }
        .balloon {
            position: relative;
        }
        .balloon:after,
        .balloon:before {
            right: 100%;
            top: 50%;
            border: solid transparent;
            content: "";
            position: absolute;
        }
        .balloon span {
            font-size: 16px;
            margin-top:12px;
            display: inline-block;
            color:#ffffff;
        }





/* -------------------------------
基本ページ
------------------------------- */

.all{
background:url(/rentoku/sinsai/age20/img/background-tenten.png);
width:100%;
height:100%;
position:relative;
}

.contents-area{
background-color:#ffffff;
height:650px;
position:absolute;
top:50%;
margin-top:-325px;
width:100%
}

.wrapper{
width:100%;
overflow:hidden!important;
}

.wrapper-inner{
width:980px;
margin:0 auto;
overflow:hidden;
}





/* -------------------------------
固定ページ内でのスクロール処理
------------------------------- */

/* コンテンツ配置 */
#cntarea {
position: relative;
width: 100%;
overflow: hidden;
}
#cntinner {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.cnt {
width: 895px;
height: 517px;
margin: 0 auto;
}

.cimage1{
display:block;
}

.cimage2{
display:none;
}

.cimage3{
display:none;
}

.cimage4{
display:none;
}


/* ナビゲーション */
#nav {
position: fixed;
right: 40px;
}

#nav li {
width: 12px;
height: 12px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
background-color: #111111;
cursor: pointer;
list-style: none;
margin-bottom: 10px;
}

#nav li.selected {
background-color: #ffffff;
}

.cnt .inner{
position:relative;
}

.under-link{
position: absolute;
top: 490px;
left: 377px;
cursor: pointer;
}



/* -------------------------------
全体調整
------------------------------- */

.mainbox{
width:980px;
margin:60px auto;
position:relative;
background-repeat:no-repeat;
background-size:100% 100%;
overflow:hidden;

}

.text-block{
font-size:17px;
line-height:1.6;
padding:40px;
overflow:auto;
}


.shadow-effect{
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
}


.midashi-block{
font-size:30px;
line-height:1.6;
}

.text-white{
color:#ffffff;
}

.text-black{
color:#333333;
}

.text-left{
float:left;
line-height:1.6;
}

.text-right{
float:right;
line-height:1.6;
}

.text-center{
text-align:center;
}


.photo-caption-base{
position:relative;
width:980px;
overflow:hidden;
height:340px;
background-color:rgba(256,256,256,0.8);
padding-top:40px;
}

.photo-caption{
position:absolute;
top:12px;
left:50%;
width:900px;
margin-left:-450px;
font-size:16px;
color:#333333;
}



/* -------------------------------
突然のビューワー設定
------------------------------- */

.viewer {
	margin: 0 auto;
	width: 1000px;
	height: 600px;
	text-align: left;
	overflow: hidden;
}
.viewer ul {
	width: 1000px;
	height: 600px;
	text-align: left;
	overflow: hidden;
	position: relative;
}
.viewer ul li {
	top: 0;
	left: 0;
	width: 1000px;
	height: 600px;
	display: none;
	position: absolute;
}


/* -------------------------------
動画設定
------------------------------- */

.brightcove-movie{
margin:20px auto;
text-align:center;
}







/* -------------------------------
新トップページの対応
------------------------------- */

.preload{
display:none;
}


.button-wrapper{
position:relative;
width:100%;
height:100%;
}

.contents1{
position:absolute;
top:108px;
left:55px;
background-image:url(/rentoku/sinsai/age20/images/front/vol-1-hover.png);
background-repeat:no-repeat;
width:270px;
height:450px;
text-indent:-9999px;
}

.contents2{
position:absolute;
top:108px;
left:364px;
background-image:url(/rentoku/sinsai/age20/images/front/vol-2-hover.png);
background-repeat:no-repeat;
width:270px;
height:450px;
text-indent:-9999px;
}

.contents3{
position:absolute;
top:108px;
left:675px;
background-image:url(/rentoku/sinsai/age20/images/front/vol-3-hover.png);
background-repeat:no-repeat;
width:270px;
height:450px;
text-indent:-9999px;
}

.contents4{
position:absolute;
top:108px;
left:55px;
background-image:url(/rentoku/sinsai/age20/images/front/vol-4-hover.png);
background-repeat:no-repeat;
width:270px;
height:450px;
text-indent:-9999px;
}

.contents5{
position:absolute;
top:108px;
left:364px;
background-image:url(/rentoku/sinsai/age20/images/front/vol-5-hover.png);
background-repeat:no-repeat;
width:270px;
height:450px;
text-indent:-9999px;
}


.contents1 a{
background-image:url(/rentoku/sinsai/age20/images/front/vol-1.png);
background-repeat:no-repeat;
width:270px;
height:450px;
opacity:1;
text-indent:-9999px;
display:block;
}

.contents2 a{
background-image:url(/rentoku/sinsai/age20/images/front/vol-2.png);
background-repeat:no-repeat;
width:270px;
height:450px;
opacity:1;
text-indent:-9999px;
display:block;
}

.contents3 a{
background-image:url(/rentoku/sinsai/age20/images/front/vol-3.png);
background-repeat:no-repeat;
width:270px;
height:450px;
opacity:1;
text-indent:-9999px;
display:block;
}

.contents4 a{
background-image:url(/rentoku/sinsai/age20/images/front/vol-4.png);
background-repeat:no-repeat;
width:270px;
height:450px;
opacity:1;
text-indent:-9999px;
display:block;
}

.contents5 a{
background-image:url(/rentoku/sinsai/age20/images/front/vol-5.png);
background-repeat:no-repeat;
width:270px;
height:450px;
opacity:1;
text-indent:-9999px;
display:block;
}




.contents1 a:hover{
background:none;
}

.contents2 a:hover{
background:none;
}

.contents3 a:hover{
background:none;
}

.contents4 a:hover{
background:none;
}

.contents5 a:hover{
background:none;
}




/* -------------------------------
パネル表示部
------------------------------- */

.panel-area{
width:100%;
height:100%;
position:relative;
}

.panel-inner{
top:50%;
left:50%;
margin-top:-345px;
margin-left:-155px;
position:absolute;
width:310px;
height:650px;
background-image:url(/rentoku/sinsai/age20/images/front/menu-background.png);
}

.panel-inner-area{
width:100%;
height:100%;
position:relative;
}


.link0 a{
display:block;
text-indent:-9999px;
width:310px;
height:40px;
position:absolute;
top:105px;
left:10px;
}

.link1 a{
display:block;
text-indent:-9999px;
width:310px;
height:40px;
position:absolute;
top:165px;
left:10px;
}

.link2 a{
display:block;
text-indent:-9999px;
width:310px;
height:40px;
position:absolute;
top:225px;
left:10px;
}

.link3 a{
display:block;
text-indent:-9999px;
width:310px;
height:40px;
position:absolute;
top:285px;
left:10px;
}

.link4 a{
display:block;
text-indent:-9999px;
width:310px;
height:40px;
position:absolute;
top:345px;
left:10px;
}

.link5 a{
display:block;
text-indent:-9999px;
width:310px;
height:40px;
position:absolute;
top:405px;
left:10px;
}


.linkx a{
display:block;
text-indent:-9999px;
width:310px;
height:40px;
position:absolute;
top:465px;
left:10px;
}

.social-area{
width:310px;
height:60px;
position:absolute;
top:530px;
left:10px;
}

#sharelist {
text-align:center;
}




/* -------------------------------
昔のブラウザ対策
------------------------------- */

.old-orientation-alart{
width:100%;
height:100%;
background:rgba(30,30,30,0.8);
position:absolute;
top:0px;
left:0px;
z-index:500000;
}

.orientation-alart{
position:relative;
width:100%;
height:100%;
}

.orientation-alart-image{
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-150px;
}