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

/* guest
------------------------------------------------ */

#main .vd-blinks--clean { margin-top: 120px; padding: 0; background: none; }

#main #vd-gabout { display: block; position: relative; padding: 150px 0; }
#main .vd-gabout--txt { display: block; width: 1320px; margin: 0 auto; }

#main #vd-groom { padding: 150px 0; background: #F5F5F5; display: block; position: relative; }
#main .vd-groom--txt { display: block; width: 940px; margin: 0 auto 60px; }
#main .vd-groom--btn { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
#main .vd-groom--btn li { width: 400px; margin: 0 20px; }
#main .vd-groom__desc { display: block; padding-top: 100px; width: 1320px; margin: 0 auto; }
#main .vd-groom__desc:not(:first-child) { margin-top: 50px; }
#main .vd-groom__desc--pic { margin-bottom: 80px; }
#main .vd-groom__desc--cm { display: block; width: 1100px; margin: 0 auto; }

#main .vd-groom--more { width: 600px; margin-top: 5em; margin-left: 505px; }
#main .vd-groom--more li { width: 47.8%; }
#main .vd-groom--more li:nth-child(2n) { margin-left: 4.4%; }
#main .vd-groom--more li:nth-child(n+3) a,
#main .vd-groom--more li:nth-child(n+3) span { color: #BC980E; margin-top: 2em; }
#main .vd-groom--more li a,
#main .vd-groom--more li span { width: 100%; }
#main .vd-groom--more li a small { font-size: 133%; line-height: 1.1; }
#main .vd-groom--more li span.btn-popup small { font-size: 100%; position: relative; display: block; padding-left: 1.86em; }
#main .vd-groom--more li span.btn-popup small:before { content: ''; display: inline-block; width: 1.26em; height: 1.66em; position: absolute; left: 0; top: 0; background: url(https://classtheresort.jp/first/wp-content/themes/ctf/assets/img/common/icon-zoom.svg) no-repeat; background-size: 100%; transition: 0.8s cubic-bezier(0.16, 1, 0.3, 1); }

#main .vd-gvilla { display: block; position: relative; padding-top: 200px; }
#main .vd-gvilla--txt { display: block; width: 602px; margin: 0 auto 90px; }
#main .vd-gvilla--banner { display: block; position: relative; }
#main .vd-gvilla__block { padding-top: 150px; display: block; position: relative; }
#main .vd-gvilla__block--head { display: block; position: relative; width: 1200px; margin: 0 auto; }
#main .vd-gvilla__block--head .bg-line2 { top: auto; bottom: -112px; }
#main .vd-gvilla--txt-sub { display: block; width: 530px; }
#main .vd-gvilla__block--slide { display: block; position: relative; width: 91.66%; z-index: 2; padding-top: 112px; }
#main .vd-gvilla__block--slide .slide-bags { width: 22.7%; position: absolute; top: calc( 12.1% + 112px ); right: 4.5%; z-index: 2; }
#main .vd-gvilla__block--desc { display: block; position: relative; padding: 200px 0 150px; margin-top: -130px; z-index: 1; background-image: url(https://classtheresort.jp/first/wp-content/themes/ctf/assets/img/pool-villa-suite/bg-pool.png); background-repeat: repeat; background-position: center; background-size: 20em; }
#main .vd-gvilla__block--desc .bg-line2 { top: 102px; bottom: auto; }
#main .vd-gvilla__block--txt { display: block; width: 1070px; margin: 0 auto 110px; position: relative; z-index: 5; }
#main .vd-gvilla__block__cmn { display: block; width: 1200px; margin: 0 auto; margin-bottom: 120px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
#main .vd-gvilla__block__cmn--last { margin-bottom: 0; flex-direction: row-reverse; }
#main .vd-gvilla__block__cmn--img { width: 720px; display: block; overflow: hidden; border-radius: 5px; }
#main .vd-gvilla__block__cmn--txt { width: 330px; margin: 0 75px; }
#main .vd-gvilla--detail { display: block; position: relative; margin: 0 auto; width: 1200px; padding-top: 150px; }
#main .vd-gvilla__links { margin-top: 3em; display: flex; flex-wrap: wrap; }
#main .vd-gvilla__links li { font-size: 1.3em; font-weight: 500; letter-spacing: .07em; margin-right: 2.3em; }
#main .vd-gvilla__links li a { display: inline-block; position: relative; color: #CB9B0C; }
#main .vd-gvilla__links li a:after { content: ''; display: inline-block; vertical-align: .1em; width: 1.24em; height: .459em; margin-left: .35em; background: url(https://classtheresort.jp/first/wp-content/themes/ctf/assets/img/common/icon-arrow-box-g.svg) no-repeat; background-size: 100%; transform: rotate(90deg); }
#main .vd-gvilla__links li a:before { content: ""; position: absolute; z-index: 0; right: .45em; width: 0; bottom: -2px; background: #CB9B0C; height: 1px; transition-property: width; transition-duration: 0.3s; transition-timing-function: ease-out; }
#main .vd-gvilla__links li a:hover:before { left: 0; right: auto; width: calc(100% - .45em); }
#main .vd-gvilla--queen .vd-gvilla__block--desc { display: block; position: relative; padding: 200px 0 150px; margin-top: -130px; z-index: 1; background-image: url(https://classtheresort.jp/first/wp-content/themes/ctf/assets/img/queens-villa-suite/bg-pool.png); background-repeat: repeat; background-position: center; background-size: 20em; }


#main .vd-foot { margin-top: 200px; }