/*---------------------------------------------------------
                        共通
---------------------------------------------------------*/
/*-----------共通-----------*/
/*カラーパレット*/
:root {
  --color-font: #004559;
  --font-size-xsmall: 0.63rem;
  --font-size-small:  0.85rem;
  --font-size-large: 1.38rem;
  --font-size-xlarge: 1.63rem;
  --font-size-xxlarge: 2rem;
}

/* 箇条書き */
p.items, ul.items li, span.items{
  position: relative;
  padding-left: 1em;
  box-sizing: border-box;
  text-align: left;
}
  p.nopb, ul.nopb li, span.nopb{
    padding-bottom: 0!important;
  }
  /* 米印 */
  p.items.asterisk::before,ul.items.asterisk li::before, span.items.asterisk::before{
    position: absolute;
    content: "※";
    display: inline-block;
    margin-left: -1em;
  }
  span.items.asterisk::before{
    top: -3px;
    left: 1.1em;
  }
  /* 点・四角 */
  p.items.dots, ul.items.dots li,p.items.square, ul.items.square li{
    position: relative;
    box-sizing: border-box;
  }
  p.items.dots::before,ul.items.dots li::before{
    position: absolute;
    content: "・";
    display: block;
  }
  p.items.square::before,ul.items.square li::before{
    position: absolute;
    content: "◼︎";
    display: block;
    font-size: 70%;
    line-height: 2;
  }
  /* 数字 */
  ol.item.numbering, ol.items.numbering li{
    position: relative;
    box-sizing: border-box;
    counter-increment: li;
    padding-left: 1.2em;
  }
  p.items.numbering::before,ol.items.numbering li::before{
    position: absolute;
    content: counter(li) ".";
    display: block;
    margin-left: -1.2em;
  }

  /* 小さめ文字ver */
  p.items.small, ul.items.small li, span.items.small{
    padding-bottom: 0.25rem;
    font-size: var(--font-size-small);
    line-height: 1.3;
  }

.nowrap{
  display: block;
  border: none;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.nospace{
  letter-spacing: -2px;
}
small, .small, .small *{
  font-size: 0.8em;
}


/*-----------レイアウト-----------*/
body{
  background: linear-gradient(90deg,#bfecfb 30%,#00b4ed 100%);
}
*{
  font-weight: bold;
}
main, section:not(#contact), #noline > div{
  width: 80%;
  max-width: 850px;
  margin: 8vw auto;
  padding-bottom: 8vw;
}
#noline > div{ padding-bottom: 1vw; }
#noline > div:last-child{ margin-bottom: 0!important; }

section:not(#noline):not(#app):not(#contact){
  background-image: url(../img/line.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
}

/*-----------ヘッダー/メイン-----------*/
header{
  position: relative;
  margin-bottom: 12vw;
}
  header::before{
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 0;
    bottom: -12%;
    padding-bottom: 7.85%;
    background: url("../img/header_under.png") top no-repeat;
    background-size: 100%;
  }

  main {
    margin: 14vw auto 0;
    padding-bottom: 3vw;
  }
  h2.message{
    display: block;
    width: 80vw;
    height: 28.52vw;
    margin-left: -1vw;
    background-image: url(../img/main.png);
  }

/*-----------内容-----------*/
section:not(#other):not(#app):not(#contact) h2{
  display: block;
  border: none;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 50vw;
  height: 5.34vw;
  max-width: 740px;
  max-height: 79px;
  margin: 0 auto 5vw;
}
#cont h2{ background-image: url(../img/cont_h2.png); }
#fee h2{ background-image: url(../img/fee_h2.png); }
#sche h2{ background-image: url(../img/sche_h2.png); }
#join h2{ background-image: url(../img/join_h2.png); }
#detail h2{ background-image: url(../img/detail_h2.png); }
#contain h2{ background-image: url(../img/contain_h2.png); }
#tipla h2{ background-image: url(../img/tipla_h2.png); }
#air h2{ background-image: url(../img/air_h2.png); }


/*-----------ツアー内容-----------*/
#cont .tour,.option-tour{
  width: 36em;
  margin: 0 auto;
  padding-bottom: 2em;
}
  #cont .dots li{
    font-size: var(--font-size-large);
    padding-bottom: 0.25em;
  }
  #cont .dots li::before{
    margin-left: -0.75em;
  }

.option{
  display: inline-block;
  width: fit-content;
  padding: 0 0.5em;
  margin-bottom: 0.5em;
  font-size: var(--font-size-small);
  line-height: 2;
  background-color: #fff;
}
#cont p{
  text-align: center;
  padding-bottom: 1em;
}
#cont p + .items li{
  text-align: center;
}

/*-----------代金-----------*/
.fee,#sche .title, #detail ul{
  display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
  justify-content: space-between;
  width: 60vw;
  margin: 0 auto;
}
.fee li ,#sche .title li, #detail li{
  width: 45%;
}
  .plan{
    display: block;
    border-top: 2px dotted var(--color-font);
    border-bottom: 2px dotted var(--color-font);
    text-align: center;
    padding: 0.4em 0;
    margin-bottom: 1.5em;
  }
  .fee dl{
    width: fit-content;
    margin: 0 auto 0.5em;
  }
  .fee dl dt, .fee dl dd{
    display: inline-block;
    font-size: 1.2em;
  }
  .fee + div{
    display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
    justify-content: center;
    width: fit-content;
    margin: 1.5em auto;
    padding: 0.5em 2em;
    border: 2px dotted var(--color-font);
    box-sizing: content-box;
  }
  .fee + div *{
    display: inline-block;
  }
  #fee h3.option{
    margin-bottom: 0;
  }
  .fee + div p{
    padding-left: 1em;
  }
  #fee .items{
    width: fit-content;
    margin: 0 auto;
  }


/*-----------行程-----------*/
#sche > ul{
  width: fit-content;
  margin: 0 auto;
}
  #sche > ul:not(.title) > li{
    margin-bottom: 3em;
  }
  #sche li:not(.hotelbus) h3{
    width: 20vw;
    margin: 2em auto 0.5em;
  }
  #sche li:not(.hotelbus) h3 + .small{
    margin-top: -1em;
    margin-bottom: 1.5em;
    text-align: center;
  }
  #sche tr > td{
    padding-bottom: 0.5em;
  }
  #sche tr > td:first-child{
    padding-right: 1em;
  }
  #sche tr .option{
    margin-left: 0.5em;
  }
  .hotelbus h3{
    padding-bottom: 0.5em;
  }

/*-----------詳細-----------*/
#detail table{
  width: fit-content;
  margin: 0 auto;
}
#detail th{
  padding-right: 1em;
}
#detail td, #contain li{
  padding-bottom: 0.6em;
}

/*-----------集合-----------*/
#tipla p{
  text-align: center;
  margin-bottom: 1.5em;
}

/*-----------飛行機-----------*/
#air p{
  line-height: 2;
  text-align: center;
  padding-bottom: 2em;
}
#air a{
  display: block;
  width: 40vw;
  min-width: 200px;
  margin: 0 auto;
}
.blueshadow{
  filter: drop-shadow(2px 0px 10px rgb(0 128 169 / 62%));
}
.blueshadow:hover{
  filter: none;
  margin-top: -2px;
  margin-bottom: 2px;
}
/*-----------その他-----------*/
#other{
  position: relative;
  background-color: #fff;
}
#other::before{
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 4.5vw;
  margin: 5vw auto 0;
  background: url(../img/attention.png) no-repeat;
  background-size: contain;
  background-position: top center;
}
  #other .box{
    width: 80%;
    margin: 0 auto;
    padding: 10vw 0 0;
  }
  #other h2{
    display: block;
    width: 70%;
    margin: 3em auto 1.5em;
    border-bottom: 1px dotted var(--color-font);
    line-height: 2;
    text-align: center;
  }
  #other p,#other li,#other th,#other td,#app p,#contact *{
    font-weight: normal;
  }
  #other li{
    padding-bottom: 0.5em;
  }

  .cancel h2 + p{
    padding-bottom: 1em;
  }
  .cancel table{
    margin-bottom: 1em;
  }
    .cancel th{
      padding-right: 1em;
    }
  .cancel .items li{
    padding-bottom: 0!important;
  }


/*-----------申し込み-----------*/
#app{
  text-align: center;
  padding-bottom: 0!important;
}
  #app h2{
    display: block;
    width: fit-content;
    margin: 0 auto;
  }
  #app a{
    display: block;
    height: 20vw;
    width: 20vw;
    margin: 2rem auto;
  }
  #app .small{
    line-height: 1.8;
  }
  #app h3{
    padding-bottom: 0.5em;
  }
  #app h3 b{
    font-size: var(--font-size-xlarge);
  }

/*-----------お問い合わせ-----------*/
footer{
  position: absolute;
  display: block;
  width: 100%;
  left: 0;
  z-index: calc(infinity);
}
#contact{
  padding: 1.5rem 0 0.25rem;
  background: #036eb7;
  text-align: center;
  line-height: 1.7;
}
#contact h2{
  color: #fff;
}
  .contact_white{
    display: block;
    width: 90%;
    margin: 1rem auto;
    padding: 1.5rem;
    background-color: #fff;
  }
  .contact_white *, .contact_white *::before{
    color: #000;
    text-align: center;
  }
  .contact_white .items.small{
    width: fit-content;
    margin: 0.5rem auto;
  }
    .contact_white .items.small li{
      font-size: var(--font-size-xsmall)!important;
      padding-bottom: 0;
    }
  .contact_white .upper{
    font-size: var(--font-size-small);
    padding-top: 1rem;
    text-align: center;
  }
  .contact_white h3{
    padding-bottom: 0.25rem;
    font-weight: normal;
  }

/*-----------フッター-----------*/
.copyright{
  width: 100%;
  font-size: 0.63rem;
  line-height: 2.25rem;
  text-align: center;
  color:var(--color-font);
}

/*---------------------------------------------------------
                        SP
---------------------------------------------------------*/
@media screen and (max-width: 750px){
  :root {
    --font-size-h2: 1.75rem;
    --font-size-large: 1.2rem;
  }
  .pc-only{
    display: none;
  }
  *{
    line-height: 1.65;
  }

  main, section:not(#contact){
    width: 90vw;
    max-width: 100%;
  }
  main, section:not(#contact), #noline > div{
    margin: 10vw auto;
    padding-bottom: 12vw;
  }
  h2.message{
    width: 90vw;
    height: 111.86vw;
    margin: 0 auto;
    margin-top: 20vw;
    background-image: url(../img/main-sp.png);
  }
  #cont .tour, .option-tour{
    width: 90vw;
  }
  section:not(#other):not(#app):not(#contact) h2{
    width: 80vw;
    height: 12vw;
  }
  main, section:not(#contact), #noline > div{
   width: 94%; 
   flex-direction: column;
  }

  #cont .dots li{ line-height: 1.2;  padding-bottom: 0.75em;}
  #sche li:not(.hotelbus) h3{ width: 50vw; }
  .fee, #sche .title, #detail ul{ width: 100%; }
  .fee + div{ min-width: 13em; width: 52%;}
  .fee li, #sche .title li, #detail li{ width: 48%; }
  .fee dl{ text-align: center; }
  #air a{ width: 80vw; }
  
  #other .box{ width: 90%; }
  #other::before{ height: 10vw; margin: 8vw auto 0; }
  #other .box{ padding: 13vw 0 0; }
  #other h2{ width: 100%; }

  .contact_white{
    width: 80%;
  }

}

/*---------------------------------------------------------
                        PC
---------------------------------------------------------*/
@media screen and (min-width: 750px){
.sp-only{
  display: none;
}

}