@charset "utf-8";

/*!
 * hanamise-v5.css V.5.2 (BS5 Integrated)
 * 2026 SATOH-HANAMISE 
 */

/* ============================================================
   🌸 2026 SATOH-HANAMISE: CSS 虎の巻 🌸
   ============================================================
   
   【1. 弥園の「ハズし」：.sh-section-hazu-shi】
   - 「直角はいやだ」から生まれた左上角丸(120px)デザイン。
   - 擬似要素(::before)で、角の内側にサトウベージュの「忍ばせライン」を配置。
   - ぶつかる時は pb-5 や pt-100 で「上の余白」を広げて逃げること。
   
   【2. 事業案内：.sh-bento-grid (Service Menu)】
   - ホワイト・オーバーレイ：通常[透明] → ホバー[白い霧] で文字を浮かせる。
   - .sh-bento-num：01, 02等の番号。ホバーでスッと内側へ降りてくる演出。
   - .featured：横長メイン / .tall：縦長（採用リンク等）。
   
   【3. 店舗案内：Shop List】
   - .flex-grow-1：Access欄にこれを指定することで、カードの底辺（Tel等）を
     横一列でビシィッ！と揃える（サトウの礼儀正しさ）。
   - mb-4 mb-lg-5：スマホでは均等、PCでは大人の余裕（広い余白）の使い分け。
   
   【4. 品格のタイトル：.sh-section-title】
   - 明朝体(セリフ) ＋ 細字 ＋ 広い字間 ＝ 「めっちゃ品が出る」黄金比。
   - ホバーで下線がサトウベージュ(#d4b499)にじわっと染まる仕掛け。
   
   【5. その他・おもてなし】
   - .sh-floating-tabs：右側の浮遊タブ。PCでは文字あり、タブレットではアイコン。
   - --sh-biz-bg：法人ページ用の背景色（#D0DCDB）。
   
   ※ 困ったらブラウザの「検証モード(F12)」で後出しジャンケンの勝敗を確認！
   ============================================================ */




/* =========================================
   1. デザインシステム（共通変数）
   ========================================= */
:root {
  /* サトウ花店・コアカラー */
  --sh-main-bg: #FCF5ED;
  /* 弥園さん指定：本丸背景色 */
  --sh-biz-bg: #D0DCDB;
  /* 法人ページ背景色 */
  --sh-beige: #d3c1af;
  /* サトウベージュ（基本） */
  --sh-beige-dark: #8D7B68;
  /* サトウベージュ（濃いめ） */
  --sh-gold: #d4b499;
  /* サトウゴールド（アクセント） */
  --sh-red: #F10C0F;
  /* 限定・重要・赤下線 */

  /* BS5互換変数（Primaryボタンをサトウカラーに強制上書き） */
  --bs-primary: var(--sh-beige);
  --bs-primary-rgb: 211, 193, 175;
}

/* =========================================
   2. ベース・背景設定（全ページ共通）
   ========================================= */
html {
  scroll-behavior: smooth;
}

body {
  /* 全ページ共通の背景色を固定 */
  background-color: var(--sh-main-bg) !important;
  color: #333;
  position: relative;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  overscroll-behavior-y: none;
  /* 上下の「びよーん」を禁止 */

}

/* 法人（Business）ページ用の例外背景 */
body.body-biz,
body.site-biz {
  background-color: var(--sh-biz-bg) !important;
}

/* 背景を流れる泡（bubble-png）の設定 */
.background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.background-container img {
  position: absolute;
  width: 100px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.background-container img.visible {
  opacity: 1;
}

@media (max-width: 767px) {
  .background-container img {
    width: 60px;
  }
}

/* =========================================
   3. ボタン・UIコンポーネント (BS4からの統合)
   ========================================= */

/* サトウ花店標準ボタン (btn-primary と btn-satoh を統合) */
.btn-satoh,
.btn-primary {
  --bs-btn-bg: var(--sh-beige);
  --bs-btn-border-color: var(--sh-beige);
  --bs-btn-hover-bg: var(--sh-beige-hover, #c1994b);
  --bs-btn-hover-border-color: var(--sh-beige-hover, #c1994b);
  font-weight: bold;
}

/* 特価・限定表示 */
.gentei {
  background-color: var(--sh-red);
  color: #fff;
  text-align: center;
  padding: 0.2rem;
}

/* 赤下線 */
.under-red2 {
  border-bottom: solid 2px var(--sh-red);
}

/* ショップアイコン・サムネイル */
.icon-sh,
.icon-sh-shop {
  overflow: hidden;
  display: inline-block;
}

.icon-sh {
  width: 100px;
  height: 100px;
}

.icon-sh-shop {
  width: 200px;
  height: 200px;
}

.icon-sh img,
.icon-sh-shop img,
.card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* サムネイルホバー */
.thumbnail {
  cursor: pointer;
  border: 2px solid #ddd;
  transition: transform 0.2s, border-color 0.2s;
}

.thumbnail:hover {
  transform: scale(1.05);
  border-color: var(--sh-gold);
}

/* =========================================
   4. カルーセル・特殊UI (BS4互換維持)
   ========================================= */
.carousel-control-prev-sh,
.carousel-control-next-sh {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  color: #fff;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.carousel-control-prev-sh:hover,
.carousel-control-next-sh:hover {
  opacity: 0.9;
}

.carousel-control-prev-sh-icon,
.carousel-control-next-sh-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #848484;
  border-radius: 10px;
}

/* アイコンSVGデータは省略せずそのまま保持（BS4から移植） */

.carousel-sh-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding: 20px;
  color: #fff;
  text-align: center;
  background-color: rgba(51, 51, 51, 0.8);
}

/* =========================================
   5. 採用・ニュース・新コンポーネント
   ========================================= */
.job-card {
  transition: all 0.4s ease;
  background-color: #fff;
  border: 1px solid #eee;
  cursor: pointer;
}

.job-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05) !important;
  border-color: var(--sh-gold);
}

/* =========================================
   6. Page Top Button (Elegant)
   ========================================= */
.btn-to-top-base {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 50px;
  height: 50px;
  z-index: 1000;
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--sh-beige-dark);
  color: #fff;
  cursor: pointer;
}

.btn-to-top-base.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* =========================================
   4. カルーセル・特殊UI (BS5 Custom)
   ========================================= */

/* 画像の読みやすさを守るオーバーレイ */
.sh-overlay {
  position: relative;
  overflow: hidden;
}

.sh-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 下に向かって暗くして、文字を浮かび上がらせる */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}

/* キャプション文字の装飾 */
.carousel-caption h5 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.carousel-caption p {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* サトウベージュのアクセント線（BS5ユーティリティ補完） */
.border-beige {
  border-color: var(--sh-beige) !important;
}

/* =========================================
   [Common] Sticky Floating Tabs (Static Elegant)
   ※「にゅーっと」を廃止し、安定と品格を優先した決定版
   ========================================= */

.sh-floating-tabs {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: 2px; /* タブ同士をピタッと寄せて一体感を出す */

  /* 初期状態は非表示（JSの .is-active で表示） */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s;
  
  /* ガクつき防止の最終兵器 */
  will-change: opacity;
  pointer-events: none; /* 非表示時はクリックを無効化 */
}

/* JSによって表示範囲に入った時 */
.sh-floating-tabs.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; /* 表示時はクリック有効 */
}

.tab-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 18px;
  min-width: 160px; /* 文字が綺麗に収まる幅 */
  color: #fff !important;
  text-decoration: none !important;
  
  /* 背景：サトウベージュをベースに、高級感のある透過 */
  background-color: rgba(141, 123, 104, 0.95); /* --sh-beige-dark 相当 */
  
  /* 角丸：左側だけを落として「インデックス」風に */
  border-radius: 8px 0 0 8px;
  
  box-shadow: -2px 2px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

/* ホバー演出：動かさず「色」と「光」で伝える */
.tab-item:hover {
  background-color: rgba(122, 106, 89, 1); /* 少し濃くして「押せる」感を出す */
  box-shadow: -4px 4px 15px rgba(0,0,0,0.2);
}

/* アイコンの設定 */
.tab-item i {
  font-size: 1.2rem;
  margin-right: 12px;
  line-height: 1;
}

/* テキストの設定 */
.tab-item span {
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* --- 個別カラーバリエーション（必要に応じて） --- */

/* 例：母の日など、季節限定感を出す場合 */
.tab-item.mother {
  background-color: rgba(225, 192, 182, 0.98); /* 優しいピンクベージュ */
  color: #5d4a44 !important; /* 文字色は濃い茶色で可読性確保 */
}
.tab-item.mother:hover {
  background-color: rgba(212, 180, 153, 1);
}

/* 法人用：よりフォーマルに */
.tab-item.biz {
  /* 基本色と同じ、もしくは少しだけトーンを変える */
  border-left: 3px solid var(--sh-gold, #d4b499); /* 金色のアセント線を足すと上品 */
}
/* 1. 通常（広い画面）: 文字もしっかり出す */
@media (min-width: 1200px) {
  .tab-item { min-width: 160px; }
}

/* 2. 中間（タブレット〜小さめPC）: アイコンを優先し、文字を小さく or 幅を詰める */
@media (max-width: 1199px) and (min-width: 768px) {
  .tab-item {
    min-width: 50px; /* アイコンが入る最小限に */
    padding: 12px;
  }
  .tab-item span {
    display: none; /* 文字を隠して、アイコンだけにスッキリさせる */
  }
  .tab-item:hover {
    min-width: 160px; /* ホバーした時だけ文字が出る「にゅーっと」をここだけで復活させるのも手 */
  }
}

/* 3. スマホ: 完全に非表示（既存の d-none d-md-flex でOK） */

/* =========================================
   [Main] Bento Grid Layout (White Elegance Ver.)
   ※白オーバーレイと黒文字による、清潔感と品格の両立
   ========================================= */

/* --- 1. 基本構造 --- */
.sh-bento-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  height: 280px; /* スマホ・標準時の高さ */
  text-decoration: none !important;
  background-color: #fcfaf8; /* 画像読み込み前の下地 */
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- 2. レスポンシブ高さ（PC画面） --- */
@media (min-width: 992px) {
  /* メイン：横長大サイズ */
  .sh-bento-item.featured { height: 420px; }
  /* 採用など：縦に引き伸ばす（親のd-flexと併用） */
  .sh-bento-item.tall { height: 100%; min-height: 420px; }
}

/* --- 3. 画像演出：極スロー・ズーム --- */
.sh-bento-img-wrap {
  width: 100%;
  height: 100%;
}
.sh-bento-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 1.5秒かけて「呼吸」するように動かす */
  transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.sh-bento-item:hover .sh-bento-img {
  transform: scale(1.1);
}

/* --- 4. ホワイト・オーバーレイ（入れ替え版） --- */
.sh-bento-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  
  /* 【通常時】極めて薄く。下層の写真がクリアに見える状態 */
  /* 下端にほんの少し(20%程度)だけ白を忍ばせ、文字の最低限の視認性を確保 */
  background: linear-gradient(to top, 
    rgba(255, 255, 255, 0.3) 0%, 
    rgba(255, 255, 255, 0) 50%);
  
  z-index: 1;
  /* 霧が濃くなるスピードを少しゆっくり(0.6s)にすると、より上品です */
  transition: all 0.6s ease;
}

.sh-bento-item:hover .sh-bento-overlay {
  /* 【ホバー時】霧を濃くして、文字を浮かび上がらせる（フォーカス効果） */
  background: linear-gradient(to top, 
    rgba(255, 255, 255, 0.9) 0%, 
    rgba(255, 255, 255, 0.5) 40%, 
    rgba(255, 255, 255, 0.1) 100%);
}

/* --- 5. コンテンツ・文字設定 --- */
.sh-bento-content {
  position: absolute;
  bottom: 0; left: 0; width: 100%;
  padding: 30px;
  z-index: 3;
}

.sh-bento-title {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: #333333 !important; /* 品格のある濃いグレー */
  letter-spacing: 0.08em;
  transition: transform 0.4s ease;
}

.sh-bento-text {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: #555555 !important;
  margin-bottom: 0;
  transition: transform 0.4s ease;
}

/* --- 6. 隠し味：装飾用の大きな番号 --- */
.sh-bento-num {
  position: absolute;
  top: 10px; right: 15px;
  font-family: 'Times New Roman', serif;
  font-size: 5rem;
  font-style: italic;
  /* 白背景に溶け込む、非常に薄いサトウベージュ */
  color: rgba(212, 180, 153, 0.15); 
  z-index: 2;
  line-height: 1;
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- 7. ホバー時の「小さなセンス」の動き --- */
.sh-bento-item:hover .sh-bento-title,
.sh-bento-item:hover .sh-bento-text {
  transform: translateY(-5px); /* 文字を少し浮かす */
}

.sh-bento-item:hover .sh-bento-num {
  /* 番号が少し濃くなりつつ、スッと内側へ降りてくる */
  color: rgba(212, 180, 153, 0.35);
  transform: translateY(20px) translateX(-10px) scale(1.1);
}

/* --- 8. 特殊設定（YouTubeリンクなど） --- */
.sh-bento-item.video .sh-bento-title i {
  color: #d4b499; /* 再生アイコンだけサトウゴールドに */
  margin-right: 8px;
}
/* --- セクション背景：左上角丸 ＋ 忍ばせライン演出 --- */
.sh-section-hazu-shi {
  position: relative;
  background-color: #fbf9f6; /* 極めて薄いサトウベージュ背景 */
  border-radius: 120px 0 0 0; /* 左上だけ大胆に丸める */
  padding: 80px 0;           /* 上下の余白 */
  margin-top: 50px;          /* 前の要素との隙間 */
  overflow: visible;         /* ラインを少しはみ出させるためにvisible */
}

/* 忍ばせライン（疑似要素で作成） */
.sh-section-hazu-shi::before {
  content: "";
  position: absolute;
  top: 12px;  /* 枠から少し内側にずらす */
  left: 12px; /* 枠から少し内側にずらす */
  width: 200px;  /* 曲線部分をカバーする程度のサイズ */
  height: 200px;
  border-top: 1px solid rgba(212, 180, 153, 0.4);  /* サトウベージュ（薄め） */
  border-left: 1px solid rgba(212, 180, 153, 0.4);
  border-top-left-radius: 110px; /* 本体の角丸に添うように調整 */
  pointer-events: none; /* クリックを邪魔しない */
  z-index: 0;
}

/* スマホでは角丸とラインを少し控えめに調整 */
@media (max-width: 768px) {
  .sh-section-hazu-shi {
    border-radius: 60px 0 0 0;
    padding: 50px 0;
  }
  .sh-section-hazu-shi::before {
    top: 8px;
    left: 8px;
    width: 100px;
    height: 100px;
    border-top-left-radius: 55px;
  }
}

/* --- 共通：和洋折衷のエレガント・タイトル --- */
.sh-section-title {
  font-family: "Times New Roman", "Shippori Mincho", "MS Mincho", serif;
  font-weight: 300;      /* 細身にすることで高級感を出す */
  letter-spacing: 0.15em; /* 優雅な余白 */
  color: #333;
  position: relative;
  display: inline-block; /* 下線の長さを文字に合わせるため */
  width: 100%;           /* 中央揃えを維持 */
}

.sh-section-title span {
  font-family: "Noto Sans JP", sans-serif; /* 日本語サブは読みやすくゴシックで */
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  display: block;
  margin-top: 10px;
  color: #888;
}

/* 見出しに加えて、電話番号や特定の数字にも適用する */
h1, h2, h3, h4, h5, h6, .sh-shop-tel, .sh-bento-num {
  font-feature-settings: "tnum", "lnum";
}

.sh-badge-satoh {
  background-color: var(--sh-beige); /* 例のベージュ */
  color: white !important;
  padding: 0.5em 1em;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.sh-badge-satoh a {
  color: white !important;
  text-decoration: none;
}

/* =========================================
   [Custom] TOP Page ONLY Accordion
   ========================================= */

/* このクラスの中にあるボタンだけをベージュにする */
.sh-top-accordion .accordion-button {
  font-family: "Times New Roman", "Shippori Mincho", serif;
  color: #333;
}

/* 展開時の色（このアコーディオン限定） */
.sh-top-accordion .accordion-button:not(.collapsed) {
  color: var(--sh-beige-dark);
  background-color: #fdfaf7;
}

/* フォーカス時の光（このアコーディオン限定） */
.sh-top-accordion .accordion-button:focus {
  border-color: var(--sh-beige);
  box-shadow: 0 0 0 0.25rem rgba(211, 193, 175, 0.25);
}

/* 矢印の色（このアコーディオン限定） */
.sh-top-accordion .accordion-button::after {
  filter: sepia(100%) saturate(200%) brightness(80%) hue-rotate(330deg);
}

/* =========================================
   [Mobile Only] Hero Section & Scroll Animation
   ========================================= */

.sh-mobile-hero {
  position: relative;
  width: 100%;
  height: 100dvh; /* 2026年標準：スマホのバーを除いた全画面 */
  overflow: hidden;
  background-color: var(--sh-main-bg);
}

.sh-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 縦長写真を画面いっぱいに */
}

/* Scroll 誘導のデザイン */
.sh-scroll-guide {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  text-align: center;
  z-index: 5;
}

.sh-scroll-guide span {
  font-family: 'Times New Roman', serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

/* スッと消えるラインのアニメーション */
.sh-scroll-line {
  width: 1px;
  height: 60px;
  background: rgba(255, 255, 255, 0.4);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.sh-scroll-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  animation: sh-scroll-anim 2.5s infinite;
}

@keyframes sh-scroll-anim {
  0% { transform: translateY(-100%); }
  30% { transform: translateY(0); }
  60% { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

.sh-hero-logo {
  position: absolute;
  top: 45%; /* 真ん中より少しだけ上に置くと、視覚的に安定します */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%; /* スマホ画面の横幅に対して、品の良いサイズ感 */
  max-width: 250px;
  z-index: 10;
  pointer-events: none; /* ロゴがクリックの邪魔をしないように */
  
  /* じわ〜っと浮かび上がる演出（弥園さんのハズし） */
  animation: logo-fade-in 2.5s ease-out forwards;
}

@keyframes logo-fade-in {
  0% { opacity: 0; transform: translate(-50%, -40%); }
  100% { opacity: 1; transform: translate(-50%, -50%); }
}

/* --- 1. 全体のデボリューション阻止（Noto Sans JP） --- */
body {
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- 2. 営業部も納得！数字のガタつきを殺す設定 --- */
/* 金額や日付など、数字を綺麗に並べたい要素にこのクラスを付けます */
.sh-numeric, .price, .date {
  font-variant-numeric: tabular-nums; /* 数字の横幅をすべて等幅に固定する魔法 */
  font-feature-settings: "tnum";      /* 古いブラウザ用の保険 */
  letter-spacing: 0.02em;            /* ほんの少しだけ広げるとより高級感が出ます */
}

/* --- 3. ダサ明朝を駆逐する「しっぽり明朝」 --- */
.sh-serif-title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500; /* 500（中肉中背）が一番エレガントに見えます */
}

/* --- 4. カテゴリボタン（Boldサンセリフ） --- */
.sh-category-btn {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em; /* 少し広めの字間が、サトウの「ハズし」の美学 */
}