@charset "UTF-8";
@import "property.css";
@import "base.css";
@import "parts.css";

/* やどかりハウスとは */
.about .txt {
  margin-top: 3rem;
}
.about .btn {
  margin-top: 3rem;
}

.about h2::before,
.about h2::after {
  background-image: url(../img/embroidery/yado1.png);
}

.prologue {
  margin-block: 5rem;
}
.prologue h3 {
  color: initial;
  font-weight: initial;
}
/* 宿泊案内 */

.booking h2::before,
.booking h2::after {
  background-image: url(../img/embroidery/yado13.png);
}
.booking h2 + p {
  margin-bottom: 1rem;
  font-weight: bold;
}
.booking h3 {
  margin-top: 5rem;
}
.booking-img {
  display: flex;
  gap: 2%;
}
.booking-img figure {
  flex-basis: 49%;
  border-radius: 1rem;
  overflow: hidden;
}
.booking-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.booking .btn {
  max-width: 50rem;
  margin: 5rem auto 0;
}
.booking .btn a {
  flex-basis: 50%;
}

/* やどかりハウスの日々 */
.note h2::before,
.note h2::after {
  background-image: url(../img/embroidery/yado5.png);
}
.note-list {
  display: flex;
  gap: 3rem 2%;
  flex-wrap: wrap;
  margin: 3rem 0 5rem;
}
.note-list a {
  color: initial;
  width: 32%;
  text-decoration: none;
}

.note-list a p.data {
  font-size: 80%;
  color: var(--gray-color);
  margin-block: 0.5rem 0;
}
.note-list a p.title {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  transition: var(--transition-all);
}
.note-list a:hover p.title {
  color: var(--primary-color);
}

.note-list figure {
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  overflow: hidden;
  width: 100%;
}
.note-list img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-all);
}
.note-list a:hover img {
  transform: scale(1.1);
}

/*リンク */
.link-head {
  display: flex;
  gap: 5%;
  align-items: center;
  max-width: 60rem;
  margin-inline: auto;
}
.link-head figure:first-child {
  flex-basis: 75%;
}
.link-head figure:last-child {
  flex-basis: 20%;
}
.link-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2%;
  margin: 3rem auto 0;
}
.link a {
  text-align: center;
  flex-basis: 32%;
}
.link a p {
  font-size: 2rem;
  font-weight: bold;
  margin: 0 0 1rem;
  transition: var(--transition-all);
}
.link a:hover p {
  color: var(--primary-color);
}
.btn-joining figure {
  mask: no-repeat url(../img/circle.svg);
}
.btn-support figure {
  mask: no-repeat url(../img/circle2.svg);
}
.btn-booking figure {
  mask: no-repeat url(../img/circle3.svg);
}
.link a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-all);
}
.link a:hover img {
  transform: scale(1.1);
}

.link .btn a {
  /* margin: 0 0 3rem; */
  /* border: 1px solid; */
  color: #fff;
  background: #a68a64;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 1rem;
}

/* やどかりハウスのばしょ */
.access h2::before,
.access h2::after {
  background-image: url(../img/embroidery/yado12.png);
}
.map iframe {
  /* aspect-ratio: 16 / 9; */
  /* margin: 0 calc(50% - 50vw);
  width: 100vw; */
  height: 50vh;
  min-height: 50rem;
  width: 100%;
}

.access .btn {
  margin-top: 3rem;
}

.sns .inner {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}
.sns a {
  font-size: 3rem;
}

.sns .note img {
  width: 6rem;
  height: auto;
  vertical-align: unset;
}
.sns .kamo img {
  width: 4rem;
  height: auto;
  vertical-align: -0.3rem;
}

/* つかってみたい、応援したい */

.joining .list-head h2::before,
.joining .list-head h2::after {
  background-image: url(../img/embroidery/yado14.png);
}
.support .list-head h2::before,
.support .list-head h2::after {
  background-image: url(../img/embroidery/yado6.png);
}
.support .list-head {
  padding-bottom: 3rem;
}
.joining .list-head h2 + p {
  font-weight: bold;
  margin-bottom: 3rem;
}
.support section.joining-list {
  padding-top: 0;
}
.joining-list .inner {
  display: flex;
  flex-wrap: wrap;
  /* flex-direction: column; */
  justify-content: center;
  gap: 5rem 2%;
}
.joining-item {
  flex-basis: 49%;
  /* text-align: center; */
  display: inline-block;
  /* background: var(--yellow-color); */
  background: #fdfbd9;
  padding: 3rem;
  border-radius: 2rem;
}

.joining-item figure {
  background: #fff;
  margin-block: 2rem;
  aspect-ratio: 5/3;
  overflow: hidden;
  border-radius: 1rem;
}
/* .charibon figure {
  padding: 5rem 2rem;
  background: #fff;
} */
.joining-item:not(.charibon) figure img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.charibon figure img {
  object-fit: contain;
}
/* モーダル中身 */
#closeModal {
  padding: 0;
}
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}
#modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;

  /* 初期状態: 非表示 + 透明 */
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-all);
}

#modalOverlay.active {
  opacity: 1;
  visibility: visible;
}

#modalContent {
  padding: 10rem 5%;
  width: 100%;
  height: 100%;
  transform: scale(1);
  transition: var(--transition-all);
  position: relative;
  overflow: auto;
  /* display: flex;
  align-items: center;
  justify-content: center; */
}
#modalContent .inner {
  border-radius: 2rem;
  max-width: 80rem;
  background: #fdfbd9;
  padding: 3rem 5%;
}

.modal-content {
  display: none;
}
#modalBody > *:not(h3) {
  margin-top: 2rem;
}

#modalContent a:not(:where(.btn, .btn a)) {
  color: var(--secondary-color);
  font-weight: 500;
  text-decoration: underline;
  margin-inline: 0.5rem;
}
#modalContent a:not(:where(.btn, .btn a))[target="_blank"]::after {
  content: "\f08e";
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  font-size: 0.8em;
  margin: 0 0 0 0.5rem;
  text-decoration: none;
  display: inline-block;
}
#modalContent a:hover:not(:where(.btn, .btn a)) {
  text-decoration: none;
}

#modalContent figure {
  margin-inline: auto;
  width: 80%;
  border-radius: 2rem;
  overflow: hidden;
}
#modalContent dl {
  display: flex;
  flex-wrap: wrap;
  font-weight: 500;
  /* gap: 5%;
  max-width: 50rem; */
  /* margin: 2rem auto; */
}
#modalContent dt:first-of-type,
#modalContent dd:first-of-type {
  border-top: 1px solid;
  padding-top: 1rem;
}
#modalContent dt,
#modalContent dd {
  border-bottom: 1px solid;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
#modalContent dt {
  flex-basis: 10rem;
}
#modalContent dd {
  flex-basis: calc(100% - 10rem);
}

@media screen and (max-width: 1025px) {
  .note-list a {
    flex-basis: 49%;
  }
}

@media screen and (max-width: 768px) {
  .youtube iframe {
    flex-basis: 100%;
  }

  .joining-list .inner {
    flex-direction: column;
  }
}
@media screen and (max-width: 600px) {
  .link a {
    flex-basis: 48%;
  }
  .note-list a {
    flex-basis: 100%;
  }
}
@media screen and (max-width: 480px) {
  .booking .btn {
    flex-wrap: wrap;
  }
  .booking .btn a {
    flex-basis: 100%;
  }
}

/* やどかりチャンネル */
/* .youtube-area {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
}
.youtube iframe {
  flex-basis: 48%;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 2%;
}
.youtube h2::before,
.youtube h2::after {
  background-image: url(../img/embroidery/yado12.png);
}
.youtube .btn {
  margin: 3rem 0 0;
}
.youtube .btn a::before,
.youtube .btn a::after {
  background-image: url(../img/embroidery/yado12.png);
} */
/* .link .btn.howto a::before,
.link .btn.howto a::after {
  background-image: url(../img/embroidery/yado5.png);
}

.link .btn.support a::before,
.link .btn.support a::after {
  background-image: url(../img/embroidery/yado7.png);
}

.link .btn.insta a::before {
  background-image: url(../img/embroidery/yado13.png);
}
.link .btn.insta a::after {
  background: no-repeat center center/contain url(../img/icon-insta.png);
}

.link .btn.nazokake a::before {
  background-image: url(../img/haneda.jpeg);
  border-radius: 50%;
}
.link .btn.nazokake a::after {
  background: no-repeat center center/contain url(../img/tiktok.png);
} */