@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;500;700&display=swap');

/* CSS Document */
:root{
  --content-color-base: #333;
  --content-color-green: #268071;
  --content-color-d_green: #268071;
  --content-color-moss: #589d57;
  --content-color-brown: #685348;
  --content-color-blue: #1f7099;
  --content-color-cream: #fff5d7;
  --content-color-red: #DF0D00;
  --content-color-l_cream: #fffbf0;
  --content-color-t_green: rgba(13 142 65 / 80%);
  --content-color-t_brown: rgba(104 83 72 / 70%);
  --bg-img-setting: no-repeat center center / contain;
  --bg-cover-setting: no-repeat center top / 100%;
  --bg-btn-setting: no-repeat center bottom / 1920px;
  --bg-width-pc: max(100%, 1920px);
  --content-width: min((710vw / 7.5), 992px);
  --font-size-pc: 14px;
  --font-size-sp: calc(24vw / 7.5);
  --content-font-size: min(var(--font-size-sp), var(--font-size-pc));
  --font-serif: 'Noto Serif JP', serif;
  --font-sans: 'Noto Sans JP', sans-serif;
  --content-hover-speed: 0.3s;
  --content-shadow: 0 0 4px rgb(0 0 0 / 30%);
  --content-arrow-down: url(../images/arrow01.png);
  --content-arrow-right: url(../images/arrow02.png);
  --content-border_ss: 1px solid;
  --content-border_s: 1px solid;
  --content-border_m: 2px solid;
  --content-border_l: 4px solid;
}

.nopc,
.is-sp,
.is-tb{
  display: none
}
.main{
  font-family: var(--font-serif);
  font-size: var(--content-font-size);
  font-weight: 500;
  color: var(--content-color-base);
  position: relative;
}
.main *{
  box-sizing: border-box;
}
.main::before{
  content: "";
  display: block;
  background: url("../images/bg.jpg") no-repeat center / cover;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1
}
.inner{
  width: var(--content-width);
  margin: auto;
  position: relative
}
a{
  transition: var(--content-hover-speed);
}
.note__txt{
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  padding-left: 1.0em;
  text-indent: -1.0em;
}

/*** タイトル・ナビ ***/
.breadcrumb__contents{
  background: #FFF;
}
#js-breadcrumb{
  width: 1024px;
  margin: auto
}
.title__wrapper{
  width: 100%;
  position: relative;
  padding-bottom: 150px;
}
.title-logo{
  width: var(--content-width);
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 48px 0;
}
.nav__wrapper{
  width: 100%;
  background: var(--content-color-t_green);
  margin-bottom: 60px;
}
.nav__wrapper>.inner{
  display: flex;
}
.nav__list{
  width: calc(100% - 100px);
  margin: auto;
  display: flex;
  border-left: var(--content-border_m) #FFF;
}
.nav__list>li {
  width: calc(100% / 5);
  border-right: var(--content-border_m) #FFF;
}
.nav__list>li>a {
  display: block;
  font-size: min(16px, (14vw / 7.68));
  color: #FFF;
  text-align: center;
  padding: 16px 0 24px;
  position: relative;
}
.nav__list>li>a::after {
  content: "";
  background:var(--content-arrow-down) var(--bg-img-setting);
  width: 12px;
  height: 9px;
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  margin: auto;
}
.nav__list>li>a:hover {
  background: var(--content-color-brown)
}
.display_selected {
  width: 100px;
  height: 100%;
  background: var(--content-color-brown);
  font-size: min(16px, (14vw / 7.68));
  font-weight: bold;
  color: #FFF;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  z-index: 20
}
.display_selected::after {
  content: "";
  background: var(--content-arrow-down) var(--bg-img-setting);
  width: 12px;
  height: 9px;
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  margin: auto;
}
.dep-select-zone {
  display: none;
  width: 100px;
  background: #FFF;
  position: absolute;
  z-index: 30;
  border: var(--content-border_s) var(--content-color-brown);
  border-top: none;
}
.dep-select li {
  cursor: default;
  padding: 2px 8px;
  font-weight: bold;
  text-align: center;
  line-height: 1.5
}
.dep-select li:hover, .dep-select li.selected {
  color: #FFF;
  background: var(--content-color-brown);
}
.close-button{
  display: none
}

@media (768px <= width <= 1024px){
  .nav__wrapper>.inner{
    width: 100vw
  }
  .nav__list{
    border-left: none
  }
 
}



.title__wrapper .copy__area {
  padding-top: 56px;
  position: relative
}
.title__wrapper .copy__area::before {
  content: "";
  background: url("../images/txt_intro.png") var(--bg-img-setting);
  width: 166px;
  height: 50px;
  position: absolute;
  top: 10px;
  left: 20px
}
.title__wrapper .copy__area::after{
  content: "";
  background: url("../images/yakusaru.png") var(--bg-img-setting);
  width: 481px;
  height: 181px;
  position: absolute;
  right: 0;
  bottom: -150px
}
.title__wrapper .copy__area .bodycopy{
  line-height: calc(28 / 16);
}

/*** メインコンテンツ ***/
.content__wrapper{
  width: 100%;
  padding: 60px 0
}
.head-title{
  width: 600px;
  margin: 0 auto 40px;
  padding: 16px 0;
  background: var(--content-color-moss);
  font-size: 32px;
  font-weight: bold;
  color: var(--content-color-cream);
  text-align: center;
  position: relative;
}
.head-title>span{
  font-size: 60%;
  color: #FFF;
  font-weight: 400
}
.head-title::before{
  content: "";
  background: var(--bg-img-setting);
  background-image: url("../images/txt_yakushima02.png");
  width: 131px;
  height: 54px;
  position: absolute;
  top: -10px;
  left: -65px
}
.sub-title{
  font-size: 24px;
  font-weight: bold;
  color: var(--content-color-brown);
  text-align: center;
  margin-bottom: 10px;
}
.copy__area {
  margin: auto;
  padding: 16px;
  background: rgb(255 255 255 / 70%);
  box-shadow: var(--content-shadow);
}
.bodycopy {
  color: var(--content-color-brown);
}
.bodycopy .bodycopy__midashi{
  display: block;
  font-size: 16px;
  font-weight: bold
}
.bodycopy>sup{
  font-size: 10px;
  vertical-align: text-top;
}

/*** ツアー ***/
.content__wrapper.tour{
  background: url("../images/bg_02.png") repeat;
  padding-bottom: 200px;
}
.content__wrapper.tour .inner::after{
  content: "";
  background: url("../images/yakushika.png") var(--bg-img-setting);
  width: 508px;
  height: 179px;
  position: absolute;
  bottom: -200px;
  left: 0
}
.area00 {
  display: none;
  font-family: var(--font-sans);
}
.product__area+.product__area{
  margin-top: 48px;
}
.product-list.card-style>li .product-list__item .item-photo__wrapper .item-txt__port{
  background: var(--content-color-t_brown)
}
.more__link {
  width: 600px;
  margin: 30px auto;
}
.more__link>a {
  display: block;
  font-size: 16px;
  color: #FFF;
  background: var(--content-color-brown);
  text-align: center;
  padding: 16px;
  border-radius: 6px;
  position: relative;
}
.more__link>a::after{
  content: "";
  background: var(--content-arrow-right) var(--bg-img-setting);
  width: 10px;
  height: 14px;
  position: absolute;
  top: 0;
  right: 16px;
  bottom: 0;
  margin: auto
}
.more__link>a:hover{
  opacity: .8
}

/***** トレッキングインフォメーション *****/
.content__wrapper.trek{
  background: url("../images/bg_01.png") repeat, #FFF;
}
.head-title#trek{
  background: var(--content-color-brown);
}
.head-title#trek::before{
  background-image: url("../images/txt_yakushima.png")
}
.head-title#trek::after{
  content: "";
  background: url("../images/ill_trekking.png") var(--bg-img-setting);
  width: 108px;
  height: 74px;
  position: absolute;
  right: -54px;
  bottom: -15px;
}
.content__wrapper.trek .copy__area{
  margin-bottom: 24px
}
.trek__list{
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}
.trek__list>li{
  width: calc((100% - 20px) / 2);
  background: #FFF;
}
.trek__img{
  width: 100%;
  height: 300px;
  position: relative;
}
.trek__img>img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.trek__name{
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  background: var(--content-color-t_green);
  padding: 8px;
  font-size: 22px;
  font-weight: bold;
  color: #FFF;
  text-align: center
}
.trek__name>small{
  font-size: 80%;
  font-weight: normal;
}
.trek__item{
  padding: 10px;
}
.trek__course{
  margin: 8px auto;
  background: var(--content-color-cream);
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 20px 10px 10px;
  position: relative
}
.trek__course::before{
  content: "トレッキングツアーコース一例";
  background: var(--content-color-moss);
  color: var(--content-color-cream);
  padding: 0 3px;
  position: absolute;
  top: 0;
  left: 0;
}
.content__wrapper.trek .sub-title{
  background: var(--content-color-moss);
  color: #FFF;
  margin-bottom: 0;
  padding: 8px 0
}
.howto__wrapper{
  background: #FFF;
  padding: 10px;
  font-family: var(--font-sans);
}
.howto__box{
  margin-bottom: 16px;
}
.howto__midashi,
.notice__title{
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px
}
.howto__list{
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.howto__list>li{
  width: calc((100% - (2px * 4)) / 5);
  padding: 4px 8px;
  background: var(--content-color-cream);
}
.howto__list>li:nth-child(even){
  background: var(--content-color-l_cream)
}
.howto__list.is-grow>li{
  flex-grow: 1
}
.item__name{
  font-weight: bold;
}
.item__txt{
  font-size: 12px;
}
.trek__notice>li{
  padding-left: 1.0em;
  text-indent: -1.0em;
}

/*** おすすめスポット ***/
.content__wrapper.spot{
  background: url("../images/bg_spot.png") var(--bg-btn-setting), #FFF;
}
.head-title#spot{
  margin-bottom: 60px
}
.spot__content{
  position: relative
}
.spot__content::before{
  content: "";
  background: var(--bg-img-setting) url("../images/map.png");
  width: 480px;
  height: 414px;
  position: absolute;
  top: -40px;
  left: 0;
}
.spot__card{
  display: flex;
  flex-wrap: wrap;
  gap: 32px 16px;
}
.spot__card::before{
  content: "";
  display: block;
  width: calc(((100% - (16px * 3)) / 4) * 2 + 16px);
}
.spot__card>li{
  width: calc((100% - (16px * 3)) / 4);
  background: #FFF;
}
.spot__img{
  width: 100%;
  height: 170px;
  position: relative;
}
.main_img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.icon_img{
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
}
.spot__name{
  font-size: 18px;
  font-weight: bold;
  line-height: 1.0;
  margin-bottom: 8px;
}
.spot__name>small{
  font-size: 12px;
}
.sea .spot__name{
  color: var(--content-color-blue)
}
.wood .spot__name{
  color: var(--content-color-green)
}
.spot__item{
  padding: 8px;
}

@media (768px <= width <= 1024px){
  .spot__content::before{
    width: calc(((100% - (16px * 3)) / 4) * 2 + 16px);
  }
}

/***** モデルプラン *****/
.content__wrapper.model{
  background: url("../images/bg_01.png") repeat, #FFF;
}
.head-title#model{
  background: var(--content-color-brown);
  margin-bottom: 64px
}
.head-title#model::before{
  background-image: url("../images/txt_yakushima.png")
}
.select-tab{
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(auto, 460px));
  justify-content: center;
  margin-bottom: 32px;
}
.select-tab>li{
  background: var(--content-color-d_green);
  border-radius: 10px;
  padding: 16px 12px;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  cursor: pointer
}
.select-tab>li.is-current{
  background: var(--content-color-cream);
  color: var(--content-color-brown);
  position: relative
}
.select-tab>li.is-current::after{
  content: "";
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--content-color-cream);
  width: 20px;
  height: 20px;
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  margin: auto
}
.select-wrapper{
  font-family: var(--font-sans);
}
.select-content{
  display: none
}
.select-content.is-active{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.select-content.is-dbl{
  grid-template-columns: repeat(2, 1fr);
}
.course-box{
  background: var(--content-color-cream);
}
.select-content.is-dbl .course-box:first-child{
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}
.select-content.is-dbl .course-box:nth-child(2){
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.select-content.is-dbl .course-box:last-child{
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.course-day{
  background: var(--content-color-brown);
  padding: 4px;
  font-size: 16px;
  color: #FFF;
  text-align: center;
}
.course-list{
  display: grid;
  gap: 24px;
  padding: 12px;
}
.course-list>li{
  display: grid;
  gap: 4px;
  position: relative
}
.course-list>li:not(:last-child)::after{
  content: "";
  border-left: dotted 4px var(--content-color-brown);
  width: 4px;
  height: 15px;
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  margin: auto;
}

.action-txt{
  font-size: 16px;
  font-weight: bold;
  color: var(--content-color-brown);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 4px
}
.action-txt.is-car,
.action-txt.is-bus{
  color: var(--content-color-d_green);
}
.action-txt.is-ship{
  color: var(--content-color-d_green);
  text-align: left
}
.action-txt::before{
  content: "";
  background: var(--bg-img-setting);
  width: 36px;
  height: 36px;
  display: block;
}
.action-txt.is-air::before{
  background-image: url("../images/icon_air.svg")
}
.action-txt.is-hotel::before{
  background-image: url("../images/icon_htl.svg")
}
.action-txt.is-car::before{
  background-image: url("../images/icon_car.svg")
}
.action-txt.is-port::before{
  background-image: url("../images/icon_port.svg")
}
.action-txt.is-ship::before{
  background-image: url("../images/icon_ship.svg")
}
.action-txt.is-bus::before{
  background-image: url("../images/icon_bus.svg")
}
.spot-box{
  background: #FFF;
  border: var(--content-border_s) var(--content-color-brown);
  padding: 4px;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 6px
}
.spot-box.is-big{
  grid-template-columns: 140px 1fr;
}
.spot-box.point{
  grid-template-columns: auto
}
.spot-img{
  width: 100%;
  height: auto;
}
.spot-img>img{
  object-fit: cover;
}
.spot-icon{
  display: inline-block;
  background: var(--content-color-d_green);
  font-size: 12px;
  color: #FFF;
  text-align: center;
  padding: 0 2px;
}
.spot-name{
  font-size: 14px;
  font-weight: bold;
  color: var(--content-color-brown);
}
.spot-txt{
  font-size: 12px;
}
.normal-txt{
  font-size: 12px;
  text-align: center
}
.model__notice{
  margin-top: 12px;
}
.is-red{
  color: var(--content-color-red);
  font-weight: bold;
}
.bg-red{
  background: var(--content-color-red);
}

@media (768px <= width <= 1024px){
  .select-tab>li .is-sp{
    display: block;
  }
  .spot-icon{
    text-align: left
  }
  .action-txt.is-port .is-tb{
    display: block
  }
}

/*** インフォメーション ***/
.content__wrapper.info{
  background: url("../images/bg_03.png") repeat, #FFF;
  padding-bottom: 220px;
}
.head-title#info{
  margin-bottom: 80px;
}
.content__wrapper.info .inner::after{
  content: "";
  background: url("../images/umigame.png") var(--bg-img-setting);
  width: 509px;
  height: 174px;
  position: absolute;
  bottom: -200px;
  right: 0
}
.info__box{
  background: #FFF;
  border: var(--content-border_s) var(--content-color-brown);
  padding: 60px 30px 30px;
  position: relative;
  display: flex;
  gap: 65px;
}
.info__box+.info__box{
  margin-top: 90px;
}
.info-title {
  font-size: 26px;
  font-weight: bold;
  color: var(--content-color-cream);
  padding: 10px 20px;
  background: var(--content-color-brown);
  position: absolute;
  top: -30px;
  left: 20px;
}
.info-title>span {
  font-size: 20px;
  color: #FFF;
}
.info__box-left{
  flex: 1
}
.info__box-right{
  width: 400px;
}
.weather_list>li+li{
  margin-top: 40px;
}
.weather_list>li::before{
  content: "";
  background: var(--bg-img-setting);
  width: 50px;
  height: 50px;
  float:left;
  margin-right: 10px;
}
.weather_list>li:first-child::before{
  background-image: url("../images/icon_ss.png")
}
.weather_list>li:last-child::before{
  background-image: url("../images/icon_aw.png")
}
.faq__list>li:not(:last-child){
  border-bottom: 2px dotted var(--content-color-brown);
  padding-bottom: 10px
}
.faq__list>li+li{
  margin-top: 16px;
}
.q__txt{
  font-size: 20px;
}

/* 検索モジュール */
.content__wrapper.search {
  padding-top: 0;
  font-family: var(--font-sans)
}
.bnr__content{
  background: #FFF;
  padding: 48px 0;
  margin-bottom: 60px;
}