@charset "UTF-8";

/*-------------------------------
  コンポーネント
-------------------------------*/

/* お知らせ */
.o-info {
  margin-bottom: 100px;
}
.o-entry-content .o-info-items {
  margin: 0;
}
.o-entry-content .o-info-item {
  list-style: none;
}
.o-info__date {
  color: #D0B000;
  font-size: var(--px-to-vw_13);
  width: 120px;
}
@media (min-width: 40em) {
  .o-info__date {
    font-size: var(--px-to-rem_16);
    margin-right: 1.5rem;
    width: 130px;
  }
}
a.o-info__cat {
  display: inline-block;
  font-size: var(--px-to-vw_11);
  background-color: var(--color-main);
  color: var(--color-text-w);
  line-height: 2em;
  margin-right: 1rem;
  border-radius: 1rem;
  text-decoration: none;
  letter-spacing: 1.8px;
  text-align: center;
  width: 26vw;
}
a.o-info__cat:last-child {
  margin-right: 0;
}
@media (min-width: 40em) {
  a.o-info__cat {
    font-size: var(--px-to-rem_14);
    line-height: 1.7rem;
    width: 120px;
  }
  a.o-info__cat:last-child {
    margin-right: 2rem;
  }
}
.o-info-item {
  border-top: 1px solid #C8C8C8;
  padding: 0.5em 0.2em;
}
li.o-info-item {
  margin: 0;
}
@media (min-width: 40em) {
  .o-info-item {
    border-top: 1px solid #C8C8C8;
    padding: 0.8rem 1rem;
  }
}
.o-info-item:last-child {
  border-bottom: 1px solid #C8C8C8;
}
a.o-info__link {
  text-decoration: none;
  font-size: var(--px-to-vw_13);
  transition: 0.2s;
  flex: 1 1 100%;
}
@media (min-width: 40em) {
  a.o-info__link {
    font-size: var(--px-to-rem_16);
    flex: 1 1 0%;
  }
  a.o-info__link:hover {
    opacity: 0.8;
  }
  a.o-info__link.title-only:hover {
    opacity: 1;
  }
}
.o-info-content .c-btn {
  margin-top: 5vw;
  font-size: var(--px-to-vw_13);
}
@media (min-width: 40em) {
  .o-info-content .c-btn {
    margin-top: 40px;
    font-size: var(--px-to-rem_16);
  }
}
.o-info-content-text {
    margin-top: 20px;
}

/* 宿泊予約バナー */
.c-bnr-styaplans {
  position: relative;
  z-index: 1;
  height: 40vw;
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--color-gray);
}
.c-bnr-styaplans .c-btn {
  line-height: 2.4;
  margin-top: 3vw;
  font-size: var(--px-to-vw_13);
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: 600;
}
.c-bnr-styaplans__area {
  height: 100%;
}
@media (min-width: 40em) {
  .c-bnr-styaplans {
    height: 200px;
  }
  .c-bnr-styaplans .c-row--md {
    gap: 50px;
  }
  .c-bnr-styaplans .c-btn {
    line-height: 2.5;
    padding: 0 1em 0 2em;
    margin-top: 0;
    font-size: var(--px-to-rem_20);
  }
}
.c-bnr-styaplans__text {
  letter-spacing: 2px;
}
.c-bnr-styaplans__text div {
  font-size: var(--px-to-vw_17);
}
.c-bnr-styaplans__text p {
  font-size: var(--px-to-vw_11);
}
@media (min-width: 40em) {
  .c-bnr-styaplans__text div {
    font-size: var(--px-to-rem_26);
  }
  .c-bnr-styaplans__text p {
    font-size: var(--px-to-rem_16);
    margin: 10px 0;
  }
}

/* 赤背景の3つのボタンのバナー */
.c-banner--asanoha {
  flex: 1;
  background-color: #D83C34;
  background-image: url(../img/asanoha_pattern.svg);
  background-repeat: repeat;
  background-size: 50px auto;
  padding: 8vw 0 8vw;
}
.c-banner--asanoha .c-btn {
  display: block;
  position: relative;
  text-align: center;
  line-height: 3.5;
  margin: 5vw 11vw;
  font-weight: 600;
  padding: 0 1.5em 0 2em;
}
.c-banner--asanoha .c-btn i {
  color: var(--color-main);
  position: absolute;
  top: 37%;
  right: 5%;
}
.c-banner--asanoha__notice {
  color: #fff;
  text-align: center;
  margin-top: -3vw;
  font-size: var(--px-to-vw_11);
}
@media (min-width: 40em) {
  .c-banner--asanoha {
    background-size: 50px auto;
    padding: 50px 0 50px;
  }
  .c-banner--asanoha__gap {
    gap: 25px;
  }
  .c-banner--asanoha .c-btn {
    padding: 0 1.5em 0 1.5em;
    margin: 0;
  }
  .c-banner--asanoha__notice {
    text-align: left;
    margin-top: 0;
    padding: 20px 0;
    font-size: var(--px-to-rem_16);
  }
}

/* 紺色背景　麻の葉模様*/
.c-banner--asanoha-2 {
  background-color: var(--color-deep-blue);
  background-image: url(../img/c-bg-asanoha.svg);
  background-repeat: repeat;
  background-size: 50px auto;
  padding: 4vw 0 4vw;
}
@media (min-width: 40em) {
  .c-banner--asanoha-2 {
    background-size: 70px auto;
    padding: 70px 0 70px;
  }
}

.bg-pattern {
  position: absolute;
  width: 350px;
  height: 350px;
  z-index: -1;
  max-height: 100%;
  pointer-events: none;
}
.bg-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/seigaiha_pattern.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.top-right::before,
.bottom-right::before {
  transform: scaleX(-1);
}
.top-left {
  top: -145px;
  left: 0;
}
.top-right {
  top: -145px;
  right: 0;
}
.bottom-left {
  bottom: 0;
  left: -105px;
}
.bottom-right {
  bottom: 0;
  right: -105px;
}