@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@300..900&family=Yuji+Syuku&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@500;600&display=swap');



.bgWhite {
    background: #fff;
}

.bgw01 {
    padding: 8px 0 50px 0;
}

#wrapper {
    margin-bottom: 0;
}

.pc-none {
    display: none;
}

.sp-none {
    display: block;
}

#malaTanmen a:hover{
    text-decoration: none;
}

#malaTanmen ul, #malaTanmen p, #malaTanmen dl{ margin-bottom: 0;}
#malaTanmen dd{ margin-left: 0;}

#malaTanmen {
	width: 100%;
    overflow: hidden;
	position: relative;
	color: #000;
	font-family: "Shippori Mincho B1", serif;
    letter-spacing: 0.15em;
	font-size: 16px;
	font-weight: normal;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
	background: url("/images/menu/mala-tanmen/main-bg.jpg") center center / 100% repeat;
}

#malaTanmen img { 
    width: 100%; 
    vertical-align: bottom; 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden;
}

#malaTanmen .deco {
    position: absolute;
}


/*--- mv ---*/
#malaTanmen .mv {
    width: 100%;
    position: relative;
    background: url("/images/menu/mala-tanmen/mv-bg2.jpg") top center / repeat-x;
}

#malaTanmen .mv:before {
    content: '';
    display: block;
    width: 100%;
    height: 6.5%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("/images/menu/mala-tanmen/line.svg") top center / 30px 13px repeat-x;
    margin: 0 auto;
    z-index: 1;
}


#malaTanmen .mv .mvInner {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    background: url("/images/menu/mala-tanmen/mv-bg.jpg") top center / 100% repeat-x;
}

#malaTanmen .mv .mvInner .title {
    max-width: 796px;
    width: 53%;
    position: absolute;
    top: 50%;
    left: 4.5%;
    transform: translateY(-50%);
    z-index: 2;
    animation: titlein 700ms cubic-bezier(0.62, 0.04, 0.58, 1) both;
}

#malaTanmen .mv .mvInner .day {
    max-width: 180px;
    width: 12%;
    position: absolute;
    top: 13%;
    left: 4.5%;
    z-index: 3;
    animation: titlein 700ms cubic-bezier(0.62, 0.04, 0.58, 1) both;
    animation-delay: .3s;
}

@keyframes titlein {
    from { opacity: 0;}
    to { opacity: 1; }
    }

#malaTanmen .mv .mvInner .mainImg {
    max-width: 876px;
    width: 58%;
    position: relative;
    margin-left: 40%;
    z-index: 1;
}

#malaTanmen .mv .mvInner .copy {
    max-width: 122px;
    width: 8%;
    position: absolute;
    top: 6%;
    right: 3%; 
    z-index: 2;
    animation: subtitle 700ms cubic-bezier(0.62, 0.04, 0.58, 1) both;
    animation-delay: .5s;
}

@keyframes subtitle {
  0% {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

#malaTanmen .mv .mvInner .illust {
    max-width: 209px;
    width: 14%;
    position: absolute;
    top: -9.8%;
    left:-1.5%;
}

#malaTanmen .mv .mvInner .deco1 {
    max-width: 179px;
    width: 11.9%;
    position: absolute;
    left: -2.3%;
    bottom: 15%;
}

#malaTanmen .mv .mvInner .deco4 {
    max-width: 120px;
    width: 8%;
    position: absolute;
    right: -1%;
    bottom: 26%;
}

#malaTanmen .mv .mvInner .deco5 {
    max-width: 240px;
    width: 16%;
    position: absolute;
    top:-3%;
    left: 42%;
}

#malaTanmen .mv .mvInner .kumo {
    max-width: 124px;
    width: 8.2%;
    position: absolute;
    right: 5.5%;
    bottom: 20%;
    z-index: 2;
}

/*--- main ---*/
.main {
    position: relative;
    padding-bottom: 100px;
    margin-bottom: 100px;
}

.main:before {
    content: '';
    display: block;
    width: 100%;
    height: 13px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("/images/menu/mala-tanmen/line.svg") top center / 30px 13px repeat-x;
    margin: 0 auto;
    z-index: 1;
}

.main .mainIn {
    max-width: 1500px;
    position: relative;
    margin: 0 auto;
}

.main .mainIn .maindeco1 {
    max-width: 240px;
    width: 16%;
    position: absolute;
    top: 33%;
    left: -9%;
}

.main .mainIn .maindeco2 {
    max-width: 190px;
    width: 12.6%;
    position: absolute;
    top: 5%;
    right: -4%;
}

.main .mainIn .maindeco3 {
    max-width: 166px;
    width: 11%;
    position: absolute;
    top: 45%;
    left: -3%;
}

.main .mainIn .maindeco4 {
    max-width: 240px;
    width: 16%;
    position: absolute;
    top: 20%;
    right: -9%;
}

/*--- menu ---*/
#malaTanmen .menu {
    max-width:1020px;
    width: 85%;
    margin: 50px auto 0;
}

#malaTanmen .menu .decoIcon {
    width: 33px;
    margin: 0 auto 15px;
}

#malaTanmen .menu .mainImg {
   position: relative; 
}

#malaTanmen .menu .mainImg .imgBox {
   margin-bottom: 40px;
}

#malaTanmen .menu .mainImg .imgBox .img {
   position: relative;
   margin-bottom: 40px;
}

#malaTanmen .menu .mainImg .imgBox .img .mainTopping {
    max-width: 240px;
    width:23.5%;
    position: absolute;
    right: 4.5%;
    bottom: 9%;
}

#malaTanmen .menu .mainImg .imgBox .img .comment {
    max-width: 227px;
    width:22.2%;
    position: absolute;
    left: -7%;
    top: 42%;
}

#malaTanmen .menu .mainImg .imgBox .img .kumo1 {
    max-width: 124px;
    width:12%;
    position: absolute;
    left: -4%;
    top: 18%;
}

#malaTanmen .menu .mainImg .imgBox .img .kumo2 {
    max-width: 124px;
    width:12%;
    position: absolute;
    right: -4.5%;
    top: 48%;
}

#malaTanmen .menu .mainImg .imgBox .name {
    color: #fff;
    font-size: 36px;
    text-align: center;
    margin-bottom: 10px;
}

#malaTanmen .menu .mainImg .imgBox .name span {
    display: block;
    font-size: 28px;
}

#malaTanmen .menu .mainImg .imgBox .price {
    color: #fff;
    font-size: 25px;
    text-align: center;
    margin-bottom: 50px;
}

#malaTanmen .menu .mainImg .imgBox .price span {
    font-size: 80%;
}

#malaTanmen .menu .mainImg .imgBox .price .caution {
    font-size: 12px;
    line-height: 1.5;
    display: block;
    margin-top: 20px;
    position: relative;
    z-index: 1;
}

#malaTanmen .menu .spicy {
    max-width: 660px;
    width: 85%;
    margin: 0 auto 35px;
}

#malaTanmen .menu .maroni {
    max-width: 660px;
    width: 85%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border: 1px solid #e8c872;
    padding: 34px;
    margin: 0 auto;
}

#malaTanmen .menu .maroni .maroniImgBox {
    width: 40%;
}

#malaTanmen .menu .maroni .maroniTxtBox {
    text-align: left;
    width: 54%;
    color: #fff;
}

#malaTanmen .menu .maroni .maroniTxtBox .title {
    font-size: 18px;
    margin-bottom: 10px;
}

#malaTanmen .menu .maroni .maroniTxtBox .txt {
    font-size: 15px;
    margin-bottom: 20px;
}

#malaTanmen .menu .maroni .maroniTxtBox .caution {
    font-size: 12px;
}

/*--- topping ---*/
#malaTanmen .topping {
    max-width:920px;
    width: 85%;
    position: relative;
    background: url("/images/menu/mala-tanmen/topping-bg-pc.png") top center / 100% repeat;
    padding: 90px 90px 55px;
    margin: 0 auto 0;
    z-index: 1;
}

#malaTanmen .topping:before {
    content: "";
    display: block;
    width: 100%;
    height:100%;
    background: url("/images/menu/mala-tanmen/topping-bg-top-pc.png") top center / 100% no-repeat;
    position: absolute;
    top:0;
    left: 0;
}

#malaTanmen .topping:after {
    content: "";
    display: block;
    width: 100%;
    height:100%;
    background: url("/images/menu/mala-tanmen/topping-bg-bottom-pc.png") bottom center / 100% no-repeat;
    position: absolute;
    top:0;
    left: 0;
}

#malaTanmen .topping .title {
    max-width:435px;
    width: 49%;
    position: relative;
    margin: -150px auto 50px;
}

#malaTanmen .topping .mainImg {
    max-width: 716px;
    margin: 0 auto 50px;
}

#malaTanmen .topping .list {
    max-width: 775px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}

#malaTanmen .topping .list li {
    width: calc((100% - 6.4%) / 5);
    color: #fff;
    letter-spacing: normal;
    margin-right: 1.6%;
    margin-bottom: 35px;
}

#malaTanmen .topping .list li:nth-child(5n) {
    margin-right: 0;
}

#malaTanmen .topping .list li .img {
    margin-bottom: 15px;
    
}

#malaTanmen .topping .list li .txt {
    font-size: 16px;
}

#malaTanmen .topping .list li .price {
    font-size: 14px;
}

#malaTanmen .topping .list li .price span {
    font-size: 80%;
}

#malaTanmen .topping .kumo3 {
    max-width: 124px;
    width:12%;
    position: absolute;
    left: -4%;
    top: 49%;
}

#malaTanmen .topping .kumo4 {
    max-width: 124px;
    width:12%;
    position: absolute;
    right: -4.5%;
    top: 9%;
}

#malaTanmen .topping .kumo5 {
    display: none;
}


.main .mainIn .maindeco3 {
    width: 22%;
    top: inherit;
    left: -3%;
    bottom: -5%;
}




/*-------------------------------------------
Animation
-------------------------------------------*/
.clip-text-ani.out {
    opacity: 0;
    position:relative;
    display: block;
    text-transform: uppercase;
    clip-path: inset(0 100% 100% 0);
    transition:all .9s ease;
    }

.clip-text-ani.out.in {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    }

.delay{transition-delay: .5s;}




/*-------------------------------------------
ONLY PC & HOVER
-------------------------------------------*/
@media only screen and (min-width: 769px){

#malaTanmen img,
#malaTanmen #mv {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	image-rendering: crisp-edges;
	image-rendering: -webkit-optimize-contrast;
}	
	
}




@media only screen and (min-width: 1500px){
/*--- mv ---*/
#malaTanmen .mv {
    background: url("/images/menu/mala-tanmen/mv-bg2.jpg") top center / 1500px 700px repeat-x;
}
}

/*-------------------------------------------
Tablet
-------------------------------------------*/
@media only screen and (max-width: 1080px){



}

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

}



/*-------------------------------------------
SP
-------------------------------------------*/
@media only screen and (max-width: 600px){
#malaTanmen .mv:before {
    height: 6.5%;
    background: url("/images/menu/mala-tanmen/line.svg") top center / 23px 10px repeat-x;
}


#malaTanmen .mv .mvInner {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    background: url("/images/menu/mala-tanmen/mv-bg-sp.jpg") top center / 100% no-repeat;
}

#malaTanmen .mv .mvInner .title {
    width: 95%;
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    padding: 55px 0 50px;
    margin: 0 auto;
    z-index: 3;
}

#malaTanmen .mv .mvInner .mainImg {
    width: 90%;
    margin: 0 auto;
}

#malaTanmen .mv .mvInner .day {
    width: 35%;
    top: 44%;
    left: 2.5%;
}

#malaTanmen .mv .mvInner .copy {
    width: 21%;
    top: 44%;
    right: 5%;
}

#malaTanmen .mv .mvInner .deco5 {
    width: 37%;
    top: 45%;
    left: 55%;
}

#malaTanmen .mv .mvInner .illust {
    width: 35%;
    top: -9.8%;
    left: -1.5%;
}

#malaTanmen .mv .mvInner .deco1 {
    width: 26%;
    top: -2%;
    left: 62%;
    bottom: inherit;
}

#malaTanmen .mv .mvInner .deco4 {
    width: 20%;
    right: inherit;
    left: -1%;
    bottom: 28%;
}

#malaTanmen .mv .mvInner .kumo {
    width: 18%;
    right: 2%;
    bottom: 13%;
}

#malaTanmen .mv:before {
    bottom: -80px;
    height: 70px;
    background: url(/images/menu/mala-tanmen/line.svg) top center / 23px 10px repeat-x;
}

.main .mainIn .maindeco2 {
    max-width: 190px;
    width: 28%;
    position: absolute;
    top: 0;
    right: -6%;
}

#malaTanmen .menu .decoIcon {
    margin: 0 auto 60px;
}

#malaTanmen .menu .mainImg .imgBox .img .comment {
    max-width: 400px;
    width: 85%;
    left: -7%;
    top: -13%;
}

#malaTanmen .menu .mainImg .imgBox .img .mainTopping {
    width: 80%;
    right: -4%;
    bottom: -9%;
}

#malaTanmen .menu .mainImg .imgBox .img .kumo1 {
    width: 25%;
    left: -4%;
    top: 22%;
}

#malaTanmen .menu .mainImg .imgBox .img .kumo2 {
    width: 22%;
    right: -4.5%;
    top: 55%;
}

#malaTanmen .menu .mainImg .imgBox .name {
    font-size: 30px;
    margin-top: 50px;
}

#malaTanmen .menu .mainImg .imgBox .name span {
    font-size: 22px;
}


#malaTanmen .menu .mainImg .imgBox .price {
    font-size: 18px;
}

#malaTanmen .menu .spicy,
#malaTanmen .menu .maroni {
    position: relative;
    width: 100%;
    z-index: 1;
}

#malaTanmen .menu .maroni {
    display: block;
}

#malaTanmen .menu .maroni .maroniImgBox,
#malaTanmen .menu .maroni .maroniTxtBox {
    width: 100%;
}

#malaTanmen .menu .maroni .maroniImgBox {
    margin-bottom: 20px;
}

#malaTanmen .menu .maroni .maroniTxtBox .title {
    text-align: center;
}

#malaTanmen .topping .title {
    max-width: 900px;
    width: 100%;
    margin: -80px auto 30px;
}

#malaTanmen .topping {
    background: url(/images/menu/mala-tanmen/topping-bg-sp.png) top center / 100% repeat;
    padding: 25px 25px 10px;
}

#malaTanmen .topping:before {
    background: url(/images/menu/mala-tanmen/topping-bg-top-sp.png) top center / 100% no-repeat;
}

#malaTanmen .topping:after {
    background: url(/images/menu/mala-tanmen/topping-bg-bottom-sp.png) bottom center / 100% no-repeat;
}

#malaTanmen .topping .list li {
    width: calc((100% - 3%) / 2);
    margin-right: 1.5%;
}

#malaTanmen .topping .list li:nth-child(5n) {
    margin-right: 1.5%;
}

#malaTanmen .topping .list li:nth-child(2n) {
    margin-right: 0;
}

#malaTanmen .topping .kumo3 {
    width: 22%;
    top: 49%;
}

#malaTanmen .topping .kumo4 {
    width: 22%;
    right: -4%;
    top: 5%;
}

#malaTanmen .topping .kumo5 {
    position: absolute;
    display: block;
    width: 22%;
    right: -4%;
    bottom: 5%;
}

.main .mainIn .maindeco4 {
    width: 33%;
    top: -5.5%;
    right: -13%;
}

.main .mainIn .maindeco1 {
    width: 30%;
    top: 40%;
    left: -9%;
}

}