@charset "UTF-8";
/* CSS Document */
/*img {
	width: 100%;
max-width: none;
}*/
body:before {
opacity: 0;
}


#topics-top {
    display: flex;
    border-bottom: 0px solid #000;
}



#contents-wrap {
	font-family: 'YakuHanMP','Noto Serif JP', serif;
}
#pointWrap00 {
	padding: 1.0% 0;
	background-color: #000;
}
#pointWrap00 .pointBox {
	position: relative;
	z-index: 1;
	align-items: center;
	.p01 {
		width: 35.6%;
	}
	.kakeru {
		width: 4%;
	}
	.p02 {
		width: 55%;
	}
}
#pointWrap01 {
	padding: 1.5% 0;
	position: relative;
background: #F8F0A3;
background: linear-gradient(129deg, rgba(248, 240, 163, 1) 0%, rgba(224, 117, 83, 1) 30%);
/*	&::after {
		content: "";
		position: absolute;
		width: 20vw;
		height: 20vw;
		background: #F8F0A3;
background: radial-gradient(circle, rgba(248, 240, 163, 1) 0%, rgba(224, 117, 83, 1) 70%);
		left: -10vw;
		top: -10vw;
	}*/
}
#pointWrap01 .pointBox {
	position: relative;
	z-index: 1;
	align-items: center;
	.p01 {
		width: 28.7%;
	}
	.p02 {
		width: 24.8%;
	}
	.p03 {
		width: 36.7%;
	}
	.lineTate {
		width: 1px;
		align-self:stretch;
		background-color: #fff;
	}
}
#pointWrap02 {
	background-color: #000;
	padding: 1.2% 0;
}
#pointWrap02 .pointBox {
	width: 90%;
	max-width: 1400px;
}
#priceWrap {
	background-color: #c6bf8a;
	padding: 1% 0;
}
#priceWrap .priceBox {
		position: relative;
}
#priceWrap .priceBox .btMore {
		position: absolute;
	display: block;
	    width: 14%;
    right: 31%;
    top: 12%;
	transition: 0.3s;
}
#priceWrap .priceBox .btMore:hover {
	opacity: 0.6;
}


@media screen and (max-width: 959px) {

	
}
@media screen and (max-width: 599px) {

	#pointWrap02 h3 {
		letter-spacing: 0em;
		font-size: 5vw;
		font-size: clamp(13px, 5vw, 22px);
	}
	#pointWrap00 {
		padding: 3% 0;
	}
	#pointWrap00 .pointBox {
		width: 90%;
		max-width: 400px;
		.p01 {
			width: 100%;
			padding: 0 15%;
		}
		.kakeru {
			width: 100%;
			padding: 0 47%;
		}
		.p02 {
			width: 100%;
		}
	}
	#pointWrap01 {
		padding: 3% 0;
	}
	#pointWrap01 .pointBox {
		width: 90%;
		max-width: 400px;
		.p01 {
			width: 100%;
			padding: 0 20%;
		}
		.p02 {
			width: 100%;
			padding: 0 20%;
		}
		.p03 {
			width: 100%;
			padding: 0 20%;
		}
		.lineTate {
			width: 100%;
			height: 1px;
			margin: 3% 0;
		}
	}

	#priceWrap {
	padding: 3% 0;
}
	#priceWrap .priceBox {
		width: 80%;
		max-width: 400px;
	}
	#priceWrap .priceBox .btMore {
		position: absolute;
	display: block;
	width: 33%;
  right: 2%;
  top: 37%;
	transition: 0.3s;
}

}

/*======　奥付け　======*/

.seller li:nth-child(1) {
	width: 30%;
}
.seller li:nth-child(2) {
	width: 35%;
}
.seller li:nth-child(3) {
	width: 25%;
}

@media screen and (max-width: 959px) {
  .seller {
    display: block;
    max-width: 380px;
    border-bottom: none;
  }
  .seller.type1 {
    border-bottom: 0px solid #ccc;
    padding-bottom: 2em;
    margin-bottom: 0em;
  }
  .seller li {
    margin: 20px auto;
  }
  .seller li:nth-child(1) {
    width: 70%;
  }
  .seller li:nth-child(2) {
    width: 100%;
  }
  .seller li:nth-child(3) {
    width: 80%;
  }
  .seller h3 {
    font-size: 13px;
    text-align: center;
    margin-bottom: 0.5em;
  }
}
/*======　コンテンツ紹介　======*/
#cntMenu {
	font-family: 'YakuHanMP','Noto Serif JP', serif;
	
}
#cntMenu .cntWrap {
	background-color: #000;
	background-image: url("../../images/top/bg-cntBox.jpg");
	background-position: center center;
	background-size: cover;
	padding: 4% 0%;
	position: relative;
	.cover {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.6);
		display: flex;
justify-content: center;
align-items: center;
		p {
			content: "coming soon";
		text-align: center;
		color: #fff;
			/*background-color: #fff;
			color: #000;*/
			display: inline-block;
			padding: 0 1em 0.3em;
			line-height: 1;
			font-size: 3.0cqw;
			font-size: clamp(30px, 7cqw, 50px);
		}
	}
}
#cntMenu .cntWrap:nth-child(2n) {

}
#cntMenu .cntBox {
	
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	transition: 0.6s;
	
}
#cntMenu .cntBox:hover {
}
#cntMenu .cntBox .img01 {
	width: 54%;
	position: relative;
opacity: 0;
	transform: translateX(20%);
	transition: 0.5s ease-out 0.5s;
	overflow: hidden;
	&::after {
		content: attr(data-cap);
	}
}
#cntMenu .cntBox.active .img01 {
	transform: translateX(0%);
	opacity: 1;
}
#cntMenu .cntBox .img01 .imgBox {
	position: absolute;
	width: 60%;
	right: 80%;
	bottom: 5%;
	opacity: 0;
	transform: translateX(20%);
	transition: 0.5s ease-out 0.8s;
}
#cntMenu .cntBox.active .img01 .imgBox {
	transform: translateX(0%);
	opacity: 1;
}
#cntMenu .cntBox .img01 img {
	transition: 0.6s;
}
#cntMenu .cntBox:hover .img01 img {
	transform: scale(1.1);
}
#cntMenu .cntBox .txtBox {
	position: absolute;
	color: #fff;
	/*background-color: rgba(0,0,0,0.1);*/
	width: 35%;
	right: 60%;
	display: flex;
justify-content: center;
align-items: center;
	flex-wrap: wrap;
	container-type: inline-size;
	/*overflow: hidden;*/
}
#cntMenu .cntBox .txtBox h4 {
	font-weight: 300;
	letter-spacing: 0.1em;
	width: 100%;
	text-align: center;
	font-size: 7cqw;
	font-size: clamp(20px, 9cqw, 46px);
	position: relative;
	line-height: 1;
	opacity: 0;
	transform: translateX(-30%);
	transition: 0.5s ease-out 0.3s;
}
#cntMenu .cntBox.active .txtBox h4 {
	transform: translateX(0%);
	opacity: 1;
}
#cntMenu .cntBox .txtBox h4::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0.05em;
	width: 100%;
	height: 1px;
	background-color: #fff;
}
#cntMenu .cntBox .txtBox .pBox {
	padding: 1.5em 0 3em;
	width: 100%;
	opacity: 0;
	transform: translateX(-20%);
	transition: 0.5s ease-out 0.7s;
}
#cntMenu .cntBox.active .txtBox .pBox {
	transform: translateX(0%);
	opacity: 1;
}
#cntMenu .cntBox .txtBox p {
	text-align: center;
	font-size: 5.6cqw;
	letter-spacing: 0.1em;
	
}
#cntMenu .cntBox .txtBox .aBox {
	width: 100%;
	padding-top: 20px;
	position: relative;
	opacity: 0;
	transform: translateX(-20%);
	transition: 0.5s ease-out 0.9s;

}
#cntMenu .cntBox.active .txtBox .aBox {
	transform: translateX(0%);
	opacity: 1;
}
#cntMenu .cntBox .txtBox .aBox a {
	text-align: center;
	font-size: 4.8cqw;
	letter-spacing: 0em;
	width: 100%;
	height: 3em;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #000;
	background: var(--bt-grade);
	/*background: #F8F0A3;
background: linear-gradient(90deg, rgba(248, 240, 163, 1) 0%, rgba(224, 117, 83, 1) 70%);*/
	position: relative;
transition: 0.3s;
	position: relative;
}
#cntMenu .cntBox .txtBox .aBox::after {
	content: "▼";
	font-size: 80%;
	line-height: 2;
	position: absolute;
	right: 5%;
	top:50%;
	transform: rotateZ(-90deg);
color: #000;
}
/*#cntMenu .cntBox .txtBox .aBox .caption {
	font-size: 2.6cqw;
	position: absolute;
	left: 0;
	width: 100%;
	top: 103%;
}

#cntMenu .cntBox .txtBox .aBox a {
	text-align: center;
	font-size: 5.6cqw;
	letter-spacing: 0.1em;
	color: #992024;

}*/



#cntMenu .cntBox .txtBox .aBox a:hover {
	text-decoration: none;
	background-color: #DE0003;
	box-shadow: 0px 0px 20px #DE0003;
	
}
#cntMenu .cntL {
	flex-direction: row-reverse;
}
#cntMenu .cntL:hover {
	
}
#cntMenu .cntL .img01 .imgBox {
	right:auto;
	left: 80%;
}
#cntMenu .cntL .txtBox {
	right: auto;
	left: 60%;
}
/*#cntMenu .cntL .txtBox .aBox::after {
	transform: scaleX(-0.9);
}
#cntMenu .cntL:hover .txtBox .aBox::after {
	transform: scaleX(-1) ;
}*/

@media screen and (max-width: 599px) {
	#cntMenu .cntBox {
		display: block;
		padding: 30px 5%;
	}
	#cntMenu .cntBox .img01 {
		width: 90%;
		margin: 0 auto;
	}
	#cntMenu .cntBox .img01 .imgBox {
		position: static;
		width: 60%;
		margin: -15px auto 15px auto;
		
	}
	#cntMenu .cntBox .txtBox {
		position: static;
		width: 100%;
		padding-top: 15px;
	}
	#cntMenu .cntBox .txtBox h4 {
		font-size: 7cqw;
	}
	#cntMenu .cntBox .txtBox p {
		font-size: 4.4cqw;
		font-size: clamp(15px, 4.5cqw, 18px);

	}
	#cntMenu .cntBox .txtBox .pBox {
    padding: 1em 0;
	}
	#cntMenu .cntBox .txtBox .aBox {
    padding-top: 0px;
		width: 90%;
	}
	#cntMenu .cntBox .txtBox .aBox a {
    font-size: 4.4cqw;
    letter-spacing: 0em;
	}
	#cntMenu .cntWrap .cover p {
		background-color: #fff;
		color: #000;
		padding: 0.7em 1.4em;
	}
	/*#cntMenu .cntL .txtBox .aBox::after {
		transform: scaleX(0.9);
	}*/
}



#topics-area .h2-type1 h2, #topics-area .h2-type2 h2,
#aj-area .h2-type1 h2, #aj-area .h2-type2 h2,
#insta-area .h2-type1 h2, #insta-area .h2-type2 h2{
    color: var(--brown);
}
#topics-area a.link-btn,
#aj-area a.link-btn {
background: var(--brown-grade);
}