@charset "UTF-8";

/* -----------reset----------- */
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video{margin:0; padding:0; border:0; outline:0; font-size:100%; font-style:normal; vertical-align:baseline; background:transparent;}
body{line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
nav ul{list-style:none;}
li{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after,q:before, q:after{content:''; content:none;}
a{margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;}
ins{background-color:#ff9; color:#000; text-decoration:none;}
mark{background-color:#ff9; color:#000; font-style:italic; font-weight:bold;}
del{text-decoration:line-through;}
abbr[title], dfn[title]{border-bottom:1px dotted; cursor:help;}
table{border-collapse:collapse; border-spacing:0;}
hr{display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
input, select{vertical-align:middle;}

/* -----------opening----------- */
.opening{width:100%; height:100%; top:0; left:0; z-index:10000; position:fixed; transition:all 0.5s ease-in-out;}
.opening--out{top:100%;}
.opening-logo{opacity:0; transition:opacity 0.5s;}
.opening-logo img{position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; max-width:40%; height:auto;}
.opening-logo--visible{opacity:1;}
/* star */
.starry{position:relative; width:100%; height:100vh; background-image:linear-gradient(0deg, #3b72b4, #171c48, #04040f, #010104, #000000); overflow:hidden;}
.star{position:absolute; display:block; background-color:#fff; border-radius:50%; box-shadow:0 0 4px 2px rgba(#fff, 0.2); opacity:0; animation:twinkle 5s infinite;}
@keyframes twinkle{
 0%{opacity:0;}
 50%{transform:scale(1.1); opacity:1;}
 100%{opacity:0; transform:scale(1);}
}

/* -----------base----------- */
body{font-family:"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif; color:#fff;}
a{color:#fff; text-decoration:none; transition:all 0.5s ease 0s;}
a:hover,a:focus{color:#999;}
a:active{}
a:visited{color:#fff;}
a:visited:hover{color:#aaa;}
img{width:100%;}
.mgt10{margin-top:10%;}

/* -----------header----------- */
header{width:100%; position:fixed; left:0; z-index:9997;}
header h1{position:fixed; top:10px; left:10px;}
/* menu */
.menu_btn{width:60px; height:60px; background-color:#002040; opacity:0.8; position:fixed; top:0; right:0; display:flex; justify-content:center; align-items:center; z-index:9999;}
.menu_btn:hover{cursor:pointer;}
.menu_btn span{background:#fff; width:30px; height:2px; position:absolute; transition:0.3s ease-out;}
.menu_btn span:nth-of-type(1){top:15px;}
.menu_btn span:nth-of-type(3){bottom:15px;}
.menu_btn.active span:nth-of-type(1){transform:translateY(14px) rotate(-45deg); transition:0.3s ease-out;}
.menu_btn.active span:nth-of-type(3){transform:translateY(-14px) rotate(45deg); transition:0.3s ease-out;}
.menu_btn.active span:nth-of-type(2){opacity:0;}
.lang_btn{width:60px; height:60px; background:#fff url("https://churaumi.okinawa/userfiles/images/night/language.png") no-repeat; background-position:50% 10px; background-size:50%; opacity:0.8; position:fixed; top:0; right:60px; display:flex; justify-content:center; align-items:end; z-index:9999;}
.lang_icon{font-size:70%; color:#004b83; font-weight:900; padding-bottom:3px;}
.lang_menu{position:absolute; left:0; top:60px; display:none; width:120px; z-index:3;}
.lang_menu > li > a{font-size:80%; color:#fff; padding:10px 0; text-align:center; background-color:#0071b9; text-decoration:none; display:block;}
.lang_menu > li > a:hover{background-color:#004b83; opacity:1;}



/* site_menu */
.site_menu{width:100%; height:100%; background:rgba(0,0,0,0.95); color:#fff; position:fixed; transform:translate(-100%); transition:0.3s ease-out; z-index:9998; overflow-y:auto; font-size:80%; letter-spacing:-.4em; top:0;}
.site_menu.open{transform:translate(0); transition:0.3s ease-out;}
.site_menu .column2{width:50%; margin-right:0;}
.site_menu .column2 ul{text-align:center;}
.site_menu .column2 ul li{letter-spacing:0.4rem; padding:3%;}
.logo{padding:10% 20% 5%;}
.time{margin-bottom:10%; text-align:center; font-size:140%; line-height:1.3;}
.time span{margin-left:10px;}

/* -----------bgvideo----------- */
.bg-visual{position:fixed; top:0; left:0; height:100vh; width:100%; z-index:-1;}
.bg-video{position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; pointer-events:none;}
/* intro */
.intro{position:relative; height:100vh; width:100%;}
.catchcopy{position:absolute; left:10%; top:10%;}
.catchcopy_item{font-size:250%; line-height:2.0; letter-spacing:0.2rem; font-family:'Shippori Mincho', serif; color:#fff; display:none;}
.op-time{background:rgba(0,32,64,0.9); padding:1%; position:absolute; bottom:30%; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); font-size:150%; display:none; text-align:center; line-height:1.3;}
.op-time span{margin-left:10px;}
.scroll-inter{position:absolute; bottom:15%; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%);}
.scroll{position:relative; width:24px; height:24px; display:none;}
.arrow{position:absolute; width:28px; height:8px; opacity:0; transform:scale3d(0.5, 0.5, 0.5); animation:move 3s ease-out infinite;}
.arrow:first-child{animation:move 3s ease-out 1s infinite;}
.arrow:nth-child(2){animation:move 3s ease-out 2s infinite;}
.arrow:before, .arrow:after{content:' '; position:absolute; top:0; height:100%; width:51%; background:#fff;}
.arrow:before{left:0; transform:skew(0deg, 30deg);}
.arrow:after{right:0; width:50%; transform:skew(0deg, -30deg);}
.text{display:block; margin-top:75px; margin-left:-30px; font-family:"Helvetica Neue", "Helvetica", Arial, sans-serif; font-size:12px; color:#fff; text-transform:uppercase; white-space:nowrap; opacity:.25; animation:pulse 2s linear alternate infinite;}
@keyframes move{
 25%{opacity:1;}
 33%{opacity:1; transform:translateY(30px);}
 67%{opacity:1; transform:translateY(40px);}
 100%{opacity:0; transform:translateY(55px) scale3d(0.5, 0.5, 0.5);}
}
@keyframes pulse{to{opacity:1;}}

/* -----------main----------- */
.inner{width:1000px; letter-spacing:-.4em; margin:3% auto 0;}
.column3{display:inline-block; width:30%; margin-right:5%; vertical-align:top; letter-spacing:normal;}
.column3:nth-child(3){margin-right:0;}
.column2{display:inline-block; width:47.5%; margin-right:5%; vertical-align:top; letter-spacing:normal;}
.column2:nth-child(2){margin-right:0;}
section{background:url("https://churaumi.okinawa/userfiles/images/night/bg_1.jpg"); background-size:cover; width:100%; padding:10% 0%; margin-bottom:80%;}
section h2{color:#fff; font-size:250%; margin-bottom:4%; text-align:center; font-family:'游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; font-weight:400; letter-spacing:0.7rem;}
section h2 span{display:block; font-size:50%; margin-bottom:1%; letter-spacing:0.2rem;}
section .lead{color:#fff; font-size:120%; line-height:1.8; font-family:'fot-klee-pro', sans-serif; letter-spacing:0.2rem;}
img.bg_txt01{opacity:0.08; transform:rotate(-15deg); margin:10% 0 0 -20%;}
img.bg_txt02{opacity:0.08; transform:rotate(-15deg); margin:10% 0 0 10%;}
section .column2 h3{margin-bottom:8%; line-height:1.3; font-size:180%;}
section .column2 .txt{line-height:1.5;}
.youtube iframe{width:469px; height:833px;}
section .column2 dl{display:flex; flex-wrap:wrap; align-items:stretch; width:100%; line-height:1.5;}
section .column2 dl dt{width:20%; margin:5% 5% 0 0; text-align:justify; text-align-last:justify;}
section .column2 dl dd{width:75%; margin-top:5%;}
/* section.pro */
section.pro{background:url("https://churaumi.okinawa/userfiles/images/night/bg02.png");}
section.pro .inner{display:flex; flex-direction:row; justify-content:space-between;}
section.pro .inner:nth-child(even){flex-direction:row-reverse;}
section.pro .column2{margin-right:0%;}
/* section.fin */
section.fin{background:#dbeaf9; width:100%; margin-bottom:0;}
.cl-time{background:rgba(0,32,64,0.8); padding:1%; text-align:center; line-height:1.5; font-size:120%; letter-spacing:0.2rem;}
.cl-time h4{background:rgba(0,32,64,1); padding:1%; margin-bottom:1%; font-size:160%;}
.cl-time span{margin-left:10px;}
.web_ticket{text-align:center; color:#002040; margin-top:5%; color:#002040; line-height:1.5; font-size:120%;}
.button{margin-top:2%;}
.button a{display:flex; justify-content:space-between; align-items:center; position:relative; margin:0 auto; padding:1em 2em; width:250px; color:#002040; font-size:18px; font-weight:700; background-color:#ccc; transition:0.3s;}
.button a::before{content:''; position:absolute; top:-5px; left:-5px; width:calc(100% - 4px); height:calc(100% - 4px); border:2px dashed #002040; transition:0.2s;}
.button a::after{content:''; width:5px; height:5px; border-top:3px solid #002040; border-right:3px solid #002040; transform:rotate(45deg);}
.button a:hover::before{top:0; left:0;}
.button a:hover{text-decoration:none; background-color:#a0c4d3; color:#16497d;}

/* -----------footer----------- */
footer{background-color:#002040; width:100%; padding:20px 0;}
footer nav ul{font-size:85%; text-align:center; margin-top:20px;}
footer nav ul li{display:inline-block; border-left:1px solid #fff; padding:0 15px;}
footer nav ul li:first-child{border-left:0;}
footer .copy{font-size:75%; text-align:center; margin-top:20px;}
/* sns */
.flowbtn{display:inline-block; font-size:160%;}
.flowbtn .fa-instagram, .flowbtn .fa-line{font-size:110%;}
.snsbtniti{text-align:center;}
.snsbtniti li{display:inline-block; padding:0 15px;}
/* page_top */
#page_top{width:90px; height:90px; position:fixed; right:10px; bottom:10px; opacity:0.8; background:#002040; border-radius:50%;}
#page_top a{position:relative; display:block; width:90px; height:90px; text-decoration:none;}
#page_top a::before{font-family:'Font Awesome 5 Free'; font-weight:900; content:'\f102'; font-size:25px; color:#fff; position:absolute; width:25px; height:25px; top:-30px; bottom:0; right:0; left:0; margin:auto; text-align:center;}
#page_top a::after{content:'PAGE TOP'; font-size:13px; color:#fff; position:absolute; top:50px; bottom:0; right:0; left:0; margin:auto; text-align:center; color:#fff;}

/* -----------media screen----------- */
@media screen and (max-width:768px) {
.opening-logo img{max-width:80%;}
.catchcopy{left:2%; top:25%; width:96%;}
.catchcopy_item{font-size:150%; text-align:center;}
.op-time{padding:3% 1%; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); -ms-transform:translateX(-0%); font-size:100%;}
.op-time span{display:inline-block; margin:0; text-align:center;}
.time span{display:inline-block; margin:0;}
.cl-time span{display:inline-block; margin:0;}
.site_menu .column2{width:100%; margin-right:0;}
.site_menu .column2 .menu_img{display:none;}
.inner{max-width:88%; margin:6%;}
.column3{width:100%; margin-right:0;}
.column2{width:100%; margin-right:0;}
section.pro .column2:nth-child(2){margin-left:0;}
section{width:100%; padding:15% 0; margin-bottom:100vh; text-align:center;}
section.pro{text-align:left;}
section.fin{max-width:100%; padding:15% 0;}
section h2{font-size:180%; letter-spacing:0.3rem;}
section h2 span{margin-bottom:2%;}
section .lead{font-size:100%;}
section .column2 h3{font-size:130%; margin-bottom:3%;}
section.pro .column2 img{margin:2% 0%;}
section.pro .inner:nth-child(odd){display:block; flex-direction:column;}
section.pro .inner:nth-child(even){display:block; flex-direction:column;}
.youtube{position:relative; height:0; padding:30px 0 170%; overflow:hidden;}
.youtube iframe{position:absolute; top:0; left:0; width:100%; height:100%;}
img.bg_txt01{margin:1% 0 6% 0;}
img.bg_txt02{margin:1% 0 6% 0;}
footer nav ul{font-size:75%;}
footer nav ul li{padding:0 10px; line-height:1.5;}
.web_ticket{font-size:100%;}
.cl-time{padding:3%; font-size:100%; letter-spacing:0.2rem;}
.cl-time h4{padding:3%; margin-bottom:3%; font-size:120%;}
.button{margin-top:5%;}
}


/* PC・SP切り替え */

@media(min-width:751px){
    .sp{
        display: none !important;
    }
}
@media(max-width:750px){
    .pc{
        display: none !important;
    }
}