@charset "UTF-8";

.onlyPC{ display:block;}
.onlySP{ display:none;}
	

@media screen and (max-width: 1000px) {
	
	html,
	body{ }
	
	body#top #main{}
	
	html.touchDevice .onlyPC{ display:none;}
	html.touchDevice .onlySP{ display:block;}
	
	
	html.touchDevice,
	.touchDevice body{ }
	
	
}



@media screen and (max-width: 1000px) {
	
	
	
	
	html.touchDevice body#top{ overflow-y: hidden;}
	html.touchDevice body#top.done{ overflow-y:scroll !important;}
	
	html.touchDevice body#top #container	{  min-width: 750px; max-width: 750px; height:auto; min-height:100vh; text-align: center;}

	
	
	html.touchDevice body#top #bg {
    position: fixed;
    z-index: 1;
    margin: auto;
    width: 100%;
    min-width: 750px;
    max-width: 750px;
    height: 100vh;
    min-height: auto;
    overflow: hidden;
	}
	
	html.touchDevice body#top #bg:before,
	html.touchDevice body#top #bg:after{  min-width: 750px; max-width: 750px; height: 100vh; }
	
	html.touchDevice body#top #bg:before{display: none;} 
	html.touchDevice body#top #bg:after{display: block;} 
	
	
	
	
	html.touchDevice #widgetArea{ position:relative; z-index: 10; bottom: auto; left: auto; width: auto; min-width: auto; max-width: auto; height: auto; padding-bottom: 40px;}

	
	html.touchDevice #widgetMovie.show {
  -webkit-animation: widgetAnim2 1ms linear both;
  animation: widgetAnim2 1ms linear both;
}


	html.touchDevice #widgetTwitter.show {
  -webkit-animation: widgetAnim2 1ms linear both;
  animation: widgetAnim2 1ms linear both;
}
	
	
	html.touchDevice #widgetArea .copyright{position:relative; top: 0px; left: 0;transform: translate(0, 0); margin: auto; width: 320px; height: 170px; background: url(img/common/copyright_sp.png) center center no-repeat; background-size:contain;}
	


	html.touchDevice #widgetArea #widgetMovie{position:relative; top: 0px; left: 0;transform: translate(0, 0) !important; margin:0 auto 75px auto; width: 711px; height: 535px;background-size: auto; opacity: 1;}

	html.touchDevice #widgetArea #widgetMovie a{    
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
	}


	html.touchDevice #widgetArea #widgetTwitter{position:relative; top: 0px; left: 0;transform: translate(0, 0) !important;  margin:0 auto 115px auto; width: 711px; height: 535px; background-size: auto;opacity: 1;}
	html.touchDevice #widgetArea #widgetTwitter .inner{ 
		width: 468px;
		height: 358px;
		top: 65px;
		left: 122px;
	}
	
	
	
	html.touchDevice #widgetArea #widgetNews{position:relative; top: 0px; left: 0;transform: translate(0, 0) !important; margin:0 auto 75px auto; width: 711px; height: 535px;background-size: auto; opacity: 1;}
	

	
	
	
	
	
	html.touchDevice #widgetArea ul.sns{ margin-bottom: 80px;}
	html.touchDevice #widgetArea ul.sns li{ width: 111px; height: 111px; margin: 0 25px;}
	
	
	
	
	html.touchDevice section#topWrap {height: auto;}
	
	html.touchDevice section#topWrap .collabo{ position:relative; top: 39%; left: 50%; 
	   transform: translate(-50%, -360px); margin: 0; width: 514px; height: 173px;  background: url(img/top/collabo_sp.png) center center no-repeat; background-size: contain; }
	
	html.iPad section#topWrap .collabo{ position:relative; top: 43%; left: 50%; 
	   transform: translate(-50%, -360px); margin: 0; width: 300px; height: 130px; }

	
	html.touchDevice section#topWrap h1{position:absolute; top: 45% !important; left: 50%;
	   width: 485px; height: 424px; margin:-242px 0 0 -242px !important; opacity: 0;transition: all 1000ms cubic-bezier(.50,.0,.50,1);}
	
	html.touchDevice section#topWrap h1.show{opacity: 1;}
	
	
	
	html.touchDevice #topWrap header .scrollDown{position:fixed; z-index: 50; bottom: 40px; left: 50%;
	   transform: translate(-50%, 0); width: 148px; height: 48px;background: url(img/top/scroll_down.png) center top no-repeat; cursor: pointer; transition: all 300ms cubic-bezier(0,.0,.5,1);opacity: 0;}
	html.touchDevice #topWrap header .scrollDown.show{ opacity: 1;}
	html.touchDevice #topWrap header .scrollDown.off{ opacity: 0; pointer-events: none;}

	html.touchDevice #topWrap header .scrollDown.attention {
	 -webkit-animation: scrollDown 1500ms ease-in-out infinite;
	  animation: scrollDown 1500ms ease-in-out infinite;
	}
	
	
	
	html.touchDevice section#topWrap #infoSP .onAir{ width: 690px; height: 190px; margin: auto; padding-top: 0px;}
	html.touchDevice section#topWrap #infoSP .onAir .date{ height: 150px;background: url(img/top/ad_title.png) center center no-repeat; background-size:contain;}
	
	

	html.touchDevice section#topWrap #infoSP .banner{ margin-bottom: 115px;}
	html.touchDevice section#topWrap #infoSP .banner img{ margin-bottom: 20px;}
	
	html.touchDevice #widgetArea #widgetNews { height: auto !important; background: none; margin-bottom: 60px; text-align: left; padding-top: 150px}
	html.touchDevice #widgetArea #widgetNews:before{ content: ''; display: block; width: 300px; height: 200px; background: url(img/top/news_title.png) center center no-repeat; background-size:contain;position: absolute; top: 0; left: 50%; transform: translate(-50%, 0);}
	
	
	html.touchDevice #widgetArea #widgetNews .inner{ width: 90%; height: auto; position: relative;top: auto; left: auto; padding:40px 40px 130px 40px; box-sizing: border-box;overflow: none; margin: auto; border-radius: 20px; background-color: #fffff7; border: solid 5px #520100; }
	html.touchDevice #widgetArea #widgetNews dl{ font-size: 2rem;}
	html.touchDevice #widgetArea #widgetNews dl dt{margin-bottom: 10px;height: auto; padding-left: 50px;}
	html.touchDevice #widgetArea #widgetNews dl dd{ margin-bottom: 50px;}
	
	html.touchDevice #widgetArea #widgetNews .more{ width: 300px; height: 80px; border-radius: 40px; overflow: hidden; position: absolute; bottom: 50px; left: 50%;transform: translate(-50%, 0); }
	html.touchDevice #widgetArea #widgetNews .more a{ display: block; height: 80px; background: url(img/common/btn_more.png) center center no-repeat #7ca9e1; background-size:40% auto; }
	
	
	html.touchDevice #widgetTwitter .inner iframe{ min-height: 358px !important;}



	
	
	html.touchDevice #widgetArea #widgetBanner{ position:relative; z-index: 5; top: 0px; left: 0;
		transform: translate(0, 0); width:100%; height: auto; margin-bottom: 40px; text-align: center;}

	html.touchDevice #widgetArea #widgetBanner a,
	html.touchDevice #widgetArea #widgetBanner img{ width: 90%; height: auto; margin: auto;}

	html.touchDevice #widgetArea #widgetBanner a{ display:inline-block; margin:0 0px 10px 0;}
	html.touchDevice #widgetArea #widgetBanner a:nth-child(3n) {
		 margin-right: 0;
	}	
	
}