@charset "utf-8";

html,body{
    width: 100%;
}

/**************************************
*	<div id="SCREEN"> 内の共通設定
***************************************/
#SCREEN
{
	padding-top: 60px;
	width: 100%;
}

/* スライドスクリーンの背景を表示 */
#SCREEN_BG
{
	z-index: 7; 
	border-top: 2px solid gray;
	border-bottom: 2px solid gray;
}

#SCREEN ul.screen li
{
	cursor: pointer;
}

#SCREEN ul.screen li.active
{
   z-index: 10;
   opacity: 1.0;
}
#SCREEN ul.screen li.last-active
{
   z-index: 9;
}

#SCREEN ul.thum
{
	position: relative;
	top: 14px;
	float: left;
	left: 50%;
	
}

#SCREEN ul.thum li
{
	position: relative;
	float: left;
	width: 165px;
	cursor: pointer;
	
}

#FLAME
{
	opacity: 0.0;
	z-index: 7;
	position: absolute;

	cursor: pointer;
}

#SCREEN_DUMMY
{
	z-index: 0;
	text-align: center;
}

#SCREENMENU_BG
{
	z-index: 6;
	border-bottom: 2px solid gray;
}

/**************************************
*	<div id="CONTENTS"> 内の共通設定
***************************************/
#CONTENTS
{
	padding-top: 20px;
}




#CONTENTS img
{
	position: relative;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	-ms-transition:  all 0.1s ease-in-out;
}

#CONTENTS ul.cont
{
	position: relative;
	float: left;
	left: 50%;
}

#CONTENTS ul.cont li.cont
{
	position: relative;
	float: left;
	left: -50%;
}

#CONTENTS ul.whats li img
{
	z-index: 100;
	
}
#CONTENTS ul.maru li img
{
	z-index: 100;


}


/**************************************
*	PC用のスタイル定義
***************************************/
@media screen and (min-width: 993px)
{
	#SCREEN ul.screen li
	{
		z-index: 8;
		opacity: 0.0;
		position: absolute;
		background-color: white; /* ボックスの背景色(必須) */
		left: 50%;
		margin-left: -496px;
	}

	#SCREENMENU_BG
	{
		height: 112px;
	}

	#SCREEN ul.thum
	{
		width: 992px;
		margin-left: -490px;
	}

	#SCREEN ul.thum li
	{
	}

	/* CONTENTS */
	#CONTENTS ul.whats
	{
		width: 196px;
	}

	#CONTENTS ul.cont
	{
	/*
	この数値はマニュアル設定したものです。
	中央揃えから配置するとブラウザ
	横幅に合わせて変化する際不都合が出るため 
	*/
	max-width: 500px;
	margin-left: -250px;
	position: relative;
	float: left;
	left: 50%;
	}
	
	/* メニューを横に並べる */
	#CONTENTS ul.maru
	{
		padding-top: 20px;	/* メニューの上を 10px 空ける */
		width: 992px;
	}
	#CONTENTS ul.maru li
	{
		float: left;
		width: 198px;
		height: 178px;
	}

	/* ロゴの横にメニューを持ってくる */
	#CONTENTS ul.ginfo
	{
		padding-top: 200px;	/* メニューの上を 10px 空ける */
		width: 181px;
	}

	/* メニューを横に並べる */
	#CONTENTS ul.gmaru
	{
		padding-top: 20px;	/* メニューの上を 10px 空ける */
		width: 992px;
	}
	#CONTENTS ul.gmaru li
	{
		float: left;
		width: 198px;
		height: 178px;
	}
}

/**************************************
*	タブレット、スマホ用のスタイル定義
***************************************/
@media screen and (max-width: 992px)
{
	#SCREEN
	{
		padding-top: 100px;
	}

	#SCREEN ul.screen li
	{
		z-index: 8;
		opacity: 0.0;
		position: absolute;
		background-color: white; /* ボックスの背景色(必須) */
	}

	#SCREENMENU_BG
	{
		height: 201px;
	}

	#SCREEN ul.thum
	{
		width: 495px;
		margin-left: -240px;
	}

	#SCREEN ul.thum li
	{
		padding-bottom: 5px;
	}

	/* CONTENTS */
	#CONTENTS
	{
		margin-right: auto;
		margin-left: auto;
		text-align: center;
		width: 594px;
	}

	#CONTENTS ul
	{
		margin-right: auto;
		margin-left: auto;
		text-align: center;
	}

	#CONTENTS ul.cont
	{
	/*
	この数値はマニュアル設定したものです。
	中央揃えから配置するとブラウザ
	横幅に合わせて変化する際不都合が出るため 
	*/
	max-width: 300px;
	margin-left: -150px;
	position: relative;
	float: left;
	left: 50%;
	}
	
	#CONTENTS ul.maru
	{
		padding-top: 20px;	/* メニューの上を 10px 空ける */
		width: 594px;
	}
	#CONTENTS ul.maru li
	{
		padding-bottom: 20px;
		float: left;
		width: 198px;
		height: 178px;
	}

	/* メニューを横に並べる */
	#CONTENTS ul.ginfo
	{
		position: absolute;
		padding-top: 390px;
		left:50%;
		margin-left: -90px;
	}
	#CONTENTS ul.gmaru
	{
		position: absolute;
		width: 594px;
		padding-top: 440px;
	}

	#CONTENTS ul.gmaru li
	{
		padding-bottom: 20px;
		float: left;
		width: 198px;
		height: 178px;
	}
}

/**************************************
*	スマホ用のスタイル定義
***************************************/
@media screen and (max-width: 600px)
{
	#SCREEN
	{
		padding-top: 140px;
	}

	#SCREENMENU_BG
	{
		height: 290px;
	}

	#SCREEN ul.thum
	{
		width: 330px;
		margin-left: -160px;
	}

	#SCREEN ul.thum li
	{
		padding-bottom: 5px;
	}

	#CONTENTS
	{
		width: 396px;
	}

	#CONTENTS ul.cont
	{
	/*
	この数値はマニュアル設定したものです。
	中央揃えから配置するとブラウザ
	横幅に合わせて変化する際不都合が出るため 
	*/
	max-width: 200px;
	margin-left: -100px;
	position: relative;
	float: left;
	left: 50%;
	}
	
	#CONTENTS ul.maru
	{
		width: 396px;
	}

	#CONTENTS ul.ginfo
	{
		padding-top: 600px;
	}

	#CONTENTS ul.gmaru
	{
		width: 396px;
		padding-top: 650px;
	}
}



/* @end */