/*============================================================
reset
============================================================ */

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html { overflow-y: scroll; }
body { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; margin: 0; padding: 0; }
ul, ol, li, dl, dt, dd { list-style: none outside none; margin: 0; padding: 0; }
div, pre, form, fieldset, input, textarea, p, th, td { margin: 0; padding: 0; }
input, textarea, select { padding: .75em .25em; }
fieldset, img, a img { border: 0 none; }
table { border-collapse: collapse; border-spacing: 0; font-size: inherit; }
th { font-style: normal; font-weight: normal; text-align: left; }
a, a:link { color: #333; text-decoration: none; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }
a:hover, a:active { text-decoration: none; }
th .th-note{ display: block; margin-top: 0.5rem; color: #bb0000; margin-left: 0.6rem; text-indent: -0.6rem;}


/*============================================================
common
============================================================ */

.clearfix, .wideslider, #container, .inr, dl, ul { min-height: 1px; }
.clearfix:after, .wideslider:after, #container:after, .inr:after, dl:after, ul:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
}
*html .clearfix, *html .wideslider, *html #container, *html .left, *html .right, *html .inr, *html dl, *html ul { height: 1px; }

body, input, select, textarea {
  color: #333;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  position: relative;
}
.inner {
  margin: 0 auto;
  position: relative;
  width: 950px;
}
.smp { display: none; }

.mt3{margin-top: 0.3rem; }
.mt10{margin-top: 1rem; }
.align-c{text-align: center;}



/*============================================================
/* header
============================================================ */
#inbound-header{
height: 67px;
background: url("//www.mwt.co.jp/web-inbound/img/header_bgimg.png")no-repeat top center;
border-bottom: 7px solid #00a5bf;
margin-bottom: 20px;
}

#inbound-header > .inner{
background-image:none;
border-bottom: 7px solid #00a5bf;
}

#header { border-bottom: 7px solid #00a5bf; margin-bottom: 20px; }
#header > .inner {
  background: url(../../mailformdata/inbound/img/header_bg.png) no-repeat top center;
  height: 60px;
}
#header .copy {
  bottom: 10px;
  right: 0;
  position: absolute;
}
#header .logo {
  left: 0;
  position: absolute;
  top: 10px;
}
.smp { position: relative; }

@media screen and (max-width:639px) {
#inbound-header{
background-image: none;
}
#header .inner { background: none; }
}


/*============================================================
/* contents
============================================================ */

table {
  border: 1px solid #d3cbaf;
  width: 100%;
}
th, td {
  border-right: 1px solid #d3cbaf;
  border-bottom: 1px solid #d3cbaf;
  padding: .75em;
}
th { background: #fbf4e2; }
th[rowspan="4"], th[colspan="2"] { vertical-align: text-top; }

th[colspan="2"] { width: 33%; }
table:not(.ui-datepicker-calendar) td { width: 67%; }

.require:after {
  content:" [ Mandatory ]";
  color: #c03;
  font-size: 10px;
}
.require.cb:after {
  content:" [ Mandatory / at least one ]";
  color: #c03;
  font-size: 10px;
}
td p { color: #c66; }
td p.dateError { color: #f00; }
td p.attention { color: #c03; margin-top: 0.5rem;  }
td select { width: 32%; }
td input + input { margin-top: .5em; }
label + input { margin-left: 10%; }
input, select, textarea {
  border: 1px solid #bbb;
  border-radius: 2px;
}
input:not([type=radio]) { width: 100%; }
input[type=checkbox] { width: 2rem; }
input[type=submit] { background: #00a5bf; border: 1px solid #00a5bf; }
input[type=button] { background: #aaa; border: 1px solid #aaa; }
input[type=radio] { display: inline-block; }
input:-ms-input-placeholder { color: #999; /* for ie */ }

td.duration input{
width: 50%;
}
td.cities label{
margin: 0 2rem 0.5rem 0;
display: inline-block;
}
label, input[type='checkbox'] {
cursor: pointer;
}


ul { letter-spacing: -.4em; }
li { display: inline-block; letter-spacing: normal; }
li + li { margin-left: 2%; }
textarea { width: 100%; }
.col2 li { width: 49%; }
.col3 li { width: 32%; }
.col4 li { width: 23.5%; }
li select { width: 100%; }

td.room .col2 li { width: 40%;}
td.room .col2 li:nth-child(even) { width: 5%; }

.age { width: 5em !important; }

.btn { margin: 3em auto 6em; text-align: center; }
.btn li { display: inline-block; width: 45%; }
.btn li + li { margin-left: 5%; }
.btn input {
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  padding: 1.5em 0;
  text-align: center;
  width: 100%;
}
.btn input:hover { opacity: .8; }
.btn > input { display: inline-block; width: 45%; }
.btn > input[value="back"] { margin-left: 5%; }

.tnx { min-height: 700px; }
.tnx hr {
  border: none;
  border-bottom: 2px solid #c66;
  color: #c66;
  margin-top: -1.5em;
  padding: 0;
}
.tnx hr:before {
  background: #fff;
  content: "\f14a";
  font-family: FontAwesome;
  font-size: 1.5em;
  position: relative;
  top: .75em;
}
.tnx hr:after {
  background: #fff;
  content: "YOUR WEBFORM WAS SUCCESSFULLY SUBMITTED";
  display: inline-block;
  font-size: 1.5em;
  padding: 0 0.5em;
  position: relative;
  top: .7em;
}
.tnx p:not(:first-of-type) {
  line-height: 1.6;
  margin-top: 1.5em;
}
.tnx p:first-of-type { color:#c66; font-size: 1.5em; margin-top: -.5em; }
.tnx p:first-of-type:before {
  background: #fff;
  content: "\f14a";
  font-family: FontAwesome;
  font-size: 2em;
  padding: 0 0.25em 0 0;
  position: relative;
  top: .1em;
}

#pagetop {
  bottom: 20px;
  position: fixed;
  right: 20px;
}
#pagetop a {
  background-color: rgba( 0, 0, 0, 0.4 );
  border-radius: 70px;
  color: #fff;
  display: block;
  font-size: 28px;
  height: 60px;
  line-height: 55px;
  text-align: center;
  width: 60px;
}

textarea#tourName{
    border: 0;
    height: auto;
    resize: none;
    field-sizing: content;
    min-height: min-content;
    font-weight: bold;
}
textarea.readonly{
    border: 0;
    height: auto;
    resize: none;
    field-sizing: content;
    min-height: min-content;
}
tr.dn{
display: none;
}

/*============================================================
/* footer
============================================================ */

#foottab {
 margin: 200px auto 0;
 width: 950px;
}
#foottab a {
 background: #ccc;
 border-radius: 3px 3px 0 0;
 font-size: 15px;
 line-height: 2;
 padding: 0.2rem 1.5rem;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 120px;
}
#foottab a:hover {
 position: relative;
 top: 1px;
}
#foottab a::before {
content:"";
display: inline-block;
-webkit-mask: url("img/f015.svg") no-repeat center center / contain;
mask-image: url("img/f015.svg");
mask-repeat: no-repeat;
mask-position: center center;
mask-size: contain;
width: 15px;
height:	15px;
margin-right: 0.3rem;
background-color: #333;
}
#footer {
 background: #ccc;
 clear: both;
 margin: 0 auto;
 padding-top: 13px;
}

#footer .copyright {
 color: #666;
 font-size: 13px;
 padding: 10px 0 30px;
 text-align: center;
}

/* ============================================================
media queries
============================================================ */

@media only screen and (max-width: 949px) {
  .inner {
    margin: 0 1%;
    width: 98%;
  }
  #header .inner { width: 98%; }

  #foottab { width: 97%; }
  #footer > .inner { display: none; }
  #footer .copyright .inner ul, #footer .copyright .inner p {
    float: none;
    text-align: center;
  }
  #footer .copyright .inner li {
    margin-bottom: 5px;
    text-align: center;
  }
}

@media only screen and (max-width: 679px) {
  .inner {
    margin: 0 2%;
    width: 96%;
  }
  #header .inner { width: 96%; }
  th[rowspan="4"], th[rowspan="6"] { background: #f9b53a; }
  th, td {
    border-right: 0 none;
    display: block;
  }
  .input[type="text"] { width: 100%; }
  select { max-width: 100%; }
  .col4 li { width: 100%; }
  .col4 li + li { margin: .5em 0 0 0; }
}

@media only screen and (max-width: 479px) {
  td > select { width: 100%; }
  input::placeholder { font-size: 12px; }
  input:-ms-input-placeholder { font-size: 12px; /* for ie */ }
  .col2 li, .col3 li { width: 100%; }
  .col2 li + li, .col3 li + li { margin: .5em 0 0 0; }
  .btn input + input { margin: 1em 0 0 0; }
  .pc { display: none; }
}



/*============================================================
check area
============================================================ */

div.check-area{
width: 80%;
margin: 3rem auto 0;
padding: 1.5rem;
border: 3px double #b1aa93;
border-radius: 0.5rem;
background-color: #F8F8F8;
}
div.check-area label:first-child{
margin-top: 1rem;
}
div.check-area label{
display: block;
text-indent: -2rem;
padding-left: 2rem;
}
div.check-area label a{
color: #0066cc;
border-bottom: 1px solid #0066cc;
transition: initial;
text-indent: 0;
}
div.check-area label a:hover{
color: #ff6600;
border-bottom: 1px solid #ff6600;
}

/*================================

  Google reCAPTCHA V3

================================*/

.grecaptcha-badge{
    bottom: 8em !important;
}


/*================================

  extra

================================*/

  #date {width: 10em !important;}
  .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-widget-header, .ui-datepicker th { font-weight: normal; }
  img.ui-datepicker-trigger { cursor: pointer; margin-left: 7px !important; vertical-align: middle; }
  @media only screen and (max-width: 679px) {
  .ui-datepicker { width: auto; }
  .ui-datepicker-calendar thead,
  .ui-datepicker-other-month.ui-datepicker-unselectable.ui-state-disabled { display: none; }
  .ui-datepicker td span, .ui-datepicker td a { padding: 1em; }
  }
  
/*================================

  nikko

================================*/
body{
    background: url("../img/bg01.jpg");
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.inner{
    margin-top: 2em;
}
th {
    background: #62b8c2;
    color: #FFF;
}
th{
    border-right: 1px solid #06abae;
    border-bottom: 1px solid #06abae;
    padding: .75em;
}
td{
    background-color: #FFF;
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    padding: .75em;
}
textarea#tourName{
    font-size: 1.2em;
    padding: 0.5em 0;
}
.require:after {
    content: " [ Mandatory ]";
    color: #FFDD00;
    font-size: 10px;
}
#selectExperience label{
    display: inline-block;
    margin-right: 2em;
    padding: 0.2em 0;
}
.dateError{
    display: inline-block;
    margin-left: 1em;
}
.dateError:empty{
    display: none;
}

input[type=submit] {
    background: #fb5e5e;
    border: 1px solid #fb5e5e;
}
div.check-area label{
    margin: 0.5em 0;
}

@media only screen and (max-width: 679px) {
th,td,th[colspan="2"],table:not(.ui-datepicker-calendar) td{
    width: 100%;
}
th[rowspan="4"], th[rowspan="6"] {
    background: #00809d;
}
div.check-area{
    width: 90%;
}


}