@charset "UTF-8";
/* --------------------------------------------------------------------　　共通部分 */
main {
  line-height: 1.8;
  font-size: 18px;
  color: #555566;
  font-family: 'Noto Sans JP', sans-serif;
  width: 100%;
}
/* -----------------------------------------------------------　PC横1000px*/
.bloc2, aside, nav ul, .w1000, #Video, #Tour #Voice {
  width: 1000px;
  margin: auto;
}
/* -----------------------------------------------------------　タイトル部分 */
h2 {
  text-align: center;
  padding: 30px 0px 0px;
  margin-bottom: 50px;
  font-size: 35px;
}
#ZH h2, #TourVideo h2 {
  border-bottom: solid 1.75px #dab740;
  color: #dab740;
}
#DC h2 {
  border-bottom: solid 1.75px #a52a2a;
  color: #a52a2a;
}
#AC h2 {
  border-bottom: solid 1.75px #4682b4;
  color: #4682b4;
}
#Tour h2 {
  border-bottom: solid 1.75px #555566;
}
h3 {
  margin-bottom: auto;
  font-size: 30px;
}
/* -----------------------------------------------------------　flex */
.flex, .bloc2, #Video, #Tour #Voice, #h1, nav ul {
  display: flex;
}
/* -----------------------------------------------------------　margin: auto; */
dl, h1, #TourVideo #Video .text h4, #TourVideo #Video .text p {
  margin: auto;
}
/* -----------------------------------------------------------　２ブロックエリア*/
.right, .left {
  width: 500px;
}
.left p {
  font-weight: bold;
  font-size: 45px;
  line-height: 1.4;
  padding: 1rem;
  margin: auto 0;
  width: fit-content;
}
#DC .left p {
  border: solid 10px #a52a2a;
}
#AC .left p {
  border: solid 10px #4682b4;
}
#Tour .left p {
  border: solid 10px #dab740;
  background: #fff;
}
/* -----------------------------------------------------------　dl */
dl dt, dl dd {
  display: inline;
  font-size: 1rem;
  line-height: 2;
}
dl dt::after {
  content: "：";
  margin-right: 0.25em;
}
dl dd {
  margin: 0;
}
/* 改行 */
dl dt:not(:first-of-type)::before {
  content: "\A"; /* 改行 */
  white-space: pre;
}
/* -----------------------------------------------------------　　ボタンエリア */
aside {
  padding-bottom: 50px;
}
aside .flex {
  gap: 0 20px;
}
aside .btn-flat-border {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #555566;
  border: solid 2px #555566;
  border-radius: 0px;
  transition: .4s;
}
.btn-flat-border:hover {
  background: #555566;
  color: white;
}
/* -----------------------------------------------------------　　黒布背景エリア */
nav, #ZH, #TourVideo {
  background-image: url("img/Back_TourVideo.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  color: #fff;
}
#TourVideo {
  background-attachment: fixed;
}
/* --------------------------------------------------------------------　　TOP */
#h1 {
  height: 100vh;
  background-image: url("./img/Back_h1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  justify-content: center;
  align-items: center;
}
#h1 h1 {
  /* 画像の幅を画面幅いっぱいに広げます */
  width: 100%;
  max-width: 800px; /* PCなど画面が広い場合のために最大幅を指定 */
  display: flex; /* 追加 */
  justify-content: center; /* 追加 */
}
#h1 h1 img {
  /* 画像の幅を親要素（h1）に合わせます */
  width: 90%; /* 100%から変更 */
  height: auto; /* 高さは自動調整して縦横比を維持します */
}
/* --------------------------------------------------------------------　　nav */
nav {
  height: 55px;
}
nav ul {
  list-style: none;
  align-items: center;
  gap: 75px;
  padding: 0rem 2rem;
}
nav ul li {
  position: relative;
  cursor: pointer;
  padding: 0 0;
  margin: 10px 0 0;
  font-size: 20px;
  font-weight: bold;
  height: 55px;
}
nav ul li img {
  vertical-align: middle;
  display: block;
}
nav ul li:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 0%;
  height: 5px;
  background-color: #dab740;
  transition: width 0.3s ease;
}
nav ul li:not(:last-child):hover::after {
  width: 100%;
}
nav a {
  color: #fff;
  text-decoration: none
}
/* --------------------------------------------------------------------　　ご挨拶 */
#message {
  text-align: center;
  margin: 100px 0px;
}
/* --------------------------------------------------------------------　　「Zero Hub」 ・見学ツアー共有エリア(CV)*/
#ZH aside .btn-flat-border, #TourVideo aside .btn-flat-border {
  color: #fff;
  border: solid 2px #fff;
}
#ZH .btn-flat-border:hover, #TourVideo aside .btn-flat-border:hover {
  background: #fff;
  color: #555566;
}
/* --------------------------------------------------------------------　　「Zero Hub」 エリア*/
#ZH .bloc2 .youtube .thumb {
  padding: 0px;
  max-width: 450px;
}
/* --------------------------------------------------------------------　　物流センター・解析センターエリア*/
#DC h4, #AC h4, #AC .right .storong {
  margin: auto auto 5px;
}
#DC section, #AC section {
  margin-bottom: 30px;
}
/* --------------------------------------------------------------------　　解析センターエリア*/
#AC .right p, #AC .right ul {
  margin-top: auto;
}
/* --------------------------------------------------------------------　　見学ツアー開催中！見学ツアー申し込み エリア*/
#TourVideo #Video, #Tour #Voice {
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 50px;
  font-size: 15px;
}
/* --------------------------------------------------------------------　　見学ツアー開催中！エリア*/
#TourVideo #Video .DC, #TourVideo #Video .AC, #TourVideo #Video .ZH {
  width: 300px;
  background: #fff;
  margin-bottom: 50px;
  position: relative;
  background-image: url("img/TourVideo_background_DC.png"); /* 置きたい画像 */
  background-repeat: no-repeat;
  background-position: right bottom; /* 右下に配置 */
  background-size: 30px 30px; /* サイズ指定 */
}
#TourVideo #Video .AC {
  background-image: url("img/TourVideo_background_AC.png");
}
#TourVideo #Video .ZH {
  background-image: url("img/TourVideo_background_ZH.png");
}
#TourVideo #Video .DC:hover, #TourVideo #Video .AC:hover, #TourVideo #Video .ZH:hover {
  filter: brightness(0.7);
}
#TourVideo #Video a, #TourVideo #Video {
  color: #555566;
  text-decoration: none;
}
#TourVideo #Video .thumb {
  width: 300px;
  height: 168.75px;
  margin: auto;
}
#TourVideo #Video .text {
  padding: 10px;
}
.lightbox {
  display: none; /* 最初は非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}
.lightbox-content img {
  display: block;
  max-width: 80vw; /* 横幅の最大値を画面幅の80%に */
  max-height: 80vh; /* 高さの最大値を画面高の80%に */
  height: auto;
  width: auto;
}
.responsive-video {
  max-width: 80vw; /* 画面幅の80% */
  max-height: 80vh; /* 画面高の80% */
  height: auto;
  aspect-ratio: 16 / 9; /* アスペクト比維持 */
}
.close {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 32px;
  color: white;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  padding: 8px; /* 均等にして正円に近づける */
  line-height: 1;
  width: 40px;
  height: 40px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* --------------------------------------------------------------------　　見学ツアー申し込みエリア*/
#Tourbackground {
  background-image: url("img/Back_Tour.jpg");
  background-repeat: no-repeat;
  background-size: 2000px auto;
  background-position: center top;
  padding-bottom: 50px;
}
#Tour #Voice {
  margin-bottom: 50px;
}
#Tour #Voice .VoiceBOX {
  width: 475px;
  background: #fff;
  margin-bottom: 50px;
  filter: drop-shadow(0px 0px 7px rgba(0, 0, 0, 0.6));
}
#Tour #Voice .VoiceBOX .flex div {
  width: 90%;
  padding: 0px 0px 10px;
}
#Tour #Voice .VoiceBOX .flex h4, #Tour #Voice .VoiceBOX .flex p {
  margin: auto;
  padding: 0px 10px;
}
#Tour #Voice .VoiceBOX .DC, #Tour #Voice .VoiceBOX .AC, #Tour #Voice .VoiceBOX .ZH {
  color: #fff;
  display: inline-block;
  width: auto;
  padding: 2.5px 10px;
  margin: auto auto 10px;
}
#Tour #Voice .VoiceBOX .DC {
  background: #a52a2a;
}
#Tour #Voice .VoiceBOX .AC {
  background: #4682b4
}
#Tour #Voice .VoiceBOX .ZH {
  background: #dab740;
}
#Tour .right p {
  text-shadow:
    -1px -1px 0 white, 0 -1px 0 white, 1px -1px 0 white, -1px 0 0 white, 1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 1px 0 white;
  margin-top: auto;
  color: #000;
}
#Tour .right .pr {
  display: block;
  padding-left: 2em; /* 全体を右に押す */
  text-indent: -2em; /* 1行目だけ左に戻す */
  margin: 1.5em 0;
}
#Tour aside p{
	margin-top: auto;
}
/* -----------------------------------------------------------------------------------------　　フッダー */
footer {
  background: #dab740;
  padding: 10px;
  text-align: center;
}
/* -----------------------------------------------------------------------------------------　　タブレットのみ */

@media screen and (min-width: 930px) and (max-width: 1024px) {
  /* --------------------------------------------------------------------　　ギャラリー */
  #TourVideo #Video .DC, #TourVideo #Video .AC, #TourVideo #Video .ZH {
    width: 350px;
  }
  #TourVideo #Video .thumb {
    width: 350px;
    height: 196.875px;
    margin: auto;
  }
  /* --------------------------------------------------------------------　　お客様の声 */
  #Tour #Voice .VoiceBOX {
    width: 400px;
    filter: none;
    border: solid 0.5px #555566;
  }
  #Tour #Voice .VoiceBOX .flex > p:first-child {
    display: none;
  }
  #Tour #Voice .VoiceBOX .flex {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #Tour #Voice .VoiceBOX .flex div {
    width: 100%;
  }
}
/* -----------------------------------------------------------------------------------------　　タブレット・スマフォ向け */
@media screen and (max-width: 1024px) {
  /* --------------------------------------------------------------------　　共通部分 */
  body {
    font-size: 16px;
    line-height: 1.7;
  }
	.pc-only,nav{
		display: none;
	}
  .w1000 {
    text-align: center;
  }
  .bloc2, aside {
    display: block;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  #message, #TourVideo #Video, #Tour #Voice, .w1000, #TourVideo aside {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  /* -----------------------------------------------------------　２ブロックエリア*/
  .right, .left {
    width: 100%;
  }
  .left p {
    font-weight: bold;
    font-size: 35px;
    padding: 0;
    width: fit-content;
  }
  #DC .left p {
    color: #a52a2a;
  }
  #AC .left p {
    color: #4682b4
  }
  #Tour .left p {
    color: #dab740
  }
  #DC .left p, #AC .left p, #Tour .left p {
    border: none;
	  text-align: center;
	  margin: auto auto 50px;
  }
  /* -----------------------------------------------------------　CVエリア*/
  aside .flex {
    text-align: center;
    flex-wrap: wrap;
  }
  /* --------------------------------------------------------------------　　TOP */
  #h1 {
    background-image: url("./img/Back_h1_1024.jpg");
  }
 
  /* --------------------------------------------------------------------　　「Zero Hub」 エリア*/
  #ZH .youtube {
    display: block; /* 中央配置用 */
    margin: 0 auto 50px; /* 中央寄せ */
  }
  #ZH .youtube iframe {
    width: 90% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }
	#ZH .bloc2 .youtube .thumb {
		margin: auto;
	}
	
  /* --------------------------------------------------------------------　　見学ツアー開催中！エリア*/
  #TourVideo #Video, #Tour #Voice {
    justify-content: space-around;
  }
  #Tour .right p {
    color: #555566;
  }
  #TourVideo aside .flex {
    width: fit-content;
    margin: auto;
  }
  /* --------------------------------------------------------------------　　見学ツアー申し込みエリア*/
  #Tourbackground {
    background-image: none;
  }
}
/* -----------------------------------------------------------------------------------------　　スマホ向け */
@media screen and (max-width: 767px) {
  /* --------------------------------------------------------------------　　共通部分 */
  body {
    font-size: 14px;
    line-height: 1.6;
  }
  .bloc2, aside {
    width: 90%;
  }
  .info-list dt, .info-list dd {
    display: block; /* 縦並びに戻す */
  }
  .info-list dt::after {
    content: ""; /* コロンを削除 */
  }
  .info-list dt:not(:first-of-type)::before {
    content: ""; /* 改行も無効化 */
  }
  .info-list dt {
    font-weight: bold;
  }
  .info-list dd {
    margin-bottom: 1rem;
  }
  /* -----------------------------------------------------------　CVエリア*/
  aside .flex {
    text-align: left;
  }
  aside .btn-flat-border {
    padding: 0.3em;
  }
  /* --------------------------------------------------------------------　　TOP */
  #h1 {
    background-image: url("./img/Back_h1_767.jpg");
    background-position: center bottom;
  }
  /* --------------------------------------------------------------------　　改行削除 */
  #message br ,#Tour .right p:last-child br{
    display: none;
  }
  /* --------------------------------------------------------------------　　見学ツアー開催中！エリア*/
  #TourVideo {
    background: #000;
  }
  #TourVideo #Video .DC, #TourVideo #Video .AC, #TourVideo #Video .ZH {
    width: 80%;
    max-width: 500px;
    margin: 0 auto 50px auto; /* 上0px, 左右auto, 下50px */
  }
  /* サムネイルの横幅も親に合わせてリサイズ */
  #TourVideo #Video .thumb {
    width: 100%;
    height: auto; /* 高さを自動調整 */
  }
  #TourVideo aside .flex p {
    width: fit-content;
    margin: auto auto 36px;
    ;
  }
}
@media screen and (max-width: 500px) {
	 #Tour #Voice .VoiceBOX {
    filter: none;
    border: solid 0.5px #555566;
  }
  #Tour #Voice .VoiceBOX .flex > p:first-child {
    display: none;
  }
  #Tour #Voice .VoiceBOX .flex {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #Tour #Voice .VoiceBOX .flex div {
    width: 100%;
  }
	aside h3{
		font-size: 27px;
	}
	#DC .left p, #AC .left p, #Tour .left p {
		text-align: left;
	}
	#DC .left p br, #AC .left p br, #Tour .left p br{
		display: none;
	}
	#Tour .left p .br-important{
  display: inline !important;
}
}