@charset "UTF-8";

/*
======== table of content. ===============
summary:ページ要素（PC）
====================================
*/

body { font-size: 1.2rem; }

/* ***** header ***** */
#gg_header { position: fixed; left: 0; right: 0; margin-left: auto; margin-right: auto; padding: 49px 0; z-index: 1000; /*transition: all .2s cubic-bezier(0.230, 1.000, 0.320, 1.000);*/ opacity: 0; transition: opacity 1.3s cubic-bezier(0.215, 0.610, 0.355, 1.000); }
#gg_header.anim { opacity: 1; }

#gg_header .logo { text-align: center; }

#gg_header,
#gg_header .logo img { width:180px; }

#gg_header.fixed { padding: 15px 0; }

#gg_header.fixed,
#gg_header.fixed .logo img { width:120px; }

/* ***** footer ***** */
.sec_staff { margin-bottom: 50px; text-align: center; }
#gg_footer { padding: 49px 0; }
a.allitem { display: block; width:370px; font-size: 1.6rem; margin: 0 auto 50px; padding: 15px 0; border:solid 1px; font-family: 'RRollieSemiBold'; letter-spacing: 0.03em; text-align: center; text-decoration:none; }
a.allitem:hover,
.topagetop a:hover { opacity: .7; }
.topagetop { width:20px; margin: 0 auto 50px; }


.logo_footer { width:110px; margin: auto auto 30px; }

#gg_footer .txt_copyright { font-size: 1rem; font-family: 'caslon'; text-align: center; }


/* ***** wrapper ***** */
#wrapper { /*padding-top: 157px;*/ }

#thumb_content { transition: opacity 1.3s cubic-bezier(0.215, 0.610, 0.355, 1.000); /*display: flex; justify-content: center; align-items: center;*/ }
#thumb_content.anim { opacity: 1; }

/*サムネイル*/
.thumb_index { opacity: 0; position: absolute; transition: opacity 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940); }
.thumb_index.anim { opacity: 1; }

.thumb10 { left:16.25%; width: 20.54%; }
.thumb10_m { left: 8.4375%; top:23.74vw; width: 10%; z-index: 999; transition-delay: .3s; }

.thumb08_m { right: 25.15%; top:3.9vw; width: 13.16%; z-index: 999; transition-delay: .6s; }
.thumb08 { right:0; top:8.6vw; width:20.4%; transition-delay: .9s;}

.thumb05 { right: 16.13%; top:29.2vw; width:15.43%;  transition-delay: 1.2s; }

.thumb09 { left: 12.7%; top:45.4vw; width:17.57%; transition-delay: 1.5s; }

.thumb06 { right: 17.4%; top:60.97vw; width:20.4%; transition-delay: 1.8s; }
.thumb06_m { right: 10.15%; top:53.9vw; width:9.53%; z-index: 999; transition-delay: 2.1s; }

.thumb04 { left: 6.05%; top:77.85vw; width:16.25%; transition-delay: 2.4s; }

.thumb03 { left: 32.97%; top:74.22vw; width:17%; transition-delay: 2.7s; }
.thumb03_m { left: 48.36%; top:91.52vw; width:11.88%; z-index: 999; transition-delay: 3s; }

.thumb07 { right: 0; top:73vw; width:14.6%; transition-delay: 3.3s; }

.thumb02 { left: 14.06%; top:107.8vw; width:16.87%; transition-delay: 3.6s; }

.thumb01 { right: 11.6%; top:98.6vw; width:20.23%; transition-delay: 3.9s; }


.thumb_index a img,
.thumb_index a video { transition: opacity .7s cubic-bezier(0.230, 1.000, 0.320, 1.000); }

.thumb_index a:hover img,
.thumb_index a:hover video { opacity: .7; }

/*サムネイル*/

#btn_click_to_enter { position: fixed; margin: 0 44.14%; bottom:1.3vw; z-index: 1000; }
#btn_click_to_enter a:hover { opacity: .7; }


/*ロゴ*/
.sec_main_txt { position: absolute; left: 0; right:0; /*top: 32vw;*/ top:40%; margin: auto; opacity: 0; transition: opacity 1.3s cubic-bezier(0.215, 0.610, 0.355, 1.000); text-align: center; z-index: 999; transform: scale(0.8); }

.slider_main.anim,
.sec_main_txt.anim { opacity: 1; }

.txt_season, h1 , .sec_main_txt h2 { font-family: 'RRollieSemiBold'; font-weight: normal; }

.txt_season { margin-bottom: 1.2em; font-size: 2rem; letter-spacing: 0.15em; }
h1 { margin-bottom: .5em; line-height: 120%; font-size: 5rem; letter-spacing: 0.1em; }
.sec_main_txt h2 { font-size: 1.8rem; letter-spacing: 0.05em; text-align: center; text-transform: uppercase; }
.sec_main_txt h2 span { display: block; }
.sec_main_txt h2 .txt_key { position: relative; margin-bottom: .8em; padding-bottom: .7em; }
.sec_main_txt h2 .txt_key::after { content:""; position: absolute; bottom:0; left: 0; right: 0; width:3.5rem; height: 1px; margin: auto; background: #000; }




.movie { position: relative; width:100%; padding-bottom: 137.5%; height: 0; /*background: #000;*/ overflow: hidden; }
.movie video { position: absolute; top:0; left: 0; width:100%; height: 100%; vertical-align: bottom; }