@charset "utf-8";


#main{ position: relative;  }
#main .bg-wrap{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #ffffff; overflow: hidden; pointer-events: none; }
#main .content{ width: 100%; max-width: 750px; overflow: hidden; padding-bottom: 0; position: relative; }
#main .contents-wrap{ width: 100%; position: relative; padding: 12% 0; }
#main .contents-wrap *{ color: #231815; }
#main .contents-wrap * span{ color: inherit; }
#main .main-ttl{ width: 100%; margin: 0 auto; position: relative; z-index: 500; }
#main .cake-list{ width: 80%; margin: 0 auto; padding: 10% 0 0; }
#main .cake-list .cake-item{ position: relative; }
#main .cake-list .cake-item .cake-num{ width: 18.2353%; position: absolute; left: 0; top: 0; }
#main .cake-list .cake-item .bubble{ width: 21.57%; position: absolute; left: 0; top: 0; margin: 80px -7%; z-index: 5; }
#main .cake-list .cake-item .photo{ width: 125%; margin: 5% 0 0 -12.5%; }
#main .cake-list .cake-item .product{ margin-top: 5%; }
#main .cake-list .cake-item .product .limited{ color: #e60012; }
#main .cake-list .cake-item .product .model{ font-size: 80%; display: inline-block; padding: 0 10px; border: 1px solid #231815; }
#main .cake-list .cake-item .product .num{ font-size: 120%; }
#main .cake-list .cake-item .product .s-size{ font-size: 80%; }
#main .cake-list .cake-item .product .alcohol{ font-size: 80%; display: inline-block; padding: 0 10px; background-color: #c09c40; color: #ffffff; border-radius: 5px; }
#main .cake-list .cake-item .product+.txt{ margin-top: 3%; }
#main .cake-list .cake-item .note{ /*margin-top: 5%;*/ padding: 7% 0; text-align: center; background-color: rgba(255,255,255,0.3); }
#main .cake-list .cake-item .note .list-item{ display: inline-block; text-align: left; margin-top: 5%; }
#main .cake-list .cake-item .note .list-item .item{ text-indent: -1em; padding-left: 1em; }
#main .cake-list .cake-item .navi{ margin-top: 5%; }
#main .cake-list .cake-item .navi a{ display: block; border: 2px solid #000000; text-decoration: none; padding: 10px 0; text-align: center; border-radius: 37px; position: relative; line-height: 1.5; background-color: #ffffff; }
/*#main .cake-list .cake-item .navi a::before{ content: ""; position: absolute; right: 15px; top: 50%; border: solid transparent; border-width: 10px 0 10px 15px; border-left-color: #231815; transform: translateY(-50%); }*/
#main .cake-list .cake-item .navi a .slim{ display: block; transform: scaleX(0.7); transform-origin: 0 0; width: 142.86%; }
#main .cake-list .cake-item .navi a .icon{ width: 1em; display: inline-block; vertical-align: middle; line-height: 0; }
#main .cake-list .cake-item .navi a .icon img{ vertical-align: middle; }
#main .cake-list .cake-item .etc-info{ margin-top: 2%; display: block; background-color: #727171; color: #ffffff; text-decoration: none; padding: 10px 0; text-align: center; border-radius: 37px; }
#main .cake-list .cake-item .etc-info .s-size{ font-size: 80%; }
#main .cake-list .cake-item .hide-body+.etc-info{ margin-top: 5%; }
#main .cake-list .cake-item .etc-info .icon{ background-color: #ffffff; color: #333333; width: 1.5em; display: inline-block; border-radius: 5px; text-align: center; }
#main .cake-list .cake-item .etc-info .icon+.icon{ margin-left: 2px; }
#main .cake-list .cake-item .etc-info2{ margin-top: 2%; display: block; background-color: #ffffff; color: #333333; text-decoration: none; padding: 8px 0; text-align: center; border-radius: 37px; border: 2px solid #333333; }
#main .cake-list .cake-item .etc-info2 .icon{ background-color: #333333; color: #ffffff; width: 1.5em; display: inline-block; border-radius: 5px; text-align: center; }
#main .cake-list .cake-item .etc-info2 .icon+.icon{ margin-left: 2px; }
#main .cake-list .cake-item .etc-info2 .s-size{ font-size: 80%; }
#main .cake-list .cake-item .photo-s{ margin-top: 5%; }
#main .cake-list .cake-item .split-view{ display: -ms-flex; display: flex; justify-content: center; margin-top: 5%; }
#main .cake-list .cake-item .split-view > *+*{ margin-left: 4.66%; }
#main .cake-list .cake-item .split-view .person{ width: 30.67%; }
#main .cake-list .cake-item .split-view .person .caption{ white-space: nowrap; }
#main .cake-list .cake-item .split-view .place{ width: 64.67%; }
#main .cake-list .cake-item .hide-body{ height: 180px; overflow: hidden; position: relative; margin-top: 5%; }
#main .cake-list .cake-item .hide-body.open{ height: auto; }
#main .cake-list .cake-item .hide-body .more{ text-align: center; position: absolute; left: 0; bottom: 0; width: 100%; padding: 70px 0 50px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 38%); cursor: pointer; text-decoration: underline; }
#main .cake-list .cake-item .hide-body .more:hover{ text-decoration: none; }

#main .cake-list .cake-item .reservation{ background-color: #c09c40; margin-top: 15%; position: relative; border-radius: 20px; }
#main .cake-list .cake-item .reservation::before{ content: ""; position: absolute; left: 50%; bottom: 100%; width: 19.642%; padding-top: 9.821%; background-color: #c09c40; transform: translateX(-50%); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
#main .cake-list .cake-item .reservation::after{ content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: solid transparent; border-width: 15px 15px 0 15px; border-top-color: #c09c40; }
#main .cake-list .cake-item .reservation .reservation-bubble{ width: 12.1448%; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%) translate(-10%,10%); line-height: 0; }
#main .cake-list .cake-item .reservation .reservation-head{ text-align: center; color: #ffffff; padding: 3% 0; position: relative; cursor: pointer; }
#main .cake-list .cake-item .reservation .reservation-head::before{ content: ""; position: absolute; right: 0; top: 50%; width: 3%; padding-top: 3%; border: solid #ffffff; border-width: 0 2px 2px 0; transform: translateY(-25%) translateY(-50%) rotate(45deg); margin-right: 4%; }
#main .cake-list .cake-item .reservation .reservation-hide{ overflow: hidden; height: 0; opacity: 0; }
#main .cake-list .cake-item .reservation .list-navi{ padding: 0 5% 5%; }
#main .cake-list .cake-item .reservation .list-navi .navi{ margin-top: 0; }
#main .cake-list .cake-item .reservation .list-navi .navi:nth-child(n+2){ margin-top: 2%; }
#main .cake-list .cake-item .reservation .list-navi a{ border: none; position: relative; }
#main .cake-list .cake-item .reservation .list-navi a::before{ content: ""; position: absolute; right: 0; top: 50%; width: 3%; padding-top: 3%; border: solid #000000; border-width: 2px 2px 0 0; transform: translateY(-50%) rotate(45deg); margin-right: 5%; }
#main .cake-list .cake-item .reservation .caption{ padding: 0 5% 5%; color: #ffffff; }
#main .cake-list .cake-item .reservation .caption .icon{ background-color: #ffffff; color: #333333; width: 1.5em; display: inline-block; border-radius: 5px; text-align: center; }
#main .cake-list .cake-item .reservation.show .reservation-head{ cursor: auto; }
#main .cake-list .cake-item .reservation.show .reservation-head::before{ display: none; }
#main .cake-list .cake-item .reservation.show .reservation-hide{ height: auto; opacity: 1; transition: opacity 0.5s; }



@media screen and (max-width: 480px){ /*480px以下のcss*/
	#main .bg-wrap::before,
	#main .bg-wrap::after{ background-size: 30vw auto; }
	#main .bg-wrap::before{ margin-left: 43%; }
	#main .bg-wrap::after{ margin-right: 40%; }
	#main .cake-list .cake-item .cake-num{ font-size: 10vw; }
	#main .cake-list .cake-item .bubble{ margin-top: 12vw; }
	#main .cake-list .cake-item .hide-body{ height: 25vw; }
	#main .cake-list .cake-item .hide-body .more{ padding: 12vw 0 8vw; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 38%); }
	#main .cake-list .cake-item .reservation{ border-radius: 15px; }
	#main .cake-list .cake-item .reservation::after{ border-width: 10px 10px 0 10px; }
}