@charset "utf-8";

/*====================
PCを基本設計にする
 - 1280px〜：大型PC
 - 960px〜1279px：小型PC
 - 600px〜959px：タブレット
 - 480px〜599px：スマートフォン横
 - 〜479px：スマートフォン縦
====================*/
 
 
 
/* 1280px〜：大型PC
------------------------------ */
 
ここに基本CSSを書きます。
PCファーストでは、PCサイズからモバイルの大きさに向けて、以降のCSSを書いていきます。
 
 
/* 960px〜1279px：小型PC
------------------------------ */
@media screen and (min-width:960px) and (max-width:1279px) {
 
 
}
 
/* 600px〜959px：タブレット
------------------------------ */
@media screen and (min-width:600px) and (max-width:959px) {
 
 
}
 
 
/* 480px〜599px：SP横
------------------------------ */
@media screen and (min-width:480px) and (max-width:599px) { 
 
 
}
 
 
/* 〜479px：スマートフォン縦
------------------------------ */
@media screen and (max-width:479px) { 
 
 
}

/* ヘッダー------------------------------------------------------------*/

#header{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* 箱------------------------------------------------------------*/

#contener{
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	width: 98%;
	padding-bottom: 0px;
	background-color: white;
}

/* メイン------------------------------------------------------------*/

#main{
	width: 100%;
	margin-bottom: 20px;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	background-color: #ffffff;
}



/* サイド------------------------------------------------------------*/

#side{
	margin-top: 27px;
}

/* フッダー------------------------------------------------------------*/

#footer{
	width: 100%;
	margin-bottom: 20px;
	margin-top: 0px;
}

/* パソコン---サイト幅はここのwidth-------------------------*/
@media all and (min-width: 1024px){

	


#main{
	
	width: 75%;
	float: right;
	
}

#side{
	
	width: 25%;
	float: left;
	
}


}


/* iPad　横 ------------------------------------------------------------*/
@media all and (max-width:1023px){
	.cell{
	
	width: 100%;
	
}

#main{
	
	width: 75%;
	float: right;
	
}

#side{
	
	width: 25%;
	float: left;
	
}



}


/* iPad　縦 ------------------------------------------------------------*/
@media all and (max-width:768px){
	.cell{
	
	width: 100%;
	
}

#main{
	
	width: 70%;
	float: right;
	
}

#side{
	
	width: 30%;
	float: left;
	
}


}

/* スマホ横------------------------------------------------------------*/

@media all and (max-width:640px){
	.cell{
	
	width: 100%;	
}
#main{
	
	width: 100%;
	
}

#side{
	
	display: none;	
	
}

}

/* スマホ　縦 ------------------------------------------------------------*/
@media all and (max-width:480px){
	.cell{
	
	width: 100%;
	
}


}