/*
800pxを分岐点にして切り替える
*/

/* 色設定
背景　濃い青　#212e58
文字　ピンク　#f30d89
文字　白黄　#edd7b0
優しい配色　濃青#033f63 青＋緑#28666e 薄緑#7c9885 薄緑黄#b5b682 薄黄#fedc97
コントラスト　濃青#0a2463 薄青#3e92cc ほぼ白#fffaff ピンク#d8315b ほぼ黒#1e1b18
水色#bce2e8
*/

/* 共通項目 */
/*
ブラウザーのフォントサイズを中を選んだ場合、
基準値は16px ✕ 0.625 = 10px となる
font-sizeを指定するとき 1.6remと設定すれば16pxになる
 */
html {
	font-size: 62.5%;
}

body{
	margin: 0;
	background-color: #FFF;
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	font-size: 2.0rem;
}

#container{
	width: 100%;
}

.main{
	width: 780px;
	margin: 50px auto;
}

/* スマホの設定 */
@media (max-width: 780px) {
	.main{
		width: 100%;
		margin: 50px 0 0 0;
	}	
}

#title{
	width: 780px;
	font-size: 2.0rem;
	font-weight: bold;
	text-align: center;
}
/* スマホの設定 */
@media (max-width: 780px) {
	#title{
		width: 100%;
		font-size: 2.4rem;
	}
}

hr{ 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}	

.product{
	width: 780px;
	margin: 0 auto;
	margin-top: 50px;
	font-size: 1.2rem;
}

.product p{
	font-size: 1.6rem;
	font-weight: bold;
	color: #333;
}

/* スマホの設定 */
@media (max-width: 780px) {
	.product{
		width: calc(100% - 10px);
		font-size: 1.5rem;
	}

	.product p{
		font-size: 2.0rem;
		margin-bottom: 5px;
	}	
}

.block1pic{
	width: calc(100% - 2px);
	margin: 1px 1px 1px 1px;
	text-align: center;
}

.block1pic img{
	width: 100%;
}

.block2pic{
	width: calc(50% - 2px);
	float: left;
	margin: 1px 1px 1px 1px;
	text-align: center;
}

/* スマホの設定 */
@media (max-width: 780px) {
	.block2pic{
		width: calc(100% - 2px);
		float: none;
	}	
}

.block2pic img{
	width: 100%;
}

#others{
	width: 780px;
	margin: 0 auto;
	text-align: center;
}

/* スマホの設定 */
@media (max-width: 780px) {
	#others{
		width: 100%;
		margin-bottom: 50px;
	}	
}

#others a{
	text-decoration: none;
	color: #555;
	font-size: 2.5rem;
}

.blockpic_height{
	height: 250px;
	float: left;
	margin: 1px 1px 1px 1px;
	text-align: center;
}

.blockpic_height img{
	height: 100%;
}

.btnBuy{
	width: 80px;
	height: 25px;
	background-color: #C71585;
	border: 1px #888 solid;
	border-radius: 5px;
	color: #FFF;
	font-size: 1.2rem;
}

#footer{
	width: 100%;
	height: 50px;
	font-size: 0.5em;
	color: #888;
	text-align: center;
	margin: 0 auto;
}

#footer a{
	color: #888;
	text-decoration: none;
}

.floatclear{clear: both;}