@charset "UTF-8";

/* -------------------------------------------
	over write
	base font size PC: 16px SP: 14px
---------------------------------------------- */
.wrapper { font-family: 'Noto Sans JP',sans-serif; font-size: 133.3333%; font-weight: 400; }
.wrapper b { font-weight: 700; }
.wrapper img { max-width: 100%; height: auto; vertical-align: top; }
.container { position: relative; margin: 0 auto; padding-right: 13px; padding-left: 13px; max-width: 1414px; z-index: 10; }
#cmeFooter .toPageTop a { z-index: 100; }
@media only screen and (max-width: 767px) {
.wrapper { overflow: hidden; }
.container { padding-right: 25px; padding-left: 25px; }
}

/* -------------------------------------------
	view
---------------------------------------------- */
@media print,screen and (min-width: 768px) {
.sp,
.sp_only { display: none !important; }
}
@media only screen and (max-width: 767px) {
.pc,
.pc_only { display: none !important; }
}


/* -------------------------------------------
	exp
---------------------------------------------- */
.exp {margin-top: 30px;}
.exp-wrap {background-color: #f8f7f0;padding: 65px calc((80/1414)*100%);}
.exp-koji{background-color: #fff;padding: 60px 0 65px calc((60/1254)*100%);margin-bottom: 50px;}
.exp-koji__grid{display: grid;grid-template-columns: calc((370/1114)*100%) 1fr;grid-template-rows: auto 1fr;gap: 15px calc((60/1114)*100%);max-width: calc((1094/1204)*100%);}
.exp-koji__heading{font-size: 100%;font-weight: 400;text-align: center;grid-column: 2/3;grid-row: 1/2;}
.exp-koji__heading>small{display: block;font-size: calc((22/16)*100%);letter-spacing: .05em;padding-left: .05em;}
.exp-koji__heading>span{display: block;font-size: calc((44/16)*100%);letter-spacing: .2em;padding-left: .2em;}
.exp-koji__img{grid-column: 1/2;grid-row: 1/3;text-align: right;}
.exp-koji__info{grid-column: 2/3;grid-row: 2/3;}
.exp-koji__text{line-height: calc(34/16);}
.exp-koji__stock{font-weight: 700;margin-top: 15px;}
.exp-grid {display: grid;grid-template-columns: calc((400/1254)*100%) 1fr;grid-row: auto auto;gap: 45px calc((45/1254)*100%);line-height: calc(30/16);}
.exp-ingredients{grid-column: 1/2;grid-row: 1/2;}
.exp-ingredients__lead{font-weight: 700;margin-top: 20px;}
.exp-ingredients__lead:nth-of-type(2){margin-top: 20px;}
.exp-ingredients__list{margin-top: 5px;}
.exp-ingredients__list>li{display: flex;justify-content: space-between;flex-wrap: wrap;position: relative;padding: 12px 0 10px;}
.exp-ingredients__list>li:nth-of-type(1){padding-top: 0;}
.exp-ingredients__list>li:last-child{padding-bottom: 0;}
.exp-ingredients__list>li>span{white-space: nowrap;}
.exp-ingredients__list>li>span.wrap{white-space: initial;}
.exp-ingredients__list>li>span:nth-of-type(2){flex:1;text-align: right;padding-left: 1em;}
.exp-ingredients__list>li+li::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;}
.exp-ingredients__list--sub{position: relative;padding-left: 30px;margin-top: 10px;}
.exp-ingredients__list--sub::before{background-color: #333;content: "";position: absolute;top: .5em;left: 0;width: 1px;height: calc(100% - .8em);}
.exp-ingredients__list--sub+.exp-ingredients__list{margin-top: 20px;}
.exp-make{border-left: 1px solid #d1d0ca;grid-column: 2/3;grid-row: 1/2;padding-left: calc((45/808)*100%);}
.exp-make__list{margin-top: 20px;}
.exp-make__list>li{display: flex;position: relative;padding: 17px 0 15px;}
.exp-make__list>li:first-child{padding-top: 0;}
.exp-make__list>li:last-child{padding-bottom: 0;}
.exp-make__list>li+li::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;}
.exp-make__list>li+li.exp-make__list-no-dot::before{display: none;}
.exp-make__list>li.exp-make__list-no-dot{padding-top: 0;}
.exp-make__list-heading{display: flex;align-items: center;font-size: calc((18/16)*100%);font-weight: 700;}
.exp-make__list-heading>img{border: 1px solid #333;border-radius: 50%;width: 26px;margin-right: 10px;}
.exp-make__list-text{margin-top: 5px;}
.exp-make__list-inner{flex:1;}
.exp-make__col-img{display: flex;}
.exp-make__col-img .exp-make__list-img:first-of-type{margin-left: 0;}
.exp-make__list-img{width: calc((300/746.39)*100%);padding: 10px 0;margin-left: 20px;}
.exp-make__list-wrap .exp-make__list-img{float: right;}
.exp-point{grid-column: 1/3;grid-row: 2/3;border-top: 1px solid #d1d0ca;padding-top: 45px;}
.exp-point__inner{margin-top: 15px;}
.exp-point__list{flex:1;}
.exp-point__list::after{content: "";clear: both;display: block;}
.exp-point__list>p{position: relative;padding-left: 1em;}
.exp-point__list>p>.mark{position: absolute;top: 0;left: 0;}
.exp-point__list>*:nth-child(n+2){margin-top: 16px;}
.exp-point__pc-img{clear: right;float: right;width: calc((300/1254)*100%);margin: 0 0 3px 20px;}
.exp-grid__heading{display: flex;align-items: center;}
.exp-grid__heading img{width: 113px;margin-right: 25px;align-self: flex-start;}
.exp-grid__heading>span{display: block;flex:1;position: relative;padding-left: 1em;}
.exp-grid__heading>span>span{position: absolute;top: 0;left: 0;}
.exp .underLine{text-decoration:underline;}

@media print,screen and (min-width: 768px) and (max-width: 1024px) {
	.exp-make__list>li{display: block;}
	.exp-make__list-inner{flex:initial;}
	.exp-make__list-img{text-align: center;width: auto;padding: 15px 0 5px;margin: 0 30px;}
	.exp-make__col-img{display: block;}
	.exp-make__col-img .exp-make__list-img:first-of-type{margin-left: 30px;}
	.exp-make__list-wrap{display: flex;flex-direction: column;}
	.exp-make__list-wrap .exp-make__list-img{float: none;order: 2;}
}
@media print,screen and (min-width: 1025px) {
	.exp-point__sp-img{display: none !important;}
}
@media only screen and (max-width: 767px) {
	.exp {margin-top: 20px;}
	.exp-wrap {padding: 30px 15px;margin-left: -25px;margin-right: -25px;}
	.exp-koji{display: block;padding: 25px 20px 35px;margin-bottom: 35px;}
	.exp-koji__grid{display: block;gap: 0;margin: 0;max-width: none;}
	.exp-koji__heading>small{font-size: calc((16/14)*100%);letter-spacing: normal;padding-left: 0;}
	.exp-koji__heading>span{font-size: calc((23/14)*100%);letter-spacing: .2em;padding-left: .2em;}
	.exp-koji__img{text-align: center;margin-top: 17px;}
	.exp-koji__info{font-size: calc((13/14)*100%);margin-top: 17px;}
	.exp-koji__text{line-height: calc(42/26);}
	.exp-koji__stock{border-top: 1px solid #c2c7cc;margin-top: 15px;padding-top: 12px;}
	.exp-grid {display: block;gap: 0;font-size: calc((13/14)*100%);line-height: calc(40/26);}
	.exp-ingredients__lead{margin-top: 15px;}
	.exp-ingredients__lead:nth-of-type(2){margin-top: 25px;}
	.exp-ingredients__list{margin-top: 10px;}
	.exp-ingredients__list>li{padding: 9px 0 10px;}
	.exp-ingredients__list>li:nth-of-type(1){padding-top: 0;}
	.exp-ingredients__list>li:last-child{padding-bottom: 0;}
	.exp-ingredients__list>li+li::before{ background-image : linear-gradient(to right, #d5d4cf 1px, transparent 1px);background-size: 4px 1px;height: 1px;}
	.exp-ingredients__list--sub{padding-left: 25px;margin-top: 8px;}
	.exp-ingredients__list--sub::before{top: .3em;height: calc(100% - .5em);}
	.exp-ingredients__list--sub+.exp-ingredients__list{margin-top: 25px;}
	.exp-make{border-left: none;margin-top: 25px;padding-left: 0;}
	.exp-make__list{margin-top: 15px;}
	.exp-make__list>li{display: block;padding: 15px 0 12px;}
	.exp-make__list>li:first-child{padding-top: 0;}
	.exp-make__list>li:last-child{padding-bottom: 0;}
	.exp-make__list>li+li::before{ background-image : linear-gradient(to right, #d5d4cf 1px, transparent 1px);background-size: 4px 1px;height: 1px;}
	.exp-make__list-heading{font-size: 100%;}
	.exp-make__list-heading>img{width: 13px;margin-right: 5px;}
	.exp-make__list-text{margin-top: 8px;line-height: calc(42/26);}
	.exp-make__list-inner{flex:initial;}
	.exp-make__col-img{display: block;}
	.exp-make__col-img .exp-make__list-img:first-of-type{margin-left: 30px;}
	.exp-make__list-wrap{display: flex;flex-direction: column;}
	.exp-make__list-wrap .exp-make__list-img{float: none;order: 2;}	
	.exp-make__list-img{text-align: center;width: auto;padding: 15px 0 5px;margin: 0 30px;}
	.exp-point{border-top: none;padding-top: 25px;}
	.exp-point__list{flex:initial;}
	.exp-point__list>*:nth-child(n+2){margin-top: 8px;}
	.exp-grid__heading{flex-direction: column;text-align: center;justify-content: center;}
	.exp-grid__heading img{width: 95px;margin-right: 0;align-self: center;}
	.exp-grid__heading>span{flex:initial;text-align: left;margin-top: 10px;}
}
@media only screen and (max-width: 1024px) {
	.exp-point__pc-img{display: none !important;}
	.exp-point__sp-img{text-align: center;padding: 5px 0;margin: 0 30px;}
}

/* -------------------------------------------
	date
---------------------------------------------- */
.date {margin-top: 20px;}
.date-text{font-size: calc((14/16)*100%);text-align: right;}
@media only screen and (max-width: 767px) {
	.date {margin-top: 15px;}
	.date-text{font-size: calc((12/14)*100%);text-align: right;}
}

/* -------------------------------------------
	page_back
---------------------------------------------- */
.page_back { margin-top: 70px; }
.page_back p { text-align: center; }
.page_back p a { border-radius: 3px; border: 1px solid #dbdbdb; color: #222222; display: inline-block; vertical-align: bottom; padding: 15px 20px; }
.page_back p a:hover { text-decoration: none; }
.page_back p a span { display: block; position: relative; padding: 0 20px; }
.page_back p a span::after { content: ''; display: block; position: absolute; top: calc(50% - 4px); right: 0px; width: 7px; height: 7px;  border-top: 2px solid #c00; border-right: 2px solid #c00; transform: rotate(45deg); }
@media only screen and (min-width: 768px) {
.page_back p a { transition: background-color 0.3s ease, color 0.3s ease; }
.page_back p a:hover { color: #c00; background-color: #f5f5f5; }
}
@media only screen and (max-width: 767px) {
.page_back { margin: 25px 0 40px 0; }
.page_back p a { display: block; font-size: 92.8571%; }
.page_back p a span::after { top: calc(50% - 3px); width: 5px; height: 5px; }
}


/* -------------------------------------------
	animetion
---------------------------------------------- */
@media only screen {
.anime-flow { will-change: transform; animation: flow 2s ease-in-out alternate infinite; }
.anime-flow-1 { animation-duration: 2.2s; }
.anime-flow-2 { animation-duration: 2.6s; }
.anime-flow-3 { animation-duration: 3.0s; }
.anime-flow-4 { animation-duration: 3.4s; }
.anime-inBottom { transition: transform 1s ease-out, opacity 1s ease-out; transform: translateY(50px); opacity: 0; }
.anime-inBottom.is-active { transform: translateY(0); opacity: 1; }
.anime-inRight { transition: transform 0.6s ease-out, opacity 1s ease-out; transform: translateX(50px); opacity: 0; }
.anime-inRight.is-active { transform: translateX(0); opacity: 1; }
.anime-inLeft { transition: transform 1s ease-out, opacity 1s ease-out; transform: translateX(-50px); opacity: 0; }
.anime-inLeft.is-active { transform: translateX(0); opacity: 1; }
.anime-inOpacity { transition: opacity 1s ease-out; opacity: 0; }
.anime-inOpacity.is-active { opacity: 1; }
.anime-inImgRight { display: block; overflow: hidden; position: relative; }
.anime-inImgRight::after { background-color: #f26179; content: ""; position: absolute; top: 0px; right: 0px; width: 0; height: 100%; }
.anime-inImgRight.is-active::after { animation: imgInRight 0.8s cubic-bezier(.15,.85,.47,1.01) forwards; }
.anime-inImgRight img { opacity: 0; }
.anime-inImgRight.is-active img { animation: imgInRightImg 0.8s cubic-bezier(.15,.85,.47,1.01) forwards; }
.anime-inImgLeft { display: block; overflow: hidden; position: relative; }
.anime-inImgLeft::after { background-color: #f26179; content: ""; position: absolute; top: 0px; left: 0px; width: 0; height: 100%; }
.anime-inImgLeft.is-active::after { animation: imgInLeft 0.8s cubic-bezier(.15,.85,.47,1.01) forwards; }
.anime-inImgLeft img { opacity: 0; }
.anime-inImgLeft.is-active img { animation: imgInLeftImg 0.8s cubic-bezier(.15,.85,.47,1.01) forwards; }
}

/* -------------------------------------------
	keyframes
---------------------------------------------- */
@keyframes imgInRight {
	0% { right: 0px; width: 0%; }
	29% { right: 0px; width: 100%; }
	31% { right: 0px; width: 100%; }
	100% { right: 100%; width: 100%; }
}
@keyframes imgInRightImg {
	0% { opacity: 0; }
	29% { opacity: 0; }
	30% { opacity: 1; }
	31% { opacity: 1; }
	100% { opacity: 1; }
}
@keyframes imgInLeft {
	0% { left: 0px; width: 0%; }
	29% { left: 0px; width: 100%; }
	31% { left: 0px; width: 100%; }
	100% { left: 100%; width: 100%; }
}
@keyframes imgInLeftImg {
	0% { opacity: 0; }
	29% { opacity: 0; }
	30% { opacity: 1; }
	31% { opacity: 1; }
	100% { opacity: 1; }
}
@keyframes flow {
	0% { transform: translateY(0); }
	100% { transform: translateY(15px);}
}
@keyframes imgMask {
	0% { -webkit-mask-size: 0%; }
	100% { -webkit-mask-size: 120%; }
}