@charset "UTF-8";

/*TOPページ*/
/*------ TOPスライダー ------*/
  .top-slider-contents{
    position: relative;
  }
  .slider-logo{
    position: absolute; /* 親要素(top-slider-wrapper)内で絶対配置 */
    top: 45%; /* 垂直方向のほぼ中央に配置 */
    left: 50%; /* 水平方向の中央に配置 */
    z-index: 10; /* スライダーより前面に表示 */
    width: 15%; /* 親要素の幅に対して30%の大きさに設定 */
    height: auto; /* アスペクト比を維持 */
  } 
  .top-slider{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1; /* 必要に応じて調整 */
  }
  .top-slider img{
    width: 100vw;
    height:auto;
    max-width: 100%;
    display: block;
    object-fit: cover;
  }
  
  .top-slider .slick-track {
    display: flex !important;
  }
  .top-slider .slick-slide{
    align-items: center;
    justify-content: center;
  }
  .top-slider, .top-slider img, .slick-slide {
    box-sizing: border-box; /* パディングやボーダーを含めた幅に設定 */
}
  
  
  /*------ ミニスライダー ------*/
  .mini-slider div{
    text-align: center;
    color:#5A5A5A;
  }
  .mini-slider img {
    width: 80%; /* 必要に応じて調整 */
    margin: 10px auto;
  }
  .slider-caption p{
    margin: 10px 0 0 0;
    font-weight: bold;
  }
  .mini-slider .slick-prev::before,
  .mini-slider .slick-next::before {
    content: ''; /* デフォルト矢印を非表示 */
  }
  
  .mini-slider .slick-prev,
  .mini-slider .slick-next {
    z-index: 2;
    width: 30px;
    height: 30px;
    background-color: transparent; /* 背景を透明に */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  
  /* クリック・フォーカス時に色が変わらないようにする */
  .mini-slider .slick-prev:active,
  .mini-slider .slick-next:active,
  .mini-slider .slick-prev:focus,
  .mini-slider .slick-next:focus {
    background-color: transparent; /* 背景を透明に */
    outline: none;
  }
  
  /* 矢印アイコン */
  .mini-slider .slick-prev::after{
    content: '‹'; /* 矢印文字を指定 */
    font-family: 'Arial', sans-serif;
    font-size: 35px; /* サイズを少し大きく */
    color: rgba(0, 0, 0, 0.3); /* 半透明の黒色 */
    font-weight: bold; /* 太字 */
    display: inline-block;
    text-shadow: -1px -1px 1px rgba(225,225,225,0.5),-1px 1px 1px rgba(225,225,225,0.5),1px -1px 1px rgba(225,225,225,0.5),1px 1px 1px rgba(225,225,225,0.5);
  }
  
  /* 逆向きの矢印（nextボタン） */
  .mini-slider .slick-next::after {
    content: '›'; /* 矢印文字を指定 */
    font-family: 'Arial', sans-serif;
    font-size: 35px; /* サイズを少し大きく */
    color: rgba(0, 0, 0, 0.3); /* 半透明の黒色 */
    font-weight: bold; /* 太字 */
    display: inline-block;
    text-shadow: -1px -1px 1px rgba(225,225,225,0.5),-1px 1px 1px rgba(225,225,225,0.5),1px -1px 1px rgba(225,225,225,0.5),1px 1px 1px rgba(225,225,225,0.5);
  }
  
  
  .mini-slider .slick-prev {
    left: 0; /* ラッパー内に収める */
  }
  .mini-slider .slick-next {
    right: 0; /* ラッパー内に収める */
  }
  .mini-slider {
    max-width: 100%; /* ラッパー内に収まるように設定 */
    position: relative; /* 矢印を内部に配置 */
  }

  .mini-slider .slick-dots {
    position: static;          /* 被らないように静的配置 */
    text-align: center;
    margin-top: 15px;          /* 画像とドットの間に余白を追加 */
    margin-bottom: 30px;       /* ドットの下に余白を追加（特に重要） */
  }
  .mini-slider {
  overflow: visible; /* dotsが切れてしまうのを防ぐ */
}


  /*------ その他TOP ------*/
  .top-obi {
    text-align: center;
    border-width: 2px 0 2px 0;
    border-style: solid;
    border-color: #d1d1d1;
    margin: 30px 0 24px;
    padding: 5px 0;
  }
  
  .more-button{
    border: 1px solid #d1d1d1; 
    margin: 30px auto 0;
    padding: 10px;
    text-align: center;
    width: 300px;
    background-color: white;
  }
  .more-button a {
    display: block;
    text-decoration: none; /* リンクの下線を削除 */
    color: #5A5A5A; /* 初期状態の文字色を黒に設定 */
  }
  .more-button:hover {
    background-color: #434343; /* ホバー時の背景色 */
  }
  .more-button:hover a {
    color: #ffffff; /* ホバー時の文字色を白に変更 */
  }
  
 /*フッター
  --------------------*/
  footer {
    color: #ffffff;
    background-color: #434343;
    text-align: center;
    margin-top: 0;
    padding: 0 0 20px;
   }
   
   .footer-obi{
    background-color: #F5F5F5;
   }

   .footer-menu{
    text-decoration: none;
    list-style: none;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    font-size: small;
    }

   .footer-menu a { 
    color: #434343;
    margin: 0 20px;
   }

    .sns-btn{
    text-decoration: none;
    background-color: #d1d1d1;
    list-style: none; 
    display: flex;
    justify-content: center; 
    margin: 0;
    padding: 10px 0;
  }
  .sns-btn li{
    width: 30px;
    margin: 0px;
    padding: 10px 30px 5px;
  }
   .page-footer a:hover {
    text-decoration: underline;
   }
   .page-footer .copyright {
    margin: 0;
    padding: 20px 0px;
   }     
   /*レスポンシブ--------------------*/ 
  @media screen and (max-width: 768px) {
    .slider-logo{
      width: 40%; /* 親要素の幅に対して30%の大きさに設定 */
      height: auto; /* アスペクト比を維持 */
    }
    .top-slider{
      margin-top: 60px;
    }
    .top-slider img {
      object-fit: cover; /* 画像トリミング */
      aspect-ratio: 4 / 3;/* アスペクト比 */
      object-position: center; /* 中央を表示 */
    }
    .mini-slider {
      width: 80%; /* 横幅を80%に設定 */
      margin: 0 auto; /* 中央寄せ */
    }
    .mini-slider .slick-dots {
      position: static; /* ドットを画像外に移動 */
      text-align: center;
      margin-top: 5px; /* ドットと画像の間に余白を追加 */
      margin-bottom: 20px; /* ドットの下に余白を追加 */
    }
    .top-obi {
      width: 90%;
      margin: 40px auto 24px;
    }
    .more-button{
      margin: 30px auto 0;
      width: 200px;
    }
}