@charset "UTF-8";
/* =====================================================================
   haya.css
   既存レイアウトの骨格（width / float / position）は変更せず、
   質感・タイポグラフィ・余白のリズム・マイクロインタラクションを
   ブラッシュアップするための追加スタイルシート。
   common.css / index.css / lower.css / style.css / *.css の後に読み込む。
   ===================================================================== */

:root {
  --nagato-blue: #53a2c3;
  --nagato-blue-dark: #3c3c3c;
  --nagato-yellow: #f9d50e;
  --nagato-text: #3e4142;
  --shadow-soft: 0 4px 16px rgba(62, 65, 66, 0.08);
  --shadow-soft-hover: 0 8px 24px rgba(62, 65, 66, 0.14);
  --radius-base: 6px;
}

/* ---------------------------------------------------------------------
   全体のタイポグラフィ
   SPは行間に対して文字間が広めに出やすいので少し詰めて可読性を上げる
--------------------------------------------------------------------- */
@media screen and (max-width: 740px) {
  body {
    letter-spacing: 0.04rem;
  }
  h2,
  h3,
  .lato {
    letter-spacing: 0.05rem;
  }
}

/* 見出し直下のリード文などの行間を少し広げて詰まった印象を和らげる */
@media screen and (max-width: 740px) {
  .h2_wrap p,
  .h3_wrap p,
  #h2_title h2 span {
    letter-spacing: 0.08rem;
  }
}

/* ---------------------------------------------------------------------
   リンク全般のトランジションを統一（色変化を滑らかに）
--------------------------------------------------------------------- */
a {
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    opacity 0.25s ease;
}

/* ---------------------------------------------------------------------
   CTAボタン群に立体感とタップフィードバックを付与
   （width / display / padding 等の配置系プロパティは触らない）
--------------------------------------------------------------------- */
.link_btn,
.yellow_btn,
.contact_btn {
  box-shadow: var(--shadow-soft);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.3s ease,
    color 0.3s ease;
}
.link_btn:hover,
.yellow_btn:hover,
.contact_btn:hover {
  box-shadow: var(--shadow-soft-hover);
  transform: translateY(-3px);
}
.link_btn:active,
.yellow_btn:active,
.contact_btn:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(62, 65, 66, 0.12);
}

/* SP版はホバー演出が誤タップの温床になりやすいので、タップ時のみ軽く沈める */
@media screen and (max-width: 740px) {
  .link_btn:active,
  .yellow_btn:active,
  .contact_btn:active {
    transform: scale(0.98);
    box-shadow: 0 2px 6px rgba(62, 65, 66, 0.1);
  }
}

/* ---------------------------------------------------------------------
   カード状の要素に薄い影を足して背景から浮かせる
   （フラットすぎて要素の境界が読み取りづらい箇所への対応）
--------------------------------------------------------------------- */
#room section,
#room_dx section,
#recommend ul li a .title,
#info .box,
#info .bnr,
.contact .contact_box,
.morning_box,
#room_facility,
#room_dx_facility {
  box-shadow: var(--shadow-soft);
}

@media screen and (max-width: 740px) {
  #room section,
  #room_dx section,
  #info .box,
  #info .bnr,
  .contact .contact_box,
  .morning_box {
    box-shadow: 0 3px 12px rgba(62, 65, 66, 0.07);
  }
}

/* 設備アイコンの白カードに軽い影を足して浮遊感を出す */
#room_facility ul li,
#room_amenity ul li,
#room_dx_facility ul li {
  box-shadow: 0 2px 6px rgba(62, 65, 66, 0.1);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* ---------------------------------------------------------------------
   画像の角に丸みを持たせて硬い印象を和らげる
   （サイズ・配置は一切変更しない）
--------------------------------------------------------------------- */
#about .contents_inner img,
#room_facility ul li .img,
#room_amenity ul li .img,
#room_dx_facility ul li .img,
.contact .contact_box img,
#access .img img,
#breakfast .img img {
  border-radius: 4px;
}

/* ---------------------------------------------------------------------
   フォーム要素（お問い合わせ）
   フォーカス状態が未定義だったため、状態変化がわかるように補強
--------------------------------------------------------------------- */
.contact input[type="text"],
.contact input[type="email"],
.contact input[type="url"],
.contact select,
.contact textarea {
  border-radius: 4px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.contact input[type="text"]:focus,
.contact input[type="email"]:focus,
.contact input[type="url"]:focus,
.contact select:focus,
.contact textarea:focus {
  border-color: var(--nagato-blue);
  box-shadow: 0 0 0 3px rgba(83, 162, 195, 0.15);
}
.contact .mw_wp_form .form_td input[type="checkbox"] + span::before,
.contact .mw_wp_form .form_td input[type="radio"] + span::before {
  border-radius: 3px;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
.contact .mw_wp_form .form_td input[type="checkbox"]:checked + span::before,
.contact .mw_wp_form .form_td input[type="radio"]:checked + span::before {
  color: var(--nagato-blue);
  border-color: var(--nagato-blue);
}

/* ---------------------------------------------------------------------
   SPナビゲーション（ハンバーガーメニュー）に奥行きを追加
--------------------------------------------------------------------- */
@media screen and (max-width: 980px) {
  #nav_sp {
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.25);
  }
  #nav_sp ul li a {
    transition:
      background 0.25s ease,
      padding-left 0.25s ease;
  }
  #nav_sp ul li a:active {
    padding-left: 4%;
  }
}

/* 下部固定メニュー：影を足して本文との境界を明確にする */
#sp_menu {
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
}
#sp_menu li a,
#sp_menu li span {
  transition: background 0.2s ease;
}

/* header_sp にも軽い影を足し、スクロール時の本文との境界を明確化 */
header.header_sp {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* ---------------------------------------------------------------------
   スライダー矢印（.recommendlist / .tourismlist 等）が
   SP幅で画面外にはみ出て見切れるのを防ぐ
--------------------------------------------------------------------- */
@media screen and (max-width: 740px) {
  .slick-prev {
    left: 0;
  }
  .slick-next {
    right: 0;
  }
}

/* ---------------------------------------------------------------------
   フッターSNSアイコン・LINEボタンのホバー/タップ演出
--------------------------------------------------------------------- */
#info_sns li a {
  display: inline-block;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}
#info_sns li a:hover {
  transform: translateY(-2px);
}
#btn-side1-parts a {
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease;
  box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.15);
}
#btn-side1-parts a:hover {
  background: #05b34c;
}

/* ---------------------------------------------------------------------
   パンくず・見出し帯（#h2_title）の余白リズムをSPで少し呼吸させる
--------------------------------------------------------------------- */
@media screen and (max-width: 740px) {
  #breadcrumb {
    padding: 4px 0;
    font-size: 1.2rem;
  }
  #h2_title h2 {
    letter-spacing: 0.05rem;
  }
}

/* ---------------------------------------------------------------------
   セクション見出し（h3_wrap / h2_wrap）の下線装飾を少し柔らかく
--------------------------------------------------------------------- */
.line_horizon::before,
.line_horizon::after {
  border-bottom-width: 2px;
}
@media screen and (min-width: 741px) {
  .line_horizon::before,
  .line_horizon::after {
    border-bottom-width: 3px;
  }
}