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

html {
  font-size: calc(10 / 1280 * 100vw);
  scroll-behavior: smooth;
}

@media screen and (min-width: 1280px) {
  html {
    font-size: 10px;
  }

  /* 1920pxでもここが基準になるので崩れない */
}

* {
  box-sizing: border-box;
}


body {
  font-family: "Kiwi Maru", serif;
  background-image: url("../img/washi.png");
  color: #4a362a;
}


/* ==========================================
   2. ヘッダー上部 (Top Container)
   ========================================== */
.header {
  width: 100%;
  color: #A74624;
  background-color: transparent;
  position: relative;
}

.top_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 96%;
  max-width: 1440px;
  height: 100px;
  margin: 0 auto;
  padding: 15px 0;
  position: relative;
}

.header_access {
  flex: 1;
  text-align: left;
  font-size: 1.4rem;
  line-height: 1.6;
}

.header_logo_area {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

.header_logo {
  width: 250px;
  height: auto;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.unknown_contact_wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: auto;
  max-width: 360px;
  margin-left: auto;
}

.unknown {
  font-size: 1.1rem;
  margin: 0;
  white-space: nowrap;
}

.unknown_justify_text {
  width: auto;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  margin-top: 0.5rem;
  color: #A74624;
  text-decoration: none;
}

.header_tel_number {
  font-size: 2.8rem;
  font-weight: bold;
  line-height: 1;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
}

/* ==========================================
   3. メインビジュアル (家形スライド)
   ========================================== */
.main_visual_wrapper {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  margin-bottom: 4rem;
}

/* 文字を画像の上に重ねるためのコンテナ設定 */
.main_visual_content {
  position: relative;
  width: 85%;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
  /* 五角形（家型）のクリッピングマスク設定 */
  clip-path: polygon(0% 20%, 50% 0%, 100% 20%, 100% 100%, 0% 100%);
}

/* 背景画像の設定 */
.sub_header_bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 文字を画像の中央に配置する設定 */
.sub_header_text_area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* タイトル文字の装飾 */
.sub_page_title {
  font-size: 3.4rem;
  color: #ffffff;
  font-weight: bold;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
  font-weight: 400;

}

/* ==========================================
   4. 固定ナビゲーション (Fixed Nav)
   ========================================== */
.header_nav {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(247, 247, 247, 0.5);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 1050;

}

.header_nav_list {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.header_nav_list li {
  flex: 1;
  border-right: 1px dotted #ccc;
}

.header_nav_list li:last-child {
  border-right: none;
}

.header_nav_item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
  text-decoration: none;
  color: #A74624 !important;
  font-weight: 400;
  font-size: 2.1rem;
  transition: all 0.3s;
}

.header_nav_item::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  background: url('../img/icon.png') no-repeat center/contain;
  margin-bottom: -0.2rem;
}

.header_nav_item:hover {
  color: green !important;
  background-color: rgba(0, 128, 0, 0.05);
}

/* ==========================================
   5. レスポンシブ (1024px以下: 固定バー仕様)
   ========================================== */
@media screen and (max-width: 1024px) {
  html {
    font-size: 62.5%;
  }

  /* ★修正: facility_img を非表示リストから除外 */
  .header_nav,
  .header_access,
  .unknown_contact_wrapper,
  .tel_list {
    display: none !important;
  }

  .header {
    padding-top: 0;
  }

  .top_container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    padding: 1rem 5%;
    background-color: transparent !important;
    z-index: 10000;
    display: flex;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
    box-shadow: none !important;
    transition: background-color 1.2s ease, box-shadow 1.2s ease !important;
  }

  /* 20pxスクロールしたら白背景＋影を付ける */
  .top_container.scrolled {
    background-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  }

  .header_logo_area {
    position: static;
    transform: none;
    z-index: 10001;
  }

  .header_logo {
    width: 160px;
    height: auto;
  }

  .slideshow_container {
    /* height: 40vh; */
    /* clip-path: none; */
    width: 90%;
    height: 350px;
  }

  .main_visual_wrapper {
    margin-top: 10rem;
    margin-bottom: 5rem;
  }

  .main_visual_content {
    height: 350px;
  }
}

/* スクロール後のハンバーガーボタン */
.toggle_btn.scrolled {
  transition: all 1.2s ease !important;
}

/* 768px以下 （スマホ）*/
@media screen and (max-width: 768px) {

  .slideshow_container {
    width: 90%;
    height: 280px;
  }

  .main_visual_content {
    height: 280px;
  }

}


/* 480px以下(小さいスマホ) */
@media screen and (max-width: 480px) {

  .slideshow_container {
    width: 90%;
    height: 200px;
  }

  .header_logo {
    width: 130px;
  }

  .main_visual_content {
    height: 200px;
  }

  .sub_page_title {
    font-size: 2.5rem;
  }

}

/* 420px以下（iPhoneSE etc） */
@media screen and (max-width: 420px) {

  .main_visual_wrapper {
    margin-bottom: 4rem;
  }
}


/* ==========================================
   ハンバーガーメニュー：完全上書き設定
   ========================================== */

/* PC版の設定：1025px以上 */
@media screen and (min-width: 1025px) {
  #navArea {
    display: none !important;
  }
}

/* スマホ版の設定：1024px以下 */
@media screen and (max-width: 1024px) {

  body.menu-open {
    overflow: hidden !important;
    height: 100vh !important;
    position: fixed !important;
    /* スマホ（特にSafari）で確実にスクロールを止めるためのお守り */
    width: 100% !important;
  }

  /* 消えてしまったwooden_iconを再表示させる */
  .wooden_icon {
    display: block;
    /* 強制的に表示 */
    width: 100px;
    /* サイズを指定 */
    height: auto;
    margin: 20px auto;
    /* 中央寄せ */
    position: relative;
    z-index: 10005;
  }

  /* nav本体の設定 */
  nav .inner {
    display: block;
    visibility: visible;
  }
}

/* 2. 【スマホ・タブレット版】1024px以下での表示設定 */
@media screen and (max-width: 1024px) {

  /* ボタンを表示 */
  #navArea {
    display: block;
  }

  .toggle_btn {
    display: block;
    position: fixed;
    top: 25px;
    right: 25px;
    width: 45px;
    height: 45px;
    z-index: 10005;
    /* 最前面へ */
    cursor: pointer;
  }

  /* 三本線の色と形 */
  .toggle_btn span {
    display: block;
    position: absolute;
    width: 30px;
    height: 4px;
    background: #7A2D1D;
    /* 指定の茶色 */
    left: 7px;
    transition: all 0.5s;
  }

  .toggle_btn span:nth-child(1) {
    top: 10px;
  }

  .toggle_btn span:nth-child(2) {
    top: 20px;
  }

  .toggle_btn span:nth-child(3) {
    top: 30px;
  }

  /* メニューが開いた時の三本線の変形（バツ印） */
  .open .toggle_btn span:nth-child(1) {
    transform: translateY(10px) rotate(-315deg);
  }

  .open .toggle_btn span:nth-child(2) {
    opacity: 0;
  }

  .open .toggle_btn span:nth-child(3) {
    transform: translateY(-10px) rotate(315deg);
  }



  .sp_nav_content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.9);

    /* レイアウト設定 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10004;
    overflow-y: auto;

    /* ★【重要】初期状態（閉じているとき）は透明にし、かつクリックを完全に無効化する */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* これで透明なときは絶対にクリックをすり抜けます */

    /* ほわんと動かすための設定 */
    transition: opacity 0.5s ease, visibility 0.5s ease;
  }

  /* ★メニューが開いた（openがついた）ときの設定 */
  #navArea.open .sp_nav_content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* 開いたときだけクリックを有効化 */
  }

  .top_container {
    transition: opacity 0.5s ease, visibility 0.5s ease;
  }

  #navArea.open~.header .top_container,
  #navArea.open .top_container,
  .open .top_container {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body:has(.open) .top_container,
  body:has(#navArea.open) .top_container,
  .open .top_container,
  #navArea.open~.header .top_container {





    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    opacity: 1 !important;
    /* 完全に消えるバグをブロック */
    visibility: visible !important;
    /* 完全に消えるバグをブロック */
  }

  body:has(.open) .header_logo_area,
  body:has(#navArea.open) .header_logo_area,
  .open .header_logo_area,
  body:has(.open) .header_logo,
  .open .header_logo {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    /* すりガラスの後ろに行くためクリックは無効化 */

    /* :bulb:【重なり順】すりガラス（10004）よりも小さい数値（10002）にして、後ろ側（奥）に沈める */
    z-index: 10002 !important;
  }



  /* メニューの内側の幅が狭まらないように調整 */
  .sp_nav_content .inner {
    width: 100%;
    max-width: 600px;
    /* メニューの最大幅（お好みで調整してください） */
    height: 100%;
    padding: 40px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0 auto;
    /* text-align: center; */
  }

  .contact_enclosure {
    display: flex;
    justify-content: center;
    /* ボタンを横並びにして真ん中に */
    gap: 12px;
    /* ボタン同士の隙間 */
    margin-top: auto;
    /* メニューが短くても一番下に押し下がる */
    width: 100%;
    max-width: 100%;
    padding: 20px 0 10px 0;
    /* 周りの余白調整 */
    box-sizing: border-box;
  }

  /* 各ボタン（リンクエリア）の調整 */
  .contact_button {
    flex: 1;
    /* 2つのボタンを50%ずつに均等化 */
    max-width: 100%;
    width: 100%;
    height: 40px;
    /* ボタンらしい綺麗な高さに固定 */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    /* 高さに合わせた完全なカプセル型丸み */
    text-decoration: none;

    overflow: hidden;
    /* 文字の途中で意図しない改行を防ぐ */
    transition: transform 0.2s, opacity 0.2s;
  }

  /* ボタン内の画像が崩れないようにする */
  .contact_tel_imge,
  .contact_mail_imge {
    width: auto;
    max-width: 90%;
    height: 40%;
    object-fit: contain;
    /* ★画像の横幅と縦幅を、ボタンのサイズに100%ぴったり強制フィットさせます */
    display: block;
    margin: 0 auto;
    margin-left: auto !important;
    margin-top: 0 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    float: none
  }







  .sp_nav_content ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #7A2D1D;
    font-size: 1.6rem;
    font-weight: 400;
    text-decoration: none;
    border-bottom: 1px dotted #ccc;
  }

  /* ★スマホメニューの文字の前にアイコンを追加 */
  .sp_nav_content ul li a::before {
    content: "";
    display: block;
    width: 2.2rem;
    /* アイコンの横幅（お好みで調整） */
    height: 2.2rem;
    /* アイコンの縦幅（お好みで調整） */
    background: url('../img/icon.png') no-repeat center/contain;
    /* PC版と同じアイコン画像 */
    margin-right: 12px;
    /* アイコンと文字の間の隙間 */
    flex-shrink: 0;
    /* 画面が狭くなってもアイコンが潰れないようにする */
  }

  .sp_nav_content ul {
    width: 100%;
    list-style: none;
    /* これで黒ポチが消えます */
    padding: 0;
    /* 左側に自動で入るスペースを無くします */
    margin: 0;
    /* 上下の余計な隙間を無くします */
  }





  /* 木のアイコン */
  .wooden_icon {
    display: block;
    margin: 0 auto;
    margin-top: 10px;

  }

  /* メニュー内のアイコンと文字の並び */
  .taijyu_icon {
    width: 25px;
    /* サイズを少し大きく調整 */
    height: auto;
    margin-right: 15px;
    display: inline-block;
  }

  .sp_nav_content ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #7A2D1D;
    font-size: 1.6rem;
    font-weight: 400;
    text-decoration: none;
    border-bottom: 1px dotted #ccc;
  }

  /* 背景マスク */
  #mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.);
    z-index: 10003;
  }

  #navArea.open #mask {
    display: none;
  }
}

/* ===================================================
     【追加】メニューが開いている間、背景スクロールを禁止する
     =================================================== */

html:has(.open),
body.menu-open {
  overflow: hidden !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  /* 最新のスマホブラウザ用 */
}



@media screen and (max-width: 1024px) {

  .contact_button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
  }


  /* 2. ★最重要：古いズレ（margin-left や margin-top）を完全にリセット */
  .contact_tel_imge,
  .contact_mail_imge {
    width: 80%;
    height: 80%;
    object-fit: contain;
    /* 縦横比を絶対に崩さない */
    display: block;

    /* 過去のズレを全てリセットして真ん中に固定する */
    margin: 0 auto;
    margin-left: auto;
    /* 前に書いてあった「margin-left: 19px;」を強力に打ち消す */
    margin-top: 0;
    /* 前に書いてあった「margin-top: -31px;」を強力に打ち消す */
    position: static;
    /* 位置関係を初期状態に戻す */
    left: 0;
    float: none;
    /* 万が一の回り込みも解除 */
  }
}







/* ＝＝＝＝　ボタン　装飾　＝＝＝＝ */

.menu-footer {
  display: flex;
  gap: 10px;
}

/* ボタン１ */
.tel_button {
  display: inline-block;
  border-radius: 999px;
  text-decoration: none;
  color: #7A2D1D;
  font-weight: bold;
  width: 270px;
  height: 30px;
  font-family: "Kiwi Maru", serif;

  /* グラデーション */
  background: linear-gradient(90deg, #D8C27A, #9BD3A6, #D8C27A);
  background-size: 200% 100%;
  background-position: left;
  transition: background-position 0.8s ease;
}

/* ホバーで右へ流れる */
.tel_button:hover {
  background-position: right;
}

/*  TELテキスト */
.tel {
  width: auto;
  display: block;
  margin-left: 38px;
  margin-top: 8px;
  font-size: 10px;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-style: normal;
}

/* TEL　受話器画像 */
.tel_img {
  display: block;
  margin-left: 19px;
  margin-top: -31px;
  font-size: 30px;
  width: 28px;
  height: 47px;
}

/* ボタン２ */
.mail_button {
  display: inline-block;
  border-radius: 999px;
  text-decoration: none;
  color: #7A2D1D;
  font-weight: bold;
  width: 270px;
  height: auto;
  font-family: "Kiwi Maru", serif;

  /* グラデーション */
  background: linear-gradient(90deg, #D8C27A, #9BD3A6, #D8C27A);
  background-size: 200% 100%;
  background-position: left;
  transition: background-position 0.8s ease;
}

/* ホバーで右へ流れる */
.mail_button:hover {
  background-position: right;
}



/* メールテキスト */
.mail {
  display: block;
  margin-left: 38px;
  margin-top: 8px;
  font-size: 10px;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-style: normal;
}

/* メール　レターの画像 */
.mail_img {
  display: block;
  margin-left: 13px;
  margin-top: -28px;
  font-size: 30px;
  width: 28px;
  height: 45px;
}

.address_button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

/* ==========================================
   施設・サービス紹介ページ専用：アクセス非表示設定
   ========================================== */
@media screen and (min-width: 1025px) {

  /* PC表示のときだけ、アクセス情報を完全に消す */
  .service_hide_access {
    display: none;
  }
}

@media screen and (max-width: 375px) {
  .header_logo {
    width: 130px;
  }
}