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


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*
　　　　　　　　　　　　タブレット
*/
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

@media screen and (max-width: 1280px)
{
	/*==================================================*/
	/*
	　　　　　　　　　　　　ヘッダー
	*/
	/*==================================================*/

	header
	{	
		background-image: none;
	}

	header #header_contents
	{
		padding: 0 20px 115px 20px;
	}

	header #header_contents .contents
	{
		width: 620px;
	}

	header .first_cont
	{
		width: 620px;
		float: none;
	}

	header #header_middle
	{
		margin: 0 auto;
		width: 580px;
		float: none;
	}
	
	header #header_left
	{
		margin-top: 50px;
		width: 300px;
		float: left;
	}

	header .second_cont
	{
		width: 300px;
		float: right;
	}

	header #header_right
	{
		margin-top: 50px;
		width: 300px;
		float: right;
	}

	/*==================================================*/
	/*
	　　　　　　　　　　　　コンテンツ
	*/
	/*==================================================*/

	#main .contents
	{
		width: 710px;
		padding: 20px;
	}

	.first_cont
	{
		width: 288px;
	}

	.second_cont
	{
		width: 390px;
	}

	#main .contents img
	{
		width: 100%;
	}
	
	#main #contents_02 .second_cont img
	{
		width: 186px;
	}
	
	#contents_05 .contents
	{
		padding-bottom: 0px;
	}

	#contents_05 .contents .first_cont
	{
		margin: 0 auto;
		width: 660px;
		float: none;
	}

	#contents_05 .contents .second_cont
	{
		margin: 0 auto;
		width: 660px;
		float: none;
	}

	#contents_05 .caution
	{
		clear: both;
		padding-top: 20px;
		width: 660px;
		float: none;
		color: #ff0000;
	}

	#contents_05 .storelink
	{
		margin-top: 20px;
		width: 660px;
		float: none;
		text-align: center;
	}

	#contents_05 .storelink img
	{
		width: auto;
		height: 60px;
	}

	#contents_05 .storelink .storelink_as,
	#contents_05 .storelink .storelink_gp
	{
		margin-bottom: 0;
	}
	/*==================================================*/
	/*
	　　　　　　　　　　　　ランキング
	*/
	/*==================================================*/
	
	#ranking #rankingtable
	{
		height: 400px;
		overflow: auto;
	}
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*
　　　　　　　　　　　　スマホ
*/
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

@media screen and (max-width: 750px)
{
	/*==================================================*/
	/*
	　　　　　　　　　　　　見出し
	*/
	/*==================================================*/

	h1
	{
		margin: 20px auto 20px auto;
		text-indent: -9999px;
		width: 300px;
		height: 150px;
		background-size: contain;
	}

	/*==================================================*/
	/*
	　　　　　　　　　　　　ヘッダー
	*/
	/*==================================================*/
	header #header_contents
	{
		padding: 0 10px 115px 10px;
	}

	header #header_contents .contents
	{
		width: 300px;
	}

	header .first_cont
	{
		width: 300px;
	}

	header #header_middle
	{
		margin: 0 auto;
		width: 300px;
	}

	header #header_middle .catch img
	{
		height: 40px;
	}
	
	header #header_middle .movie
	{
		margin: 10px auto;
		width: 300px;
		height: 170px;
		background-image: none;
	}

	header #header_middle .movie video
	{
		width: 300px;
	}
	
	header #header_left
	{
		margin-top: 20px;
		float: none;
	}

	header .second_cont
	{
		width: 300px;
		float: none;
	}

	header #header_right
	{
		margin-top: 20px;
		float: none;
	}
	
	.trial
	{
		display: none;
	}
	
	.about_online img
	{
		width: 100%;
		height: auto;
	}
	
	.remodal
	{
		font-size: 70%;
	}

	/*==================================================*/
	/*
	　　　　　　　　　　　　コンテンツ
	*/
	/*==================================================*/

	#contents_01 .contents .first_cont,
	#contents_02 .contents .second_cont,
	#contents_03 .contents .first_cont,
	#contents_04 .contents .second_cont,
	#contents_05 .contents .first_cont
	{
		float: none;
	}

	#contents_01 .contents .second_cont,
	#contents_02 .contents .first_cont,
	#contents_03 .contents .second_cont,
	#contents_04 .contents .first_cont,
	#contents_05 .contents .second_cont
	{
		float: none;
	}

	#main .contents
	{
		width: 300px;
		padding: 20px 10px;
		padding-bottom: 0px;
	}

	.first_cont
	{
		width: 300px;
	}

	#main .second_cont
	{
		margin: 20px 0 0 0;
		width: 300px;
	}
	
	#main #contents_02 .second_cont img
	{
		width: 100%;
	}
	
	#main #contents_02 .second_cont img:first-child
	{
		margin-bottom: 20px;
	}

	#contents_05 .contents .first_cont
	{
		margin: 0 auto;
		width: 300px;
		font-size: 80%;
	}

	#contents_05 .contents .second_cont
	{
		margin: 0 auto;
		width: 300px;
		font-size: 80%;
	}

	#contents_05 .appicon
	{
		width: 300px;
		float: none;
		text-align: center;
		margin-bottom: 20px;
	}

	#contents_05 .appicon img
	{
		width: 120px;
	}

	#contents_05 .about
	{
		width: 300px;
		float: none;
	}

	#contents_05 .about td,
	#contents_05 .about th
	{
		font-weight: normal;
		text-align: left;
		padding: 4px;
	}
	
	#contents_05 .about td span
	{
		display: block;
	}

	#contents_05 .caution
	{
		clear: both;
		padding-top: 20px;
		width: 300px;
		color: #ff0000;
	}

	#contents_05 .storelink
	{
		margin-top: 20px;
		width: 300px;
		text-align: center;
	}

	#contents_05 .storelink img
	{
		width: 240px;
		height: auto;
	}

	#contents_05 .storelink .storelink_as,
	#contents_05 .storelink .storelink_gp
	{
		margin-bottom: 10px;
	}

	/*==================================================*/
	/*
	　　　　　　　　　　　　フッター
	*/
	/*==================================================*/
	footer ul li
	{
		display: block;
		margin-bottom: 5px;
	}
	
	/*==================================================*/
	/*
	　　　　　　　　　　　　プライバシーポリシー
	*/
	/*==================================================*/

	#pp
	{
		padding: 20px;
	}

	#pp *
	{
		font-size: 85%;
	}
	
	/*==================================================*/
	/*
	　　　　　　　　　　　　ランキング
	*/
	/*==================================================*/
	
	#rankingh1
	{
		margin: 10px auto 10px auto;
		text-indent: -9999px;
		width: 240px;
		height: 120px;
		background-size: contain;
	}
	
	#ranking
	{
		padding: 10px 0;
	}

	#ranking *
	{
		font-size: 85%;
	}

	#ranking #rankingtable
	{
		height: 280px;
		overflow: auto;
	}
}