@charset 'utf-8';
/*
 * name:top.css
 * author:nulo
*/

/* top
------------------------------------------------ */
#main .vd-tvisual--txt { display: block; width: 578px; margin: 0 auto 58px; }
#main .vd-tvisual--slide { display: block; overflow: hidden; width: 100%; height: 556px; position: relative; }
#main .vd-tvisual--slide iframe { position: relative; width: 100%; height: 556px; box-sizing: border-box !important; pointer-events: auto !important; }
#main .vd-tvisual--slide video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; object-fit: cover; }
#main .vd-tvisual--logo { position: absolute; right: 4.42%; bottom: 6.06%; width: 31.3%; z-index: 2; }

#main #guest { display: block; position: relative; padding: 100px 0 160px; }
#main .guest--text { display: block; width: 940px; margin: 0 auto 80px; }
#main .guest--block { display: block; width: 1200px; margin: 0 auto; }
#main .guest__detail:not(:last-child) { margin-bottom: 102px; }
#main .guest__detail { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; text-align: left; }
#main .guest__detail:nth-child(2n) { flex-direction: row-reverse; }
#main .guest__detail--desc { width: 33.333%; }
#main .guest__detail--slide { display: block; position: relative; width: 60%; height: 460px; }
#main .guest__detail--swipe { display: block; overflow: hidden; position: absolute; left: 0; top: 0; width: calc(50vw + 16.7%); height: 100%; border-radius: 5px 0 0 5px; }
#main .guest__detail--swipe img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
#main .guest__detail--swipe iframe { position: relative; width: 100%; height: 460px; box-sizing: border-box !important; pointer-events: auto !important; }
#main .guest__detail:nth-child(2n) .guest__detail--swipe { border-radius: 0 5px 5px 0; left: auto; right: 0; }

@media only screen and (max-width: 1220px) {
    #main .guest__detail--swipe { width: 730px; }
}

#main #zero { display: block; position: relative; padding: 140px 0; }
#main .zero--text { display: block; width: 1200px; margin: 0 auto; }

#main #miyakojima { display: block; position: relative; background: #F5F5F5; padding-top: 180px; }
#main #miyakojima .vd-blinks { margin: 60px 0 80px; padding: 0; background: none; }
#main .miyakojima--text { display: block; width: 940px; margin: 0 auto; }
#main #miyakojima .vd-blinks--btn { width: 22.33em; }
#main #miyakojima .vd-blinks--btn a { background: url(https://classtheresort.jp/first/wp-content/themes/ctf/assets/img/common/bg-rhombus-btn.png) no-repeat; background-size: 100% 100%; }
#main #miyakojima .vd-blinks--btn a:hover { color: #131313; background: url(https://classtheresort.jp/first/wp-content/themes/ctf/assets/img/common/bg-rhombus-btn-hover.png) no-repeat; background-size: 100% 100%; }
#main #miyakojima .vd-blinks--txt:before { content: ''; display: inline-block; vertical-align: middle; margin-right: .27em; width: .89em; height: .89em; background: url(https://classtheresort.jp/first/wp-content/themes/ctf/assets/img/common/icon_instagram.svg) no-repeat; background-size: 100% 100%; transition: 0.8scubic-bezier(0.16, 1, 0.3, 1); }
#main #miyakojima .vd-blinks--btn a:hover .vd-blinks--txt:before { background: url(https://classtheresort.jp/first/wp-content/themes/ctf/assets/img/common/icon_instagram-b.svg) no-repeat; background-size: 100% 100%; }

#main #vd-tfollow { display: block; position: relative; }
#main .vd-tfollow--links { display: block; }
#main .vd-tfollow--links li { width: 13.54%; height: 26.66%; display: block; position: absolute; right: 18.75%; top: 50%; transform: translateY(-50%); }
#main .vd-tfollow--links li:first-child { right: 33.33% }
#main .vd-tfollow--links li a { display: block; height: 100%; width: 100%; position: relative; opacity: 0; }
#main .follow__list { display: flex; flex-wrap: wrap; }
#main .follow__list__item { font-size: inherit; width: 13.54%; position: absolute; right: 18.75%; top: 50%; transform: translateY(-50%); } 
#main .follow__list__item:first-child { right: 33.33% }
#main .follow__list__item a { position: relative; display: block; border-radius: .5em; }
#main .follow__list__item .icon { padding: 2.9em 0; position: relative; }
#main .follow__list__item .icon img { height: 2.9em; width: auto; display: block; margin: 0 auto; }
#main .follow__list__item a::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: 400ms; border: 1px solid #fff; border-radius: .5em; }


    @supports ((-webkit-backdrop-filter: brightness(1) blur(0px)) or (backdrop-filter: brightness(1) blur(0px))) {
        #main .follow__list__item a::before { background: rgba(255, 255, 255, 0); backdrop-filter: brightness(1) blur(0px); -webkit-backdrop-filter: brightness(1) blur(0px); }
    }
    #main .follow__list__item a:hover::before { background: rgba(255, 255, 255, 0.35); }
    @supports ((-webkit-backdrop-filter: brightness(1) blur(0px)) or (backdrop-filter: brightness(1) blur(0px))) {
        #main .follow__list__item a:hover::before { background: rgba(255, 255, 255, 0); backdrop-filter: brightness(1.15) blur(.5em); -webkit-backdrop-filter: brightness(1.15) blur(.5em); }
    }