@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

@charset "utf-8";

/* reset */
html * {max-height: 999999px;} /* font size bug fix */
html,body{margin:0px;padding:0px;width:100%;font-size:10px;-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased; background-color: #fff;}
ul,ol,li,dl,dd,dt,input,h1,h2,h3,h4,h5,h6,p,b,input,button,textarea,fieldset,legend,td,th{margin:0px;padding:0px;font-weight:normal;word-break:keep-all}
li{list-style:none}
fieldset,img,a{border:0px}
a{text-decoration:none}
legend,.blind{position:absolute;top:0;left:-10000px;width:0;height:0;overflow:hidden;font-size:0;line-height:0}
caption{display:none}
button,label{cursor:pointer}
button{overflow:visible\9}	/* button fix for ie8 */
input,textarea,button{ font-family:'Noto Sans JP', sans-serif; }
table{width:100%;border-collapse:collapse;border-spacing:0;text-align:left}
table th, table td{text-align:left}
input::-webkit-input-placeholder{color:#929292}
input::-moz-placeholder{color:#929292}
input:-moz-placeholder{color:#929292}
input:-ms-input-placeholder{color:#929292}
textarea::-webkit-input-placeholder{color:#929292}
textarea::-moz-placeholder{color:#929292}
textarea:-moz-placeholder{color:#929292}
textarea:-ms-input-placeholder{color:#929292}
input:focus::-webkit-input-placeholder{color:transparent!important}
input:focus::-moz-placeholder{color:transparent!important}
input:focus:-moz-placeholder{color:transparent!important}
input:focus:-ms-input-placeholder{color:transparent!important}
textarea:focus::-webkit-input-placeholder{color:transparent!important}
textarea:focus::-moz-placeholder{color:transparent!important}
textarea:focus:-moz-placeholder{color:transparent!important}
textarea:focus:-ms-input-placeholder{color:transparent!important}
header, footer, section, article, aside, nav, address { display: block; margin:0; } /* ie8 */

.clear_wrap:before,.clear_wrap:after{content:" ";display:table}
.clear_wrap:after{clear:both}
.clear_wrap{*zoom:1}
.clear_ine{clear:both}
.ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.appearance{border:0;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none}
.boxsizing{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.mobilescrolling{-webkit-overflow-scrolling:touch}

.bg_cover{background-size:cover;background-position:center center;background-repeat:no-repeat}
.bg_cover .bg_img{display:none}

.mobile,
.tablet{display:none!important}

.ani{-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}

.contains{position:relative;margin:0 auto;max-width:1760px}

.header{margin-bottom:50px}
.header .img{display:block;width:100%}

.main{padding-bottom:80px;overflow:hidden}
.main .menu{width:101%;overflow:hidden}
.main .menu_box .title{position:relative;margin-bottom:18px;padding-left:35px;height:40px;line-height:38px; border-bottom:1px solid #d3d3d3;}
.main .menu_box .icon{display:block;position:absolute;left:0;top:50%;margin-top:-2px;width:20px;height:4px;background:#ff6060}
.main .menu_box .title .text{font-size:22px;color:#ff6060;font-weight:700}
.main .menu_box .title .btn_more{display:block;position:absolute;right:0;top:0;font-size:15px;color:#5a5a5a;font-weight:700}
.main .menu_box a{display:block}
.main .menu_box .img{display:block;}
.main .menu_box .notice_list li{margin-bottom:2%}
.main .menu_box .notice_list a{display:block;padding-left:30px;height:30px;line-height:30px;font-size:21px;color:#5e5e5e;background:url("../img/dot.png") no-repeat left center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.main .menu_box .notice_list a:hover{text-decoration:underline}

@media screen and (max-width:1024px) {
	.header{margin-bottom:80px}
	.main{padding-bottom:60px}
	.main .menu{position:relative;padding-right:50%;width:auto}
	.main .menu_box{padding:0 20px}
	.main .menu_box.fanclub,
	.main .menu_box.magazine,
	.main .menu_box.movie{float:none;width:auto}
	.main .menu_box.notice{float:none;position:absolute;right:0;top:0;width:49%}
	.main .menu_box .notice_list a{padding-left:20px}
}

@media screen and (max-width:720px) {
	.header{margin-bottom:40px}
	.main{padding-bottom:40px}
	.main .menu{padding:0}
	.main .menu_box{padding:0 30px}
	.main .menu_box.notice{position:relative;right:auto;top:auto;margin-top:30px;width:auto}
}

/* modal */
.modal-content {
	width: 75%;
	margin: 0;
	padding: 10px 20px;
	border: 2px solid #ff6060;
	background: #fff;
	position: fixed;
	display: none;
	z-index: 2;
	font-size: 16px;
	max-height: 90%;
	overflow-y: auto;
	overflow-x: hidden;
	-moz-box-sizing: border-box;
}


 
@media screen and (max-width:720px) {
	.modal-content {
    max-height: 90%;
    overflow-y:auto;
    overflow-x:hidden;
    font-size: 12px;
 }
	.modal-content p{
	word-break: break-all;
	}
.menu_box.magazine, .menu_box.fanclub {
	padding-bottom:40px;
}
} 


#modal-overlay {
	z-index: 1;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 120%;
	background-color: rgba( 0,0,0, 0.5 );
}

.button-link {
	color: #00f ;
	text-decoration: underline ;
}
 
.button-link:hover {
	cursor: pointer ;
	color: #f00 ;
}

.title {font-size:22px;color:#ff6060;font-weight:700;margin-bottom: 20px;}

.button-ue{
	text-align:center;
	
}
.mail-button{
	margin:0 auto;
	background-color: #ff6060;
	background: -webkit-gradient(linear,left top, left bottom, from(#ff6060), color-stop(80%,#ffaf90), to(#ffaf90));
	background: -moz-linear-gradient(left top, #ff6060, #ffaf90 80%, #ffaf90);
	cursor: pointer;
	font-weight: bold;
	text-align:center;
	width:200px;
	padding: 10px;
	margin-bottom: 20px;
}
.mail-button a{
	color:#fff;
}

.modal-title{
    font-size: 146.2%;
    font-weight: 900;
    margin-bottom: .5em;
}
.modal-date{
    margin-bottom: 1em;
    font-size: 92.3%;
}

@media screen and (min-width: 721px) {
.main .menu_box{height: 300px;float:left;padding:0 2%;width:33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

.youtube {
  text-align:center;
}

.youtube ul{
 font-size:20px; 
}

.youtube li{
 list-style-type: none;
}
}



@media screen and (max-width:720px) {

.main .menu_box{float:left;padding:0 2%;width:33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

.youtube ul{
 font-size:18px; 
 text-align:center;
}

.youtube li{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  list-style-type: none;
  padding-bottom:20px;
}

.youtube li iframe{
  position: absolute;
  top: 0;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box;
  padding-bottom:20px; 
}
}