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

                 960px以下

----------------------------------------------------- */
@media screen and (max-width: 960px){
	/* ----------------------------------------------------
	ヘッダー
	----------------------------------------------------- */
	#header{
		min-width: 0;
	}
	#header_inner{
		width: auto;
	}
	#header_inner h1{
		padding-left: 10px;
	}
	#header #logo{
		padding: 20px 0 0 10px;
	}
	#header #btnHeader{
		right: 10px;
	}

	/* ----------------------------------------------------
	フッター
	----------------------------------------------------- */
	#footer{
		min-width: 0;
	}
	#footer_inner{
		width: auto;
	}
	#footer .fnaviSet{
		float: left;
		width: auto;
	}
	#footer .fnavi{
		width: auto;
		margin: 0 0 0 20px;
	}
	/* ----------------------------------------------------
	コンテンツ
	----------------------------------------------------- */
	#content{
		width: auto;
	}
	.pkg{
		padding: 10px 10px;
	}
	.autosize100{
		width: 99%;
		height: auto;
		max-width: 700px;
	}
	.autosize50{
		width: 50%;
		height: auto;
		max-width: 330px;
	}
	/* ----------------------------------------------------
	メインカラム
	----------------------------------------------------- */
	#mainBody{
		width: 100%;
		margin: 0 0 0 -220px;
	}
	#mainBody_inner{
		margin: 0 0 0 220px;
	}
	#mainBody h3 a{
		float: none;
		display: block;
		text-align: right;
		padding: 6px 10px 0 0;
	}
	/* ----------------------------------------------------
	左カラム
	----------------------------------------------------- */
	#leftBody{
		width: 200px;
		float: left;
	}
	/* ----------------------------------------------------
	コンテンツ１
	----------------------------------------------------- */
	.cnt1 li span{
		float: none;
	}
	.cnt1 li a{
		width: auto;
		float: none;
	}
	/* ----------------------------------------------------
	コンテンツ３
	----------------------------------------------------- */
	.cnt3 .btnDetail{
		text-align: left;
		margin: 0;
	}
	/* ----------------------------------------------------
	コンテンツ４
	----------------------------------------------------- */
	.cnt4 .figure1{
		float: none;
		margin: 20px auto 0px auto;
	}
	.cnt4 .figure2{
		float: none;
		width: auto;
		margin: 10px 0 20px 0;
	}
	.cnt4 .figure3{
		float: none;
		width: auto;
		margin: 10px;
	}
}
/* ----------------------------------------------------

                 690px以下

----------------------------------------------------- */
@media screen and (max-width: 690px){
	#header #logo{
		float: left;
		width: 50%;
		padding: 15px 0 10px 10px;
	}
	#header #logo img{
		width: 100%;
		max-width: 355px;
		height: auto;
	}
	#header h2{
		padding: 10px 0 10px 10px;
	}

	#header #btnHeader{
		width: 40%;
		top: 20px;
	}
	#header #btnHeader li{
		float: left;
	}
	#header .btnHeader1,
	#header .btnHeader2,
	#header .btnHeader3{
		display: none;
	}
	#header .btnHeader1_tb{
		display: block;
	}
	#header .btnHeader1_tb img{
		padding: 5px 0;
		width: 85%;
		height: auto;

	}
	#header .btnHeader2_tb{
		display: block;
	}
	#header .btnHeader2_tb img{
		padding: 5px 0;
		width: 85%;
		height: auto;
	}
	.cnt5 table.price th{
		border: solid 1px #999;
		display: block;
	}
	.cnt5 table.price td{
		width: auto;
		display: block;
	}
	.cnt5 table.form th{
		display: block;
	}
	.cnt5 table.form td{
		display: block;
	}
}
/* ----------------------------------------------------

                 600px以下

----------------------------------------------------- */
@media screen and (max-width: 601px){
	/* ----------------------------------------------------
	ヘッダー
	----------------------------------------------------- */
	#header #logo{
		padding: 10px 0 0 10px;
	}
	#header h2{
		padding: 20px 0 5px 10px;
	}
	/* ----------------------------------------------------
	コンテンツ
	----------------------------------------------------- */
	#content{
		width: auto;
		padding: 0 10px;
	}
	/* ----------------------------------------------------
	メインカラム
	----------------------------------------------------- */
	#mainBody{
		width: 100%;
		margin: 0;
		float: none;
	}
	#mainBody_inner{
		margin: 0;
	}
	/* ----------------------------------------------------
	フッター
	----------------------------------------------------- */
	#footer .fnaviSet{
		display: none;
	}
	#footer .fimg{
		float: none;
		text-align: center;
		padding: 5px 0 5px 0;
	}
	/* ----------------------------------------------------
	左カラム
	----------------------------------------------------- */
	#leftBody{
		width: 96%;
		margin: 50px auto 40px auto;
		float: none;
	}
	#leftBody p{
		text-align: center;
	}
	#leftBody img.autosize100{
		max-width: 236px;
	}
	.navi{
		margin: 0 0 20px 0;
	}
	/* ----------------------------------------------------
	コンテンツ４
	----------------------------------------------------- */
	.cnt4 .figure1 img,
	.cnt4 .figure2 img,
	.cnt4 .figure3 img{
		width: 100%;
	}
	.cnt4 .figure3{
		float: none;
		margin: 10px auto;
	}
}
/* ----------------------------------------------------

                 480px以下

----------------------------------------------------- */
@media screen and (max-width: 480px){
	#header{
		background: url(../img/header_bg.png) 0 bottom repeat-x;
		background-size: cover;
	}
	#header_inner{
		height: auto;
	}
	#header_inner h1{
		padding: 5px 10px;
		height: auto;
		line-height: 1.5;
	}
	#header_inner h2{
		line-height: 1.4;
	}
	#header #logo{
		float: none;
		width: 90%;
		padding: 10px 0 0 0px;
		margin: 0 auto;
	}
	#header #btnHeader{
		float: none;
		position: relative;
		top: 0;
		right: 0;
		width: 90%;
		padding: 10px 0 0 0px;
		margin: 0 auto;
	}
	#header .btnHeader1_tb{
		display: none;
	}
	#header .btnHeader2_tb{
		display: none;
	}
	#header .btnHeader1_sp{
		display: block;
		width: 50%;
	}
	#header .btnHeader1_sp img{
		width: 90%;
		height: auto;
		margin: 0 auto;
	}
	#header .btnHeader2_sp{
		display: block;
		width: 50%;
		overflow:hidden;
	}
	#header .btnHeader2_sp img{
		width: 90%;
		height: auto;
		margin: 0 auto;
		overflow:hidden;
	}
}