@charset "utf-8";
/* CSS Document */

:root {
  --f30: clamp(1.563rem, 1.433rem + 0.55vw, 1.875rem);/* 25-30px */
  --f22: clamp(1.125rem, 1.021rem + 0.44vw, 1.375rem);/* 18-22px */
  --f20: clamp(1rem, 0.896rem + 0.44vw, 1.25rem);/* 16-20px */
  --f16: clamp(0.938rem, 0.912rem + 0.11vw, 1rem);/* 15-16px */
  --f15: clamp(0.875rem, 0.849rem + 0.11vw, 0.938rem);/* 14-15px */

  --main: #99BE5A;
  --sub: #538763;
  --accent: #ff7939;
}

.meta-time, article, aside, audio, b, body, canvas, caption, dd, details, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, label, legend, li, mark, menu, nav, object, ol, p, picture, section, small, span, strong, summary, table, tbody, td, tfoot, th, thead, tr, ul, video {
  line-height: 1.3;
}

.housing-content{
  margin-top: 40px;
}

@media (min-width: 1024px) {
  .housing-content{
    margin-top: 60px;
  }
}

.title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--f22);
  font-weight: bold;
}

.title::before{
  content: "";
  display: inline-block;
  width: 8px;
  height: 30px;
  background-color: var(--main);
}

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

/* -------------------------
housing-header
------------------------- */

.housing-header{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.housing-header__img{
  width: min(80%, 320px);
  margin: 0 auto;
}

.housing-header__lead{
  text-align: center;
}

.housing-header__lead p{
  margin-bottom: 1rem;
  font-size: var(--f16);
  line-height: 1.7;
}

@media (min-width: 1024px) {
  .housing-header{
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
  }

  .housing-header__img{
    width: 40%;
  }

  .housing-header__lead{
    width: 60%;
  }
}

/* -------------------------
housing-venue
------------------------- */

.housing-venue-list{
  padding: 20px 2%;
}

.housing-venue{
  margin-bottom: 40px;
}

.housing-venue__media{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.housing-venue__media-img{
  object-fit: contain;
}

.housing-venue__media-img img{
  width: 100%;
  height: auto;
}

.housing-venue__subttl{
  color: var(--accent);
  font-size: var(--f20);
  font-weight: bold;
}

.housing-venue__ttl{
  margin-bottom: .6rem;
  color: var(--accent);
  font-size: var(--f30);
  font-weight: bold;
}

.housing-venue__desc{
  padding-top: .6rem;
  border-top: 1px solid #666;
  font-size: var(--f15);
}

.housing-venue__info{
  display: flex;
  flex-direction: column;
}

.housing-venue__info-detail{
  display: flex;
  flex-wrap: wrap;
}

.housing-venue__info-detail dt{
  width: 22%;
  margin-bottom: .6rem;
  color: var(--sub);
  font-size: var(--f16);
  font-weight: bold;
  line-height: 1;
}

.housing-venue__info-detail dd{
  width: 78%;
  margin-bottom: .6rem;
  font-size: var(--f16);
}

.housing-venue__info-ttl{
  margin-bottom: .5rem;
  color: var(--sub);
  font-size: var(--f16);
  font-weight: bold;
}

.housing-venue__access-item{
  display: flex;
  align-items: center;
  margin-bottom: .5rem;
  font-size: var(--f16);
}

.housing-venue__access-item::before{
  content: "";
  display: inline-block;
  width: 45px;
  height: 45px;
  flex-shrink: 0;
  margin-right: 1rem;
  background-color: var(--sub);
  border-radius: 5px;
  background-position: center center;
  background-size: 70%;
  background-repeat: no-repeat;
}

.housing-venue__access-item:nth-child(1):before{
  background-image: url(img/icon-car.png);
}

.housing-venue__access-item:nth-child(2):before{
  background-image: url(img/icon-train.png);
}

.housing-venue__access-item:nth-child(3):before{
  background-image: url(img/icon-bus.png);
}

@media (min-width: 768px) {
  .housing-venue-list{
    padding: 40px 4%;
  }

  .housing-venue{
    margin-bottom: 80px;
  }

  .housing-venue__media{
    flex-direction: row;
    gap: 3%;
  }

  .housing-venue__media-img{
    width: 50%;
  }

  .housing-venue__media-body{
    width: 50%;
  }

  .housing-venue__info{
    flex-direction: row;
    gap: 1.5rem;
  }
  
  .housing-venue__info-detail{
    width: 55%;
  }

  .housing-venue__info-access{
    width: 45%;
  }

  .housing-venue__info-detail dt{
    width: 20%;
  }

  .housing-venue__info-detail dd{
    width: 80%;
  }
}

/* -------------------------
btn
------------------------- */

.housing-venue__btn-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.housing-venue__btn-wrap .housing-venue__button{
  display: inline-block;
  width: 300px;
  padding: 1rem;
  border-radius: 10px;
  background-color: var(--main);
  color: white;
  font-size: var(--f22);
  font-weight: bold;
  text-align: center;
  transition: transform 0.3s ease-in-out;
  will-change: transform;
}

.housing-venue__btn-wrap .housing-venue__button.btn--accent{
  background-color: var(--accent);
}

@media (min-width: 768px) {
  .housing-venue__btn-wrap{
    flex-direction: row;
    justify-content: center;
    gap: 3rem;
  }
}

@media (hover: hover) {
  .housing-venue__btn-wrap .housing-venue__button:hover {
    transform: scale(1.1);
    opacity: 1;
  }
}