@charset"utf-8";
@import "common.css";

/* header
-------------------------------------------------- */
header div.logo-area a{
  display: inline-block;
}
@media print, screen and (max-width: 960px) {
  header div.logo-area a{
    margin-left: 2rem;
    display: block;
    width: 18rem;
    height: 4rem;
  }
}

/* "h" tag
-------------------------------------------------- */
/* common */
h2.h2-title{
  color: #fff;
  font-size: 3.6rem;
  line-height: 1.2;
  text-shadow: 2px 2px 0 #333;
}
h2.h2-title::after{
  display: block;
  font-size: 1.8rem;
  line-height: 1.6;
}
h2.h2-title.tourplan::after{
  content: "ツアープラン";
}
h2.h2-title.information::after{
  content: "お知らせ";
}
h2.h2-title.contact::after{
  content: "お問い合わせ";
}
h2.h2-title.reservation::after{
  content: "ツアー予約";
}
h3.h3-cmn{
  font-size: 2.8rem;
  line-height: 1.4;
  font-weight: bold;
  text-align: center;
  margin-bottom: 5rem;
}
h4.h4-cmn{
  font-size: 2.4rem;
  line-height: 1.4;
  font-weight: bold;
  text-align: center;
  margin-bottom: 3rem;
}
h5.h5-cmn{
  font-size: 1.8rem;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 2rem;
}
@media print, screen and (max-width: 1280px) {
  h3.h3-cmn{
    font-size: 2.6vw;
    margin-bottom: 6%;
  }
  h4.h4-cmn{
    font-size: 2.2vw;
    margin-bottom: 4%;
  }
  h5.h5-cmn{
    font-size: 1.8vw;
    margin-bottom: 5%;
  }
}
@media print, screen and (max-width: 960px) {
  h3.h3-cmn{
    font-size: 3vw;
    margin-bottom: 6%;
  }
  h4.h4-cmn{
    font-size: 2.4vw;
    margin-bottom: 4%;
  }
  h5.h5-cmn{
    font-size: 2.2vw;
    margin-bottom: 3%;
  }
}
@media print, screen and (max-width: 767px) {
  h3.h3-cmn{
    font-size: 2.4rem;
    margin-bottom: 3rem;
  }
  h4.h4-cmn{
    font-size: 2.0rem;
    margin-bottom: 3rem;
  }
  h5.h5-cmn{
    font-size: 1.8rem;
    margin-bottom: 2rem;
  }
}

/* breadcrumbSec
-------------------------------------------------- */
section.breadcrumbSec div.breadcrumb{
  margin: 5rem 0 10rem;
}
section.breadcrumbSec div.breadcrumb ul li{
  font-size: 1.4rem;
  display: inline-block;
}
section.breadcrumbSec div.breadcrumb ul li::after{
  content: '>';
  padding: 0 1.5rem;
}
section.breadcrumbSec div.breadcrumb ul li:last-child::after{
  display: none;
}
section.breadcrumbSec div.breadcrumb ul li p{
  display: inline-block;
  font-size: inherit;
}
section.breadcrumbSec div.breadcrumb ul li a{
  text-decoration: underline;
  color: #009A66;
}
section.breadcrumbSec div.breadcrumb ul li a:hover{
  opacity: 0.4;
  transition: 0.6s;
}
@media print, screen and (max-width: 1280px) {
  section.breadcrumbSec div.breadcrumb{
    margin: 5% 0 8%;
  }
}
@media print, screen and (max-width: 960px) {
  section.breadcrumbSec div.breadcrumb{
    margin: 4% 0 8%;
  }
}
@media print, screen and (max-width: 767px) {
  section.breadcrumbSec div.breadcrumb{
    margin: 3rem 0 7rem;
  }
  section.breadcrumbSec div.breadcrumb ul li{
    font-size: 1.3rem;
    line-height: 1.6;
  }
  section.breadcrumbSec div.breadcrumb ul li::after{
    padding: 0 1.0rem;
  }
}

/* contentVisualSec
-------------------------------------------------- */
section.contentVisualSec{
  width: 100%;
  height: 60rem;
  position: relative;
}
/* tourplan */
section.contentVisualSec.tourplan{
  background: url(../img/tourplan/visual_tourplan.jpg) center center / cover no-repeat;
}
/* contact */
section.contentVisualSec.contact{
  background: url(../img/contact/visual_contact.jpg) center center / cover no-repeat;
}
/* reservation */
section.contentVisualSec.reservation{
  background: url(../img/reservation/visual_reservation.jpg) center center / cover no-repeat;
}
/* privacy */
section.contentVisualSec.information{
  background: url(../img/information/visual_information.jpg) center center / cover no-repeat;
}
@media print, screen and (max-width: 480px) {
  section.contentVisualSec{
    height: 100vh;
  }
}

/* titleSec
-------------------------------------------------- */
div.titleSec{
  position: absolute;
  top: 51%;
  left: 0;
  right: 0;
  text-align: center;
  transform: translateY(-49%);
  z-index: 1;
}
@media print, screen and (max-width: 767px) {
  div.titleSec{
    top: 50%;
    transform: translateY(-50%);
  }
}

/* ==================================================
ツアープラン
================================================== */
section.tourplanSec h3.h3-cmn{
  margin-bottom: 3rem;
}
section.tourplanSec h4.h4-cmn{
  margin-bottom: 5rem;
}
section.tourplanSec h5.h5-cmn{
  text-align: center;

}
section.tourplanSec div.inner{
  max-width: 900px; 
}
section.tourplanSec div.img-area.wide{
  margin: 7rem auto 0;
}
section.tourplanSec div.lead-tourplan p{
  text-align: center;
  font-size: 1.8rem;
  line-height: 2.2;

}
section.tourplanSec div.tourplan{
  margin: 10rem auto 0;
}
section.tourplanSec div.tourplan p.desc{
  margin-bottom: 5rem;
}
section.tourplanSec div.tourplan div.contentwrap{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; 
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
section.tourplanSec div.tourplan div.contentwrap.c01{
  margin-top: 7rem;
}
section.tourplanSec div.tourplan div.contentwrap.c02{
  webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
section.tourplanSec div.tourplan div.contentwrap div.img{
  width: 50%;
}
section.tourplanSec div.tourplan div.contentwrap div.txt{
  width: 50%;  
}
section.tourplanSec div.tourplan div.contentwrap div.txt p{
  width: 85%;
  margin: 0 auto;
}
section.tourplanSec div.tourplan.t01 div.contentwrap div.txt{
  text-align: center;
}
section.tourplanSec div.tourplan div.tourdetail{
  background: #F5F5F5;
  margin-top: 7rem;
  padding: 7rem 0;
}
section.tourplanSec div.tourplan div.tourdetail table th{
  width: 19rem;
  padding: 2.5rem 0;
  line-height: 1.8;
  border-bottom: 1px solid #A1A1A1;
  text-align: left;
}
section.tourplanSec div.tourplan div.tourdetail table th.top{
  border-top: 1px solid #A1A1A1;
}
section.tourplanSec div.tourplan div.tourdetail table td{
  padding: 2.5rem 0;
  line-height: 1.8;
  border-bottom: 1px solid #A1A1A1;
}
section.tourplanSec div.tourplan div.tourdetail table td.top{
  border-top: 1px solid #A1A1A1;
}
@media print, screen and (max-width: 1280px) {
  section.tourplanSec h3.h3-cmn{
    margin-bottom: 3%;
  }
  section.tourplanSec h4.h4-cmn{
    margin-bottom: 5%;
  }
  section.tourplanSec div.img-area.wide{
    margin: 6% auto 0;
  }
  section.tourplanSec div.tourplan{
    margin: 8% auto 0;
  }
  section.tourplanSec div.tourplan div.tourdetail{
    margin-top: 6%;
    padding: 6% 0;
  }
  section.tourplanSec div.tourplan div.contentwrap div.txt p{
    font-size: 1.4vw;
  }
}
@media print, screen and (max-width: 960px) {
  section.tourplanSec h3.h3-cmn{
    margin-bottom: 2%;
  }
  section.tourplanSec h4.h4-cmn{
    margin-bottom: 4%;
  }
  section.tourplanSec div.img-area.wide{
    margin: 5% auto 0;
  }
  section.tourplanSec div.tourplan{
    margin: 7% auto 0;
  }
  section.tourplanSec div.tourplan div.tourdetail{
    margin-top: 5%;
    padding: 5% 0;
  }
  section.tourplanSec div.tourplan div.contentwrap div.txt p{
    width: 90%;
    margin: 0 auto;
    font-size: 1.8vw;
  }
}
@media print, screen and (max-width: 767px) {
  section.tourplanSec h3.h3-cmn{
    margin-bottom: 2rem;
  }
  section.tourplanSec h4.h4-cmn{
    margin-bottom: 3.5rem;
  }
  section.tourplanSec div.img-area.wide{
    margin: 5rem auto 0;
  }
  section.tourplanSec div.tourplan{
    margin: 7rem auto 0;
  }
  section.tourplanSec div.tourplan div.contentwrap{
    display: block;
  }
  section.tourplanSec div.tourplan div.contentwrap div.img{
    width: 80%;
    margin: 0 auto 3rem;
  }
  section.tourplanSec div.tourplan div.contentwrap div.txt{
    width: 80%;
    margin: 0 auto 3rem;
  }
  section.tourplanSec div.tourplan div.contentwrap div.txt p{
    width: 100%;
    margin: 0 auto;
    font-size: 1.5rem;
  }
  section.tourplanSec div.tourplan div.tourdetail{
    margin-top: 5rem;
    padding: 5rem 0;
  }
  section.tourplanSec div.tourplan div.tourdetail table th{
    width: 100%;
    display: block;
    padding: 2rem 0 0;
    line-height: 1.8;
    border-bottom: none;
    text-align: left;
  }
  section.tourplanSec div.tourplan div.tourdetail table td{
    display: block;
    padding: 0.5rem 0 2rem;
  }
  section.tourplanSec div.tourplan div.tourdetail table td.top{
    border-top: none;
  }
}

/* ==================================================
お知らせ一覧
================================================== */
/* pagenationSec
-------------------------------------------------- */
section.pagenationSec{
  margin: 7rem auto 0;
  text-align: center;
}
.wp-pagenavi a, 
.wp-pagenavi span {
  background: #B5B5B5;
  width: 3.5rem;
  line-height: 2.5;
  text-align: center;
  display: inline-block;
  margin-right: 1.0rem;
  border-radius: 50%;
  color: #fff;
}
div.wp-pagenavi span.current{
  background: #009A66!important;
  cursor: pointer;
}
div.wp-pagenavi span.current:hover{
  opacity: 0.4!important; 
  transition: 0.6s!important; 
}
div.wp-pagenavi a.nextpostslink{
  margin-right: 0!important; 
}
div.wp-pagenavi a:hover{
  opacity: 0.4!important; 
  transition: 0.6s!important; 
}
@media print, screen and (max-width: 767px) {
  section.pagenationSec{
    margin: 7rem auto 0;
    text-align: center;
  }
  .wp-pagenavi a, 
  .wp-pagenavi span {
    background: #B5B5B5;
    width: 3.2rem;
    height: 3.2rem;
    line-height: 2.0;
    margin-right: 0.8rem;
  }
}

/* ==================================================
お知らせ詳細
================================================== */
/* columnDetailSec
-------------------------------------------------- */
h3.h3-column-ttl{
  font-size: 2.4rem;
  border-bottom: 1px solid #C8C8C8;
  position: relative;
  padding-bottom: 1rem;
  margin-bottom: 3rem;
}
section.columnDetailSec div.inner{
  max-width: 900px; 
}
section.columnDetailSec div.column-date{
  text-align: right;
  margin-bottom: 5rem;
}
section.columnDetailSec div.column-date p{
  font-size: 1.4rem;
}
section.columnDetailSec div.column-txt,
section.columnDetailSec div.column-txt p{
  line-height: 2;
}
section.columnDetailSec div.column-txt img{
  width: 90%;
  height: auto;
  margin: 2rem auto;
}
section.columnDetailSec div.blog-navi{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 5rem 0;
  color: #009A66;
}
section.columnDetailSec div.blog-navi a{
  color: #3AB0E2;
  text-decoration: underline;
}
section.columnDetailSec div.blog-navi a:hover{
  opacity: 0.4;
  transition: 0.6s;
}
@media print, screen and (max-width: 767px) {
  h3.h3-column-ttl{
    font-size: 2.0rem;
  }
  section.columnDetailSec div.column-txt img{
    width: 100%;
  }
}

/* ==================================================
お問い合わせ
================================================== */
/* contactSec
-------------------------------------------------- */
section.contactSec div.inner{
  max-width: 900px;
}
section.contactSec div.button-area{
  margin: 7rem auto 0;
}
@media print, screen and (max-width: 767px) {
  section.contactSec div.button-area{
    margin: 5rem auto 0;
  }
}

/* ==================================================
ツアー予約
================================================== */
/* reservationSec
-------------------------------------------------- */
section.reservationSec h3{
  margin-bottom: 3rem;
}
section.reservationSec h4{
  color: #009A66;
}
section.reservationSec div.inner{
  max-width: 900px;
}
section.reservationSec div.block.b01{
  margin-bottom: 10rem;
}
section.reservationSec p.desc{
  margin-bottom: 5rem;
  text-align: center;
}
section.reservationSec p.desc a{
  color: #009A66;
  text-decoration: underline;
}
section.reservationSec p.desc a:hover{
  opacity: 0.4;
  transition: 0.6s;
}
section.reservationSec div.button-area{
  margin: 5rem auto 0;
}
@media print, screen and (max-width: 767px) {
  section.reservationSec p.desc{
    text-align: left;
  }
  section.reservationSec div.block.b01{
    margin-bottom: 7rem;
  }
}

/* ==================================================
送信完了
================================================== */
/* sendmessageSec
-------------------------------------------------- */
section.sendmessageSec table.contactInfo{
    width: 70%;
    margin: 5rem auto 0;
    border: 1px solid #ddd;
    border-collapse: collapse;
}
section.sendmessageSec table.contactInfo th {
    text-align: center;
    background-color: #333;
    color: #fff;
    font-weight: normal;
    border: 1px solid #ddd;
    padding: 2.0rem 0 1.8rem;
}
section.sendmessageSec table.contactInfo td {
    text-indent: 2rem;
    border: 1px solid #ddd;
}
@media screen and (max-width: 767px){
  section.sendmessageSec table.contactInfo{
      width: 100%;
      margin: 3rem auto 0;
      border-collapse: collapse;
  }
  section.sendmessageSec table.contactInfo th{
    width: 100%;
    display: block;
    padding: 1.5rem;
    line-height: 1.5;
    border-top: none;
    border-left: none;
    border-right: none;
    text-align: center;
  }
  section.sendmessageSec table.contactInfo td {
    display: block;
    border: none;
    box-sizing: content-box;
    padding: 1.5rem;
    line-height: 1.5;
    text-align: center;
    text-indent: 0;
  }
}

/* table
-------------------------------------------------- */
/* placeholder */
/* ▼IE10・IE11用 */
:-ms-input-placeholder {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Noto Serif JP", serif;
  font-size: 1.4rem;
}
/* ▼Chrome・Safari・Opera用(※1：Edgeでも有効) */
::-webkit-input-placeholder {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Noto Serif JP", serif;
  font-size: 1.4rem;
}
/* ▼Firefox18以前用(※2) */
:-moz-placeholder {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Noto Serif JP", serif;
  font-size: 1.4rem;
}
/* ▼Firefox19以上用(※3) */
::-moz-placeholder {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Noto Serif JP", serif;
  font-size: 1.4rem;
}
/* ▼CSS4標準(予定)の記述 */
::placeholder {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Noto Serif JP", serif;
  font-size: 1.4rem;
}

/* span */
dl.form span.required{
  color: #D2302F;
  margin-left: 1rem;
  font-size: 1.2rem;
  line-height: 1.4;
}
dl.form span.optional{
  color: #FDD23E;
  margin-left: 1rem;
  font-size: 1.2rem;
  line-height: 1.4;
}
dl.form{
  width: 100%;
}
/* dt */
dl.form dt{
  width: 100%;
  font-weight: bold;
}
/* dd */
dl.form dd{
  width: 100%;
  margin: 0.5rem 0 2rem;
}
dl.form dd input{
  line-height: 3.5;
  height: 3.5em;
  padding-left: 1rem;
  border: 1px solid #808080;
  width: 100%;
}
dl.form dd input[type=radio] {
    line-height: 2.0;
    height: 2em;
    width: inherit;
}
dd.remarks{
  margin: 0.5rem 0 0;
}
dd.remarks textarea{
  width: 100%;
  height: 15em;
  line-height: 1.6;
  padding-left: 1rem;
  border: 1px solid #808080;
}
span.wpcf7-list-item {
    display: block!important;
    margin: 0!important;
}
/* error */
.wpcf7 .wpcf7-not-valid {
    background: pink;
}
span.wpcf7-not-valid-tip{
  display: none!important;
}
@media print, screen and (max-width: 767px) {
  dl.form dd input{
    line-height: 3.2;
    height: 3.2em;
  }
  dl.form dd{
    margin: 0 0 2rem;
  }
  dd.remarks textarea{
    height: 12em;
  }
  dd.remarks{
    margin: 0;
  }
}

/* ==================================================
以下、装飾の指定
================================================== */
/*iPhoneでinput要素にCSSが効かない時 */
input[type="button"],input[type="text"],input[type="email"],input[type="number"],input[type="tel"],input[type="date"],input[type="submit"],textarea{
   -webkit-appearance: none!important;
}