@charset "utf-8";
/* ==================================================
共通
================================================== */
* {
  margin: 0; 
	padding: 0;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -o-box-sizing:border-box;
}

body {
	margin:0; /* 変更しない */
	padding:0; /* 変更しない */
	font-size:87.5%; /* 14pxのとき */
	line-height:1.6; /* 変更しない */
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#333333;
-webkit-text-size-adjust: 100%;
  width: 100%;
	height: 100%;
  min-width: 970px;
	background-color:#fff;
}

ul, dl { margin: 0; padding: 0; list-style:none; }


a { color: #333333; text-decoration: none; }
a:focus { outline: 2px solid #5b6f90; display: inline-block; }

.sp { display: none; }

/* ==================================================
構造
================================================== */
.container { width: 940px; margin: 0 auto; }

/* ==================================================
ヘッダ header
================================================== */
#Header_area { margin: 16px 0; padding-bottom: 16px; border-bottom: 1px solid #cccccc; }
#Header_area .logo { float: left;}

/* =========== user access =========== */
#Header_area .ua_area { float: right; color: #000; }

#Header_area .ua_area > div,
#Header_area .ua_under .header_link {
  background-color: #ededed;
	-webkit-border-radius:4px 4px 4px 4px;
	-moz-border-radius:4px 4px 4px 4px;
	border-radius:4px 4px 4px 4px;
	padding: 4px 8px;
	margin-left: 8px;
	float: left;
}

#Header_area .ua_area p,
#Header_area .ua_area ul,
#Header_area li { float: left; }

#FontChange li {
	float: left;
	display: block;
	background: #fff;
	margin-left: 4px;
		padding: 0 4px;
}

#ScreenColor li a {
	color: #000;
	background-color: inherit;
	text-decoration: none;
	border: 1px solid #888;
	margin-left: 0.2em;
	padding: 0.3em 0.5em 0.1em 0.5em;
}
#ScreenColor li.bt1 a, #ScreenColor li.bt1 a:visited {
	color: #000;
	background-color: #FFF;
}
#ScreenColor li.bt2 a, #ScreenColor li.bt2 a:visited {
	color: #FFF;
	background-color: #000;
}
#ScreenColor li.bt3 a, #ScreenColor li.bt3 a:visited {
	color: #FF0;
	background-color: #00F;
}
#ScreenColor li a:visited {
	color: #909;
}
#ScreenColor li a:hover {
	color: #C00;
	background-color: #FFC;
}

*:first-child+html #ScreenColor li {
	border: 1px solid #fff;
	border-top: 1px solid #000;
	padding: 6px  0 6px 0;
		margin-left: 0;
}

*:first-child+html #ScreenColor li a {
	margin-left: 0;
}

.ua_under {
  clear: both;
	float: right !important;
}

.header_link a { background: url(../images/tri_gray.gif) no-repeat 0 50%; padding-left: 24px;}

.ua_under { background-color: none !important; }
.ua_under .header_link {  float: left; margin-right: 10px; }
.ua_under #Search { float: right; }
/*
#Search input#SearchWord { 
	width: 200px;
	border-radius:4px 0 0 4px;
	border: 1px solid #ededed;
	height: 30px;
font-size: 100%;}

#Search input#ButtonSearch { 
font-size: 100%;
border-radius:0 4px 4px 0;
	border: 1px solid #ededed;
	background: #ededed url(../images/icon_search.gif)no-repeat 0 50%; padding-left: 20px; 
	height: 30px;
}
*/

/* ==================================================
google search
================================================== */
.cse .gsc-control-cse, .gsc-control-cse { 
  padding: 0 !important;
}
.cse input.gsc-search-button, input.gsc-search-button { border: none !important;}
.cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 {
    width: 16px !important;
    height: auto !important;
    padding: 0 !important;
    min-width: 13px;
    margin-top: 0 !important;
}
table.gsc-search-box td.gsc-input { padding-right: 0 !important;}
td.gsc-search-button {background:#CECECE !important; width:70px !important; text-align:center; }
.gsc-input-box { height: 30px!important; width:200px;}

form.gsc-search-box {
  width: auto !important;
	float: right;
}


/* ==================================================
global_navi
================================================== */

#global_navi { border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; padding: 6px 0; }
#global_navi li { float: left; font-size: 130%; margin-right: 30px; }
.global_navi_inner { width: 940px; margin: 0 auto; }

/* ==================================================
SNS
================================================== */
.sns_area {float: right; width: 270px; margin-right: -30px;}
#twitter-widget-0 { float: left; margin-right: 10px; }
.fb_iframe_widget_fluid {display: inline-block !important;}

/* ==================================================
footer
================================================== */
#footer_area {
	padding: 16px 0;
border: 1px solid #cccccc;
	text-align: center;
}

#footer_area ul  { margin: 0 auto 20px auto; }
#footer_area li { display: inline;  border-right: 1px solid #333333; padding: 0 8px;  }
#footer_area li:first-child { border-left: 1px solid #333333; }

#footer_area p { clear: both; margin-bottom: 0.8em; }
#footer_area p.copytext { font-size: 88%; }

/* ==================================================
その他
================================================== */
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

.pagetop {
	clear: both;
	text-align: center;
	margin: 40px auto;
}

.pagetop a {
border: 1px solid #cccccc;
background: url(../images/tri_up.gif)no-repeat center 4px;
padding: 26px 16px 10px 16px;
border: 1px solid #cccccc;
}
.pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}

/* サウンドナビゲーション
=============================================================================================*/
.voice {
	position: absolute;
	z-index: 100;
	top: 0px;
	right: 0px;
	display: run-in;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	border-style: none;
	overflow: hidden;
}


/* ==================================================
スクリーン変更
================================================== */
/* 画面色　黒 */
.black * {
  color: #FFF !important;
  background-color: #000 !important;
  border-color: #fff !important;
}

.black #main_visual,
.black #main_visual .visual,
.black #main_visual .visual img { background-color:transparent !important;}

.black #GlobalNaviArea {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

body.black {
  background-image: none;
  background-color: #000;
}

.black #story_area .title { color:#fff !important;}
.black h2,
.black h3 {
  background-color: #FFF !important;
  color: #000 !important;
}

/* 画面色　青 */
.blue * {
  color: #FF0 !important;
  background-color: #00F !important;
  border-color: #FF0 !important;
}

.blue #main_visual,
.blue #main_visual .visual,
.blue #main_visual .visual img { background-color:transparent !important;}

.blue #GlobalNaviArea {
  border-top: 1px solid #FF0;
  border-bottom: 1px solid #FF0;
}

body.blue {
  background-image: none;
  background-color: #00F;
}

.blue #story_area .title { color:#FF0 !important;}
.blue h2,
.blue h3 {
  background-color: #FF0 !important;
  color: #00F !important;
}
