@charset "UTF-8";
/* CSS Document */

/* -------------------------------------------
	mv
---------------------------------------------- */
#cmeMain .mv{font-family: 'Noto Serif JP', serif;position: relative;margin-top: 80px;}
#cmeMain .mv::before{background: url(/club-me/life/mykitchen/img/bg-line.png) 0 top/auto 100% repeat-x;content: "";display: block;position: absolute;top: -70px;left: -2%;width: 150%;height: 398px;transform: rotate(5deg);animation: lineScroll var(--lineAnimeSpeedPc) linear infinite;}
#cmeMain .mv .l-container{padding: 0 53px;max-width: 1440px;}
#cmeMain .mv .mv-inner{display: flex;justify-content: center;overflow: hidden;}
#cmeMain .mv .mv-column{display: flex;align-items: center;position: relative;width: 100%;max-width: 1068px;height: 540px;z-index: +1;}
#cmeMain .mv .mv-img{order: 2;;position: absolute;top: 0;left: 404px;width: 850px;height: 100%;}
#cmeMain .mv .mv-img .is-mask{display: block;}
#cmeMain .mv .mv-img .is-mask img{width: 100%;}
#cmeMain .mv .mv-txt{order: 1;position: relative;margin-left: 17px;width: 410px;z-index: +1;}
#cmeMain .mv .mv-txt .mv-txt__heading{text-align: center;}
#cmeMain .mv .mv-txt .mv-txt__heading>span{display: inline-block;vertical-align: top;position: relative;}
#cmeMain .mv .mv-txt .mv-txt__heading>span::before{background-color: #333;content: "";position: absolute;bottom: 0;left: 50%;width: 0;height: 1px;transform: translateX(-50%);}
#cmeMain .mv .mv-txt .mv-txt__heading>span>span{display: block;overflow: hidden;}
#cmeMain .mv .mv-txt .mv-txt__heading>span>span img{width: 396px;transform: translateY(100%);}
#cmeMain .mv .mv-txt .mv-txt__overview{line-height: calc(36 / 16);margin-top: 40px}
#cmeMain .mv .mv-txt .mv-txt__heading.is-active>span::before{animation: mvLine 1.4s ease forwards;}
#cmeMain .mv .mv-txt .mv-txt__heading.is-active>span>span img{animation: mvLogo 0.7s .5s ease forwards;}
@keyframes mvLine { 0% {width: 0%;opacity: 1;} 80% {opacity: 1;} 100% {width: 106%;opacity: 0;}}
@keyframes mvLogo { 0% {transform: translateY(100%);} 100% {transform: translateY(0);}}
@media only screen and (max-width: 767px) {
	#cmeMain .mv{margin-top: 15px;}
	#cmeMain .mv::before{top: 50vw;height: 199px;animation: lineScrollSp var(--lineAnimeSpeedSp) linear infinite;}
	#cmeMain .mv .l-container{padding: 0 30px;max-width: none;}
	#cmeMain .mv .mv-inner{display: block;overflow: visible;}
	#cmeMain .mv .mv-column{display: block;max-width: none;height: auto;}
	#cmeMain .mv .mv-img{position: relative;top: auto;left: auto;width: auto;height: auto;text-align: right;}
	#cmeMain .mv .mv-img .is-mask img{width: calc(100% - 25px);}
	#cmeMain .mv .mv-txt{margin-left: 0;width: auto;}
	#cmeMain .mv .mv-txt .mv-txt__heading{text-align: left;margin-top: 30px;margin-left: -11px;}
	#cmeMain .mv .mv-txt .mv-txt__heading>span>span img{width: 223px;}
	#cmeMain .mv .mv-txt .mv-txt__overview{line-height: calc(53 / 26);margin-top: 20px}
}

/* -------------------------------------------
	month
---------------------------------------------- */
#cmeMain .month{font-family: 'Noto Serif JP', serif;margin: 90px 0 50px 0;}
#cmeMain .month .month-column{display: flex;flex-wrap: wrap;margin: 0 calc((31 / 1174) * -100%);}
#cmeMain .month a.month-panel{color: #333;display: flex;flex-direction: column;margin: 0 calc((31 / 1236) * 100%); width: calc((350 / 1236) * 100%);}
#cmeMain .month a.month-panel:nth-of-type(n+4){margin-top: 75px;}
#cmeMain .month a.month-panel:hover{text-decoration: none;}
#cmeMain .month a.month-panel .month-panel__img{overflow: hidden;position: relative;padding: 10px;margin: 0 -10px;}
#cmeMain .month a.month-panel .month-panel__img .is-zoom{box-shadow: 10px 10px 0 0 #dde9f0;}
#cmeMain .month a.month-panel .month-panel__img span{position: absolute;top: 9px;left: 9px;width: 100%;}
#cmeMain .month a.month-panel .month-panel__img span::before{background-color: #fff;content: "";position: absolute;top: 0;left: 0;padding-bottom: calc((60 / 350) * 100%);width: calc((60 / 350) * 100%);clip-path: polygon(0 0, 100% 0, 0 100%);}
#cmeMain .month a.month-panel .month-panel__img span img{width: calc((36 / 350) * 100%);position: absolute;top: 1px;left: 1px;}
#cmeMain .month a.month-panel .month-panel__txt{font-weight: 700;margin-top: 30px;}
#cmeMain .month a.month-panel .month-panel__txt dd{font-size: calc((22 / 16) * 100%);line-height: calc(32 / 22);margin-top: 10px;}
@media (hover: hover) {
	#cmeMain .month a.month-panel .month-panel__img .is-zoom{transition: box-shadow .5s ease, transform .5s ease;}
	#cmeMain .month a.month-panel:hover .month-panel__img .is-zoom{box-shadow: 0 0 0 0 #dde9f0;transform: translate(10px,10px);}
	#cmeMain .month a.month-panel .month-panel__img span{transition: transform .5s ease;}
	#cmeMain .month a.month-panel:hover .month-panel__img span{transform: translate(10px,10px);}
}
@media only screen and (max-width: 767px) {
	#cmeMain .month{margin: 50px 0 20px 0;}
	#cmeMain .month .month-column{display: block;margin: 0 30px;}
	#cmeMain .month a.month-panel{display: block;margin: 0; width: auto;}
	#cmeMain .month a.month-panel:nth-of-type(n+2){margin-top: 40px;}
	#cmeMain .month a.month-panel:nth-of-type(n+4){margin-top: 40px;}
	#cmeMain .month a.month-panel .month-panel__img span::before{padding-bottom: calc((88 / 750) * 100vw);width: calc((88 / 750) * 100vw);}
	#cmeMain .month a.month-panel .month-panel__img span img{width: calc((54 / 740) * 100vw);}
	#cmeMain .month a.month-panel .month-panel__txt{margin-top: 15px;}
	#cmeMain .month a.month-panel .month-panel__txt dt{font-size: calc((14 / 13) * 100%);text-align: center;}
	#cmeMain .month a.month-panel .month-panel__txt dd{font-size: calc((18 / 13) * 100%);margin-top: 5px;}
}