@charset "utf-8";
/*--------------------------------------------
reset
----------------------------------------------*/
div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
  margin: 0;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

.num {
	margin: 0;
	position: fixed;
	right: 10px;
	top: 10px;
}


/*--------------------------------------------
基本設定（body,a,table等） CSS
----------------------------------------------*/

html {
	font-size: 62.5%;/* sets the base font to 10px for easier math */
}
body {
	font-size: 16px;
	font-size: 1.6rem; /* sets the default sizing to make sure nothing is actually 10px */
	/*font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Verdana, Geneva, sans-serif;*/
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	line-height:1.3;
	margin: 0px;
	padding: 0px;
	width:100%;
	min-width: 320px;
	color: #433228;
	background:#FFFFFF;
}
html, body {
	height: 100%;
}
.wrap{
	overflow:hidden;
}
/* ------------------  */

img {
	border-style: none;
	vertical-align:bottom;
}

a{
	color: #065262;/*#433228;*/
	text-decoration: none;
}
a:active {
	color: #C5441F;
}
a:link {
	color:#065262;
}
a:visited {
	color: #433228;
}
a:hover {
	color: #7f220d;/*#C5441F;*/
	text-decoration: underline;
    transition: all 0.5s;	
}
a:hover img{
	filter: alpha(opacity=60);
	-moz-opacity:0.60;
	opacity:0.60;
}
div {
	display:block;
}
address {
	font-style: normal;
}

/*----------------------------------------
	clearfix
-----------------------------------------*/
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	height: 0px;
	font-size: 0.1px;
	line-height: 0.1px;
}
.clearfix {
	display: inline-block;
	position: relative; /* DW */
}

/* Hides from IE-mac \*/
.clearfix {
	display: block; 
}
/* End hide from IE-mac */


/*----------------------------------------------------
 ヘッダー　header
----------------------------------------------------*/

header{
	margin-top:10px;
	background-color:rgba(190,190,190,0.5);
	width:100%;
	height:70px;
	position:absolute;
	/*position:fixed;
	top:0;
	z-index:9999;*/
}

/* ロゴ */
.logo {
	margin:5px 1%;
	padding:0;
	float:left;
	width:18%;
	max-width:168px;
	vertical-align:middle;
}
.logo img{
	width:100%;
	height:auto;
}
/* --- --- --- --- --- 
　グローバルナビ 
--- --- --- --- --- ---　*/
/* ヘッダーナビ */
.header_nav {
    float: right;
    width: 80%;
}
.g-nav{
	margin:10px 0;
	width:83%;
	float:left;
	display:table;
}
.g-nav li {
	margin:0 0 0 2%;
	padding:5px 0;
	float:left;
	display:table-cell;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-size:2.4rem;
	box-sizing: border-box;
	text-shadow:/* -1px -1px 1px rgba(0, 0, 0, 0.2), */
	1px 1px 1px rgba(255, 255, 255, 0.3);	
}
.g-nav li a {
	padding:5px;
	text-align:center;
	vertical-align:middle;
	text-decoration:none;
	color:#000;
}
.g-nav li a:hover {
	text-decoration:none;
	background-color:rgba(255,255,255,0.7);
}
.g-nav_sns{
	margin:5px 0;
	width:15%;
	position:absolute;
	top:10px;
	right:0;
}
.g-nav_sns li{
	margin-left:5%;
	float:left;
}
.g-nav_sns li img{
	width:100%;
	max-width:34px;

}

/* --- --- --- --- --- 
 構造 
--- --- --- --- --- */
.container{
	clear:both;
	margin:0 auto;
	padding:0;
	width:100%;
	text-align:center;
}
.container:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	height: 0px;
	font-size: 0.1px;
	line-height: 0.1px;
}
.inner_cont{
	margin:0 auto;
	width:100%;
	max-width:960px;		
}

.area1{
	padding-top:100px;
	min-height:1220px;
}
.area2{
	padding-top:40px;
	padding-bottom:40px;
	min-height:1700px;
}
.area3{
	padding-top:40px;
	padding-bottom:40px;
	height:100%;
	min-height:2060px;
}
.area4{
	padding-top:40px;
	padding-bottom:40px;
	min-height:500px;
}
.area5{
	padding-top:40px;
	min-height:900px;
}
/** main-area --------------------------------------- **/

#main-area{
	height:100%;
	max-height:1400px;
	background:url(../../images/bg_area1.jpg) 0 0 no-repeat;
	background-size:cover;
}
#main-area .inner_cont{
	position:relative;
}
#main-area_sp{
	display:none;
}
.txt_final{
	margin-top:20px;
	margin-left:10px;
}
.player1{
	position:absolute;
	top:-50px;
	left:420px;
	background:url(../../images/bg_splash1.png) -90px 80px no-repeat;
}
.player2{
	position:absolute;
	top:80px;
	left:660px;
}
.player3{
	position:absolute;
	top:180px;
	left:380px;
}
.player4{
	position:absolute;
	top:450px;
	left:560px;
	background:url(../../images/bg_splash2.png) -40px 90px no-repeat;
}
.effect1{
	position:absolute;
	top:450px;	
	left:860px;
}
.effect2{
	position:absolute;
	top:450px;	
	left:340px;
}
.effect3{
	position:absolute;
	top:500px;	
	left:800px;
}


.effect4{
	position:absolute;
	top:860px;	
	left:550px;
}


.txt_main{
	position:absolute;
	top:300px;
	left:-500px;
}
.txt_sub{
	position: absolute;
	top: 660px;
	left: -210px;
}
.txt_sub2{
	position:absolute;
	top:970px;
}

/** comments-area --------------------------------------- **/

#comments-area{
	clear:both;
	margin:0 auto;
	height:100%;
	background:	url(../../images/bg_trinita.png) 0 0 no-repeat #000;
	color:#fff;
	position:relative;
}
.img_bgline1{
	position:absolute;
	top:-100px;
	left:-20px;
}
.comment_block{
	/*margin:40px auto;	*/
}
.comment_box{
	margin-top:40px;
	padding:20px 2%;
	float:left;
	width:56%;
	max-width:96%;
	line-height:1.5;
	font-size:16px;
	min-height:300px;
	background-color:rgba(60,62,179,0.25);
}
.comment_name{
	margin: 5px 0 20px 0;
	font-size:30px;
	font-size:3.0rem;
	border-bottom:solid 1px #FFB607;
}
.comment_img_l{
	float:left;
	width:40%;
	height:auto;
}
.comment_img_r{
	float:right;
	width:40%;
	height:auto;
}


/** games-area --------------------------------------- **/
#games-area{
	clear:both;
	margin:0 auto;
	height:100%;
	background:url(../../images/bg_area3-line.png) -100px -140px no-repeat,
	url(../../images/bg_area3.gif) 0 0 no-repeat #EAEFF0;
	background-size:contain, cover;
	position:relative;
}
.img_bgline2{
	position:absolute;
	top:0px;
	left:-50px;
}
.img_splash2{
	position:absolute;
	top:100px;
	left:850px;	
}

.col-4 li{
	position: relative;
    min-height: 1px;
	padding: 0;
	float: left;
	margin: 1%;
	width: 23%;
	box-sizing: border-box;
	overflow:hidden;
}
.col-4 li img{
	max-width:100%;
	height:auto;
}
.scale img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.scale:hover img {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}



/** schedule-area --------------------------------------- **/
#schedule-area{
	clear:both;
	margin:0 auto;
	background:url(../../images/bg_area4.jpg) 0 0 no-repeat #304856;
	background-size:cover,cover;
}
#schedule-area .inner_cont{
	position:relative;	
}
.tbl_schedule{
	margin-bottom:40px;
	width:100%;
	background-color: #EFEFEF;
	font-size:18px;
	font-size:1.8rem;
	border:solid 1px #B7B7B7;
}
.tbl_schedule th{
	padding:5px 0;
	background-color:#000;
	color:#fff;
}
.tbl_schedule td{
	padding:10px;
	border-top:solid 1px #B7B7B7;
}
.tbl_schedule tr:nth-child(2n+1) {
	background: #fff;
}
.tbl_schedule td p{
 display:inline-block;
 vertical-align:middle;
}
.ico-area{
	padding-right:10px;	
}

.tbl_new{
	margin-bottom:40px;
	width:100%;
	background-color: #EFEFEF;
	font-size:18px;
	font-size:1.8rem;
	border:solid 1px #B7B7B7;
}
.tbl_new th{
	padding:5px 0;
	background-color:#000;
	color:#fff;
}
.tbl_new td{
	padding:0;
	width:33%;
	text-align:center;
	vertical-align:middle;
}
.tbl_new td img{
	padding-bottom:10px;
}

.tbl_new_inner{
	width:100%;
	background-color:#fff;
}
.tbl_new_inner td{
	padding:5px 2%;
	width:29%;
}
.txt_score{
	font-size:47px;
	font-size:4.7rem;
}
.last-effect0{
	position:absolute;
	top:0;	
	left:-5px;
}

/** last-area --------------------------------------- **/

#last-area{
	clear:both;
	margin:0 auto;
	background:url(../../images/bg_area5.jpg) 0 0 no-repeat;
	background-size:cover;
}

#last-area .inner_cont{
	position:relative;
}
.last_message{
	margin-top:0;
	height:400px;
	position:relative;
}
.last-effect1{
	position:absolute;
	top:50px;	
	left:0px;
}
.last-effect2{
	margin-top:-50px;
	position:absolute;
	top:0px;	
	left:-200px;
}
.last-effect3{
	position:absolute;
	top:65px;	
	left:0px;
}
.last_effect4{
	position:absolute;
	top:40px;
	left:162px;
}
.last-effect5{
	position:absolute;
	top:40px;	
	left:620px;
}
#last-area h3{
	margin:20px auto;
	text-align:center;
}

footer{
	padding:40px 0;
	background-color: #040321;
}
.copyright p {
	color: #ccc;
	font-size: 11px; font-size: 1.1rem;
	text-align:center;
	padding: 5px 0px;
}

#pagetop{
	position:fixed;
	bottom:20px;
	right:15px;
	z-index: 9999;
}


h2.index_title{
	margin-bottom:40px;
	padding-top:50px;
	text-align:center;
	position:relative;
	z-index:1000;
}
.area2 h2.index_title{
	background:url(../../images/txt_area2.png) 0 0 no-repeat;
}
.area3 h2.index_title{
	background:url(../../images/txt_area3.png) 0 0 no-repeat;
}
.area4 h2.index_title{
	background:url(../../images/txt_area4.png) 0 0 no-repeat;
}


/***********************************
幅が768px以下の場合
***********************************/
@media screen and (max-width: 768px){
	#main-area{
	display:none;
}
#main-area_sp{
	display:block;
	background:url(../../images/bg_area1.jpg) 0 0 no-repeat;
	background-size:cover;
}
#main-area_sp img{
	margin-top:70px;
	width:100%;
	height:auto;
}
.area1{
	padding-top:60px;
	min-height:100px;
}
.area3{
	min-height:1500px;
	background-color:#C5C7C5;
}
.last_effect4 {
    left: 10%;
}

}
/*.player1{
	left:320px;
	background:url(../../images/bg_splash1.png) -90px 80px no-repeat;
}
.player2{
	left:560px;
}
.player3{
	left:280px;
}
.player4{
	left:460px;
	background:url(../../images/bg_splash2.png) -40px 90px no-repeat;
}
}

/***********************************
幅が640px以下の場合
***********************************/
@media screen and (max-width: 640px){

/*.area2{
	padding-top:40px;
	min-height:1700px;
}
.area3{
	padding-top:40px;
	min-height:300px;
}
.area4{
	padding-top:40px;
	min-height:400px;
	background-position: 0 0!important;
}
.area5{
	padding-top:40px;
	height:100px;
}*/
.area1,.area2,.area3,.area4,.area5{
	padding-top:0;	
	overflow:hidden;
	min-height:300px;
	
}
header{
	margin-top:0;
}
.logo {
	margin:10px auto 0;
	float:none;
}
.logo img{
	width:100%;
	height:auto;
}
.header_nav {
	margin-top:-10px;
    float: none;
    width: 100%;
}
.g-nav{
	width:100%;
	float:none;
	display:table;
}
.g-nav li {
	float:left;
	font-size: 15px;
	font-size:1.5rem;
}
.g-nav_sns {
	margin:0;
	width:20%;	
}
.g-nav_sns li img{
	width:100%;
	max-width:24px;
}

.inner_cont{
	margin:0 auto;
	width:90%;
	overflow:hidden;
}
.txt_main, .txt_sub{
	left:-100px;	
}
.txt_final img, .txt_main img, .txt_sub img, .txt_sub2 img{
	display:none;	
	}
h2.index_title{
	margin-bottom:10px;
	padding-top:40px;
}
h2.index_title{
	background-size:80% auto!important ;
}
img{
	max-width:100%;
	height:auto;
}

.comment_box{
	margin-top: 0;
	margin-bottom:20px;
	width:100%;
}
.comment_img_l,.comment_img_r{
	float:none;
	width:100%;
}
.col-4 li{
	margin: 1%;
	width: 31%;/*48%;*/
}
.last_message{
	height:300px;
}
.last_effect4{
	left:0;
}
.last_effect4 img{
	max-width:100%;
	height:auto;
}
.tbl_schedule td{
	text-align:center;
	font-size:14px;
	font-size:1.4rem;
	vertical-align:middle;
}
.tbl_new{
	margin-bottom:0;
	font-size:14px;
	font-size:1.4rem;
}

}

.featherlight .featherlight-content {
   /* padding: 5px 5px 2px 5px;*/
   background-color:eee;
   padding:1px;
    border-bottom:0px solid #ccc;
}
.featherlight .featherlight-content p{
	padding:2px 5px 0 ; 
    text-align: right;
    font-size: 14px;
    font-size: 1.4rem;
}
.featherlight .featherlight-content p:before{
	content:">>";
}