@charset "UTF-8";

/* -------------------------------------------
	mv
---------------------------------------------- */
.mv{margin-top: 30px;overflow: hidden;}
.mv-grid{display: grid;grid-template-columns: calc((395/1414)*100%) 1fr;grid-template-rows: auto 1fr;gap: 35px calc((30/1414)*100%);}
.mv-logo{padding-top: 8px;grid-column: 1/2;grid-row: 1/2;text-align: center;}
.mv-logo img{width: 236px;}
.mv-img{grid-column: 2/3;grid-row: 1/3;padding-bottom: 20px;}
.mv-img>span{display: block;position: relative;z-index: +1;}
.mv-img>span::before{background-color: #eb812b;content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform: translate(20px,20px);z-index: -1;}
.mv-img>span img{width: 100%;}
.mv-info{grid-column: 1/2;grid-row: 2/3;text-align: center;display: flex;flex-direction: column;align-items: center;}
.mv-heading{display: flex;justify-content: center;}
.mv-heading>span{background: url(/club-me/food/koji/img/common/line-dot.svg) center top/auto 8px repeat-x, url(/club-me/food/koji/img/common/line-dot.svg) center bottom/auto 8px repeat-x;display: block;font-size: calc((46/16)*100%);font-weight: 400;line-height: calc(53/46);padding: 32px 0;width: 298px;max-width: 100%;}
.mv-text{font-size: clamp(13px, ((15/1460)*100vw), 15px);;line-height: calc(25/15);margin-top: 30px;text-align: left;}
@media print,screen and (min-width: 768px) {
	/* animation */
	.mv .mv-logo{opacity: 0;transition: opacity 2s ease;}
	.mv.is-active .mv-logo{opacity: 1;}
	.mv .mv-info{opacity: 0;transition: opacity 2s 1s ease;}
	.mv.is-active .mv-info{opacity: 1;}
	.mv .mv-img{opacity: 0;transition: opacity 2s 1s ease;}
	.mv.is-active .mv-img{opacity: 1;}
	.mv .mv-img>span::before{transform: translate(0,0);opacity: 0;transition: transform 1s 1.5s ease, opacity 1s 1.5s ease;}
	.mv.is-active .mv-img>span::before{transform: translate(20px,20px);opacity: 1;}
}
@media print,screen and (min-width: 768px) and (max-width: 1460px) {
	.mv-grid{gap: calc((35/1460)*100vw) calc((30/1414)*100%);}
	.mv-logo{padding-top: calc((8/1460)*100vw);}
	.mv-logo img{width: calc((236/1460)*100vw);}
	.mv-heading>span{font-size: calc((46/1460)*100vw);padding: calc((32/1460)*100vw) 0;width: calc((298/1460)*100vw);}
	.mv-text{margin-top: calc((30/1460)*100vw);}
}
@media only screen and (max-width: 767px) {
	.mv{margin-top: 8px;}
	.mv-grid{display: block;gap:0;}
	.mv-img{padding-bottom: 0;margin-top: 8px;}
	.mv-img>span{display: block;margin-left: -25px;margin-right: -25px;}
	.mv-img>span::before{display: none;}
	.mv-info{display: block;}
	.mv-logo{padding-top: 0;text-align: center;}
	.mv-logo img{width: 75px;}
	.mv-heading{margin-top: 20px;}
	.mv-heading>span{box-sizing: border-box !important;background: url(/club-me/food/koji/img/common/line-dot.svg) center bottom/auto 4px repeat-x;font-size: calc((26/14)*100%);padding: 0 5px 15px;width: auto;min-width: 150px}
	.mv-text{font-size: calc((13/14)*100%);line-height: calc(43/26);margin-top: 10px;}

	/* animation */
	.mv .mv-logo{opacity: 0;transition: opacity 2s ease;}
	.mv.is-active .mv-logo{opacity: 1;}
	.mv .mv-info{opacity: 0;transition: opacity 2s 1s ease;}
	.mv.is-active .mv-info{opacity: 1;}
	.mv .mv-img{opacity: 0;transition: opacity 2s .5s ease;}
	.mv.is-active .mv-img{opacity: 1;}
}

/* -------------------------------------------
	lead
---------------------------------------------- */
.lead{margin-top: 50px;}
.lead-text{display: flex;justify-content: center;font-size: calc((26/16)*100%);font-weight: 400;letter-spacing: .25em;line-height: calc(44/26);padding-left: .25em;}
.lead-text>span{display: block;text-align: center;position: relative;padding: 0 calc(15px - .25em) 0 15px;}
.lead-text>span::before,
.lead-text>span::after{background-color: #333;content: "";position: absolute;bottom: .3em;left: 0;width: 1px;height: 60px;transform-origin: center bottom;transform: rotate(-45deg);}
.lead-text>span::after{left: auto;right: 0;transform: rotate(45deg);}
.lead-text>span>strong{color: #eb8838;font-weight: 400;}
@media only screen and (max-width: 767px) {
	.lead{margin-top: 35px;}
	.lead-text{font-size: calc((16/14)*100%);line-height: calc(48/32);letter-spacing: normal;}
	.lead-text>span{padding: 0 15px;}
	.lead-text>span::before,
	.lead-text>span::after{height: 28px;}
}

/* -------------------------------------------
	recipe
---------------------------------------------- */
.recipe{margin-top: 90px;}
.recipe-heading{text-align: center;}
.recipe-grid{display: grid;grid-template-columns: repeat(3, 1fr);gap: 75px calc((62/1414)*100%);margin-top: 45px;}
.recipe-grid a{color: #000;text-decoration: none;}
.recipe-item{display: flex;flex-direction: column;position: relative;height: 100%;}
.recipe-item__inner{flex:1;}
.recipe-item__img{position: relative;}
.recipe-item__img img{width: 100%;}
.recipe-item__heading{display: flex;align-items: flex-start;justify-content: space-between;font-size: calc((24/16)*100%);font-weight: 400;line-height: calc(30/24);margin: 25px calc((25/430)*100%) 0;}
.recipe-item__heading>span:nth-of-type(1){flex:1;}
.recipe-item__heading>span:nth-of-type(2){display: block;border-radius: 5px;color: #fff;font-size: 14px;line-height: 30px;font-weight: 700;letter-spacing: .25em;padding-left: 0.25em;margin: 2px 0 0 10px;width: 50px;text-align: center;}
.recipe-item__heading>span:nth-of-type(2).main-dish{background-color: #ec4731;}
.recipe-item__heading>span:nth-of-type(2).side-dish{background-color: #53b61d;}
.recipe-item__text{font-size: calc((15/16)*100%);line-height: calc(27/15);margin: 15px calc((25/430)*100%) 0;}
.recipe-item__note{font-size: calc((15/16)*100%);line-height: calc(27/15);font-weight: 700;position: relative;margin: 15px calc((25/430)*100%) 0;padding-top: 15px;}
.recipe-item__note::before{ background-image: linear-gradient(to right, #d5d4cf 2px, transparent 2px);background-size: 8px 2px;content: "";position: absolute;top: 0;left: 0;width: 100%;height: 2px;}
@media (hover: hover) {
	.recipe-item .recipe-item__img::after{box-sizing: border-box;content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0px solid #eb8838;transition: border .25s linear;}
	.recipe-item:hover .recipe-item__img::after{border-width: 5px;}
}
@media print, screen and (min-width: 768px) {
	.recipe-grid a:nth-of-type(3n+2){transition-delay: .3s;}
	.recipe-grid a:nth-of-type(3n+3){transition-delay: .6s;}
}
@media print,screen and (min-width: 768px) and (max-width: 1000px) {
	.recipe-grid{grid-template-columns: repeat(2, 1fr);}
}
@media only screen and (max-width: 767px) {
	.recipe{margin-top: 35px;}
	.recipe-grid{grid-template-columns: 1fr;gap: 30px 0;margin-top: 30px;}
	.recipe-item__heading{font-size: calc((17/14)*100%);line-height: calc(46/32);margin: 23px calc((40/650)*100%) 0;}
	.recipe-item__heading>span:nth-of-type(1){flex:1;}
	.recipe-item__heading>span:nth-of-type(2){border-radius: 3px;font-size: 11px;line-height: 19px;letter-spacing: .25em;padding-left: 0.25em;margin: 2px 0 0 10px;width: 38px;}
	.recipe-item__heading>span:nth-of-type(2).main-dish{background-color: #ec4731;}
	.recipe-item__heading>span:nth-of-type(2).side-dish{background-color: #53b61d;}
	.recipe-item__text{font-size: calc((13/14)*100%);line-height: calc(42/26);margin: 10px calc((40/650)*100%) 0;}
	.recipe-item__note{font-size: calc((13/14)*100%);line-height: calc(42/26);margin: 10px calc((40/650)*100%) 0;padding-top: 10px;}
	.recipe-item__note::before{background-color: #333;background-image: none;height: 1px;}
}

/* -------------------------------------------
	more
---------------------------------------------- */
.more{background-color: #f8f7f0;margin-top: 70px;padding: 55px 0 60px 0;}
.more-heading{display: flex;justify-content: center;font-size: 100%;font-weight: 400;letter-spacing: .15em;line-height: 1.4;padding-left: .15em;}
.more-heading>span{display: block;text-align: center;position: relative;padding: 0 calc(20px - .15em) 0 20px;}
.more-heading>span::before,
.more-heading>span::after{background-color: #333;content: "";position: absolute;bottom: .3em;left: 0;width: 1px;height: 35px;transform-origin: center bottom;transform: rotate(-45deg);}
.more-heading>span::after{left: auto;right: 0;transform: rotate(45deg);}
.more-heading>span>strong{color: #eb8838;font-weight: 400;}
.more-heading>span>small{display: block;font-size: calc((18/16)*100%);font-weight: 500;}
.more-heading>span>span{display: block;font-size: calc((34/16)*100%);}
.more-list{display: grid;grid-template-columns: repeat(6, 1fr);gap: 3px;margin: 20px auto 0;max-width: 1250px;}
.more-list a{color: #333;}
.more-list a:hover{text-decoration: none;}
.more-item{box-sizing: border-box !important;background-color: #fff;display: flex;align-items: center;flex-direction: column;font-size: calc((15/16)*100%);position: relative;padding: 45px 15px 25px;}
.more-item::after{box-sizing: border-box !important;content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0px solid #eb8838;}
.more-item.is-active::after{border-width: 3px;}
.more-item__img{text-align: center;}
.more-item__text{display: flex;justify-content: center;margin-top: 25px;}
.more-item__text>span{position: relative;display: block;padding-right: 23px;}
.more-item__text>span::before{background: url(/club-me/food/koji/img/common/arw.png) right center/cover no-repeat;content: "";position: absolute;top: calc(50% - 8px);right: 0;width: 16px;height: 16px;}
.more-list.is-center{display: flex;justify-content: center;}
.more-list.is-center .more-item{box-sizing: border-box !important;width: 100%;max-width: 204px;}
@media (hover: hover) {
	.more-item::after{transition: border .15s linear;}
	.more-item:hover::after{border-width: 3px;}
}
@media print,screen and (min-width: 768px) and (max-width: 1100px) {
	.more-list{grid-template-columns: repeat(4, 1fr);}
	.more-list.is-center{display: grid;}
	.more-list.is-center .more-item{width: auto;max-width: none;}
	.more-list.is-center--imp{display: flex;}
	.more-list.is-center--imp .more-item{width: 100%;max-width: 204px;}
}
@media only screen and (max-width: 767px) {
	.more{margin-top: 30px;padding: 25px 0 40px 0;}
	.more-heading{letter-spacing: .1em;padding-left: .1em;}
	.more-heading>span{display: block;text-align: center;position: relative;padding: 0 calc(11px - .1em) 0 11px;}
	.more-heading>span::before,
	.more-heading>span::after{bottom:.3em;height: 22px;}
	.more-heading>span>small{font-size: calc((12/14)*100%);font-weight: 500;}
	.more-heading>span>span{font-size: calc((20/14)*100%);}
	.more-list{grid-template-columns: repeat(2, 1fr);gap: 2px;margin-top: 10px;}
	.more-item{flex-direction:row;font-size: calc((12/14)*100%);padding: 13px 8px 13px 8px;}
	.more-item.is-active::after{border-width: 2px;}
	.more-item__img img{width: 32px;}
	.more-item__text{display: block;margin: 0 0 0 5px;flex:1;}
	.more-item__text>span{padding-right: 18px;}
	.more-item__text>span::before{top: calc(50% - 7px);width: 15px;height: 15px;}
	.more-list.is-center{display: grid;}
	.more-list.is-center .more-item{width: auto;max-width: none;}
}

/* -------------------------------------------
	profile
---------------------------------------------- */
.profile{margin-top: 90px;}
.profile-wrap{display: flex;align-items: flex-end;position: relative;margin: 0 auto;width: 930px;max-width: 100%;}
.profile-wrap::before{background-image: linear-gradient(to right, #000 2px, transparent 2px),linear-gradient(to bottom, #636363 2px, transparent 2px),linear-gradient(to left, #636363 2px, transparent 2px),linear-gradient(to top, #636363 2px, transparent 2px);background-size: 8px 2px,2px 8px,8px 2px,2px 8px;background-repeat: repeat-x,repeat-y,repeat-x,repeat-y;background-position:left top,right top,right bottom,left bottom;content: "";position: absolute;top: 0;right: 40px;width: calc(100% - 80px);height: 100%;}
.profile-img{margin-top: -30px;position: relative;}
.profile-info{flex:1;padding: 50px 30px 50px 20px;position: relative;margin-right: 40px;}
.profile-info__name>dt{font-weight: 700;}
.profile-info__text{margin-top: 20px;line-height: calc(30/16);}
@media only screen and (max-width: 767px) {
	.profile{margin-top: 30px;}
	.profile-wrap{display: block;margin: 0;width: auto;}
	.profile-wrap::before{top: 30px;right: -10px;width: calc(100% + 20px);height: calc(100% - 30px);}
	.profile-img{text-align: center;margin-top: 0;}
	.profile-img img{width: 220px;margin-left: -52px;}
	.profile-info{flex:initial;padding: 20px 10px;margin-right: 0;font-size: calc((13/14)*100%);line-height: calc(40/26);}
	.profile-info__text{margin-top: 8px;line-height: calc(40/26);}
}