body { font-family: Arial, sans-serif; text-align: center; margin: 20px; }
        .container { width: 100%; margin: auto; }

        body {
        width: 100%;
        overflow-x: hidden; /* 横方向のスクロールを防ぐ */
        }

        /* メイン項目見出し用グラデーション背景 */
        .headline {
        background: linear-gradient(to right, #ffffff, #ffa07a); /* 白から赤みのあるオレンジへのグラデーション */
        color: #333333; /* テキストカラー（例: 暗いグレー） */
        text-align: left; /* テキストを左詰めに配置 */
        padding: 2px 15px; /* 内側余白を適用 */
        font-size: 1.5em; /* フォントサイズを適切に設定 */
        height: 15vh;
        }

        .headline .main {
         display: flex; /* Flexboxを有効にする */
         align-items: flex-end; /* 縦方向（上下）の中央揃え */
         justify-content: left; /* 横方向（左右）の中央揃え（必要に応じて） */
         height: 60%; /* 親要素の高さを指定（画面全体に適用する例） */
         font-weight: bold; /* 太字 */
         font-style: italic; /* イタリック（斜体） */
         color: #333333; /* 暗いグレー */
         margin-left: 10px; /* 左に15pxの余白 */
         font-size: 2.0em; /* フォントサイズを2emに設定 */
        }


      @media (max-width: 768px) {
        .headline .main {
         display: flex; /* Flexboxを有効にする */
         align-items: flex-end; /* 縦方向（上下）の中央揃え */
         justify-content: left; /* 横方向（左右）の中央揃え（必要に応じて） */
         height: 60%; /* 親要素の高さを指定（画面全体に適用する例） */
         font-weight: bold; /* 太字 */
         font-style: italic; /* イタリック（斜体） */
         color: #333333; /* 暗いグレー */
         margin-left: 10px; /* 左に15pxの余白 */
         font-size: 1.3em; /* フォントサイズを2emに設定 */
        }
      }



        .headline .sub {
         display: flex; /* Flexboxを有効にする */
         align-items: flex-start; /* 縦方向（上下）の中央揃え */
         justify-content: left; /* 横方向（左右）の中央揃え（必要に応じて） */
         height: 40%; /* 親要素の高さを指定（画面全体に適用する例） */
         font-style: italic; /* イタリック（斜体） */
         color: #333333; /* 暗いグレー */
         margin-left: 10px; /* 左に10pxの余白 */
         font-size: 0.8em; /* フォントサイズを2emに設定 */
        }


        img, div {
         max-width: 100%; /* 要素を親コンテナー内に収める */
        }
        
        /* 初めの3つのブロックを横並びに */
        .flex-container-a {
            display: flex;
            justify-content: space-around;
            gap: 10px;
        }
        .flex-container-a .section {
            flex: 1;
            padding: 5px 10px;
            margin : 0px 0;
            background-color: #ffffff;
        }

        .flex-container-a > .section > * {
              display: inline-block; /* .section内のすべての子要素をインライン表示 */
              margin-right: 8px; /* 子要素間のスペースを調整 */
        }


        .flex-container-b {
            display: flex;
            justify-content: space-around;
            gap: 10px;
        }
        .flex-container-b .section {
            flex: 1;
            padding: 0px 5px;
            margin : 0px 0;
            background-color: #ffffff;
            border-radius: 10px;
        }
        

        .flex-container-c {
            display: flex;
            justify-content: space-around;
            gap: 10px;
        }
        .flex-container-c .section {
            flex: 1;
            padding: 5px 10px;
            margin : 0px 0;
            background-color: #ffffff;
        }

        .flex-container-c > .section > * {
              display: inline-block; /* .section内のすべての子要素をインライン表示 */
              margin-right: 8px; /* 子要素間のスペースを調整 */
        }




        h1 {
            font-size: clamp(0.1rem, 3vw, 3rem); 
            margin: 5px; /* 外側の余白を設定 */
            padding: 10px; /* 内側の余白を設定 */
            display: flex; /* フレックスボックスで横並び */
            justify-content: space-between; /* 左右に要素を分ける */
            align-items: center; /* 垂直方向を中央に揃える */
            cursor: pointer;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
        }

        .title {
            display: flex; /* フレックスボックスを使用 */
            justify-content: center; /* 子要素を中央寄せ */
            align-items: center; /* 垂直方向を中央揃え */
            position: relative; /* 相対位置指定 */
            cursor: pointer;
            background-color: #ffffff;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
        }


        h2 {
        font-size: clamp(0.1rem, 2.7vw, 3rem); 
        display: inline-block;
        margin: 10px 5px 5px 5px;
        padding: 5px;
        border-bottom: 2px solid #616161; /* 赤色の下線 */
                }

        h3 {
        font-size: clamp(0.1rem, 2.5rem, 3rem); 
        margin: 0px;
        padding: 10px;
        font-weight: bold; /* 太字 */
        font-style: italic; /* イタリック */
        }

        h4 {
        font-size: clamp(0.1rem, 1.9vw, 3rem); 
        margin: 0px;
        padding: 10px 0px 10px 0px;
        font-weight: bold; /* 太字 */
        font-style: italic; /* イタリック */
        }

        .openhour h4{
          font-size:3vw;
        }

        h5 {
        font-size: clamp(0.8rem, 3vw, 3rem); 
        margin: 0px;
        padding: 10px 0px 10px 0px;
        font-weight: bold; /* 太字 */
        font-style: italic; /* イタリック */
        }

        p {
        font-size: clamp(0.1rem, 1.7vw, 3rem); 
        color: #333333; /* 暗いグレー */
        text-align: left;
        margin: 15px;
        padding: 0 15px;
        }

        .container {
    position: relative;
    width: 100%; /* 横幅を一杯に広げる */
    aspect-ratio: 16 / 9 ; /* 画像の比率 (例えば16:9) を指定 */
    background-image: url("../img/tempotopnyh.jpg"); /* 背景画像を指定 */
    background-size: cover; /* 背景画像をコンテナー全体に調整 */
    background-position: center; /* 中央揃えで表示 */
    background-repeat: no-repeat; /* 繰り返しを防ぐ */
    }


    .text-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
      font-size: 10vw;
    }

@media (max-width: 768px) {
  body {
    padding: 0;
    margin: 0;
    overflow-x: hidden; /* 小画面での横スクロール防止 */
  }
}

/* スマホ用文字調節 */
@media (max-width: 768px) {
  h1 {
    font-size: 2.0rem; /* フォントを少し小さく */
  }
  h2 {
    font-size: 1.5rem;
  }
  h3 {
    font-size: 1.3rem;
  }

  .openhour h3 {
    font-size: 2rem;
  }

  h4 {
    font-size: 1.25rem;
  }


.openhour h4{
  text-align:center;
  font-size:1.8em;
}

  h5 {
    font-size: 1.25rem;
  }
  p {
    font-size: 1.2rem; /* 段落のフォントも縮小 */
  }
}

/* スマートフォン用（幅が480px以下の場合） */
@media (max-width: 480px) {
  .pc{
    display:none;
  }
  h1 {
    font-size: 1.2rem; /* モバイル向けの最適化 */
  }
  h2 {
    font-size: 1.5rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  .openhour h3 {
    font-size: 2.5rem;
  }

  h4 {
    font-size: 2rem;
  }

.openhour h4{
  text-align:center;
  font-size:1.8em;
}
   h5 {
    font-size: 1.25rem;
  }
  .openhour p {
    font-size: 1.3rem;
  }
}

/* PC用（幅が481px以上の場合） */
@media (min-width: 481px) {
  .sp{
    display:none;
     }
    }


        /* 同じクラスの文字調節 */
        .large-text {
        font-size: 130%; /* 大きな文字サイズ */
        font-weight: bold; /* 太字にする場合 */
        }

        .small-text {
        font-size: 70%; /* 小さな文字サイズ */
        color: gray; /* 文字色を変更する例 */
        }
        
        .section img { max-width: 100%; height: auto; margin-top: 10px; }

        .link-container a {
            display: inline-block;
            margin:0px 0px 30px 0px;
            padding: 15px 30px;
            background-color: #d9534f;
            color: white;
            text-decoration: none;
            font-size: 18px;
            transition: opacity 0.3s ease-in-out;
        }
        .link-container a:hover {
            opacity: 0.8; /* 透過率を20%上げる */
        }


        .linkbotton-rakuten a {
            width: 450px;
            display: inline-block;
            margin:20px 0px 10px 0px;
            padding: 20px 0px;
            background-color: #e4000e;
            color: white;
            text-decoration: none;
            transition: opacity 0.3s ease-in-out;
            border-radius:10px;
        }

        .linkbotton-yahoo a {
            width: 450px;
            display: inline-block;
            margin:10px 0px 50px 0px;
            padding: 20px 0px;
            background-color: #ffa500;
            color: white;
            text-decoration: none;
            transition: opacity 0.3s ease-in-out;
            border-radius:10px;
        }



        .linkbotton-maintenance a {
            width: 450px;
            display: inline-block;
            margin:20px 0px 20px 0px;
            padding: 20px 0px;
            background-color: #0d7068;
            color: white;
            text-decoration: none;
            transition: opacity 0.3s ease-in-out;
            border-radius:10px;
        }        


        .linkbotton-access a {
            width: 450px;
            display: inline-block;
            margin:20px 0px 20px 0px;
            padding: 20px 0px;
            background-color: #636363;
            color: white;
            text-decoration: none;
            transition: opacity 0.3s ease-in-out;
            border-radius:10px;
        }  
        
        .linkbotton-contact a {
            width: 450px;
            display: inline-block;
            margin:20px 0px 20px 0px;
            padding: 20px 0px;
            background-color: #9b0000;
            color: white;
            text-decoration: none;
            transition: opacity 0.3s ease-in-out;
            border-radius:10px;
        }   

        .linkbotton-recruit,
        .linkbotton-access,
        .linkbotton-contact{
          margin:20px auto;
        }

        

        .linkbotton-recruit a {
            width: 450px;
            display: inline-block;
            margin:20px 0px 20px 0px;
            padding: 20px 0px;
            background-color: #636363;
            color: white;
            text-decoration: none;
            transition: opacity 0.3s ease-in-out;
            border-radius:10px;
        }        

        .linkbotton-rakuten a:hover,
        .linkbotton-yahoo a:hover,
        .linkbotton-amazon a:hover,
        .linkbotton-maintenance a:hover,
        .linkbotton-access a:hover, 
        .linkbotton-recruit a:hover,
        .linkbotton-contact a:hover{
            opacity: 0.6; /* 透過率を20%上げる */
        }

        .linkbotton-rakuten h3,
        .linkbotton-yahoo h3,
        .linkbotton-amazon h3,
        .linkbotton-maintenance h3,
        .linkbotton-access h3,
        .linkbotton-recruit h3,
        .linkbotton-contact h3{
        font-size: clamp(0.1rem, 2.5vw, 3rem); 
        margin: 0px 0px 0px 0px;
        padding:0 0 5px 0;
        font-weight: normal;
        font-style: normal; /* イタリック */
        }

@media (max-width: 768px) {

        .linkbotton-rakuten a {
            width: 70vw;
            margin:20px 0px 5px 0px;
            padding: px 0px;
        }

        .linkbotton-yahoo a {
            width: 70vw;
            margin:5px 0px 30px 0px;
            padding: px 0px;
        }

        .linkbotton-amazon a {
            width: 70vw;
            margin:5px 0px 10px 0px;
            padding: px 0px;
        }

        .linkbotton-maintenance a {
            width: 70vw;
            margin:10px 0px 10px 0px;
            padding: px 0px;
        }

        .linkbotton-access a {
            width: 70vw;
            margin:10px 0px 10px 0px;
            padding: px 0px;
        }       

        .linkbotton-contact a {
            width: 70vw;
            margin:10px 0px 10px 0px;
            padding: px 0px;
        }

        .linkbotton-recruit a {
            width: 70vw;
            margin:10px 0px 10px 0px;
            padding: px 0px;
        }

        .linkbotton-rakuten a:hover,
        .linkbotton-yahoo a:hover,
        .linkbotton-amazon a:hover,
        .linkbotton-maintenance a:hover,
        .linkbotton-access a:hover,
        .linkbotton-recruit a:hover,
        .linkbotton-contact a:hover
         {
            opacity: 0.6; /* 透過率を20%上げる */
        }

        .linkbotton-rakuten h3,
        .linkbotton-yahoo h3,
        .linkbotton-amazon h3,
        .linkbotton-maintenance h3,
        .linkbotton-access h3,
        .linkbotton-recruit h3,
        .linkbotton-contact h3{
        font-size: clamp(1.7rem, 2.5vw, 3rem); 
        margin: 0px 0px 0px 0px;
        padding:0 0 5px 0;
        font-weight: normal;
        font-style: normal; /* イタリック */
        }

 }


        /* フェードインアニメーション */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-static {
  opacity: 0;
  transition: opacity 1s ease-out; /* その場でのフェードイン */
}

.fade-in-static.visible {
  opacity: 1;
}

        
    /* 展開アニメーション */
    .content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 1.0s ease;
      background-color: #ffffff;
      padding: 0 10px;
      border-top: none;
      border-bottom:none;
      border-left: none;
      border-right: none;
    }
    .content.show {
      max-height: 500px;
    }

    /* プラス/マイナスマークのスタイル */
    .toggle-icon {
        position: absolute; /* 絶対位置指定 */
        right: 10px; /* 右端に配置 */
        font-size: 16px;
        transition: transform 0.3s ease, content 0.3s ease; /* アニメーション効果 */
    }   

    h1.active .toggle-icon {
            content: "-"; /* 展開時はマイナスマークに変更 */
    }

    .title-text {
    text-align: center; /* テキストを中央寄せ */
    }

/* メニューバー全体 */

.logo {
  display:flex;
  height:100%;
  align-items: center;
  justify-content: center; /* 水平方向も中央揃えに */
  font-weight: bold;
  height:60px;

}


.logo img {
  height: 100%;       /* 親の高さに対して画像を最大化 */
  max-height: 30px;   /* 上限を設定して暴走防止（任意） */
  align-items: center;
  width: auto;
  display: block;
}

.menu {
  display: flex;
  gap: 20px;
}

.menu-icon {
  display: none;
  font-size: 24px;
  cursor: pointer;
}

.map-icon{
  height:100%;
  align-items: center;
}

.map-icon img{
  height: 100%;       /* 親の高さに対して画像を最大化 */
  max-height: 40px;   /* 上限を設定して暴走防止（任意） */
  width: auto;
  display: block;
}

/* スマホサイズでの調整 */
@media (max-width: 768px) {
  .menu {
    display: none; /* 必要に応じてトグル表示 */
  }
  .menu-icon {
    display: block;
  }
  .navbar {
    height: 40px;
    justify-content: space-between;
  }
  .logo {
    height:100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .logo img {
  height: 100%;       /* 親の高さに対して画像を最大化 */
  max-height: 30px;   /* 上限を設定して暴走防止（任意） */
  width: auto;
  display: block;
  }
}

.menu.active {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 60px; /* メニューバーの下に表示 */
  background: white;
}

    body {
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
    }

    .navbar {
      display: flex;
      height: 40px;
      align-items: center;
      justify-content: space-between;
      background-color: #ff0000;
      padding: 10px 15px;
      position: relative;
      z-index: 1001;
    }

    .logo {
      height:100%;
      font-size: 1.2rem;
      font-weight: bold;
      color: #fff;
    }


    .side-menu.active {
      display: flex;
      left: 0;
    }


    .side-menu a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0%;
      height: 2px;
      background: #fff;
      transition: width 0.3s ease;
    }

    .side-menu a:hover::after {
      width: 100%;
    }

    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.4);
      display: none;
      z-index: 900;
    }

    .overlay.active {
      display: block;
    }

    @media (min-width: 768px) {
      .menu-icon, .overlay {
        display: none !important;
      }


      .side-menu a {
        margin: 0 15px;
        color: #fff;
      }


      .logo {
        height:100%;
        margin-right: 15px;
      }

      .map-icon {
        margin-left: auto;
      }
    }

    @media (max-width: 767px) {
      .logo {
        position: absolute;
        height:100%;
        left: 50%;
        transform: translateX(-50%);
      }

      .logo img {
  height: 100%;       /* 親の高さに対して画像を最大化 */
  max-height: 30px;   /* 上限を設定して暴走防止（任意） */
  width: auto;
  display: block;
}
      

      .map-icon {
        margin-left: auto;
      }

      .side-menu {
        display: none; /* 初期状態非表示 */
      }
    }

    /*メニューバー用*/

    .logo {
      height:100%;
      font-size: 1.2rem;
      font-weight: bold;
      color: #fff;
    }

    

    .menu-icon, .map-icon {
      font-size: 24px;
      cursor: pointer;
      color: #fff;
      z-index: 1002;
    }

    .side-menu {
      position: fixed;
      top: 0;
      left: -260px;
      width: 150px;
      height: 100%;
      background: rgba(255, 0, 0, 0.9); /* 赤 + 透過20％ */
      text-align: left;       /* テキスト全体を左寄せに */
      align-items: flex-start; /* コンテンツの配置も左に寄せる */
      padding: 80px 20px;
      transition: left 0.3s ease;
      display: none;
      flex-direction: column;
      z-index: 1000;
    }

    .side-menu.active {
      display: flex;
      left: 0;
    }

    .side-menu a {
      color: #fff;
      text-decoration: none;
      font-size: 0.8rem;
      margin-bottom: 20px;
      font-weight: bold;
      position: relative;
    }

    .side-menu a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0%;
      height: 2px;
      background: #fff;
      transition: width 0.3s ease;
    }

    .side-menu a:hover::after {
      width: 100%;
    }

    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.4);
      display: none;
      z-index: 900;
    }

    .overlay.active {
      display: block;
    }

    @media (min-width: 768px) {
      .menu-icon, .overlay {
        display: none !important;
      }

      .side-menu {
        display: flex !important;
        position: static;
        flex-direction: row;
        height: auto;
        padding: 0;
        background: transparent;
        box-shadow: none;
        left: 0;
        width: auto;
      }

      .side-menu a {
        margin: 0 15px;
        color: #fff;
      }

      .navbar {
        height: 32px;
        justify-content: flex-start;
        gap: 20px;
      }

      .logo {
        height:100%;
        margin-right: 15px;
      }

      .map-icon {
        margin-left: auto;
      }
    }

    @media (max-width: 767px) {
      .logo {
        height:100%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }

      .map-icon {
        margin-left: auto;
      }

      .side-menu {
        display: none; /* 初期状態非表示 */
      }
    }


    /* メニュー紹介用共通スタイル */
.menuintro{
  background-color:#e6e6e6;
}


.two-row-layout {
  display: flex;
    align-items:end;
  flex-wrap: wrap; /* 要素が折り返されるようにする */
  justify-content: space-around; /* 均等に配置 */
  gap: 20px; /* 要素間の間隔 */
  padding: 20px; /* 全体の余白 */
}

.two-row-layout .section {
  flex: 1 1 calc(50% - 40px); /* 各要素を2列に配置 */
  box-sizing: border-box;
  text-align: center; /* タイトルと画像を中央揃え */
}

.section h2 {
  margin-bottom: 10px; /* タイトルと画像の間隔 */
  font-size: 2.0rem;
  color: #333;
}

.section img {

  max-width: 100%; /* 画像の幅を親要素に合わせる */
  height: auto; /* 縦横比を維持 */
}



/* メニュー紹介用スマホ向け */
@media (max-width: 768px) {
  .introduction-sp img {
    margin: 10px;
    width: 90%; /* 画面幅いっぱいで画像を縦に並べる（1×4） */
  }
}




/* フッター用 */
 footer {
      background-color:#ff0000;/* 背景色を赤に設定 */
      color: white !important;
      padding: 20px;
      text-align: center !important;
    }

    /* フッターナビゲーション */
    footer nav {
      margin-bottom: 15px;
    }

    footer nav a {
      color: white;
      text-decoration: none;
      margin: 0 10px;
    }

    footer nav a:hover {
      text-decoration: underline; /* ホバー時の装飾 */
    }

    /* コンタクト情報 */
    .contact-info {
      margin-bottom: 15px;
    }

    .contact-info p {
      color: #ffffff;        /* 白文字 */
      text-align: center;    /* 中央ぞろえ */
    }


    /* 著作権情報 */
    .copyright {
      font-size: 0.8rem;
    }

    /* レスポンシブ対応 */
    @media (max-width: 768px) {
      footer nav, .contact-info {
        text-align: center;
        margin-bottom: 10px;
      }
    }


/*本文とスライドの背景グラデーション*/

.section-block {
  position: relative; /* 背景画像とグラデーションを重ねる基準 */
  width: 100%;
  height: 100%; /* 必要に応じて高さを調整 */
  overflow: hidden; /* はみ出し防止 */
}

.section-block::before {
  content: ''; /* 擬似要素でレイヤーを作成 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../img/whitwoodbg.png'); /* 背景画像のパス */
  background-size: cover; /* 背景を埋め尽くす */
  background-position: center; /* 画像を中央揃え */
  filter: blur(1px); /* 背景画像にぼかしを適用 */
  z-index: -2; /* グラデーションより下に配置 */
}

.section-block::after {
  content: ''; /* グラデーション用のレイヤー */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.979), rgba(199, 198, 198, 0.5)); /* グラデーションの設定 */
  z-index: -1; /* 背景画像の上に配置 */
}





/* swiper-bのスタイル */


/* スマートフォン用の調整 */
@media (max-width: 768px) {


  .swiper-b .swiper-button-next, 
  .swiper-b .swiper-button-prev {
    display: none; /* スマホではナビゲーション非表示 */
  }

  .swiper-b .swiper-pagination-bullet {
    width: 7px !important; /* 丸を小さく */
    height: 7px !important;
    margin: 0 3px; /* 間隔を狭める */
  }
}

/* スライドの画像 */
.swiper-b .swiper-slide img {
  width: 100%; /* 幅を全体に広げる */
  max-width: 1000px; /* 最大幅を1000pxに制限 */
  height: auto; /* アスペクト比を維持 */
  margin: 0 auto; /* 中央揃え */
  display: block; /* 余分なスペースを排除 */
}

.swiper-b {
  width:90%; /*画面横幅一杯*/
  height: auto; /* 子要素の高さに合わせる */
  position: relative;
  margin: 0 auto;
  padding: 20px 0;
  margin: 15px auto;
}

@media (max-width: 768px) {
  .swiper-b {
  background-color: #333333; /* 濃いグレー */
  width:95%; /*画面横幅一杯*/
  height: auto; /* 子要素の高さに合わせる */
  position: relative;
  padding: 0 0;
  }
}

.swiper-b .swiper-img {
  display: block; /* 余分なスペースを排除 */
  width: 100%; /* 横幅を揃える */
  height: auto; /* アスペクト比を保つ */
}

/* ナビゲーションボタンの共通スタイル */
.swiper-b .swiper-button-next, 
.swiper-b .swiper-button-prev {
  position: absolute;
  opacity: 0.5;
  top: 50%; /* 垂直方向の中央に配置 */
  transform: translateY(-50%); /* 縦位置を揃える */
  width: 20px; /* ボタンの幅 */
  height: 20px; /* ボタンの高さ */
  background-color: white; /* 白い三角形 */
  clip-path: polygon(0% 50%, 100% 0%, 100% 100%); /* 三角形の形状 */
  z-index: 10;
  cursor: pointer;
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.5); /* ドロップシャドウ追加 */
  transition: opacity 0.3s ease; /* 透明度の変化をスムーズに */
}

.swiper-b .swiper-button-next:hover,
.swiper-b .swiper-button-prev:hover {
  opacity: 100; /* マウスオーバー時に透明度を0に設定 */
}

/* デフォルトの矢印を非表示に */
.swiper-b .swiper-button-next::after, 
.swiper-b .swiper-button-prev::after {
  display: none;
}

/* 次へボタン（右側） */
.swiper-b .swiper-button-next {
  right: 10px; /* 右端の位置調整 */
  transform: translateY(-50%) rotate(180deg); /* 180度回転で向き修正 */
}

/* 前へボタン（左側） */
.swiper-b .swiper-button-prev {
  left: 10px; /* 左端の位置調整 */
  transform: translateY(-50%) rotate(0deg); /* 0度回転で向き修正 */
}

/* ページネーションのスタイル */
.swiper-b .swiper-pagination-bullet {
  background-color: white; /* 白い丸 */
  width: 15px; /* 丸の幅 */
  height: 15px; /* 丸の高さ */
  margin: 0 8px !important; /* 水平方向の間隔を6pxに拡大 */
  transition: all 0.3s ease; /* スムーズな変化を追加 */
  border-radius: 50%; /* 丸形にする */
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.5); /* ドロップシャドウ追加 */
  opacity: 0.3; /* 完全表示 */
}

/* アクティブなページネーションのスタイル */
.swiper-b .swiper-pagination-bullet-active {
  opacity: 1; /* アクティブ状態は透過なし */
  width: 1.3rem; /* 基本サイズの1.4倍 */
  height: 1.3rem;
}

.swiper-b .swiper-pagination {
  position: absolute; /* 親要素内で固定 */
  bottom: 35px !important; /* swiper-bの下から15px */
  left: 50% !important; /* 横方向の中央揃え */
  transform: translateX(-50%); /* 左に半分ずらして中央に配置 */
  z-index: 10; /* 他の要素より前面に表示 */
}

@media (max-width: 768px) {
.swiper-b .swiper-pagination {
    bottom: 15px !important; /* swiper-bの下から15px */

}
}  

/* swiper-a専用のスタイル */
.swiper-a-container{
  width: 100%;
  height: 158px;
  box-sizing: border-box;
  margin:0 auto;
  padding:10px,0px,20px,0px;
}

.swiper-a {
  width:100%;
}

.swiper-a .swiper-wrapper{
  width:100%
 margin:0 auto;
}


.swiper-a .swiper-slide {
  width: 128px; /* スライド幅 */
  height: 128px; /* スライド高さ */
   margin:0 auto; /* スライド間の余白 */
}

.swiper-a .swiper-slide img {
  width: 128px;
  height: 128px;

}

/* ナビゲーションボタンの共通スタイル */
.swiper-a .swiper-button-next, 
.swiper-a .swiper-button-prev {
  position: absolute;
  opacity: 0.8;
  top: 62%; /* 垂直方向の中央に配置 */
  transform: translateY(-50%); /* 縦位置を揃える */
  width: 15px; /* ボタンの幅 */
  height: 15px; /* ボタンの高さ */
  background-color: rgb(253, 2, 2); /* 白い三角形 */
  clip-path: polygon(0% 50%, 100% 0%, 100% 100%); /* 三角形の形状 */
  z-index: 10;
  cursor: pointer;
  box-shadow: 2px 4px 6px rgba(255, 255, 255, 0.952); /* ドロップシャドウ追加 */
  transition: opacity 0.3s ease; /* 透明度の変化をスムーズに */
}

/* デフォルトの矢印を非表示に */
.swiper-a .swiper-button-next::after, 
.swiper-a .swiper-button-prev::after {
  display: none;
}

/* 次へボタン（右側） */
.swiper-a .swiper-button-next {
  right: 10px; /* 右端の位置調整 */
  transform: translateY(-50%) rotate(180deg); /* 180度回転で向き修正 */
}

/* 前へボタン（左側） */
.swiper-a .swiper-button-prev {
  left: 10px; /* 左端の位置調整 */
  transform: translateY(-50%) rotate(0deg); /* 0度回転で向き修正 */
}

/*営業時間*/
.openinfo{
  width:100%;
  display:flex;
  justify-content:center;
}

.openhour{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:center;
  margin:0 30px 30px 30px;

}

.openhour > div {
  flex: 1;               /* 親の幅を均等に分配 */
  min-width: 250px;      /* 折り返し防止やレスポンシブ対策（任意） */
}





.openhour h4{
  text-align:center;
  font-size:2em;
}

.openhour p{
  font-size:large;
  text-align:center;
}


/*SWIPER C*/

.swiper-c-container{
      width:100%;
      max-width:640px;
      box-sizing: border-box;
      margin:0 auto;
      padding:20px 20px 40px 20px;
}

.swiper-c {
     witdh:100%;
    }

.swiper-c .swiper-slide img {
    width: 100%;
    max-width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit: cover; /* アスペクト比を保ちながら切り取り */
    }

.swiper-c .swiper-slide {
  opacity: 0; /* 非アクティブスライドを透明化 */
  visibility: hidden; /* 非表示に */
  transition: opacity 0.5s ease, visibility 0.5s ease; /* スムーズな切り替え */
}

.swiper-c .swiper-slide-active {
  opacity: 1; /* アクティブスライドを完全表示 */
  visibility: visible;
}

.swiper-c-container {
  position: relative; /* ページネーションの位置を基準に */
}

.swiper-c .swiper-pagination {
  width:100%;
  position: absolute; /* 親要素に対して絶対配置 */
  bottom: 15px !important;/* swiper-c-containerの下から10px */
  left: 50% !important; /* 水平方向で中央に配置 */
  transform: translateX(-50%); /* 中央揃えの微調整 */
  display: flex; /* ページネーションを横並びにする */
  gap: 20px; /* 丸いアイコン同士の間隔を設定 */
  justify-content:center;
}

.swiper-c .swiper-pagination-bullet {
  width: 10px; /* 基本サイズ: 直径10px */
  height: 10px;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明な円 */
  border-radius: 50%; /* 完全な円形に */
  transition: transform 0.3s ease, background-color 0.3s ease; /* サイズと色をスムーズに変更 */
}

.swiper-c .swiper-pagination-bullet-active {
  transform: scale(1.2); /* アクティブなものを20％拡大 */
  background-color: #fff !important; /* 白く変更 */
}

/*SWIPER D*/

.swiper-d-container{
      width:100%;
      max-width:640px;
      box-sizing: border-box;
      margin:0 auto;
      padding:20px 20px 40px 20px;
}

.swiper-d {
     witdh:100%;
    }

.swiper-d .swiper-slide img {
    width: 100%;
    max-width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit: cover; /* アスペクト比を保ちながら切り取り */
    }

.swiper-d .swiper-slide {
  opacity: 0; /* 非アクティブスライドを透明化 */
  visibility: hidden; /* 非表示に */
  transition: opacity 0.5s ease, visibility 0.5s ease; /* スムーズな切り替え */
}

.swiper-d .swiper-slide-active {
  opacity: 1; /* アクティブスライドを完全表示 */
  visibility: visible;
}

.swiper-d-container {
  position: relative; /* ページネーションの位置を基準に */
}

.swiper-d .swiper-pagination {
  width:100%;
  position: absolute; /* 親要素に対して絶対配置 */
  bottom: 15px !important;/* swiper-c-containerの下から10px */
  left: 50% !important; /* 水平方向で中央に配置 */
  transform: translateX(-50%); /* 中央揃えの微調整 */
  display: flex; /* ページネーションを横並びにする */
  gap: 20px; /* 丸いアイコン同士の間隔を設定 */
  justify-content:center;
}

.swiper-d .swiper-pagination-bullet {
  width: 10px; /* 基本サイズ: 直径10px */
  height: 10px;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明な円 */
  border-radius: 50%; /* 完全な円形に */
  transition: transform 0.3s ease, background-color 0.3s ease; /* サイズと色をスムーズに変更 */
}

.swiper-d .swiper-pagination-bullet-active {
  transform: scale(1.2); /* アクティブなものを20％拡大 */
  background-color: #fff !important; /* 白く変更 */
}


/*googlemap*/
.googlemap {
  width:100%;
  padding:15px 0;
  z-index: 1; /* Googleマップを背景レイヤーに */
}

.googlemap iframe{
  width: 90%;
  max-width:640px;
  height:640px,
  margin:0 auto;
}

@media (max-width: 768px) {
.googlemap iframe{
  width: 90%;
  max-width:640px;
  height:300px !important;
}
}  




.swiper-container {
  z-index: 2; /* Swiperを前面レイヤーに */
}