@charset "UTF-8";
/* CSS Document */

/* =================================
  1400px以下
================================= */
@media only screen and (max-width: 1400px) {
/*
	#main div.itembox {
		border: 2px solid #448aca;
		max-width: 400px;
		width: 43%;
		float: left;
		margin: 0 3% 30px 0;
		padding: 15px;
	}
	#main div.itembox:last-child {
		margin: 0 0% 30px 0;
	}
	*/
	
}


/* =================================
  1100px以下
================================= */
@media only screen and (max-width: 1100px) {
	/* layout */
	#contents {
		width: 95%;
		margin: 0 auto;
	}
	div.Inner {
		width: 95%;
		margin: 0 auto;
	}
	#gnavi {
		display: none;
	}
	.slicknav_menu {
		display: block;
	}
	/* header */	
	#header div.Inner img {
		width: 70%;
	}
	/* footer */
	#footer #footer_menu ul li {
		margin-top: 0px;
		margin-bottom: 0px;
	}
	#footer .address {
		position: relative;
		font-size: 100%;
		margin-bottom: 20px;
	}
/*
	#main div.itembox {
		border: 2px solid #448aca;
		max-width: 400px;
		width: 40%;
		float: left;
		margin: 0 3% 30px 0;
		padding: 15px;
	}
	#main div.itembox:last-child {
		margin: 0 0% 30px 0;
	}
*/

	/*---------------------------------------------*/
	/*	下層header          　　                   */
	/*---------------------------------------------*/	
	#second_header {
		position: relative;
		top: 0;
	}
	#second_header img#header02 {
		width: 35%;
		margin-bottom: 25px;
		margin-top: 20px;
		margin-left: 40px;
	}
	/*---------------------------------------------*/
	/*	お水の使い方　      　　                   */
	/*---------------------------------------------*/	
	.boxh3 {
		text-align: left;
		padding: 1%;
	}
	.howto_list li {
		border: 1px solid #ccc;
		padding: 1%;
		width: 98%;
		margin-bottom: 10px;
	}
	.howto_list h4 {
		margin-bottom: 15px;
		width: 20%;
		float: left;
		text-align: center;
		padding: 1%;
	}
	.howto_list li p {
		float: right;
		width: 75%;
		text-align: left;
	}
	/*---------------------------------------------*/
	/*	お問合せ　　　      　　                   */
	/*---------------------------------------------*/	
	.contact .table-style02 th {
		width: 90%;
		display: list-item;
		list-style: none;
		padding: 10px 5% 0px;
		text-align: left
		
	}
	.contact .table-style02 td {
		width: 90%;
		display: list-item;
		list-style: none;
		padding: 0px 5% 10px;
		border-top: none;
	}
	
}

/* =================================
  タブレット縦 768px
================================= */
@media only screen and (max-width: 768px) {
	#contents #main {
		max-width: none;
		width: 95%;
		float: none;
		margin: 0 auto 50px;
	}
	#contents #sidebar {
		max-width: none;
		width: 95%;
		float: none;
		margin: 0 auto
	}
	#contents #sidebar .sidebox {
		max-width: 360px;
		width: 45%;
		float: left;
		margin: 0 5% 30px 0;
	}
	#header #cartbox,
	#second_header #cartbox {
	    max-width: 240px;
	    width: 40%;
	    position: absolute;
	    z-index: 20;
	    top: 0px;
	    right: 0px;
	}
	#header .Inner {
	    bottom: 60px;
	}
	#second_header .Inner {
	    padding-top: 60px;
	}
	/* 商品一覧 */
	/*
	#main div.itembox:nth-child(3n) {
		margin: 0;
	}
	#main div.itembox:nth-child(odd) {
		border: 2px solid #448aca;
		max-width: 293px;
		width: 45%;
		float: left;
		margin: 0 5% 30px 0;
		padding: 10px 0;
	}
	#main div.itembox:nth-child(even) {
		border: 2px solid #448aca;
		max-width: 293px;
		width: 45%;
		float: right;
		margin: 0 0% 30px 0;
		padding: 10px 0;
	}
	*/
#main div.itembox {
	border: 2px solid #448aca;
	width: 100%;
	margin: 0 0 30px 0;
}
#main div.itembox:first-child {
	width: 100%;
	max-width:inherit;
	margin: 0 0 30px 0;
}
	#footer .fimg {
		width: 100%;
		position: relative;
		z-index: 1;
		margin-bottom: 20px;
	}
	#footer .address {
		position: relative;
		font-size: 100%;
		margin-bottom: 20px;
	}
	.subcontetns {
		float: none;
		font-size: 16px;
		margin: 0 auto 50px;
		max-width: 960px;
		width: 100%;
	}
	#single {
		float: none;
		width: 100%;
	}
	/*---------------------------------------------*/
	/*	特定商取引　　      　　                   */
	/*---------------------------------------------*/	
	.law .table-style01 {
		margin-bottom: 60px;
		font-size: 16px;
	}
	.law .table-style01 td {
		border-bottom: 1px solid #CCCCCC;
		padding: 5px 7px 15px;
		text-align: left;
		display: list-item;
		list-style: none;
	}
	.law .table-style01 th {
		border-bottom: none;
		color: #4489ca;
		font-weight: bold;
		padding: 15px 7px 5px 2%;
		text-align: left;
		vertical-align: middle;
		width: 23%;
		display: list-item;
		list-style: none;
		width: 10em;
	}
}

/* =================================
  スマホ横 670px
================================= */
@media only screen and (max-width: 670px) {
	.smaph {
		display: block;
	}
	.pc {
		display: none;
	}
	#main .smaph h2.ttl_top {
		margin-bottom: 10px;
	}
	#main .smaph .headtext {
		margin-bottom: 20px;
	}
	#contents #sidebar {
		max-width: none;
		width: 95%;
		float: none;
		margin: 0 auto
	}
	#contents #sidebar .sidebox {
		max-width: 360px;
		width: 95%;
		float: none;
		margin: 0 auto 30px;
	}
	#footer .address span{
		display: block;
	}
	/* お知らせ */
	#main div#news_block dl dt {
		float: none;
		width: 100%;
		padding-top: 10px;
		padding-bottom: 5px;
	}
	#main div#news_block dl dd {
		padding-left: 0em;
		padding-top: 0px;
		padding-bottom: 10px;
		border-bottom: 2px solid #efefef;
		font-size: 90%;
		color: #1b1b1b;
	}
	/* 商品一覧 */
	/*
	#main div.itembox:nth-child(odd), #main div.itembox:nth-child(even) {
		float: none;
		width: 95%;
		margin: 0 auto 30px;
	}
	*/
	#main div.itembox div.imgbox {
		width: 100%;
	}
	/* 選ばれる理由 */
	#main ul.reason li:last-child {
		margin: 0 auto 20px;
	}
	#main ul.reason li {
		max-width: 294px;
		width: 95%;
		margin: 0 auto 20px;
		float: none;
	}
	#footer .fimg {
		width: 100%;
		position: relative;
		z-index: 1;
		margin-bottom: 30px;
	}
	/* 下層：使い方 */

	.howto_list li {
		width: 98%;
		margin: 0 auto 10px;
		text-align: center;
	}
	.reason .table-style02 td {
		border-top: 1px dashed #CCCCCC;
		padding: 15px 7px;
		text-align: left;
		font-size: 14px;
	}
	/* 下層：お問い合わせ */

	.contact .table-style02 th {
		width: 90%;
		display: list-item;
		padding: 10px 5%;
		text-align: left
	}
	.contact .table-style02 td {
		width: 90%;
		display: list-item;
		padding: 10px 5%
	}
	input[type="text"] {
		width: 80%
	}
	.contact textarea {
		width: 95%
	}
	span.txt-s.txt-red {
		font-size: 14px;
		font-size: 1.4rem
	}
	.right_txt_r {
		float: none;
		width: 100%;
		text-align: center
	}
	#second_header img#header02 {
		width: 70%;
		margin-bottom: 5px;
		margin-top: 5px;
		margin-left: 20px;
	}
	/* 下層：見出し */
	.contents_h2 h2 {
		color: #026c9a;
		font-size: 25px;
		font-weight: bold;/* line-height: normal; */
	}
}

/* =================================
  520px以下
================================= */
@media screen and (max-width: 520px) {
	#header .Inner {
    	bottom: 25px;
    	left: 10px;
	}
	#footer .address {
		top: 45%;
		font-size: 100%;
	}
	#footer #footer_menu {
		width: 100%;
		background-color: #448aca;
		text-align: center;
		overflow: hidden;
	}
	#footer #footer_menu ul {
		max-width: none;
		width: 95%;
		margin: 0 auto 20px 20px;
		overflow: hidden;
		text-align: left;
		list-style-type: disc !important;
	}
	#footer #footer_menu ul li {
		display: block;
		margin-top: 0px;
		margin-bottom: 0px;
		font-size: 14px;
		list-style-type: disc !important;
	}
	#footer #footer_menu ul li a {
		color: #ffffff;
		padding: 0px 30px;
		border-left: none;
		text-decoration: none;
	}
	#footer #footer_menu ul li:last-child a {
		border-right: none;
	}
}

/* =================================
  スマホ縦 480px
================================= */
@media only screen and (max-width: 480px) {

	
	.reason .table-style02 th {
		width: 90%;
		display: list-item;
		padding: 5px 5%;
		text-align: left;
		background-color: rgba(231, 249, 252, 0.8);
	}
	.reason .table-style02 td {
		width: 90%;
		display: list-item;
		padding: 5px 5%
	}
	.reason .table-style02 tr:nth-child(2n) {
		background-color: white;
	}
	.reason .table-style02 th.pc2,
	.reason .table-style02 td.pc2{
		display: none;
	}
	/*---------------------------------------------*/
	/*	選ばれる理由ページ                         */
	/*---------------------------------------------*/
	.reason_box {
		text-align: center;
	}
	.left_img_reason {
		float: none;
		width: 30%;
		margin: 0 auto;
		text-align: center;
	}
	.right_txt_reason {
		float: none;
		width: 100%;
		margin: 10px auto;
		text-align: left;
	}
	/*---------------------------------------------*/
	/*	藤田紘一郎推薦　　                         */
	/*---------------------------------------------*/
	.box-reco-left {
    	float: none;
    	margin: 0 auto 15px;
    	width: 100%;
    	text-align: center;
	}
	.list-book li {
    	border-bottom: 1px dotted #ccc;
    	display: inline-block;
    	margin-bottom: 5px;
    	overflow: hidden;
    	padding-bottom: 5px;
    	text-align: center;
    	width: 100%;
	}

}