@charset "UTF-8";

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
	margin:0;padding:0;border:0;outline:0;font-size:14px;line-height:1.5;background:transparent;}

* { -webkit-touch-callout:none; }  /*�����N���\���A�I������Ȃ�*/
input, textarea {-webkit-user-select: auto !important;} 

body { color: #eee;background: #141414;
font-family: "メイリオ",Meiryo,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",Osaka,"Lucida Grande",Geneva,Arial,Verdana,sans-serif;}

header { padding: 30px 0 0 0; display: block; }
header h1 { width: 960px; margin: 0 auto; }
a, a:visited {color:#CCC;}
a:active, a:hover {color:#FF9;}

/* text
-----------------------------------------------------------------------------*/
.txt-left{text-align:left;}
.txt-right{text-align:right;}
.txt-center{text-align:center;}
.bold{font-weight:bold;}

.underline {border-bottom: dotted 2px;}

/* margin
-----------------------------------------------------------------------------*/
/* all */
.ma05{ margin:5px; }
.ma10{ margin:10px; }

/* top */
.mt05{ margin-top:5px; }
.mt10{ margin-top:10px; }
.mt15{ margin-top:15px; }

/* minus-top */
.mmt05{ margin-top:-5px; }
.mmt10{ margin-top:-10px; }

/* bottom */
.mb05{ margin-bottom:5px; }
.mb10{ margin-bottom:10px; }

/* right+left */
.mlr05 { margin-right:5px;margin-left:5px; }
.mlr10 { margin-right:5px;margin-left:10px; }

/* top+bottom */
.mtb05{ margin-top:5px; margin-bottom:5px; }
.mtb10{ margin-top:10px; margin-bottom:10px; }


/* padding
-----------------------------------------------------------------------------*/
/* all */
.pa05{ padding:5px; }
.pa10{ padding:10px; }

/* top */
.pt05{ padding-top:5px; }
.pt10{ padding-top:10px; }

/* right+left */
.plr05 { padding-right:5px;padding-left:5px; }
.plr10 { padding-right:10px;padding-left:10px; }

/* bottom */
.pb05{ padding-bottom:5px; }
.pb10{ padding-bottom:10px; }

/* fontsize
-----------------------------------------------------------------------------*/
/* fontsize + */
.fsp1 { font-size: 1.071em !important; } /*15px*/
.fsp2 { font-size: 1.143em !important; } /*16px*/
.fsp3 { font-size: 1.286em !important; } /*18px*/
.fsp4 { font-size: 1.429em !important; } /*20px*/
.fsp5 { font-size: 1.572em !important; } /*22px*/
.fsp6{ font-size: 1.715em !important; } /*24px*/

/* fontsize - */
.fsm1 { font-size: 0.929em !important; }  /*13px*/
.fsm2 { font-size: 0.857em !important; }  /*12px*/ 
.fsm3 { font-size: 0.786em !important; }  /*11px*/ 
.fsm4 { font-size: 0.715em !important; }  /*10px*/
.fsm5 { font-size: 0.643em !important; }  /*9px*/


/* font-color
-----------------------------------------------------------------------------*/
.fc-white{ color: #ffffff !important; }
.fc-red{ color: #FF0000 !important; }
.fc-yellow{ color: #FFCC00 !important; }
.fc-black{ color:#000000 !important; }
.fc-gray{ color:#999999 !important; }
.fc-green{ color:#363 !important; }

/* others
-----------------------------------------------------------------------------*/

/* clearfix */
.clearfix:after {content: ".";display: block;clear: both;height: 0;visibility: hidden;}

/* GNV
-----------------------------------------------------------------------------*/
.wrapper {
width: 100%;
height: 50px;
background: #464646;
background: -webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(69,69,69)));
background: -moz-linear-gradient(top,rgb(168,168,168),rgb(69,69,69));
border-top: 2px solid #939393;
position: relative;
margin-bottom: 30px;
}
.container {
width: 960px;
margin: 0 auto;
}
.menu {
height: 50px;
border-left: 1px solid rgba(0,0,0,0.3);
border-right: 1px solid rgba(255,255,255,0.3);
float: left;
}
ul.menu li {
list-style: none;
float: left;
height: 49px;
text-align: center;
background: -webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));
background: -moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);
}
ul.menu li.active a {
background: -webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));
background: -moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);
}

ul.menu li a {
display: block;
padding: 0 17px;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
line-height: 49px;
background: -webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(69,69,69)));
background: -moz-linear-gradient(top,rgb(168,168,168),rgb(69,69,69));
-webkit-transition-property: background;
-webkit-transition-duration: 700ms;
-moz-transition-property: background;
-moz-transition-duration: 700ms;
text-decoration:none;text-shadow: 0 1px 1px rgba(255,255,255,0.4);
}

ul.menu li a:hover {
background: transparent none;
}

.menu a {
text-decoration: none;
color: #363636;
text-transform: uppercase;
font-size: 15px;
font-weight: bold;
}


/* title */
h1 a{ color:#FFF !important;text-shadow:1px 1px 2px #828282, 1px 1px 2px #828282; text-decoration:none; font-size:x-large;}
h3.tit{font-size:large;text-shadow:1px 1px 1px #828282, 1px 1px 1px #828282; margin:10px 0 5px;border-bottom: 1px dotted whitesmoke;}
#wrap {
	margin: 0 auto; 
	list-style: none; 
	position: relative; 
	width: 960px;
}

#wrap h2 {
	padding:20px 0 2px 0;
	text-decoration:none;
	border-bottom: solid #FFF 1px;
	margin-bottom:18px;
	color:#FFF;
	font-size:large;
}

.shadow{
	text-shadow:1px 1px 2px #666,1px 1px 2px #666;
}

.self{
	float:left;
	margin:0 30px 0 0;
}

/* Slider */

.banner { position: relative; overflow: auto; text-align:center; }
.banner li {list-style:none;}
.banner ul li { float: left; overflow:hidden; }
.slider img{width:100%; min-height:350px;}

.banner .dot {
	-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
	-moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
	-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
	-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
	filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}

.banner .dots {	position: absolute;left: 0;right: 0;bottom: 20px;}
.banner .dots li {display: inline-block;width: 10px;height: 10px;margin: 0 4px;	text-indent: -999em;border: 2px solid #fff;	border-radius: 6px;
	
	cursor: pointer;
	opacity: .4;
	
	-webkit-transition: background .5s, opacity .5s;
	-moz-transition: background .5s, opacity .5s;
	transition: background .5s, opacity .5s;
}
	.banner .dots li.active {background: #fff;opacity: 1;}
	
.unslider-arrow{position:absolute; top:45%; z-index:20;}
.prev{left:10px;}
.next{right:10px;}

/* Copyright */

#copyright{
	clear:both;
	margin-top:30px;
	padding:10px 0 40px 0;
	font-size:10px;
	line-height:12px;
	border-top:#CCC 1px solid;
}

/* pagetop button */
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
	z-index:1;
}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 10px;
}
#page-top a:hover {
    text-decoration: none;
    background:#999;
}

/* */

.intro{ text-align:left;}
.intro td{padding:3px 5px; font-size:larger; vertical-align:top; border-bottom:#999 1px dotted;}
.intro td p{ font-size:large;}
.intro td:first-child{ width:190px;}
.intro td:first-child:after{content:"\69d8"; font-size:small; padding-left:7px;}


/* アコーディオン */
.phototit {
	padding: .5em .75em;
	font-size:larger;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}

.phototit:hover {
  background: #555;
}

.phototit:before {
	content: "> ";
}

/* サムネイル */
#grid {
	width: 960px;
}

#grid ul {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  
  flex-direction: row;
  flex-wrap: wrap;
  flex:100%;
}

#grid li {
	display:table-cell;
	vertical-align:middle;
	width: 300px;
	margin:5px;
}

.obfit{
	width: 300px;
	height: 300px;
	object-fit: cover;
	font-family: 'object-fit: cover;'
}

.obfit100{
	width: 100px;
	height: 100px;
	object-fit: cover;
	font-family: 'object-fit: cover;'
}


a:hover {
  opacity: 1;
  -webkit-animation: flash 1s;
  animation: flash 1s;
}

@-webkit-keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}

.obf_left_top {
  object-position: 0 0
}
.obf_right_bottom {
  object-position: 100% 100%
}

/* 表タイトル */
.charttitle th {
	text-align:left;
	padding-right:10px;
}
.charttitle td {
	padding-right:10px;
}