/* ==========================================
   1. 基本設定 (Base)
   ========================================== */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  margin: 0;
  padding: 0;
}

html {
  /* 最小 10px 〜 画面幅に合わせて可変 〜 最大 10px (1280pxの画面のとき) */
  font-size: clamp(10px, calc(10 / 1280 * 100vw), 10px);
}

* {
  box-sizing: border-box;
}

img {
  vertical-align: bottom;
}

/* ==========================================
   2. フッター共通レイアウト
   ========================================== */
.footer_wrapper {
  width: 100%;
  background-image: url('../img/footer_gradation.png');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-color: #4a362a;
  overflow: hidden;
  font-family: "Noto Serif JP", serif;
}

.footer,
.footer_end_container {
  background: transparent;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  color: #fff;
}

.footer a {
  color: #fff;
  text-decoration: none;
}

/* PC版：上段レイアウト */
.footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 40px;
  margin: 0 auto;
  gap: 5rem;
}

.footer_logo {
  width: 100%;
  max-width: 160px;
  height: auto;
  flex-shrink: 0;
  margin-left: 6rem;
}

.footer_container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.footer_top {
  display: flex;
  justify-content: center;
  gap: 5rem;
}

.button_container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex-shrink: 0;
}

.footer_tr {
  margin-right: 4rem;
}

/* ==========================================
   追加：フッターのホバーエフェクト
========================================== */

/* 1. テキストリンク全体の共通設定（通常時） */
.footer_table a {
  display: inline-block;
  position: relative;
  /* 0.3秒かけて文字色と透明度、下線をじわっと変化させる */
  transition: color 0.3s ease, opacity 0.3s ease;
}

/* テキストリンク（カーソルが乗ったとき） */
.footer_table a:hover {
  opacity: 0.7;
  /* 6から0.7に修正して「ホワー」感を演出 */
  color: rgb(202, 216, 241);
}

/* 2. 4つの施設画像リンクの設定（通常時） */
.facility_container a,
.footer_facility a {
  display: block;
  width: 100%;
  text-align: center;
  /* ✨ 画像も0.3秒かけて滑らかに変化させる */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 施設画像リンク（カーソルが乗ったとき） */
.facility_container a:hover,
.footer_facility a:hover {
  opacity: 0.8;
  /* 画像全体をじわっと明るく透過 */
  transform: scale(1.05);
  /* 1.25から1.05へ微調整して滑らかな立体感に */
}

/* 3. LINE・インスタなどのSNSアイコン（通常時） */
.footer_sns a {
  display: inline-block;
  transition: opacity 0.3s ease;
}

/* SNSアイコン（カーソルが乗ったとき） */
.footer_sns a:hover {
  opacity: 0.7;
}

/* テーブル設定（PC） */
.footer_table {
  width: 100%;
  border-collapse: separate;
  font-size: clamp(12px, 1.17vw, 15px);
  align-self: flex-start;
  table-layout: fixed;
  border-spacing: 2rem 0;
  flex: 0 0 60%;
  text-align: left;
}

/* 列ごとの幅を個別にコントロール */
.footer_table th:nth-child(1) {
  width: 58%;
}

/* 施設紹介（長め） */
.footer_table th:nth-child(2) {
  width: 40%;
}

/* お知らせ */
.footer_table th:nth-child(3) {
  width: 40%;
}

.footer_table th,
.footer_table td {
  white-space: nowrap;
}

.sp_order_1,
.sp_order_6,
.sp_order_8,
.sp_order_9 {
  font-size: 2rem;
}

.sp_order_2,
.sp_order_7,
.sp_order_3,
.sp_order_4,
.sp_order_5 {
  padding: 1rem 0;
  line-height: 2;
}

.sp_order_2 a,
.sp_order_3 a,
.sp_order_4 a,
.sp_order_5 a {
  white-space: nowrap;
}

.sp_order_7 a {
  margin-left: 0;
}

.footer_sns {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 4rem;
}

.footer_sns_contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
}

.footer_sns_text {
  font-size: 1.2rem;
  text-align: center;
}

.footer_table td {
  text-align: left;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.footer_table th {
  width: 25%;
  text-align: left;
}

.yellow {
  color: rgb(248, 248, 142);
}

/* 施設画像 4つ横並び */
.facility_container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
  margin-bottom: 4rem;
}

.facility_unit,
.footer_facility {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.facility_unit {
  width: 25rem;
  max-width: none;
  min-width: auto;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;

}

.facility_photo,
.footer_facility img {
  width: 55%;
  height: auto;
  border-radius: 5px;
}

/* PC版：下段 */
.footer_end_container {
  padding: 2rem 0;
}

.footer_end {
  font-size: 2rem;
  margin: 0 4rem;
}

.footer_adress {
  font-size: 2rem;
}

.highlight_red {
  background-color: brown;
  padding: 0.2rem 1.2rem;
  border-radius: 2rem;
  display: inline-block;
  margin-top: 1rem;
  font-size: 18px;
  margin-bottom: 1rem;
}

.footer_end_time {
  display: inline-block;
  margin-left: 1rem;
  font-size: 18px;
}

/* ✨ カンマのエラーを消去して正常化 */
.footer_copyright {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 1.5rem;
  width: 100%;
}

.copyright {
  margin-left: auto;
}

.footer_contact {
  gap: 1rem;
  display: flex;
  align-items: baseline;
}

.tel_number {
  font-size: clamp(18px, 2.18vw, 28px);
  font-weight: bold;
  margin-right: 2rem;
  font-optical-sizing: auto;
  font-style: normal;
  color: white;
  text-decoration: none;
}

/* ==========================================
   3. ボタンデザイン（共通）
   ========================================== */
.footer_info_button {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 30rem;
  margin-bottom: 7rem;
  gap: 4rem;
  flex: 0 0 40%;
}

/* ボタンの土台設定 */
.fotter_contact_access_button {
  border-radius: 6rem;
  border: none;
  height: 8.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 5px 6px 10px rgba(0, 0, 0, 0.8);
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: transform 0.3s, box-shadow 0.1s, color 1s ease;
  background: linear-gradient(-90deg, #A8BE6C 0%, #CC725B 100%);
  color: #CC725B;
}

.footer_contact_access_button::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: -1;
}

.footer_contact_access_button::before {
  background: linear-gradient(-90deg, #CC725B 0%, #A8BE6C 100%);
}

.footer_contact_access_button:hover::before {
  opacity: 1;
  color: #fff;
}

.footer_contact_access_button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

}

.footer_button_all {
  border-radius: 3.3rem;
  box-shadow: 0 0 8px 19px #BF962A;
  margin-top: 4.5rem;

  transition: box-shadow 0.3s ease;
}

.footer_button_all:hover {
  box-shadow: 0 0 15px 25px #BF962A;
}

/* === ボタン共通：ホバーの動きを大きくする === */
.footer_confirmation_button,
.footer_contact_button,
.footer_contact_access_button {
  /* フワッとした滑らかな動きにするための設定 */
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
}

/* ホバー時：上に5px浮かせ、1.04倍に拡大し、影を強く深くする */
.footer_confirmation_button:hover,
.footer_contact_button:hover,
.footer_contact_access_button:hover {
  transform: translateY(-5px) scale(1.04);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

/* クリックした瞬間：少し沈む */
.footer_confirmation_button:active,
.footer_contact_button:active,
.footer_contact_access_button:active {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}





/* === アクセス情報ボタン：文字を白くする === */
.footer_info_button {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 7rem;
  gap: 4rem;
}

.footer_contact_access_button {
  border-radius: 6rem;
  border: none;
  width: 36rem;
  height: 8.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 5px 6px 10px rgba(0, 0, 0, 0.8);
  position: relative;
  overflow: hidden;
  z-index: 0;
  background: linear-gradient(-90deg, #A8BE6C 0%, #CC725B 100%);
  color: #FFFFFF;
  font-size: 2.2rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  font-family: "Shippori Mincho", serif;
}

.footer_contact_access_button::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: -1;
  background: linear-gradient(-90deg, #CC725B 0%, #A8BE6C 100%);
}

.footer_contact_access_button:hover::before {
  opacity: 1;
}

.footer_contact_access_button:hover .hover {
  opacity: 1;
}

.footer_contact_access_button:hover .normal {
  opacity: 0;
}

.footer_contact_access_imge.normal {
  transition: opacity 1s ease;
}

.footer_contact_access_imge.hover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 1s ease;
}

/* アクセスボタンの中の「ピンアイコン」の調整 */
.footer_contact_access_imge {
  width: 80%;
  height: auto;
}

.footer_contact_access_button,
.footer_job_offer_button {
  font-size: 1.75rem;
  border-radius: 6rem;
  font-family: "Shippori Mincho", serif;
  border: none;
  color: white;
  width: 22rem;
  height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 5px 6px 10px rgba(0, 0, 0, 0.8);
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: transform 0.3s, box-shadow 0.1s;
}

.footer_contact_access_button {
  background: linear-gradient(-90deg, #a8be6c 0%, #cc725b 100%);
}

.footer_job_offer_button {
  background: linear-gradient(-90deg, #69b87b 0%, #a7bf6c 100%);
}

.footer_contact_access_button::before,
.footer_job_offer_button::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: -1;
}

.footer_contact_access_button::before {
  background: linear-gradient(-90deg, #cc725b 0%, #a8be6c 100%);
}

.footer_job_offer_button::before {
  background: linear-gradient(-90deg, #a7bf6c 0%, #69b87b 100%);
}

.footer_contact_access_button:hover::before,
.footer_job_offer_button:hover::before {
  opacity: 1;
}

.footer_contact_access_button:active,
.footer_job_offer_button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.footer_contact_access_imge {
  width: 15rem;
}

.footer_contact_jobInformation_image {
  width: 14rem;
}

/* ==========================================
   4. レスポンシブ：1024px（タブレット・小PC）
   ========================================== */
@media screen and (max-width: 1279px) {
  html {
    /* 画面に合わせて文字を縮小させるが、最低でも9px（PC基準）以下には落とさない */
    font-size: clamp(9px, calc(10 / 1280 * 100vw), 11px);
  }

  .footer_top {
    margin: 0 3rem;
    gap: 3rem;
  }

  .footer_logo,
  .button_container {
    display: none;
  }

  .facility_photo,
  .footer_facility img {
    width: 60%;
  }
}

/* ==========================================
   5. レスポンシブ：375px（スマホ標準）
   ========================================== */
@media screen and (max-width: 767px) {
  html {
    font-size: 10px;
    /* スマホ画面では10pxに固定して文字潰れを防ぐ */
  }

  /* --- 1. フッター全体の縦並び配置 --- */
  .footer_wrapper .footer {
    display: flex;
    flex-direction: column;
    /* 縦並び */
    align-items: center;
    /* 中央揃え */
    padding: 40px 0 20px 0;
  }

  .footer_wrapper .footer_container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    order: 2;
  }

  /* ボタン・SNSエリアの縦並び */
  .footer_wrapper .footer_top {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0;
    order: 1;
  }

  .footer_wrapper .footer_info_button {
    margin-bottom: 2rem;
  }

  /* SNSアイコンの中央寄せ */
  .footer_wrapper .footer_sns {
    margin-top: 2rem;
    margin-bottom: 4rem;
    display: flex;
    justify-content: center;
    gap: 3rem;
  }

  .footer_wrapper .footer_sns a img {
    width: 5rem;
    height: auto;
  }

  /* --- 2. テーブル（メニュー）の並び順 --- */
  .footer_wrapper .footer_table {
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 32rem;
    margin: 0 auto;
    align-items: flex-start;
    /* ✨ 子要素(aタグ)を左寄せにする */
  }

  /* display: contentsによりth, tdの枠が消え、直下のaタグが並び替えの対象になります */
  .footer_wrapper .footer_table thead,
  .footer_wrapper .footer_table tbody,
  .footer_wrapper .footer_table tr {
    display: contents;
  }

  .footer_wrapper .footer_table th,
  .footer_wrapper .footer_table td {
    display: contents;
  }

  .footer_wrapper .footer_table th a,
  .footer_wrapper .footer_table td a {
    display: block;
    width: 100%;
    padding: 1.2rem 0;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    box-sizing: border-box;
    white-space: nowrap;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
    text-align: left;
    /* ✨ テキストの文字自体も左寄せにする */
  }

  /* リストの各項目（ドットやテキスト）の配置調整 */
  .menu-inside-container ul,
  .widget_nav_menu ul {
    padding-left: 20px;
    list-style-position: inside;
  }

  /* --- 各クラスを経由して、中の <a> タグの並び順（order）を指定 --- */
  .footer_wrapper .footer_table .sp_order_1 a {
    order: 1;
    font-size: 1.8rem;
  }

  /* 施設・サービス紹介 */
  .footer_wrapper .footer_table .sp_order_2 a {
    order: 2;
  }

  /* ●特別養護老人ホーム */
  .footer_wrapper .footer_table .sp_order_3 a {
    order: 3;
  }

  /* ●ショートステイ */
  .footer_wrapper .footer_table .sp_order_4 a {
    order: 4;
  }

  /* ●グループホーム */
  .footer_wrapper .footer_table .sp_order_5 a {
    order: 5;
  }

  /* ●小規模多機能施設 */
  .footer_wrapper .footer_table .sp_order_6 a {
    order: 6;
    font-size: 1.8rem;
  }

  /* お知らせ一覧 */
  .footer_wrapper .footer_table .sp_order_7 a {
    order: 7;
  }

  /* お問い合わせ */
  .footer_wrapper .footer_table .sp_order_8 a {
    order: 9;
    font-size: 1.8rem;
  }

  /* 情報公開（sp_order_9に相当する部分をsp_order_9のまま次へ配置） */
  .footer_wrapper .footer_table .sp_order_9 a {
    order: 8;
    font-size: 1.8rem;
  }

  /* 文字サイズの微調整 */
  .footer_wrapper .footer_table th a {
    font-size: 1.5rem;
  }

  .footer_wrapper .footer_table td a {
    font-size: 1.4rem;
  }

  /* --- 3. 下部の4つの「たいじゅ」文字ロゴ（2列×2行） --- */
  .footer_wrapper .footer_container .facility_container {
    width: 100%;
    max-width: 320px;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    justify-items: center;
  }

  .footer_wrapper .footer_container .facility_container .facility_unit {
    display: flex;
    width: 47%;
    max-width: 47%;
    min-width: 47%;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    float: none;
  }

  .footer_wrapper .footer_container .facility_container .facility_unit a {
    display: block;
    width: 100%;
    text-align: center;
  }

  .footer_wrapper .footer_container .facility_container .facility_unit a img {
    display: block;
    width: 100%;
    max-width: 13rem;
    height: auto;
    margin: 0 auto;
  }

  /* --- 4. 最下部（住所・TEL・コピーライト） --- */
  .footer_wrapper .footer_end_container {
    order: 5;
    text-align: center;
    width: 100%;
    padding: 30px 10px;
  }

  .footer_wrapper .footer_end p {
    margin: 0.5rem 0;
    font-size: 1.2rem;
  }

  .footer_wrapper .footer_end_container .footer_copyright {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 1.5rem;
  }

  .footer_wrapper .footer_copyright .footer_tel_row,
  .footer_wrapper .footer_copyright .footer_fax_row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    font-size: 1.6rem;
    font-weight: normal;
    margin: 0 0 1.2rem 0;
    width: 100%;
    white-space: nowrap;
  }
  .footer_contact {
    flex-direction: column;
    gap: 0;
  }

  .footer_wrapper .tel_number,
  .footer_wrapper .fax_number {
    font-size: 2.2rem;
    margin-left: 0.8rem;
    margin-right: 0;
    display: inline-block;
  }

  .footer_wrapper .footer_end_container .copyright {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.0rem;
    color: #ffffff;
    margin-top: 1rem;
  }

  .footer_wrapper .highlight_red {
    margin-right: 0;
    margin-bottom: 0.5rem;
    display: inline-block;
  }

  .facility_container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    justify-items: center;
    max-width: 32rem;
    margin: 1rem auto 0;

  }

  .facility_unit {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .facility_photo {
    width: 80%;
    max-width: 13rem;
    height: auto;
  }
}