/*---------------------------------------------------------
                        共通
---------------------------------------------------------*/
/*-----------共通-----------*/
/*カラーパレット*/
:root {
  --color-font: #121212;
  --font-size-xsmall: 0.63rem;
  --font-size-small: 0.75rem;
  --font-size-large: 1.38rem;
  --font-size-xlarge: 1.63rem;
  --font-size-xxlarge: 1.75rem;
  --font-size-h2: 1.75rem;
  --color-h2:#fff;
  --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: small;
}


/*-----------レイアウト-----------*/
body{
  position: relative;
  display: block;
  width: 100%;
  background-color: #381b1b;
  box-sizing: border-box;
}
main, section:not(#contact){
  width: fit-content;
  max-width: 850px;
  margin: 0 auto;
  padding: 3rem 3vw 2rem;
}


/*-----------ヘッダー/メイン-----------*/
header h1{
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 65%;
  background: url("../img/header.jpg");
}
main h2{
  display: block;
  width: 100%;
  max-width: 90vw;
  padding-bottom: 62.5%;
  margin: 0 auto 3rem;
  background-image: url("../img/main.jpg");
}
.term{
  position: relative;
  display: block;
  padding: 2px 0;
  margin-top: 7em;
  text-align: center;
  border-top: 3px solid;
  border-bottom: 3px solid;
  border-image: conic-gradient(#d3b447,#e8db69, #bf8e26, #e8db69,#d3b447) 1;
}
.term::before{
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 3.5em;
  top: -3.5em;
  background: url(../img/term_deco.png) no-repeat center;
  background-size: contain;
  background-position-y: -2px;
  z-index: -100;
}
.term > div{
  padding: 2em 0;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-image: conic-gradient(#d3b447,#e8db69, #bf8e26, #e8db69,#d3b447) 1;
}
  .term h3{
    padding-top: 1em;
  }
  .term p:not(.small){
    font-weight: bold;
  }
  .term b{
    font-size: var(--font-size-xlarge);
  }
  .term p.small{
    padding-top: 1rem;
    font-size: var(--font-size-xsmall);
  }
  .term p.small b{
    display: inline-block;
    padding: 0 3px;
    margin: 0.5em 3px 0;
    font-size: var(--font-size-small);
    background-color: #fff;
    color: #381b1b;
  }

/*-----------内容-----------*/
h2:not(main h2):not(#other h2):not(#app h2):not(#contact h2){
  font-size: var(--font-size-h2);
  color: var(--color-h2);
  text-align: center;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  background-image: url(../img/h2_deco.png);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 7rem;
}

  #cont ul li{
    margin-bottom: 0.5em;
    padding-left: 1.5em;
    background: url(../img/items_deco.png) no-repeat left top;
    background-size: var(--font-size-large);
  }

/*-----------代金-----------*/
#fee h2 + p{
  text-align: center;
}
#fee table{
  margin: 2rem auto;
}
   #fee tr th,#fee td{
    font-size: var(--font-size-large);
   }
   #fee th{
    padding-right: 1rem;
   }

/*-----------行程-----------*/
#sche table{
  margin-bottom: 4rem;
}
#sche .day2{
  position: relative;
}
  #sche .day2::before{
    position: absolute;
    content: "";
    width: 70%;
    height: 1px;
    margin: -2rem 15% 0;
    background: linear-gradient(#e7d968, #c19129);
  }
#sche th,#sche td{
  padding: 0.25em 0 0.25em 1rem;
}
#sche th{
  width: 5rem;
}

#sche li{
  padding-bottom: 0;
}
 #sche ul + h3{
  padding-top: 1em;
 }


/*-----------写真-----------*/
#photo ul{
  display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
  #photo li{
    width: 32%;
    padding-bottom: 2%;
  }
    #photo li p{
      padding-top: 0.25em;
      text-align: center;
    }


/*-----------詳細-----------*/
#detail th{
  padding-right: 1em;
}

/*-----------集合-----------*/
#tipla p{
  padding-bottom: 0.5em;
}


/*-----------その他-----------*/
#other > div{
  padding: 7vw 5vw 2vw 5vw;
  background-color: #463030;
}
#other > div:first-child,
#other > div:last-child{
  position: relative;
  display: block;
}
#other > div:last-child{
  padding-bottom: 10vw!important;
}
#other > div:first-child::before,
#other > div:first-child::after,
#other > div:last-child::before,
#other > div:last-child::after{
  position: absolute;
  content: "";
  display: block;
  width: 6vw;
  height: 6vw;
  background: url("../img/other_corner.png") no-repeat;
  background-size: contain;
}
#other > div:first-child::before{ top: 0; left: 0; }
#other > div:first-child::after{ top: 0; right: 0; transform: rotate(90deg);}
#other > div:last-child::before{ bottom: 0; right: 0; transform: rotate(180deg);}
#other > div:last-child::after{ bottom: 0; left: 0; transform: rotate(270deg);}

 #other h2{
  font-size: large;
  text-align: center;
  padding-bottom: 1em;
 }
  #other .items li{
    padding-bottom: 0.25em;
  }

  .cancel h2 + p{
    padding-bottom: 1em;
  }
  .cancel th{
    padding-right: 1em;
  }
  .cancel table{
    margin-bottom: 1em;
  }


/*-----------申し込み-----------*/
#app{
  text-align: center;
  padding-bottom: 4rem;
  text-align: center;
}
  #app a{
    display: block;
    height: 12vw;
    width: 48vw;
    margin: 2rem auto;
    transition: 0.2s;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 50%);
    border-radius: 6vw;
  }
  #app a:hover{
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 50%);
    padding: 5px 0 0 5px;
  }
  #app .small{
    line-height: 1.8;
  }
  #app h3{
    padding-bottom: 0.5em;
    font-size: var(--font-size-large);
  }
  #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;
  }

/*-----------フッター-----------*/
.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-xlarge: 1.5rem;
  }
  .pc-only{
    display: none;
  }
  *{
    line-height: 1.65;
  }

  main h2{
    width: 90vw;
    height: 101vw;
    background-image: url("../img/main-sp.jpg");
    background-size: contain;
  }
  #photo li{
    width: 48%;
  }

  #other > div:last-child{
    padding-bottom: 16vw!important;
  }
  #other > div:first-child::before, #other > div:first-child::after, #other > div:last-child::before, #other > div:last-child::after{
    width: 12vw;
    height: 12vw;
  }
  #app a{
    width: 80vw;
    height: 20vw;
    border-radius: 10vw;
  }

}

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

}