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

/* index */
body.index {}

.pcNone {
	display: none;
}

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

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

.titleImgB {
	position: relative;
}

.bgWhiteArea {
	background: #FFFCF7;
	border-radius: 20px;
	max-width: 950px;
	padding-inline: 60px;
	padding-block: 50px;
	margin: 0 auto;
	margin-top: 60px;
}
.washWhiteArea {
	padding-block: 40px;
}
.pairWrap {
	margin: 0 auto 120px;
	width: fit-content;
	padding-inline: 25px;
}

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

.readText {
	text-align: center;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.5;
	margin-bottom: 30px;
}

.readTextA {
	text-align: center;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.75;
	margin-bottom: 30px;
}

.readTextB {
	font-size: 20px;
	font-weight: 400;
	line-height: 36px;
	text-align: left;
}
.readTextC {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.5;
}
.readTextD {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.6;
}

.mt12 {
	margin-top: 12px;
}
.mtC {
	margin-bottom: 20px;
}
.mt10 {
	margin-top: 10px;
}
.mt30 {
	margin-top: 30px;
}
.mt50 {
	margin-top: 50px;
}
.readTextBold {
	font-weight: 700;
}

.dot {
  border-bottom: 2px dotted #392822;
}

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

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

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

.bgWhiteContentA {
	display: flex;
	flex-direction: column;
}

.bgWhiteContentB {
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-top: 50px;
}

.pairListWarp {
	max-width: 1260px;
	margin: 100px auto;
	padding: 0 20px;
}
.pairListtitle img {
	display: block;
	margin: 0 auto;
}
.pairListItems {
	display: flex;
	flex-wrap: wrap;
	gap: 23.5px;
	margin-top: 50px;
	justify-content: left;
}
.pairListItemsImg {
	max-width: 100%;
	transition: .3s;
}
.pairListItems li {
	width: calc((100% - (23.5px * 2)) / 3);
}
.pairListItems li figure {
	border: 3px solid #392822;
	border-radius: 10px;
	overflow: hidden;
}
.pairListItems a {
	color: #392822;
	transition: transform 0.3s ease;
}
.pairListItemsImg:hover {
	opacity: 0.8;
	transform: scale(1.1);
}
.pairListImg {
	margin-top: 16px;
}

.tagWrap {
	margin-top: 16px;
}
.pairlab .tagWrap img {
	display: block;
	margin: unset;
}
.dotted {
	position: relative;
	margin: 50px auto;
  height: 6px;
  width: 360px;
}
.dotted::after {
	position: absolute;
	content: "";
	display: block;
	background-image: radial-gradient(circle, #E18551 3px, transparent 3px);
	background-position: left bottom;
	background-repeat: repeat-x;
	background-size: 22px 6px;
	height: 6px;
	width: 360px;
}
.dotted_B {
	position: relative;
	margin: 50px auto;
  height: 6px;
  width: 360px;
}
.dotted_B::after {
	position: absolute;
	content: "";
	display: block;
	background-image: radial-gradient(circle, #59C4C2 3px, transparent 3px);
	background-position: left bottom;
	background-repeat: repeat-x;
	background-size: 22px 6px;
	height: 6px;
	width: 360px;
}

#swiper2 {
	width: 34%;
	position: absolute;
	top: 89.1%;
	left: 67.4%;
	transform: translate(-50%, -50%);
	z-index: 5;
}

.swiperWrap {
	width: 100%;
	max-width: 1920px;
	margin: -70px auto;
}
.swiper-slide {
	height: auto!important;
}
.swiper-slide .swiperItems {
  width: 100%;
	height: 100%!important;
	object-fit: cover;
}
.swiperItem {
	position: relative;
}
/* スライダーアニメーション用*/
#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: 30px;
	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: 30px;
	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: 30px;
}
#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 {
	bottom: 0;
	left: 50.8%;
	text-align: unset;
	transform: translate(-50%, 0);
	width: 40%;
}

#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 {
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
}
.pairlab #swiperRecommend .swiper-slide {
	height: auto !important;
	margin-bottom: 50px;
}
.pairlab #swiperRecommend .swiper-slide .recommendWrap {
	height: 100%!important;
	display: block;
	padding: 20px 24px;
	background: #FFF;
	border-radius: 10px;
	margin-bottom: 0;
}
.pairlab #swiperRecommend .swiper-slide .recommendWrap .recommendDetail {
	display: flex;
	gap: 20px;
	justify-content: space-around;
}
.pairlab #swiperRecommend .swiper-slide .recommendWrap .recommendDetail .recommendImg {
	display: flex;
	align-items: center;
}
.pairlab #swiperRecommend .swiper-slide .recommendWrap .recommendDetail .recommendImg img {
	width: auto;
	height: auto;
	max-width: 240px;
	object-fit: cover;
}
.pairlab #swiperRecommend .swiper-pagination-bullet {
	background: #D9D9D9;
	width: 15px;
	height: 15px;
	margin: 0 20px !important;
	opacity: 1;
}
.pairlab #swiperRecommend .swiper-pagination-bullet-active {
	background: #E18551;
	width: 15px;
	height: 15px;
	margin: 0 20px !important;
}
.pairlab #swiperRecommend .swiper-pagination {
  bottom: 0;
}
.swiper-slide {
	height: auto!important;
}

.swiper-slide .recommendItem {
	height: 100%!important;
}

.recommendList {
	background: #795454;
	padding-bottom: 25px;
	margin: 0 auto;
}
.recommendTitle img {
	margin-block: 30px;
}
.recommendTexts a {
	text-decoration: none;
}
.recommendTexts {
	display: flex;
	flex-direction: column;
}
.recommendTextTitle {
	font-size: 24px;
	font-weight: 500;
	line-height: 40px;
	color: #392822;
}
.recommendText {
	font-size: 20px;
	font-weight: 400;
	line-height: 40px;
	color: #392822;
}

/* pair1 */
.pickupItem {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 40px;
}
.articleContainer {
	width: 100%;
	max-width: 1220px;
	margin-top: 25px;
}
.articleIntroWrap {
	background: #fff;
	padding-inline: 30px;
	padding-block: 30px 20px;
	border-radius: 10px;
	min-height: 700px;
}
.articleIntro {
	display: flex;
}
.articleIntroImage {
	width: 57%;
}
.articleIntroTexts {
	position: relative;
	width: 43%;
	display: flex;
	flex-direction: column;
	padding-left: 28px;
}
.introText p {
	font-weight: 400;
	font-size: 20px;
	line-height: 1.8;
}
.introText p.annotation {
	font-weight: 400;
	font-size: 16px;
	line-height: 36px;
}
.dishName {
	font-weight: 500;
	font-size: 32px;
	line-height: 1.25;
	letter-spacing: 0.4px;
	text-align: center;
}
.times {
	position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 auto;
}
.times::before,
.times::after {
	content: "";
  position: absolute;
  top: 60%;
  left: 60%;
  width: 30px;
  height: 2px;
  background: #392822;
  transform-origin: center;
}
.times::before {
	transform: translate(-50%, -50%) rotate(45deg);
}
.times::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}
.introTitle {
	display: flex;
	flex-direction: column;
	padding: 13px 30px;
	gap: 10px;
}
.introBorderA {
	display: inline-block;
	font-weight: 700;
	background: linear-gradient(#FAAA7CB2, #FAAA7CB2) no-repeat;
	background-size: 100% 16px;
	background-position: calc(50%) calc(100% - 4px);
}
.introBorderB {
	display: inline-block;
	font-weight: 700;
	background: linear-gradient(#B1DAFFB2, #B1DAFFB2) no-repeat;
	background-size: 100% 16px;
	background-position: calc(50%) calc(100% - 4px);
}
.introText {
	margin-top: 20px;
}
.introText {
	font-weight: 400;
	font-size: 20px;
	line-height: 36px;
}
.introTags {
	display: flex;
	gap: 8px;
	margin-top: 20px;
	flex-wrap: wrap;
}
.introTags li {
	color: #D14B4B;
	font-weight: 500;
	font-size: 20px;
	line-height: 1;
}
.introTagIcon {
	display: flex;
	flex-direction: row;
	gap: 10px;
	margin-top: 6px;
	justify-content: flex-end;
}
.commentBlock {
	display: flex;
	margin-top: 50px;
	padding-inline: 12px;
	padding-block: 15px 20px;
	gap: 24px;
}
.commentIcon {
	width: 29%;
}
.commentText {
	background: #FFFFFF;
	border: 2px solid #392822;
	box-shadow: 4px 4px 0px #392822;
	border-radius: 10px;
	padding: 16px 20px;
	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;
	width: 158.5%;
}
.commentText p {
	font-size: 20px;
	font-weight: 400;
	line-height: 36px;
	text-align: left;
}
.pickupItemWrap {
	margin-top: 100px;
}
.pickupItemTitle {
	position: relative;
	text-align: center;
}
.pickupItemTitle::after {
	position: absolute;
	content: "";
	left: 50%;
	bottom: -55px;
	transform: translateX(-50%);
	width: 200px;
	height: 10px;
	background: #E18551;
	border-radius: 1px;
}
.pickupItemTitleW {
	position: relative;
	text-align: center;
}
.pickupItemTitleW::after {
	position: absolute;
	content: "";
	left: 50%;
	bottom: -55px;
	transform: translateX(-50%);
	width: 200px;
	height: 10px;
	background: #59C4C2;
	border-radius: 1px;
}
.pickupItemItems {
	margin-top: 110px;
	padding: unset;
}
.pickupItemText {
	font-weight: 500;
	font-size: 24px;
	line-height: 1.5;
	margin-top: 16px;
}
.pickupItemLists li figure {
	display: flex;
	border-radius: 10px;
	background: #FFF;
	width: 390px;
	height: 390px;
	overflow: hidden;
	border: 2px solid #392822;
}
.similarItemWrap {
	margin-top: 125px;
}
/* btn */
.mariageBtn {
	margin-top: 10px;
}
.mariageBtn a:hover {
	opacity: 0.8;
}
.washBtn {
	margin-top: 10px;
}
.washBtn a:hover {
	opacity: 0.8;
}
.backBtn {
	width: fit-content;
	margin-block: 110px;
	margin-inline: auto;
}
.backBtn a:hover {
	opacity: 0.8;
}
/* mariage */
body.mariage {}
.sectionWashIntro {
	max-width: 1030px;
	margin: 40.4px auto 0;
	padding: 0 40px;
}
.sectionMariageIntro img {
	display: block;
	margin: 0 auto;
}
.formulaBgWhiteArea {
	border: 4px solid #E18551;
}
.formulaIntro {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 100px;
	background: #FFFCF7;
	border: 4px solid #E18551;
	border-radius: 20px;
	padding-inline: 60px;
	padding-block: 60px 50px;
}
.formulaIntroTitle {
	margin-top: -100px;
}
.formulaImage {
	margin-top: 21.8px;
}
.formulaTexts {
	margin-top: 50px;
}
.formulaTexts span.annotation {
	margin-top: 50px;
	font-weight: 400;
	font-size: 16px;
	line-height: 36px;
}
.formulaTexts p.annotation {
	margin-top: 50px;
	font-weight: 400;
	font-size: 16px;
	line-height: 36px;
}
.formulaScore {
	margin-top: 30px;
}
.formulaSakeScore {
	margin-block: 50px 30px;
}
.howToIntro {
	margin-top: 100px;
}
.howToTexts {
	margin-top: 50px;
}
/* wash */
body.wash {}
.sectionWashIntro {
	max-width: 1030px;
	margin: 40.4px auto 0;
	padding: 0 40px;
}
.sectionWashIntro img {
	display: block;
	margin: 0 auto;
}
.washDetaiIntro {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 60px;
	background: #FFFCF7;
	border: 4px solid #59C4C2;
	border-radius: 20px;
	padding: 50px 60px;
}
.washDetailTexts {
	margin-top: 30px;
}
.washTheKey {
	margin-top: 100px;
}
.washTheKeylTitle {
	margin-top: -100px;
}
.effectIntro {
	margin-top: 100px;
}
.effectTitle {
	margin-top: -100px;
}
.effectImage {
	margin-top: 21.8px;
}
.effectImage img {
	margin-top: 30px;
}
.effectFormulaImage {
	margin-top: 12px;
}
.effectTexts {
	margin-top: 50px;
}
.washLibraryWrap {
	margin-top: 100px;
}
.washLibraryWrap img {
	display: block;
	margin: 0 auto;
}