/* =============================================
   1. 共通設定（ロゴ・スライダー）
   ============================================= */
body { font-size: 16px; font-family: sans-serif; margin: 0; }

.header-top { padding: 20px 0; text-align: center; background-color: #fff; }
.company-name { font-size: 20px; font-weight: bold; color: #333; text-decoration: none; display: block; letter-spacing: 0.1em; }
.header-copy { font-size: 12px; color: #666; font-style: italic; display: block; margin-top: 5px; }

/* スライダー */
.slider-container { width: 100%; max-width: 1200px; margin: 0 auto; overflow: hidden; position: relative; }
.slider { display: flex; width: 300%; animation: slide-animation 15s infinite; }
.slide { width: 100%; position: relative; }
.slide img { width: 100%; height: auto; display: block; object-fit: cover; }
.slide-text { position: absolute; bottom: 20%; left: 5%; background: rgba(0, 68, 51, 0.8); color: #fff; padding: 10px 20px; font-size: 1.2rem; font-weight: bold; }

@keyframes slide-animation {
    0%, 30% { transform: translateX(0); }
    33%, 63% { transform: translateX(-33.33%); }
    66%, 96% { transform: translateX(-66.66%); }
    100% { transform: translateX(0); }
}

/* =============================================
   2. メニュー設定（PC・基本）
   ============================================= */
.tatami-nav { background-color: #f9f7f2; border-top: 1px solid #eee; border-bottom: 3px solid #004433; }

/* PCメニュー：常に横並び表示 */
.menu-list {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0; padding: 0;
}
.menu-list li { position: relative; }
.menu-list a { display: block; padding: 15px 20px; text-decoration: none; color: #333; font-weight: bold; transition: 0.3s; }

/* ホバー：白抜きボールド */
.menu-list a:hover { background-color: #004433 !important; color: #ffffff !important; font-weight: bold !important; }

/* 子メニュー（プルダウン） */
.sub-menu {
    display: none; position: absolute; top: 100%; left: 0; width: 220px;
    background-color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 1000; padding: 0; list-style: none;
}
.menu-list li:hover > .sub-menu { display: block; }
.sub-menu a { padding: 12px 20px; font-size: 14px; border-bottom: 1px solid #eee; }

/* 特別枠 */
.nav-global a { color: #a18948 !important; }
.nav-contact a { color: #004433 !important; background-color: #fff !important; border: 1px solid #004433; margin-left: 10px; border-radius: 4px; }
.nav-contact a:hover { background-color: #004433 !important; color: #fff !important; }

/* =============================================
   3. スマホ用設定（768px以下）
   ============================================= */
.menu-toggle-btn { display: none; } /* PCでは隠す */

@media screen and (max-width: 768px) {
    .company-name { font-size: 18px; }
    .header-copy { font-size: 13px; }
    .slide-text { font-size: 1rem; bottom: 10%; }

    /* 開閉ボタン表示 */
    .menu-toggle-btn {
        display: block; width: 100%; padding: 15px;
        background: #004433; color: #fff; border: none;
        font-size: 18px; font-weight: bold; cursor: pointer;
    }

    /* スマホでは最初は隠す（JSで制御） */
    .menu-list {
        display: none;
        flex-direction: column;
    }
    .menu-list li { border-bottom: 1px solid #eee; }
    .nav-contact a { margin-left: 0; margin-top: 5px; border-radius: 0; }

    /* 子メニューを最初から展開 */
    .sub-menu { position: static; width: 100%; background: #fdfcf9; display: block; box-shadow: none; padding-left: 20px; }
}


/.price-compact-nav {
  max-width: 800px;
  margin: 20px auto;
  font-family: sans-serif;
}

.nav-table {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.nav-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  background: #fff;
}

.nav-row:last-child { border-bottom: none; }

/* 左側の見出し */
.nav-label {
  flex: 0 0 100px;
  padding: 15px;
  background: #f9f7f2;
  font-size: 13px;
  font-weight: bold;
  color: #444;
  text-align: center;
  border-right: 1px solid #ddd;
}

.size-label {
  display: block;
  font-size: 11px;
  color: #004433;
}

/* 右側のボタンエリア */
.nav-btns {
  flex: 1;
  display: flex;
  gap: 8px;
  padding: 10px;
  flex-wrap: wrap; /* スマホでボタンが入りきらない時に折り返す */
}

.nav-btns a {
  flex: 1;
  min-width: 70px;
  text-align: center;
  padding: 8px 5px;
  text-decoration: none;
  font-size: 13px;
  border-radius: 4px;
  color: #fff;
  transition: 0.3s;
}

/* 素材別の色指定 */
.btn-igusa { background-color: #4a6741; }
.btn-washi { background-color: #d9c5b2; color: #5d4037 !important; }
.btn-migusa { background-color: #7d8a96; }

.nav-btns a:hover { opacity: 0.8; transform: translateY(-1px); }

/* スマホ表示の微調整 */
@media screen and (max-width: 480px) {
  .nav-label { flex: 0 0 80px; padding: 10px 5px; font-size: 12px; }
  .nav-btns a { font-size: 11px; padding: 6px 2px; }
}

/* 3本の色違いバーをあしらったH1装飾 */
.h1-triple-bar {
    position: relative;
    padding: 15px 15px 15px 60px; /* バーが3本入るよう左余白を広めに設定 */
    font-size: 1.8rem;
    color: #333;
    line-height: 1.4;
    background-color: #f5c064; /* サイト共通のベージュ背景 */
    margin: 30px 0;
    border-radius: 0 4px 4px 0;
    overflow: hidden; /* 背景からはみ出さないように設定 */
}

/* 3本の異なる色のバーを疑似要素で作成 */
.h1-triple-bar::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 15px; /* 1本目（濃い緑）の配置位置 */
    transform: translateY(-50%);
    width: 6px;  /* バーの太さ */
    height: 70%; /* バーの高さ */
    background-color: #004433; /* 1本目：濃い緑（メインカラー） */
    
    /* 2本目と3本目をbox-shadowで色分けして配置 */
    box-shadow: 
        14px 0 0 0 #4B0082, /* 2本目：濃い紫 (Indigo) */
        28px 0 0 0 #D2691E; /* 3本目：濃いオレンジ (Chocolate/Rust) */
}

/* スマホ表示の調整（文字サイズと余白） */
@media screen and (max-width: 768px) {
    .h1-triple-bar {
        font-size: 1.4rem;
        padding: 12px 12px 12px 55px;
    }
}

/* =============================================
   ビデオセクション：表示復旧と強制収束
   ============================================= */

/* 1. コンテナ：前の要素との干渉を防ぎ、高さを固定する */
.video-container {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 300px !important;    /* スマホでの高さを300pxに固定 */
  margin: 20px 0 !important;
  overflow: hidden !important; /* はみ出しを絶対に許さない */
  background-color: #000;
  clear: both !important;      /* 前の要素の回り込みを解除 */
}

/* 2. ビデオ：コンテナのサイズに強制的に合わせる */
.bg-video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* アスペクト比を維持して切り抜き */
  z-index: 1 !important;
}

/* 3. テキスト：ビデオの上に浮かせて中央に配置 */
.video-overlay {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 90% !important;
  z-index: 2 !important;
  text-align: center !important;
  pointer-events: none; /* ビデオの操作を邪魔しない */
}

.video-overlay h2, 
.video-overlay h3 {
  color: #ffffff !important;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8) !important;
  margin: 5px 0 !important;
}

.video-overlay h2 { font-size: 1.2rem !important; }
.video-overlay h3 { font-size: 0.8rem !important; }

/* 4. PC用の高さ調整 */
@media screen and (min-width: 768px) {
  .video-container {
    height: 500px !important; /* PCでは高さを出す */
  }
  .video-overlay h2 { font-size: 2.2rem !important; }
  .video-overlay h3 { font-size: 1.2rem !important; }
}

/* =============================================
   完全独立型ビデオセクション（干渉防止版）
   ============================================= */

/* 1. 外枠：ここを「基準点」として絶対固定する */
.zen-video-box {
  position: relative !important; /* 子要素の基準点 */
  width: 100% !important;
  height: 300px !important;      /* スマホ縦での高さ */
  overflow: hidden !important;   /* はみ出しを物理的にカット */
  background-color: #000;
  margin: 30px 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* 2. ビデオ：外枠の中に強制的に閉じ込める */
.zen-video-box video.bg-video {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;  /* 枠を埋め尽くす */
  z-index: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3. テキスト：外枠（box）の真ん中に浮かせる */
.zen-video-box .video-overlay {
  position: absolute !important;
  top: 50% !important;           /* boxの縦中央 */
  left: 50% !important;          /* boxの横中央 */
  transform: translate(-50%, -50%) !important;
  width: 90% !important;
  z-index: 10 !important;        /* ビデオより必ず上 */
  text-align: center !important;
  pointer-events: none;
}

/* 文字色と視認性 */
.zen-video-box .video-overlay h2, 
.zen-video-box .video-overlay h3 {
  color: #ffffff !important;
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.9) !important;
  margin: 5px 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

.zen-video-box .video-overlay h2 { font-size: 1.3rem !important; font-weight: bold !important; }
.zen-video-box .video-overlay h3 { font-size: 0.9rem !important; }

/* PC用の調整（横幅が広い時） */
@media screen and (min-width: 768px) {
  .zen-video-box {
    height: 500px !important; /* PCでは大きく */
  }
  .zen-video-box .video-overlay h2 { font-size: 2.8rem !important; }
  .zen-video-box .video-overlay h3 { font-size: 1.5rem !important; }
}