﻿/* スマホ用CSS */
@media screen and (max-height:600px){
	body{
		padding-bottom:100px;
	}
}
@media screen and (max-width:1220px){
	body{
		background-size:auto calc(100vh + calc(100vh - 100%));
	}

	/*********************************
		First View
	*********************************/
	#first_view div{
		margin-top:-40vh;
	}
	#first_view div img{
		display:none;
		width:300px;
		margin:auto;
	}
	#first_view div p{
		font-size:calc(3.125vw + 10px);
	}


	/*********************************
		メイン
	*********************************/
	#content{
		margin:40px auto 0 auto;
	}

	#news div{
		font-size:12px;
	}
	#news p{
		padding-left:76px;
		text-indent:-76px;
	}


	/*********************************
		サイト幅
	*********************************/
	header{
		min-width:320px;
		padding-top:10px;
	}
	header h1{
		font-size:36px;
	}
	footer{
		min-width:320px;
	}
	#content{
		width:320px;
		padding-top:30px;
	}
	#top{
		width:320px;
	}
	#menu{
		width:100%;
	}
	#content_left{
		float:none;
		width:100%;
		margin-bottom:20px;
	}
	#content_right{
		float:none;
		width:100%;
	}
	.circle{
		width:250px;
		height:250px;
		line-height:250px;
	}
	.circle::after{
		width:250px;
		height:250px;
		line-height:250px;
	}



	/*********************************
		BACKボタン
	*********************************/
	.back{
		font-size:12px;
	}

	/*********************************
		MENUボタン
	*********************************/
	.movie_menu{
		font-size:12px;
	}
}

/**********************************
	トップ画面中間サイズ処理
**********************************/
@media screen and (max-width:1220px) and (min-width:657px){
	#top{
		width:640px;
	}
	#content{
		width:80%;
		min-width:640px;
	}
	#content_left{
		float:left;
		width:320px;
	}
	#content_right{
		float:right;
		width:320px;
	}

	#news div{
		font-size:16px;
	}
	#news p{
		padding-left:109px;
		text-indent:-109px;
	}
}

/**********************************
	中間サイズ処理
**********************************/
@media screen and (max-width:656px) and (min-width:560px){
	#content{
		width:80%;
		min-width:540px;
	}
}

/*********************************
	画面が縦幅より横幅の方が長い場合
*********************************/
@media screen and (min-width:528px) and (max-height:528px){
	/* 背景を横幅基準に */
	body{
		background-size:cover;
	}
}
