/* ネットdeナビ全体のCSSファイル */
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}
html {
 height: 100%;
 background-color: #eff1f3;
}
/* 全体の背景・テキスト */
body { 
 margin: 0; 
 padding: 0; 
 color: #000000;
 font-size: 100%;
 font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 height: 100%;
/* min-height: 100%;*/
 min-width: 320px;
 min-height: 320px;
 background-color: #000000;
}
#container {
 width: 100%;
 position: relative;
 height: 100%;
 overflow: auto;
}
.enable_control{
 margin:0;
 padding:0;
 border: 0px;
}
/* ヘッダ（最上部タイトル画像部分）の背景色 */
#header { 
 background-color: #d5dadd;
 width: 100%;
}
/* ナビメニュー（通常時で左側についている状態） */
#navi-menu {
 position: relative;
 float: left;
 overflow: auto;
 width: 240px;
 height: 100%;
 margin: 0;
 padding: 0;
 text-align: center;
 background: #000000 url(../images/menu/bacgroundimage.png) no-repeat;
 background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -ms-background-size: 100% 100%;
}
/* ナビメニューの要素 */
#navi-menu ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
}
#navi-menu li {
 display: block;
 margin: 0;
 padding: 0;
 width: 100%;
 color: #ffffff;
 text-align: left;
 vertical-align: middle;
 z-index: 1;
 overflow: hidden;
 cursor: pointer;
}
#navi-menu li.navi_menusearch{
 height: 44px;
}
#navi-menu li.navi_menusearch input{
 position: absolute;
 top: 0px;
 left: 0px;
 margin: 8px 22px;
 width: 196px;
 height: 28px;
 background-color: #eeeeee;
 border: 0;
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -ms-border-radius: 5px;
 -moz-border-radius: 5px;
 -o-border-radius: 5px;
            box-sizing: border-box;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
 -webkit-appearance: none;
}
#navi-menu li.navi_menusearch div{
 position: absolute;
 top: 0px;
 left: 0px;
 margin: 14px 22px;
 width: 196px;
 height: 16px;
 line-height: 16px;
 font-size: 16px;
 color: #797979;
 text-align: center;
}
#navi-menu li.navi_menusearch img{
 position: absolute;
 top: 12px;
 left: 194px;
}
#navi-menu li.navi_menufirst{
 height: 44px;
}
#navi-menu li.navi_menufirst img{
 position: relative;
 float:left;
 margin-top: 10px;
 margin-bottom; 10px;
 margin-left: 13px;
 margin-right: 14px;
 width: 24px;
 height: 24px;
}
#navi-menu li.navi_menufirst .menu_text{
 position: relative;
 float:left;
 padding-top: 14px;
 padding-bottom; 14px;
 width: calc(100% - 51px);
 height: 16px;
 line-height: 16px;
 font-size: 16px;
 overflow: hidden;
}
#navi-menu li.navi_menufirst .menu_text:after {
 content: "";
 clear: both;
 display: block;
}
#navi-menu li.navi_menumargin {
 margin: 12px 18px;
 width: calc(100% - 36px);
 height: 0;
 border-bottom: 1px solid #4b4b4b;
 cursor: default;
}
#navi-menu li.navi_active {
 background: rgba(0,0,0,0) url(../images/menu/selected_other.png) no-repeat;
 background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -ms-background-size: 100% 100%;
}
#navi-menu li.navi_activelive {
 background: rgba(0,0,0,0) url(../images/menu/selected_live.png) no-repeat;
 background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -ms-background-size: 100% 100%;
}
#navi-menu li.navi_activerec {
 background: rgba(0,0,0,0) url(../images/menu/selected_rec.png) no-repeat;
 background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -ms-background-size: 100% 100%;
}
#navi-menu li.navi_activejitan {
 background: rgba(0,0,0,0) url(../images/menu/selected_jitan.png) no-repeat;
 background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -ms-background-size: 100% 100%;
}


#navi-menu li a {
 display: block;
 margin: 0;
 padding: 0;
 border: 0;
 width: 100%;
 height: 100%;
 text-decoration: none;
 color: #ffffff;
 text-align: left;
}
#navi-menu li a:hover{
 background: rgba(0,0,0,0) url(../images/menu/rol.png) no-repeat;
 background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -ms-background-size: 100% 100%;
}
#navi-menu li a:active{
 background: rgba(0,0,0,0) url(../images/menu/on.png) no-repeat;
 background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -ms-background-size: 100% 100%;
}

/* Copyright表示 */
#copyright { 
 position: fixed;
/* bottom: 10px; header/footer削除のデザイン調整 */
 bottom: 10px;
 width: 162px;
 background-color: #305574;
 font-size: 10px;
 color: #cbdbdf;
 text-align: center;
 z-index: 0;
}
/* メインエリア */
#main-area {
 position: relative;
 margin-left: 240px; /* ナビメニューの幅に合わせる */
 height:100%;
}
/* メインエリアのトップ画像 */
#main-topimage {
/* background-color: #d5dadd; */
 height:44px;
}
#menu_open {
 float: left;
 cursor: pointer;
 height: 44px;
 display: none;
}
#menu_open img{
 max-width: 44px;
 max-height: 44px;
}
#menu_title {
 width: 80%;
 width: calc(100% - 88px);
 height: 44px;
 line-height: 44px;
 font-size: 18px;
 font-weight: bold;
 text-align: center;
 color: #ffffff;
 margin: auto;
}
#menu_search {
 position: absolute;
 top: 0;
 right: 0;
 cursor: pointer;
 height: 20px;
 margin: 12px;
}
#menu_search img{
 max-width: 20px;
 max-height: 20px;
}

/* 幅縮小時のメニュー */
#respmenu {
 display: none; /* 縮小時のメニューは最初は隠しておく */
 position: absolute;
 top: 0px;
 left: -276px;
 width: 276px;
 height: 100%;
 margin: 0;
 padding: 0;
 text-align: left;
 overflow: auto;
 z-index: 1010;
          box-shadow: 0px 0px 5px #000000;
 -webkit-box-shadow: 0px 0px 5px #000000;
 background: #000000 url(../images/menu/bacgroundimage.png) no-repeat;
 background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -ms-background-size: 100% 100%;
}
/* ナビメニューの要素 */
#respmenu ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
}
#respmenu li {
 display: block;
 margin: 0;
 padding: 0;
 width: 100%;
 color: #ffffff;
 text-align: left;
 vertical-align: middle;
 z-index: 1;
 overflow: hidden;
 cursor: pointer;
}
#respmenu li.resp_menusearch{
 height: 44px;
}
#respmenu li.resp_menusearch input{
 position: absolute;
 top: 0px;
 left: 0px;
 margin: 8px 22px;
 width: 236px;
 height: 28px;
 background-color: #eeeeee;
 border: 0;
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -ms-border-radius: 5px;
 -moz-border-radius: 5px;
 -o-border-radius: 5px;
            box-sizing: border-box;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
 -webkit-appearance: none;
}
#respmenu li.resp_menusearch div{
 position: absolute;
 top: 0px;
 left: 0px;
 margin: 14px 22px;
 width: 236px;
 height: 16px;
 line-height: 16px;
 font-size: 16px;
 color: #797979;
 text-align: center;
}
#respmenu li.resp_menusearch img{
 position: absolute;
 top: 12px;
 left: 234px;
}
#respmenu li.resp_menufirst{
 height: 68px;
}
#respmenu li.resp_menufirst img{
 position: relative;
 float:left;
 margin-top: 10px;
 margin-bottom; 10px;
 margin-left: 14px;
 margin-right: 16px;
 width: 48px;
 height: 48px;
}
#respmenu li.resp_menufirst .menu_text{
 position: relative;
 float:left;
 padding-top: 24px;
 padding-bottom; 24px;
 height: 20px;
 line-height: 20px;
 font-size: 20px;
}
#respmenu li.resp_menufirst .menu_text:after {
 content: "";
 clear: both;
 display: block;
}
#respmenu li.resp_menusecond{
 height: 44px;
}
#respmenu li.resp_menusecond img{
 position: relative;
 float:left;
 margin-top: 7px;
 margin-bottom; 7px;
 margin-left: 23px;
 margin-right: 25px;
 width: 30px;
 height: 30px;
}
#respmenu li.resp_menusecond .menu_text{
 position: relative;
 float:left;
 padding-top: 14px;
 padding-bottom; 14px;
 height: 16px;
 line-height: 16px;
 font-size: 16px;
}
#respmenu li.resp_menusecond .menu_text:after {
 content: "";
 clear: both;
 display: block;
}
#respmenu li.resp_menuthird{
 height: 44px;
}
#respmenu li.resp_menuthird img{
 position: relative;
 float:left;
 margin-top: 10px;
 margin-bottom; 10px;
 margin-left: 26px;
 margin-right: 28px;
 width: 24px;
 height: 24px;
}
#respmenu li.resp_menuthird .menu_text{
 position: relative;
 float:left;
 padding-top: 14px;
 padding-bottom; 14px;
 height: 16px;
 line-height: 16px;
 font-size: 16px;
}
#respmenu li.resp_menuthird .menu_text:after {
 content: "";
 clear: both;
 display: block;
}

#respmenu li.resp_menumargin {
 margin: 12px 18px;
 width: calc(100% - 36px);
 height: 0;
 border-bottom: 1px solid #4b4b4b;
 cursor: default;
}
#respmenu li.resp_active {
 background: rgba(0,0,0,0) url(../images/menu/selected_other.png) no-repeat;
 background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -ms-background-size: 100% 100%;
}
#respmenu li.resp_activelive {
 background: rgba(0,0,0,0) url(../images/menu/selected_live.png) no-repeat;
 background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -ms-background-size: 100% 100%;
}
#respmenu li.resp_activerec {
 background: rgba(0,0,0,0) url(../images/menu/selected_rec.png) no-repeat;
 background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -ms-background-size: 100% 100%;
}
#respmenu li.resp_activejitan {
 background: rgba(0,0,0,0) url(../images/menu/selected_jitan.png) no-repeat;
 background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -ms-background-size: 100% 100%;
}


#respmenu li a {
 display: block;
 margin: 0;
 padding: 0;
 border: 0;
 width: 100%;
 height: 100%;
 text-decoration: none;
 color: #ffffff;
 text-align: left;
}
#respmenu li a:hover{
 background: rgba(0,0,0,0) url(../images/menu/rol.png) no-repeat;
 background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -ms-background-size: 100% 100%;
}
#respmenu li a:active{
 background: rgba(0,0,0,0) url(../images/menu/on.png) no-repeat;
 background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -ms-background-size: 100% 100%;
}


#respmenu_overlay {
 z-index: 1000;
 display:none;
 position: absolute;
 top:44px;
 left:0;
 width:100%;
 height: 100%;
 height: calc(100% - 44px);
 background-color:rgba(120,122,129,0.70);
}

/* フッター */
#footer { 
 position: fixed;
 bottom: 0;
 background-color: #eff1f3;
 width: 100%;
 z-index:50;
}
/* @media screen and (max-width: 650px) { */
@media screen and (max-width: 768px) {
 #navi-menu { /* 左側メニューを消す */
  display:none;
 }
 #menu_open { /* メニュー起動ボタン表示 */
  display:block;
 }
 #main-area {
  margin-left: 0px; /* ナビメニュー消去に伴いマージンをなくす */
 }
 body {
  background: 0; /* レスポンシブメニュー表示時はナビメニュー背景画像を消す */
 }
}

/* @media screen and (max-width: 650px) and (max-height: 650px) { スマートフォンの時はヘッダ・フッタを非表示に */
@media screen and (max-width: 768px) and (max-height: 650px) { /* スマートフォンの時はヘッダ・フッタを非表示に */
 #header {
  display:none;
 }
 #footer {
  display:none;
 }
}

@media screen and (max-height: 400px) { /* 縦方向が小さい時Copyright表示がメニューに重ならないようにする */
 #copyright {
  display: none;
 }
}

/* ネットdeナビ共通ボタン */
.NetDeNaviButton {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ebebeb));
	background:-moz-linear-gradient(top, #ffffff 5%, #ebebeb 100%);
	background:-webkit-linear-gradient(top, #ffffff 5%, #ebebeb 100%);
	background:-o-linear-gradient(top, #ffffff 5%, #ebebeb 100%);
	background:-ms-linear-gradient(top, #ffffff 5%, #ebebeb 100%);
	background:linear-gradient(to bottom, #ffffff 5%, #ebebeb 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ebebeb',GradientType=0);
	background-color:#ffffff;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	border:1px solid #454545;
	display:inline-block;
	cursor:pointer;
	color:#2b2b2b;
/*	font-family:Arial;*/
	font-size:16px;
	font-weight:bold;
	padding:5px 22px;
	text-decoration:none;
	text-shadow:0px 1px 0px #f0f0f0;
}
.NetDeNaviButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ebebeb), color-stop(1, #ffffff));
	background:-moz-linear-gradient(top, #ebebeb 5%, #ffffff 100%);
	background:-webkit-linear-gradient(top, #ebebeb 5%, #ffffff 100%);
	background:-o-linear-gradient(top, #ebebeb 5%, #ffffff 100%);
	background:-ms-linear-gradient(top, #ebebeb 5%, #ffffff 100%);
	background:linear-gradient(to bottom, #ebebeb 5%, #ffffff 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#ffffff',GradientType=0);
	background-color:#ebebeb;
}
.NetDeNaviButton:active {
	position:relative;
	top:1px;
}

/* Loadingマーク */
#floatingBarsG{
	position:fixed;
	left:calc(50% - 21px);
	top:calc(50% - 26px);
	width:42px;
	height:52px;
	z-index: 10010; /* remodalよりも上に */
}

.blockG{
	position:absolute;
	background-color:rgb(255,255,255);
	width:7px;
	height:16px;
	border-radius:5px 5px 0 0;
		-o-border-radius:5px 5px 0 0;
		-ms-border-radius:5px 5px 0 0;
		-webkit-border-radius:5px 5px 0 0;
		-moz-border-radius:5px 5px 0 0;
	transform:scale(0.4);
		-o-transform:scale(0.4);
		-ms-transform:scale(0.4);
		-webkit-transform:scale(0.4);
		-moz-transform:scale(0.4);
	animation-name:fadeG;
		-o-animation-name:fadeG;
		-ms-animation-name:fadeG;
		-webkit-animation-name:fadeG;
		-moz-animation-name:fadeG;
	animation-duration:0.622s;
		-o-animation-duration:0.622s;
		-ms-animation-duration:0.622s;
		-webkit-animation-duration:0.622s;
		-moz-animation-duration:0.622s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
}

#rotateG_01{
	left:0;
	top:19px;
	animation-delay:0.2295s;
		-o-animation-delay:0.2295s;
		-ms-animation-delay:0.2295s;
		-webkit-animation-delay:0.2295s;
		-moz-animation-delay:0.2295s;
	transform:rotate(-90deg);
		-o-transform:rotate(-90deg);
		-ms-transform:rotate(-90deg);
		-webkit-transform:rotate(-90deg);
		-moz-transform:rotate(-90deg);
}

#rotateG_02{
	left:5px;
	top:7px;
	animation-delay:0.316s;
		-o-animation-delay:0.316s;
		-ms-animation-delay:0.316s;
		-webkit-animation-delay:0.316s;
		-moz-animation-delay:0.316s;
	transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		-moz-transform:rotate(-45deg);
}

#rotateG_03{
	left:18px;
	top:2px;
	animation-delay:0.3925s;
		-o-animation-delay:0.3925s;
		-ms-animation-delay:0.3925s;
		-webkit-animation-delay:0.3925s;
		-moz-animation-delay:0.3925s;
	transform:rotate(0deg);
		-o-transform:rotate(0deg);
		-ms-transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
}

#rotateG_04{
	right:5px;
	top:7px;
	animation-delay:0.469s;
		-o-animation-delay:0.469s;
		-ms-animation-delay:0.469s;
		-webkit-animation-delay:0.469s;
		-moz-animation-delay:0.469s;
	transform:rotate(45deg);
		-o-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
}

#rotateG_05{
	right:0;
	top:19px;
	animation-delay:0.5455s;
		-o-animation-delay:0.5455s;
		-ms-animation-delay:0.5455s;
		-webkit-animation-delay:0.5455s;
		-moz-animation-delay:0.5455s;
	transform:rotate(90deg);
		-o-transform:rotate(90deg);
		-ms-transform:rotate(90deg);
		-webkit-transform:rotate(90deg);
		-moz-transform:rotate(90deg);
}

#rotateG_06{
	right:5px;
	bottom:5px;
	animation-delay:0.622s;
		-o-animation-delay:0.622s;
		-ms-animation-delay:0.622s;
		-webkit-animation-delay:0.622s;
		-moz-animation-delay:0.622s;
	transform:rotate(135deg);
		-o-transform:rotate(135deg);
		-ms-transform:rotate(135deg);
		-webkit-transform:rotate(135deg);
		-moz-transform:rotate(135deg);
}

#rotateG_07{
	bottom:0;
	left:18px;
	animation-delay:0.6985s;
		-o-animation-delay:0.6985s;
		-ms-animation-delay:0.6985s;
		-webkit-animation-delay:0.6985s;
		-moz-animation-delay:0.6985s;
	transform:rotate(180deg);
		-o-transform:rotate(180deg);
		-ms-transform:rotate(180deg);
		-webkit-transform:rotate(180deg);
		-moz-transform:rotate(180deg);
}

#rotateG_08{
	left:5px;
	bottom:5px;
	animation-delay:0.775s;
		-o-animation-delay:0.775s;
		-ms-animation-delay:0.775s;
		-webkit-animation-delay:0.775s;
		-moz-animation-delay:0.775s;
	transform:rotate(-135deg);
		-o-transform:rotate(-135deg);
		-ms-transform:rotate(-135deg);
		-webkit-transform:rotate(-135deg);
		-moz-transform:rotate(-135deg);
}



@keyframes fadeG{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-o-keyframes fadeG{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-ms-keyframes fadeG{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-webkit-keyframes fadeG{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-moz-keyframes fadeG{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}


/* remodalダイアログのデザイン */
.remodal-dialog-titlebar{
 background-color: #313945;
 display:flex;
 justify-content: center;
 padding-top: 14px;
 padding-bottom: 14px;
 margin: 0;
 width: 100%;
 height: 16px;
}
.remodal-dialog-titlebar img{
 max-width: 20px;
 max-height: 20px;
 margin-right: 10px;
}
.remodal-titlebar-label{
 margin-top: 2px;
 color: #ffffff;
 font-size: 16px;
 line-height: 16px;
}
.remodal-dialog-close{
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  cursor:pointer;
  background: url("../images/icon/menu_close_nor.png") no-repeat;
}
.remodal-dialog-close:hover{
  background: url("../images/icon/menu_close_rol.png") no-repeat;
}
.remodal-dialog-close:active{
  background: url("../images/icon/menu_close_on.png") no-repeat;
}