/*-- body全体への指定 ----------------------------------*/
html, body {
  margin: 0;
  height: 100%;
}

body{
  background: url("../img/FACTORY_HAIKEI.jpg");

  /* 拡大しない */
  background-size: auto;

  /* 右寄せ */
  background-position: right top;

  /* 縦だけリピート */
  background-repeat: repeat-y;

  /* 固定しない（スクロールする） */
  background-attachment: scroll;
}

/*-- LOGO指定　-----------------------------------------*/

.Logo_Group{
  background-position: center;
  align-items: center;      /* ← 縦中央 */
  justify-content: center;  /* ← 横中央 */
}

.Logo_img{
  display: block;
  margin: 0 auto;

  /* 初期状態 */
  opacity: 0;
  transform: translateY(-60px);

  /* アニメーション */
  animation: slideDown 1.5s ease forwards;
  animation-delay: 0s;
  text-align: center;
}

.Logo_Group img{
  width: 200px;          /* 好きに調整 */
  max-width: 90%;
}

/*-- タイトル内書式設定 -------------------------------------------*/
.Title-Group{

  opacity: 0;
  animation: bgFadeIn 2s ease forwards;  /* 背景フェードイン */
  animation-delay: 1.5s;		/* logoスライドイン */

}

.Title-box{
  width: 800px;      /* 狭くする（pxでも%でもOK） */
  margin: 0 auto;    /* 左右を自動 → 中央寄せ */
  word-wrap: break-word;   /* 古めブラウザ対応 */
  overflow-wrap: break-word; /* 現在の標準 */
  text-align: center;
  font-size: 36px;
}

.box {
  width: 800px;      /* 狭くする（pxでも%でもOK） */
  margin: 0 auto;    /* 左右を自動 → 中央寄せ */
  font-size: 20px;
  line-height: 1.5;

  word-wrap: break-word;   /* 古めブラウザ対応 */
  overflow-wrap: break-word; /* 現在の標準 */
}

.Title_img{
  display: block;
  margin: 0 auto;
  text-align: center;

}

.Title_img img{
  width: 800px;          /* 好きに調整 */
  max-width: 90%;
}



/* サブタイトル */
.SubTitle-box{
  width: 800px;      /* 狭くする（pxでも%でもOK） */
  margin: 0 auto;    /* 左右を自動 → 中央寄せ */

  word-wrap: break-word;   /* 古めブラウザ対応 */
  overflow-wrap: break-word; /* 現在の標準 */
  font-size: 20px;

}

/*-- テーブル内の書式 -----------------------------------*/
.Table_box{
  width: 800px;      /* 狭くする（pxでも%でもOK） */
  margin: 0 auto;    /* 左右を自動 → 中央寄せ */

  word-wrap: break-word;   /* 古めブラウザ対応 */
  overflow-wrap: break-word; /* 現在の標準 */
  text-align: center;
  font-size: 36px;
}

table {
  border-collapse: collapse;
  width: 100%;      /* 狭くする（pxでも%でもOK） */
}

th, td {
  border: 1px solid #333;
  padding: 8px;
}

.Koumoku{
  text-align: center;
}

.naiyou{
  text-align: left;
}

/*-- テーブル内の書式�A--------------------------------*/
.Table_box2{
  width: 1300px;      /* 狭くする（pxでも%でもOK） */
  margin: 0 auto;    /* 左右を自動 → 中央寄せ */

  word-wrap: break-word;   /* 古めブラウザ対応 */
  overflow-wrap: break-word; /* 現在の標準 */
  text-align: center;
  font-size: 36px;
}

.td_img{
  border: 0px solid gray;
  text-align: center;
}

.td_img img{
  width: 700px;          /* 好きに調整 */
  max-width: 90%;
}

.naiyou2{
  font-size: 24px;
  text-align: left;
  border: 0px solid gray;

}

*--------------------------------------------------------*/

.access_Group{
  text-align: center;
}


.slider {
  width: 800px;       /* スライド全体の幅 */
  height: 600px;      /* 好きな高さに調整 */
  overflow: hidden;  /* はみ出た部分は隠す */
  position: relative;
  display: block;
  margin: 0 auto;
  text-align: center;

}

.slides {
  display: flex;             /* 横並びにする */
  transition: transform 0.5s ease;
}

.slides img {
  width: 100%;               /* 画面幅に合わせる */
  height: 100%;              /* スライド高さに合わせる */
  object-fit: cover;         /* 縦横比を保ちながらスライド枠いっぱいに */
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  color: #fff;
  border: none;
  font-size: 24px;
  padding: 10px;
  cursor: pointer;
}

.prev { left: 10px; }
.next { right: 10px; }


/*-- アニメーション実行 ---------------------------------*/
.Title-Group,.Table_box,.SubTitle-box,.box,.access_Group,.Table_box2{

  opacity: 0;
  animation: bgFadeIn 2s ease forwards;  /* 背景フェードイン */
  animation-delay: 1.5s;		/* logoスライドイン */


}


/* アニメーション */
@keyframes bgFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 左から出る */
@keyframes imgSlideIn {
  from {
    opacity: 0;
    transform: translateX(-120px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}