/* CSS Document */


@import url('https://fonts.googleapis.com/css?family=Roboto:700i&display=swap');


/* パソコンで見たときは"pc"のclassがついた画像が表示される 
.PC { display: block !important; }
.SP { display: none !important; }
*/

html{
    scroll-behavior: smooth;
}

h1,h2,h3,h4,h5,h6{
	font-size:100%;
}

*{
	margin:0px;
	padding:0px;
}

img{
	vertical-align:bottom;
	widht:80%;
	max-width:768px;
	height: auto;
}

a{
	text-decoration: none;
}


a:hover img{
	opacity: 0.6;
	filter: alpha(opacity=60);
	-moz-opacity:0.6;
}

hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}


body{
	background-repeat:/*repeat-y,*/
					/*repeat-y,*/
					repeat;
	background-position:left,
						right,
						top;
	/*background-attachment:fixed;*/
	font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-size:1.3em;
	color:#363636;
}

/*　右下ページトップに戻るボタン　*/

#page-top a{
    position: fixed;
    bottom: 20px;
    right: 20px;
	font-size:2.0em;
	z-index: 6;
	color:#666666;
	font-weight: 900;
}

#page-top a:hover{
	z-index: 6;
	color:#cccc00;
	transition: 0s;
}

/*　ヘッダーコンテンツ　*/
header{
	width:100%;
	margin:70px auto;
}

main{
	max-width:960px;
	margin:0 auto;
	text-align:center;
	
}

/*　コンテンツ　*/

footer .copy{
	text-align: center;
	color: #838383;
	margin-top:20px;
	margin-bottom:20px;
	font-size:0.7em;
}

/*　キステトップロゴ　*/
.logo{
	text-align:center;
	margin:10px 0;
}
.logo img{
height:50px;
}

/*　特設メイン画像　*/

div.top{
	margin-top:50px;
	max-width:768px;
	margin:0 auto;
}

h1{
	max-width:768px;
	text-align:center;
	margin:0 auto;
	padding:10px 0;
}

div.top01{
	margin-bottom:50px;
}


/*　コンテンツ中身いろいろ　*/
.contents{
	text-align: center;
	max-width:768px;
	margin:0px auto;
	padding:30px;
	background-color:#fff;
}

.contents-massage {
	max-width:700px;
	margin:30px auto 50px;
	background-color:#fff;
	font-size:1.35em;
	font-weight:600;
}

.contents-massage li{
	overflow-wrap:break-all;
	text-align: left;
	margin-bottom:30px;
	text-indent:-1.35em;
	padding-left:1.35em;
}

.contents-massage li{
	overflow-wrap:break-all;
	text-align: left;
	margin-bottom:30px;
}

.contents-massage-after {
	max-width:700px;
	margin:30px auto 50px;
	background-color:#fff;
	font-size:1.35em;
	font-weight:600;
}

.contents-massage-after li{
	overflow-wrap:break-all;
	list-style: none;
	text-align: left;
	margin-bottom:30px;
}

.pre-code{
	max-width:768px;
	margin:-50px auto 50px;
	padding:20px 50px 50px;
	background-color:#eeeeef;
	font-size:1.35em;
	font-weight:600;
}

.caution01{
	font-size:0.7em;
	text-align: left;
	text-indent:-1.35em;
	padding-left:1.35em;
}

.caution02{
	margin:20px auto;
	font-size:0.6em;
	text-align:center;
	list-style:none;
	text-indent:-1.35em;
	padding-left:1.35em;
}

.pre-code span{
	display: inline-block;
	border:1px solid #666;
	padding:20px;
}


.contents-massage img{
	max-width:648px;
}

h2{
	text-align: center;
	max-width:100%;
}

h2 img{
	width:75%;
}

.ba img{
	max-width:648px;
	margin:50px 0;
}

/*カテゴリーボタン*/
.list{
	width:960px;
	margin:30px auto;
	padding:0;
}

.list ul{
	text-align: center;
	max-width:960px;
	display:flex;
	flex-wrap:wrap;
	text-decoration-style: none;
	list-style: none;
	margin:1% auto 7%;
}


.list li{
	box-sizing: border-box;
	text-align: center;
	margin:1%;
	padding:1% 0;
	width:calc(25% - 3%);
	
}

.list li img{
	width:100%;
}


.type-list{
	width:960px;
	margin:30px auto;
	padding:0;
}

.type-list ul{
	text-align: center;
	max-width:960px;
	display:flex;
	flex-wrap:wrap;
	text-decoration-style: none;
	list-style: none;
	margin:1% auto 7%;
}


.type-list li{
	box-sizing: border-box;
	text-align: center;
	margin:1%;
	padding:1% 0;
	width:calc(50% - 3%);
	
}

.type-list li img{
	width:100%;
}


/*商品ボタン*/

.item-list ul{
	text-align: center;
	display:flex;
	flex-wrap:wrap;
	text-decoration-style: none;
	list-style: none;
	margin:1% auto 7%;
}


.item-list li{
	background:#fff;
	border-radius:5px;
	box-sizing: border-box;
	text-align: center;
	margin:1%;
	padding:1%;
	width:calc(25% - 2%);
}

.item-list li img{
	width:100%;
}




/*商品ページBOX*/
.itembox{
	background: #eeeeef;
	max-width:768px;
	padding:0 1%;
	margin:0 auto 100px;
}

.itembox2{
	background: #fff;
	max-width:768px;
	padding:0 1%;
	margin:100px auto;
}

.category p.order{
	width:80%;
	margin:auto;
	padding-bottom:10%;
}

/*商品ページBOX4列*/
.item{
	display:inline-block;
	width:19.4%;
	background-color:#fff;
	padding:2%;
	margin:1.5% 0.5%;
	border-radius:5px;
	/* box-shadow: 0 5px 10px rgba(0,3,0,0.2);*/
	position: relative;
}

.item img{
	width:100%;
}

/*商品ページBOX5列*/
.item2{
	display:inline-block;
	width:19.4%;
	background-color:#fff;
	padding:2%;
	margin:1.5% 0.5%;
	border-radius:5px;
	/* box-shadow: 0 5px 10px rgba(0,3,0,0.2);*/
	position: relative;
}

.item2 img{
	width:100%;
}

/*商品説明文*/
.item p{
	text-align: left;
	color:#3E3A39;
	font-size:0.6em;
	padding-top:5px;
	font-weight: bold;	
	font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

.price{
	text-align: left;
	line-height:90%;
}

.price li{
	list-style:none;
	display:inline-block;
	padding-top:5px;
}


/*割引前*/
.price1{
	font-size:0.7em;
	font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	text-decoration:line-through;
	margin:0 4px 0 0px;
	color:#5C5C5C;
}

/*セール価格*/
.price2{
	margin-top:5px;
	font-size:1.3em;
	font-family:  'Roboto','Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体','MS PGothic', sans-serif;
	font-weight:600;
	color:#ca0000;
}

/*円表示*/
.yen{
	font-size:0.5em;
	font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color:#C00000;
	font-weight: bold;	
}

/*税抜表示*/
.price3{
	font-size:0.6em;
	font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color:#C00000;
}

/*商品を見に行くボタン*/
.itembutton{
	text-align: center;
	font-size:0.6em;
	width:80%;
	background-color:#cc0000;
	padding:1px 2px;
	margin:5px auto 0;
	color:#fff;
	border-radius:20px;
}

.itembox2 .itembutton{
	text-align: center;
	font-size:0.5em;
	width:70%;
	background-color:#cc0000;
	padding:1px 2px;
	margin:5px auto 0;
	color:#fff;
	border-radius:20px;
}

.item:hover{
	background-color: #ccc;
	transition: 0.3s;
}

/*もっと見るボタン*/
.more-button{
	z-index: 9999px;
	width:60%;
	margin:50px auto 30px;
	padding:15px 0;
	font-size:1.3em;
	border:1px solid #fff;
	text-align: center;
	border-radius:15px;
	color:#fff;
	font-weight:bold;
}

.red{
	background-image:url("img/back/ichimatu.png");
	background-size:30px;
	background-color:rgba(180,0,0,0.9);
	box-shadow: 0px 0px 0px 5px #cc0000;
	background-blend-mode:darken;
}
.green{
	background-image:url("img/back/ichimatu-green.png");
	background-size:30px;
	background-color:rgba(50,92,55,1);
	box-shadow: 0px 0px 0px 5px #325C37;
	background-blend-mode:overlay;
	
}

/* タブレット表示の指定　*/

@media only screen and (max-width: 768px) {
	
	img{
	vertical-align:bottom;
	max-width:768px;
	height: auto;
}

	h1{
	max-width:768px;
	margin:0 auto;
	padding:10px 0;
}	
	

	
	/*　コンテンツ中身いろいろ　*/
.contents{
	max-width:100%;
	padding:30px;
	background-color:#fff;
}
	
	/*カテゴリーボタン*/
.list{
	max-width:768px;
	margin:30px auto;
	padding:0;
}
	
.list li{
	text-align: center;
	display:inline-block;
	margin:10px 5px 100px;
	padding:0;
	width:23%;
}
	
	.itembox{
	margin:0 auto;
		font-size:0.8em;
}
	
/*商品説明文*/
.item p{
	text-align: left;
	color:#3E3A39;
	font-size:0.7em;
	padding-top:5px;
	font-weight: bold;	
	font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

.price{
	text-align: left;
}

.price li{
	list-style:none;
	display:inline-block;
}


/*割引前*/
.price1{
	font-size:0.7em;
	font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	text-decoration:line-through;
	margin:0 4px 0 0px;
	color:#5C5C5C;
}

}