/* ----------------------------------------
	howto.html
-------------------------------------------*/

.howto .sec{
	padding-bottom: 20%;
}
.howto .con__in h4{
	font-size: 24px;
	padding: 8% 0 4%;
}
.howto .sec .text{
	text-align: justify;
}
#flow .read{
	width: var(--page-width);
	margin: 0 auto;
	padding-bottom: 8%;
}
.flow_list{
	width: 100%;
	padding-bottom: 8%;
	background: url(../img/howto/bg_flow.gif) left top repeat;
}
.flow__in{
	position: relative;
	width: calc(100% + (100vw - 100%) / 2);
	padding: 0 0 4% 8%;
}
.slick-slider{
	padding-top: 10%;
}
.slick-slider .slick-item{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
}
.slick-slider .slick-item .box{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 320px;
	min-height: 320px;
	border-radius: 12px;
	background-color: #fff;
}
.slick-slider .slick-item .box .num{
	position: absolute;
	left: 0;
	top: 0;
	width: 60px;
}
.slick-slider .slick-item .box .img{
	padding: 4%;
}
.slick-slider .slick-item .box .img img{
	border-radius: 20px;
}
.slick-slider .slick-item .box .title{
	font-size: 18px;
	font-weight: bold;
	padding: 0 4%;
}
.slick-slider .slick-item .box .text{
	font-size: 13px;
	padding: 0 4% 4%;
}
.slick-slider .slick-item .day{
	width: 20px;
	margin: 0 8%;
}
.slick-slider .slick-item:not(:first-child) .day{
	width: 22px;
}
.slick-slider .slick-item .day img{
	object-fit: cover;
}
.slick__prev,
.slick__next {
	position: absolute;
	top: 30px;
	z-index: 1;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 1px solid #333;
	background: #fff;
}
.slick__prev {
	/* (インナー幅の右端) + (画像のマージン + ボタンの大きさ + ボタンとの間隔) */
	right: calc((100vw - 100%) + (30px + 50px + 10px));
}
.slick__next {
	/* (インナー幅の右端) + (画像のマージン) */
	right: calc((100vw - 100%) + (30px));
}
.slick__prev:before,
.slick__next:before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	opacity: 1;
	content: '';
}
.slick__prev:before {
	transform: translate(-25%, -50%) rotate(-135deg);
}
.slick__next:before {
	transform: translate(-75%, -50%) rotate(45deg);
}
.flow_list .foot{
	width: var(--page-width);
	margin: 0 auto;
	padding: 1%;
	color: #fff;
	font-weight: bold;
	border-radius: 8px;
	background-color: var(--sub-green);
}
.grow{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.grow .list_area{
	width: 58%;
	letter-spacing: 0;
	text-align: justify;
	line-height: 1.6;
}
.grow .list_area dl{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	border-bottom: 1px dashed;
	border-color: rgba(var(--green-rgb),0.75);
	padding: 4% 0;
}
.grow .list_area dt{
	width: 30px;
}
.grow .list_area dd{
	width: calc(100% - 40px);
}
.grow .comment{
	margin-top: 8%;
	padding: 4%;
	font-weight: bold;
	color: var(--brown);
	border-radius: 8px;
	border: 1px solid;
	border-color: var(--brown);
}
.grow .photo_area{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	row-gap: 20px;
	width: 36%;
}
.grow .photo_area img{
	border-radius: 20px;
}
#types{
	padding-top: 20%;
	color: #fff;
	background: url(../img/common/bg_vege.gif) left top repeat;
}
#types .sec{
	width: var(--page-width);
	margin: 0 auto 20%;
}
.vege_types ul{
	width: 88%;
	margin: 0 auto;
	padding-top: 8%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 20px;
}
/* 最後のコンテンツを左寄せにする指定 */
.vege_types ul:after{
		content: "";
		display: block;
		width: 31%;
		height: 0;
}
.vege_types li{
	width: 31%;
}
.vege_types li img{
	width: 76%;
	padding: 1%;
}
.vege_types li p{
	color: var(--font-black);
	font-weight: bold;
	border-radius: 8px;
	background-color: #fff;
}
.howto .tbl_head dt{
	width: 24%;
	border-right: 1px solid;
	border-color: var(--bg-sub-color);
}
.howto .tbl_head dd{
	width: 76%;
}
.howto .head dt,
.howto .tbl_head dt,
.howto .tbl_head dd{
	padding: 4px;
	color: #fff;
	text-align: center;
	font-weight: normal;
	background-color: var(--brown);
}
.howto .tbl .note{
	padding-top: 4px;
	font-size: 14px;
	text-align: right;
}
#equipment{
	padding-top: 16%;
	margin-bottom: 16%;
	background-color: #fff;
}
#equipment h4{
	padding: 0 0 2%;
	font-size: 20px;
	text-align: left;
}
#equipment h4 .gr{
	font-size: 125%;
	padding-left: 2px;
	color: var(--sub-green);
}
.howto .point{
	font-size: 16px;
}
.howto .point{
	padding: 4% 6%;
	text-align: left;
	border: 1px dashed;
	border-radius: 20px;
	border-color: var(--brown);
}
.howto .point li{
	font-weight: bold;
	padding-bottom: 1%;
}
#equipment .tbl{
	padding-top: 8%;
	text-align: left;
}
#equipment .tbl dl:not(:first-child) dt{
	width: 32%;
	background-color: #f9f9f9;
}
#equipment .tbl dd{
	width: 68%;
}
#equipment .tbl dd .tit{
	font-weight: bold;
}
#equipment .tbl dd .text{
	padding-bottom: 2%;
	padding-left: 2em;
}
#equipment .gallery{
	padding: 4% 0 8%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#equipment .gallery li{
	width: 24%;
	font-size: 14px;
	font-weight: bold;
}
#equipment .gallery li p{
	padding-top: 2%;
}
#equipment .gallery li img{
	object-fit: cover;
	border-radius: 8px;
}
#equipment .text_box{
	padding: 4% 6%;
	border-radius: 20px;
	background-color: rgba(var(--bg-sub-color-rgb),0.5);
}
#equipment .text_box dl{
	font-size: 16px;
	display: flex;
	justify-content: space-between;
}
#equipment .text_box dt{
	width: 100px;
}
#equipment .text_box dt p{
	color: #fff;
	border-radius: 8px;
	font-weight: bold;
	background-color: var(--brown);
}
#equipment .text_box dd{
	width: calc(100% - 120px);
	text-align: justify;
}
#equipment .text_box .text{
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: space-between;
	row-gap: 10px;
	padding: 2% 0;
}
#equipment .text_box .text img{
	width: 36px;
	height: auto;
}
#equipment .text_box .text p{
	font-size: 18px;
	font-weight: bold;
	color: var(--brown);
	letter-spacing: 0.1em;
}
#maintenance .point{
	margin: 4% 0 6%;
}
#maintenance .point li:first-letter{
	color: var(--green);
}
#maintenance .tbl dt{
	width: 20%;
	border: 0;
}
#maintenance .tbl dd{
	width: 60%;
	border-left: 1px solid;
	border-color: var(--bg-sub-color);
}
#maintenance .tbl dd:last-child{
	width: 20%;
	text-align: center;
}
#maintenance .text_area{
	text-align: justify;
	padding: 6% 0;
}
#maintenance .text_area .title{
	font-weight: bold;
}
#maintenance .img{
	display: flex;
	justify-content: space-between;
}
#maintenance .img div{
	width: 32%;
}
#maintenance .img img{
	border-radius: 12px;
}

@media screen and (max-width: 650px){
	
	.howto .sec{
		padding-bottom: 28%;
	}
	.howto .con__in h4{
		font-size: 16px;
		padding: 16% 0 8%;
	}
	.flow_list{
		width: 100%;
		padding-bottom: 8%;
		background: url(../img/howto/bg_flow.gif) left top repeat;
	}
	.flow__in{
		padding: 0 0 8% 8%;
	}
	.slick-slider{
		padding-top: 28%;
	}
	.slick-slider .slick-item .box{
		width: 340px;
		min-height: 280px;
	}
	.slick-slider .slick-item .box .num{
		width: 50px;
	}
	.slick-slider .slick-item .box .img{
		padding: 4% 4% 2%;
	}
	.slick-slider .slick-item .box .img img{
		border-radius: 12px;
	}
	.slick-slider .slick-item .box .title{
		padding: 2%;
	}
	.slick-slider .slick-item .day{
		width: 18px;
		margin: 0 6%;
	}
	.slick-slider .slick-item:not(:first-child) .day{
		width: 22px;
	}
	.slick__prev,
	.slick__next {
		top: 40px;
		width: 40px;
		height: 40px;
	}
	.slick__prev {
		/* (インナー幅の右端) + (画像のマージン + ボタンの大きさ + ボタンとの間隔) */
		right: calc((100vw - 100%) + (0px + 40px + 10px));
	}
	.slick__next {
		/* (インナー幅の右端) + (画像のマージン) */
		right: calc((100vw - 100%) + (0px));
	}
	.flow_list .foot{
		padding: 2%;
		margin-bottom: 8%;
		border-radius: 4px;
	}
	.grow{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.grow .list_area,
	.grow .photo_area{
		width: 100%;
	}
	.grow .list_area dd{
		padding-top: 1%;
	}
	.grow .comment{
		margin-bottom: 12%;
	}
	.grow .photo_area{
		flex-direction: initial;
		justify-content: space-between;
		row-gap: initial;
	}
	.grow .photo_area div{
		width: 48%;
	}
	.grow .photo_area img{
		border-radius: 8px;
	}
	#types{
		padding-top: 28%;
	}
	#types .sec{
		margin: 0 auto 28%;
	}
	.vege_types ul{
		width: 100%;
	}
	.vege_types li{
		width: 49%;
	}
	.vege_types li img{
		width: 80%;
		padding: 2%;
	}
	.vege_types li p{
		padding: 2%;
		border-radius: 4px;
	}
	.howto .tbl_head dt{
		width: 30%;
	}
	.howto .tbl_head dd{
		width: 70%;
	}
	.howto .head dt,
	.howto .tbl_head dt,
	.howto .tbl_head dd{
		font-size: 13px;
	}
	.howto .tbl .note{
		padding-top: 2%;
		font-size: 12px;
	}
	#equipment h4{
		font-size: 14px;
		line-height: 1.6;
		padding-bottom: 4%;
	}
	.howto .point{
		font-size: 13px;
		border-radius: 12px;
		padding: 6% 8%;
		margin-bottom: 4%;
	}
	#equipment .tbl dl:not(:first-child) dt,
	#equipment .tbl dd{
		width: 100%;
	}
	#equipment .gallery{
		padding: 12% 0;
		row-gap: 12px;
	}
	#equipment .gallery li{
		width: 49%;
		font-size: 12px;
	}
	#equipment .gallery li p{
		padding-top: 4%;
	}
	#equipment .gallery li img{
		border-radius: 4px;
	}
	#equipment .text_box{
		padding: 6%;
		border-radius: 8px;
	}
	#equipment .text_box dl{
		font-size: 13px;
	}
	#equipment .text_box dt{
		width: 80px;
	}
	#equipment .text_box dt p{
		border-radius: 4px;
	}
	#equipment .text_box dd{
		width: calc(100% - 96px);
	}
	#equipment .text_box .text{
		padding: 4% 0;
	}
	#equipment .text_box .text img{
		width: 28px;
	}
	#equipment .text_box .text p{
		font-size: 14px;
	}
	#maintenance .text_area{
		padding: 8% 0;
	}
	#maintenance .point{
		margin: 8% 0 12%;
	}
	#maintenance .img{
		flex-wrap: wrap;
		row-gap: 8px;
	}
	#maintenance .img div{
		width: 48%;
		margin: 0 auto;
	}
	#maintenance .img img{
		border-radius: 8px;
	}
}