@charset "UTF-8";

body,
p {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.5;
}

img {
  width: 100%;
  vertical-align: top;
}

a {
  overflow-wrap: anywhere;
  transition: 0.3s;
  cursor: pointer;
}
a:hover {
  opacity: 0.5;
    cursor: pointer;
}

small {
  font-size: 0.8em
}

/* font */
.zen {
  font-family: "Zen Kaku Gothic New", sans-serif;
  letter-spacing: 0.1em;
}

/* display */
.dfx {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: unset;
}

.tab-panel .kome::before {
  content: "※";
}

.tab-panel .kome {
  padding-left: 1em;
  text-indent: -1em;
  display: block;
}

@media(min-width:769px) {
  .sp-only {
    display: none;
  }
}

@media(max-width:768px) {
  .pc-only {
    display: none;
  }

  small {
    font-size: 12px
  }
}

/************************ 2024から移植 ************************/
.inview-slide-up {
    opacity: 0;
    transform: translateY(50px);
    /* 初期位置を少し下に設定 */
    transition: opacity 0.7s, transform 0.7s;
    /* アニメーションの滑らかさを設定 */
}

.inview-slide-up.slide-up {
    opacity: 1;
    transform: translateY(0);
    /* 元の位置に戻す */
}
/* 0.1秒遅延 */
.inview-slide-up.inview-delay-1 {
    transition-delay: 0.1s;
}
.inview-delay {
      transition-delay: 0.3s;
}
/* 0.4秒遅延 */
.inview-slide-up.inview-delay-2 {
    transition-delay: 0.6s;
}

/* 0.6秒遅延 */
.inview-slide-up.inview-delay-3 {
    transition-delay: 0.7s;
}

/* 0.8秒遅延 */
.inview-slide-up.inview-delay-4 {
    transition-delay: 0.8s;
}


/* スポット紹介 */
.data_box_tit {
  display: flex;
  align-items: center;
  justify-content: left;
  width: 100%;
  position: relative;
}

.data_box_tit:before {
  content: "";
  width: 0.2em;
  height: 0.2em;
  background-color: #000;
  border-radius: 1em;
  right: 0;
  position: absolute;
}

.data_box_tit:after {
  border-top: 1px solid #000;
  content: "";
  margin-left: 1em;
  width: 100%;
}

.data_box_in .place_s {
  text-indent: -4em;
  padding-left: 4em;
}

.data_box_in .time_s {
  text-indent: -6em;
  padding-left: 6em;
}

.data_box_in .rest_s {
  text-indent: -5em;
  padding-left: 5em;
}

.data_box_in .price_s,
.data_box_in .tel_s {
  text-indent: -4em;
  padding-left: 4em;

}

/* ホテル */

.hotel__inner {
  width: min(100% - 2rem, 1000px);
  margin: 0 auto;
}

h3.trl {
  margin: 0;
}

.triangle {
  border-right: 50vw solid #fff;
  border-bottom: 100px solid transparent;
  border-left: 50vw solid #fff;
  border-bottom: 100px solid transparent;
}

.hotel {
  /* background: url(../img/hotel_bgi.png) repeat; */
  background-image: linear-gradient(0deg, #69ABC0 16%, #A1CAE5 27%);
  background-size: 600px;
  padding-bottom: 70px;
  margin-bottom: 70px;
}

.hotel-border {
  background: url(../img/hotel_border.webp) repeat-x;
  background-size: 15px;
  background-position: 0 bottom;
  padding-bottom: 50px;
  margin-bottom: 50px;
}

.hotel .dfx.hotel__img {
  gap: 10px;
}

.hotel__ttl {
  width: 80%;
  margin: 0 auto 1rem;
}

#hotel .data_box_tit {
  margin-top: 0;
}

.mb40 {
  margin-bottom: 40px;
}

.w-70 {
  width: 68%;
}

.w-60 {
  width: 58%;
}

.w-40 {
  width: 38%;
}

.w-30 {
  width: 28%;
}

.w-33 {
  width: calc((100% - 20px) / 3);
}

.mb15 {
  margin-bottom: 15px;
}

.hotel__ttl {
  width: 80%;
  margin: 0 auto 1rem;
}

.hotel .dfx.hotel__img {
  gap: 10px;
}

.data_box_in .url {
  padding-left: 0.5rem;
  text-align: start;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* map */
.map_area {
  width: min(100% - 2rem, 1080px);
  margin-inline: auto;
  margin: 60px auto;
}

.map_area a {
  border-radius: 50px;
  border: 2px solid #000;
  background-color: #fff;
  display: block;
  max-width: 270px;
  margin: 0 auto;
  padding: 15px;
  text-align: center;
  font-size: 0.95rem;
  text-decoration: none;
  color: #000;
  font-weight: bold;
  position: relative;
}

.map_area ul {
  margin: 40px auto;
  padding: 0;
}

.map_area ul li {
  position: relative;
  font-size: 1rem;
  line-height: 1.5;
  list-style: none;
  padding-left: 15px;
}

.map_area ul li::before {
  content: '※';
  position: absolute;
  top: 0;
  left: 0;
}

.material-icons-outlined {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  margin-left: 2px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.map_area a .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
}

/* book */
.book {
  background: url(../img/texture-gray.webp);
  background-size: cover;
  margin-bottom: 40px;
  width: 100%;
}

.book .book_wrap_in {
  /* max-width: 1165px;
  margin: 3% auto 3%; */
  align-items: start;
}

/* .book .book_area {
  width: 100%;
} */


.book .book_area p {
  text-align: center;
  font-weight: bold;
  font-size: 14px;
}

.book .book_area a {
  border-radius: 50px;
  background-color: #000;
  display: block;
  padding: 10px;
  text-align: center;
  font-size: 0.7rem;
  text-decoration: none;
  color: #fff;
}

.book .book_area .book_right {
  width: 100%;
}

.book_area_in {
  gap: 15px;
}

.book_area_in p {
  margin-bottom: 15px;
}

/* .book .book_area {
  width: 30.157%;
  margin-bottom: 0;
} */

.book .book_area {
  /* max-width: 400px; */
  width: calc((100% - 200px) / 5);
  padding: 45px 0;
}

.book .book_area .book_left {
  /* width: 48%; */
  width: 100%;
}

.book .book_area .book_right {
  /* width: 48%; */
  width: 100%;
}

/* footer */
#footer .adress {
  padding: 20px 40px 50px;
    font-size: clamp(14px,3vw,16px);
}

#footer .adress p:first-child {
  border-radius: 10px;
  border: 1.8px solid #A38208;
  display: block;
  padding: 20px;
  text-align: center;
  font-size: 1rem;
  font-size: clamp(14px,3vw,16px);
  text-decoration: none;
  color: #A38208;
  transition: all .6s ease-out;
  /* position: relative; */
}

#footer .adress p:last-child {
  font-size: 0.7rem;
  text-align: center;
}

.footer {
  background: #E1E2E2;
  font-size: 0.7rem;
  text-align: center;
  padding: 30px;
}

#topbtn {
  position: fixed;
  right: 5%;
  bottom: 5%;
  width: 5rem;
  height: 5rem;
  visibility: hidden;
  opacity: 0; 
  transform: translateY(0);
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s; 
  z-index: 10;
  cursor: pointer;
}
#topbtn a {
  position: relative;
  display: block; 
  width: 100%;
  height: 100%;
}
#topbtn a::after {
  position: absolute;
  content: "";
  display: block;
  background: url(../img/hiko/kv-hiko-1@2x.webp) no-repeat center center / contain;
  width: 94%;
  height: 130%;
  max-width: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  transform-origin: 100% 100%; 
    opacity: 0;
  visibility: hidden; 
  transform: translate(-50%, -50%) rotate(0deg); 
  transition: opacity 0.4s, visibility 0.4s, transform 0.4s;
  
  z-index: -1;
}#topbtn a:hover::after {
      opacity: 1;
    visibility: visible;
    transform: translate(-66%, -80%) rotate(-10deg);
    transform-origin: right bottom;
    scale: 1.1;}
#topbtn a:hover {
  opacity: 1;
}
#topbtn.is-visible {
  visibility: visible;
  opacity: 1;
}
/* #topbtn {
  position: fixed;
  right: 5%;
  bottom: 5%;
  width: 5rem;
  height: 5rem;
  visibility: hidden;
  opacity: 0; 
  transform: translateY(0);
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s; 
  z-index: 10;
  cursor: pointer;
}

#topbtn.is-visible {
  visibility: visible;
  opacity: 1;
}

#topbtn:hover {
  transform: translateY(-10px);
}
 */
.map_area ul {
  max-width: 875px;
}

#footer .adress p {
  text-align: center;
  line-height: 1.8;
}

#footer .adress {
  max-width: 770px;
  margin: 0 auto;
  padding: 70px 40px 70px;
  text-align: center;
}
#footer .footer__img {
  max-width: 468px;
  width: 60%;
  margin: 0 auto;
}
@media (max-width:768px) {
  .column-reverse {
    flex-direction: column-reverse;
  }

  #footer .adress {
    padding: 20px;
  }
#footer .footer__img {
  width: 85%;
}
  #topbtn {
    right: 10px;
    width: 60px;
    height: 60px;
    bottom: 30px;
  }

  .book {
    padding: 50px 0;
  }

  .book .book_area {
    width: 100%;
    margin-bottom: 25px;
    padding: 0;
  }

  .book_area_in {
    gap: 10px;
  }

  .book .book_area p {
    margin-bottom: 10px
  }

  .book .book_area .book_area_in {
    max-width: unset;
    flex-direction: column;
  }


  .book .book_area .book_left {
    width: 70%;
  }

  .book .book_area .book_right {
    width: 60%;
  }

  #hotel .gift_lead {
    width: 100%;
  }

  .hotel__ttl {
    order: 1;
  }

  .hotel-border {
    padding-bottom: 40px;
    margin-bottom: 30px;
  }

  .w-70,
  .w-60,
  .w-40,
  .w-30 {
    width: 100%;
  }

  .hotel__ttl {
    order: 1;
  }

  .hotel-data {
    flex-wrap: wrap;
    gap: 15px;
  }


  .lead {
    padding: 13px;
  }

  /* .hotel__inner {
    padding: 20px;

  } */

  /* .data_box_tit {
    font-size: 0.85rem;
  } */

  #hotel .data_box_tit::before {
    right: 0;
  }

  #hotel .data_box_tit:after {
    width: 100%;
  }
    .display-contents {
        display: contents;
    }
  ul li {
    text-wrap: unset;
    word-break: unset;
    /* font-size: 0.75rem; */
  }

  .data_box_in .prace_s {
    text-indent: -55px;
    padding-left: 55px;
  }

  .triangle {
    border-bottom: 45px solid transparent;
  }
}

/* ===== Hero ===== */
.intro {
  width: 100vw;
  overflow: hidden;
  margin: 0;
  background-image:
    url('../img/texture.png'),
    linear-gradient(0deg, #69ABC0 67%, #A1CAE5 87%);

  background-size: 90px, auto;
  background-repeat: repeat, no-repeat;
  background-position: top left, top left;
}

.key-visual-container {
  width: 100%;
  position: relative;
  margin-bottom: 5%;
}

.key-visual-container .kv {
  aspect-ratio: 1920 / 1026;
}

.kv-overlay {
  align-items: flex-start;
  position: absolute;
  top: 3%;
  left: 0;
  right: 0;
  margin: 0 3%;
}

.hikone-logo-overlay {
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  width: 22%;
  max-width: 300px;
}

.hikone-logo-overlay__item {
  width: 100%;
}

.hikone-logo-overlay .hikonyan20th {
  width: 50%;
  margin: 0 auto;
}

.sns-buttons-overlay {
  width: 7%;
  gap: 10%;
  justify-content: end;
}

.sns-buttons-overlay .sns-btn {
  min-width: 25px;
  width: 27%;
}

/* .hikone-overlay {
position: absolute;
  bottom: 0;
right: 0;
left: 0;
width: 55vw;
margin: 0 auto;
} */
.photo-overlay {
  position: absolute;
}

.photo-overlay-0 {
  z-index: 3;
  right: 10%;
  top: 5%;
  min-width: 75px;
  width: 11%;
}

.photo-overlay-1 {
  min-width: 118px;
  z-index: 2;
  left: 3%;
  width: 15%;
  bottom: 12%;
}

.photo-overlay-2 {
  min-width: 87px;
  z-index: 1;
  right: 10%;
  width: 11%;
  bottom: 10%;
}

.photo-overlay-3 {
  min-width: 88px;
  z-index: 1;
  left: 3%;
  width: 11%;
  bottom: 33%;
}

.photo-overlay-4 {
  min-width: 94px;
  z-index: 3;
  right: 0;
  bottom: 13%;
  width: 12%;
}

.photo-overlay-5 {
  min-width: 72px;
  z-index: 3;
  left: 15%;
  width: 9%;
  bottom: 27%;
}
.photo-overlay-6 {
  min-width: 410px;
    z-index: 3;
    left: 0;
    right: 0;
    width: 54%;
    bottom: 0;
    margin: 0 auto;
}

.lead {
  color: #fff;
  text-align: center;
  flex-direction: column;
  gap: 1em;
  margin-bottom: 10%;
}

.lead-mainttl {
  font-size: 45px;
  font-size: clamp(20px, 7.2vw, 45px);
}

.lead-subttl {
  font-size: 32px;
  font-size: clamp(17px, 3.7vw, 32px);
  line-height: 2;
  line-height: 1.8;
}

.lead-txt {
  font-size: 20px;
  font-size: clamp(15px, 2.9vw, 24px);
  line-height: 1.8;
}

@media (max-width:768px) {
  .key-visual-container .kv {
    aspect-ratio: 755 / 1052;
  }

  /* .key-visual-container {
    padding-bottom: 24%;
  } */

  .kv-overlay {
    flex-direction: column;
    align-items: center;
        width: 29%;
        margin-left: auto;
        gap: 10px;
        min-width: 110px;
        }
.kv-overlay a:hover{
opacity: unset;
}
  .sns-buttons-overlay {
    justify-content: space-between;
    width: unset;
  }

  .hikone-logo-overlay {
    width: 100%;
    max-width: unset;
    order: 3;
    gap: 10px;
  }

  .hikone-logo-overlay .hikonyan20th {
    margin: unset;
    margin-left: auto;
    min-width: 40px;
    width: 43%;
  }

  .photo-overlay-0 {
    z-index: 3;
    right: unset;
    top: 5%;
    min-width: unset;
width: 20%;
        max-width: 160px;
            left: 8%;
  }

  .photo-overlay-1 {
    min-width: unset;
    z-index: 2;
    left: 0;
    width: 26%;
    bottom: 21%;
    max-width: 191px;
  }

  .photo-overlay-2 {
    min-width: unset;
        z-index: 3;
        right: 19%;
        width: 25%;
        bottom: 20%;
        max-width: 192px;
  }

  .photo-overlay-3 {
    min-width: unset;
    z-index: 1;
        left: 33%;
        width: 27%;
        bottom: 22%;
        max-width: 200px;
        transform: rotate(330deg);
  }

  .photo-overlay-4 {
    min-width: unset;
    z-index: 2;
    right: 0;
bottom: 21%;
        width: 24%;
        max-width: 180px;
  }

  .photo-overlay-5 {
    min-width: unset;
    z-index: 3;
left: 19%;
        width: 19%;
        bottom: 25%;
        max-width: 154px;
  }

}

/* ===== Model Courses 全体 ===== */
.mc {
  /* padding: clamp(24px, 3vw, 48px) 0; */
  padding: 0 0 clamp(24px, 3vw, 48px);
  color: #111;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
}

.mc__inner {
  width: min(1300px, 92vw);
  margin-inline: auto;
}

/* .mc__title {
  font-size: clamp(20px, 3.2vw, 28px);
  margin: 0 0 16px;
  letter-spacing: .02em;
} */
.mc__ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  font-size: clamp(22px, 6.2vw, 70px);
  color: #fff;
}

.mc__ttl::before {
  content: "";
  display: block;
  width: 70px;
  height: 30px;
  max-width: 138px;
  margin-right: 15px;
  background: url(../img/svg/mc__ttl.svg) no-repeat center center / contain;
}

.mc__ttl::after {
  content: "";
  display: block;
  width: 70px;
  height: 30px;
  margin-left: 15px;
  background: url(../img/svg/mc__ttl.svg) no-repeat center center / contain;
  transform: scaleX(-1);
}

/* タブ見出し */
.tab-list {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 40px;
}

.tab-item {
  border-radius: 30px;
  background-color: #fff;
  border: solid 3px rgb(255, 255, 255);
  /* padding: 0.6em 1.2em; */
  padding: 10px 15px;
  cursor: pointer;
  user-select: none;
  width: calc((75% - 16px) / 3);
  text-align: center;
  font-size: clamp(15px, 1.8vw, 26px);
  line-height: 1.2;
  box-shadow: 0 7px 5px rgba(0, 0, 0, 0.398);
  color: #fff;
  font-weight: bold;
  transition: 0.2s;
}

.tab-item .tab__inner-img {
  max-width: 95px;
  transition: 0.3s;
}

.tab-item:hover {
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
}

.tab-item.active {
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
}

.tab-item:not(.active) {
  position: relative;
}

.tab-item:not(.active)::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #00000080;
  border-radius: 30px;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.3s;
}

.tab-item.active::before,
.tab-item:hover::before {
  opacity: 0;
}

.tab-item:hover .tab__inner-img,
.tab-item.active .tab__inner-img {
  transform: rotate(15deg);
}

.tab-list .tab-item:nth-child(1) {
  background-color: #E5919B;
}

.tab-list .tab-item:nth-child(2) {
  background-color: #F1BE59;
}

.tab-list .tab-item:nth-child(3) {
  background-color: #8DC16B;
}

.tab-item .tab__inner {
  align-items: center;
  justify-content: center;
  position: relative;
  padding-left: 20px;
  gap: 3%;
}

.tab-item .tab__inner::before {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 15px;
  content: "";
  background: url(../img/svg/btn-flag.svg) no-repeat;
  width: 30px;
  height: 30px;
}

.tab-item .tab__inner::after {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  background: url(../img/svg/tab-arrow.svg) no-repeat;
  width: 20px;
  height: 20px;
}

@media (max-width:768px) {
  .mc__ttl  {
    text-align: center;
  }
  .tab-list {
    flex-direction: column;
  }

  .tab-item {
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
    font-size: 16px;
  }

  .tab-item .tab__inner-img {
    max-width: 65px;
  }
}

/* コンテンツ */
/* .tab-content {
  background-color: #fff;
  border: 1px solid skyblue;
} */

.tab-panel {
  display: none;

}

.tab-panel:nth-child(1) {
  background-color: #E5919B;
}


.tab-panel:nth-child(3) {
  background-color: #8DC16B;
}

.tab-panel.active {
  display: block;
}

.tab-panel.active h2 {
  font-size: 20px;
  font-weight: bold;
}

/* ===== モデルコースhead部分共通パーツ ===== */
.article-head__outer {
  padding: 5% 15px;
}

.article-head__ttl {
  margin: 0 auto;
  margin-bottom: 25px;
}
.article-head__container {
  align-items: unset;
}
.course-type {
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
}

.course-type__txt {
  padding: 0 10px 5px;
  border: 1px solid #fff;
  font-size: 28px;
  display: inline-block;
}

.article-head__img {
  flex: 1;
  display: flex;
}

.article-head__img img {
  height: auto;
  aspect-ratio: 635 / 835;
  object-fit: cover;
}

.course__ttl span {
  font-size: 0.75em;
}

.spot__area {
  margin: 30px 15px;
}

.spot__txt {
  font-size: clamp(14px, 1.5vw, 22px);
  margin-bottom: 1em;
  /* text-align: justify; */
}

.spot__txt-main {
  font-size: clamp(14px, 1.5vw, 24px);
}

.spot__subttl {
  font-weight: bold;
  font-size: clamp(14px, 1.5vw, 24px);
  margin-bottom: 0.5em;
}

.data__txt {
  font-size: clamp(13px, 1.5vw, 17px);
  /* text-align: justify; */
}

.spot__item {
  position: relative;
}

/* ===== モデルコースfooter部分共通パーツ ===== */

.insta__inner {
  max-width: 850px;
  margin: 0 auto;
}

.insta-visual {
  justify-content: center;
  gap: 100px;
  margin-bottom: 2%;
}

.insta-left {
  max-width: 200px;
  position: relative;
}

.insta-left::before {
content: "";
    display: inline-block;
    position: absolute;
    background: url(../img/svg/traveler.svg) no-repeat;
    background-size: contain;
    width: 135%;
    height: 35%;
    max-width: 270px;
    top: -30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;}

.insta-right__name-img {
  max-width: 220px;
  /* width: 70%; */
  margin-bottom: 20px;
}

.insta-right__account {
  font-size: clamp(35px, 3.5vw, 43px);
  justify-content: start;
  gap: 15px;
  margin-bottom: 10px;
  /* align-items: start; */
}
a.sns-link {
    text-decoration: none;
    display: flex;
    background: #fff;
    padding:10px 25px;
    color: #333;
    text-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    margin-top: 1em;
      font-size: clamp(13px, 2vw, 20px);
      max-width: 380px;
  }
.sns-logo {
        max-width: 50px;
    width: 14%;
    display: flex;   
  align-items: center;
  }
.insta-right__account a {
  text-decoration: none;
  line-height: 1;
}
.insta-bottom {
  color: #fff;
  text-align: center;
  font-size: clamp(13px, 3.5vw, 24px);
  margin: 10px;
  line-height: 1.5;
}

@media(max-width:768px) {
  .article-head__outer {
    padding: 10% 15px;
  }

  .article-head__ttl {
    margin-bottom: 15px;
  }

  .insta {
    padding: 50px 0;
  }

  .insta-left::before {
    content: none;
  }

  .insta__container {
    position: relative;
  }

  .insta__container::before {
    content: "";
    display: inline-block;
    position: absolute;
    background: url(../img/svg/traveler.svg) no-repeat;
    width: 200px;
    height: 42px;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
.insta-bottom {
    font-size: clamp(11px, 2.5vw, 24px);
}
  .insta-visual {
    gap: 20px;
    margin: 10px;
  }

  .insta-right__name-img {
    max-width: 310px;
    width: unset;
    width: 150px;
  }
a.sns-link {
  padding: 7px 10px;
}
  .insta-right__account {
    font-size: clamp(13px, 3vw, 20px);
    gap: 10px;
  }

  .insta-left {
    width: 35%;
  }
}