@import "fonts.css";
@import "reset.css";

/* ------------------------------
  font
------------------------------ */

@import url(http://fonts.googleapis.com/css?family=Anton);


/* For modern browsers */
.cf:before,
.cf:after { content:""; display:block; overflow:hidden; }
 .cf:after { clear:both; }
/* For IE 6/7 (trigger hasLayout) */
.cf { zoom:1; }


/*CLASS初期指定*/
.hidden { display: none; visibility: hidden; }
.alignright { float: right;}
.alignleft { float: left; }
.clear { clear: both; }

a { color: #777; }
a:hover { color: #000; }

.page-top {
	background-image: url(../img/bg.gif);
	background-repeat: repeat;
}

html{
	height:100%;
	overflow-y:scroll;
  background-color: #000000;
}
body{
	height:100%;
}

/* ------------------------------
  detail
------------------------------ */

.float-right {
	float: right;
}
.float-left {
	float: left;
}

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

.lr-auto {
	margin-right: auto;
	margin-left: auto;
}

.w20  {width: 20px;}
.w30  {width: 30px;}
.w40  {width: 40px;}
.w50  {width: 50px;}
.w100 {width: 100px;}

.top5 {padding-top: 5px;}
.top10 {padding-top: 10px;}
.top15 {padding-top: 15px;}
.top20 {padding-top: 20px;}
.top30 {padding-top: 30px;}

.btm1  {margin-bottom: 1px;}
.btm2  {margin-bottom: 2px;}
.btm5  {margin-bottom: 5px;}
.btm10 {margin-bottom: 10px;}
.btm15 {margin-bottom: 15px;}
.btm20 {margin-bottom: 20px;}
.btm25 {margin-bottom: 25px;}
.btm30 {margin-bottom: 30px;}
.btm40 {margin-bottom: 40px;}
.btm50 {margin-bottom: 50px;}
.btm100 {margin-bottom: 100px;}

.left5 {margin-left: 5px;}
.left10 {margin-left: 10px;}
.left15 {margin-left: 15px;}
.left20 {margin-left: 20px;}

.right5 {margin-right: 5px;}
.right10 {margin-right: 10px;}
.right15 {margin-right: 15px;}
.right20 {margin-right: 20px;}

.txt80 {font-size: 80%;}
.txt90 {font-size: 90%;}
.txt110 {font-size: 110%;}
.txt120 {font-size: 120%;}
.txt130 {font-size: 130%;}
.txt140 {font-size: 140%;}
.txt150 {font-size: 150%;}
.txt180 {font-size: 180%;}

.lh12 {line-height: 1.2em;}
.lh13 {line-height: 1.3em;}
.lh14 {line-height: 1.4em;}
.lh15 {line-height: 1.5em;}
.lh16 {line-height: 1.6em;}
.lh17 {line-height: 1.7em;}
.lh18 {line-height: 1.8em;}
.lh19 {line-height: 1.9em;}
.lh20 {line-height: 2.0em;}

.hangtxt10 {text-indent: -1.0em;padding-left: 1.0em;display: block;}
.hangtxt15 {text-indent: -1.5em;padding-left: 1.5em;display: block;}
.hangtxt20 {text-indent: -2.0em;padding-left: 2.0em;display: block;}

a.alpha80:hover {
	filter:alpha(opacity=80);
	opacity:0.8;
	-moz-opacity:0.8;
}

a.alpha90:hover {
	filter:alpha(opacity=90);
	opacity:0.9;
	-moz-opacity:0.9;
}


/**************************************************************************************************
TEXT HIGH LIGHT
**************************************************************************************************/

::-moz-selection{
background:#fdd000;
color: #FFF;
}
::selection{
background:#fdd000;
color: #FFF;
}

#wrapper {
	min-width: 1000px;
	background-image:url(../img/main.gif);
	background-repeat: no-repeat;
	margin:0;
	padding:0;
	background-position: center 90px;
}

#bannerL-1 a {
  position: absolute;
	display:block;
	/*width:200px;*/
	top: 120px;
	left: 0px;
	cursor:pointer;
}

a.btn-att {
  position: absolute;
	display:block;
	width:160px;
  padding: 10px;
	top: 330px;
	left: 0px;
	cursor:pointer;
  background-color: #d3bd0d;
  color: #000000;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

a.btn-att:hover {
  background-color: #f9e11e;
}

#bannerL-2 a {
  position: absolute;
	display:block;
	width:200px;
	top: 310px;
	left: 0px;
	cursor:pointer;
}

#bannerR-1 a {
	position: absolute;
	display:block;
	/*width:180px;*/
	top: 120px;
	right: 0px;
	cursor:pointer;
  text-align: right;
}

#bannerR_2 a {
	position:absolute;
  display:block;
	width:180px;
  top:310px;
	right: 0px;
  cursor:pointer;
  text-align: right;
}



#glhead {
	position: absolute;
	top: 0;
	width: 100%;
	min-width: 1000px;
	height: 40px;
	margin: 0px auto;
	padding: 0;
	overflow: hidden;
}

#glhead #lang{
	float: left;
	padding-top: 15px;
	margin-left: 30px;
}
#glhead #lang .jp{ float:left; 	margin-right:20px; }
#glhead #lang .en{ float:left; }

#glhead #lang .jp a {
    display:block;
    width:62px;
	height:12px;
	text-indent: -9999px;
	font-size: 1px;
	line-height: 1px;
	background:url(../img/btn-japanese.gif) no-repeat;
 }
#glhead #lang .en a {
    display:block;
    width:62px;
	height:12px;
	text-indent: -9999px;
	font-size: 1px;
	line-height: 1px;
	background:url(../img/btn-english.gif) no-repeat;
 }
#glhead #lang a:hover {
	background-position: 0 -12px;
 }
#glhead #lang .on a {
	background-position: 0 -12px;
 }

#glhead ul.social {
	float: right;
	padding-top: 6px;
	margin-right: 20px;
	overflow: hidden;
}

#glhead ul.social li {
	float: left;
}

#glhead ul.social li a {
	display: block;
	text-decoration: none;
	font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#glhead ul.social li.facebook a {
	margin-right: 20px;
	color: #527FC3;
}

#glhead ul.social li.youtube a {
	color: #F74434;
}

#glhead ul.social li a .fa {
	vertical-align: middle;
  margin-right: 5px;
	font-size: 22px;
	line-height: 1.0;
	background-image: url(../img/fa_bg.png);
	background-repeat: no-repeat;
	background-position: center 2px;
	-webkit-background-size: 17px 17px;
	background-size: 17px 17px;
}

#glhead ul.social li a .text {
	padding-top: 5px;
	font-size: 13px;
	line-height: 1.3;
	vertical-align: middle;
	color: #CCCCCC;
}

#glhead ul.social li.facebook a:hover {
	color: #76a5ec;
}
#glhead ul.social li.youtube a:hover {
	color: #fd6d60;
}

#glhead ul.social li a:hover .text {
	color: #FFFFFF;
}

#logobox {
	width: 100%;
	min-width: 1000px;
	position: absolute;
	top: 530px;
  /*height: 70px;*//*横長バナーがない時 */
	height: 200px;/* 横長バナー追加時 */
}
#logobox .inrbox {
	width: 960px;
	margin: 0 auto;
}
#box2 {
	width: 1024px;
	margin-right: auto;
	margin-left: auto;
}

#logo {
}

#logo h1{
}

#logo h2{
	color:#fdd000;
	padding-top:10px;
}

#bottom {
	width: 100%;
	padding:0;
	/* margin-top:720px; ←横長バナー追加時 */
  margin-top: 600px;
}

#info {
	width: 100%;
	border-bottom:1px dotted #cccccc;
	background-image: url(../img/bg-trans.png);
	background-repeat: repeat;
	overflow: hidden;
}

#info .inr {
	display: flex;
	justify-content: center;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}

#info .inr #left {
	float: left;
	width: 448px;
	padding:20px 32px 0px 0px;
}
#info .inr #right {
	float: right;
	width: 448px;
	padding:0px 0px 0px 31px;
	border-left:1px dotted #CCC;
}
#info #head{ margin-bottom: 15px; }
#info #head h3 { float: left; padding-right:10px; }
#info #head p { float: left; }

#info h4 {
	font-size:93%;
	line-height:1.6em;
	color:#FFFFFF;
	padding-bottom:5px;
}
#info h4 span {
	color:#ff516d;
	padding-right:15px;
}
#info .more { margin-top: 45px; }




#icon { height:18px; width:18px; position: absolute; }
*html #icon { z-index:9999; position: absolute; }

#icon a{ display:block; height:18px; width:18px; }
#icon a:hover {
    opacity: .65; /* Standard: FF gt 1.5, Opera, Safari */
    filter: alpha(opacity=65); /* IE lt 8 */
    -ms-filter: "alpha(opacity=65)"; /* IE 8 */
    -khtml-opacity: .65; /* Safari 1.x */
    -moz-opacity: .65; /* FF lt 1.5, Netscape */
}
.icon_twitter{ left:694px; top:19px; }
.icon_blog{ left:840px; top:19px; }
.icon_blogEN{ left:880px; top:19px; }



#info #head h3 {
	float: left;
	padding-right:10px;
}
#info #head .news {
	width:99px;
	height:18px;
}
#info #head .twitter {
	width:172px;
	height:18px;
	float: left;
	border-right:1px solid #CCC;
	padding: 20px 45px 0px 0px;
}
#info #head .blog {
	width:81px;
	height:18px;
	float: left;
	padding: 20px 0px 0px 18px;
}
#head h3 a{
	display: block;
	height: 18px;
}
#head .icon { height:18px; width:18px; float: left; }
*html #head .icon { z-index:9999; }

#head .icon a{ display:block; height:18px; width:18px; }
#head .icon a:hover {
    opacity: .65; /* Standard: FF gt 1.5, Opera, Safari */
    filter: alpha(opacity=65); /* IE lt 8 */
    -ms-filter: "alpha(opacity=65)"; /* IE 8 */
    -khtml-opacity: .65; /* Safari 1.x */
    -moz-opacity: .65; /* FF lt 1.5, Netscape */
}

#head .news a{ width:99px; }
#head .twitter a{ width:172px; }
#head .blog a{ width:81px; }

#head h3 a:hover {
    opacity: .65; /* Standard: FF gt 1.5, Opera, Safari */
    filter: alpha(opacity=65); /* IE lt 8 */
    -ms-filter: "alpha(opacity=65)"; /* IE 8 */
    -khtml-opacity: .65; /* Safari 1.x */
    -moz-opacity: .65; /* FF lt 1.5, Netscape */
}

#info #head p { float: left; }



#info #right #twitter {
	display:none;
}
#tweet { margin-bottom: 20px; }
#tweet .photo {
	float: left;
	display: block;
	height: 30px;
	width: 30px;
}
#tweet .txt {
	width:400px;
	float: left;
	padding-left: 10px;
	font-size: 77%;
	line-height: 1.6em;
	color: #fff;
	margin-top:-5px;
}
#tweet .txt span{
	color: #ffda00;
	display:block;
}


#tweet2 { margin-bottom: 20px; }
#tweet2 .photo {
	float: left;
	display: block;
	height: 30px;
	width: 30px;
}
#tweet2 .txt {
	width:400px;
	float: left;
	padding-left: 10px;
	font-size: 77%;
	line-height: 1.6em;
	color: #fff;
	margin-top:-5px;
}
#tweet2 .txt span{
	color: #ff0000;
	display:block;
}



#info #right #blog {
	display:block;
}
#entry { margin-bottom: 20px; }
#entry .photo {
	float: left;
	display: block;
	height: 30px;
	width: 30px;
}
#entry .txt {
	width:440px;
	float: left;
	font-size: 77%;
	line-height: 1.6em;
	color: #fff;
	margin-top:-5px;
}
#entry .txt span{
	color: #ffda00;
	display:block;
}



#navband {
	position: absolute;
	top: 40px;
	width: 100%;
	min-width: 1000px;
	height:56px;
	background-color: #000;
}
*html #navband {
	z-index:9999;
	position:relative;
}

#navband .inr {
	min-width: 960px;
	margin-right: 30px;
	margin-left: 30px;
	position: relative;
	overflow: hidden;
}

#navband .gnav {
  display: block;
  width: 750px;
  margin-top: 10px;
}



#navband .gnav li {
  float: left;
  margin-right: 40px;
  font-family: Anton;
  font-size: 18px;
  letter-spacing: 0.05em;
}

:lang(en) #navband .gnav li {
  padding-top: 7px;
}

#navband .gnav li span {
  position: absolute;
  display: block;
  clear: both;
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, '游ゴシック', 'YuGothic', 'ＭＳ Ｐゴシック', osaka, sans-serif;
  font-size: 11px;
  letter-spacing: 0em;
  color: #CCCCCC;
}

#navband .gnav li a {
  color: #FFFFFF;
  text-decoration: none;
}
.gnav li:first-letter {
  color: #d3bf13;
}

#navband .gnav li a:hover {
  color: #CCCCCC;
}
#navband .gnav li a:hover span {
  color: #AAAAAA;
}

#navband ul.social {
	float: right;
	padding-top: 0px;
	overflow: hidden;
}

#navband ul.social li {
  float: left;
  margin-left: 10px;
}

#navband ul.social li a {
	display: block;
	text-decoration: none;
	font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#navband ul.social li.facebook a {
	color: #527FC3;
}

#navband ul.social li.youtube a {
	color: #F74434;
}

#navband ul.social li a .fa {
	vertical-align: middle;
	font-size: 34px;
	line-height: 1.0;
	background-image: url(../img/fa_bg.png);
	background-repeat: no-repeat;
	background-position: center 2px;
	-webkit-background-size: 28px 28px;
	background-size: 28px 28px;
  border-radius : 8px;
}

#navband ul.social li.facebook a:hover {
	color: #76a5ec;
}
#navband ul.social li.youtube a:hover {
	color: #fd6d60;
}

/* #navband h3 { float: left; }
#navband #sub { float: right; }
#navband #sub h4 { float: left; padding-left:3px; }
#navband #sub h6 { float: left; }
#navband #sub h5 { float: left; }

#navband h3 a { display: block; padding: 12px 25px; }
#navband h6 a { display: block; padding: 20px 12px; }

#navband a{ display:block; height:30px; }
#navband .prof a{ width:60px; padding: 12px 25px 12px 0px;}
#navband .sche a{ width:72px; }
#navband .gall a{ width:59px; }
#navband .shop a{ width:39px; }
#navband .game a{ width:41px; }
#navband #sub .contact a{ width:71px; padding:22px 12px 0px 12px;display:block;}
#navband #sub .links a{ width:33px; padding: 22px 2px 0px 12px;display:block;}

*html #navband h3 a { display: block; padding: 27px 12px;}
*html #navband h6 a { display: block; padding: 27px 12px; }
*html #navband .prof a{ width:130px; padding: 27px 12px 20px 0px;}
*html #navband .links a{ width:33px; padding: 27px 0px 20px 12px;}

#navband a:hover {
    opacity: .65; Standard: FF gt 1.5, Opera, Safari
} */

#footter {
	background-color:#191919;
	width: 100%;
  min-width: 960px;
	height:100%;
}

#banner {
  width: 100%;
  min-width: 1000px;
  padding-top: 5px;
  padding-bottom: 5px;
  overflow: hidden;
  background-color: #000000;
}
#banner .inr {
	margin-right: 30px;
	margin-left: 30px;
	overflow: hidden;
}
/* #banner .inr .leftbox {
  float: left;
  width: 100px;
  padding-top: 8px;
}
#banner .inr .leftbox img {
  margin-right: 5px;
} */
#banner .inr .rightbox {
	float: right;
	width: 900px;
	text-align: right;
}

#banner .inr .rightbox img {
	margin-left: 5px;
	vertical-align: middle;
}

#banner a:hover {
    opacity: .75;
}

/*
#banner .inr ul {
	float: right;
	width: 800px;
	text-align: right;
}
#banner .inr li {
	margin-left: 1px;
	display: inline-block;
}
#banner #box2 li { float: left; margin-left: 1px; }
#banner a{
	display:block;
}
*/

/*----------------------
twitter-link
----------------------*/
.twitter-link {
	margin-top: 20px;
	font-size: 93%;
	line-height: 1.6em;
	color: #fff;
}
.twitter-link__text {
	margin-bottom: 20px;
}
.twitter-link__list {
	padding-bottom: 5px;
}
.twitter-link__anker {
	text-decoration: none;
	color: #fff;
}
.twitter-link__anker:hover {
	text-decoration: underline;
	color: #fff;
}

#ftr {
  width: 100%;
  min-width: 1000px;
  height: 60px;
}

#ftr .inr {
	margin-right: 30px;
	margin-left: 30px;
	overflow: hidden;
}
#ftr #link {
    float:right;
}
#ftr #link h5 { float: left; }
#ftr #link .contact a{ width:71px; padding: 12px;display:block;}
#ftr #link .links a{ width:33px; padding: 12px 0px 12px 12px;display:block;}
#ftr .copy {
  width: 500px;
	text-align: right;
	float:right;
  margin-top: 15px;
}
#ftr .copy .logo {
  vertical-align: middle;
}
#ftr .copy .copyright {
	font-size: 10px;
	color: #949393;
  vertical-align: middle;
  margin-right: 10px;
}

#lang a:hover {
    opacity: .65; /* Standard: FF gt 1.5, Opera, Safari */
    filter: alpha(opacity=65); /* IE lt 8 */
    -ms-filter: "alpha(opacity=65)"; /* IE 8 */
    -khtml-opacity: .65; /* Safari 1.x */
    -moz-opacity: .65; /* FF lt 1.5, Netscape */
}

#bottom #info .more { height: 25px; width: 98px; }
#bottom #info .more a{
	background-image:url(../img/btn-more.gif);
	background-repeat:no-repeat;
	height: 25px;
	width: 98px;
	display:block;
}
#bottom #info .more span{ display:none; }
#bottom #info .more a:hover{ background-position:0px -25px; }


#tweet a:hover,#tweet2 a:hover {
    opacity: .65; /* Standard: FF gt 1.5, Opera, Safari */
    filter: alpha(opacity=65); /* IE lt 8 */
    -ms-filter: "alpha(opacity=65)"; /* IE 8 */
    -khtml-opacity: .65; /* Safari 1.x */
    -moz-opacity: .65; /* FF lt 1.5, Netscape */
}
#left h4 a { color: #FFF; text-decoration:none; }
#left h4 a:hover { color: #fff; text-decoration:underline; }
#left h4 a:active { color: #999; }

#tweet p a { color: #FFF; text-decoration:none; }
#tweet p a:hover { color: #454545; text-decoration:underline; }
#tweet p a:active { color: #999; }

#tweet2 p a { color: #FFF; text-decoration:none; }
#tweet2 p a:hover { color: #454545; text-decoration:underline; }
#tweet2 p a:active { color: #999; }

#tweet p span a { color: #ffda00; text-decoration:none; }
#tweet p span a:hover { color: #454545; text-decoration:underline; }
#tweet p span a:active { color: #999; }

#tweet2 p span a { color: #ff0000; text-decoration:none; }
#tweet2 p span a:hover { color: #454545; text-decoration:underline; }
#tweet2 p span a:active { color: #999; }

#entry p a { color: #FFF; text-decoration:none; }
#entry p a:hover { color: #454545; text-decoration:underline; }
#entry p a:active { color: #999; }

#entry p span a { color: #ffda00; text-decoration:none; }
#entry p span a:hover { color: #454545; text-decoration:underline; }
#entry p span a:active { color: #999; }