@charset "utf-8";
@import url(./common.css??ver.d=20230801);
/* CSS Document */

#cafetty_23aw{
	max-width: 1000px;
	width: 100%;
	font-size: 16px;
	font-family: 'Hind', "Hiragino Kaku Gothic Pro", "メイリオ",sans-serif;
	margin: 30px auto 100px;
}

#cafetty_23aw .mainVisual{
	margin-bottom: 75px;
}

#cafetty_23aw .mainVisualUnder{
	margin-bottom: 140px;
}

#cafetty_23aw .mainVisualUnder h2{
	font-size: 40px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: calc((40 / 1000) * 1em);
	text-align: center;
	color: #221715;
	margin-bottom: 35px;
}

#cafetty_23aw .mainVisualUnder p{
	font-size: 19px;
	font-weight: 400;
	line-height: 2.3;
/*	letter-spacing: calc((40 / 1000) * 1em);*/
	text-align: center;
	color: #221715;
}

#cafetty_23aw .mainVisualUnder p span{
	font-size: inherit;
	font-weight: inherit;
	background: #eadacb;
}

#cafetty_23aw nav{
	max-width: 750px;
	width: 100%;
	margin: 0 auto 225px;
}

#cafetty_23aw nav ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 40px;
}

#cafetty_23aw nav li{
	max-width: 223px;
	position: relative;
	opacity: 0;
}

#cafetty_23aw nav.active li{
	animation: FadeIn 1s ease-in-out forwards;
}
#cafetty_23aw nav li:nth-child(1){animation-delay: .0s;}
#cafetty_23aw nav li:nth-child(2){animation-delay: .2s;}
#cafetty_23aw nav li:nth-child(3){animation-delay: .4s;}
#cafetty_23aw nav li:nth-child(4){animation-delay: .6s;}
#cafetty_23aw nav li:nth-child(5){animation-delay: .8s;}
#cafetty_23aw nav li:nth-child(6){animation-delay: 1s;}

@keyframes FadeIn {0% {opacity:0;}100% {opacity:1;}}

#cafetty_23aw nav li a::after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transform: scale(0);
	transition: transform .8s ease;
	/* opacity: .5; */
}

#cafetty_23aw nav li a:hover::after{
	transform: scale(1);
}


#cafetty_23aw nav li:nth-child(1) a::after{background: url(../images/01_color.jpg) center,100% no-repeat;}
#cafetty_23aw nav li:nth-child(2) a::after{background: url(../images/02_color.jpg) center,100% no-repeat;}
#cafetty_23aw nav li:nth-child(3) a::after{background: url(../images/03_color.jpg) center,100% no-repeat;}
#cafetty_23aw nav li:nth-child(4) a::after{background: url(../images/04_color.jpg) center,100% no-repeat;}
#cafetty_23aw nav li:nth-child(5) a::after{background: url(../images/05_color.jpg) center,100% no-repeat;}
#cafetty_23aw nav li:nth-child(6) a::after{background: url(../images/06_color.jpg) center,100% no-repeat;}

#cafetty_23aw article h2 , 
#cafetty_23aw section h3{
	width: 0;
	height: 1px;
	clip-path: polygon(0 0,0 0,0 0,0 0);
}

#cafetty_23aw section{
	text-align: right;
	overflow: hidden;
	padding-top: 15px;
}

#cafetty_23aw section:nth-child(odd){
	text-align: left;
}


#cafetty_23aw section:not(:last-child){
	margin-bottom: 200px;
}

#cafetty_23aw section .contents__img{
	opacity: 0;
	transform: translateX(-100%);
}

#cafetty_23aw section .contents__img.active{
	animation: FadeInLeft 1.5s ease-in-out forwards;
}

@keyframes FadeInLeft {0% {opacity:0;transform: translateX(-50%);}100% {opacity:1;transform: translateX(0);}}

#cafetty_23aw section .contents__txt{
	font-size: 19px;
	font-weight: 400;
	line-height: 2;
	letter-spacing: calc((0 / 1000) * 1em);
	text-align: right;
	color: #221715;
	margin: 85px 35px;
	display: inline-block;
	opacity: 0;
}

#cafetty_23aw section .contents__txt.sp_cont{display: none;}

#cafetty_23aw section .contents__txt.active{
	animation: FadeIn 1s ease-in-out forwards;
}

#cafetty_23aw section:nth-child(odd) .contents__txt{
	text-align: left;
}

#cafetty_23aw section .contents__txt > span{
	display: block;
}
#cafetty_23aw section .contents__txt.active span span{
	opacity: 0;
	background: linear-gradient(#eadacb 90% , transparent 90%);
	animation: text_anime_on .4s ease-out forwards;
}

#cafetty_23aw section .contents__txt span span:first-child{
	padding-left: .25em;
}

#cafetty_23aw section .contents__txt span span:last-child{
	padding-right: .25em;
}

@keyframes text_anime_on {0% {opacity:0;}100% {opacity:1;}}

#cafetty_23aw .contents__cart{
	margin: 100px auto 0;
	text-align: center;
}

#cafetty_23aw .contents__cart__txt{
	font-size: 22px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: calc((40 / 1000) * 1em);
	text-align: center;
	color: #221715;
	margin-bottom: 12px;
}

#cafetty_23aw .contents__cart__button{
	max-width: 218px;
	width: 100%;
	background: #eadacb;
	margin: 0 auto;
	border: 2px solid #eadacb;
	position: relative;
	overflow: hidden;
}

#cafetty_23aw .contents__cart__button::before{
	content: "";
	width: 200%;
	height: 100%;
	background: #fff;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
	transform: translateX(-100%);
	transition: transform ease .4s;
	clip-path: polygon(0 0, 75% 0, 100% 100%, 25% 100%);
}

#cafetty_23aw .contents__cart__button:hover::before{
	transform: translateX(25%);
}

#cafetty_23aw .contents__cart__button a{
	width: 100%;
	font-size: 26px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: calc((60 / 1000) * 1em);
	text-align: center;
	color: #221715;
	padding: 14px 0;
	position: relative;
	z-index: 1;
	display: block;
	transform: translateY(2px);
}

#cafetty_23aw .contents__cart__button:hover a{
	color: #eadacb;
}

#cafetty_23aw .otherFeature{
	text-align: center;
	margin: 200px 0 120px;
}

#cafetty_23aw .otherFeature a{
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: calc((20 / 1000) * 1em);
	text-align: center;
	color: #221715;
	background: linear-gradient(transparent 40% , #eadacb 40%);
	padding: 0 .75em;
	display: inline-block;
	transition: all .4s;
}

#cafetty_23aw .otherFeature a:hover{
	color: #eadacb;
	background: linear-gradient(transparent 40% , #221715 40%);
}

@media screen and (max-width: 700px){
	#cafetty_23aw > *:not(.mainVisual){
		padding: 0 2%;
		box-sizing: border-box;
	}

	#cafetty_23aw .mainVisual{
		margin-bottom: 40px;
	}

	#cafetty_23aw .mainVisualUnder h2{
		font-size: 23px;
		margin: 0 auto 30px;
	}

	#cafetty_23aw .mainVisualUnder p{
		font-size: 12px;
		letter-spacing: calc((0 / 1000) * 0.5em);
	}

	#cafetty_23aw .mainVisualUnder{
		margin: 0 auto 70px;
		max-width: 90%;
		width: 100%;
		padding: 0;
	}

	#cafetty_23aw nav ul{
		gap: 20px;
	}
	
	#cafetty_23aw nav li{
		max-width: calc((100% - 20px) / 2);
	}

	#cafetty_23aw nav{
		margin-bottom: 80px;
	}

	#cafetty_23aw section{
		padding-top: 65px;
	}

	#cafetty_23aw section:not(:last-child){
		margin-bottom: 40px;
	}

	#cafetty_23aw section .contents__txt{
		font-size: 16px;
		margin: 50px 3%;
	}

	#cafetty_23aw .contents__cart{
		margin-top: 60px;
	}

	#cafetty_23aw .otherFeature{
		margin: 100px 0 60px;
	}

	#cafetty_23aw section .contents__txt.sp_cont{display: inline-block;}
	#cafetty_23aw section .contents__txt.pc_cont{width: 0;height: 1px;clip-path: polygon(0 0,0 0,0 0,0 0);visibility: hidden;font-size: 0;margin: 0;}
}