/* fan cruise 2027 */
html {-webkit-box-sizing: border-box; box-sizing: border-box; }
*, *:before, *:after {-webkit-box-sizing: inherit; box-sizing: inherit; }
body {font-family: 'Sawarabi Mincho', sans-serif; background-color: #011227; padding: 0; margin: 0; color: #fffdf5;}
a {color:#fff;}
img {max-width: 100%; height: auto;}
.fltC {display:block; margin:auto;}
.txtc {text-align: center;}
h1,h2,h3,h4 {font-family: 'Montserrat', sans-serif;}
h2 {font-size: 20px; margin-top: 36px;}
#countdown, #countdown-title {display:block; text-align: center; margin: 0px;}
#countdown span {font-family: 'Montserrat', sans-serif; display:inline-block; background:#171f26; background: linear-gradient(to bottom, #003d7c 0%,#0063c8 25%,#0063c8 25%,#0063c8 75%,#003d7c 100%);  padding: 18px 0px; color:#fff800; margin:0px 4px; border-radius: 50%; font-size: 46px; box-shadow: 0px 4px 6px #000; width: 120px;}
#countdown-title span {display:inline-block; width: 120px; font-size: 18px; margin:4px; text-transform: uppercase; font-weight: bold;}
.contain {width: 100%; max-width:1000px; margin:auto; display:block; font-size: 18px; line-height: 1.3;}
.footnote {font-size: 14px;}
.action-area {display:block; margin: 24px auto; text-align: center;}
.but-1 {min-width: 396px; font-family: 'Montserrat', sans-serif; display: inline-block; background: linear-gradient(to bottom, #003d7c 0%,#0063c8 25%,#0063c8 25%,#0063c8 75%,#003d7c 100%); color: #fff800; padding: 24px 46px; margin: 24px; border-radius: 18px; text-transform: uppercase; text-decoration: none; font-size: 24px;}
.but-2 {min-width: 396px; font-family: 'Montserrat', sans-serif; display: inline-block; background: linear-gradient(to bottom, #521556 0%,#813086 25%,#813086 25%,#813086 75%,#521556 100%); color: #fff800; padding: 24px 46px; margin: 24px; border-radius: 18px; text-transform: uppercase; text-decoration: none; font-size: 24px;}
.but-3 {background: #0063c8; border-radius: 12px; padding: 8px 36px; margin: 18px auto 36px auto; display: inline-block; cursor: pointer;}
.col-50 {width:49%; float:left; margin-right: 2%;}
.col-100{width:100%;}
.last {margin-right: 0% !important;}

.clear {clear:both;}
.g-recaptcha {display: inline-block; margin: 4px auto auto auto;}
.submit {cursor: pointer; font-family: 'Montserrat', sans-serif; border:0px; display: block; background: linear-gradient(to bottom, #003d7c 0%,#0063c8 25%,#0063c8 25%,#0063c8 75%,#003d7c 100%); color: #fff800; padding: 24px 46px; margin: 36px auto; border-radius: 18px; text-transform: uppercase; text-decoration: none; font-size: 24px;}
.finalmsg {color:#fff800; text-align: center;}

.form1 label {display:block; width:100%; margin: 18px 0 4px 0;}
.form1 input[type="text"], .form1 textarea, .form1 select { -webkit-appearance: none; font-family: Arial, Helvetica, sans-serif; width:100%; font-size: 16px; padding: 8px 16px; border-radius: 18px; border: 0px; box-shadow: inset 0 0.125em 0.25em #eee;}
.form1 textarea {min-height: 220px;}

.form2 {border: 1px solid #0063c8; padding: 38px; position: relative;}
.form2 label {display:block; width:40%;  margin: 0px 2% 28px 0; float:left; text-align: right;}
.form2 .guest-box .col-100 label {width: 19.6%; margin-right: 0.98%; }
.form2 input[type="text"], .form2 input[type="number"], .form2 textarea, .form2 select { -webkit-appearance: none; font-family: Arial, Helvetica, sans-serif; width:58%; font-size: 16px; padding: 6px 12px; border-radius: 12px; border: 0px; box-shadow: inset 0 0.125em 0.25em #eee; float:left; opacity: 0.9; transition: all .3s ease;}
.form2 .guest-box .col-100 input[type="text"] { width: 79.42%; }
.form2 textarea {min-height: 220px;}
.form2 input[type="text"]:focus, .form2 input[type="number"]:focus, .form2 textarea:focus, .form2 select:focus {opacity: 1.0;}
.form2 h2 {margin:0 auto 42px auto;}
.form2 .alt1 {width: 19.5%; margin-right: 9px;}
.form2 .alt2 {width: 150px; margin-right: 1%;}
.form2 .alt3 {display: block; width: 100% !important; margin: 18px 0 0 0 !important; text-align: center !important;}
.form2 .unset1 {width: 100px;}

.wrapselect { position: relative; }
.wrapselect:after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .4em solid;
    border-right: .4em solid transparent;
    border-bottom: 0;
    border-left: .4em solid transparent;
    color: #00134e;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.4em;
}

.guest-box {background:#003d7c; padding: 36px; margin: 0px 0px 18px 0px; border-top-right-radius: 18px; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px;}
.bookhead {background: #0063c8; padding: 6px 18px; border-radius: 18px; color: #fff; font-size: 20px;}
.bookhead2 {border: 1px solid #0063c8; padding: 6px 18px; margin: 36px 0; text-align: center; border-radius: 18px; font-size: 20px;}
.bookhead3 {border-top-left-radius: 18px; border-top-right-radius: 18px; background:#0063c8; padding: 8px 24px; color: #fff; font-size: 18px; display:inline-block; margin-bottom:0;}
.bookhead4 {border-top-left-radius: 18px; border-top-right-radius: 18px; background:#8400c8; padding: 8px 24px; color: #fff; font-size: 18px; display:inline-block; margin-bottom:0;}

.list1 {list-style:none; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; margin: 24px 0;}
.list1 li {padding: 12px;}
.list2 {padding: 0px 48px 24px 48px;}
.list2 li {padding: 6px 0;}
.list3 {list-style:none; margin: 24px 0;}
.list3 li {padding: 12px;}
.icon1{font-size: 36px; color: #00ff18; float: left; padding: 0 18px; position: relative; top: -6px;}
.icon2{font-size: 36px; color: #fff800; float: left; padding: 0 18px; position: relative; top: -6px;}

.hide {display: none;}
.area2 {display: none;}

input.invalid {background-color: #fbc0cd;}
select.invalid {background-color: #fbc0cd;}
#mail-error {position: relative; width: 230px; margin: 0 0 -18px auto; top: -15px; font-size: 14px; color: #fff800;}
.tab {display: none;}

.but-request {background-color: #4CAF50; color: #ffffff; border: none; padding: 10px 20px; font-size: 17px; font-family: Raleway; cursor: pointer; width:49%; font-size: 18px; float:right;}
.but-request:disabled {opacity:0.2;}
button {background-color: #4CAF50; color: #ffffff; border: none; padding: 10px 20px; font-size: 17px; font-family: Raleway; cursor: pointer; width:49%; font-size: 18px;}
button:hover {opacity: 0.8;}
#nextBtn {float:right; border-top-right-radius: 18px; border-bottom-right-radius: 18px;}
#prevBtn {background-color: #bbbbbb; border-top-left-radius: 18px; border-bottom-left-radius: 18px;}
.step {height: 15px; width: 15px; margin: 0 2px; background-color: #bbbbbb; border: none;  border-radius: 50%; display: inline-block; opacity: 0.5;}
.step.active {opacity: 1;}
.step.finish {background-color: #4CAF50;}
.container {display: inline-block !important; width: 60px !important; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 18px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.container input {position: absolute; opacity: 0; cursor: pointer;}
.checkmark {position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 50%;}
.container:hover input ~ .checkmark {background-color: #ccc;}
.container input:checked ~ .checkmark {background-color: #2196F3;}
.checkmark:after {content: "";position: absolute;display: none;}
.container input:checked ~ .checkmark:after {display: block;}
.container .checkmark:after {top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: white;}

.container2 {display: inline-block !important; width: 100% !important; font-size: 18px; text-align:left !important; position: relative; padding: 24px 48px 24px 72px; margin-bottom: 12px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: #003d7c; border-radius: 18px;}
.container2 input {position: absolute; opacity: 0; cursor: pointer;}
.checkmark2 {position: absolute; top: 24px; left: 24px; height: 25px; width: 25px; background-color: #eee; border-radius: 4px;}
.container2:hover input ~ .checkmark2 {background-color: #ccc;}
.container2 input:checked ~ .checkmark2 {background-color: #2196F3;}
.checkmark2:after {content: ""; position: absolute; display: none;}
.container2 input:checked ~ .checkmark2:after {display: block;}
.container2 .checkmark2:after {left: 9px; top: 5px; width: 8px; height: 14px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

.tooltip {position: relative; display: inline-block; border-bottom: 1px dotted black; cursor: pointer; margin: 4px 0 0 4px;}
.tooltip .fa-question-circle {font-size: 22px;}
.tooltip .tooltiptext {visibility: hidden; width: 850px; background: #0063c8; padding: 6px 18px; border-radius: 18px; color: #fff; position: absolute; right:0; z-index: 1; font-size: 14px;}
.tooltip h2 {text-align: center; margin: 0 0 8px 0;}
.tooltip:hover .tooltiptext {visibility: visible;}

#selectprotect,#selectprotect2,#selectprotect3,#selectprotect4 {width: 55% !important;}

.box1 {background:#0063c8; padding: 6px 18px; margin: 36px auto; border-radius: 18px;}
.table1 {border-collapse: collapse; border: 1px solid #001037; margin: 24px 0; width: 100%; color:#fff;}
.table1 th {background: #041e5b;}
.table1 th, .table1 td {border-bottom: 1px solid #001037; border-top: 1px solid #001037; padding: 12px;}
.table1 tr:nth-child(even){background-color:#193985;}
.table1 tr:nth-child(odd){background-color:#041e5b;}

.errorhide {display:none;}
.errorhide2 {display:none !important;}
.errorshow {display:block; border: 1px solid red; background:#fbc0cd; color: #000; padding: 18px; border-radius: 18px; font-size: 16px; text-align: center; margin: 24px auto;}

@media screen and (max-width : 1600px) {

.img-secret {width: 1000px; height: auto;}

}

@media screen and (max-width : 900px) {

body {min-height: 1000px; background-size: 250%;}
#countdown span {padding: 8px 0px; color:#fff800; margin:0px 4px; font-size: 32px; box-shadow: 0px 4px 6px #000; width: 60px;}
#countdown-title span {width: 60px; font-size: 12px; margin:4px;}
.contain {font-size: 16px; padding: 0px 24px;}
.but-1 {padding: 18px 34px; margin: 14px; font-size: 18px;}
.but-2 {padding: 18px 34px; margin: 14px; font-size: 18px;}

}

@media screen and (max-width : 740px) {

.but-1,.but-2 {min-width: 0px; width:100%; margin: 0 0 18px 0;}

.form2 {border: 0px; padding: 0px;}
.form2 label {width:100%; margin: 0px 0px 6px 0; float:none; text-align: left;}
.form2 input[type="text"], .form2 input[type="number"], .form2 textarea, .form2 select {width:100%; float:none; margin: 0 0 12px 0;}
.form2 textarea {min-height: 160px;}
.form2 h2 {font-size: 18px;}

.form2 .alt1 {width: 19.5%; margin-right: 9px;}
.form2 .alt2 {width: 150px; margin-right: 1%;}
.form2 .alt3 {display: block; width: 100% !important; margin: 18px 0 0 0 !important; text-align: center !important;}
.form2 .unset1 {width: 100px;}

}

@media screen and (max-width : 650px) {

body {background-size: 280%;}
h1 {font-size: 24px;}
.col-50 {margin:0px; width:100%; float: none;}
.form1 label {margin: 18px 0 4px 0;}
.form1 input[type="text"], .form1 textarea, .form1 select {font-size: 14px;}
.form1 textarea {min-height: 180px;}
.submit {padding: 18px 32px; margin: 24px auto; font-size: 18px;}
.list1 {-webkit-column-count: 1; -moz-column-count: 1; column-count: 1; padding:0; margin:0;}
.list1 li {padding: 6px;}
.list3 {padding:0; margin:0;}
.list3 li {padding: 6px;}
.icon1,.icon2{font-size: 24px; padding: 0 9px 6px 0; top: 0px;}
.map {margin-top: 24px;}

}

@media screen and (max-width : 590px) {

body {min-height: 500px; background-position: center -100px, center 140%;}
    
}

@media screen and (max-width : 360px) {

body {background-size: 310%;}
.but-1 {font-size: 16px;}
.but-2 {font-size: 16px;}

}