@charset "utf-8";

#main .content{ background-color: #acdedf; position: relative;}
#main .content::before{ content: ""; width: 100%; padding-top: 470.5882%; background: linear-gradient(to bottom, #63c1c3 30%, #acdedf 100%); position: absolute; left: 0; top: 0; }
#main .content .anchor{ position: absolute; }
#main .content img{ width: 100%; max-width: auto; height: auto; }
#main .content .content-body{ position: relative; z-index: 10; }
#main .content .content-body .opening{ position: relative; width: 100%; height: 100%; padding-top: 171.1744%; background-color: #3e0000; z-index: 500; }
#main .content .content-body .opening img{ width: 100%; height: auto; }
#main .content .content-body .opening .bg01{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 227.5204%; pointer-events: none; }
#main .content .content-body .opening .bg02{ position: absolute; left: 50%; top: 0; width: 201.7778%; transform: translateX(-50%); margin-top: 42.6666%; }
#main .content .content-body .opening .deco01{ position: absolute; left: 50%; top: 0; width: 89.9730%; transform: translateX(-50%); margin-top: 8.6666%; }
#main .content .content-body .opening .txt{ position: absolute; left: 50%; top: 0; width: 81.1111%; transform: translateX(-50%); margin-top: 27.591%; }
#main .content .content-body .opening .chara{ position: absolute; left: 50%; top: 0; width: 84.6666%; transform: translateX(-50%); margin-top: 60.8769%; }
#main .content .content-body .content-box{ height: 0; opacity: 0; overflow: hidden; }
#main .content .content-body .content-box.active{ padding-bottom: 20%; opacity: 1; height: auto; }
#main .content .content-body .kv .date{ margin-top: 8%; }
#main .content .content-body .intro{ margin-top: 15.8824%; position: relative; }
#main .content .content-body .intro .txt{ font-size: 1.1176rem; line-height: 1.8686; color: #ffffff; text-align: center; margin-top: 4%; }
#main .content .content-body .intro .deco{ position: absolute; left: 0; bottom: 0; width: 100%; margin-bottom: -12.3529%; pointer-events: none; }
#main .content .content-body .note{ margin: 16.4705% auto 0; width: 87.0588%; position: relative; }
#main .content .content-body .note .bg,
#main .content .content-body .note .bg img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#main .content .content-body .note .deco{ position: absolute; left: 0; top: 100%; margin-top: -3.3784%; width: 100%; }
#main .content .content-body .note .inner-body{ width: 87.8378%; margin: 0 auto; padding: 6.7567% 0 8.7837%; position: relative; z-index: 10; }
#main .content .content-body .note .inner-body .txt{ font-size: 1rem; line-height: 1.5294; color: #ffffff; text-align: center; margin-top: 5%; }
#main .content .content-body .note .inner-body .txt .icon{ display: inline-block; font-size: 80%; background-color: #0068b7; padding: 2px 7px; border-radius: 12px; }
#main .content .content-body .note .inner-body .caption{ font-size: 0.7692rem; line-height: 1.5; color: #ffffff; text-align: center; margin-top: 5%; }
#main .content .content-body .note .inner-body .navi{ margin-top: 6%; }
#main .content .content-body .note .inner-body .navi a{ display: block; }
#main .content .content-body .note .inner-body .date{ font-size: 0.9411rem; line-height: 1.5; color: #ffffff; text-align: center; margin-top: 5%; }
#main .content .content-body .note .inner-body .etc{ font-size: 0.9411rem; line-height: 1.5; color: #fff000; margin-top: 5%; }
#main .content .content-body .catalog-bnr{ width: 83.3333%; margin: 10.5882% auto 0; }
#main .content .content-body .guide-body{ width: 83.3333%; margin: 2.9411% auto 0; }
#main .content .content-body .guide-body .head{ transition: opacity 0.5s; cursor: pointer; position: relative; }
#main .content .content-body .guide-body .head:hover{ opacity: 0.7; }
#main .content .content-body .guide-body .head .icon{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 5.6738%; padding-top: 5.6738%; margin-right: 4.2553%; }
#main .content .content-body .guide-body .head .icon::before,
#main .content .content-body .guide-body .head .icon::after{ content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background-color: #30adaf; }
#main .content .content-body .guide-body .head .icon::before{ width: 100%; height: 1px; }
#main .content .content-body .guide-body .head .icon::after{ width: 1px; height: 100%; }
#main .content .content-body .guide-body.active .head .icon::after{ display: none; }
#main .content .content-body .guide-body .acordion{ height: 0; opacity: 0; overflow: hidden; transition: opacity 0.5s; }
#main .content .content-body .guide-body.active .acordion{ height: auto; opacity: 1; }
#main .content .content-body .guide-body .acordion .list-item{ padding: 7.0922% 4.9645%; background: rgba(255,255,255,0.5); }
#main .content .content-body .guide-body .acordion .list-item .item:nth-child(n+2){ margin-top: 5%; }
#main .content .content-body .guide-body .acordion .list-item .item a{ display: block; color: #000000; font-size: 1rem; text-decoration: none; font-weight: bold; position: relative; padding-left: 3%; }
#main .content .content-body .guide-body .acordion .list-item .item a::before{ content: ""; position: absolute; left: 0; top: 50%; width: 1.4184%; padding-top: 1.4184%; border-radius: 50%; background-color: #000000; transform: translateY(-50%); }
#main .content .content-body .chocoland{ margin-top: 15%; }
#main .content .content-body .chocoland .list-item .item{ background: center 0 no-repeat; background-size: 100% 100%; position: relative; border-top: 1px solid transparent; }
#main .content .content-body .chocoland .list-item .item:nth-child(n+2){ margin-top: -1px; }
#main .content .content-body .chocoland .list-item .item:nth-child(2n+2){ background-image: url(../image/top/list-bg02.jpg); padding-bottom: 125.7778%; }
#main .content .content-body .chocoland .list-item .item:nth-child(2n+1){ background-image: url(../image/top/list-bg03.jpg); padding-bottom: 125.7778%; }
#main .content .content-body .chocoland .list-item .item:nth-child(1){ background-image: url(../image/top/list-bg01.jpg); padding-bottom: 132.8889%; }
#main .content .content-body .chocoland .list-item .item:nth-last-child(1):nth-child(even){ background-image: url(../image/top/list-bg04.jpg); padding-bottom: 132.8889%; }
#main .content .content-body .chocoland .list-item .item:nth-last-child(1):nth-child(odd){ background-image: url(../image/top/list-bg04_2.jpg); padding-bottom: 132.8889%; }
#main .content .content-body .chocoland .list-item .item11:nth-child(n){ padding-bottom: 150.7778%; }
#main .content .content-body .chocoland .list-item .item16:nth-child(n){ padding-bottom: 145.7778%; }
#main .content .content-body .chocoland .list-item .item .deco{ position: absolute; top: 0; left: 0; width: 100%; z-index: 10; }
#main .content .content-body .chocoland .list-item .item01 .deco{ margin-top: 9.3333%; }
#main .content .content-body .chocoland .list-item .item02 .deco{ margin-top: -16.2222%; }
#main .content .content-body .chocoland .list-item .item03 .deco{ margin-top: -18.8888%; }
#main .content .content-body .chocoland .list-item .item04 .deco{ margin-top: -9.7777%; }
#main .content .content-body .chocoland .list-item .item05 .deco{ margin-top: 7.5555%; }
#main .content .content-body .chocoland .list-item .item06 .deco{ margin-top: 2.6666%; }
#main .content .content-body .chocoland .list-item .item07 .deco{ margin-top: -20%; }
#main .content .content-body .chocoland .list-item .item08 .deco{ margin-top: -23.3333%; }
#main .content .content-body .chocoland .list-item .item09 .deco{ margin-top: -21%; }
#main .content .content-body .chocoland .list-item .item10 .deco{ margin-top: -1.7777%; }
#main .content .content-body .chocoland .list-item .item11 .deco{ margin-top: 15.4445%; }
#main .content .content-body .chocoland .list-item .item12 .deco{ margin-top: -5.7777%; }
#main .content .content-body .chocoland .list-item .item13 .deco{ margin-top: -7.5555%; }
#main .content .content-body .chocoland .list-item .item14 .deco{ margin-top: -14%; }
#main .content .content-body .chocoland .list-item .item15 .deco{ margin-top: 6.6666%; }
#main .content .content-body .chocoland .list-item .item16 .deco{ margin-top: 15.4444%; }
#main .content .content-body .chocoland .list-item .item17 .deco{ top: auto; bottom: 0; margin-bottom: 10%; }
#main .content .content-body .chocoland .list-item .item .photo{ position: absolute; top: 0; left: 0; z-index: 5; }
#main .content .content-body .chocoland .list-item .item01 .photo{ margin-top: 16.6666%; }
#main .content .content-body .chocoland .list-item .item02 .photo{ margin-top: 1.3333%; }
#main .content .content-body .chocoland .list-item .item03 .photo{ margin-top: 0.4444%; }
#main .content .content-body .chocoland .list-item .item04 .photo{ margin-top: 8.4444%; }
#main .content .content-body .chocoland .list-item .item05 .photo{ margin-top: 16.6666%; }
#main .content .content-body .chocoland .list-item .item06 .photo{ margin-top: 10.4444%; }
#main .content .content-body .chocoland .list-item .item07 .photo{ margin-top: -4%; }
#main .content .content-body .chocoland .list-item .item08 .photo{ margin-top: 4%; }
#main .content .content-body .chocoland .list-item .item09 .photo{ margin-top: 10%; }
#main .content .content-body .chocoland .list-item .item10 .photo{ margin-top: 10.8888%; }
#main .content .content-body .chocoland .list-item .item11 .photo{ margin-top: 32.3333%; }
#main .content .content-body .chocoland .list-item .item12 .photo{ margin-top: 14.4444%; }
#main .content .content-body .chocoland .list-item .item13 .photo{ margin-top: 6.6666%; }
#main .content .content-body .chocoland .list-item .item14 .photo{ margin-top: 5.7777%; }
#main .content .content-body .chocoland .list-item .item15 .photo{ margin-top: 9.3333%; }
#main .content .content-body .chocoland .list-item .item16 .photo{ margin-top: 32.4444%; }
#main .content .content-body .chocoland .list-item .item .photo-s{ position: absolute; top: 0; left: 0; z-index: 20; width: 28.4444%; margin: 79.7778% 0 0 61.8055%; }
#main .content .content-body .chocoland .list-item .item .navi{ width: 88.4444%; position: absolute; top: 0; left: 0; z-index: 10; margin-left: 5.7778%; }
#main .content .content-body .chocoland .list-item .item .navi a{ display: block; line-height: 0; }
#main .content .content-body .chocoland .list-item .item01 .navi{ margin-top: 89.5555%; }
#main .content .content-body .chocoland .list-item .item02 .navi{ margin-top: 81.5555%; }
#main .content .content-body .chocoland .list-item .item03 .navi{ margin-top: 91.3333%; }
#main .content .content-body .chocoland .list-item .item04 .navi{ margin-top: 91.3333%; }
#main .content .content-body .chocoland .list-item .item05 .navi{ margin-top: 104.4444%; }
#main .content .content-body .chocoland .list-item .item06 .navi{ margin-top: 77.4444%; }
#main .content .content-body .chocoland .list-item .item07 .navi{ margin-top: 85.2222%; }
#main .content .content-body .chocoland .list-item .item08 .navi{ margin-top: 84.2222%; }
#main .content .content-body .chocoland .list-item .item09 .navi{ margin-top: 95.1111%; }
#main .content .content-body .chocoland .list-item .item10 .navi{ margin-top: 104.8888%; }
#main .content .content-body .chocoland .list-item .item11 .navi{ margin-top: 115.3333%; }
#main .content .content-body .chocoland .list-item .item12 .navi{ margin-top: 90%; }
#main .content .content-body .chocoland .list-item .item13 .navi{ margin-top: 90%; }
#main .content .content-body .chocoland .list-item .item14 .navi{ margin-top: 94.4444%; }
#main .content .content-body .chocoland .list-item .item15 .navi{ margin-top: 101.3333%; }
#main .content .content-body .chocoland .list-item .item16 .navi{ margin-top: 118.7777%; }
#main .content .content-body .chocoland .list-item .item17:nth-last-child(1):nth-child(n){ padding: 8% 0 34.2222%; }
#main .content .content-body .chocoland .list-item .item17 .navi{ margin-top: 0; position: relative; }
#main .content .content-body .chocoland .list-item .item17 .navi01{ margin-top: 0; }
#main .content .content-body .chocoland .list-item .item17 .navi02{ margin-top: 15%; }
#main .content .content-body .etc-link{ width: 80%; margin: -6% auto 0; position: relative; z-index: 10; }
#main .content .content-body .etc-link .item{ width: 100%; }
#main .content .content-body .etc-link .item:nth-child(n+2){ margin-top: 4.5556%; }
#main .content .content-body .etc-link .item.disable .navi{ pointer-events: none; position: relative; opacity: 0.3; }
#main .content .content-body .etc-link .item .navi a{ display: block; font-size: 0.9294rem; line-height: 1.5; color: #ffffff; background-color: #231815; position: relative; text-decoration: none; text-align: center; font-weight: bold; padding: 2.7778% 0; box-shadow: 0 3px 0 rgba(0,0,0,0.3); }
#main .content .content-body .etc-link .item .navi a::before{ content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(45deg); width: 2.7778%; padding-top: 2.7778%; border: solid #ffffff; border-width: 1px 1px 0 0; margin-right: 5%; }
#main .content .content-body .etc-link .item .txt{ text-align: center; font-size: 0.9294rem; line-height: 1.5; margin-top: 1.3889%; color: #000000; }
#main .content .content-body .insta{ width: 86.6667%; margin: 10.6667% auto 0; background-color: #de5a77; padding: 6.6667% 0; }
#main .content .content-body .insta .ttl{ width: 82.4352%; margin: 0 auto 0; }
#main .content .content-body .insta .list-item{ width: 88.4615%; margin: 5% auto 0; }
#main .content .content-body .insta .list-item .item:nth-child(n+2){ margin-top: 4.6512%; }
#main .content .content-body .insta .list-item .item .logo{ width: 95.6522%; margin: 0 auto; }
#main .content .content-body .insta .list-item .item .navi{ margin-top: 3%; }
#main .content .content-body .insta .txt{ width: 83.8462%; margin: 5% auto 0; }
#main .content .content-body .storeinfo{ margin-top: 15%; }
#main .content .content-body .storeinfo .list-item{ width: 72.9412%; margin: 3% auto 0; }
#main .content .content-body .storeinfo .list-item .item{ padding: 6.4516% 0; border-bottom: 1px solid #000000; position: relative; }
#main .content .content-body .storeinfo .list-item .item .overlay{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0); }
#main .content .content-body .storeinfo .list-item .item .overlay::before{ content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: url(../image/top/i02.png) center center no-repeat; background-size: contain; width: 8.2317%; padding-top: 8.2317%; }
#main .content .content-body .storeinfo .list-item .item .name{ font-size: 1.5294rem; line-height: 1.3; color: #de5a77; font-weight: bold; margin-bottom: 2%; }
#main .content .content-body .storeinfo .list-item .item .txt{ font-size: 0.9294rem; line-height: 1.5; color: #000000; }
#main .content .content-body .storeinfo .list-item .item .txt .icon{ display: inline-block; width: 4.5732%; vertical-align: middle; line-height: 0; margin-right: 0.3em; }
#main .content .content-body .storeinfo .caption{ width: 72.9412%; margin: 6.6666% auto 0; font-size: 1.1647rem; line-height: 1.6; color: #000000; white-space: nowrap; }
#main .content .content-body .storeinfo .deco{ margin-top: 11.7647%; }



@media screen and (max-width: 780px){ /*780px以下のcss*/
}
@media screen and (max-width: 480px){ /*480px以下のcss*/
}





/*animation*/
#main .content .content-body .opening .bg01{ animation: 20s linear bg_rotate_animation infinite; }
@keyframes bg_rotate_animation{
	0%{ transform: translate(-50%,-50%) rotate(0deg); }
	100%{ transform: translate(-50%,-50%) rotate(360deg); }
}
#main .content .content-body .opening .txt{ opacity: 0; transform: translateX(-50%) scaleX(0); }
#main .content .content-body .opening.active .txt{ opacity: 1; transform: translateX(-50%) scaleX(1); transition: opacity 0.5s, transform 0.5s; }
#main .content .content-body .opening .chara{ opacity: 0; transform: translate(-50%,-20%) scale(0.5); }
#main .content .content-body .opening.active .chara{ opacity: 1; transform: translateX(-50%)scale(10) translateY(5%); transition: opacity 0.5s, transform 2s ease-in; transition-delay: 0.8s; }
#main .content .content-body .opening.hide{ opacity: 0; transition: opacity 0.5s; position: absolute; }