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

/* ========== sectionの基礎設定 ========== */
section {
  margin: 0 0 4rem 0;
}

/* ========== ページタイトル ========== */
.ttl {
  background-color: #136740;
  color: #ffffff;
  font-size: 1.5em; /* 24px */
  font-weight: 700;
  padding: 1em 1.5em;
  margin: 0 0 2rem 0;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

/* モバイル */
@media (max-width: 639px) {
  .ttl {
    font-size: 1.25em; /* 20px */
    padding: 0.8em 1em;
  }
}

/* ========== 戻るボタン ========== */
.information_close {
  background-color: #eff6ff;
  border: 1px solid #0e75cf;
  border-radius: 0.375rem;
  padding: 0.8em 1.2em;
  margin-bottom: 2rem;
  font-size: 0.875em; /* 14px */
  color: #0e75cf;
  text-align: center;
}

/* モバイル */
@media (max-width: 639px) {
  .information_close {
    font-size: 0.8125em; /* 13px */
    padding: 0.7em 1em;
  }
}

/* ========== お問い合わせセクション ========== */
.information {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  padding: 2.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* タブレット */
@media (max-width: 768px) {
  .information {
    padding: 2rem;
  }
}

/* モバイル */
@media (max-width: 639px) {
  .information {
    padding: 1.5rem;
  }
}

/* ========== 施設名 ========== */
.information .name {
  font-size: 1.375em; /* 22px */
  font-weight: 700;
  color: #136740;
  margin: 0 0 2rem 0;
  padding: 0 0 0.8em 0;
  border-bottom: 2px solid #136740;
  position: relative;
  padding-left: 1em;
}

.information .name::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0.8em;
  width: 4px;
  background-color: #136740;
  border-radius: 2px;
}

/* モバイル */
@media (max-width: 639px) {
  .information .name {
    font-size: 1.25em; /* 20px */
  }
}

/* ========== 情報ブロック共通 ========== */
.information .telno,
.information .email,
.information .reception-hours {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.information .reception-hours {
  border-bottom: none;
}

/* モバイル：縦並び */
@media (max-width: 639px) {
  .information .telno,
  .information .email,
  .information .reception-hours {
    flex-direction: column;
    gap: 0.8rem;
    padding: 1.2rem 0;
  }
}

/* ========== タイトル部分 ========== */
.information .title {
  font-size: 1em; /* 16px */
  font-weight: 700;
  color: #666;
  min-width: 120px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

/* モバイル */
@media (max-width: 639px) {
  .information .title {
    font-size: 0.9375em; /* 15px */
    min-width: auto;
  }
}

/* ========== テキスト部分 ========== */
.information .txt {
  flex: 1;
  font-size: 1em; /* 16px */
  color: #222;
  line-height: 1.8;
}

/* モバイル */
@media (max-width: 639px) {
  .information .txt {
    font-size: 0.9375em; /* 15px */
  }
}

/* ========== 電話番号リンク ========== */
.information .telno .txt a {
  display: inline-flex;
  align-items: center;
  color: #136740;
  text-decoration: none;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 1.25em; /* 20px */
  transition: all 0.3s;
}
/* モバイル */
@media (max-width: 639px) {
  .information .telno .txt a {
    font-size: 1.125em; /* 18px */
    padding: 0.7em 1.2em;
  }
}

/* ========== メールアドレスリンク ========== */
.information .email .txt a {
  color: #0e75cf;
  text-decoration: underline;
  word-break: break-all;
  transition: color 0.3s;
}

.information .email .txt a:hover {
  color: rgba(14, 117, 207, 0.7); 
}

/* ========== 受付時間 ========== */
.information .reception-hours .txt {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.information .reception-hours .time {
  font-weight: 600;
  color: #222;
}

.information .reception-hours .except {
  font-size: 0.875em; /* 14px */
  color: #e74c3c;
  font-weight: 600;
}

/* モバイル */
@media (max-width: 639px) {
  .information .reception-hours .except {
    font-size: 0.8125em; /* 13px */
  }
}

/* ========== 極小デバイス対応 ========== */
@media (max-width: 480px) {
  .information {
    padding: 1.2rem;
  }

  .information .name {
    font-size: 1.125em; /* 18px */
  }

  .information .telno .txt a {
    font-size: 1em; /* 16px */
    padding: 0.6em 1em;
    width: 100%;
    justify-content: center;
  }
}