@charset "UTF-8";

/*共通*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');

*{
	font-family: 'Noto Sans JP', sans-serif;
}

#wrapper {
  width:100%;
  overflow:hidden;
}

body, h1, h2, h3, h4, h5, h6, p, address, blockquote, pre, div, dl, dt, dd, ol, ul, li, th, td, form, fieldset, input, textarea {
	font-weight: 300;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background-color:#ffffff;
}

img{
	width: 100%;
	margin: 0 auto;
}

a{
	text-decoration: none;
}

p.mainimg{
	max-width: 800px;
	text-align: center;
	margin: 0 auto;
}

.img_block{
	display: block;
	margin:auto;
}


/* 既存見出しのリセット */
h2,
h2:before,
h2:after {
content: none;
background: none;
background-color: none;
border: none;
border-radius: 0;
}




/*タイトル　黄緑*/
h1{
	width: 100%;
	margin: 0 auto 5%;
	font-size: 25px;
	color: #ffffff;
	font-weight:bold;
	text-align: center;
	background-size: 1px 1px;
	background-color:#88b83e;
	padding: 0.5% 0;
}

/*タイトル　orange*/
h2{
padding: .5em;
position: relative;
}
h2:after {
content: "";
display: block;
height: 4px;
background-image: linear-gradient(to right, #EB9BBD, #7ED1E6);
}




/*タイトル　orange*/
h3{
	width: 100%;
	margin: 0 auto 5%;
	font-size: 25px;
	color: #ffffff;
	font-weight:bold;
	text-align: center;
	background-size: 1px 1px;
	background-color:#174e9e;
	padding: 0.5% 0;
}

/*タイトル　orange*/
h4{
	width: 100%;
	margin: 0 auto 5%;
	font-size: 25px;
	color: #ffffff;
	font-weight:bold;
	text-align: center;
	background-size: 1px 1px;
	background-color:#e4aa01;
	padding: 0.5% 0;
}

/*タイトル　red*/
h5{
	width: 100%;
	margin: 0 auto 5%;
	font-size: 25px;
	color: #ffffff;
	font-weight:bold;
	text-align: center;
	background-size: 1px 1px;
	background-color:#d22d47;
	padding: 0.5% 0;
}

/*アンダーラインタイトル　ブルー*/
p.under_line_1 {
	width: 100%;
 margin: 0 auto 5%;
 font-size: 25px;
 color: #000000;
 font-weight:bold;
 text-align: center;
 border-bottom: 3px solid #88b83e;
 padding: 0.5% 0;
}

/*アンダーラインタイトル　オレンジ*/
p.under_line_2 {
	width: 100%;
 margin: 0 auto 5%;
 font-size: 25px;
 color: #000000;
 font-weight:bold;
 text-align: center;
 border-bottom: 3px solid #019c96;
 padding: 0.5% 0;
}

/*アンダーラインタイトル　緑*/
p.under_line_3 {
	width: 100%;
 margin: 0 auto 5%;
 font-size: 25px;
 color: #000000;
 font-weight:bold;
 text-align: center;
 border-bottom: 3px solid #174e9e;
 padding: 0.5% 0;
}

/*アンダーラインタイトル　ピンク*/
p.under_line_4 {
	width: 100%;
 margin: 0 auto 5%;
 font-size: 25px;
 color: #000000;
 font-weight:bold;
 text-align: center;
 border-bottom: 3px solid #e4aa01;
 padding: 0.5% 0;
}

/*アンダーラインタイトル　紫*/
p.under_line_purple {
	width: 100%;
 margin: 0 auto 5%;
 font-size: 25px;
 color: #000000;
 font-weight:bold;
 text-align: center;
 border-bottom: 3px solid #A55B9A;
 padding: 0.5% 0;
}

/*文字*/
p.no_under_line {
	width: 100%;
 margin: 0 auto 5%;
 font-size: 20px;
 color: #000000;
 font-weight:normal;
 text-align: center;
 padding: 0.5% 0;
}

/*文字*/
p.roomclip {
	width: 100%;
 margin: 0 auto 5%;
 font-size: 18px;
 color: #000000;
 font-weight:bold;
 text-align: center;
 padding: 0.5% 0;
}

/*文字*/
p.kigen {
	width: 100%;
 margin: 0 auto 5%;
 font-size: 25px;
 color: #000000;
 font-weight:bold;
 text-align: center;
 padding: 0.5% 0;
}

/*赤文字*/
p.red_font {
	width: 100%;
 margin: 0 auto 5%;
 font-size: 20px;
 color: #E60000;
 font-weight:bold;
 text-align: center;
 padding: 0.5% 0;
}

.img_block{
	display: block;
	margin:auto;
	width:95%;

}

/*商品名*/
p.item{
	font-size:16px;
	color: #252525;
	font-weight: bold;
}
/*価格オフ*/
p._off{
	font-size:13px;
	color: #252525;
	font-weight: bold;
}
._off:after {
  content:'→';
	color: #252525;
	font-size:13px;
}

/*価格*/
.price:before {
    content:'¥';
}
p.price {
    font-size:14px;
		color: #c11515;
		font-weight: bold;
}

/*ネット限定*/
.price0:after {
    content:'ネット限定';
		padding: 0.2em 0.5em;
    margin: 0 0.5em 1em;
		color: #c11515;
		font-size: 14px;
    border: solid 2px #c11515;
}
.price0:before {
    content:'¥';
}

/*新商品*/
.new:after {
    content:'new';
		padding: 0.2em 0.5em;
    margin: 0 0.5em 1em;
		color: #c11515;
		font-size: 14px;
    border: solid 2px #c11515;
}

p.price0 {
    font-size:22px;
		color: #c11515;
		font-weight: bold;
}

/*冷感値★*/
.reikanchi:before {
    content:'ひんやり度';
		color: #252525;
		font-size:15px;
}
p.reikanchi {
	font-size:19px;
	color: #ffcc00;
}

ul {
	list-style-type: none;
	padding-left: 0;
	margin: 0 auto;
}

li {
	/*background:#ffffff;*/
	width: 250px;
	padding: 10px;
	margin: 10px;
	vertical-align: top;
}

.inline-block {
	text-align: center;
	max-width: 900px;
}
.inline-block li {
	display: inline-block;
}

nav.footer {
	padding: 0 1rem 2rem;
	width: 100%;
	margin: 0 auto;
	max-width: 1040px;
	display: table;
	text-align:center;
}

nav.footer a {
	font-size: 0.7rem;
	/*border-left: 1px solid #222;*/
	width: 100vw;
	display: table-cell;
	color: #222;
}

.copyright {
	font-size: 0.8rem;
	padding: 30px;
	color: #c0c0c0;
	text-align:center;
}




/**********横にすーってなるやつ**********/

#top-editarea {
	width: 100%;
	margin: 0 auto 0 auto;
}	 	
/* ↓↓大衆向け↓↓ */
.recommends {
	margin: 0;
	width: 100%;
}
.recommends .carousel {
	list-style-type: none;
	background: #eee;
	padding: 12px;
	width: 100%;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
	margin: 0;
}
.recommends .carousel li {
	background: #fff;
	margin: 10px;
	text-align: center;
	display: inline-block;
	word-break: break-all;
}
.recommends .recommend-entry {
	display: block;
	width: 250px;
	font-size: 1rem;
	font-weight: 600;
}
.recommends a.recommend-entry {
	background: #fbfbf0;
	box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
	position: relative;
	line-height: 1.5;
}
.recommends a.recommend-entry:hover {
	box-shadow: 0 15px 30px -5px rgba(0,0,0,.15),0 0 5px rgba(0,0,0,.1);
	transform: translateY(-4px);
	transition: 0.2s;
	background: #fbfbf0;
}
.recommend-img {
	display: block;
	width: 100%;
	font-size: 1rem;
	font-weight: 600;
	background: #fbfbf0;
	box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
	position: relative;
	line-height: 1.5;
}
.recommend-title {
	display:flex ;
	padding: 0.5em 0.5em;
	margin: -0.5em -0.5em;
	word-break: break-all;
	width: 100%;
	white-space: normal;
	text-align: left;
}



/**********上から下におりてくるやつ**********/
/*上から下*/
@keyframes SlideDown {
0% {
    opacity: 0;/* 透明 */
    transform: translateY(-50px);/* X軸方向に-50px */
}
100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);/* X軸方向に0px */
}
}

 h1, h2, h3, h4, h5, h6, p, div{
animation-name: SlideDown;/* 上から下におりてくるやつ */
animation-duration: 2s;/* 上から下におりてくるやつの時間 */
}



/*1240px以上のモニタサイズの時　PCモニタレスポンス用*/
@media screen and (min-width: 1240px){
}

/*1030px以下のモニタサイズの時　主にタブレット*/
@media screen and (max-width: 1030px){
}

/*768px以下のモニタサイズの時　主にタブレットとスマホの横向き*/
@media screen and (max-width: 768px){
}

/*480px以下のモニタサイズの時　主にスマートフォンの縦*/
@media screen and (max-width: 480px){
	body {
	min-width: 480px;
	width: 100%;
}


/* 既存見出しのリセット */
h2,
h2:before,
h2:after {
content: none;
background: none;
background-color: none;
border: none;
border-radius: 0;
}





p.mainimg{
	max-width: 90%;
	text-align: center;
	margin: 0 auto;
}
	/*タイトル*/
	h1{
		width: 100%;
		margin: 0 auto 5%;
		font-size: 22px;
		color: #ffffff;
		font-weight:bold;
		text-align: center;
		background-size: 1px 1px;
		background-color:#88b83e;
		padding: 1.5% 0;
	}

	/*タイトル*/
	h2{
padding: .5em;
position: relative;
}
h2:after {
content: "";
display: block;
height: 4px;
background-image: linear-gradient(to right, #EB9BBD, #7ED1E6);
}
	




	/*タイトル*/
	h3{
		width: 100%;
		margin: 0 auto 5%;
		font-size: 22px;
		color: #ffffff;
		font-weight:bold;
		text-align: center;
		background-size: 1px 1px;
		background-color:#174e9e;
		padding: 1.5% 0;
	}
	/*タイトル*/
	h4{
		width: 100%;
		margin: 0 auto 5%;
		font-size: 22px;
		color: #ffffff;
		font-weight:bold;
		text-align: center;
		background-size: 1px 1px;
		background-color:#e4aa01;
		padding: 1.5% 0;
	}

	/*タイトル*/
	h5{
		width: 100%;
		margin: 0 auto 5%;
		font-size: 22px;
		color: #ffffff;
		font-weight:bold;
		text-align: center;
		background-size: 1px 1px;
		background-color:#d22d47;
		padding: 1.5% 0;
	}

	/*商品名*/
	p.item{
		font-size:15px;
		color: #252525;
		font-weight: bold;
		padding: 0.2em 0;
	}

	/*文字*/
	p.roomclip {
		width: 100%;
	 margin: 0 auto 5%;
	 font-size: 15px;
	 color: #000000;
	 font-weight:bold;
	 text-align: center;
	 padding: 0.5% 0;
	}

	/*価格オフ*/
	p._off{
		font-size:13px;
		color: #252525;
		font-weight: bold;
	}
	._off:after {
	  content:'→';
		color: #252525;
		font-size:13px;
	}

	/*価格*/
	.price:before {
	    content:'¥';
	}
	p.price {
	    font-size:14px;
			color: #c11515;
			font-weight: bold;
	}
	/*ネット限定*/
	.price0:after {
	    content:'ネット限定';
			padding: 0.2em 0.5em 0.2em;
	    margin: 0 0.5em 1em;
			color: #c11515;
			font-size: 12px;
	    border: solid 2px #c11515;
	}
	.price0:before {
	    content:'¥';
	}
	/*新商品*/
	p.new:after {
	    content:'New';
			padding: 0.2em 0.5em 0.2em;
	    margin: 0 0.5em 1em;
			color: #c11515;
			font-size: 12px;
	    border: solid 2px #c11515;
	}

	p.price0 {
	    font-size:18px;
			color: #c11515;
			font-weight: bold;
	}

	/*冷感値★*/
	.reikanchi:before {
	    content:'ひんやり度';
			color: #252525;
			font-size:13px;
	}
	p.reikanchi {
		font-size:15px;
		color: #ffcc00;
	}

	li {
		/*background: #ffffff;*/
		width: 35%;
		padding: 3%;
		margin: 3%;
	}

	nav.footer {
		padding: 0 2em 2em 0;
		width: 100%;
		margin: 0 auto;
		display: table;
		text-align:center;
	}

	nav.footer a {
		font-size: 1em;
		/*border-left: 1px solid #222;*/
		width: 100vw;
		display: table-cell;
		color: #222;
	}

}


.img-box {
  margin: 10px;
}
.img-box img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}
.left-bottom {
  object-position: 0 100%
}
.right-bottom {
  object-position: 100% 100%
}

/* Layout */
body {
  display: flex;
  text-align: center;
  font-family: sans-serif;
}
h2 {
  font-size: 1.15rem;
  margin: 10px 0 5px;
}

/**********横にすーってなるやつ**********/

/*#top-editarea {	    width: 100%;	    margin: 0 auto 0 auto;	 }	*/
/* ↓↓大衆向け↓↓ */
.recommends {
	margin: 0;
	width: 98%;
}
.recommends .carousel {
	list-style-type: none;
	background: #eee;
	padding: 8px;
	width: 100%;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
	margin: 0;
}
.recommends .carousel li {
	background: #fff;
	margin: 10px;
	text-align: center;
	display: inline-block;
	word-break: break-all;
}
.recommends a.recommend-entry {
	display: block;
	width: 250px;
	font-size: 1rem;
	font-weight: 600;
	background: #fbfbf0;
	box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
	position: relative;	
	line-height: 1.5;
}
.recommends a.recommend-entry:hover {
	box-shadow: 0 15px 30px -5px rgba(0,0,0,.15),0 0 5px rgba(0,0,0,.1);
	transform: translateY(-4px);
	transition: 0.2s;
	background: #fbfbf0;
}
.recommend-title {
	display:flex ;
	padding: 0.5em 0.5em;
	word-break: break-all;
	width: 100%;
	white-space: normal;
	text-align: left;
}




/**********上から下におりてくるやつ**********/
/*上から下*/
@keyframes SlideDown {
0% {
    opacity: 0;/* 透明 */
    transform: translateY(-50px);/* X軸方向に-50px */
}
100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);/* X軸方向に0px */
}
}

 h1, h2, h3, h4, h5, h6, p, div{
animation-name: SlideDown;/* 上から下におりてくるやつ */
animation-duration: 2s;/* 上から下におりてくるやつ */
}