@charset "UTF-8";
html{font-size: 100%;  width: 100%; height: 100%; font-family: Arial, sans-serif;} /* 余白なし設定,統一フォント */


/*ヘッダー
------------------------------------------------------------------------------------------------*/
header{
    display: flex;                  /* ヘッダー：横並び指定 */
    justify-content: space-between; /* ヘッダー：両端合わせ指定 */
    margin: 1.5rem 1.5rem 0rem;     /* ヘッダー：上 左右 下の余白指定 */
    z-index: 11
}
body {
  background-color: #696969;
  z-index: -2;
}

.kiaalogo{text-align: start;}       /* 会社ロゴ：左端合わせの指定 */
.logo{width: 400px;}                /* 会社ロゴ：画像幅指定 */
.logo{height: 30px;}                /* 会社ロゴ：画像高さ指定 */ 
.nav-toggle{display: none;}         /* ナビゲーション：チェックボックス非表示 */
nav a{text-decoration: none;}       /* ナビゲーション：アンダーライン非表示*/

.nav-toggle-label{
    cursor: pointer;                /* トグルアイコン：カーソル位置で指マーク */
    display: flex;                  /* トグルアイコン：形指定 */
    flex-direction: column;         /* トグルアイコン：形指定 */
    width: 30px;                    /* トグルアイコン：幅指定 */
    height: 30px;                   /* トグルアイコン：高さ指定（会社ロゴと合わせて30px） */
    z-index: 11;                    /* トグルアイコン：前後関係 */
}

.nav-toggle-label span{               
    background-color: #ffffff;    /* トグル3本線：色設定 */
    height: 3px;                    /* トグル3本線：太さ設定 */
    width: 100%;                    /* トグル3本線：幅設定 */
    margin: 4px 0;                  /* トグル3本線：間隔設定 */
    transition: 0.3s, background-coler 0.3s;/* トグル3本線：アニメーション */
}

/*ナビゲーション表示編集*/
.main-nav a {color: #696969;}    /* ナビゲーションテキスト：カラー */
.main-nav a:hover{color: rgb(183, 183, 183);}    /* ナビゲーションテキスト：選択時の色*/
nav ul{list-style: none;}                          /* ナビゲーションテキスト：リストマーカー（・）の非表示*/
nav a{display: block;padding: 15px ;}          /* ナビゲーションテキスト：間隔調整*/
.main-nav a {font-size: 20px;}                       /* ナビゲーションテキスト：サイズ */

nav {
  display: flex;             /* 白マスク画面：通常時非表示 *//* ★★星 */
  position: fixed;
  justify-content: center;   /* 白マスク画面：テキスト位置指定 */
  top: 0px;
  width: 100%;               /* 白マスク画面：ウィンドウ全体を覆う */
  height: 100%;              /* 白マスク画面：ウィンドウ全体を覆う */
  z-index: 9;
  background-color: rgba(255, 255, 255, 0.80);/* 白マスク画面：半透明背景設定 */
  opacity: 0;                /* ★★星 */
  transition: opacity 0.5s ease; /* フェードインのアニメーション *//* ★★星 */
  pointer-events: none; /* クリック無効 *//* ★★星 */
  text-align: center;        /* 白マスク画面：テキスト中央揃え */
  align-items: center;       /* 白マスク画面：ナビテキストとSNSアイコンを中央合わせ */
  left: 0px;                 /* 白マスク画面：画面端からマスク表示 */
}



.nav-toggle:checked + .nav-toggle-label span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);background-color: #696969;}/* トグル展開時の色 */

.nav-toggle:checked + .nav-toggle-label span:nth-child(2) {opacity: 0;} /* チェック時に消える */

.nav-toggle:checked + .nav-toggle-label span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);background-color: #696969;} /* トグル展開時の色 */

.nav-toggle:checked ~ nav {display: flex;flex-direction: column;} /* ナビゲーション展開時のレイアウト指定（縦並べ） */

.nav-toggle:checked ~ nav {
  opacity: 1; /* フェードインの最終状態 */
  pointer-events: all; /* クリック有効 */
}



/*-----------------------------   フッターSNSアイコンの編集-----------------------*/
   
    .social-icons  {
    display: inline-block;
    position: absolute;
    top: 90%;
    display: flex;
    }
    
    .social-icons img {
    width: 30px;                               /* 画像の幅を指定 */
    height: 30px;                              /* 画像の高さを指定 */
    object-fit: contain;                       /* 画像を中央に収めて比率を維持 */
    }


/*背景画像スライド
-------------------------------------------------------------------------------*/

.Slides {display: none}                        /* 開く時の画像表示 */
.slideshow-container {  
  display: flex;
  height: 100%;
  width: 100%;     
  background-position: center;    
  position: absolute;
  justify-content: center;  
  top: 0;     
  bottom: 0; 
  z-index: -99;     
  animation: slideIn 2s ease-in-out; /*⭐️⭐️⭐️アニメーション：時間*/    
  background-color: rgba(0, 0, 0, 0.5);  
}
.Slides img {
  height: 99.7vh;                                /* Sets height to fill the container */
  width: auto;                                 /* Adjusts width to maintain aspect ratio */
  object-fit: contain;                         /* Ensures the image is fully visible, scaled to fit */
  top: 0;
  bottom: 0;
}
@keyframes slideIn {
  from {
      transform: translateX(0);     /*⭐️⭐️⭐️アニメーション： 移動する時間*/
      opacity: 0;
  }
  to {
      transform: translateX(0);
      opacity: 1;
  }
}
@keyframes slideOut {
  from {
      transform: translateX(0);
      opacity: 1;
  }
  to {
      transform: translateX(0);
      opacity: 0;
  }
}
.prev, .next {                              /* 前と次のボタン */
  cursor: pointer;                              /* 前と次のボタン : マウス指定 */
  position: absolute;                           /* 前と次のボタン : 位置を入力した数人に固定する */
  top: 48%;                                     /* 前と次のボタン : 上からの距離 */
  padding: 15px;                                /* 前と次のボタン : 矢印ボタンの背景より距離 */
  color: white;                               /* 前と次のボタン : 矢印ボタンの色 */
  font-size: 20px;                              /* 前と次のボタン : 矢印ボタンの大きさ */
  transition: 0.6s ease;                        /* 前と次のボタン : 矢印ボタンの背景fade */
  user-select: none;                            /**** 前と次のボタン : 矢印ボタンの文字を選択表示を非表示にする ****/
}

.next {                                         /* 次のボタン */                                     
  right: 0;}
  .prev {
    left: 0;
  }
.prev:hover, .next:hover {                      /* 前と次のボタン : 矢印ボタンを選択際背景色が黒くなる */
  background-color: rgba(0, 0, 0, 0.5);}

.fade {                                         /* Fading animation */
  animation-name: fade;                         /* Fading animation */
}

@keyframes fade {                               /* Fading animation */
  from {opacity: .4}                            /* Fading animation */
  to {opacity: 1}                               /* Fading animation */
}


/*-------------------------スマホサイズ----------------------------*/
@media(max-width:800px){/*以下横幅800ピクセル以下の時の表示設定*/

  /*左上ロゴ編集*/
  .logo{width: 300px;}
  .logo{height: 30px;}
  header{margin: 1.0rem 1.0rem 0; z-index: 99;} /* ヘッダー：上 左右 下の余白指定 */
  .nav-toggle-label{
      width: 30px;                    /* トグルアイコン：幅指定 */
      height: 30px;                   /* トグルアイコン：高さ指定（会社ロゴと合わせて30px） */
  }
  .Slides img {                                   /* 背景写真 */
    height: 99.7%;                                 /* 写真の高さ*/
    object-fit: contain;
    width: 100%;
  }
}





