* {
  box-sizing: border-box;
  float: none;
  position: static;
}

/* 外部フォント */
@font-face {
  font-family: Rockville Solid;
  src: url(/font/Rockville\ Solid.otf);
}

@font-face {
  font-family: Kano Regular;
  src: url(/font/Kano.otf);
}

@font-face {
  font-family: FORQUE;
  src: url(/font/Forque-M3An.ttf);
}

@font-face {
  font-family: MOBO-Bold;
  src: url(/font/MOBO-Bold.otf);
}

@font-face {
  font-family: SmileySans-Oblique;
  src: url(/font/SmileySans-Oblique.ttf);
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: linear-gradient(45deg, #b6b6b6, #ffffff, #d6d6d6);
  /*グラデーションを定義*/
  background-size: 200% 200%;
  /*サイズを大きくひきのばす*/
  animation: bggradient 15s ease infinite;
}

@keyframes bggradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  object-fit: cover;
  object-position: center;
  opacity: 0.9;
  z-index: -1;
}

/* ヘッダーのロゴとリンク */

.logo-mark {
  width: 80%;
  
}

.jump {
  position: relative;
  margin-left: 3%;
  max-width: 10%;
  height: 50px;
}

/* 追加すると中央揃えになるプロパティ*/
.wrapper {
  max-width: 1300px;
  margin: 100px auto 100px auto;
  font-size: 0.9rem;
  padding: 0 4%;

}

/* バックグラウンドのキャッチコピー */
div#copy {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#copy h2 {
  font-family: "Sawarabi Mincho";
  font-size: 3rem;
  /* text-align: center; */
  /* margin: 2rem 3rem 0; */
  /* mix-blend-mode: difference; */
  color: #fff;
  font-weight: 100;
}

#copy h3 {
  font-family: "Kano regular";
  font-size: 2rem;
  color: #ffffff;
  filter: drop-shadow(1px 2px 5px #969696);

}

/* ヘッダーのプロパティ */
header {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  height: 80px;
  padding: 10px 0;
  width: 100%;
  color: white;
  transition: 0.8s;
  z-index: 2;

}

header:hover {
  background: #a1a1a1c0;
  color: #000;
}

/* 白領域に入るとメニューが黒文字へ */
.header.headerColorScroll {
  color: #000000;
  transition: color 0.4s ease-out;
}



h1 {
  font-family: "Sawarabi Mincho";
  margin-left: 80px;
  /* text-align: center; */
  font-size: 3rem;
  /* width: 100%; */
  /* letter-spacing: .5rem; */
}

/* 上部メニューバー */
#navbar {
  display: flex;
  justify-content: center;
  margin-right: 3%;
  font-size: 1.5rem;
}

nav a {
  text-decoration: none;
  font-family: "Kano Regular", "Sawarabi Gothic";
  color: inherit;
  padding: 1rem;
  transition: 0.3s;
}

nav a:hover {
  color: rgb(255, 0, 0);
}

.works_nav {
  margin: auto;
  list-style: none;
  white-space: nowrap;
  display: flex;
  justify-content: center;
}


.works_nav ul {
  display: block;
  margin: 0;

}

.works_nav li {
  list-style: none;
  position: relative;
  font-size: 1.2rem;
}

.works_nav ul li a {
  display: block;
  text-decoration: none;
  color: #999;
  padding: 20px 35px;
  transition: all .3s;
  text-orientation: sideways;
}


.works_nav ul li li a {
  padding: 20px 35px;
  text-orientation: sideways;
}





/*== メニュー　2・3階層目の共通設定 */

/*下の階層を持っているulの指定*/
.works_nav ul {
  /*絶対配置で位置を指定*/
  position: absolute;
  /* left: 0; */
  top: 115%;
  z-index: 4;
  /*はじめは非表示*/
  visibility: hidden;
  opacity: 0;
  /*アニメーション設定*/
  transition: all .3s;
}

/*hoverしたら表示*/
nav li.works_nav:hover>ul,
nav li.works_nav ul li:hover>ul,
nav li.works_nav:active>ul,
nav li.works_nav ul li:active>ul {
  visibility: visible;
  opacity: 1;
  background-color: #a1a1a1c0;
}

/*ナビゲーションaタグの形状*/
.works_nav ul li a {
  color: #fff;
  border-bottom: solid 1px rgba(255, 255, 255, 0.6);
}

.works_nav ul li:last-child>a {
  border-bottom: none;
}

.works_nav ul li a:hover,
.works_nav ul li a:active {
  color: #fd1d1d;
}


/*==3階層目*/

/*3階層目の位置*/
.works_nav ul ul {
  top: 0%;
  left: 100%;
}

.works_nav ul ul li a:hover,
.works_nav ul ul li a:active {
  color: #fd1d1d;
}

/* 右側に追従するメニューの設定 */
.scroll {
  width: 10%;
  position: fixed;
  display: flex;
  flex-direction: column;
  right: 0;
  bottom: 100px;
  z-index: 1;
}

.txtchange {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  text-decoration: none;

}

.fa-solid {
  color: rgb(60, 60, 60);
  text-shadow: 1px 0 10px #fff;
  mix-blend-mode: multiply;
  font-size: 2rem;
}

.txtchange span {
  position: absolute;
  width: fit-content;
  transition: .5s ease;
  opacity: 0;
  color: rgb(60, 60, 60);
  font-size: 1.2rem;
  font-family: "Sawarabi Gothic";
  font-weight: bold;
  text-shadow: 1px 0 10px #fff;
}

.txtchange:hover span {
  opacity: 1;
}

.txtchange:hover .fa-solid {
  opacity: 0;
}

/* 事業説明 */
.sub-tx {
  list-style: none;
  font-family: "Zen Kaku Gothic New";
  font-size: 1.2em;
  margin-top: 30px;
}

/* 事業説明タイトル */
#espo-biz {
  background-size: cover;
}

.espo-title {
  position: relative;
}

.title-img {
  object-fit: cover;
  width: 100%;
  height: 200px;
  opacity: 0.5;
  filter: blur(3px);

}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 97%;
  background-color: #13232cc4;
  mix-blend-mode: overlay;

}

.espo-title p {
  text-align: center;
  width: 100%;
  font-family: "Sawarabi Mincho";
  color: white;
  font-size: 2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* mix-blend-mode: difference; */
  filter: drop-shadow(1px 2px 5px #969696);
  /* text-decoration: underline;
  text-decoration-color: rgba(255, 0, 0, 0.4); */
}

/* ドライビングシミュレータ説明セクション */

.driving_sim {
  /* margin-bottom: 100px; */
  width: 100%;
  display: flex;
  background: linear-gradient(to right, #000000, #bc0000, #fff);
}

.drv_txt {
  position: absolute;
  margin-top: 30px;
  margin-left: 8%;
  width: 500px;

}

.driving_sim p {
  color: #ffffff;
  white-space: nowrap;
  font-family: "Kano Regular";
  font-size: 2rem;
  font-weight: bolder;
  text-shadow: 1px 2px #0000009d
}

.minitx {
  font-size: 1.2rem;
  font-family: "MOBO-Bold";
}

.driving_sim li {
  position: relative;
  width: 800px;
  padding-left: 30px;
  list-style: none;
  margin-top: 30px;
  color: #ffffff;
  font-family: "Zen Kaku Gothic New";
  font-size: 1.1rem;
  font-weight: bolder;

}



/*全共通*/

.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  /*　はみ出た色要素を隠す　*/
  opacity: 0;
}

@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*中の要素*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*左から右*/
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ff0000;
}

/*伸びる背景色の設定*/

@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }

  50% {
    transform-origin: left;
    transform: scaleX(1);
  }

  50.001% {
    transform-origin: right;
  }

  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger {
  opacity: 0;
}

.drv-img {
  width: 100%;
  object-fit: cover;
  display: flex;
  justify-content: right;
}


.drv-img img {
  object-fit: cover;
  width: 40%;
}



/* フライトシミュレータ説明セクション */

.flight_sim {
  width: 100%;
  margin-bottom: 100px;
  display: flex;
  background: linear-gradient(to left, #000000, #00589f, #fff);
}

.fl_txt {
  position: absolute;
  right: 0;
  display: flex;
  flex-direction: column;
  text-align: right;
  margin-top: 30px;
  margin-right: 8%;
  width: fit-content;
}

.flight_sim p {
  position: relative;
  color: #ffffff;
  white-space: nowrap;
  font-family: "Kano Regular";
  font-size: 2rem;
  font-weight: bolder;
  text-shadow: 1px 2px #0000009d
}

.flight_sim li {
  position: relative;
  margin-top: 30px;
  width: 800px;
  padding-right: 30px;
  list-style: none;
  color: #ffffff;
  font-family: "Zen Kaku Gothic New";
  font-size: 1.1rem;
  font-weight: bolder;
  text-align: left;
  word-wrap: break-word;

}

.flt-img {
  width: 100%;
  object-fit: cover;
  display: flex;
  justify-content: left;
}

.flt-img img {
  object-fit: cover;
  width: 40%;
}

/* ギャラリー内の設定 */
.slider iframe {
  /* width: 2%; */
  aspect-ratio: 16 / 9;
}

.slider li {
  font-family: "Zen Kaku Gothic New";

}

/* コメント：設備導入不要 */
.icon-title {
  display: flex;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 900;
  color: #3b3b3b;
  margin-top: 100px;
  filter: drop-shadow(1px 2px 5px #969696);
}

.icon-title p {
  text-align: center;
}

/* 事業説明セクション共通 */
.adjust {
  justify-content: center;
}

.biz-main-tx {
  list-style: none;
  font-family: "Zen Kaku Gothic New";
  font-size: 1.1rem;
  margin-top: 50px;
}


/* フッター */

article {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.footer-name {
  margin-left: 20px;
  font-size: 2rem;
  font-family: "Zen Kaku Gothic New";
  font-weight: bold;
  color: #3b3b3b;
}

article li {
  list-style-type: none;
  margin-left: 20px;
  font-family: "Zen Kaku Gothic New";
  color: #3b3b3b;

}



footer {
  display: flex;
  justify-content: center;
  padding: 5px;
  background-color: #a10000;
  color: #fff;
}


/* サイトサイズのレスポンシブ対応 */

@media screen and (max-width: 1400px) {

  header h1 {
    font-size: 2rem;
  }

  .espo-title p {
    font-size: 2rem;
  }

  #copy h2 {
    font-size: 2.5rem;
  }

  #copy h3 {
    font-size: 1.5rem;
  }

  .drv_txt {
    margin-top: 10px;
  }

  .driving_sim li {
    font-size: 1rem;
    width: 650px;
  }

  .driving_sim p {
    font-size: 1.5rem;
  }

  .fl_txt {
    margin-top: 10px;
  }
  
  .flight_sim li {
    font-size: 1rem;
    width: 650px;
  }

  .flight_sim p {
    font-size: 1.5rem;

  }

}

@media screen and (max-width: 1260px) {
  .wrapper {
    max-width: 1000px;
  }

  video {
    height: 40%;
  }

  #navbar a {
    font-size: 1rem;
  }

  div#copy {
    min-height: 40vh;
  }

  
  .minitx {
    font-size: 1.2rem;
  }

  .drv_txt {
    margin-top: 5px;
  }

  .driving_sim li {
    font-size: 0.9rem;
    width: 600px;
    margin-top: 5px;
    padding-left: 10px;
  }

  .driving_sim p {
    font-size: 1.5rem;
  }

  .fl_txt {
    margin-top: 5px;
  }
  
  .flight_sim li {
    font-size: 0.9rem;
    width: 600px;
    margin-top: 5px;
    padding-right: 20px;
  }

  .flight_sim p {
    font-size: 1.5rem;

  }

}

@media screen and (max-width: 1110px) {
  header h1 {
    font-size: 1.5rem;
  }

  #navbar a {
    font-size: 0.8rem;
  }

  video {
    height: 30%;
  }

  div#copy {
    min-height: 30vh;
  }

  .icon-title {
    font-size: 1.3rem;
    margin-top: 40px;
  }

  .driving_sim p {
    font-size: 1.2rem;
  }

  .minitx {
    font-size: 1rem;
  }

  .driving_sim li {
    font-size: 0.8rem;
    width: 500px;
    margin-top: 5px;
  }

  .flight_sim p {
    font-size: 1.2rem;
  }

  .flight_sim li {
    font-size: 0.8rem;
    width: 500px;
    margin-top: 5px;
  }

}

@media screen and (max-width: 860px) {

  header h1 {
    font-size: 1.1rem;
  }

  nav a {
    font-size: 0.8rem;
    padding: 7px;
  }

  video {
    height: 25%;
  }

  .scrolltitle p {
    font-size: 0.8rem;
  }

  .txtchange {
    font-size: 0.7rem;
  }

  .txtchange span {
    font-size: 0.7rem;
  }

  .sub-tx {
    font-size: 0.9rem;
  }

  .biz-main-tx {
    font-size: 0.9rem;
  }

  div#copy {
    min-height: 25vh;
  }

  .title-img {
    height: 100px;
  }

  div.overlay {
    height: 95%;
  }

  .espo-title p {
    font-size: 1.5rem;
  }


  .driving_sim p {
    font-size: 1rem;
  }

  .minitx {
    font-size: 0.8rem;
  }

  .driving_sim li {
    font-size: 0.6rem;
    width: 400px;
    margin-top: 5px;
  }

  .flight_sim p {
    font-size: 1rem;
  }

  .flight_sim li {
    font-size: 0.6rem;
    width: 400px;
    margin-top: 5px;
  }


}

@media screen and (max-width: 730px) {

  .wrapper {
    margin: 50px auto 50px auto;
  }

  header {
    height: 50px;
  }

  header h1 {
    font-size: 0.7rem;
  }

  #navbar a {
    font-size: 0.4rem;
  }

  video {
    height: 15%;
  }

  div#copy {
    min-height: 15vh;
  }

  #copy h2 {
    font-size: 1.5rem;
  }

  #copy h3 {
    font-size: 1rem;
  }

  .scroll {
    display: none;
  }

  .sub-tx {
    font-size: 0.8rem;
  }

  .title-img {
    height: 70px;
  }

  div.overlay {
    height: 93%;
  }

  .espo-title p {
    font-size: 1.1rem;
  }

  .biz-main-tx {
    font-size: 0.8rem;
  }

  .drv_txt {
    margin-top: 5px;
  }

  .fl_txt {
    margin-top: 5px;
  }

  .driving_sim li {
    font-size: 0.5rem;
    width: 300px;
    margin-top: 5px;
  }

  .flight_sim li {
    font-size: 0.5rem;
    width: 300px;
    margin-top: 5px;
  }

  .slider iframe {
    width: 1%;
    aspect-ratio: 16 / 9;
  }

  .slider li {
    font-size: 0.6rem;
    max-width: 300px;
  }


}

@media screen and (max-width: 590px) {

  .wrapper {
    max-width: 450px;
  }

  header h1 {
    margin-left: 50px;
  }
  .jump {
    margin-top: 30px;
  }

  #navbar {
    margin-right: 30px;
  }

  nav a {
    font-size: 0.6rem;
    padding: 3px;
  }

  #copy h2 {
    font-size: 1rem;
  }
  #copy h3 {
    font-size: 1rem;
  }

  .sub-tx {
    font-size: 0.8rem;
  }

  .espo-title p {
    font-size: 1rem;
  }

  .icon-title {
    font-size: 0.9rem;
  }

  .biz-main-tx {
    font-size: 0.8rem;
  }

  .drv_txt {
    margin-top: 2px;
    margin-left: 2%;
    width: 200px;
  }

  .fl_txt {
    margin-top: 2px;
    margin-right: 18%;
    width: 200px;
  }

  .driving_sim {
    height: 180px;
  }

  .driving_sim p {
    font-size: 0.8rem;
  }

  .minitx {
    font-size: 0.7rem;
  }

  .driving_sim li {
    font-size: 0.5rem;
    width: 300px;
    margin-top: 2px;
  }

  .flight_sim {
    height: 180px
  }

  .flight_sim p {
    font-size: 0.8rem;
  }

  .flight_sim li {
    font-size: 0.5rem;
    width: 300px;
    margin-top: 2px;
  }

}

@media screen and (max-width: 450px) {

  header {
    max-width: 100%;
  }
  header h1 {
    margin-left: 30px;
  }

  .jump {
    margin-top: 30px;
  }

  .wrapper {
    max-width: 350px;
  }

  nav a {
    font-size: 0.5rem;
    padding: 5px;
    margin-top: 7px;
  }


  .sub-tx {
    font-size: 0.6rem;
  }

  .espo-title p {
    font-size: 0.7rem;
  }

  .icon-title {
    font-size: 0.6rem;
  }

  .biz-main-tx {
    font-size: 0.6rem;
  }

  #icons p {
    font-size: 0.4rem;

  }

  .sub-tx {
    font-size: 0.7rem;
  }

  .espo-title p {
    font-size: 0.9rem;
  }

  .icon-title {
    font-size: 0.6rem;
  }

  .biz-main-tx {
    font-size: 0.7rem;
  }

  .drv_txt {
    margin-top: 15px;
    width: 150px;
  }

  .fl_txt {
    margin-top: 15px;
    margin-right: 18%;
    width: 150px;
  }

  .driving_sim p {
    font-size: 0.7rem;
  }

  .minitx {
    font-size: 0.5rem;
  }

  .driving_sim li {
    font-size: 0.4rem;
    width: 200px;
    margin-top: 6px;
  }

  .flight_sim p {
    font-size: 0.7rem;
  }

  .flight_sim li {
    font-size: 0.4rem;
    width: 200px;
    margin-top: 8px;
  }

  .slider iframe {
    width: 0.7%;
    height: 0.7%;
  }

  .slider li {
    font-size: 0.6rem;
  }


}