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

テイクアウト限定デザート 2022.3.8

--------------------------------------------------------------------------------------*/

#td {
	width: 100%;
	height: auto;
	font-family: 'Zen Maru Gothic', sans-serif;
	font-weight: 700;
	color: #000;
	overflow: hidden;
}

#td {
	width: 100%;
	border: 8px solid #000;
}

#td .blueArea {
	position: relative;
	background-color: #c9f3f4;
}

#td .blueArea:before {
	content: "";
	display: block;
    width: 100%;
    height: 50px;
    background: url(../images/menu/takeout/desserts/wave.jpg) 0 0 / 40px 50px repeat-x;
    position: absolute;
    top: -20px;
    left: 0;
	animation: bk 6000ms ease infinite;
}

@keyframes bk {
	0% { background-position: 0 0; }
	16.66% { background-position: -40px 0; }
	33.33% { background-position: -80px 0; }
	49.99% { background-position: -120px 0; }
	66.66% { background-position: -80px 0; }
	83.33% { background-position: -40px 0; }
	100% { background-position: 0 0; }
}

/*----------------------------------------------------MV*/

#mv {
	width: 100%;
    position: relative;
}

#mv .mvInner {
	width: 100%;
	position: relative;
}

#mv .mvInner .mvTitle {
	width: 65%;
    max-width: 885px;
	position: relative;
    margin: 60px auto 0;
}

#mv .mvInner .mvTitle h1 {
	position: relative;
	margin: 0;
	z-index: 5;
}

#mv .mvInner .mvTitle .clippath {
	width: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	margin: 0;
}

#mv .mvInner .mvTitle .clippath img {
	position: relative;
	z-index: 1;
}

#mv .mvInner .mvTitle .clippath:before {
	content: "";
	display: block;
	width: 99%;
	height: 99%;
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	margin: 0;
	background: linear-gradient(294deg, #da3540, #f7931e, #bcea2c);
    background-size: 800% 800%;
	animation: AnimationName 12s ease infinite;
	-webkit-animation: AnimationName 12s ease infinite;
}

@keyframes AnimationName {
    0%{background-position:0% 71%}
    50%{background-position:100% 30%}
    100%{background-position:0% 71%}
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 71%}
    50%{background-position:100% 30%}
    100%{background-position:0% 71%}
}

#mv .mvInner .mvTitle .date {
	width: 17%;
    max-width: 150px;
    position: absolute;
    top: 7%;
    left: 7%;
    margin: 0;
}

#mv .mvInner .mvTitle .date img {
	display: block;
	position: relative;
	z-index: 5;
}

#mv .mvInner .mvTitle .date:before {
	content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(/images/menu/takeout/desserts/bakudan.svg) center center / cover no-repeat;
    position: absolute;
    top: 0;
    left: 0;
	animation: kurukuru 6000ms linear infinite;
}

@keyframes kurukuru {
	from { transform: rotate(0); }
	to { transform: rotate(360deg); }
}

#mv .mvInner .copy {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0.5rem;
    white-space: nowrap;
    position: absolute;
    top: -30px;
    right: 30px;
    margin: 0;
}

#mv .mvMenu {
    display: flex;
    justify-content: space-between;
    width: 55%;
    max-width: 750px;
    margin: -75px auto 0;
    position: relative;
    z-index: 10;
}

#mv .mvMenu .mvMenuInner {
    width: 27%;
	position: relative;
}

#mv .mvMenu .mvMenuInner p {
	width: 59.4%;
    max-width: 120px;
    position: absolute;
    top: 36%;
    left: -36%;
	transform-origin: right bottom;
	transform: translate(10%,-10%) scale(.8);
	opacity: 0;
	transition: all 350ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

#mv .mvMenu .mvMenuInner:hover p {
	transform: translate(0,0) scale(1);
	opacity: 1;
}


/*----------------------------------------------------LEAD*/

#lead {
    width: 100%;
    background-color: #c9f3f4;
    padding-top: 245px;
    margin-top: -210px;
}

#lead .leadInner {
}

#lead .leadInner p {
	font-size: 20px;
	line-height: 2.125;
	letter-spacing: .1em;
	text-align: center;
	margin: 0 auto;
}

#lead .bags {
    display: flex;
    justify-content: space-between;
    width: 167px;
    height: auto;
    padding: 60px 0 80px;
    margin: 0 auto;
}

#lead .bags svg {
	width: 34px;
	animation: jump 1600ms ease infinite;
}

#lead .bags svg:nth-child(1) { animation-delay: 0; }
#lead .bags svg:nth-child(2) { animation-delay: 400ms; }
#lead .bags svg:nth-child(3) { animation-delay: 800ms; }
 
@keyframes jump {
	0% { transform: translate(0,0) scale(1,1); }
	5% { transform: translate(0,0) scale(1.1,1); }
	15% { transform: translate(0,-50%) scale(.95,1); }
	25% { transform: translate(0,0) scale(1.15,1); }
	30% { transform: translate(0,0) scale(1,1); }
	100% { transform: translate(0,0) scale(1,1); }
}


/*----------------------------------------------------MENU*/

.menu .menuInner {
	width: 85%;
	max-width: 1080px;
	position: relative;
	margin: 0 auto;
}

.menu .menuInner + .menuInner {
	margin-top: 140px;
}

.menu .menuInner .menuImg {
    width: 74%;
    max-width: 800px;
    background-color: #fff;
	border-radius: 100px;
    margin: 0 auto;
	position: relative;
	overflow: visible;
}

.menu .menuInner .menuImg .menuImgInner {
	width: 100%;
	height: 100%;
    padding: 14.2% 0;
	position: relative;
}

.menu .menuInner .menuImg .menuImgInner figure {
	width: 38.75%;
	max-width: 310px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	padding-top: 38%;
	z-index: 1;
}

.menu .menuInner .menuImg .menuImgInner svg {
	display: block;
	width: 61.75%;
	margin: 0 auto;
}

.menu .menuInner .menuImg.in .menuImgInner svg {
	animation: jump2 1200ms ease;
}

@keyframes jump2 {
	0%,100% { transform: translate(0,0) scale(1,1); }
	10% { transform: translate(0,0) scale(1.05,1); }
	30% { transform: translate(0,-12.5%) scale(.98,1); }
	40% { transform: translate(0,0) scale(1.08,1); }
	50% { transform: translate(0,0) scale(1,1); }
}


.menu .menuInner .menuImg .menuImgInner .menuImgTxt {
    font-size: 20px;
    line-height: 1;
	letter-spacing: .2em;
    margin: 0;
    position: absolute;
    left: -5%;
    bottom: 0;
    transform: rotate(90deg) translate(-100%, 100%);
    transform-origin: left bottom;
}

#td .menu .menuInner.season .menuImg .menuImgInner .menuImgTxt {
	color: #ffb400;
}
#td .menu .menuInner.chocolate .menuImg .menuImgInner .menuImgTxt {
	color: #da3540;
}
#td .menu .menuInner.matcha .menuImg .menuImgInner .menuImgTxt {
	color: #bcea2c;
}

.menu .menuInner .menuImg .menuImgInner .numbering {
    width: 15.5%;
    max-width: 124px;
    position: absolute;
    top: 0;
    right: -7.5%;
    margin: 0;
	transform-origin: center top;
	animation: burabura 1500ms ease infinite;
}

@keyframes burabura {
	from, 85%, to { transform: rotate(0); }
	12.5% { transform: rotate(3.6deg); }
	37.5% { transform: rotate(-3.6deg); }
	55% { transform: rotate(1.2deg); }
	75% { transform: rotate(-.8deg); }
}

.menu .menuInner .menuImg .bk {
	width: 125%;
	max-width: 1000px;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.menu .menuInner .menuTxt {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
}

.menu .menuInner .menuTxt .menuTxtInner {
	width: 100%;
	height: 100%;
	position: relative;
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtTitle {
	width: 100%;
    position: absolute;
    top: 10%;
    left: 0;
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtTitle .head {
    font-size: 20px;
	letter-spacing: .12em;
    margin: 0;
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtTitle .name {
    font-size: 66px;
    line-height: 1.348;
	letter-spacing: .12em;
    text-shadow: 4px 4px #fff;
    margin: 0;
	padding-top: 4%;
    margin-top: 4%;
    position: relative;
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtTitle .name span {
	display: block;
	font-size: 60%;
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtTitle .name:before {
	content: "";
    display: block;
    width: 15vw;
    max-width: 200px;
    height: calc((8 / 1360) * 100 * 1vw);
	max-height: 8px;
    border-radius: 10px;
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
}

.menu .menuInner.season .menuTxt .menuTxtInner .menuTxtTitle .name:before {
	background-color: #ffb400;
}
.menu .menuInner.chocolate .menuTxt .menuTxtInner .menuTxtTitle .name:before {
	background-color: #da3540;
}
.menu .menuInner.matcha .menuTxt .menuTxtInner .menuTxtTitle .name:before {
	background-color: #bcea2c;
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtTitle .price {
    font-size: 32px;
    line-height: 1;
	letter-spacing: .2em;
    margin: 3% auto 0;
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtSentence {
    position: absolute;
    right: 0;
    bottom: 4.8%;
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtSentence p {
	font-size: 18px;
	line-height: 2.1;
	letter-spacing: .12em;
	margin: 0;
}

/*----------------------------------------------------FOOTER*/

.footer {
	width: 100%;
	overflow: hidden;
	margin: 140px auto 0;
}

.footer h3 {
	width: 41.17%;
	max-width: 560px;
	margin: 0 auto;
}

.footer .mvMenu {
    display: flex;
    justify-content: space-between;
    width: 55%;
    max-width: 750px;
    position: relative;
    z-index: 10;
    margin: 0 auto -160px;
}

.footer .mvMenu .mvMenuInner {
	width: 27%;
}

/*----------------------------------------------------BATCH*/

.menu .menuInner .menuImg .batch {
	width: 22%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-169%, 55%);
    z-index: 10;
}


/*--------------------------------------------------------------------------------------

PC

--------------------------------------------------------------------------------------*/

@media screen and (max-width:1360px) {
	
/*----------------------------------------------------MV*/

#mv .mvMenu {
    margin-top: -5.5%;
}

#mv .mvInner .copy {
	font-size: calc((20 / 1360) * 100 * 1vw);
}

/*----------------------------------------------------LEAD*/

#lead {
    width: 100%;
    background-color: #c9f3f4;
    padding-top: 18%;
    margin-top: -15%;
}

#lead .leadInner p {
    font-size: calc((20 / 1360) * 100 * 1vw);
}

/*----------------------------------------------------MENU*/

.menu .menuInner .menuTxt .menuTxtInner .menuTxtTitle .head {
    font-size: calc((20 / 1360) * 100 * 1vw);
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtTitle .name {
    font-size: calc((66 / 1360) * 100 * 1vw);
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtTitle .price {
    font-size: calc((32 / 1360) * 100 * 1vw);
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtSentence p {
    font-size: calc((18 / 1360) * 100 * 1vw);
}

.menu .menuInner .menuImg .menuImgInner .menuImgTxt {
    font-size: calc((24 / 1360) * 100 * 1vw);
}


/*----------------------------------------------------FOOTER*/

.footer .mvMenu {
    margin: 0 auto -13.5%;
}

}


/*--------------------------------------------------------------------------------------

Tab

--------------------------------------------------------------------------------------*/

@media screen and (max-width:900px) {
	
/*----------------------------------------------------MV*/

#mv .mvInner .mvTitle {
    width: 56%;
    margin: 7% auto 0;
}

#mv .mvInner .mvTitle h1 picture {
	width: 100%;
}

#mv .mvInner .mvTitle h1 picture img {
	width: 100%;
}

#mv .mvInner .mvTitle .date {
    width: 27%;
    top: -2%;
    left: -1%;
}

#mv .mvInner .mvTitle .clippath {
    width: 95%;
}

#mv .mvInner .copy {
    font-size: calc((20 / 1360) * 135 * 1vw);
}

#mv .mvMenu {
    width: 72%;
}

#mv .mvMenu .mvMenuInner p,
#mv .mvMenu .mvMenuInner:hover p {
	transform: none;
    opacity: 1;
}

/*----------------------------------------------------LEAD*/

#lead {
    padding-top: 25%;
    margin-top: -20%;
}

#lead .leadInner p {
    font-size: calc((20 / 1360) * 135 * 1vw);
}

#lead .bags {
    width: 120px;
	padding: 8% 0 10%;
}

#lead .bags svg {
    width: 24px;
}

/*----------------------------------------------------MENU*/

.menu .menuInner {
    width: 70%;
}

.menu .menuInner + .menuInner {
    margin-top: 16%;
}

.menu .menuInner .menuImg {
    width: 100%;
	border-radius: 10vw;
}

.menu .menuInner .menuImg .menuImgInner {
    padding: 10% 0 12%;
}

.menu .menuInner .menuImg .menuImgInner figure {
    width: 45%;
    padding-top: 22%;
}

.menu .menuInner .menuImg .menuImgInner svg {
    width: 68%;
}

.menu .menuInner .menuImg .menuImgInner .menuImgTxt {
    font-size: calc((24 / 1360) * 135 * 1vw);
}

.menu .menuInner .menuTxt {
    height: auto;
    position: static;
    margin-top: 10%;
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtTitle {
    position: static;
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtSentence {
    position: static;
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtTitle .head {
    font-size: calc((20 / 1360) * 175 * 1vw);
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtTitle .name {
    font-size: calc((66 / 1360) * 135 * 1vw);
	padding-top: 6%;
    margin-top: 7%;
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtTitle .price {
    font-size: calc((32 / 1360) * 135 * 1vw);
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtSentence p {
    font-size: calc((18 / 1360) * 135 * 1vw);
    margin: 9% auto 0;
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtSentence p br {
	display: none;
}

/*----------------------------------------------------FOOTER*/

.footer {
    margin: 10% auto 0;
}

.footer h3 {
    width: 52%;
    margin: 0 auto 1%;
}

.footer .mvMenu {
    width: 72%;
}

}



/*--------------------------------------------------------------------------------------

SP

--------------------------------------------------------------------------------------*/

@media screen and (max-width:480px) {
	
#td {
    border: 6px solid #000;
}
	
/*----------------------------------------------------MV*/

#mv .mvInner .mvTitle {
    width: 74%;
    margin: 15% auto 0;
}

#mv .mvInner .mvTitle .date {
    width: 30%;
    top: -6%;
    left: -1%;
}

#mv .mvInner .copy {
    font-size: 3vw;
    top: -16%;
    right: 4%;
}

#mv .mvMenu {
	width: 70%;
    margin-top: 8%;
}

#mv .mvMenu .mvMenuInner {
    width: 30%;
}

#mv .mvMenu .mvMenuInner p {
    width: 95%;
    top: 44%;
    left: -45%;
}

/*----------------------------------------------------LEAD*/

#lead {
    padding-top: 30%;
}

#lead .leadInner p {
    width: 100%;
    font-size: 3.2vw;
    text-align: left;
    padding: 0 10%;
}

#lead .leadInner p br {
	display: none;
}

#lead .bags {
	width: 100px;
    padding: 12% 0 23%;
}

#lead .bags svg {
    width: 20px;
	height: 23px;
}


/*----------------------------------------------------MENU*/

.menu .menuInner {
    width: 100%;
}

.menu .menuInner + .menuInner {
    margin-top: 35%;
}

.menu .menuInner .menuImg {
    width: 85%;
}

.menu .menuInner .menuImg .menuImgInner .menuImgTxt {
    width: 100%;
    font-size: 3.5vw;
    text-align: left;
    transform: none;
    top: -10%;
    bottom: auto;
    left: 0;
}

.menu .menuInner .menuImg .menuImgInner .numbering {
    width: 18%;
    top: -10%;
    right: -3%;
    margin: 0;
}

.menu .menuInner .menuTxt {
	width: 80%;
    margin-top: 12%;
	margin-left: auto;
	margin-right: auto;
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtTitle .head {
    font-size: 4vw;
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtTitle .name {
    font-size: 7.5vw;
    padding-top: 6%;
    margin-top: 6%;
	text-shadow: 0.7vw 0.7vw #fff;
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtTitle .name span {
    margin-top: 2%;
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtTitle .price {
    font-size: 4.5vw;
    margin: 5% auto 0;
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtSentence p {
    font-size: 3.2vw;
	line-height: 2;
    margin: 8% auto 0;
}

/*----------------------------------------------------FOOTER*/

.footer {
    margin: 18% auto 0;
}

.footer h3 {
    width: 60%;
    margin: 0 auto 3%;
}

.footer .mvMenu {
    width: 70%;
}

.footer .mvMenu .mvMenuInner {
    width: 30%;
}

/*----------------------------------------------------BATCH*/

.menu .menuInner .menuImg .batch {
    width: 30%;
    transform: translate(62%, 242%);
}

}



/*----------------------------------------------------231107 brの空白を消す*/

/*.menu .menuInner .menuTxt .menuTxtInner .menuTxtSentence p{
    font-size: 0;
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtSentence p span{
    font-size: 18px;
    line-height: 2.1;
    letter-spacing: .12em;
    margin: 0;
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtSentence p br{
    display: block;
}


@media screen and (max-width:1360px) {

.menu .menuInner .menuTxt .menuTxtInner .menuTxtSentence p span{
    font-size: calc((18 / 1360) * 100 * 1vw);
}
}


@media screen and (max-width:900px) {

.menu .menuInner .menuTxt .menuTxtInner .menuTxtSentence p{
    font-size: 0;
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtSentence p span{
    font-size: calc((18 / 1360) * 135 * 1vw);
    margin: 9% auto 0;
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtSentence p br{
    display: none;
}
}


@media screen and (max-width:480px) {

.menu .menuInner .menuTxt .menuTxtInner .menuTxtSentence p{
    font-size: 0;
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtSentence p span{
    font-size: 3.2vw;
    line-height: 2;
    margin: 8% auto 0;
}
}*/


/*@media screen and (max-width:900px) {

.menu .menuInner .menuTxt .menuTxtInner .menuTxtSentence p br{
    content: '';
}

.menu .menuInner .menuTxt .menuTxtInner .menuTxtSentence p br:after{
    margin-right: -.333em;
　　content: '';
}
}*/


@media screen and (max-width:900px) {
.menu .menuInner .menuTxt .menuTxtInner .menuTxtSentence p span{
    /*display: inline;*/
    white-space: pre-line;
}
}

@media screen and (min-width:901px) {
.menu .menuInner .menuTxt .menuTxtInner .menuTxtSentence p span{
    display: block;
}
}