/*===============================================================
	下層ページstyle
=============================================================== */
/*------------------------------------------------------------
	パンくずリスト
-------------------------------------------------------------*/
.breadcrumb-area {
	position: relative;
	width: 100%;
}
	ul#breadcrumb {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		width: 100%;
		min-height: 40px;
		margin: 0;
		padding: 10px 15px;
		box-sizing: border-box;
		text-align: left;
		color: #808080;
		font-size: 1.0em;
	}
		ul#breadcrumb li i {
			display: inline;
			margin: 0 0.5em;
		}
@media screen and (min-width: 436px) {
	.breadcrumb-area {
		width: 1024px;
		margin: auto;
	}
		ul#breadcrumb {
			font-size: 0.8em;
			padding: 80px 0 10px 0;
		}
			ul#breadcrumb li i {
				margin: 0 0.5em;
			}
}

.mail-btn {
	display:block;
	width:90%;
	border:2pt solid #e75471;

	background:#e75471;
	padding:0.5em 1em;
	margin:1em auto;
	border-radius:0.3em;
	box-sizing: border-box;
	color:#fff;
	text-align:center;
	font-size:150%;
	line-height: 1.0;
}
.mail-btn:link,
.mail-btn:active,
.mail-btn:visited {
	text-decoration:none;
	color:#fff;
}

.mail-btn:hover {
	text-decoration:none;
	display:block;
	width:90%;
	border:2pt solid #e75471;
	background:#fff;
	padding:0.5em 1em;
	margin:1em auto;
	border-radius:0.3em;
	box-sizing: border-box;
	color:#e75471;
	text-align:center;
	font-size:150%;
}
/*------------------------------------------------------------
	Contents
-------------------------------------------------------------*/
.flex-start {
	display: block;
}
@media screen and (min-width: 436px) {
	.flex-start {
		display: flex;
		justify-content: space-between;
	}
}
/* flexのないコンテンツ */
.contents-lower {
	position: relative;
	width: 90%;
	min-height: 100%;
	padding: 0 0 50px 0;
	margin: 0 auto;
	box-sizing: border-box;
}
@media screen and (min-width: 436px) {
	.contents-lower {
		width: 100%;
	}
}
.single-area-left,
.single-area-right {
	width: 90%;
	margin: 0 auto;
}
@media screen and (min-width: 436px) {
	.single-area-left {
		width: 72%;
		margin: 0;
	}
	.single-area-right {
		width: 24%;
		margin: 0;
	}
}
/*=============================================================
	Lower Page
=============================================================*/
	ul.side-rank {
		margin: 0;
		padding: 0;
	}
	.side-hotselling,
	.side-featured {
		width: 100%;
		margin-bottom: 20px;
	}
	.side-hotselling .photo,
	.side-featured .photo {
		position: relative;
	}
	.side-featured .photo h3 {
		position: absolute;
		bottom: 0;
		z-index: 90;
		display: block;
		width: 100%;
		margin: 0;
		padding: 10px;
		box-sizing: border-box;
		font-size: 16px;
		color: #fff;
		font-weight: 400;
		background-color: rgba(104, 71, 54, 0.6);/*#684736;*/
	}
	/* .side-hotselling a.side-btn,
	.side-featured a.side-btn */
	a.side-btn {
		display: block;
		width: 100%;
		text-align: center;
		margin: 20px 0 0 0;
		padding: 10px 20px;
		font-size: 80%;
		color: #fff;
		border: 2px solid #5bc0d7;
		background: #5bc0d7;
	}
	/* .side-hotselling a:hover.side-btn,
	.side-featured a:hover.side-btn */
	.side-btn {
		color: #5bc0d7;
		border: 2px solid #5bc0d7;
		background: #fff;
	}
/*------------------------------------------------------------
	Parts//Sidebar
-------------------------------------------------------------*/
.side-hotselling img,
.side-featured img {
	width: 100%;
	height: auto;
}
.side-hotselling,
.side-featured {
	width: 100%;
	margin-bottom: 20px;
}
	.side-hotselling a.side-btn,
	.side-featured a.side-btn {
		display: block;
		width: 100%;
		text-align: center;
		margin: 20px 0 0 0;
		padding: 10px 20px;
		font-size: 80%;
		color: #fff;
		border: 2px solid #5bc0d7;
		background: #5bc0d7;
	}
	.side-hotselling a:hover.side-btn,
	.side-featured a:hover.side-btn {
		color: #5bc0d7;
		border: 2px solid #5bc0d7;
		background: #fff;
	}
.side-hotselling .img,
.side-featured .img {
	position: relative;
	width: 100%;
	margin:0 0 10px 0;
	padding: 0;
}
.side-featured .photo h3 {
	position: absolute;
	bottom: 0;
	z-index: 90;
	display: block;
	width: 100%;
	margin: 0;
	padding: 10px;
	box-sizing: border-box;
	font-size: 90%;
	line-height: 1.2;
	color: #fff;
	font-weight: 400;
	background-color: rgba(104, 71, 54, 0.6);
}
.side-hotselling .img {
	position: relative;
	z-index: -1;
}
.side-hotselling .img img,
.side-featured .img img {
	height: 300px;
	object-fit: cover;
	object-position: 50% 50%;
}
ul.side-rank {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: wpp-ranking;
}
	ul.side-rank li.ranking-box {
		margin: 0 0 15px 0;
		padding: 0;
	}
	ul.side-rank li.ranking-box:nth-of-type(-n+3) {
		position: relative;
	}
		ul.side-rank li.ranking-box:nth-of-type(-n+3)::before {
			position: absolute;
			top: 5px;
			left: 5px;
			border-radius: 50%;
			content: counter(wpp-ranking, decimal);
			counter-increment: wpp-ranking;
			font-size: 16px;
			font-weight: 500;
			padding: 8px 15px;
			color: #fff;
		}
			ul.side-rank li.ranking-box:first-child::before {
				background: #f9ae3b;
			}
			ul.side-rank li.ranking-box:nth-child(2)::before {
				background: #b1b1b1;
			}
			ul.side-rank li.ranking-box:nth-child(3)::before {
				background: #bf272d;
			}
		ul.side-rank li.ranking-box .rank-txt {
			position: absolute;
			bottom: 0;
			display: block;
			width: 100%;
			font-size: 90%;
			color: #fff;
			line-height: 1.0;
			margin: 0;
			padding: 10px 15px;
			background: rgba(104,71,54,0.6);
		}
	div.tagtax-area {
		margin: 0 0 10px 0;

		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
	}
		span.side-rank-tag {
			display: block;
			width: 100px;
			padding: 5px;
			box-sizing: border-box;
			height: 2em;
		}
		div.tax-box {
			display: block;
			width: 150px;

			display: flex;
			align-items: flex-start;
			flex-wrap: wrap;
		}
			span.side-rank-tax {
				display: inline-block;
				margin: 5px 5px 0 0;
				padding: 0 5px;
				color: #5bc0d7;
				border: 1px solid #5bc0d7;
			}
/*------------------------------------------------------------
	Parts//Pager　※functions.phpで出力
-------------------------------------------------------------*/
.nav-links {
	position: relative;
	text-align: center;
	margin: 0;
	padding: 0;
	height: 40px;

	display: flex;
	justify-content: flex-start;
}
	.nav-links a.page-numbers {
	  display: block;
	  margin: 0 2px;
	  padding: 0.5em;
	  line-height: 148%;
	  border: 1px solid #684736;
	  background: #fff;
	  min-width: 30px;
	  min-height: 40px;
	  text-align: center;
	  position: relative;
	}
		.nav-links span.page-numbers a {
			display: block;
			min-width: 30px;
			min-height: 40px;
			text-align: center;
			color: #684736;
			text-decoration: none;
		}
		.nav-links span.current {
			min-width: 30px;
			min-height: 40px;
			padding: 0.5em;
			line-height: 148%;
			text-align: center;
			color: #fff;
			background: #684736;
		}
	.nav-links .prev,
	.nav-links .next {
		display: block;
		min-width: 30px;
		min-height: 40px;
		text-align: center;
	}
/*------------------------------------------------------------
	Pager
-------------------------------------------------------------*/
.pagination,
.wp-pagenavi {
	width: 100%;
	height: 50px;
	padding: 0;
	margin: 0;
}
@media only screen and (max-width: 767px){
	.pager .pagination li{
		display: none;
	}
		.pager .pagination li.pre,
		.pager .pagination li.next{
			display: inline-block;
			width: 40%;
			height: 30px;
			text-align: center;
		}
			.pager .pagination li.pre a,
			.pager .pagination li.next a{
				width: 100%;
				text-align: center;
			}
}
/*------------------------------------------------------------
	Parts//Recommend Feature
-------------------------------------------------------------*/
.foot-recommend,
.foot-feature {
	margin: 1.5em 0 2.5em 0;
}
	.foot-recommend ul.grid-frame {
		display: grid;
		gap: 0;
		grid-template-rows: repeat(2, 310px);
		padding: 0;
		counter-reset: none;
	}
		.foot-recommend li.ranking-box:first-child {
			position: relative;
			grid-column: 1 / 3;
			grid-row: 1 / 1;
		}
		.foot-recommend li.ranking-box:nth-child(2) {
			position: relative;
			grid-column: 3 / 3;
			grid-row: 1 / 1;
		}
		.foot-recommend li.ranking-box:nth-child(3) {
			position: relative;
			grid-column: 1 / 1;
			grid-row: 2 / 3;
		}
		.foot-recommend li.ranking-box:nth-child(4) {
			position: relative;
			grid-column: 2 / 2;
			grid-row: 2 / 3;
		}
		.foot-recommend li.ranking-box:nth-child(5) {
			position: relative;
			grid-column: 3 / 3;
			grid-row: 2 / 3;
		}
		.foot-recommend li.ranking-box img {
				width: 100%;
				height: 310px;
				object-fit: cover;
		}
			.foot-recommend li.ranking-box .rank-txt {
				position: absolute;
				bottom: 0;
				width: 100%;
				padding: 10px;
				color: #fff;
				font-size: 90%;
				background: rgba(104,71,54,0.6);
			}
				.foot-recommend li.ranking-box .rank-txt span {
					display: block;
					max-height: 100%;
					margin-right: 0;
				}
@media screen and (min-width: 436px) {
	.foot-recommend li.ranking-box .rank-txt span {
		display: inline-block;
		max-height: 100%;
		margin-right: 5px;
	}
}
				.foot-recommend li.ranking-box .rank-txt p {
					display: block;
					margin-right: 0;
					margin-top: 0;
					margin-bottom: 0;
					line-height: 1.3;
				}
					.foot-recommend li.ranking-box .rank-txt p:after {
						content: '...';
					}

	/*ランキング順位非表示*/
			.foot-recommend li.ranking-box:first-child:before,
			.foot-recommend li.ranking-box:nth-child(2):before,
			.foot-recommend li.ranking-box:nth-child(3):before,
			.foot-recommend li.ranking-box:nth-child(4):before,
			.foot-recommend li.ranking-box:nth-child(5):before {
				position: absolute;
				top: 0;
				left: 0;
				border-radius: 0;
				content: '';
				counter-increment: none;
				color: #fff;
				font-size: 0;
				font-weight: 500;
				padding: 0;
				background: none;
			}
	.foot-ec-area .plan-cat-area span {
		display: inline-block;
		margin: 5px 5px 5px 0;
		padding: 5px 10px;
	}
	.foot-ec-area .ec-in-box h2,
	.foot-ec-area .ec-in-box p {
		font-size: 120%;
	}
	.foot-ec-area .ec-in-box h2 {
		margin: 0;
	}

	.foot-feature-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
	}
@media screen and (min-width: 436px) {
	.foot-feature-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
	.foot-feature .photo {
		position: relative;
		height: 182px;
		margin-bottom: 0;
	}
		.foot-feature .photo img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.foot-feature .photo h3 {
			position: absolute;
			bottom: 0;
			left: 0;
			display: block;
			width: 100%;
			font-size: 90%;
			line-height: 1.3;
			margin: 0;
			padding: 0.5em 0.8em;
			color: #fff;
			font-weight: 400;
			background: rgba(104,71,54,0.6);/*#684736;*/
		}