@charset "utf-8";

html {
	font-size : 75%;
}

body {
	margin: 0px;
	padding: 0px;
	background-image: url("../img/t_bk.jpg");	
	font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
	font-size: 14px;
	line-height: 2;	
	-webkit-text-size-adjust: none;
}

ul {list-style-type: none;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
video {max-width: 100%;}
iframe {width: 100%;}

#container {
	width: 100%;
	margin: 0 auto;
	padding: 0px;
}

/* clearfix */
.nav_list:after {
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
	content: ".";
	font-size: 0;
}


/*リンク（全般）設定
a {
	color: #666;
	transition: 0.4s;
}
a:hover {
	color: #695e4d;
	text-decoration: none;
}
*/

/*ヘッダー
-------------------------------------------------*/
header {
	margin: 0px auto;
	text-align: center;
}

#logo img {
	width: 250px;
	margin: 0px auto;
}

/*メニュー
-------------------------------------------------*/
.nav{
	width: 100%;
	margin: 0 auto;
	background: -webkit-linear-gradient(#d1c0a5, #eadcc6);
	background: linear-gradient(#d1c0a5, #eadcc6);
}

.nav_list{
	margin:0;
	padding:0;
}

.nav_list li {
	float: left;
	width:17%;
	text-align: center;
	list-style-type: none;
}

.nav_list li.last {
	float: left;
	width:15%;
	text-align: center;
	list-style-type: none;
}

.nav_list li a{
	color:#59493f;
	text-decoration:none;
	margin:0;
	padding:0.75em 0;
	font-size: 14px;
	letter-spacing: 0.1em;
	display:block;
}

.nav_list li a:hover{
	color:#434343;
}

.nav_link_top{
	border-bottom:3px solid #b38f57;
}

.nav_link_zarda{
	border-bottom:3px solid #dbc692;
}

.nav_link_seibun{
	border-bottom:3px solid #b38f57;
}

.nav_link_voice{
	border-bottom:3px solid #dbc692;
}
.nav_link_buy{
	border-bottom:3px solid #b38f57;
}
.nav_link_info{
	border-bottom:3px solid #dbc692;
}

.fixed{
	position:fixed;
	top:0;
	max-width:100%;
	margin:0 auto;
}

/*ページ内リンク
-------------------------------------------------*/
#about {
	padding-top: 150px;
	margin-top: -150px;
}

#component {
	padding-top: 150px;
	margin-top: -150px;
}

#voice {
	padding-top: 150px;
	margin-top: -150px;
}

#buy {
	padding-top: 150px;
	margin-top: -150px;
}

#info {
	padding-top: 150px;
	margin-top: -150px;
}

/*コンテンツ
-------------------------------------------------*/
#contents{
	width:1000px;
	margin: 0 auto;
	margin-bottom:10px;
	overflow: hidden;
}

#top_imgbox {
	margin: 0 auto;
	text-align: center;
}

#main{
	padding:0px 15px;
}

#main h2 {
	margin: 15px 0px 15px 0px;
	color: #fff;
	font-weight: normal;
	font-size: 20px;
	background: #ffffff;
	background: -webkit-linear-gradient(#d1c0a5, #c9a063);
	background: linear-gradient(#d1c0a5, #c9a063);
	padding: 0px 0px 0px 20px;	
	border-radius:10px;
}

#main h3 {
	width: 98%;
	margin: 0px auto;
	color: #0c3287;
	margin-bottom: 15px;
	margin-top: 15px;
	padding: 1%;
	border: 1px solid #ccc;	
	border-radius:5px;
	letter-spacing: 0.1em;
	background: #ffffff;
	background: -webkit-linear-gradient(#d1c0a5, #ffffff);
	background: linear-gradient(#d1c0a5, #ffffff);
}

#main h4 {
	width: 98%;
	margin: 0px auto;
	color: #0c3287;
	margin-bottom: 15px;
	margin-top: 15px;
	padding: 1%;
	border: 1px solid #ccc;	
	border-radius:5px;
	letter-spacing: 0.1em;
}


/*成分ボックス
-------------------------------------------------*/
.tmbox01 {
	width: 100%;
	margin: 20px auto;
	text-align: center;
	font-size: 180%;
	background-image: url("../img/algan_mark.png");	
	background-repeat:no-repeat;
	background-size:100px 100px;
}

.tmbox02 {
	width: 96%;
	margin: 10px auto;
	border-radius: 5px;
	background: #fefefe;
	padding: 1%;
	font-size: 120%;
	overflow: hidden;
	background-image: url("../img/p01.jpg");	
	background-repeat:no-repeat;
	background-position:right;
}

.tmbox03 {
	width: 96%;
	margin: 10px auto;
	border-radius: 5px;
	background: #fefefe;
	padding: 1%;
	font-size: 120%;
	overflow: hidden;
}

.tmbox04 {
	width: 98%;
	margin: 0px auto;
	padding: 1%;
	clear: both;
	letter-spacing: 0.1em;
 }


/*画像ボックス
-------------------------------------------------*/
.imgbox01 {
	width: 95%;
	margin: 0px auto;
	text-align: center;
	clear: both;
}

.imgbox02 {
	width: 90%;
	text-align: center;
	margin: 10px auto;
}

/*お客様の声
-------------------------------------------------*/
.voicebox {
	width: 100%;
	margin: 20px auto;
	text-align: center;
	overflow: hidden;
}

.voicebox_s01 {
	float: left;
	width: 30%;
	margin-right: 1%;
	background: #eee0cb;
	padding:1%;
	border-radius: 4px;
	text-align: left;
}

.voicebox_s02 {
	float: left;
	width: 32%;
	background: #eee0cb;
	padding:1%;
	border-radius: 4px;
	text-align: left;
}

/*購入する
-------------------------------------------------*/
.buybox {
	width: 95%;
	margin: 20px auto;
	overflow: hidden;
	text-align: center;
	font-weight: bold;
}

.buybox_s01 {
	width:95%;
	margin: 1%;
	padding: 1%;
	border: 1px solid #4d3a33;
	border-radius: 5px;
	font-size: 20px;
}

.buybox_s02 {
	width:97%;
	margin: 1%;
	border: 1px solid #4d3a33;
	border-radius: 5px;
}

.img-sp {
	display: none;
}


/*お問合せ
-------------------------------------------------*/
.infobox {
	width: 95%;
	margin: 15px auto;
	overflow: hidden;
}

/*会社概要
---------------------------------------------------------------------------*/
.ta1 {
	width: 90%;
	margin: 0px auto;
	margin-top: 15px;
	margin-bottom: 15px;
	background: #f1e5d2;
}

.ta1, .ta1 td, .ta1 th{
	border: 1px solid #CCC;
	line-height: 2;
}

.ta1 th{
	width: 25%;
	color: #7e6b5a;
	padding: 10px;
	text-align: center;
	background: #ffffff;
}

.ta1 td{
	padding: 10px;
	color: #7e6b5a;
}


/*フッター設定
---------------------------------------------------------------------------*/
footer {
	width: 100%;
	margin: 0px auto;
	clear: both;
	text-align: center;
	background: #c9a063;
}

#copyright {
	color: #fff;
}

#copyright a {
	text-decoration: none;
	color: #fff;
}

#copyright a:hover {
	color: #666;
}


/*ページトップ
---------------------------------------------------------------------------*/
#page-top {
	position: fixed;
	bottom: 10px;
	right:  10px;
	font-size: 77%;
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}

#page-top a {
	background: #c8a062;
	text-decoration: none;
	color: #fff;
	width: 80px;
	padding: 20px 0;
	text-align: center;
	display: block;
	border-radius: 5px;
}

#page-top a:hover {
	text-decoration: none;
	background: #999;
}



/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:900px){

/*ヘッダー
-------------------------------------------------*/
header {
	margin: 0px auto;
	text-align: center;
}

#logo img {
	width: 250px;
	margin: 0px auto;
}

/*コンテンツ
-------------------------------------------------*/
#contents{
	width:auto;
	margin: 0 auto;
	margin-bottom:10px;
	overflow: hidden;
}

/*成分ボックス
-------------------------------------------------*/
.tmbox01 {
	width: 100%;
	margin: 20px auto;
	text-align: center;
	font-size: 135%;
	background-image: url("../img/algan_mark.png");	
	background-repeat:no-repeat;
	background-size:75px 75px;
}

.tmbox02 {
	width: 96%;
	margin: 10px auto;
	border-radius: 5px;
	background: #fefefe;
	padding: 1%;
	font-size: 110%;
	overflow: hidden;
	background-image: url("../img/p01.jpg");	
	background-repeat:no-repeat;
	background-position:right;
}

.tmbox03 {
	width: 96%;
	margin: 10px auto;
	border-radius: 5px;
	background: #fefefe;
	padding: 1%;
	font-size: 110%;
	overflow: hidden;
}


/*お客様の声
-------------------------------------------------*/
.voicebox_s01 {
	clear: both;
	width: auto;
	margin: 1%;
	background: #eee0cb;
	padding:1%;
	border-radius: 4px;
	text-align: left;
}

.voicebox_s02 {
	clear: both;
	width: auto;
	margin: 1%;
	background: #eee0cb;
	padding:1%;
	border-radius: 4px;
	text-align: left;
}

/*購入する
-------------------------------------------------*/
.buybox_s01 {
	width:95%;
	margin: 1%;
	padding: 1%;
	border: 1px solid #4d3a33;
	border-radius: 5px;
	font-size: 18px;
}

.img-sp {
	display: none;
}

}



/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){

/*コンテンツ
-------------------------------------------------*/
#logo img {
	width: 180px;	
	margin: 0px auto;
}

#main h2 {
	margin: 15px 0px 15px 0px;
	color: #fff;
	font-weight: normal;
	font-size: 18px;
	background: #ffffff;
	background: -webkit-linear-gradient(#d1c0a5, #c9a063);
	background: linear-gradient(#d1c0a5, #c9a063);
	padding: 0px 0px 0px 20px;	
	border-radius:10px;
}

#main h3 {
	width: 98%;
	margin: 0px auto;
	color: #0c3287;
	font-size: 13px;
	margin-bottom: 15px;
	margin-top: 15px;
	padding: 1%;
	border: 1px solid #ccc;	
	border-radius:5px;
	letter-spacing: 0.1em;
	background: #ffffff;
	background: -webkit-linear-gradient(#d1c0a5, #ffffff);
	background: linear-gradient(#d1c0a5, #ffffff);
}

#main h4 {
	width: 98%;
	margin: 0px auto;
	color: #0c3287;
	font-size: 13px;
	margin-bottom: 15px;
	margin-top: 15px;
	padding: 1%;
	border: 1px solid #ccc;	
	border-radius:5px;
	letter-spacing: 0.1em;
}

/*メニュー
-------------------------------------------------*/
.nav_list li a{
	color:#59493f;
	text-decoration:none;
	margin:0;
	padding:0.75em 0;
	font-size: 10px;
	font-weight: bold;
	display:block;
}

/*成分ボックス
-------------------------------------------------*/
.tmbox01 {
	width: 100%;
	margin: 20px auto;
	text-align: center;
	font-size: 98%;
	background-image: url("../img/algan_mark.png");	
	background-repeat:no-repeat;
	background-size:40px 40px;
}

.tmbox02 {
	width: 96%;
	margin: 10px auto;
	border-radius: 5px;
	background: #fefefe;
	padding: 1%;
	font-size: 95%;
	overflow: hidden;
	background-image: url("../img/p01.jpg");	
	background-repeat:no-repeat;
	background-position:right;
}

.tmbox03 {
	width: 96%;
	margin: 10px auto;
	border-radius: 5px;
	background: #fefefe;
	padding: 1%;
	font-size: 95%;
	overflow: hidden;
}

.tmbox04 {
	width: 98%;
	margin: 0px auto;
	padding: 1%;
	clear: both;
	font-size: 80%;
}

/*購入する
-------------------------------------------------*/
.buybox_s01 {
	width:95%;
	margin: 1%;
	padding: 1%;
	border: 1px solid #4d3a33;
	border-radius: 5px;
	font-size: 14px;
}

.img-pc {
	display: none;
}

.img-sp {
	display: block;
}

}