@charset "utf-8";
:root{
	--con-top-bottom-pc:50px;
	--con-top-bottom-sp:8vw;
	--btn-top-bottom-pc:10px 80px;
	--btn-top-bottom-sp:5px 40px;
	--base-color:#252525;
}
*{
	box-sizing:border-box;
	letter-spacing:0.05em;
	word-break:break-word;
}
html,
body{
	margin:0;
	padding:0;
	min-width:340px;
	color:var(--base-color);
}
body{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	overflow-x: hidden;
}
img{
	width:auto;
	max-width:100%;
	height:auto;
	max-height:100%;
}
img[src="/img/banner/nichibenren_alpha.png"]{
	height:40px;
}
.i-b{
	display:inline-block;
}
.word-keep{
	overflow-wrap: break-word;
	word-break: keep-all;
}
@media screen and (min-width:1211px){
	.is-side{
		padding-left:calc((100% - 1200px) / 2 + 10px);
		padding-right:calc((100% - 1200px) / 2 + 10px);
	}
	.is-side-out{
		margin-left:calc((100% - 1200px) / 2 + 10px);
		margin-right:calc((100% - 1200px) / 2 + 10px);
	}
}
@media screen and (max-width:1210px){
	.is-side{
		padding-left:10px;
		padding-right:10px;
	}
	.is-side-out{
		margin-left:10px;
		margin-right:10px;
	}
}
header {
	display:flex;
	flex-wrap:wrap;
	width: 100%;
}

.sp-favorite-wrap button{
	border:unset;
	outline:unset;
	padding:0;
	background-color:transparent;
}
@media screen and (min-width:1001px){
	.header-banner2 {
		display:none;
	}
}
@media screen and (max-width:1000px){
	header .header-banner {
		display:none;
	}
	.header-banner2 {
		text-align:center;
	}
}
@media screen and (min-width:641px){
	header {
		justify-content: space-between;
		flex-direction: row;
		align-items: flex-end;
		margin-bottom: 0px;
		padding-bottom: 10px;
	}
	header .header-banner {
		position:absolute;
		top:5px;
		right:5px;
		width:250px;
	}
	.sp-favorite-wrap{
		display:none;
	}
	.header-right {
		display:flex;
		flex-direction:column;
		justify-content:right;
		align-items:flex-end;
	}
}
@media screen and (min-width:961px){
	header {
		gap: 5px;
		margin-top: 10px;
	}	
}
@media screen and (min-width:641px) and (max-width:960px){
	header {
		justify-content:space-between;
	}	
}
@media screen and (max-width:640px){
	header {
		align-items:flex-start;
		justify-content:left;
		flex-direction:column;
	}	
	.header-banner2 {
		margin-top: 10px;
	}
	.sp-favorite-wrap{
		position:absolute;
		top:30px;
		right:10px;
		padding: 5px;
		border-radius: 5px;
		background-color: rgba(255,255,255,0);
		box-shadow: 0px 0px 4px rgba(0,0,0,.0);
		transition:.3s;
		z-index: 1;
	}
	.sp-favorite-wrap.is-fixed{
		position:fixed;
		top:10px;
		background-color: rgba(255,255,255,1);
		box-shadow: 0px 0px 4px rgba(0,0,0,.7);
	}
	.sp-favorite-wrap button{
		display:flex;
		flex-direction:column;
		align-items:center;
	}
	.sp-favorite-wrap span{
		margin-top:3px;
		font-size:12px;
	}
}
h1{
	width:100%;
	font-size: 12px;
	font-weight:normal;
	margin: 2px 0;
	display: inline-block;
}
h1 > span{
	display:inline-block;
	text-align: left;
}
header .logo{
	font-size:12px;
	font-weight:normal;
	width: 450px;
	margin-top: 10px;
	/* margin-bottom:10px; */
}
nav {
	display:flex;
	font-weight:bold;
	/* margin-bottom: 14px; */
	white-space:nowrap
}
nav a{
	color:#3b3b3b;
	text-decoration:none;
	transition:.3s;
}
nav a:hover{
	color:#c0c0c0;
}
@media screen and (min-width:1001px){
	.header-right {
		width: calc(100% - 480px);
	}
	nav {
		gap: 0 40px;
	}
}
@media screen and (max-width:1000px){
	nav {
		gap: 0 0;
		justify-content:space-between;
		width:100%;
	}
}
@media screen and (min-width:641px) and (max-width:1000px){
	header .logo{
		width:37vw;
	}
	.header-right {
		width: calc(100% - (37vw + 20px));
	}
}
@media screen and (min-width:641px){
	.logo span {
		display:inline-block;
		margin-bottom:12px;
	}
	h1{
		text-align:right;
	}
}
@media screen and (max-width:640px){
	header img {
		width: min(70vw, 320px);
	}
	header .logo{
		width: 100%;
		margin-top: 10px;
		text-align: center;
	}
	.header-right {
		width: 100%;
	}
	h1{
		text-align:center;
	}
	nav {
		font-size: min(3.6vw,18px);
		margin-top: 10px;
	}
}


/* bread clam list */
#bread-clam-list {
	background-color:#f6f6f6;

	font-size:13px;
	padding-top:7px;
	padding-bottom:7px;
}
.bcl-menu {
	color:#454545;
	text-decoration:none;
	transition:0.3s;
	position:relative;
}
.bcl-menu.active {
	pointer-events:none;
}
.bcl-menu:not(.active) {
	margin-right:15px;
}
.bcl-menu:not(.active):after {
	position:absolute;
	display:block;
	content:'';
	width:6px;
	height:6px;
	border-top:1px solid #454545;
	border-right:1px solid #454545;
	transform:rotate(45deg);
	margin:auto;
	top:-1px;
	bottom:0;
	right:-12px;
}
.bcl-menu:hover {
	color:#949494;
}
.bcl-menu:last-child {
	pointer-events:none;
}

/* footer */
footer{
	background-color:#FFF;
}
footer a{
	color:#3b3b3b;
	text-decoration:none;
}
.footer-banner-wrap{
	display:flex;
	align-items:center;
}
.footer-banner-wrap a{
	display:flex;
	align-items:center;
}
@media screen and (min-width:641px){
	.footer-banner-wrap {
		padding-top:var(--con-top-bottom-pc);
		padding-bottom:var(--con-top-bottom-pc);
	}
	.footer-banner-wrap{
		justify-content:center;
		gap:20px;
	}
}
@media screen and (max-width:640px){
	.footer-banner-wrap {
		padding-top:var(--con-top-bottom-sp);
		padding-bottom:var(--con-top-bottom-sp);
		justify-content:space-between;
		flex-wrap:wrap;
	}
	.footer-banner-wrap a{
		width:calc(100% / 2 - 10px);
		margin-bottom:20px;
	}
}
@media screen and (max-width:480px){
	.footer-banner-wrap{
		justify-content:center;
	}
	.footer-banner-wrap a{
		width:auto;
		margin-bottom:10px;
	}
}



footer .logo {
	display:flex;

	flex-direction:column;
	text-align:center;
}	
@media screen and (min-width:641px){
	footer .logo {
		padding-left: calc((100% - 300px) / 2);
		padding-right: calc((100% - 300px) / 2);
		font-size:14px;
	}	
}
@media screen and (max-width:640px){
	footer .logo {
		font-size:12px;
		padding-left:calc((100% - 260px) / 2);
		padding-right:calc((100% - 260px) / 2);
	}	
}
@media screen and (max-width:480px){
	footer .logo {
		font-size:12px;
		padding-left: calc((100% - 260px) / 2);
		padding-right: calc((100% - 260px) / 2);
	}	
}


#footer-search-capital{
	margin-top:30px;
	margin-bottom:30px;
}
#footer-search-capital h2{
	font-size: 16px;
	font-weight:normal;
	text-shadow:0px 0px .5px rgba(0,0,0,1);
	margin-bottom: 15px;
}
#footer-search-capital .search-capital-wrap{
	display:flex;
	flex-wrap:wrap;
}
#footer-search-capital .search-capital{
	display: flex;
	margin-bottom: 20px;
}
#footer-search-capital h3{
	font-size:16px;
	margin: 0;
	line-height:1;
	font-weight:normal;
	text-shadow:0px 0px .5px rgba(0,0,0,1);
}
#footer-search-capital .capital{
	display:flex;
	flex-direction:row;
	gap: 10px 20px;
	align-items:center;
	flex-wrap: wrap;
}
#footer-search-capital .capital a{
	position:relative;
	line-height:1;
	font-size:15px;
	display:block;
}
#footer-search-capital .capital a:after{
	position:absolute;
	display:block;
	content:'';
	height:15px;
	width:1px;
	background-color:#000;
	margin:auto;
	top:0;
	bottom:0;
	right:-10px;
}
#footer-search-capital .capital a:last-child:after{
	content:unset;
}
@media screen and (min-width:641px){
	#footer-search-capital .search-capital-wrap{
		gap: 0 20px;
	}
	#footer-search-capital .search-capital{
		width: calc(50% - 20px);
	}
	#footer-search-capital h3{
		width: 120px;
	}
	#footer-search-capital .capital{
		width: calc(100% - 120px);
	}
	#footer-search-capital .search-capital:nth-child(1){
		order:1;
	}
	#footer-search-capital .search-capital:nth-child(2){
		order: 3;
	}
	#footer-search-capital .search-capital:nth-child(3){
		order: 5;
	}
	#footer-search-capital .search-capital:nth-child(4){
		order: 2;
	}
	#footer-search-capital .search-capital:nth-child(5){
		order: 4;
	}
	#footer-search-capital .search-capital:nth-child(6){
		order:6;
	}
}
@media screen and (max-width:640px){
	#footer-search-capital{
		border:1px solid #dfe1db;
		border-radius:6px;
		margin-top:50px;
	}
	#footer-search-capital h2{
		margin:0;
		padding: 20px;

		position:relative;
	}
	#footer-search-capital.open h2{
		border-bottom:1px solid #dfe1db;
	}
	#footer-search-capital h2:before,
	#footer-search-capital h2:after{
		position:absolute;
		display:block;
		content:'';
		width:13px;
		height:1px;
		border-top:1px solid #313131;
		margin:auto;
		top:0;
		bottom:0;
		transition:.3s;
	}
	#footer-search-capital h2:before{
		right:20px;
	}

	#footer-search-capital h2:after{
		right:20px;
	}
	#footer-search-capital.open h2:before{
		transform:rotate(-180deg);
	}
	#footer-search-capital.open h2:after{
		transform:rotate(90deg);
	}
	#footer-search-capital .search-capital-wrap{
		gap: 0 0px;
		padding: 20px;
		transition:.3s;
		display:none;
	}
	#footer-search-capital .search-capital{
		width: 100%;
		flex-wrap:wrap;
	}
	#footer-search-capital .search-capital:last-child{
		margin-bottom:0;
	}
	#footer-search-capital h3{
		width: 100%;
		margin-bottom:10px;
	}
	#footer-search-capital .capital{
		width: 100%;
	}
}


#footer-search-favor{
	margin-top:30px;
	margin-bottom:30px;
}
#footer-search-favor h2{
	font-size: 16px;
	font-weight:normal;
	text-shadow:0px 0px .5px rgba(0,0,0,1);
}
#search-favor-wrap a {
	display:inline-block;
}
#search-favor-wrap a:first-child{
	margin-left:0;
}
#search-favor-wrap a:last-child{
	margin-right:0;
}
@media screen and (min-width:641px){
	#search-favor-wrap a {
		margin-left:10px;
		margin-right:10px;
		position:relative;
	}
	#search-favor-wrap a:after {
		position:absolute;
		display:block;
		content:'';
		width:1px;
		height:14px;
		background-color:#454545;
		right:-12px;
		margin:auto;
		top:0;
		bottom:0;
	}
	#search-favor-wrap a:last-child:after {
		content:unset;
	}
}
@media screen and (max-width:640px){
	#footer-search-favor h2{
		margin-bottom:5px;
	}
	#search-favor-wrap a{
		padding:3px 15px;
		border:1px solid #454545;
		border-radius:100px;
		margin-bottom:5px;
		font-size:14px;
	}
}

#footer-search-category{
	margin-top:30px;
	margin-bottom:30px;
}
#footer-search-category h2{
	font-size: 16px;
	font-weight:normal;
	text-shadow:0px 0px .5px rgba(0,0,0,1);
}
#search-categry-wrap a {
	display:inline-block;
}
#search-categry-wrap a:first-child{
	margin-left:0;
}
#search-categry-wrap a:last-child{
	margin-right:0;
}
@media screen and (min-width:641px){
	#search-categry-wrap a {
		margin-left:10px;
		margin-right:10px;
		position:relative;
	}
	#search-categry-wrap a:after {
		position:absolute;
		display:block;
		content:'';
		width:1px;
		height:14px;
		background-color:#454545;
		right:-12px;
		margin:auto;
		top:0;
		bottom:0;
	}
	#search-categry-wrap a:last-child:after {
		content:unset;
	}
}
@media screen and (max-width:640px){
	#footer-search-category h2{
		margin-bottom:5px;
	}
	#search-categry-wrap a{
		padding:3px 15px;
		border:1px solid #454545;
		border-radius:100px;
		margin-bottom:5px;
		font-size:14px;
	}
}

#footer-search-recruit{
	margin-top:30px;
	margin-bottom:30px;
}
#footer-search-recruit h2{
	font-size: 16px;
	font-weight:normal;
	text-shadow:0px 0px .5px rgba(0,0,0,1);
}
#search-recruit-wrap a {
	display:inline-block;
}
#search-recruit-wrap a:first-child{
	margin-left:0;
}
#search-recruit-wrap a:last-child{
	margin-right:0;
}
@media screen and (min-width:641px){
	#search-recruit-wrap a {
		margin-left:10px;
		margin-right:10px;
		position:relative;
	}
	#search-recruit-wrap a:after {
		position:absolute;
		display:block;
		content:'';
		width:1px;
		height:14px;
		background-color:#454545;
		right:-12px;
		margin:auto;
		top:0;
		bottom:0;
	}
	#search-recruit-wrap a:last-child:after {
		content:unset;
	}
}
@media screen and (max-width:640px){
	#footer-search-recruit h2{
		margin-bottom:5px;
	}
	#search-recruit-wrap a{
		padding:3px 15px;
		border:1px solid #454545;
		border-radius:100px;
		margin-bottom:5px;
		font-size:14px;
	}
}

#footer-nav {
	background-color:#f6f6f6;
	text-align:center;
	padding-top:50px;
	padding-bottom:20px;
}

footer .footer-nav-main {
	display:flex;
	justify-content:center;
	gap:0px 30px;
	margin-bottom:30px;
}
footer .footer-nav-main a{
	position:relative;
	display:flex;
}
footer .footer-nav-main a:after{
	position:absolute;
	display:block;
	content:'';
	width:1px;
	height:14px;
	background-color:#000;
	margin:auto;
	top:0;
	bottom:0;
	right:-15px;
}
footer .footer-nav-main a:last-child:after{
	content:unset;
}
@media screen and (max-width:640px){
	footer .footer-nav-main {
		flex-wrap:wrap;
		width:320px;

		margin-left:auto;
		margin-right:auto;
	}
}
@media screen and (max-width:460px){
	footer .footer-nav-main a{
		text-align:center;
	}
	footer .footer-nav-main a:nth-child(3):after{
		content:unset;
	}
}
@media screen and (max-width:360px){
	footer .footer-nav-main {
		width:300px;
	}
	footer .footer-nav-main a{
		font-size:14px;
	}
}

footer .footer-nav-other{
	display:flex;
	gap:0px 30px;
	justify-content:center;
	margin-bottom:10px;
}
footer .footer-nav-other a{
	position:relative;
}
footer .footer-nav-other a:after{
	position:absolute;
	display:block;
	content:'';
	width:1px;
	height:14px;
	background-color:#000;
	margin:auto;
	top:0;
	bottom:0;
	right:-15px;
}
footer .footer-nav-other a:last-child:after{
	content:unset;
}
@media screen and (max-width:360px){
	footer .footer-nav-other a{
		font-size:14px;
	}
	footer .copyright{
		font-size:14px;
	}
}


/* お気に入りリスト */
#favo-list {
	position:fixed;
	right:5px;
	bottom: 100px;
	z-index: 2;
	pointer-events: none;
	z-index: 6;
}
#favo-list .tab-wrap{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	background-color:#fcfbe1;
	border-top:3px solid #ed6a74;
	border-bottom:3px solid #ed6a74;
	border-left:3px solid #ed6a74;
	border-radius:20px 0 0 20px;
	color:#ed6a74;
	z-index: 2;
	box-sizing: border-box;
	cursor: pointer;
	pointer-events: initial;
	margin-right: -1px;
}
#favo-list .icon{
	width:40px;
	height:40px;
	border:2px solid #ed6a74;
	border-radius:100px;
	background-color:#FFF;
	background-image:url(/img/shop/common/heart02.webp);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:50% auto;
}
#favo-list .count{
	font-weight:bold;
	font-size: 12px;
	margin-bottom:10px;
}
#favo-list .favo-shop-wrap{
	transition:.3s;
	padding:20px;
	overflow-y: auto;
	box-sizing: border-box;
	z-index: 1;
}
#favo-list .favo-shop{
	border:1px solid #000;
	margin-bottom:15px;
	background-color:#FFF;
	border-radius:10px 10px 0 0;
	display:flex;
}
#favo-list .favo-shop.active a.btn-detail,
#favo-list .favo-shop:hover a.btn-detail{
	background-color:#c43841;
}
#favo-list .favo-shop.active h4 a{
	pointer-events:none;
	color: #888;
}
#favo-list .favo-shop.active a.btn-detail{
	pointer-events:none;
}
#favo-list .favo-shop h4{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin:0;
	font-family: 'Noto Serif JP';
}
#favo-list .favo-mark{
	text-align:right;
}
#favo-list .favo-btn-heart{
	background-color:transparent;
	border-width:0px;
	outline:unset;
	width: 25px;
	height: 25px;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
	pointer-events: initial;
	cursor: pointer;
}
#favo-list .favo-btn-heart[data-favo="0"]{
	background-image:url(/img/common/heart01.webp);
}
#favo-list .favo-btn-heart[data-favo="1"]{
	background-image:url(/img/common/heart02.webp);
}
@media screen and (min-width:641px){
	.sp-title,
	.sp-btn-close{
		display:none;
	}
	#favo-list .tab-wrap{
		padding:20px 10px;
		width: 80px;
	}
	#favo-list .favo-list-wrap{
		display: flex;
		justify-content:center;
	}
	#favo-list .icon{
		margin-bottom:10px;
	}
	#favo-list .favo-list-wrap{
		align-items: center;
	}
	#favo-list .favo-shop-wrap{
		max-height: calc(100vh - 120px);
		margin-right: -405px;
		width: 400px;
		border-radius: 20px 0 0 20px;
		background-color:#fbfce1;
		border-top: 3px solid #ed6a74;
		border-bottom: 3px solid #ed6a74;
		border-left: 3px solid #ed6a74;
		min-height: 400px;
		margin-left:-3px;
	}
	#favo-list .favo-shop{
		padding:10px 0 0 0;
		gap:10px;
		flex-wrap:wrap;
	}
	#favo-list .favo-shop.active,
	#favo-list .favo-shop:hover{
		border: 1px solid #c43841;
	}
	#favo-list .favo-shop .data{
		width:calc(75% - 20px);
		margin-right:10px;
	}
	#favo-list .count.sp{
		display:none;
	}
	#favo-list .label{
		writing-mode: vertical-rl;
	}
	#favo-list .arrow {
		position:relative;
		width:15px;
		height:15px;
	}
	#favo-list .arrow:before {
		position:absolute;
		display:block;
		content:'';
		width:100%;
		height:100%;
		border-top:2px solid #ed6a74;
		border-left:2px solid #ed6a74;
		transform:rotate(-45deg);
		transition:0.5s;
	}
	#favo-list-opne:checked ~ #favo-list label .arrow:before {
		transform:rotate(135deg);
	}
	#favo-list .no-data{
		align-content: center;
		height: 350px;
	}
}

@media screen and (max-width:640px){
	#favo-list .sp-title{
		width:100%;
		font-size:16px;
		text-align:center;
		color:#464545;
	}
	#favo-list {
		width: 100%;
		height:100%;
		top:0;
		right: -100%;
		transition: 0.3s;
		z-index: 5;
	}
	#favo-list-opne:checked ~ #favo-list {
		right: 0;
		z-index:15;
	}
	#favo-list .tab-wrap{
		padding:10px 10px;
		width: 70px;
		position: fixed;
		right: 0;
		bottom:100px;
		z-index: 1;
		transition:0.3s;
		opacity:1;
	}
	#favo-list-opne:checked ~ #favo-list .tab-wrap{
		opacity:0;
	}
	#favo-list .favo-list-wrap{
		align-items: flex-start;
		height: 100dvh;
		background: #FFF;
		position: relative;
	}
	#favo-list .favo-shop-wrap{
		display:flex;
		flex-wrap:wrap;
		justify-content:left;
		align-items: stretch;
		gap:10px;
		width: 100%;
		border-radius: 0;
		background: #FFF;
		max-height: calc(100vh - 80px);
	}
	#favo-list .favo-shop{
		width:calc(100% / 3 - 7px);
		padding:10px;
		gap:5px;
		flex-direction:column;
	}
	#favo-list .favo-shop.active,
	#favo-list .favo-shop:hover{
		border: 2px solid #c43841;
	}
	#favo-list .favo-shop .data{
		width:100%;
	}
	#favo-list .favo-shop .category{
		color:#888;
		font-size:14px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		height: 18px;
	}
	#favo-list .favo-shop a.btn-detail{
		display:none;
	}
	#favo-list .count.pc{
		display:none;
	}
	#favo-list .count.sp{
		background-color:#ed6b74;
		color:#FFF;
		padding: 0px 10px;
		border-radius:100px;
		position:absolute;
		top: -19px;
	}
	#favo-list .label{
		display:none;
	}
	#favo-list .arrow {
		display:none;
	}
	#favo-list .sp-btn-close{
		width:100%;
		height:50px;
		position:absolute;
		left:0;
		bottom:10px;
		z-index:1;
		border-top: 1px solid #AAA;
		padding-top: 60px;
		background: #FFF;
	}
	#favo-list .sp-btn-close:before,
	#favo-list .sp-btn-close:after{
		position:absolute;
		display:block;
		content:'';
		margin:auto;
	}
	#favo-list .sp-btn-close:before{
		width:45px;
		height:45px;
		border:2px solid #AAA;
		left:0;
		right:0;
		bottom:0px;
		border-radius:100px;
	}
	#favo-list .sp-btn-close > span:before,
	#favo-list .sp-btn-close > span:after{
		position:absolute;
		display:block;
		content:'';
		margin:auto;
		width:35px;
		height:2px;
		background-color:#AAA;
		top:0;
		right:0;
		bottom:-10px;
		left:0;
	}
	#favo-list .sp-btn-close > span:before{
		transform:rotate(45deg);
	}
	#favo-list .sp-btn-close > span:after{
		transform:rotate(-45deg);
	}
}
@media screen and (max-width:520px){
	#favo-list .favo-shop{
		width:calc(100% / 2 - 7px);
	}
}
#favo-list-opne{
	display:none;
}
#favo-list-opne:checked + #favo-list .favo-shop-wrap{
	margin-right:0;
	pointer-events: initial;
}
#favo-list .body-overray{
	display:none;
}
#favo-list-opne:checked ~ .body-overray{
	position:fixed;
	display:block;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index: 5;
	background-color: rgba(0,0,0,.2);
}
#favo-list img{
	width:100%;
}
#favo-list .favo-shop h4 a{
	margin:0 0 5px 0;
	text-decoration:none;
	color: #a33522;
}
#favo-list .favo-shop a.btn-detail{
	padding:5px;
	background-color:#000;
	width:100%;
	color:#FFF;
	text-align:center;
	text-decoration:none;
	transition:0.3s;
	transition: 0.3s;
}
#favo-list .favo-shop a.btn-detail:hover{
	background-color:#454545;
}
#favo-list .favo-shop.current{
	border-color:#da5e66;
}
#favo-list .favo-shop.current a.btn-detail	{
	background-color:#da5e66;
	pointer-events:none;
}

/**
 * review star
 */
#review .evaluation{
	display:flex;
	flex-direction:row;
	gap:10px;
}
#review .star-num1,
#review .star-num2,
#review .star-num3,
#review .star-num4,
#review .star-num5{
	color:#cdccca;
	margin-bottom:20px;
}
#review .star-num1 > span:nth-child(-n+1){
	color:#f3ad10;
}
#review .star-num2 > span:nth-child(-n+2){
	color:#f3ad10;
}
#review .star-num3 > span:nth-child(-n+3){
	color:#f3ad10;
}
#review .star-num4 > span:nth-child(-n+4){
	color:#f3ad10;
}
#review .star-num5 > span:nth-child(-n+5){

	color:#f3ad10;
}
/**
 * review btn
 */
#review .search-btn {
	text-align:center;
	margin-top: 20px;
}
#review .search-btn a{
	display:inline-block;
	background-color:#292829;
	color:#FFF;
	border-radius:50px;
	text-decoration:none;
	transition:.3s;
}
#review .search-btn a:hover{
	background-color:#696969;
}
#review .search-btn span{
	position:relative;

}
#review .search-btn span:before{
	position:absolute;
	display:block;
	content:'';
	width:7px;
	height:7px;
	border-top:2px solid #FFF;
	border-right:2px solid #FFF;
	margin:auto;
	top:-3px;
	bottom:0;
	left:-15px;
	transform:rotate(135deg);
}
@media screen and (min-width:641px){
	#review .search-btn a {
		padding: var(--btn-top-bottom-pc);
	}
	#favo-list .favo-shop picture{
		width:calc(25% - 10px);
		margin-left:10px;
	}
}
@media screen and (max-width:640px){
	#review .search-btn a {
		padding: var(--btn-top-bottom-sp);
	}
	#favo-list .favo-shop picture{
		width:100%;
		margin:0;
		flex-grow: 1;
	}
}

#return-page-top{
	position:fixed;
	width:50px;
	height:50px;
	bottom:30px;
	right: 15px;
	z-index:2;
	opacity:0;
	pointer-events:none;
	transition:0.3s;
}
#return-page-top.active{
	opacity:1;
	pointer-events:initial;
}
.btn-page-top{
	position:relative;
	cursor:pointer;
	display:block;
	width:100%;
	height:100%;
	text-indent:-9999px;
	border-width:0;
	background-color:#3b3233;
	border-radius:50px;
}
.btn-page-top:before{
	position:absolute;
	display:block;
	content:'';
	width:13px;
	height:13px;
	border-top:4px solid #FFF;
	border-right:4px solid #FFF;
	transform:rotate(-45deg);
	margin:auto;
	top:7px;
	right:0;
	bottom:0;
	left:0;
}



#footer-search-area{
	margin-top:30px;
	margin-bottom:30px;
}
#footer-search-area h2{
	text-align:center;
	font-size:16px;
	margin-bottom:15px;
}
.search-area-wrap {
	display:flex;
	justify-content: center;
}
.search-area-wrap a{
	background-color:#ffffff;
	border:1px solid #3a6d17;
	border-radius:7px;
	color:#3a6d17;
	display: inline-block;
	text-align: center;
	transition:0.3s;
	text-decoration:none;
}
.search-area-wrap a.active,
.search-area-wrap a:hover{
	background-color:#3a6d17;
	color:#FFF;
}
.search-area-wrap a.active{
	pointer-events:none;
}
@media screen and (min-width:981px){
	.search-area-wrap {
		gap:20px;
	}
	.search-area-wrap a{
		padding:10px 20px;
		width: 150px;
	}
}
@media screen and (min-width:641px) and (max-width:980px){
	.search-area-wrap {
		gap:1vw;
	}
	.search-area-wrap a{
		padding:10px 2vw;
		width: 15vw;
		font-size:1.6vw;
	}
}
@media screen and (max-width:640px){
	.search-area-wrap {
		gap:1vw;
		flex-wrap:wrap;
	}
	.search-area-wrap a{
		padding:10px 2vw;
		width: calc(100% / 3 - 1vw);
		font-size:max(14px, 2.6vw);
	}
}

/* list page */
.list-body #main-visual{
	background-color:#f6f6f6;
	padding-left: calc((100% - 900px) / 2);
	padding-right: calc((100% - 900px) / 2);
	padding-top:30px;
	padding-bottom:40px;
	margin: unset;
}
.list-body #main-visual h2{
	text-align:center;
	background-image:url(/img/common/list_title_bg.webp);
	background-size:auto auto;
	background-repeat:no-repeat;
	background-position:center bottom;
	height:70px;
	font-size:36px;
}
#top #column-list {
	padding-top: var(--con-top-bottom-pc);
	padding-bottom: var(--con-top-bottom-pc);
}
#column-list {
	display:flex;
	flex-wrap:wrap;
	gap:30px;
	background-color:#f6f6f6;
	padding-top:20px;
	padding-bottom:80px;
	background: repeating-linear-gradient(#f6f6f6, #f6f6f6 3px, #dae3e6 3px, #dae3e6 6px);
}
#top #column-list {
	gap:0;
}
#column-list h2{
	width:100%;
}
#column-list .time-stamp {
	width:100%;
	text-align:center;
}
#top #column-list .list-wrap{
	width:100%;
}
#column-list .list-wrap{
	width:calc(100% * 2 / 3);
	display:flex;
	flex-wrap:wrap;
	gap:30px;
	margin-bottom: 40px;
}
@media screen and (min-width:1001px){
	#top #column-list .column{
		width:calc(100% / 3 - 20px);
	}
}
@media screen and (min-width:641px) and (max-width:1000px){
	#top #column-list .column{
		width:calc(100% / 2 - 20px);
	}
}
@media screen and (max-width:640px){
	#top #column-list .column{
		width: calc(100% / 1 - 0px);
	}
}
#column-list .column{
	width: calc(100% / 2 - 15px);
	background-color:#FFF;
	border-radius:10px;
	overflow:hidden;
	display:flex;
	flex-direction:column;
}
#column-list .column a{
	text-decoration:none;
	color:#000;
	display:flex;
	flex-direction:column;
}
#column-list .column a.ancTit{
	flex-grow:1;
}
#column-list .column .thumbnail{
	height:200px;
	background-size:100% auto;
	background-position:center center;
	transition:0.3s;
}
#column-list .column .column-tit{
	padding:10px 10px 0 10px;
	font-weight:normal;
	font-size:18px;
	margin:0;
	transition:0.3s;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
#column-list .column .category{
	margin:0 10px 10px;
	font-size:12px;
}
#column-list .column .category p{
	background-color:#e5f6f1;
	color:#4d6555;
	padding:5px;
	margin:0;
	display:inline-block;
	transition:0.3s;
}
#column-list .column .published{
	margin:0 10px 10px;
	font-size:12px;
}
#column-list .column .intro{
	margin:0 10px 10px;
	font-size:16px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
#column-list .column .readMore{
	margin:0 10px 10px 10px;
	padding-right:15px;
	text-align:right;
	font-size:16px;
	position:relative;
	z-index:1;
	transition:0.3s;
}
#column-list .column .readMore:after,
#column-list .column .readMore:before{
	position:absolute;
	display:block;
	content:'';
	width:10px;
	height:10px;
	border-top:1px solid #000;
	border-right:1px solid #000;
	margin:auto;
	top:0;
	bottom:0;
	transform:rotate(45deg);
	transition:0.3s;
}
#column-list .column .readMore:after{
	right:0;
}
#column-list .column .readMore:before{
	right:5px;
}
#column-list .column .tags{
	display:flex;
	gap:10px;
	margin:0 10px 20px 10px;
	overflow-x:scroll;
	white-space: nowrap;
	scrollbar-color:#c7d0f2 #f2f5fc;
	padding-bottom:3px;
	scrollbar-width: thin;
}
#column-list .column .tags a{
	background-color:#EFEFEF;
	font-size:13px;
	padding:2px 5px;
	transition:0.3s;
}
#column-list .column a:hover .thumbnail{
	background-size:120% auto;
}
#column-list .column a:hover .column-tit{
	color:#454545;
}
#column-list .column a:hover .category p{
	background-color:#75c6ae;
	color:#ffffff;
}
#column-list .column a:hover .readMore{
	color:#999;
}
#column-list .column a:hover .readMore:after,
#column-list .column a:hover .readMore:before{
	border-top-color:#999;
	border-right-color:#999;
}
#column-list .column .tags a:hover{
	background-color:#888888;
	color:#FFF;
	font-size:13px;
	padding:2px 5px;
}
#column-list .taxonomy-wrap{
	width:calc(100% * 1 / 3 - 30px);
	display:flex;
	flex-direction:column;
	gap:40px;
}
#column-list .category-wrap,
#column-list .tag-wrap{
	background-color:#FFF;
	padding:20px;
}






/**
 * paging
 */
.paging {
	display:flex;
	flex-direction:row;
	gap:20px;
	justify-content:center;
	align-items:center;
	padding:10px;
	background-color:#f6f6f6;
}
@media screen and (min-width:641px){
	.paging .is-sp{
		display:none;
	}
	.paging .number-flex{
		display:flex;
		flex-direction:row;
		gap:20px;
		justify-content:center;
		align-items:center;
	}
}
@media screen and (max-width:640px){
	.paging .is-pc{
		display:none;
	}
	.paging select{
		display:block;
		width:100%;
		height: 44px;
		border-color:#dbdbdb;
		padding:10px;
		outline:none;
		-webkit-appearance: none;
		appearance: none; /* デフォルトの矢印を非表示 */
		background:#FFFFFF;
		border-width:1px;
		border-style:solid;
		text-align:center;
		font-size: 20px;
	}
	#pageSelect{
		position:relative;
		width:150px;
		height:40px;
		padding:0;
		cursor:pointer;
	}
	#pageSelect::before {
		border-bottom: 4.5px solid #363636;
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		content: "";
		position: absolute;
		right: 9px;
		top: 10px;
		width: 0;
		pointer-events:none;
		cursor:pointer;
	}
	#pageSelect::after {
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-top: 4.5px solid #363636;
		content: "";
		position: absolute;
		right: 9px;
		top: 21px;
		width: 0;
		pointer-events:none;
		cursor:pointer;
	}
}
.paging .arrow{
	background-color:#4e5759;
	width:40px;
	height:40px;
	border-radius:40px;
	position:relative;
	transition:0.3s;
}
.paging .arrow.events-none{
	background-color:#dce4e7;
	pointer-events:none;
}
.paging .arrow:hover{
	background-color:#b34127;
}
.paging .arrow:before,
.paging .arrow:after{
	position:absolute;
	display:block;
	width:11px;
	height:11px;
	content:'';
	margin:auto;
	top:0;
	bottom:0;
	border-top:4px solid #FFF;
}
.paging .arrow.left:before,
.paging .arrow.left:after{
	border-left:4px solid #FFF;
	transform:rotate(-45deg);
	left:15px;
}
.paging .arrow.left.end:before{
	left:10px;
}
.paging .arrow.left.end:after{
	left:19px;
}
.paging .arrow.right:before,
.paging .arrow.right:after{
	border-right:4px solid #FFF;
	transform:rotate(45deg);
	right:15px;
}
.paging .arrow.right.end:before{
	right:10px;
}
.paging .arrow.right.end:after{
	right:19px;
}
.paging .number{
	text-decoration:none;
	color:#000;
	transition:0.3s;
	background-color:#FFF;
	width:40px;
	height:40px;
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius:4px;
	border:1px solid #FFF;
}
.paging .number:hover{
	color:#b34127;
	border:1px solid #b34127;
	background-color:#f1e8df;
}
.paging .number.now-page{
	pointer-events:none;
	color:#4d7361;
	border:1px solid #4d7361;
	background-color:#e6f1ec;
}