@charset "utf-8";
/* CSS Document */
*{word-break: break-all;}
/*-----------------------------------------------
	seijinshiki
-----------------------------------------------*/
.seijinshikiCont > h2{
	margin-bottom: 20px;
	color: #675658;
	font-size: 25px;
	font-weight: 700;
	text-align: center;
}

.mainImg-Box > img{
	border-radius: 20px;
}

/*見出し*/
.title-border{
	color: #d94040;
	padding: 30px 20px 20px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3em;
	text-align: center;
	border-top: 1px solid #111;
	border-bottom: 1px solid #111;
	position: relative;
}
.title-border:before{
	content: "";
	display: block;
	width: 45px;
	height: 45px;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 50%;
	transform: translateX(-50%);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	position: absolute;
	top: -22px;
	left: 50%;
}

/**/
.catch-img{
	margin: 30px auto;
	text-align: center;
}
.catch-img img{
	border-radius: 20px;
}

/**/
.lead-text{
	margin: 20px;
	line-height: 2em;
}

.lead-text a{
	color: #e2490c;
	text-decoration: underline;
}
.lead-text a:hover{
	text-decoration: none;
}



/*-----商品リスト-----*/
.itemlist-box > li div.btn{
	background-color: #c26262;
	color: #fff;
	padding-right: 20px;
}
.itemlist-box > li a:hover div.btn{
	background-color: #eea9a9;
}
.itemlist-box > li div.btn:after{
	border-left: 8px solid #fff;
}

@media screen and (max-width: 736px) {
	.seijinshikiCont > h2{
		font-size: 22px;
	}

	.mainImg-Box > img{
		height: 300px;
		object-fit: cover;
		object-position: left;
	}

	/*見出し*/
	.title-border{
		padding: 30px 10px 15px;
		font-size: 26px;
	}

	/**/
	.catch-img{
		width: 95%;
	}

	/*-----商品リスト-----*/
	.itemlist-box > li div.btn{
		font-size: 14px;
	}
}

@media screen and (max-width: 480px) {
	.seijinshikiCont > h2{
		padding: 0 10px;
		font-size: 20px;
	}

	.mainImg-Box > img{
		height: 210px;
	}

	/*見出し*/
	.title-border{
		padding: 25px 10px 15px;
		font-size: 22px;
	}
	.title-border:before{
		width: 40px;
		height: 40px;
		top: -25px;
	}

}


/*-----------------------------------------------
	目次
-----------------------------------------------*/
.seijinshikiCont .indexBox{
	border-color: #9d8882;
}

/**/
.seijinshikiCont .indexBox h3:after{
	background: #e2c8cb;
}

/**/
.seijinshikiCont .indexBox li a{
	color: #96575e;
}
.seijinshikiCont .indexBox li a:hover{
	background-color: #ffe3e5;
}


/*-----------------------------------------------
	ランキング
-----------------------------------------------*/
.rankingBox .rank-select{
	background-color: #ebebcf;
	padding: 40px 0;
	border-radius: 15px;
}
.rankingBox .rank-select .title-border{
	background-image: url(../../../_images/scene/seijinshiki/h-bg.webp);
	background-position: center 70%;
	background-size: cover;
}
.rankingBox .rank-select .title-border:before{
	background-image: url(../../../_images/scene/seijinshiki/number01.gif);
}

/**/
.rankingBox .rank-select .rank-list{
	display: flex;
	gap: 20px;
	margin: 30px 0 20px;
	padding: 0 20px;
}
.rankingBox .rank-select .rank-list > li a{
	display: block;
	height: 100%;
	background-color: #fff;
	padding: 7px;
	border-radius: 10px;
	position: relative;
}
.rankingBox .rank-select .rank-list > li a:hover{
	box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
}
.rankingBox .rank-select .rank-list > li a:after{
	content: "";
	display: block;
	width: 0;
	height: 0;
	border: 10px solid rgba(220,122,122,0);
	border-top: 14px solid rgba(220,122,122,0);
	transform: translateX(-50%);
	transition: all .3s ease;
	position: absolute;
	bottom: -25px;
	left: 50%;
}
.rankingBox .rank-select .rank-list > li a:hover:after{
	border-top: 14px solid rgba(220,122,122,1);
	bottom: -35px;
}


/*top3*/
.rankingBox .rank-select .rank-list.top3 > li{
	width: calc((100% - 40px) / 3);
	padding-bottom: 20px;
}
.rankingBox .rank-select .rank-list.top3 > li a img{
	width: 100%;
	height: 140px;
	object-fit: cover;
	margin-bottom: 10px;
}
.rankingBox .rank-select .rank-list.top3 > li a p{
	display: block;
	margin: auto;
	font-size: 17px;
	font-weight: 700;
	text-align: center;
}
.rankingBox .rank-select .rank-list.top3 > li a:before{
	content: "";
	display: block;
	width: 40px;
	height: 40px;
	background-color: #fff;
	background-repeat: no-repeat;
	background-size: 30px auto;
	background-position: center;
	border-radius: 50%;
	position: absolute;
	left: 5px;
	top: 5px;
	z-index: 5;
}
.rankingBox .rank-select .rank-list.top3 > li:nth-of-type(1) a:before{
	background-image: url(../../../_images/scene/seijinshiki/rank-icon01.gif);
}
.rankingBox .rank-select .rank-list.top3 > li:nth-of-type(2) a:before{
	background-image: url(../../../_images/scene/seijinshiki/rank-icon02.gif);
}
.rankingBox .rank-select .rank-list.top3 > li:nth-of-type(3) a:before{
	background-image: url(../../../_images/scene/seijinshiki/rank-icon03.gif);
}

/*rank4～8*/
.rankingBox .rank-select .rank-list.under{
	width: 100%;
}
.rankingBox .rank-select .rank-list.under > li{
	flex: 1 1 auto;
}
.rankingBox .rank-select .rank-list.under > li a{
	padding: 10px 15px;
}
.rankingBox .rank-select .rank-list.under > li a p{
	display: block;
	margin: auto;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}

/*----------*/
.rankingBox .rank-category{
	margin: 50px 20px;
}

.rankingBox .rank-category .category-title{
	display: flex;
	align-items: center;
	min-height: 85px;
	background-image: url(../../../_images/scene/seijinshiki/h-bg.webp), linear-gradient(to bottom, #ecedee 0%, #d1dbf5 100%);
	background-repeat: no-repeat;
	background-position: center;
	background-blend-mode: soft-light, normal;
	color: #222;
	padding: 15px 30px 15px 100px;
	font-size: 25px;
	font-weight: 700;
	border-radius: 50px;
	overflow: hidden;
	position: relative;
}
.rankingBox .rank-category .category-title:before{
	content: "";
	display: block;
	width: 60px;
	height: 60px;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 50%;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
	transform: translateY(-50%);
	position: absolute;
	top: 50%;
	left: 15px;
	z-index: 1;
}
.rankingBox .rank-category .category-title:after{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background-color: #111;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
}

/*rank1*/
.rankingBox .rank-category#rank1 .category-title{
	background-image: url(../../../_images/scene/seijinshiki/h-bg.webp), linear-gradient(to bottom, #eeeded 0%, #f5d1d1 100%);
}
.rankingBox .rank-category#rank1 .category-title:before{
	background-image: url(../../../_images/scene/seijinshiki/rank-icon01.gif);
}
/*rank2～*/
.rankingBox .rank-category#rank2 .category-title:before{
	background-image: url(../../../_images/scene/seijinshiki/rank-icon02.gif);
}
.rankingBox .rank-category#rank3 .category-title:before{
	background-image: url(../../../_images/scene/seijinshiki/rank-icon03.gif);
}
.rankingBox .rank-category#rank4 .category-title:before{
	background-image: url(../../../_images/scene/seijinshiki/rank-icon04.gif);
}
.rankingBox .rank-category#rank5 .category-title:before{
	background-image: url(../../../_images/scene/seijinshiki/rank-icon05.gif);
}
.rankingBox .rank-category#rank6 .category-title:before{
	background-image: url(../../../_images/scene/seijinshiki/rank-icon06.gif);
}
.rankingBox .rank-category#rank7 .category-title:before{
	background-image: url(../../../_images/scene/seijinshiki/rank-icon07.gif);
}
.rankingBox .rank-category#rank8 .category-title:before{
	background-image: url(../../../_images/scene/seijinshiki/rank-icon08.gif);
}

.rankingBox .rank-category .category-title + p{
	margin: 20px auto 30px;
}

.rankingBox .rank-category .itemlist-box{
	width: 100%;
}

@media screen and (max-width: 736px) {
	.rankingBox .rank-select{
		width: 95%;
		margin: auto;
		padding: 30px 0;
	}

	/**/
	.rankingBox .rank-select .rank-list{
		gap: 15px;
		margin: 30px 0 20px;
		padding: 0 15px;
	}
	.rankingBox .rank-select .rank-list > li a:after{
		bottom: -22px;
	}
	.rankingBox .rank-select .rank-list > li a:hover:after{
		bottom: -30px;
	}

	/*top3*/
	.rankingBox .rank-select .rank-list.top3 > li{
		width: calc((100% - 30px) / 3);
		padding-bottom: 0;
	}
	.rankingBox .rank-select .rank-list.top3 > li a img{
		height: 140px;
	}
	.rankingBox .rank-select .rank-list.top3 > li a p{
		font-size: 16px;
	}

	/*rank4～8*/
	.rankingBox .rank-select .rank-list.under{
		gap: 30px 15px;
		flex-wrap: wrap;
	}
	.rankingBox .rank-select .rank-list.under > li{
		flex: 1 1 auto;
	}
	.rankingBox .rank-select .rank-list.under > li a{
		padding: 10px 10px;
	}

	/*----------*/
	.rankingBox .rank-category{
		margin: 50px 20px;
	}

	.rankingBox .rank-category .category-title{
		background-size: cover;
		min-height: 70px;
		padding: 15px 30px 15px 80px;
		font-size: 23px;
	}
	.rankingBox .rank-category .category-title:before{
		width: 50px;
		height: 50px;
		background-size: 80% auto;
		left: 10px;
	}
}

@media screen and (max-width: 480px) {
	/**/
	.rankingBox .rank-select .rank-list{
		flex-wrap: wrap;
		gap: 15px;
	}

	/*top3*/
	.rankingBox .rank-select .rank-list.top3 > li{
		width: calc((100% - 15px) / 2);
	}
	.rankingBox .rank-select .rank-list.top3 > li a img{
		height: 150px;
		object-position: top;
	}
	.rankingBox .rank-select .rank-list.top3 > li:nth-of-type(1){
		width: 100%;
	}

	/*rank4～8*/
	.rankingBox .rank-select .rank-list.under{
		gap: 30px 15px;
	}
	.rankingBox .rank-select .rank-list.under > li{
		flex: 0 0 auto;
		width: calc((100% - 15px) / 2);
	}
	.rankingBox .rank-select .rank-list.under > li a{
		padding: 10px 5px;
	}

	/*----------*/
	.rankingBox .rank-category{
		width: 92%;
		margin: 50px auto;
	}

	.rankingBox .rank-category .category-title{
		min-height: 60px;
		padding: 15px 30px 15px 70px;
		font-size: 22px;
	}
	.rankingBox .rank-category .category-title:before{
		width: 45px;
		height: 45px;
		left: 6px;
	}
}

/*-----------------------------------------------
	選び方
-----------------------------------------------*/
.selectBox .title-border:before{
	background-image: url(../../../_images/scene/seijinshiki/number02.gif);
}

.selectBox dl.select-reason{
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin: 20px auto;
}
.selectBox dl.select-reason dt{
	min-height: 30px;
	color: #303030;
	padding: 8px 10px 15px 120px;
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: 700;
	border-bottom: 1px solid #111;
	position: relative;
}
.selectBox dl.select-reason dt:before{
	content: "";
	display: block;
	width: 65px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center;
	padding: 5px 20px 5px 10px;
	border-right: 1px solid #111;
	position: absolute;
	left: 0;
	bottom: 10px;
}
.selectBox dl.select-reason div:nth-of-type(1) dt:before{
	background-image: url(../../../_images/scene/seijinshiki/point01.gif);
}
.selectBox dl.select-reason div:nth-of-type(2) dt:before{
	background-image: url(../../../_images/scene/seijinshiki/point02.gif);
}
.selectBox dl.select-reason div:nth-of-type(3) dt:before{
	background-image: url(../../../_images/scene/seijinshiki/point03.gif);
}
.selectBox dl.select-reason div:nth-of-type(4) dt:before{
	background-image: url(../../../_images/scene/seijinshiki/point04.gif);
}

.selectBox dl.select-reason dd{
	margin-left: 30px;
}
.selectBox dl.select-reason dd p{
	line-height: 2em;
}


@media screen and (max-width: 736px) {
	.selectBox dl.select-reason{
		gap: 30px;
		width: 95%;
	}
	.selectBox dl.select-reason dt{
		padding: 8px 10px 15px 110px;
		font-size: 18px;
	}
	.selectBox dl.select-reason dt:before{
		width: 65px;
		height: 20px;
	}

	.selectBox dl.select-reason dd{
		margin-left: 15px;
	}
}

@media screen and (max-width: 480px) {
	.selectBox dl.select-reason{
		gap: 30px 0;
	}
	.selectBox dl.select-reason dt{
		padding: 8px 10px 8px 100px;
		font-size: 18px;
	}
	.selectBox dl.select-reason dt:before{
		width: 50px;
		height: 20px;
		transform: translateY(-50%);
		top: 50%;
		bottom: auto;
	}

	.selectBox dl.select-reason dd{
		margin-left: 0;
	}
}


/*-----------------------------------------------
	スタッフ厳選
-----------------------------------------------*/
.pickupBox{
	background-color: #f8f8f8;
	padding: 40px 20px;
	border-radius: 20px;
}
.pickupBox .title-border{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
	padding: 15px 10px 10px;
	font-size: 28px;
	border-top: none;
}
.pickupBox .title-border span{
	display: flex;
	align-items: center;
	min-height: 35px;
	background-color: #c84343;
	color: #fff;
	padding: 5px 15px;
	border-radius: 5px;
}
.pickupBox .title-border:before{
	width: 80px;
	height: 20px;
	background-image: url(../../../_images/scene/seijinshiki/pickup.gif);
	border-radius: 0;
	box-shadow: none;
}

.pickupBox .lead-text{
	margin: 20px auto;
}

.pickupBox .itemlist-box{
	margin: 20px auto;
}

@media screen and (max-width: 736px) {
	.pickupBox{
		width: 95%;
		margin: auto;
		padding: 40px 20px 20px;
	}
	.pickupBox .title-border{
		gap: 15px;
		margin-bottom: 20px;
		font-size: 25px;
	}
	.pickupBox .title-border span{
		min-height: 30px;
		padding: 3px 12px;
	}
	.pickupBox .title-border:before{
		top: -10px;
	}

	.pickupBox .itemlist-box{
		width: 100%;
		margin: 20px auto;
	}
}

@media screen and (max-width: 480px) {
	.pickupBox{
		padding: 30px 10px 20px;
	}
	.pickupBox .title-border{
		gap: 15px;
		margin-bottom: 20px;
		font-size: 22px;
	}
	.pickupBox .title-border span{
		min-height: 30px;
		padding: 3px 12px;
	}
}


/*-----------------------------------------------
	熨斗
-----------------------------------------------*/
.noshiBox .title-border:before{
	background-image: url(../../../_images/scene/seijinshiki/number04.gif);
}

.noshi-design{
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 30px;
	margin: 40px 20px 0;
}
.noshi-design img{
	border-radius: 20px;
	border: 1px solid #ddd;
}
.noshi-design dt{
	color: #d94040;
	margin-bottom: 15px;
	padding: 5px 10px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3em;
	border-bottom: 1px solid #111;
}
.noshi-design dd p{
	line-height: 2em;
}


@media screen and (max-width: 736px) {
	.noshi-design{
		align-items: flex-start;
		gap: 20px;
	}
	.noshi-design img{
		flex-shrink: 0;
		width: 240px;
	}
	.noshi-design dt{
		font-size: 18px;
	}
}

@media screen and (max-width: 480px) {
	.noshi-design{
		flex-direction: column-reverse;
	}
	.noshi-design img{
		flex-shrink: 1;
		width: 100%;
	}
}


/*-----------------------------------------------
	おすすめ
-----------------------------------------------*/
.recommendBox .title-border:before{
	background-image: url(../../../_images/scene/seijinshiki/number05.gif);
}

/*-----------------------------------------------
	おすすめ
-----------------------------------------------*/
.omakaseBox .title-border:before{
	background-image: url(../../../_images/scene/seijinshiki/number06.gif);
}

/*-----------------------------------------------
	一覧へのリンク
-----------------------------------------------*/
.sceneBox .list-linkBtn a{
	color: #ff4a16;
	border: 1px solid #ff4a16;
}
.sceneBox .list-linkBtn a:hover{
	background: #ffe2bd;
}
.sceneBox .list-linkBtn.next a:before{
	border-left-color: 10px solid #ff4a16;
}


/*-----------------------------------------------
	groupリンク
-----------------------------------------------*/
.group-link .h-title:after{
	background: repeating-linear-gradient(135deg, #f0adad, #f0adad 3px, #db7171 3px, #db7171 5px);
}


