@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,700&display=swap');

  html {
    font-size: 100%;
  }
  body {
    color: #24292e;
    font-family: "Noto Sans JP", sans-serif;
  }
  a {
    text-decoration: none;
  }
  img {
    max-width: 100%;
  }
  li {
    list-style: none;
  }

  .wrapper {
    max-width: 960px;
    margin: 0 auto 130px auto;
    font-size: 0.9rem;
    padding: 0 4%;
  }
  .site-title {
    line-height: 1px;
  }
  .site-title a {
    display: block;
  }
  .sec-title {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 65px;
  }
h2.sec-title {
  font-family: "Playfair Display", serif;
  font-size: 2rem; /* 必要に応じて調整 */
  font-weight: 700;
  font-style: italic; /* ← これを追加するとイタリックに */
  text-align: center;
}

 /*-------------------------------------------
  Opening animation
  -------------------------------------------*/
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeOut 0.5s 5.5s forwards;/* 5.5秒間表示 → 0.5秒でフェードアウト */
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.loading__logo {
  opacity: 0;
  animation: logo_fade 5s 0.5s forwards;/* 0.5秒後に5秒かけてフェードイン */
  width: 100%;
}

@keyframes logo_fade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  60% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
  }
}
  /*-------------------------------------------
  SP
  -------------------------------------------*/
  @media screen and (max-width: 600px) {
    .wrapper {
      margin-bottom: 70px;
    }
    .site-title {
      margin-top: 20px;
    }
    .sec-title {
      margin-bottom: 40px;
    }
  }
  
  /*-------------------------------------------
  ヘッダー
  -------------------------------------------*/
  #header {
    max-width: 960px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 0 4%;
  }
  #header ul {
    display: flex;
    padding: 10px 0;
  }
  #header li {
    font-size: 0.9rem;
    margin-left: 30px;
  }
  #header li a {
    color: #24292e;
  }
  #header li a:hover {
    opacity: 0.7;
  }
  #header li img.icon {
    width: 20px;
  }

  /*-------------------------------------------
  Mainvisual
  -------------------------------------------*/
  #mainvisual {
    margin-bottom: 0;
  }
  #mainvisual img {
    width: 100%;
    max-width: 1920px;
    height: auto;
    object-fit: cover;
}
/* コンテナー */
.container {
  max-width: 100%;
  margin: 0 auto;
}

/* スライダーのwrapper */
.infinite-slider .swiper-wrapper {
  transition-timing-function: linear;
}

/* スライド */
.infinite-slider .swiper-slide {
  height: 200px !important; /* 高さを指定 */
  width: auto !important;
}

/* スライド内の画像 */
.infinite-slider .swiper-slide img {
  width: auto;
  height: 100%;
}
/*-------------------------------------------
 Access
  -------------------------------------------*/
 #access {
  padding-top: 50px; /* 文字との間隔を調整 */
}
#access .sec-title {
  margin-bottom: 20px; /* 必要に応じて調整 */
}

.access-container {
  margin-top: 10px; /* 必要に応じて調整 */
} 
 #access ul {
    margin-bottom: 0px;
  }
  #access li:first-child {
    margin-bottom: 0px;
  }
  #access p {
    text-align:justify;
  }
  .access-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.access-text {
  flex: 1;
}

.access-map {
  flex: 1;
}

.access-map iframe {
  width: 100%;
  height: 300px;
  border: 0;
}

/* スマホや幅の狭い画面では縦並び */
@media screen and (max-width: 768px) {
  .access-container {
    flex-direction: column;
  }

  .access-map iframe {
    height: 250px;
  }
}

/*-------------------------------------------
 Staff
-------------------------------------------*/
#staff {
  padding-top: 0px; /* 文字との間隔を調整 */
}
#staff .sec-title {
  margin-bottom: 20px; /* 必要に応じて調整 */
}

.staff-container {
  margin-top: 10px; /* 必要に応じて調整 */
}
#staff li:first-child {
  margin-bottom: 0px;
}
#staff p {
  text-align: justify;
}

  /*-------------------------------------------
 Contact
  -------------------------------------------*/
#contact {
  padding-top: 0px; /* 文字との間隔を調整 */
}
#contact .sec-title {
  margin-bottom: 20px; /* 必要に応じて調整 */
}

.contact-container {
  margin-top: 10px; /* 必要に応じて調整 */
}
  #contact ul {
    margin-bottom:0px;
  }
  #contact li:first-child {
    margin-bottom: 0px;
  }
  #contact p {
    text-align:justify;
  }
  address {
  font-style: normal; /* イタリックを解除 */
}
  /*-------------------------------------------
フッター
-------------------------------------------*/
#footer {
  background-color: #24292e;
  color: #fff;
  font-size: 1rem;
  padding: 10px 20px;
  text-align: center;
}