/* CSS Document */

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

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される
@media only screen and (max-width: 767px) {
    .PC { display: none !important; }
    .SP { display: block !important; }
}
 */
html{
    scroll-behavior: smooth;
}

h1,h2,h3,h4,h5,h6{
	font-size:100%;
}
*{
	margin:0px;
	padding:0px;
}
img{
	vertical-align:middle;
	width:100%;
	max-width:450px;
	height: auto;
}
a{
	text-decoration: none;
}
a:hover img{
	opacity: 0.6;
	filter: alpha(opacity=60);
	-moz-opacity:0.6;
}

body{
	background-image:url("img/back/sp-saleback-yellow.jpg"); /*全体背景*/
	background-repeat:x;
	font-family: "Hiragino Kaku Gothic Pro";
	color:#363636;
}

/*　ヘッダーコンテンツ　*/
header{
	max-width:100%;
	margin:80px auto;
	overflow:hidden;
}

/*　キステトップロゴ　*/
.logo{
	max-width:100%;
	padding:10px 15% 0;
}
.logo img{
	width:100%;
}

div.top{
	text-align:center;
	margin-top:0 auto;
}

h1{
	margin:0 auto;
	padding:10px 0;
}

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

#page-top a{
    position: fixed;
    bottom: 10px;
    right: 10px;
	font-size:1.6em;
	z-index: 6;
	color:#666666;
	font-weight: 999;
}

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


/*　コンテンツ　*/
main{
	max-width:100%;
	margin:0 auto;	
	text-align: center;
}

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

/*　コンテンツ中身いろいろ　*/
.contents{
	text-align:center;
	width:100%;
	margin:0 auto;
}

.contents-massage {
	width:95%;
	margin:20px auto;
	padding:5px;
	font-size:1.10em;
	font-weight:600;
	line-height:140%;
}

.contents-massage li{
	width:90%;
	margin:20px auto;
	padding:5px;
	font-weight:600;
	line-height:140%;
	list-style: none;
	text-align: left;
}

.contents-massage-after {
	list-style: none;
	width:90%;
	margin:20px auto;
	padding:5px;
	font-size:1.0em;
	font-weight:600;
	line-height:140%;
	text-align: left;
}

.contents-massage-after li {
	margin-bottom:10px;
}


.pre-code{
	width:90%;
	margin:-50px auto 50px;
	padding:20px 20px 50px;
	background-color:#eeeeef;
	font-size:1.25em;
	font-weight:600;
	line-height:130%;
}

.caution01{
	font-size:0.6em;
	text-align: left;
	text-indent:-1.25em;
	padding-left:1.25em;
	line-height:130%;
	margin-bottom:10px;
}

.caution02{
	margin:20px auto;
	font-size:0.5em;
	text-align:center;
	list-style:none;
	text-indent:-1.25em;
	padding-left:1.25em;
	line-height:130%;
}

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

.contents-massage li{
	overflow-wrap:break-all;
	list-style:disc;
	text-align: left;
	margin-bottom:15px;
	font-size:0.9em;
	text-indent:-1.35em;
	padding-left:1.35em;
}

/*カテゴリーボタン*/
.list{
	max-width:100%;
	margin:30px auto 50px;
	padding:0;
}

.list ul{
	text-align: center;
	max-width:100%;
	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{
	max-width:100%;
}

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

.type-list ul{
	text-align: center;
	max-width:100%;
	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%);
	
}

.ba{
	margin:50px 0;
}

/*商品ページBOX*/
.itembox{
	margin:auto;
	position: relative;
	padding:0 0 10px;
	background-color: #eeeeef;

}

.itembox2{
	margin:70px auto;
	position: relative;
	padding:0 0 10px;
	background-color: #fff;

}

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

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

.item img{
	max-width:100%;
	
}

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

.item2 img{
	max-width:100%;
}

/*商品説明文*/
.item p{
	margin:0;
	text-align: left;
	color:#3E3A39;
	font-size:0.6em;
	padding:0px;
	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: 50%;
}

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


/*割引前*/
.price1{
	margin:0;
	padding:0;
	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;
	text-decoration:line-through;
	margin:0 4px 0 0px;
	color:#5C5C5C;
}

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

/*円表示*/
.yen{
	font-size:0.4em;
	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.5em;
	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.5em;
	width:80%;
	background-color: #Cc0000;
	padding:2px;
	margin:3px auto 0;
	color:#fff;
	border-radius:5px;
}


/*クーポンバナー*/
.coupon{
	width:80%;
	margin:auto;
	padding-bottom:50px;
}

/*BOXリボン*/
.ribbon{
	position: absolute;
	width:35%;
	top: -4%;
	left: -5%;
    transform: rotate(-15deg);
}

.category2 .ribbon{
	position: absolute;
	width:48%;
	top: -1%;
	left: -5%;
    transform: rotate(-18deg);
}
/*円表示*/
.yen{
	font-size:50%;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro",
	color:#C00000;
	font-weight: bold;	
}


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

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

.copy{
	text-align: center;
	color: #838383;
	margin-top:30px;
	margin-bottom:30px;
}