@charset "utf-8";


/******************************************
 * リセット
 *****************************************/
* { margin: 0; padding: 0; }
body { 
	font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-size: 100%;
	/*letter-spacing: 0.05em;*/
	line-height: 2;
	color: #000;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 
dl, dt, dd, ol, ul, 
table, caption, tbody, tfoot, thead, tr, th, td {
	font-size: 100%;
	font-weight: normal;
	line-height: 150%;
	color: #000000;
}

ul, ol {  list-style: none; }
img { vertical-align: bottom; border: none; max-width: 100%; height: auto; }
table { border-collapse: collapse; }
strong { font-weight: bold; }
em { font-style: normal; font-weight: normal; }
button{ background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; border: 1px solid #000; width: 100%; } /* MOVIEで使用 */
a { text-decoration: none; }



/******************************************
 * 汎用クラス
 *****************************************/
.hidden { display: none; }

.clearfix:after { content: ""; display: block; clear: both; }

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

/******************************************
 * PC・スマホ
 *****************************************/

#page { overflow: hidden; }

#header { background: #000; }
#header .gmenu ul li.active { background-color: #FF0070; }
#header .gmenu ul li:not(.disabled):hover { background-color: #FF0070; }
#header .gmenu ul li:not(.disabled):hover img { opacity: 1.0; }
#header .gmenu ul li img { vertical-align: middle; padding-bottom: 1px; }
.mac #header .gmenu ul li img { vertical-align: middle; padding-bottom: 2px; margin-bottom: 2px; }

#footer { background: #000; }
#footer .banner ul { text-align: center; }
#footer .banner ul li { display: inline-block; margin: 0 5px 10px; }
#footer .copyright p img { display: block; margin: 0 auto; }

#overray { background: #000; position: fixed; z-index: 1000; left: 0; right: 0; top: 0; bottom: 0; }

#opening { background: #fff url(../images/opening01.png) no-repeat center; background-size: cover; position: fixed; left: 0; right: 0; top: 0; bottom: 0; }
#opening .text { position: absolute; top: 5%; left: 5%; width: 90%; height: 90%; }
#opening .text img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; opacity: 0.0; filter: blur(10px); transition: 0.3s; }
#opening .text img.animation { opacity: 1.0; filter: blur(0px);  }

#content { position: relative; }

.eyecatch .wrapper { position: relative; }
.eyecatch .bg { margin: 0 -12%; }
.eyecatch .text { position: absolute; right: 0; top: 0; width: 100%; height: 100%; max-width: 18%; }
.eyecatch .text img { position: absolute; opacity: 0.0; filter: blur(10px); transition: 0.3s; }
.eyecatch .text img.animation { opacity: 1.0; filter: blur(0px);  }

.boxes .wrapper { padding: 0; }
.boxes ul.box-list > li { max-width: 240px; height: 200px; box-sizing: border-box; background: #fff; margin: 0 auto; }
.boxes ul.box-list > li.news { border: 1px solid #E61E6A; }
.boxes ul.box-list > li.twitter { border: 1px solid #E61E6A; overflow: hidden; }
.boxes ul.box-list > li.movie { background: #000; }
.boxes ul.box-list > li.movie img { width: 100%; }
.boxes .box .box-header img { width: 100%; }
.boxes .box .box-content { padding: 5px 10px; }
.boxes .news ul { margin-bottom: 5px; overflow: auto; height: 100px; }
.boxes .news ul li { border-bottom: 1px solid #E61E6A; padding-bottom: 5px; margin-bottom: 5px;	}
.boxes .news p.date { font-size: 14px; line-height: 100%; background: #E61E6A; float: left; width: 22%; padding: 5px 2px; box-sizing: border-box; text-align: center; letter-spacing: -0.05em; font-weight: 700; }
.boxes .news p.message { font-size: 12px; float: right; width: 78%; box-sizing: border-box; padding-left: 5px; }
.boxes .news .more a { font-size: 15px; background: #E61E6A; padding: 3px 15px; display: inline-block; }
.mac .boxes .news .more a { font-size: 15px; background: #E61E6A; padding: 0 15px; display: inline-block; }
.boxes .twitter iframe { width: 218px !important; }


/******************************************
 * スマホ
 *****************************************/
@media screen and (max-width: 768px) {

img { display: block; margin-left: auto; margin-right: auto; }

.visible-sm { display: block; }
.visible-sm-block { display: block; }
.visible-sm-inline { display: inline; }
.visible-sm-inline-block { display: inline-block; }
.hidden-sm { display: none; }

.wrapper { padding: 0 10px; }

#header { padding: 2% 0; position: relative; }
#header .logo img { display: inline; width: 20%; margin-left: 10px; }
#header .gmenu ul { padding: 0 10px; margin-bottom: 10px; }
#header .gmenu ul li { padding: 10px; }
#header .sns ul { text-align: center; }
#header .sns ul li { display: inline-block; margin: 0 10px; }
#header .gmenu-container { position: fixed; z-index: 500; right: -200px; top: 0; bottom: 0; width: 200px; background: #000; }
#header .gmenu-open-button { position: absolute; right: 10px; top: 0; bottom: 0; margin: auto 0; width: 44px; height: 44px; }
#header .gmenu-close-button { text-align: right; padding: 20px; }
#header .gmenu-close-button img { display: inline; }

#footer { padding: 5% 0; }

.boxes .wrapper { padding: 0 20px 40px; }
.boxes ul.box-list { padding: 3% 0; }
.boxes ul.box-list > li { width: 44%; max-width: 100%; height: 230px; box-sizing: border-box; background: #fff; margin: 0 20px; float: left; }
.boxes ul.box-list > li:not(:last-child) { margin-bottom: 3%; }
.boxes ul.box-list > li.ad img { width: 100%; }
.boxes ul.box-list > li.movie { height: 265px; }
.boxes .twitter iframe { width: 300px !important; }

}

@media screen and (max-width: 480px) {
	
#header .logo img { display: inline; width: 35%; margin-left: 10px; margin-bottom: 10px }

.boxes .wrapper { padding: 0 20px 0; }
.boxes ul.box-list > li { width: 100%; margin: 0 auto 20px; float: none; }
.boxes ul.box-list > li.ad { height: auto; }
.boxes ul.box-list > li:not(:last-child) { margin-bottom: 5%; }
.boxes .twitter iframe { width: 320px !important; }

}

/******************************************
 * スマホ以外
 *****************************************/
@media screen and (min-width: 769px) {

.pull-left { float: left; }
.pull-right { float: right; }
.center-block { margin-left: auto; margin-right: auto; }
.table { display: table; table-layout: fixed; width: 100%; overflow: hidden; }
.table .column { display: table-cell; vertical-align: middle; }

.visible-sm { display: none; }
.visible-sm-block { display: none; }
.visible-sm-inline { display: none; }
.visible-sm-inline-block { display: none; }

.wrapper { padding: 0 10px; max-width: 980px; margin-left: auto; margin-right: auto; }

#header { padding: 18px 0 4px; }
#header .logo { float: left; width: 20%; }
#header .gmenu { float: left; width: 70%; padding-top: 10px; }
#header .gmenu ul { margin-left: 30px; }
#header .gmenu ul li { display: inline-block; padding: 0 10px; margin-bottom: 5px; }
#header .sns { float: right; width: 10%; padding-top: 35px; }
#header .sns ul { text-align: center; }
#header .sns ul li { display: inline-block; }

#footer { padding: 35px 0 30px; }
#footer .banner { margin-bottom: 10px; }

.boxes ul.box-list { padding: 20px 0; width: 520px; margin-left: auto; margin-right: auto; }
.boxes ul.box-list > li { float: left; margin: 0 10px; }
.boxes ul.box-list > li:not(:last-child) { margin-bottom: 20px; }

}

/******************************************
 * PC
 *****************************************/
@media screen and (min-width: 980px) {

a:hover img { opacity: 1.0; }
a:hover img.hover { opacity: 1.0; }
a[name]:hover img { opacity: 1; }
button:hover img { opacity: 0.7; }
button:hover img.hover { opacity: 1.0; }

.boxes { display: block; position: fixed; bottom: 10px; left: 0; right: 0; }
.boxes ul.box-list { padding: 0; width: auto; }
.boxes ul.box-list > li { float: left; width: 24.49%; margin: 0 0.34%; }
.boxes ul.box-list > li:first-child { margin-left: 0; }
.boxes ul.box-list > li:last-child { margin-right: 0; }
.boxes ul.box-list > li:not(:last-child) { margin-bottom: 0; }

}

/******************************************
 * PC(高解像度)
 *****************************************/
@media screen and (min-width: 1400px) {

.eyecatch .bg { margin: 0; }
.eyecatch .bg img { width: 100%; }

}