@charset "UTF-8";

/************************************************************
*
*　白猫温泉物語
*
************************************************************/


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
　MODULE
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.info_area{
	padding:10% 0 10% 0;
	}
.header_b01{
	text-align:center;	
}

.header_b01 li{
	display:inline-block;
	vertical-align:middle;
	width:46%;
	margin:0 auto;
	padding:4% 1.5% 0 1.5%;
}

.header_b01 li:last-child{
	padding:4% 1.5% 5% 1.5%;
}

.kv_cont{
	position:relative;
	display:block;
	height:0;
	width:100%;
	background-image: url(/shironekoproject/lp/collabo_chichibu/assets/img/key_pc.jpg);
	background-size: cover;
	padding-top:53.6%;
	}
@media screen and (max-width: 640px){
.kv_cont{
	position:relative;
	display:block;
	height:0;
	width:100%;
	background-image: url(/shironekoproject/lp/collabo_chichibu/assets/img/key_sp.jpg);
	background-size: cover;
	padding-top:142.9%;
	}
}

#fall_o{

	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	pointer-events: none;
	overflow: hidden;
}


#fall_o img {
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
}
 
@-moz-keyframes 
spin { 100% {
  -moz-transform: rotate(360deg);
}
}
 
@-webkit-keyframes 
spin { 100% {
  -webkit-transform: rotate(360deg);
}
}
 
@keyframes 
spin { 100% {
  -webkit-transform: rotate(360deg);
  transform:rotate(360deg);
}
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
　NEWSエリア
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.top_n_a .news_t{
	text-align:center;
	width:34.5%;
	margin:0 auto -4% auto;
	}
	
.top_n_a .news_c{
	text-align:center;
	width:85%;
	height:100%;
	border:1px solid #000;
	border-bottom:5px solid #000;
	margin:0 auto;
	background-color:#fff;
	}
	
.top_n_a .news_c .news_c_c{
	text-align:center;
	width:96%;
	height:200px;
	background-color:#e9e9e9;
	margin:6% auto 3% auto;
	overflow-y:scroll;
	}
	
.top_n_a dl {
padding: 15px 0 15px 10px;
border-bottom: 1px solid #ccc;
}

.top_n_a dt {
padding-bottom: 5px;
}

@media screen and (min-width: 768px) {
.top_n_a dt {
clear: left;
float: left;
width: 15%;
}
.top_n_a dd {
margin-left: 11%;
}
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
　MOVIEエリア
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.movie_thum{
	text-align:center;
	width:85%;
	margin:0 auto;
	padding-top:10%;
	}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
　twitterエリア
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.top04 .ex_width01{
	width:80%;
	margin:0 auto;
	}

.twitter_bo{
	border:1px solid #666666;
	}
.twitter_bo_ma_ex{
	margin-bottom:10%;
	}


@media only screen and (max-width: 780px) {
  .twitter_bo{
    overflow: hidden;
  }
  .twitter_bo iframe{
    /* 20pxの部分は埋め込んだタイムラインの左右に必要な余白の総計を記載 */
    width: calc(100vw - 20px)!important;
  }
}