/*------------------------------------------------------------common*/
.red{color:#ff0000;}
h2,h3,h4,h5{color: #666 !important;}
p{color: #666 !important;line-height: 150% !important;}
/*------------------------------------------------------------bxslider*/
.img_wrap{position: relative;width:100%;margin:0 auto;overflow: hidden;}
.bx-wrapper{width: 320px;}
.bx-wrapper ul.bxslider li{width: 100%;margin:0 auto;}
.bx-wrapper ul.bxslider li img{width: 95%;margin:0 auto;}
.bx-wrapper .bx-pager {text-align: center;margin-top: 5px;}
.bx-wrapper .bx-pager .bx-pager-item {display: inline-block;*zoom: 1;*display: inline;}
.bx-pager a {background: #666;text-indent: -9999px;display: block;width: 10px;height: 10px;margin: 0 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
.bx-pager a:hover,.bx-pager a.active {background: #000;}
/*------------------------------------------------------------contact*/
.title01 {
  font-weight: bold!important;
}

/**ファーストビュー**/
div#wrap{position:relative;background:rgba(255,255,255,0.4);width:100%;height:600px;background-size: cover;background-position:center right;}
div#cover{position:relative;z-index:2;background:rgba(255,255,255,0.7);color:#000;float:left;height:100%;text-align:center;width:600px;background-size: cover;padding:20px;}
div#cover h2{/*font-weight:bold;font-family: 'Courgette', cursive;*/font-weight:bold;font-size: 56px;margin:20px 0 0px;width:100%;text-align: center;color:#000 !important;font-family: 'ヒラギノ明朝 ProN W6','HiraMinProN-W6','HiraMinProN-W6';}
div#cover strong{display: block;margin-bottom:10px;font-family: 'Courgette';font-size:120%;}
div#cover dl{display: inline-block;width:96%;margin:0 auto 10px;padding:0;}
div#cover dl dt{float:left;width:20%;margin:0;padding:10px;background:#009E52;color:#ffffff;border-radius:30px;font-size:180%;}
div#cover dl dd{float:left;width:80%;margin:0;padding:10px 10px;text-align: left;font-size:180%;font-weight:bold;}
div#cover dl::after{display: block;content:"";clear:both;}
div#bgimg{background-image:url(../img/lp_img/woodbooth_fview_bg5.jpg);background-position:top right;position:absolute;z-index:1;width:100%;height:100%;}
/****/
div#cover dl{display: inline-block;width:96%;margin:0 auto 10px;padding:0;}
div#cover dl dt{float:left;width:20%;margin:0;padding:10px;background:#009E52;color:#ffffff;border-radius:30px;font-size:180%;}
div#cover dl dd{float:left;width:80%;margin:0;padding:10px 10px;text-align: left;font-size:180%;font-weight:bold;}
div#cover dl:after{display: block;content:"";clear:both;}
div#cover .deliv_fee{margin:0;padding:10px;background:#009E52;color:#ffffff;border-radius:30px;font-size:180%;font-weight: bold;}
/****/
@media print, screen and (max-width:767px) {
	div#wrap{height:auto;}
	div#cover{width:100%;}
	div#cover h2{font-size: 36px;margin:30px 0 0px;}
	div#cover dl dt{font-size:130%;}
	div#cover dl dd{font-size:130%;}
	div#cover_img{width:48%;margin:0;}
	div#cover_img img{margin:0 auto;width:200px;}
}

dl.reserve{width:100%;display: inline-block;}
dl.reserve dt{width:18%;float:left;margin:0;padding:15px;border: 1px solid #009E52;background:#009E52;text-align: center;color:#ffffff;font-size: 200%;}
dl.reserve dd{width:78%;float:left;margin:0;padding:15px;border: 1px solid #009E52;}
dl.reserve dd ol li{list-style-type: decimal;font-size: 130%;margin:0 0 10px 50px;color:#666;font-weight: bold;}
dl.reserve::after{content:"";clear:both;display: block;}

@media print, screen and (max-width:767px) {
	dl.reserve dt{width:98%;clear:left;}
	dl.reserve dd{width:98%;clear:left;}
}

dl.ph{
	width:100%;
	max-width:1270px;
	margin:0 auto 50px;
	display: inline-block;
}

dl.ph dt{
	width:100%;
	margin:0 0 30px;
	padding:0;
}
dl.ph dd{
	width:100%;
	margin:0;
	padding:0;
}
dl.ph dt img, dl.ph dd img{
	width:100%;
}

#contact_wrap{
	background: url('../img/lp_img/contact_bg2.jpg') 50% 0 no-repeat fixed;
	background-size: cover;
	width: 100%;
	margin: 0 auto;
	padding:20px 0;
	}
#contact_wrap p{
	color:#ffffff;
	font-size:200%;
	}
#contact_wrap #contact_area_bg{
	background: url('../img/lp_img/contactarea_bg.png') repeat-y center top;
	width: 940px;
	margin: 0 auto 0px;
	padding:20px;
	display: inline-block;
	}
#contact_wrap h3{
		color:#666666;
		font-size:250%;
		font-weight: bold;
		padding:0 0 5px;
		border-bottom:1px solid #666666;
}
#contact_wrap #contact_merit{
		clear:both;
		margin:30px auto 0;
		text-align: center;
		display: inline-block;
}
@media print, screen and (max-width:980px) {
  #contact_wrap #contact_area_bg{
  	width: 90%;
  }
  #contact_wrap img{
  	width: 80%;
    margin:0 auto;
  }
  #contact_wrap p{
  	font-size:150%;
    width:90%;
    margin-left:auto;
    margin-right:auto;
  }
  #contact_wrap h3{
  		font-size:150%;
  }
}
/*------------------------------------------------------------content*/
#index_text {
    background: url('../img/lp_img/main_bg.jpg') 50% 0 no-repeat fixed;
    /*background-size: cover;*/
    height: 480px;
  	margin: 0 auto;
  	padding: 0;
}
#index_text .container{
    padding: 30px 0;
    background: none;
    /*background-size: contain;*/
    margin: 0 auto;
}
#index_text .container .section{
    background: #fff;
		padding-bottom:20px;
}
#index_text .container .section h2{
    font-size:46px;font-weight:bold;margin-bottom:0px;padding:10px 0;
		width:100%;background: #009E52;color:#fff;
}
#index_text .container .section p{
    font-size:20px;font-weight:normal;margin:0px;padding:0;
}
#index_text .container .section dl.cp_title{
		margin:10px auto;padding:0;display: inline-block;
}
#index_text .container .section dl.cp_title dt{
		font-size:16px;float:left;margin:0px;padding:25px 10px;font-weight:normal;color:#ffff00;
		width: 120px;
	height: 120px;
	-webkit-border-radius: 60px;/* width,heightの半分 */
	-moz-border-radius: 60px;
	border-radius: 60px;
	background-color: #666;/* 円の色 */
}
#index_text .container .section dl.cp_title dd{
		font-size:68px;font-weight:bold;float:left;margin:0px;padding:0 10px;color:#009E52;font-family: "ヒラギノ角ゴ StdN","Hiragino Kaku Gothic StdN" !important;
}
#index_text .container .section dl.cp_title dd strong{font-size:120%;}
#index_text .container h2 img{
    max-width: 100%;
}
#index_text .container .section ul.triple {
		margin:0 5%;padding:0;display: inline-block;width: 90%;line-height: 120%;
}
#index_text .container .section ul.triple li{
		font-size:21px;float:left;width:30%;margin:0 5% 0 0;padding:20px 0;border-radius:10px;
		background: #ffffff;border:2px solid #009E52;color:#009E52;background:#fff;text-align: center;font-weight:normal;
}
#index_text .container .section ul.triple li strong{font-size:120%;font-weight:bold;}
#index_text .container .section ul.triple li:last-child{
		margin:0;
}

#index_text .btn {box-shadow: 3px 3px 6px 0 #666; margin-top: 40px;}

#index_text .btn:hover{
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
}
#index_sec01, #index_sec04{
	text-align: center;
}
h2.title01{
	margin-top:50px;
	background: none;
	text-align: center;
	display: inline-block;
	padding:0 10px 10px 10px;
	border-bottom: 1px solid #009900;
	color:#666666;
	font-size:200%;
	line-height: 160%;
}
@media print, screen and (max-width:767px) {
#index_text .container .section h2{font-size:21px;padding:0 5px;}
#index_text .container .section p{ font-size:14px;}
#index_text .container .section dl.cp_title dt{font-size:14px;clear:left;margin:0px;padding-top:40px;}
#index_text .container .section dl.cp_title dd{font-size:28px;font-weight:bold;clear:left;text-align:center;}
#index_sec01 strong{font-size:120%;}
#index_text .container .section ul.triple li{font-size:21px;clear:left;width:100%;margin:0 0 20px;padding:20px 0;}
}


.bg1703{
	background: url('../img/lp_img/main_bg1703.jpg') 50% 0 no-repeat fixed;
}

.red{color: #ff0000 !important;}

.content_bg02{background: #ececec;}
#triangle_grey{margin:0;padding:0;width: 0;height: 0;border-style: solid;border-width: 60px 100px 0 100px;border-color: #ececec transparent transparent transparent;display: inline-block;}

table.price{font-weight:normal;vertical-align: top;}
table.price th{font-weight: bold;font-size:110%;padding:10px;width:20%;text-align: center;}
table.price td{padding:10px;width:80%;}
table.price td span{font-weight: bold;font-size:150%;display: block;color:#cc0000;width:100%;text-align: center;}
table.price td span small{font-weight: normal;font-size:60%;color:#666666;text-decoration: line-through;}

table.price th.half{width:50%;}
table.price td.half{width:50%;}
ol.flow li .border{background: #ffffff;}

table.spec{font-weight:normal;color:#666666;}
table.spec th {padding:8px 12px 8px 0; line-height: 1.4;vertical-align: top;}
table.spec td {padding:8px 0; line-height: 1.4;vertical-align: top;}
table.spec td span{display: block;}
table.spec td span small{font-weight: normal;font-size:60%;text-decoration: line-through;}

dl.iten_merit ul li .txt-center h3{text-align: center;width:100%;}
dl.iten_merit ul li span{font-weight: normal;font-size:14px;}
div#cover_img{position:absolute;z-index:2;float:left;margin:-60px 0 0 -50px;width:28%;text-align: center;display:inline-block;}
div#cover_img img{margin:0 auto;width:100%;}
#index_sec02 dl.iten_merit dt, #index_sec02 dl.iten_merit dd p.under_txt{width:70%;float:right;}
#index_sec02 dl.iten_merit dt::after, #index_sec02 dl.iten_merit dd p.under_txt::after{display: block;content:"";clear:right;}
#index_sec02 dl.iten_merit dt h3.title02 strong{display:inline;background:none;color:inherit;font-size:120%;}
#index_sec02 ul.index_voice li .bg_white{margin:0 1%;width:98%;padding:10px;background: #ffffff;}
#index_sec02 ul.index_voice li h4{margin:5px 0;font-size:150%;text-align: left;}
#index_sec02 ul.index_voice li h5{margin:0 0 15px;font-size:150%;text-align: center;color: #666;}
#index_sec02 ul.index_voice li p{margin:15px auto 0;color: #666;}
#index_sec02 ul.index_voice li img{margin:0;width:100%;}
#index_sec02 strong{margin:0;display: block;padding:5px 0;border-radius: 5px;text-align: center;background: #ff9900;color:#ffffff;}
#index_sec02 ul.list_disc{list-style: disc;margin-left:20px;margin-top:10px;margin-right: 0;padding-right: 0;}
#index_sec02 ul.red li {color: #ff0000;font-size:110%;margin-right: 0;padding-right: 0;}
.content_bg01{background-color: #fff; margin-bottom: 20px;}
.content_bg01 .bg_w{background-color: #ffffff;margin:0 auto 30px;display: block;width:96%;}
.content_bg01 h2.title01{margin-top:20px;}
#index_sec02 dl{width:100%;padding:0;margin:0;display: inline-block;}
#index_sec02 dl dt{margin:0px;padding:10px 0;width:100%;}
#index_sec02 dl dd{margin:0px;padding:10px 0;font-size: 120%;color:#000000;text-align: left;width:100%;}
#index_sec02 dl dt h3{margin:20px 0 0;padding:0 0 10px;font-weight: bold;font-size: 200%;color:#000000;text-align: center;}
#index_sec02 dl dd ul{margin-top:20px}

#index_sec03{text-align: center;}
#index_sec03 dl{width:90%;margin:20px 5%;display: inline-block;padding:0;}
#index_sec03 dl dt{margin:0px;padding:10px 0;text-align: center;}
#index_sec03 dl dd{margin:0px;padding:10px 0;font-size: 120%;color:#000000;text-align: left;}
#index_sec03 h2.title01{border-bottom: 1px solid #000;color:#000;text-align: center;display: inline-block;}
#index_sec03 dl dt h3{margin:0px;padding:0px;font-weight: bold;font-size: 200%;color:#66cc33;}
#index_sec03 dl dd ul{margin-top:20px;}
#index_sec03 dl dd img{margin:5px 0;width:90%;}
#index_sec03 dl dd img.img_center{margin:5px 10%;width:80%;}
#index_sec03 dl dd h4{margin:0 0 20px;padding:0px;font-weight: bold;font-size: 130%;}
#index_sec03 dl dd h4.before{margin:0 auto;width:80%;padding:5px 0;font-weight: bold;font-size: 130%;color:#ffffff;border-radius:5px;background:#666666;text-align:center;}
#index_sec03 dl dd h4.after{margin:0 auto;width:80%;padding:5px 0;font-weight: bold;font-size: 130%;color:#ffffff;border-radius:5px;text-align: center;background: #ff9900;}
#index_sec03 dl dd span.line-through{text-decoration: line-through;}
#index_sec03 dl dd p{margin:0 0 0 10px;}
#index_sec03 dl dd p strong{font-size: 120%;}
#index_sec03 dl dd ul li h3{font-weight: bold;font-size: 130%;color:#009900;padding:5px 0;border-bottom: 1px solid #009900;}
#index_sec03 dl dd ul li span{padding:10px;display: block;}
.txt-center{width:100%;text-align: center !important;}


#index_sec04 strong{display: block;font-size:130%;font-weight:normal;margin:10px 0 20px;color:#333333;}
#index_sec04 h4{margin:0px;font-weight: bold;font-size: 150%;margin:10px 0 0;}
#index_sec04 p{text-align:left;}
#index_sec04 img.flow_img{width:90%;margin:0 auto;max-width: 320px;}

@media print, screen and (max-width:767px) {
  #index_text {
    height:inherit;
  }
  #index_text .container{
    width: 95%;
    padding-bottom:0;
  }
	h2.title01{
		margin-top:30px;
		font-size:170%;
		text-align: left;
	}
	table.price th.half{width:50%;}
	table.price td.half{width:50%;}
	#index_sec02 dl.iten_merit dt, #index_sec02 dl.iten_merit dd p.under_txt{width:100%;clear:right;}
	div#cover_img{position:relative;clear:left;margin:0px 0 0 0px;width:100%;}
	div#cover_img img{margin:0 auto;width:50%;float:left;}
	#index_sec02 dl.iten_merit dt h3.title02 strong{display:block;background:none;color:inherit;font-size:100%;}
}
#acMenu dt{
	display:block;
	width:100%;
	text-align:center;
	border:#ccc 1px solid;
	cursor:pointer;
	font-size:16px;
	padding:15px !important;
	text-align: left;
	line-height: 150% !important;
	font-weight:normal;
}
#acMenu dt span{
	color:#0000ff;
	font-weight: bold;
	}
#acMenu dt:after {
  font-family: "Font Awesome 5 Free";
  content: '\f107';
  font-weight: 900;
	color:#666;
	padding-left:10px;
}
#acMenu dd{
	background:#f2f2f2;
	width:100%;
	padding:15px !important;
	font-size:16px !important;
	text-align:center;
	border-width:0 1px 1px 1px;
	border-color:#ccc;
	border-style: solid;
	display:none;
	text-align: left;
	line-height: 150% !important;
	}
	#acMenu dd span{
		color:#ff0000;
		font-weight: bold;
		}
#acMenu dt.active:after{
	font-family: "Font Awesome 5 Free";
  content: '\f077';
  font-weight: 900;
	color:#666;
	padding-left:10px;
	}
@media print, screen and (max-width:680px) {

#index_text .container{
    background: none;
    background-size:cover;
}
#index_text .btn {
    box-shadow: 3px 3px 6px 0 #666;
    margin-top: 180px!important;
	font-size:18px;
	line-height:1.3;
	padding:5px 0;
}
}
@media print, screen and (max-width:580px) {
	#index_text .container{
		background-size:cover;
	}
	#index_sec01 strong, #index_sec04 strong{
		font-size:130%;
		text-align: left;
	}
}
@media print, screen and (max-width:480px) {
#index_text .container{
	background-size:cover;
}
#index_text .btn {
    margin-top: 150px!important;
}
h2.forsp img{
	width:100%;
	}
}
@media print, screen and (max-width:380px) {
#index_text .container{
	background-size:cover;
}
}

#booth_link h3.title02{margin-top:50px;}

/**parallaxここから**/
ul#nav_p{
	list-style: none;
	position: fixed;
	right: 20px;
}

ul#nav_p li{
	margin: 0 0 15px 0;
}

#second{
	background: url(images/secondBG.jpg) 50% 0 no-repeat fixed;
	color: white;
	height: 1300px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
}
/**parallaxここまで**/

#pagetitle_showroom {
    background: url('../img/showroom_img/pagetitle_bg.jpg') center center no-repeat;
    background-size: cover;
    height: 180px;
  	margin: 0 auto;
  	padding: 0;
}
#pagetitle_showroom .container{
  display: flex;
  justify-content: center;
  align-items: center;
    height: 100%;
    padding: 30px 0;
    background: none;
    /*background-size: contain;*/
    margin: 0 auto;
}
#pagetitle_showroom .container .catch_wrap {
    background: rgba(255,255,255,0.7);
		padding:15px;
}
#pagetitle_showroom .container .catch_wrap h2{
  line-height: 1.3;
    font-size:24px;font-weight:bold;color:#202020!important;
}
#pagetitle_showroom .container .catch_wrap p{
  line-height: 1.3;font-size:16px;font-weight:bold;margin-bottom: 10px;color: #009e52!important;
}

  
@media print, screen and (min-width:768px) {
.content_bg01{background-color: #fff; margin-bottom: 40px;}
#pagetitle_showroom {
    height: 300px;
}
#pagetitle_showroom .container .catch_wrap {
		padding:30px;
}
#pagetitle_showroom .container .catch_wrap h2 {
    font-size:36px;
}
#pagetitle_showroom .container .catch_wrap p {
  font-size:20px;
}
}

.title_bar {
  position: relative;
  padding: 15px 0;
  text-align: center!important;
  line-height: 1.2;
  font-size:20px!important;
  font-weight: bold;
  color: #fff!important;
  background: #009e52;
}
.title_bar span {
  display: block;
  margin-bottom: 5px;
  font-size:16px;
}
.title_bar::after {
  position: absolute;
  left: 50%;
  bottom: -39px;
  display: block;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  content: "";
  border: solid 20px transparent;
  border-top: solid 20px #009e52;
}
@media print, screen and (min-width:768px) {
.title_bar {
  padding: 30px 0;
  font-size:30px!important;
}
.title_bar span {
  font-size:20px;
}
.title_bar::after {
  position: absolute;
  left: 50%;
  bottom: -59px;
  display: block;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  content: "";
  border: solid 30px transparent;
  border-top: solid 30px #009e52;
}
}


#usage ul li {
  margin-bottom: 20px;
  padding: 0;
}
#usage ul li .step {
  text-align: center;
  margin-bottom: 10px;
  line-height: 1.1;
  font-weight: bold;
}
#usage ul li .step span {
  position: relative;
  display: block;
  max-width: 300px;
  margin: 0 auto;
  padding: 10px;
  font-size:18px;
  font-weight: bold;
  color: #fff;
  background: #009e52;
}
#usage ul li .step span::after {
  position: absolute;
  left: 50%;
  bottom: -20px;
  display: block;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  content: "";
  border: solid 12px transparent;
  border-top: solid 12px #009e52;
}
#usage ul li figure {
  margin-bottom: 10px;
  text-align: center;
}
#usage ul li figure img {
  width: auto;
  max-width: 300px;
  height: auto;
}
#usage ul li h4 {
  margin-bottom: 10px;
  line-height: 1.3;
  text-align: center;
  font-size:18px;
  font-weight: bold;
}
#usage ul li h4 br {
  display: none;
}
#usage ul li .tx {
  line-height: 1.4;
  font-size:16px;
}
@media print, screen and (min-width:576px) {
#usage ul {
  display: flex;
  justify-content: space-between;
}
#usage ul li {
  width: 48%;
  margin-bottom: 0;
}
#usage ul li .step span {
  max-width: 100%;
}
#usage ul li figure img {
  width: auto;
  max-width: 100%;
  height: auto;
}
#usage ul li h4 br {
  display: inline;
}
}
@media print, screen and (min-width:768px) {
#usage ul li .step {
}
#usage ul li .step span {
  padding: 12px;
  font-size:24px;
}
#usage ul li h4 {
  font-size:24px;
}
#usage ul li .tx {
  font-size:16px;
}
}


#howto ul li {
  position: relative;
  margin-bottom: 40px;
  padding: 0;
}
#howto ul li::after {
  position: absolute;
  left: 50%;
  bottom: -20px;
  display: block;
  width: 20px;
  height: 20px;
  transform: translateX(-50%) rotate(45deg);
  content: "";
  border-right: solid 3px #009e52;
  border-bottom: solid 3px #009e52;
}
#howto ul li:last-child::after {
  display: none;
}
#howto ul li figure {
  margin-bottom: 10px;
  text-align: center;
}
#howto ul li figure img {
  width: auto;
  max-width: 300px;
  height: auto;
}
#howto ul li p {
  font-size:16px;
}
@media print, screen and (min-width:576px) {
#howto ul {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
#howto ul li {
  width: 31%;
  margin-bottom: 0;
}
#howto ul li::after {
  position: absolute;
  top: 50%;
  left: auto;
  right: -7%;
  bottom: auto;
  display: block;
  width: 20px;
  height: 20px;
  transform: translateX(0%) translateY(-50%) rotate(-45deg);
  content: "";
  border-right: solid 3px #009e52;
  border-bottom: solid 3px #009e52;
}
#howto ul li figure img {
  width: auto;
  max-width: 100%;
  height: auto;
}
}
@media print, screen and (min-width:768px) {
#howto ul {
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}
}


.virtual_wrap {
  width: 100%;
  height: 480px;
}
@media print, screen and (min-width:576px) {
.virtual_wrap {
  height: auto;
  aspect-ratio: 16 / 9;
}
}

.title_catch {
  margin-top: 40px;
  text-align: center;
  font-size:16px;
  font-weight: bold;
}
@media print, screen and (min-width:768px) {
.title_catch {
  margin-top: 60px;
  font-size:22px;
}
}

.list_showroom li {
  margin-top: 30px;
  padding: 0!important;
}
.list_showroom li h4 {
  font-size: 18px;
  font-weight: bold;
}
.list_showroom li figure {
  margin-top: 10px;
  text-align: center;
}
.list_showroom li figure img {
  width: auto;
  max-width: 300px;
  height: auto;
}
@media print, screen and (min-width:768px) {
.list_showroom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.list_showroom li {
  width: 100%;
  margin-top: 30px;
}
.list_showroom li.half {
  width: 48%;
}
.list_showroom li .flex_box {
  display: flex;
  justify-content: space-between;
}
.list_showroom li .flex_box > div {
  width: 48%;
}
.list_showroom li h4 {
  font-size: 22px;
  font-weight: bold;
}
.list_showroom li figure {
  margin-top: 10px;
  text-align: center;
}
.list_showroom li .flex_box > figure {
  width: 48%;
  margin-top: 0;
}
.list_showroom li figure img {
  width: auto;
  max-width: 100%;
  height: auto;
}
}


#item ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#item ul li {
  position: relative;
  width: 49%;
  margin-bottom: 25px;
  padding: 0;
  text-align: center;
}
#item ul li.recommend::before {
  position: absolute;
  top: -20px;
  left: -10px;
  display: block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 11px;
  letter-spacing: -0.05em;
  content: "おすすめ";
  color: #fff;
  border-radius: 50%;
  background: #d00;
}
#item ul li figure {
  margin-bottom: 15px;
}
#item ul li figure img {
  width: auto;
  max-width: 100%;
  height: auto;
}
#item ul li h4 {
  line-height: 1.3!important;
  font-size: 16px;
  font-weight: bold;
}
#item ul li p {
  margin-bottom: 8px;
  line-height: 1.3!important;
  font-size: 18px;
  font-weight: bold;
}
@media print, screen and (min-width:576px) {
#item ul li {
  width: 32%;
}
}
@media print, screen and (min-width:768px) {
#item {
  margin-top: 50px;
}
  #item ul li {
  margin-bottom: 50px;
}
#item ul li.recommend::before {
  top: -40px;
  left: -15px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
}
#item ul li h4 {
  font-size: 20px;
  font-weight: bold;
}
#item ul li p {
  font-size: 24px;
  font-weight: bold;
}
}
@media print, screen and (min-width:992px) {
#item ul li.recommend::before {
  top: -40px;
  left: -15px;
  width: 90px;
  height: 90px;
  line-height: 90px;
  font-size: 18px;
}
}