@charset "utf-8";
/* CSS Document */

/*2020.8.28-9.6日のみのスタイル*/
.content_head #title_noir_logo {
    position: relative;
    z-index: 2;
    clear: both;
    float: left;
    width: 69%;
    background-image: url(../img/noir20200906/title_logo.png);
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 100%;
}
	.content_head #title_noir {
    position: absolute;
    width: 60.3%;
    right: 0;
	top:0;
	bottom:0;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size:auto 100%;
	background-image: url('../img/noir20200906/img_main_noir.png');
}
.content_head #title_noir img{
	width:100%;
	height:auto;
	vertical-align: bottom;
}
@media screen and (max-width:799px){
.content_head #title_noir_logo{
	position:absolute;
	top:0;
	bottom:0;
	background-position:left 5px center;
}
.content_head #title_noir{
	position: static;
	float:right;
	width:40%;
	background-position:right -30px center;
	background-size:auto 108%;
	background-image:url('../img/noir20200906/img_main_noir.png');
}
}
	
/*2019.10.31日のみのスタイル*/
	#hallobox{
	position: relative;
	background-image:  url(../img/photo/2019_halloween_kabo2.png) , url(../img/photo/2019_halloween_kabo1.png);
	background-repeat:no-repeat;
	background-position:left top,right top;
	}
	@media screen and (max-width:639px){
		#hallobox{background-size:120px auto;}	
	}	
	@media screen and (max-width:479px){
		#hallobox{background-size:90px auto;}	
	}

/*2019.12.26日のみのスタイル*/
.pop_win{
 position: relative;
  width:96%;
  max-width: 1200px;
  margin:auto;
}
.pop_win img{width:100%;height:auto;}


/*
================================================================================================================
 wp-popup
================================================================================================================
*/
.wp_center{
width:96%;
height:100%;
display: table;
top:0;
bottom:0;
left:0;
right:0;
margin:0 1.5%;
background-color: rgba(32,251,247,0.00);}
#inline-wp01{
width:90%;
max-width:640px;
margin:auto;
display: table-cell;
vertical-align: middle;
flex-direction:row;
align-items:center;}
#wp_link{
width:100%;
max-width:640px;
background-image:url(../img/wp/bg_wp01.png);
background-repeat: repeat;
background-size:;
background-position: center top;
text-align:center;
margin:auto;
border: 4px solid #FFFFFF;
border-radius: 12px;
}
#wp_link.mikoto{background-image:url(../img/wp/bg_wp02.png);}
#wp_link.noir{background-image:url(../img/wp/bg_noir.png);}

#wp_link:after{ content: ""; display: block; clear: both; }
#wp_link img{width:100%; height: auto;}
#wp_link .wp_title{width:96%;max-width:700px; margin:20px auto 10px;text-align: center;}
#wp_link .sound_text{color:#FFF; line-height: 140%; font-size: 87.25%;}
#wp_link .wp_size {width:98%; margin:10px auto; display: flex; justify-content: center;}
#wp_link .wp_size ul{width:50%; margin:0px auto 10px auto; }
#wp_link .wp_size ul li{
width:90%;
max-width:800px;
margin:5% 5% 0 5%;
}
#wp_link .wp_size ul.wp_pc li{
border: 2px solid rgba(225,245,255,1.00);
background-color: rgba(32,251,247,1.00);
}
#wp_link .wp_size ul.wp_sp li{
border: 2px solid rgba(248,225,255,1.00);
background-color: rgba(255,200,249,1.00);
}
#wp_link .wp_size ul li.open img{border-radius: 28px;}
#wp_link .btn_01, #wp_link .btn_02 {background-color:#DFFDF8;}
#wp_link .btn_01 img, #wp_link .btn_02 img {opacity:1.0}
#wp_link .wp_size ul li.open img:hover {opacity:0.6}
#wp_link .wp_size ul li.soon{
-ms-pointer-events: none; /* IE 10+ */
-moz-pointer-events: none;
-khtml-pointer-events: none;
-webkit-pointer-events: none;
pointer-events: none;
}
#wp_link .wp_size ul:after{ content: ""; display: block; clear: both; }

.notice{
width:calc(96% - 20px);
margin:2%;
padding: 10px;
border-radius: 6px;
text-align: left;
font-size: 11px;
line-height: 18px;
color: #333;
background-color: rgba(255,255,255,0.80);
}
.notice_01{
width:calc(98% - 20px);
margin:0% auto 5% auto;
padding: 10px;
border-radius: 6px;
text-align: left;
font-size: 11px;
line-height: 18px;
color: #366;
background-color: rgba(200,255,255,0.80);
}

@media screen and (max-width:500px){
#wp_link ul{width:98%; margin:10px auto;display:block;}
#wp_link ul li{width:90%;max-width:176px; margin: 0 auto 10px;}
}