/* common */
:root {
	--colorMariage: #E18551;
	--colorWash: #59C4C2;
}
.mainContents {
	font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
	overflow-x: hidden;
}


/* index */
body.index {}

.pcNone {
  display: block;
}

.contentsWrap {
  background: #FFF4DD;
}
.contentsWrap::before {
	box-shadow: 0 8px 3px -3px #ccc inset;
	height: 10px;
	width: 100%;
	position: absolute;
	z-index: 3;
}
.mainContents {
  position: relative;
	margin-top: 0;
}
.titlePairLab {
	position: relative;
	text-align: center;
	z-index: 2;
}
.titlePairLab img {
	display: block;
	margin: 0 auto;
	width: 52%;
}
.washWrap,
.mariageWrap {
  position: relative;
  padding: 24px;
  text-align: center;
	padding-bottom: 100px;
}
.mariageWrap {
	background: var(--colorMariage);
	z-index: 0;
}
.washWrap {
	background: var(--colorWash);
	z-index: 1;
}
.washWrap:before,
.washWrap:after,
.mariageWrap:before,
.mariageWrap:after {
  position: absolute;
  content: '';
}
.washWrap:before,
.mariageWrap:before {
  top: -40px;
  left: calc(50% - 70px);
  width: 140px;
  height: 140px;
  border-radius: 50%;
	z-index: -1;
}
.mariageWrap:before {
  background: var(--colorMariage);
}
.washWrap:before {
  background: var(--colorWash);
}

.titleImgA {
	position: relative;
	text-align: center;
	margin-block: 100px 30px;
}

.titleImgB {
	position: relative;
}
.titleImgB img {
	width: 241px;
}
.titleImgC {
	position: relative;
}
.titleImgC img {
	width: 214px;
}
.bgWhiteArea {
	background: #fff;
	border-radius: 20px;
	max-width: 950px;
	padding-inline: 24px;
	padding-block: 28px;
	margin: 30px auto;
}

.pairWrap {
	margin: 0 auto 60.39px;
  padding-inline: 12.5px;
}
.pairWrap .titleImgA {
	margin-block: 50px 30px;
}
.pairWrap img {
	width: 300px;
	display: block;
	margin: 0 auto;
}

.readText {
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.875;
  margin-bottom: 20px;
}

.readTextA {
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.875;
  margin-bottom: 20px;
}

.readTextB {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.714;
	text-align: left;
}
.washWrap .readTextB.mt30 {
	margin-top: 20px;
}

.readTextC {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
}
.readTextD {
	font-weight: 400;
	font-size: 12px;
	line-height: 2;
}

.mt12 {
	margin-top: 12px;
}
.mtC {
	margin-top: 4px;
}
.mt15sp {
	margin-top: 15px;
}
.readTextBold {
  font-weight: 700;
}
.mt25sp {
	margin-top: 25px;
}
.dot {
  border-bottom: 2px dotted #392822;
}

.bgLineMariage {
	display: inline-block;
	font-weight: 700;
	background: linear-gradient(#E18551, #E18551) no-repeat;
	background-size: 100% 6px;
	background-position: calc(50%) calc(100% - 4px);
}

.bgLineWash {
	display: inline-block;
	font-weight: 700;
	background: linear-gradient(#59C4C2, #59C4C2) no-repeat;
	background-size: 100% 6px;
	background-position: calc(50%) calc(100% - 4px);
  border-radius: 2px;
}

.pairWrap picture img {
  display: block;
  margin: 0 auto;
}

.bgWhiteContentA {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.bgWhiteContentB {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-top: 25px;
}

.pairListWarp {
	margin: 40px auto;
	padding-inline: 12.5px;
}
.pairListtitle img {
	display: block;
	margin: 0 auto;
	width: 211px;
}
.pairListItems {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 30px;
	padding-inline: 15px;
	justify-content: left;
}
.pairListItems li {
	width: calc((100% - (10px * 2)) / 2);
	position: relative;
	overflow: hidden;
}
.pairListItems li figure {
	border: 2px solid #392822;
	border-radius: 10px;
	overflow: hidden;
}
.pairListItems a {
	color: #392822;
}
.tagWrap {
	margin-top: 10px;
	max-width: 84px;
}

.pairListImg {
	margin-top: 10px;
}

.dotted {
	position: relative;
	margin: 25px auto;
  height: 6px;
  width: 181px;
}
.dotted::after {
	position: absolute;
	content: "";
	display: block;
	background-image: radial-gradient(circle, #E18551 1.5px, transparent 1.5px);
	background-position: left bottom;
	background-repeat: repeat-x;
	background-size: 11.5px 3px;
	height: 6px;
	width: 181px;
	bottom: 0;
	left: 0;
	right: 0;
}
.dotted_B {
	position: relative;
	margin: 25px auto;
  height: 6px;
  width: 181px;
}
.dotted_B::after {
	position: absolute;
	content: "";
	display: block;
	background-image: radial-gradient(circle, #59C4C2 1.5px, transparent 1.5px);
	background-position: left bottom;
	background-repeat: repeat-x;
	background-size: 11.5px 3px;
	height: 6px;
	width: 181px;
	bottom: 0;
	left: 0;
	right: 0;
}
.swiperContainer {
	position: relative;
}
#swiper2 {
	width: 65%;
	position: absolute;
	bottom: -50px;
	left: 30vw;
}
.swiperWrap {
	width: 100%;
	top: -30px;
	/* margin: -30px auto; */
	/* padding-inline: 37px; */
}
.swiper-slide .swiperItems {
  width: 100%;
	height: auto;
	object-fit: cover;
}
#swiper1 .swiper-slide::before {
	position: relative;
}
#swiper1 .swiper-slide.swiper-slide-prev:not(.first_over_prev)::before,
#swiper1 .swiper-slide.swiper-slide-next:not(.first_over_next)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	animation: glowIn 1.5s ease-in forwards;
}
@keyframes glowIn {
	0% {
		opacity: 0;
		background: none;
	}
	30% {
		opacity: 0;
		background: none;
	}
	50% {
		background: linear-gradient(rgba(255, 255, 255, .1),  rgba(255, 255, 255, .1));
	}
	60% {
		background: linear-gradient(rgba(255, 255, 255, .2),  rgba(255, 255, 255, .2));
	}
	70% {
		background: linear-gradient(rgba(255, 255, 255, .3),  rgba(255, 255, 255, .3));
	}
	80% {
		background: linear-gradient(rgba(255, 255, 255, .4),  rgba(255, 255, 255, .4));
	}
	90% {
		background: linear-gradient(rgba(255, 255, 255, .5),  rgba(255, 255, 255, .5));
	}
	100% {
		opacity: 1;
		background: linear-gradient(rgba(255, 255, 255, .6),  rgba(255, 255, 255, .6));
	}
}
#swiper1 .swiper-slide:not(.swiper-slide-active)::before,
#swiper1 .swiper-slide.first_over_prev::before,
#swiper1 .swiper-slide.first_over_next::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	z-index: 1000;
	background: linear-gradient(rgba(255, 255, 255, .6),  rgba(255, 255, 255, .6));
}
#swiper1 .swiper-slide {
	padding-bottom: 0;
	margin-bottom: 50px;
}
#swiper1 .swiper-slide a img {
	border: 3px solid #392822;
	border-radius: 10px;
}
#swiper1 .swiper-pagination-bullet {
	background: #D9D9D9;
	width: 15px;
	height: 15px;
	margin: 0 2% 0 0 !important;
	opacity: 1;
}
#swiper1 .swiper-pagination-bullet-active {
	background: #E18551;
}
#swiper1 .swiper-pagination {
	display: none!important;
}

#swiper2 .swiper-slide {
	opacity: 0;
}
#swiper2 .swiper-slide.first_disp {
	opacity: 1;
	z-index: 1000;
}
#swiper2 .swiper-slide:not(.swiper-slide-active) {
  animation: fadeOut 0.2s ease-in forwards;
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#swiper2 .swiper-slide.swiper-slide-active:not(.first_disp) {
  animation: fadeIn 2.5s ease-in forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}

.pairlab #swiperRecommend {
	overflow: unset;
}
.pairlab #swiperRecommend .swiper-slide {
	height: auto!important;
}

.pairlab #swiperRecommend .swiper-slide .recommendWrap {
	height: 100%!important;
	display: flex;
	align-items: center;
	padding: 2px 14px;
	background: #FFF;
	width: 100%;
	max-width: 500px;
	border-radius: 5px;
	margin: 20px auto 0;
	gap: 12px;
	text-decoration: none;
}
.pairlab #swiperRecommend .swiper-slide .recommendWrap .recommendDetail {
	display: flex;
	gap: 20px;
	justify-content: space-around;
}
.pairlab #swiperRecommend .swiper-slide .recommendWrap .recommendDetail .recommendImg {
	min-width: 120px;
	width: 34%;
	display: flex;
	align-items: center;
}
.pairlab #swiperRecommend .swiper-slide .recommendWrap .recommendDetail .recommendImg img {
	width: 100%;
}
.pairlab #swiperRecommend .swiper-pagination-bullet {
	background: #D9D9D9;
	width: 12px;
	height: 12px;
	margin: 0 10px !important;
	opacity: 1;
}
.pairlab #swiperRecommend .swiper-pagination-bullet-active {
	background: #E18551;
	width: 12px;
	height: 12px;
	margin: 0 10px !important;
}
.pairlab #swiperRecommend .swiper-pagination {
  bottom: -55px;
}


.recommendList {
	background: #795454;
	padding: 20px 12.5px 70px;
}
.recommendTitle img {
	display: block;
	margin-inline: auto;
	width: 160px;
}
.recommendTexts a {
	text-decoration: none;
}
.recommendTexts {
	width: fit-content;
}
.recommendTextTitle {
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: #392822;
}
.recommendText {
	font-size: 12px;
	font-weight: 400;
	line-height: 20px;
	color: #392822;
}
/* pair1 */
.pickupItem {
	margin: 0 auto;
	padding: 0 12.5px;
}
.articleContainer {
	width: 100%;
}
.articleIntroWrap {
	background: #fff;
	padding-inline: 15px;
	padding-block: 20px;
	border-radius: 10px;
}
.dishName {
	font-weight: 500;
	font-size: 20px;
	line-height: 1.25;
	letter-spacing: 0.4px;
	text-align: center;
}
.introTitle {
	position: relative;
	min-width: 264px;
	background: #FFFFFF;
	border: 2px solid #392822;
	background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
  background-size: 16px 16px;
  background-repeat: repeat;
  background-position: center center;
	display: flex;
	flex-direction: column;
	padding: 12px;
	gap: 12px;
	margin-top: -26%;
	margin-left: 22%;
}
.times {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 auto;
}
.times::before,
.times::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background: #392822;
  transform-origin: center;
}
.times::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.times::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.introBorderA {
	display: inline-block;
	font-weight: 700;
	background: linear-gradient(#FAAA7CB2, #FAAA7CB2) no-repeat;
	background-size: 100% 13px;
	background-position: calc(50%) calc(100% - 4px);
}
.introBorderB {
	display: inline-block;
	font-weight: 700;
	background: linear-gradient(#B1DAFFB2, #B1DAFFB2) no-repeat;
	background-size: 100% 13px;
	background-position: calc(50%) calc(100% - 4px);
}
.introText {
	margin-top: 8px;
}
.introText p {
	font-weight: 400;
	font-size: 12px;
	line-height: 2;
}
.introText p.annotation {
	font-weight: 400;
	font-size: 10px;
	line-height: 24px;
}
.introTags {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	flex-wrap: wrap;
}
.introTags li {
	color: #D14B4B;
	font-weight: 500;
	font-size: 12px;
	line-height: 1.33;
}
.introTagIcon {
	display: flex;
	flex-direction: row;
	gap: 4px;
	margin-top: 16px;
	justify-content: flex-end;
}
.introTagIcon img {
	width: 92px;
}
.commentBlock {
	display: flex;
	flex-direction: column;
	margin-top: 30px;
	padding-inline: 12px;
	padding-bottom: 20px;
	gap: 16px;
	align-items: center;
}
.commentIcon {
	width: 31%;
}
.commentText {
	background: #FFFFFF;
	border: 1px solid #392822;
	box-shadow: 3px 3px 0px #392822;
	border-radius: 10px;
	padding: 16px 14px;
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
  background-size: 16px 16px;
  background-repeat: repeat;
  background-position: center center;
}
.commentText p {
	font-weight: 400;
	font-size: 12px;
	line-height: 24px;
	text-align: left;
}
.pickupItemWrap {
	margin-top: 100px;
}
.pickupItemTitle {
	position: relative;
	text-align: center;
}
.pickupItemTitle::after {
	position: absolute;
	content: "";
	left: 50%;
	bottom: -30px;
	transform: translateX(-50%);
	width: 103px;
	height: 6px;
	background: #E18551;
	border-radius: 1px;
}
.pickupItemTitleW {
	position: relative;
	text-align: center;
}
.pickupItemTitleW::after {
	position: absolute;
	content: "";
	left: 50%;
	bottom: -30px;
	transform: translateX(-50%);
	width: 103px;
	height: 6px;
	background: #59C4C2;
	border-radius: 1px;
}

.pickupItemItems {
	margin-top: 56px;
	padding-inline: 0;
}
.pickupItemLists {
	margin-top: 0;
}
.pickupItemLists li {
	width: calc((100% - (10px * 2)) / 2);
}
.pickupItemText {
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	margin-top: 10px;
}
.pickupItemLists li figure {
	border: 2px solid #392822;
	border-radius: 10px;
	overflow: hidden;
}
.similarItemTitle img {
	width: 182px;
}
.mariageBtn img {
	width: 271px;
}
.mariageBtn a:hover {
	opacity: 0.8;
}
.washBtn img {
	width: 271px;
}
.washBtn a:hover {
	opacity: 0.8;
}
.backBtn {
	width: fit-content;
	margin-block: 100px;
	margin-inline: auto;
}
.backBtn img {
	width: 260px;
}

/* mariage */
body.mariage {}
.sectionMariageIntro {
	margin-inline: 0 auto;
	margin-top: 28px;
	padding: 0 12.5px;
}
.sectionMariageIntro h2 img {
	display: block;
	margin: 0 auto;
	width: 261px;
}
.formulaBgWhiteArea {
	border: 3px solid #E18551;
}
.formulaIntro {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 60px;
	background: #FFFCF7;
	border: 3px solid #E18551;
	border-radius: 20px;
	padding: 28px 24px;
}
.formulaIntroTitle {
	margin-top: -50px;
}
.formulaImage {
	margin-top: 15.72px;
}
.formulaTexts {
	margin-top: 25px;
}
.formulaTexts p.annotation {
	font-weight: 400;
	font-size: 10px;
	line-height: 24px;
}
.formulaTexts span.annotation {
	font-weight: 400;
	font-size: 10px;
	line-height: 24px;
}
.formulaScore {
	margin-top: 12px;
}
.formulaSakeScore {
	margin-block: 25px 12px;
}
.howToIntro {
	margin-top: 60px;
}
.howToTexts {
	margin-top: 25px;
}
.mariageLibraryWrap {
	margin-top: 60px;
	padding-inline: 0;
}
.mariageLibrarytitle img {
	width: 318px;
	display: block;
	margin: 0 auto;
}
/* wash */
body.wash {}
.sectionWashIntro {
	margin-inline: 0 auto;
	margin-top: 28px;
	padding: 0 12.5px;
}
.sectionWashIntro h2 img {
	display: block;
	margin: 0 auto;
	width: 228px;
}
.washDetaiIntro {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 40px;
	background: #FFFCF7;
	border: 3px solid #59C4C2;
	border-radius: 20px;
	padding: 28px 24px;
}
.washDetailTexts {
	margin-top: 20px;
}
.washDetailTexts p {
	text-align: left;
}
.washTheKey {
	margin-top: 60px;
}
.washTheKeylTitle {
	margin-top: -50px;
}
.washDetailImage {
	margin-top: 12px;
}
.effectIntro {
	margin-top: 60px;
}
.effectTitle {
	margin-top: -50px;
}
.effectImage {
	margin-top: 9.72px;
}
.effectImage img {
	margin-top: 15px;
}
.effectFormulaImage {
	margin-top: 12px;
}
.effectTexts {
	margin-top: 25px;
}
.washLibraryWrap {
	padding-inline: 0;
}
.washLibraryWrap h2 img {
	width: 292px;
	display: block;
	margin: 0 auto;
}
.underPageBtn {
	margin-block: 40px;
}

.pairlab footer {
	border-top: none;
}