@charset "utf-8";
/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
/* 81-LYX */
/* clearfix */	
.clearfix:after {content: "";display: block;clear: both;}
/* flex */	
.flex,.flexA,.flexB,.flexC {display: flex;flex-wrap: wrap;}
.flexA {justify-content: space-around;}
.flexB {justify-content: space-between;}
.flexC {justify-content: center;}
.serif {
	font-family: "Noto Serif JP", serif;
}
/*------------------------------------------------------------
	content
------------------------------------------------------------*/
.content {
	position: relative;
	z-index: 2;
	margin: 0 auto;
	max-width: 100rem;
}
@media all and (max-width: 980px) {
	.content {
		margin: 0 1.5rem;
		max-width: 100%;
	}
}
/*------------------------------------------------------------
	headLine01
------------------------------------------------------------*/
.headLine01 {
	margin-bottom: 5.1rem;
	text-align: center;
	font-weight: 700;
	font-size: 3rem;
	color: #1D3F80;
}
.headLine01 span {
	padding: 0 0.7rem 0.2rem;
	margin-right: 2rem;
	width: fit-content;
	display: inline-block;
	background-color: #1D3F80;
	color: #fff;
	text-align: center;
	font-weight: 400;
	font-size: 1.8rem;
	vertical-align: 0.3rem;
}
@media all and (max-width: 980px) {
	.headLine01 {
		margin-bottom: 3.2rem;
		font-size: 2.1rem;
		letter-spacing: 0.05em;
	}
	.headLine01 span {
		padding: 1px 0.7rem 0.2rem;
		margin: 0 auto 1rem;
		display: block;
		font-size: 1.3rem;
		vertical-align: 0;
		letter-spacing: 0;
	}
}
/*------------------------------------------------------------
	comTitle
------------------------------------------------------------*/
.comTitle {
	margin-bottom: 3.7rem;
	padding: 1.5rem 1rem;
	text-align: center;
	font-size: 2rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	color: #A67C52;
	background: url(../img/common/com_bg.png) no-repeat center center / 100% 100%;
}
.comTitle.style02 {
	padding: 1.2rem 1rem;
	color: #1D3F80;
	font-size: 2.4rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	background-image: url(../img/common/com_bg02.png);
}
.comTitle.style02 span {
	display: block;
	width: 50rem;
	line-height: 1.3;
	margin: 0 auto 1rem;
	font-weight: 400;
	font-size: 1.5rem;
	border-bottom: 1px solid rgba(211, 168, 117, 0.4);
}
@media all and (max-width: 980px) {
	.comTitle {
		margin: 0 -1.5rem 2rem;
		padding: 1rem 1rem 1.2rem;
		font-size: 1.7rem;
		background: rgba(211, 168, 117, 0.2);
		border-top: 1px solid #D3A875;
		border-bottom: 1px solid #D3A875;
	}
	.comTitle.style02 {
		padding: 1.2rem 1rem;
		font-size: 1.9rem;
		background: rgba(255, 255, 255, 0.6);
	}
	.comTitle.style02 span {
		width: 29rem;
		margin-bottom: 1.8rem;
	}
}
/*------------------------------------------------------------
	comNotes
------------------------------------------------------------*/
.comNotes {
	padding-left: 1em;
	text-indent: -1em;
	font-size: 1.2rem;
	color: #808080;
}
.comNotes.comNotes01 {
	text-align: center;
	padding-left: 0;
	text-indent: 0;
}
@media all and (max-width: 980px) {
}
/*------------------------------------------------------------
	comShopUl
------------------------------------------------------------*/
.comShopUl {
	margin-top: 0.2rem;
	gap: 1rem 4rem;
	align-items: flex-start;
}
.comShopUl li {
	padding-left: 1rem;
	width: 30.1rem;
	box-sizing: content-box;
}
.comShopUl .price {
	text-align: center;
	font-weight: 700;
	font-size: 2.3rem;
}
.comShopUl .image {
	margin-bottom: 1.5rem;
}
.comShopUl .image a {
	display: block;
}
.comShopUl .image img {
	width: 100%;
}
.comShopUl .price {
	margin: 0 0.3rem 1.3rem 0;
}
.comShopUl .price .tag {
	margin-right: 1.3rem;
	padding: 0.5rem 0;
	display: inline-block;
	width: 10.5rem;
	text-align: center;
	color: #fff;
	font-size: 1.6rem;
	background-color: #000;
	border-radius: 0.3rem;
}
.comShopUl .price .sml {
	margin-left: 0.5rem;
	display: inline-block;
	font-size: 1.2rem;
}
.comShopUl .else .price .tag {
	background-color: #A38FC9;
}
.comShopUl .image a:hover {
	opacity: 0.7;
}
@media all and (max-width: 980px) {
	.comShopUl {
		margin-top: 2.2rem;
		display: block;
	}
	.comShopUl li {
		margin: 0 auto;
		padding-left: 0;
		width: auto;
	}
	.comShopUl li:not(:last-child) {
		margin-bottom: 4.8rem;
	}
	.comShopUl .image {
		width: 24rem;
		margin: 0 auto 2rem;
	}
	.comShopUl .price {
		margin-right: 0;
	}
	.comShopUl .else .image {
		margin-bottom: 1.5rem;
	}
}
/*------------------------------------------------------------
	comBtn
------------------------------------------------------------*/
.comBtn {
	margin: 0 auto;
	width: 25rem;
}
.comBtn a {
	padding: 0 5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-weight: 500;
	font-size: 1.36rem;
	min-height: 6rem;
	background: #F0F0F0 url(../img/common/icon02.png) no-repeat right 1.2rem center / 2.3rem;
	border: 1px solid #000;
	color: #000;
	border-radius: 3rem;
	letter-spacing: 0.1em;
	box-shadow: 0.3rem 0.3rem 0 0 rgba(204, 204, 204, 0.3);
}
.comBtn.color a {
	background-color: #F7F2F8;
	border-color: rgba(110, 29, 127, 0.6);
	background-image: url(../img/common/icon03.png);
}
@media all and (min-width: 981px) {
	.comBtn a:hover {
		box-shadow: none;
		transform: translateY(3px);
	}
}
@media all and (max-width: 980px) {
}
/*------------------------------------------------------------
	fadeUp
------------------------------------------------------------*/
.fadeUp {
	opacity: 0;
	transform: translateY(40px);
	transition: .5s;
}
.fadeUp.on {
	opacity: 1;
	transform: translateY(0);
}
.animation .fadeIn {
	opacity: 0;
	transform: translateY(40px);
	transition: .5s;
}
.animation.on .fadeIn {
	opacity: 1;
	transform: translateY(0);
}
.animation.on .delay02 {
	transition-delay: 0.4s;
}
.animation.on .delay03 {
	transition-delay: 0.8s;
}
@media all and (min-width: 981px) {
	.animation.on .delay01 {
		transition-delay: 0.4s;
	}
	.animation .fadeInUp {
		opacity: 0;
		transform: translateY(40px);
		transition: .5s;
	} 
	.animation.on .fadeInUp {
		opacity: 1;
		transform: translateY(0);
	}
}
@media all and (max-width: 980px) {
	.fade-sp {
		opacity: 0;
		transform: translateY(40px);
		transition: .5s;
	}
	.fade-sp.on {
		opacity: 1;
		transform: translateY(0);
	}
}