/* ===============================
   Base
=============================== */

body{
  font-family: "Kosugi Maru","Noto Sans JP",sans-serif;
  line-height: 1.6;
}

h1,h2,h3{
  font-weight: 700;
}

a{
  text-decoration: none;
}

a:link,
a:visited{
  color:#333;
}

a:hover,
a:active{
  color:#999;
}

.marker_yellow{
  background: linear-gradient(transparent 60%, #ffee66 60%);
}


/* ===============================
   WTRIP Box
=============================== */

.wtrip-box{
  margin: 10px auto;
  border-collapse: separate;
  border-spacing: 0;
  background: #cef;
  border-radius: 10px;
  width: 100%;
  max-width: 550px;
  box-sizing: border-box;
}

.wtrip-box th{
  text-align: center;
  padding: 10px 10px 3px;
  font-weight: 700;
  color: #06f;
  font-size: 18px;
}

.wtrip-box td{
  padding: 10px 15px 5px;
  text-align: left;
  color: #333;
  line-height: 1.5;
}

.wtrip-box img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 8px auto 0;
}


/* ===============================
   WIP Box
=============================== */

.wip-box{
  margin: 10px auto;
  border-collapse: separate;
  border-spacing: 0;
  background: #fec;
  border-radius: 10px;
  width: 100%;
  max-width: 550px;
  box-sizing: border-box;
}

.wip-box th{
  text-align: center;
  padding: 10px 10px 3px;
  font-weight: 700;
  color: #f60;
  font-size: 18px;
}

.wip-box td{
  padding: 10px 15px 5px;
  text-align: left;
  color: #333;
  line-height: 1.5;
}

.wip-box img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 8px auto 0;
}


/* ===============================
   Form Layout
=============================== */

#formWrap{
  width:600px;
  margin:0 auto;
  color:#333;
  line-height:1.5;
  font-size:16px;
}

table.formTable{
  width:100%;
  margin:0 auto;
  border-collapse:collapse;
}

table.formTable td,
table.formTable th{
  border:1px solid #ccc;
  padding:10px;
}

table.formTable th{
  width:30%;
  font-weight:normal;
  background:#efefef;
  text-align:left;
}


/* ===============================
   Wide Form Wrapper
=============================== */

.form-wide{
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.form-wide .formTable{
  width: 100%;
  table-layout: fixed;
}

/* PC only column ratio */
@media screen and (min-width:481px){
  .form-wide .formTable th{ width: 30%; }
  .form-wide .formTable td{ width: 70%; }
}


/* ===============================
   Video Responsive
=============================== */

.video-wrap{
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: 20px auto;
}

.video-wrap::before{
  content: "";
  display: block;
  padding-top: 56.25%;
}

.video-wrap iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ===============================
   Footer Images
=============================== */

.footerWrap{
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
  text-align: center;
}

.footerWrap img.fixed565{
  width: 565px;
  max-width: 100%;
  height: auto;
}

.footerWrap img{
  max-width: 100%;
  height: auto;
}


/* ===============================
   Mobile Responsive
=============================== */

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

  #formWrap{
    width:100%;
    padding:0 10px;
    box-sizing:border-box;
  }

  .formTable,
  .formTable tbody,
  .formTable tr{
    display:block;
    width:100%;
  }

  .formTable th{
    display:block;
    width:100%;
    border-bottom:none;
    background:#f3f3f3;
    padding:10px;
    box-sizing:border-box;
  }

  .formTable td{
    display:block;
    width:100%;
    border-top:none;
    padding:12px 10px 18px;
    box-sizing:border-box;
  }

  .formTable input,
  .formTable select,
  .formTable textarea{
    width:100%;
    box-sizing:border-box;
    font-size:16px;
  }

  .form-wide{
    padding: 0 10px;
    box-sizing: border-box;
  }

  .form-wide .formTable,
  .form-wide .formTable tbody,
  .form-wide .formTable tr{
    display:block;
    width:100%;
  }

  .form-wide .formTable th,
  .form-wide .formTable td{
    display:block;
    width:100%;
    box-sizing:border-box;
  }

  .form-wide .formTable input,
  .form-wide .formTable select,
  .form-wide .formTable textarea{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    font-size:16px;
  }
}