@charset "UTF-8";
/* footer.css 2.0.1 2019.5.31 */
/*=================
* footer
=================*/
.sub-menu-child-wrapper {
    position: relative;
    content: '';
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 10px;
    margin-bottom: 15px;
}
.sub-menu-child-wrapper::before {
    content: '';
    display: block;
    padding-top: 50%;
}
.sub-menu-child-wrapper.instagram::before,
.sub-menu-child-wrapper.facebook::before,
.sub-menu-child-wrapper.twitter::before { padding-top: 30%; }

.sub-menu-child-wrapper a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent: -999px;
    z-index: 2;
    pointer-events: auto;
}
.sub-menu-child-wrapper a ~ div { opacity: 1; }
.sub-menu-child-wrapper a:hover ~ .black-filter { background-color: rgba(0,0,0,.2); transition: 0.5s ease-in-out; }
.sub-menu-child-wrapper a:hover ~ .hover-filter { background-color: rgba(255,255,255,.2); transition: 0.5s ease-in-out; }

.sub-menu-child-wrapper h4 { font-size: 3.84vw; color: #fff; }
.sub-menu-child-wrapper.inquiry h4,
.sub-menu-child-wrapper.flow h4,
.sub-menu-child-wrapper.faq h4,
.sub-menu-child-wrapper.access h4 { color: #000; }

.sub-menu-child-wrapper.costume { background-image: url('../images/footer/costume.png'); }
.sub-menu-child-wrapper.product { background-image: url('../images/footer/product.png'); }
.sub-menu-child-wrapper.studio { background-image: url('../images/footer/studio.png'); margin-bottom: 0; }
.sub-menu-child-wrapper.gallery { background-image: url('../images/footer/gallery.png'); margin-bottom: 0; }
.sub-menu-child-wrapper.guide { background-image: url('../images/footer/guide.png'); }
.sub-menu-child-wrapper.instagram { background-image: linear-gradient(-135deg,#1400c8,#b900b4,#f50000); }
.sub-menu-child-wrapper.facebook { background-color: #3b5998; }
.sub-menu-child-wrapper.twitter { background-color: #55acee; }
.sub-menu-child-wrapper.access { background-color: #fff; }

.sub-menu-child-wrapper.reserve::before,
.sub-menu-child-wrapper.inquiry::before,
.sub-menu-child-wrapper.access::before { padding-top: 20%; }
.sub-menu-child-wrapper.reserve { background-color: #cea971; }
.sub-menu-child-wrapper.inquiry,
.sub-menu-child-wrapper.flow,
.sub-menu-child-wrapper.faq { background-color: #fff; }
.sub-menu-child-wrapper.reserve h4::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 5px;
    background-image: url('/images/icon/icon-calendar-white.png');
    background-size: contain;
    vertical-align: middle;
}
.sub-menu-child-wrapper.reserve:hover { opacity: 0.8; transition: 0.5s ease-in-out; }

.sub-menu-child-wrapper.inquiry h4::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 5px;
    background-image: url('/images/icon/icon-contact.png');
    background-size: contain;
    vertical-align: middle;
}
.sub-menu-child-wrapper.inquiry:hover,
.sub-menu-child-wrapper.flow:hover,
.sub-menu-child-wrapper.faq:hover { background-color: #cea971; transition: 0.5s ease-in-out; }
.sub-menu-child-wrapper.inquiry:hover h4,
.sub-menu-child-wrapper.flow:hover h4,
.sub-menu-child-wrapper.faq:hover h4 { color: #fff; transition: 0.5s ease-in-out; }
.sub-menu-child-wrapper.inquiry:hover h4::before { background-image: url('/images/icon/icon-contact-white.png'); transition: 0.5s ease-in-out; }
.sub-menu-child-wrapper.flow:hover h4::before { background-image: url('/images/icon/icon-xylophone-white.png'); transition: 0.5s ease-in-out; }
.sub-menu-child-wrapper.faq:hover h4::before { background-image: url('/images/icon/icon-faq-white.png'); transition: 0.5s ease-in-out; }

.sub-menu-child-wrapper.flow h4::before,
.sub-menu-child-wrapper.faq h4::before,
.sub-menu-child-wrapper.access h4::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 5px;
    background-size: contain;
    vertical-align: middle;
}
.sub-menu-child-wrapper.flow h4::before { background-image: url('/images/icon/icon-xylophone.png'); }
.sub-menu-child-wrapper.faq h4::before { background-image: url('/images/icon/icon-faq.png'); }
.sub-menu-child-wrapper.access h4::before { background-image: url('/images/icon/icon-landmarks.png'); }

.sub-menu-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.black-filter { background-color: rgba(0,0,0,.3); }
.sub-menu-child-header { text-align: center; }
.slash.instagram { margin: 20px 0; }
.slash.instagram h5 { font-weight: bold; }
.sub-menu-title.instagram div { display: block; }
.insta-outline, .facebook-outline, .twitter-outline { border: 2px solid #fff; width: 70%; padding: 5px; }
.insta-inline, .facebook-inline, .twitter-inline { border: 1px solid #fff; padding: 6px; }
.instagram .fab, .facebook .fab, .twitter .fab { color: #fff; }
.instagram .fab {font-size: 2rem; }
.facebook .fab, .twitter .fab { font-size: 2rem; margin-right: .5rem; }
.instagram h4, .facebook h4, .twitter h4 { font-size: 5.12vw; font-weight: bold; margin-bottom: 0; }
.instagram p, .facebook p, .twitter p { color: #fff; }
.phone-number-wrapper {
    margin: 20px 0;
    text-align: center;
}

.phone-number-wrapper h4 { font-size: 3.413vw; }
.btn-phone-number {
    font-size: 6.826vw;
    font-weight: bold;
    color: #333;
}
.phone-number-wrapper p { margin-bottom: 0; }
.phone-number-wrapper span.attention { font-size: 3.413vw; }
.phone-number-wrapper span.attention::before { content: '※'; }
.phone-number-wrapper h4::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url(../images/icon/icon-contact.png);
    background-size: contain;
    vertical-align: bottom;
}

#footer-global-menu ul {
    color: #fff;
    list-style-type: none;
    padding-left: 0;
}
#footer-global-menu ul li { display: block; }
#footer-global-menu ul li a { color: #fff; }
#footer-global-menu ul li a:hover { color: #eee; }


#footer-studio img { height: 50px; }
#footer-studio h4 { text-align: center; }
#footer-studio ul {
    list-style-type: none;
    padding-left: 0;
}
#footer-studio ul li { margin-bottom: .5rem; }

@media (min-width: 768px) {
    .sub-menu-child-wrapper::before { padding-top: 50%; }
    .sub-menu-child-wrapper.instagram::before,
    .sub-menu-child-wrapper.facebook::before,
    .sub-menu-child-wrapper.twitter::before { padding-top: 50%; }

    .sub-menu-child-wrapper h4 { font-size: 1.6rem; }
    #footer-global-menu ul { text-align: center; margin-bottom: 1rem; }
    #footer-global-menu ul li { display: inline-block; margin-right: 1rem; }
    #footer-studio ul { font-size: 1.28rem; }
    #footer-studio ul li { margin-bottom: 0; }
    .phone-number-wrapper span.attention { font-size: 1.28rem; }
    .phone-number-wrapper h4 { font-size: 1.28rem; }
    .btn-phone-number { font-size: 2.56vw; }
    .slash.instagram h5 { font-size: 1.6rem; }
    .sub-menu-child-wrapper.costume,
    .sub-menu-child-wrapper.product,
    .sub-menu-child-wrapper.studio,
    .sub-menu-child-wrapper.gallery { margin: 0; }
    .sub-menu-child-wrapper.reserve::before,
    .sub-menu-child-wrapper.inquiry::before,
    .sub-menu-child-wrapper.access::before { padding-top: 10%; }
    .sub-menu-child-wrapper.flow::before,
    .sub-menu-child-wrapper.faq::before { padding-top: 20%; }

    .sub-menu-child-wrapper.reserve h4::before,
    .sub-menu-child-wrapper.inquiry h4::before,
    .sub-menu-child-wrapper.flow h4::before,
    .sub-menu-child-wrapper.faq h4::before,
    .sub-menu-child-wrapper.access h4::before { width: 50px; height: 50px; }

    .insta-inline, .facebook-inline, .twitter-inline { padding: 20px; }
}