@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

ol,
ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #fff;
  font-family: "Noto sans jp";
  font-weight: 600;
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-size: 16px;
  color: #212121;
}

html {
  scroll-behavior: smooth;
}

button {
  /* 背景色を無色に */
  background: transparent;
  /* 枠線を消す */
  border: none;
  /* クリックした際に枠線をnone消す */
  outline: none;
  /* 影を消す */
  box-shadow: none;
}

/* video area */
/*header設定*/
#header{
  position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
  height: 100vh;/*高さを全画面にあわせる*/
} 

#video-area{
  position: fixed;
  z-index: -1;/*最背面に設定*/
  top: 0;
  right:0;
  left:0;
  bottom:0;
  overflow: hidden;
}

#video {
  /*天地中央配置*/
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*縦横幅指定*/
  width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
  filter: brightness(0.5);
}

#container{
	background:#fff;
	padding:300px 0;
	text-align: center;
}

/* HOME */
.top-header {
  width: 100%;
  height: 80px;
  position: fixed;
  z-index: 9999;
}

#globalMenu {
  width: 100%;
  height: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  overflow: hidden;
  transition: .4s;
}
#globalMenu.fixed {
  height: 130px;
  background: #484848b3;
}

.cf {
  background: #484848b3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  width: 100%;
  padding: 10px 20px;
}

.span-1 {
  font-size: 0.5em;
}

.cf nav ul {
  display: flex;
  gap: 20px;
}

.cf nav ul li a {
  font-family: "Noto sans jp";
  font-weight: 600;
  position: relative;
}

.cf nav ul li a:after {
  content: "";
  position: absolute;
  background: #CA9F2B;
  height: 2px;
  width: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  left: 0%;
  bottom: -10%;
  transition: 0.3s ease;
}
.cf nav ul li a:hover:after, 
.cf nav ul li a:focus:after, 
.cf nav ul li a:active:after {
  transform: scale(1, 1);
}

.button_container {
  display: none;
}


@media (max-width: 1000px) {
  .cf {
    height: 60px;
  }

  .nav-pc {
    display: none;
  } 

  .span-1 {
    font-size: 0.25em;
  }

  .span-2 {
    font-size: 0.75em;
  }

  .button_container {
    display: block;
  }
}

/* ファーストビュー */

.fv-grid-wrap {
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template: 
    "area1 area1 area2" 65%
    "area3 area4 area5" 35%
    / 27.5% 27.5% 45%;
  place-content: center;
}

.fv-grid-item-1 {
  grid-area: area1;
  background-color: #fff;
  position: relative;
}
.fv-grid-item-1-container {
  width: 70%;
  height: 62.5%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.fv-grid-item-1-main {
  width: 100%;
  height: 100%;
  position: relative;
}
.fv-grid-item-1-main h1 {
  position: absolute;
  top: 0%;
  left: 0%;
}
.fv-grid-item-1-text {
  position: absolute;
  top: 27.5%;
  left: 0%;
  font-family: "Anton";
  font-size: 1.5em;
  color: #1B1B1B;
}
.fv-grid-item-1-number {
  position: absolute;
  top: 32.5%;
  left: 60%;
  font-family: "Noto sans JP";
  font-weight: 800;
  font-size: 3em;
}
.fv-grid-item-1-code {
  position: absolute;
  top: 0%;
  right: 0%;
}
.fv-grid-item-1-logo-container {
  width: 100%;
  position: absolute;
  bottom: 0%;
  left: 0%;
  display: flex;
  justify-content: space-between;
}
.fv-grid-item-2 {
  grid-area: area2;
}
.fv-grid-item-2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0%);
  transition:0.3s;
}
.fv-grid-item-2:hover img {
  filter: saturate(100%);
}
.fv-grid-item-3 {
  grid-area: area3;
  position: relative;
}
.fv-grid-item-3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  left: 0;
  position: absolute;
}
.fv-grid-item-3 img:last-of-type {
  opacity: 0;
  transition: opacity .7s;
}
.fv-grid-item-3:hover img {
  opacity: 1;
}
.fv-grid-item-4 {
  grid-area: area4;
  position:relative;
  overflow:hidden;
}
.fv-grid-item-4:before{
  content:"";
  display:block;
  padding-top: 56.25%;
}
.fv-grid-item-4 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  transition:0.3s;
}
.fv-grid-item-4:hover img{
  transform:scale(1.1);
}
.fv-grid-item-5 {
  grid-area: area5;
  background-color: #1B1B1B;
  position: relative;
}
.fv-grid-item-5-container {
  width: 50%;
  height: 50%;
  margin: 1.5em;
  display: flex;
  flex-direction: column;
}
.fv-grid-item-5-text {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 1em;
}
.fv-grid-item-5-text h2 {
  font-family: "Noto sans JP";
  font-size: 1em;
  color: #D9D9D9;
  font-weight: 300;
  width: 30%;
}
.fv-grid-item-5-icon {
  width: 10%;
  object-fit: contain;
}
.scrolldown4{
  position:absolute;
  bottom:20%;
  right:10%;
  animation: arrowmove 1s ease-in-out infinite;
}
@keyframes arrowmove{
  0%{bottom:1%;}
  50%{bottom:3%;}
  100%{bottom:1%;}
}
.scrolldown4 span{
  position: absolute;
  left:-20px;
  bottom:20px;
  color: #eee;
  font-family: "Noto sans JP";
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}
.scrolldown4:before {
  content: "";
  position: absolute;
  bottom: 20px;
  right: -6px;
  width: 1px;
  height: 20px;
  background: #eee;
  transform: skewX(-31deg);
}
.scrolldown4:after{
	content:"";
	position: absolute;
	bottom: 20px;
	right:0;
	width:1px;
	height: 50px;
	background:#eee;
}

@media (max-width: 600px) {
  .fv-grid-wrap {
    grid-template: 
    "area1 area1" 25%
    "area3 area2" 25%
    "area4 area2" 25%
    "area5 area5" 25%
    / 50% 50%;
  }
  .fv-grid-item-1-main h1 {
    width: 20%;
    top: -10%;
  }
  .fv-grid-item-1-text {
    font-size: 1em;
  }
  .fv-grid-item-1-code {
    width: 5%;
  }
  .fv-grid-item-1-logo-container {
    bottom: -15%;
  }
  .fv-grid-item-1-logo-container img {
    width: 15%;
  }
  .fv-grid-item-5-container {
    width: 70%;
  }
  .scrolldown4 {
    bottom: 50%;
  }
}
@media (max-width: 1000px) {
  .fv-grid-wrap {
    grid-template: 
    "area1 area1" 25%
    "area3 area2" 25%
    "area4 area2" 25%
    "area5 area5" 25%
    / 50% 50%;
  }
  .fv-grid-item-1-main h1 {
    width: 20%;
    top: -10%;
  }
  .fv-grid-item-1-text {
    font-size: 1em;
  }
  .fv-grid-item-1-number {
    font-size: 2em;
    top: 33.5%;
    left: 69%;
  }
  .fv-grid-item-1-code {
    width: 5%;
  }
  .fv-grid-item-1-logo-container {
    bottom: -20%;
  }
  .fv-grid-item-1-logo-container img {
    width: 15%;
  }
  .fv-grid-item-5-container {
    width: 70%;
  }
  .scrolldown4 {
    bottom: 50%;
  }
}

/* コンテンツ1 */
.container-1 {
  width: 80%;
  display: flex;
  justify-content: center;
  gap: 3em;
  align-items: center;
  margin: 96px auto;
}

.text-3 {
  text-align: center;
  color: #484848;
  font-family: "Noto sans jp", sans-serif;
  font-weight: 600;
}

@media (max-width: 1200px) {
  .container-1 {
    flex-direction: column;
  }

  .rectangle-32 {
    display: none;
  }

  .text-3 {
    text-align: left;
    margin: 0 10vw;
    font-size: 0.8em;
  }
}

/* コンテンツ2 */
.container-2 {
  width: 100%;
  height: 50vw;
  background-image: url(../img/bus-stop-billboard-mockup-2-1.png);
  background-size: cover;
  background-position: center;
}

.wrap-1 {
  width: 100%;
  height: 40vw;
  position: relative;
}

.grid-container-1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  position: absolute;
  top: -5%;
  left: 5%;
  width: 90%;
}

.frame-1,
.frame-2,
.frame-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}

.rectangle-1 {
  background-color: #004A95;
  width: 95%;
  height: 5em;
}

.rectangle-1 h2 {
  color: #FFF;
  text-align: center;
  padding: 0.5em;
  font-size: 2em;
  font-family: "Noto sans jp";
  font-weight: 600;
}

.section-1 {
  width: 95%;
  display: block;
}

.link-banner-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
}

.link-banner-1:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #77777766;
  width: 100%;
  height: 257px;
  transform: scale(0, 1);
  transform-origin: left top;
  left: 0%;
  bottom: -10%;
  transition: 0.3s ease;
}

.link-banner-1:hover::after {
  transform: scale(1, 1);
}

.rectangle-2 {
  background-color: #CA9F2B;
  width: 100%;
  height: 3px;
  margin-bottom: 3px;
}

.rectangle-3 {
  background-color: #D9D9D9;
  width: 100%;
  height: 250px;
  text-align: center;
}

.x20240627_soten_logo_design,
.souten_logo_esports-1,
.x20240627_soten_logo {
  object-fit: contain;
  height: 230px;
  width: 230px;
}

.rectangle-4 {
  background-color: #004A95;
  width: 100%;
  height: 4em;
}

.text-4 {
  color: #FFF;
  font-size: 1em;
  text-align: center;
  padding: 1.25em 0;
  font-family: "Noto sans jp";
  font-weight: 600;
}

.section-2 {
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 2em;
}

.group-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  gap: 0.75em;
}

.group-2 img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.text-5 {
  color: #FFF;
  font-size: 0.75em;
  text-align: center;
  font-family: "Noto sans jp";
  font-weight: 600;
}

.rectangle-5 {
  width: 95%;
}

@media (max-width: 1000px) {
  .container-2 {
    height: 120vh;
  }

  .grid-container-1 {
    top: 15%;
    gap: 1em;
  }
}

@media (max-width: 600px) {
  .container-2 {
    height: 250vh;
  }

  .grid-container-1 {
    top: 15%;
    gap: 1em;
  }
}

/* コンテンツ3 */
.container-3 {
  width: 100%;
  height: 35vw;
  position: relative;
}

.grid-container-2 {
  width: 90%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  position: absolute;
  left: 5%;
  top: 15%;
  width: 90%;
  gap: 1em;
}

.frame-4,
.frame-5,
.frame-6 {
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.frame-4 h2,
.frame-5 h2,
.frame-6 h2 {
  color: #262626;
  font-family: "Noto sans jp";
  font-weight: 700;
}

.link-banner-2 {
  width: 100%;
  position: relative;
}

.link-banner-2:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #00000066;
  width: 100%;
  height: 240px;
  transform: scale(0, 1);
  transform-origin: left top;
  left: 0%;
  bottom: -10%;
  transition: 0.3s ease;
}

.link-banner-2:hover::after {
  transform: scale(1, 1);
}

.banner-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.rectangle-6 {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: #004A95;
  padding: 1em;
}

.rectangle-6 p {
  color: #FFF;
  font-family: "Noto sans jp";
  font-weight: 600;
}

@media (max-width: 1000px) {
  .container-3 {
    height: 75vh;
  }

  .grid-container-2 {
    top: 5%;
    gap: 1em;
  }
}
@media (max-width: 600px) {
  .container-3 {
    height: 150vh;
  }

  .grid-container-2 {
    top: 5%;
    gap: 1em;
  }
}

/* footer */
.footer-top {
  width: 100%;
}

.footer-banner {
  display: flex;
}

.footer-decoration {
  background-color: #004A95;
  width: 60%;
  text-align: center;
}

.footer-phone a {
  color: #484848;
  text-decoration: none;
  font-family: 'Noto sans jp', sans-serif;
}

.footer-logo {
  padding: 0.5em;
}

.footer-info {
  background-color: #D9D9D9;
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

.footer-phone {
  font-size: 2em;
  font-family: 'Noto sans jp', sans-serif;
  font-weight: 600;
  color: #484848;
}

.footer-hours {
  font-family: 'Noto sans jp', sans-serif;
  font-weight: 400;
}

.footer-contact {
  background-color: #004A95;
  width: 50%;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

.footer-contact a {
  display: inline-block;
  font-family: "Noto sans jp";
  font-weight: 600;
}

.footer-contact a p {
  font-family: "Noto sans jp";
  font-weight: 600;
}

.footer-nav-top {
  background-color: #484848;
  width: 100%;
  padding: 5em;
}

.footer-menu-top {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.has-child {
  width: 20%;
}

.right {
  float: right;
}

.has-child ul li a {
  display: inline-block;
  transition: 0.2s linear;
  position: relative;
  overflow: hidden;
}

.has-child ul li a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #CA9F2B;
  transform: translate(-100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
  content: "";
}
.has-child li a:hover::after, 
.has-child li a:focus::after, 
.has-child ul li a:active::after {
  transform: translate(0, 0);
}

.has-child a {
  color: #FFF;
  font-family: "Noto sans jp";
  font-weight: 700;
}

.has-child ul li {
  padding: 0.5em 0;
  font-family: "Noto sans jp";
  font-weight: 600;
}

.footer-label {
  background-color: #484848;
  width: 100%;
  position: relative;
}

.footer-label-border {
  height: 1px;
  width: 96%;
  background-color: #D9D9D9;
  position: absolute;
  left: 2%;
  top: 0%;
}

.label-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 4em;
}

.label-logo {
  width: 9%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.label-logo p {
  color: #FFF;
  font-family: "Noto sans jp";
  font-weight: 600;
}

.label-menu {
  margin: 1em;
}

.label-menu ul {
  display: flex;
  gap: 1em;
}

.label-menu ul li a {
  position: relative;
}

.label-menu ul li a:after {
  content: "";
  position: absolute;
  background: #CA9F2B;
  height: 2px;
  width: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  left: 0%;
  bottom: -10%;
  transition: 0.3s ease;
}
.label-menu ul li a:hover:after, 
.label-menu ul li a:focus:after, 
.label-menu ul li a:active:after {
  transform: scale(1, 1);
}

.footer-copy-top {
  position: absolute;
  right: 5%;
  bottom: 0%;
  color: #FFF;
  font-family: "Noto sans jp";
  font-weight: 400;
}

@media (max-width: 600px) {
  .footer-banner {
    flex-direction: column;
  }

  .footer-decoration {
    width: 100%;
  }

  .footer-info {
    width: 100%;
    padding: 1em;
  }

  .footer-contact {
    width: 60%;
  }

  .footer-nav-top {
    padding: 0%;
  }

  .footer-menu-top {
    width: 100%;
    flex-direction: column;
  }

  .has-child {
    width: 100%;
  }

  .has-child ul {
    width: 100%;
    visibility: visible;
    opacity: 1;
    display: none;
    transition: none;
  }

  .has-child a {
    display: block;
    padding: 1.5em 1em;
  }

  .has-child ul li a {
    display: block;
    padding: 0.5em 1em;
    border-bottom: 1px solid #777777;
  }

  .has-child a:active {
    background: #262626;
  }

  .footer-label-border {
    display: none;
  }

  .label-content {
    justify-content: space-between;
    padding: 0 0.3em;
  }

  .label-logo {
    width: 20%;
  }

  .label-logo p {
    font-size: 0.5em;
  }

  .label-menu ul li {
    font-size: 0.8em;
  }
}


/* 下層ページ共通 */

.container {
  width: 100%;
  min-height: 100vh;
  position: relative;
}

.background {
  width: 100%;
  min-height: 100%;
  position: relative;
  flex: 1;
  /* padding: 20px; */
  box-sizing: border-box;
  /* padding-bottom: 90vw; */
}

/* AB */

.main-content-ab {
  width: 100%;
  height: 160vw;
  position: relative;
}

.main-content-wrapper-ab {
  width: 80%;
  position: absolute;
  top: 15%;
  left: 10%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  gap: 2em;
}

.about-us {
  text-align: left;
  color: white;
  font-size: 5em;
  font-family: 'Anton';
  font-weight: 400;
}

.section-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5em;
}

.philosophy-header {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.philosophy-title {
  color: white;
  font-size: 2.5em;
  font-family: 'Noto Sans JP';
  font-weight: 900;
}

.philosophy-subtitle {
  color: white;
  font-size: 1.5em;
  font-family: 'Anton';
  font-weight: 400;
}

.philosophy-text-container {
  width: 100%;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.philosophy-text {
  width: 100%;
  color: white;
  font-size: 1em;
  font-family: 'Noto Sans JP';
  font-weight: 600;
  line-height: 1.3em;
  word-wrap: break-word;
}

.business-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5em;
}

.business-header {
  text-align: left;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.business-title {
  color: white;
  font-size: 2.2em;
  font-family: 'Noto Sans JP';
  font-weight: 900;
}

.business-subtitle {
  color: white;
  font-size: 1.5em;
  font-family: 'Anton';
  font-weight: 400;
}

.business-main-image {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.business-section-container {
  width:100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.business-section {
  width: 100%;
}

.business-image {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.business-name {
  width: 100%;
  color: white;
  font-size: 1.5em;
  font-family: 'Noto Sans JP';
  font-weight: 700;
}

.business-description {
  width: 100%;
  color: white;
  font-size: 0.8em;
  font-family: 'Noto Sans JP';
  font-weight: 400;
}


/* OV */

.main-content-ov {
  width: 100%;
  height: 100vw;
  position: relative;
}

.main-content-wrapper-ov {
  width: 80%;
  position: absolute;
  left: 10%;
  top: 15%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3em;
}

.company-info-title {
  color: #FFF;
  font-size: 5em;
  font-family: "Noto Sans JP";
  font-weight: 900;
}

table.company-info {
  width: 100%;
  border-collapse: collapse;
  background: rgba(0, 0, 0, 0.5);
}

table.company-info th, table.company-info td {
  padding: 2em;
  color: #FFF;
  font-family: "Noto Sans JP";
}

table.company-info th {
  text-align: left;
  width: 20%;
}

table.company-info td {
  text-align: left;
  width: 80%;
}

/* TR */
.tr-fv {
  width: 100%;
}

.slider {
  position:relative;
  z-index: 1;
  width: 100%;
  /* height: 100vh; */
}

.slider-item {
  width: 100%;
  /* height: 100vh; */
}

.slider-item img {
  object-fit: cover;
  width: 100%;
}

/*ドットナビゲーションの設定*/

.slide-dots {
  position: relative;
  z-index: 3;
  text-align:center;
  margin:-50px 0 0 0;/*ドットの位置*/
}

.slide-dots li {
  display:inline-block;
  margin:0 5px;
}

.slide-dots button {
  color: transparent;
  outline: none;
  width:16px;/*ドットボタンのサイズ*/
  height:16px;/*ドットボタンのサイズ*/
  display:block;
  border-radius:50%;
  background:#fff;/*ドットボタンの色*/
}

.slide-dots .slick-active button{
  background:#004A95;/*ドットボタンの現在地表示の色*/
}

@media (max-width: 1300px) {
  .slide-dots li{
    display: none;
  }
}

/* tr-top */
.tr-intro {
  width: 90%;
  margin: 6em auto;
}
.tr-intro-1 {
  text-align: center;
  font-family: "Noto sans JP";
  margin-bottom: 6em;
}

.tr-intro-2 {
  text-align: center;
  font-family: "Noto sans JP";
}

@media (max-width: 1100px) {
  .tr-intro-1,
  .tr-intro-2 {
    font-size: 0.75em;
  }
}

.tr-service {
  width: 100%;
}

.tr-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2em;
  width: 80%;
  margin: 0 auto;
}

.tr-grid-item-main {
  height: 480px;
  background-color: #d9d9d9;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tr-grid-item-main h3 {
  font-family: "Noto sans JP";
  padding: 32px 0;
  text-align: center;
}

.tr-grid-item-main h3::after {
  content: "";
  display: block;
  width: 240px;
  height: 3px;
  margin: 32px auto 0;
  background-color: #CA9F2B;
}

.tr-grid-item-main img {
  width: 100px;
  height: 100px;
}

.tr-grid-item-main p {
  width: 100%;
  height: 200px;
  background-color: #004A95;
  position: absolute;
  left: 0;
  bottom: 0;
  color: #FFF;
  font-family: "Noto sans JP";
  font-size: 1em;
  text-align: justify;
  padding: 40px;
}

.tr-service-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 32px;
  margin: 32px 0;
}

.content-grid-item {
  height: 144px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  background-color: #004A95;
}

.content-grid-item img {
  width: 72px;
  height: 72px;
}

.content-grid-item h4 {
  color: #FFF;
  font-family: "Noto sans JP";
}

#service-content-open-btn {
  display:block;
  border: none;
  cursor: pointer;
}

.tr-banner {
  width: 80%;
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 3em auto;
}

@media (max-width: 800px) {
  .tr-banner {
    flex-direction: column;
  }
}

.tr-form {
  width: 100%;
  margin-bottom: 96px;
  background:linear-gradient(to bottom, transparent 0%, transparent 0%, #fff 100%), url(../img/transport/bridge-7859045_1920.jpg);
  background-size: cover;
  background-position: center;
}

.tr-form-title {
  width: 90%;
  margin: 0 auto;
  text-align: center;
  padding: 72px 0;
}

.tr-form-title h2 {
  color: #FFF;
  font-family: "Noto sans JP";
  text-shadow: 0px 0px 15px var(--black, #1B1B1B);
  padding-bottom: 1em;
}

.tr-form form {
  width: 80%;
  margin: 0 auto;
}

.tr-form-item {
  display: flex;
  margin-bottom: 1em;
}

.tr-form label {
  display: block;
  width: 20%;
  font-size: 1em;
  font-family: "Noto sans JP";
  color: #FFF;
  font-weight: 600;
  text-shadow: 0px 0px 15px var(--black, #1B1B1B);
}

.tr-form input,
.tr-form textarea {
  width: 80%;
  padding: 0.5em 2em;
  margin-bottom: 1.25em;
  border-radius: 5px;
  border: none;
  background: #D9D9D9;
  font-family: "Noto Sans JP";
}

.name-item {
  display: flex;
  align-items: baseline;
  width: 35%;
  margin-left: 4em;
}

.name-item input {
  width: 100%;
}

.tr-form textarea {
  height: 320px;
}

.tr-form button {
  text-align: center;
  width: 100%;
  height: 64px;
  background-color: #004A95;
  color: #FFF;
  font-family: "Noto sans JP";
  font-size: 2em;
  font-weight: 600;
  cursor: pointer;
}

.tr-form form p {
  text-align: right;
  font-family: "Noto sans JP";
}

@media (max-width: 600px) {
  .tr-form-item {
    display: block;
  }
  .tr-form input,
  .tr-form textarea {
    width: 100%;
  }
  .name-item {
    width: 100%;
    margin-left: 0;
  }
  .tr-form label {
    width: 50%;
    margin-bottom: 0.5em;
  }
  .tr-form input,
  .tr-form textarea {
    width: 100%;
  }
}

/* tr-recruit */

.tr-recruit-title {
  width: 100%;
  height: 500px;
  background: linear-gradient(to bottom, transparent 0%, transparent 0%, #fff 100%), url(../img/transport/pexels-norma-mortenson-4391478.jpg);
  background-size: cover;
  background-position: center;
  position: relative;
}

.tr-recruit-title-content {
  display: flex;
  align-items: baseline;
  text-align: center;
  gap: 24px;
  position: absolute;
  left: 5%;
  top: 30%;
}

.tr-recruit-title-content h1 {
  color: #FFF;
  font-family: "Noto sans JP";
  font-weight: 700;
  font-size: 6em;
  text-shadow: 0px 0px 15px var(--black, #1B1B1B);
}

.tr-recruit-title p {
  color: var(--white, #FFF);
  text-shadow: 0px 0px 15px var(--black, #1B1B1B);
  font-family: "Noto Sans JP";
  font-size: 1.25em;
  font-weight: 500;
} 

@media (max-width: 1200px) {
  .tr-recruit-title-content {
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .tr-recruit-title-content h1 {
    font-size: 4em;
  }

  .tr-recruit-title-content p {
    font-size: 0.75em;
  }
}

.tr-recruit-section-1 {
  width: 100%;
  margin-bottom: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.tr-recruit-section-1 h2 {
  font-family: "Noto sans JP";
}

.tr-recruit-grid-container-1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 72px;
  width: 80%;
  margin: 0 auto;
}

.tr-recruit-grid-item-charm {
  /* width: 320px; */
  height: 480px;
  background-color: #d9d9d9;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tr-recruit-grid-item-charm h3 {
  font-family: "Noto sans JP";
  padding: 32px 0;
  text-align: center;
  width: 100%;
}

.tr-recruit-grid-item-charm h3::after {
  content: "";
  display: block;
  width: 80%;
  height: 3px;
  margin: 32px auto 0;
  background-color: #CA9F2B;
}

.tr-recruit-grid-item-charm img {
  width: 100px;
  height: 100px;
  margin: 0 110px;
}

.tr-recruit-grid-item-charm p {
  height: 200px;
  background-color: #004A95;
  position: absolute;
  left: 0;
  bottom: 0;
  color: #FFF;
  font-family: "Noto sans JP";
  font-size: 1em;
  text-align: justify;
  padding: 40px;
}

.tr-recruit-section-2 {
  width: 100%;
  padding-top: 72px;
  padding-bottom: 72px;
  background-color: #D9D9D9;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tr-recruit-section-2 h2 {
  font-family: "Noto Sans JP";
  font-size: 2em;
  font-weight: 700;
}

.tr-recruit-section-2 p {
  width: 80%;
  padding-top: 1em;
  font-family: "Noto Sans JP";
  font-size: 1em;
  font-weight: 400;
  text-align: center;
}

.tr-recruit-section-2-img {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tr-recruit-section-3 {
  width: 100%;
  margin-bottom: 96px;
  background: linear-gradient(to bottom, transparent 0%, transparent 0%, #fff 100%), url(../img/transport/ship-8656664_1920.jpg);
  background-size: cover;
  background-position: center;
  margin: 72px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tr-recruit-section-3-title {
  text-align: center;
}

.tr-recruit-section-3-title h2 {
  font-family: "Noto Sans JP";
  font-size: 2em;
  font-weight: 700;
  text-shadow: 0px 0px 15px var(--black, #1B1B1B);
  color: #fff;
  padding-top: 3em;
  padding-bottom: 1em;
}

.tr-recruit-grid-container-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 72px;
  width: 80%;
}

.tr-recruit-grid-item-list {
  height: 400px;
  background-color: #D9D9D9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.tr-recruit-grid-item-list h3 {
  font-family: "Noto sans JP";
  font-size: 2em;
  font-weight: 700;
  padding: 32px 0;
  text-align: center;
  width: 100%;
}

.tr-recruit-grid-item-list h3::after {
  content: "";
  display: block;
  width: 80%;
  height: 3px;
  margin: 32px auto 0;
  background-color: #CA9F2B;
}

.tr-recruit-grid-item-list ul {
  height: 145px;
  list-style: circle;
}

.tr-recruit-grid-item-list ul li {
  font-family: "Noto Sans JP";
  font-size: 1em;
  font-weight: 500;
}

.tr-recruit-grid-item-list button {
  width: 100%;
  height: 104px;
  background-color: #004A95;
  color: #FFF;
  font-family: "Noto sans JP";
  font-size: 1em;
  text-align: right;
}

  /* overlay css */

  #section-overlay-1,
  #section-overlay-2,
  #section-overlay-3,
  #section-overlay-4,
  #section-overlay-5,
  #section-overlay-6,
  #section-overlay-7,
  #section-overlay-8,
  #section-overlay-9,
  #section-overlay-10,
  #section-overlay-11,
  #section-overlay-12,
  #section-overlay-13,
  #section-overlay-14{
    position: fixed;
    top:0;
    left: 0;
    z-index: 10;
    width: 100vw;
    height: 100vh;
    visibility: hidden;
    opacity: 0;
    background: rgba(0,0,0,0.6);
    transition: all 0.5s ease-out;
  }
  #section-overlay-1.overlay-on,
  #section-overlay-2.overlay-on,
  #section-overlay-3.overlay-on,
  #section-overlay-4.overlay-on,
  #section-overlay-5.overlay-on,
  #section-overlay-6.overlay-on,
  #section-overlay-7.overlay-on,
  #section-overlay-8.overlay-on,
  #section-overlay-9.overlay-on,
  #section-overlay-10.overlay-on,
  #section-overlay-11.overlay-on,
  #section-overlay-12.overlay-on,
  #section-overlay-13.overlay-on,
  #section-overlay-14.overlay-on{
    visibility: visible;
    opacity: 1;
  }

  .flex{
    width: 100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center; 
  }

  #overlay-inner-1,
  #overlay-inner-2 {
    background-color: #004A95;
    text-align: center;
    color: #FFF;
    font-family: "Noto sans JP";
    width: 70%;
    padding: 40px;
    position: relative;
  }

  #overlay-inner-3,
  #overlay-inner-4,
  #overlay-inner-5,
  #overlay-inner-6,
  #overlay-inner-7,
  #overlay-inner-8,
  #overlay-inner-9,
  #overlay-inner-10,
  #overlay-inner-11,
  #overlay-inner-12,
  #overlay-inner-13,
  #overlay-inner-14 {
    background-color: #004A95;
    text-align: center;
    color: #FFF;
    font-family: "Noto sans JP";
    width: 50%;
    padding: 40px;
  }


  #overlay-inner-1 h3,
  #overlay-inner-2 h3,
  #overlay-inner-3 h3,
  #overlay-inner-4 h3,
  #overlay-inner-5 h3,
  #overlay-inner-6 h3,
  #overlay-inner-7 h3,
  #overlay-inner-8 h3,
  #overlay-inner-9 h3,
  #overlay-inner-10 h3,
  #overlay-inner-11 h3,
  #overlay-inner-12 h3,
  #overlay-inner-13 h3,
  #overlay-inner-14 h3 {
    padding-bottom: 30px;
  }

  #overlay-inner-1 h3::after,
  #overlay-inner-2 h3::after,
  #overlay-inner-3 h3::after,
  #overlay-inner-4 h3::after,
  #overlay-inner-5 h3::after,
  #overlay-inner-6 h3::after,
  #overlay-inner-7 h3::after,
  #overlay-inner-8 h3::after,
  #overlay-inner-9 h3::after,
  #overlay-inner-10 h3::after,
  #overlay-inner-11 h3::after,
  #overlay-inner-12 h3::after,
  #overlay-inner-13 h3::after,
  #overlay-inner-14 h3::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    margin: 32px auto 0;
    background-color: #CA9F2B;
  }

  .overlay-text-container {
    text-align: left;
    display: grid;
    grid-template-columns:  repeat(auto-fit, minmax(300px, 1fr));
    gap: 1em;
  }

  @media (max-width: 1000px) {
    #overlay-inner-1,
    #overlay-inner-2 {
      width: 80%;
    }
    .overlay-text-box h4 {
      font-size: 0.8em;
    }
    .overlay-text-box ul li {
      font-size: 0.75em;
    }
    #overlay-inner-3,
    #overlay-inner-4,
    #overlay-inner-5,
    #overlay-inner-6,
    #overlay-inner-7,
    #overlay-inner-8,
    #overlay-inner-9,
    #overlay-inner-10,
    #overlay-inner-11,
    #overlay-inner-12,
    #overlay-inner-13,
    #overlay-inner-14 {
      width: 80%;
    }
  }

  #overlay-inner-3 p,
  #overlay-inner-4 p,
  #overlay-inner-5 p,
  #overlay-inner-6 p,
  #overlay-inner-7 p,
  #overlay-inner-8 p,
  #overlay-inner-9 p,
  #overlay-inner-10 p,
  #overlay-inner-11 p,
  #overlay-inner-12 p,
  #overlay-inner-13 p,
  #overlay-inner-14 p {
    text-align: left;
  }

  #overlay-inner-12 ul,
  #overlay-inner-13 ul,
  #overlay-inner-14 ul {
    text-align: left;
    padding-left: 1em;
  }

  #overlay-inner-12 ol,
  #overlay-inner-13 ol,
  #overlay-inner-14 ol {
    text-align: left;
    padding-left: 2em;
    list-style: decimal;
  }

  #overlay-inner-13 p,
  #overlay-inner-14 p {
    padding-bottom: 1em;
  }


  #open-btn, #close-btn{
    display:block;
    padding:10px 30px;
    border: none;
    cursor: pointer;
  }

  #close-btn {
    position: absolute;
    right: 0;
    top: 3%;
    color: #FFF;
  }

.tr-recruit-form {
  width: 100%;
  margin-bottom: 96px;
  background:linear-gradient(to bottom, transparent 0%, transparent 0%, #fff 100%), url(../img/transport/bridge-7859045_1920.jpg);
  background-size: cover;
  background-position: center;
}

.tr-recruit-form form {
  width: 80%;
  margin: 0 auto;
}

.tr-recruit-form label {
  display: block;
  width: 30%;
  font-size: 1em;
  font-family: "Noto sans JP";
  color: #FFF;
  font-weight: 600;
  text-shadow: 0px 0px 15px var(--black, #1B1B1B);
}

.tr-recruit-form input,
.tr-recruit-form textarea {
  width: 80%;
  padding: 0.5em 2em;
  margin-bottom: 1.25em;
  border-radius: 5px;
  border: none;
  background: #D9D9D9;
  font-family: "Noto Sans JP";
}

input[type="radio"] {
  width: 24px;
  height: 24px;
}

.tr-form-item-list {
  width: 80%;
  display: inline-block;
  font-family: "Noto sans JP";
}

.tr-recruit-form textarea {
  height: 320px;
}

.tr-recruit-form p {
  text-align: right;
  font-family: "Noto sans JP";
}

.tr-recruit-form button {
  text-align: center;
  width: 100%;
  height: 64px;
  background-color: #004A95;
  color: #FFF;
  font-family: "Noto sans JP";
  font-size: 2em;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 600px) {
  .tr-recruit-form label {
    width: 50%;
    margin-bottom: 0.5em;
  }
  .tr-recruit-form input,
  .tr-recruit-form textarea {
    width: 100%;
  }
  .tr-form-item-list {
    width: 100%;
    display: block;
  }
}

/* tr-fc */

.tr-fc-title {
  width: 100%;
  height: 500px;
  background: linear-gradient(to bottom, transparent 0%, transparent 0%, #fff 100%), url(../img/transport/pexels-fauxels-3184418.jpg);
  background-size: cover;
  background-position: center;
  position: relative;
}

.tr-fc-title h1 {
  color: #FFF;
  font-family: "Noto sans JP";
  font-weight: 700;
  font-size: 6em;
  text-shadow: 0px 0px 15px var(--black, #1B1B1B);
  position: absolute;
  top: 30%;
  left: 10%;
}

@media (max-width: 1000px) {
  .tr-fc-title h1 {
    font-size: 3em;
  }
}

.tr-fc-section-1 {
  width: 95%;
  margin: 80px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.tr-fc-section-1-1 {
  margin-bottom: 5.5em;
  font-family: "Noto Sans JP";
  font-size: 1.25em;
  font-weight: 500;
}

@media (max-width: 600px) {
  .tr-fc-section-1-1 {
    font-size: 1em;
  }
}


.tr-fc-section-1 h2 {
  margin-bottom: 1.5em;
  font-family: "Noto Sans JP";
  font-size: 2em;
  font-style: normal;
  font-weight: 700;
}

.tr-fc-section-1-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.tr-fc-section-1-2 p {
  font-family: "Noto Sans JP";
  font-size: 1em;
  font-weight: 500;
  text-align: left;
}

.tr-fc-section-1-2 img {
  width: 230px;
  height: 100px;
}

@media (max-width: 1000px) {
  .tr-fc-section-1-2 {
    flex-direction: column-reverse;
  }
}

.tr-fc-section-2 {
  width: 100%;
  margin: 0 auto 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tr-fc-section-2 h2 {
  width: 90%;
  margin: 0 auto;
  padding-top: 2em;
  padding-bottom: 2em;
  font-family: "Noto Sans JP";
  font-size: 2em;
  font-style: normal;
  font-weight: 700;
  text-align: center;
}

.tr-fc-grid-container-1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 72px;
  width: 80%;
}

.tr-fc-grid-item {
  height: 480px;
  background-color: #d9d9d9;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tr-fc-grid-item h3 {
  font-family: "Noto sans JP";
  padding: 32px 0;
  text-align: center;
}

.tr-fc-grid-item h3::after {
  content: "";
  display: block;
  width: 240px;
  height: 3px;
  margin: 32px auto 0;
  background-color: #CA9F2B;
}

.tr-fc-grid-item img {
  width: 100px;
  height: 100px;
}

.tr-fc-grid-item p {
  height: 200px;
  background-color: #004A95;
  position: absolute;
  left: 0;
  bottom: 0;
  color: #FFF;
  font-family: "Noto sans JP";
  font-size: 1em;
  text-align: justify;
  padding: 2em;
}

.tr-fc-section-3 {
  width: 90%;
  margin: 0 auto 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tr-fc-section-3 h2 {
  font-family: "Noto Sans JP";
  font-size: 2em;
  font-weight: 700;
} 

.tr-fc-section-3 p {
  padding-top: 1em;
  font-family: "Noto Sans JP";
  font-size: 1em;
  font-weight: 400;
  text-align: center;
}

.tr-fc-section-3-1 {
  width: 100%;
  margin: 1.5em auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1000px) {
  .tr-fc-section-3-1 {
    flex-direction: column-reverse;
  }
}

.tr-fc-section-4 {
  width: 100%;
  padding-bottom: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(to bottom, transparent 0%, transparent 0%, #fff 100%), url(../img/transport/ship-8656664_1920.jpg);
  background-size: cover;
  background-position: center;
}

.tr-fc-section-4-title {
  width: 90%;
  text-align: center;
}

.tr-fc-section-4-title h2 {
  font-family: "Noto Sans JP";
  font-size: 2em;
  font-weight: 700;
  text-shadow: 0px 0px 15px var(--black, #1B1B1B);
  color: #fff;
  padding-top: 3em;
  padding-bottom: 2em;
}

.tr-fc-grid-container-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 72px;
  width: 80%;
}

.tr-fc-form {
  width: 100%;
  padding-bottom: 96px;
  background:linear-gradient(to bottom, transparent 0%, #fff 100%), url(../img/transport/bridge-7859045_1920.jpg);
  background-size: cover;
  background-position: center;
}

.tr-form-title p {
  font-family: "Noto Sans JP";
  font-size: 1em;
  font-weight: 500;
  text-shadow: 0px 0px 15px var(--black, #1B1B1B);
  color: #FFF;
}

.tr-fc-form form {
  width: 80%;
  margin: 0 auto;
}

.tr-fc-form label {
  display: block;
  width: 30%;
  font-size: 1em;
  font-family: "Noto sans JP";
  color: #FFF;
  font-weight: 600;
  text-shadow: 0px 0px 15px var(--black, #1B1B1B);
}

.tr-fc-form input,
.tr-fc-form textarea {
  width: 80%;
  padding: 0.5em 2em;
  margin-bottom: 1.25em;
  border-radius: 5px;
  border: none;
  background: #D9D9D9;
  font-family: "Noto Sans JP";
}

.tr-fc-form textarea {
  height: 320px;
}

.tr-fc-form p {
  text-align: right;
  font-family: "Noto sans JP";
}

.tr-fc-form button {
  text-align: center;
  width: 100%;
  height: 64px;
  background-color: #004A95;
  color: #FFF;
  font-family: "Noto sans JP";
  font-size: 2em;
  font-weight: 600;
  cursor: pointer;
}

#inquiry-list {
  width: 10%;
  vertical-align: sub;
}

@media (max-width: 600px) {
  .tr-form-title p {
    font-size: 0.75em;
  }
  .tr-fc-form label {
    width: 50%;
    margin-bottom: 0.5em;
  }
  .tr-fc-form input,
  .tr-fc-form textarea {
    width: 100%;
  }
  .tr-form-item-list {
    width: 100%;
  }
}

/* ES */

.es-hero {
  width: 100%;
  position: relative;
}

.es-hero video {
  width: 100%;
}

.es-hero p {
  position: absolute;
  top: 60%;
  left: 5%;
  font-family: "Noto sans JP";
  font-size: 5em;
  font-weight: 900;
  color: #fff;
  text-shadow: 0px 0px 15px var(--black, #1B1B1B);
}

.sponsor-slider {
  width: 100%;
}
.slide-content {
  width: 100px;
  height: 100px;
}

.slideshow {
  display: flex;
  align-items: baseline;
  gap: 1em;
  animation: loop-slide 20s infinite linear 1s both;
}

@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.slide-wrap {
  display: flex;
  gap: 1em;
  overflow: hidden;
}

.es-intro {
  width: 80%;
  margin: 144px auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.es-intro-main {
  font-family: "Noto Sans JP";
  font-size: 2.5em;
  font-weight: 900;
  line-height: 70px;
}

.es-intro-sub {
  font-family: "Noto Sans JP";
  font-size: 1em;
  font-weight: 900;
  line-height: 70px; 
}

.es-info {
  width: 80%;
  margin: 0 auto;
}

.es-info h2 {
  font-family: "Noto Sans JP";
  font-size: 2.5em;
  font-weight: 900;
  line-height: 40px; /* 100% */
  padding: 1em 0;
  text-align: center;
}

.es-slider {
  position:relative;
  z-index: 1;
  width: 100%;
  /* height: 100vh; */
}

.es-slider-item {
  width: 100%;
  /* height: 100vh; */
}

.es-slider-item img {
  object-fit: cover;
  width: 100%;
}

.es-slider-item p {
  color: var(--black, #1B1B1B);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 1.5em;
  font-weight: 700;
}

/*ドットナビゲーションの設定*/

.slide-dots {
  position: relative;
  z-index: 3;
  text-align:center;
  margin:-50px 0 0 0;/*ドットの位置*/
}

.slide-dots li {
  display:inline-block;
  margin:0 5px;
}

.slide-dots button {
  color: transparent;
  outline: none;
  width:16px;/*ドットボタンのサイズ*/
  height:16px;/*ドットボタンのサイズ*/
  display:block;
  border-radius:50%;
  background:#fff;/*ドットボタンの色*/
}

.slide-dots .slick-active button{
  background:#004A95;/*ドットボタンの現在地表示の色*/
}

@media (max-width: 1300px) {
  .slide-dots li{
    display: none;
  }
}

.es-member {
  width: 80%;
  margin: 144px auto;
}

.es-member h2 {
  font-family: "Noto Sans JP";
  font-size: 2.5em;
  font-weight: 900;
  line-height: 40px; /* 100% */
  padding: 1em 0;
  text-align: center;
}

.es-member-grid-container {
  display: grid;
  grid-gap: 1em;
  justify-content: center;
  align-items: center;
  grid-template:
    "area1 area1 area01 area01" 16.666667%
    "area1 area1 area2 area2" 16.666667%
    "area3 area3 area2 area2" 16.666667%
    "area3 area3 area4 area4" 16.666667%
    "area5 area5 area4 area4" 16.666667%
    "area5 area5 area02 area02" 16.666667% 
    / 25% 25% 25% 25%;
}

.es-member-item {
  background-image: url(../img/composing-331294_1920.jpg);
  position: relative;
  display: flex;
  justify-content: space-between;
  /* width: 100%; */
  height: 320px;
}

.es-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.es-member-item h3 {
  text-shadow: 0px 0px 15px var(--black, #1B1B1B);
  font-family: "Noto Sans JP";
  font-size: 5em;
  font-style: normal;
  font-weight: 900;
  color: #fff;
  position: absolute;
  left: 5%;
  top: 5%;
  z-index: 10;
}

.es-member-item img {
  position: absolute;
  right: 0%;
  bottom: 0%;
  z-index: 5;
}

.es-member-item-1 {
  grid-area: area1;
}

.es-member-item-2 {
  grid-area: area2;
}

.es-member-item-3 {
  grid-area: area3;
}

.es-member-item-4 {
  grid-area: area4;
}

.es-member-item-5 {
  grid-area: area5;
}

.es-member-item-6 {
  grid-area: area6;
}

.es-sponsor {
  width: 80%;
  margin: 144px auto;
}

.es-sponsor h2 {
  font-family: "Noto Sans JP";
  font-size: 2.5em;
  font-weight: 900;
  line-height: 40px; /* 100% */
  padding: 2em 0;
  text-align: center;
}

.es-sponsor-grid-container {
  display: grid;
  grid-template: 
    "area1 area2 area3 area4" 60%
    "area5 area6 area7 area8" 60%
    / 25% 25% 25% 25%;
  grid-gap: 1em;
  align-items: center;
  justify-content: center;
}

.es-sponsor-item {
  width: 100%;
  height: 100%;
  background-color: #D9D9D9;
}

.es-sponsor-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.es-sponsor-item-1{
  grid-area: area1;
}
.es-sponsor-item-2{
  grid-area: area2;
}
.es-sponsor-item-3{
  grid-area: area3;
}
.es-sponsor-item-4{
  grid-area: area4;
}
.es-sponsor-item-5{
  grid-area: area5;
}
.es-sponsor-item-6{
  grid-area: area6;
}
.es-sponsor-item-7{
  grid-area: area7;
}
.es-sponsor-item-8{
  grid-area: area8;
  background-color: #232D83;
  font-family: "Noto sans JP";
  color: #fff;
  font-size: 1.5em;
  font-weight: 700;
  text-align: right;
}

.es-recruit {
  width: 80%;
  margin: 144px auto;
}

.es-recruit h2 {
  font-family: "Noto Sans JP";
  font-size: 2.5em;
  font-weight: 900;
  line-height: 40px; /* 100% */
  padding: 1em 0;
  text-align: center;
}

.es-recruit-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1em;
  justify-content: center;
}

.es-recruit-item {
  position: relative;
  width: 100%;
  height: 150px;
}

.es-recruit-item p {
  position: absolute;
  top: 0%;
  left: 5%;
  color: #fff;
  font-family: "Noto sans JP";
  font-weight: 900;
  font-size: 2em;
  text-shadow: 0px 0px 15px var(--black, #1B1B1B);
}

.es-recruit-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.es-recruit-item-4 {
  width: 100%;
  height: 150px;
  background-color: #232D83;
  text-align: right;
  font-family: "Noto Sans JP";
  font-size: 1.5em;
  font-weight: 700;
}

#es-section-overlay-1,
#es-section-overlay-2,
#es-section-overlay-3,
#es-section-overlay-4,
#es-section-overlay-5,
#es-section-overlay-6 {
  position: fixed;
  top:0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  visibility: hidden;
  opacity: 0;
  background: rgba(0,0,0,0.6);
  transition: all 0.5s ease-out;
}

#es-section-overlay-1.overlay-on,
#es-section-overlay-2.overlay-on,
#es-section-overlay-3.overlay-on,
#es-section-overlay-4.overlay-on,
#es-section-overlay-5.overlay-on,
#es-section-overlay-6.overlay-on {
  visibility: visible;
  opacity: 1;
}

#es-overlay-inner-1,
#es-overlay-inner-2,
#es-overlay-inner-3,
#es-overlay-inner-4,
#es-overlay-inner-5,
#es-overlay-inner-6 {
  background-image: url(../img/composing-331294_1920.jpg);
  text-align: center;
  color: #FFF;
  font-family: "Noto sans JP";
  width: 70%;
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
}
#es-overlay-inner-1::after,
#es-overlay-inner-2::after,
#es-overlay-inner-3::after,
#es-overlay-inner-4::after,
#es-overlay-inner-5::after,
#es-overlay-inner-6::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(4, 0, 84, 0.866);
}

#es-overlay-inner-1 img,
#es-overlay-inner-2 img,
#es-overlay-inner-3 img,
#es-overlay-inner-4 img,
#es-overlay-inner-5 img,
#es-overlay-inner-6 img {
  z-index: 100;
  object-fit: cover;
}

.es-overlay-inner-text {
  text-align: left;
  padding: 3em;
  z-index: 10;
  font-family: "Noto sans JP";
}

.es-overlay-inner-text h4 {
  font-size: 1.5em;
  font-weight: 900;
}

.es-overlay-inner-text h3 {
  font-size: 3em;
  font-weight: 900;
}

.es-overlay-inner-text h5 {
  font-size: 1.5em;
  font-weight: 700;
}

.es-overlay-inner-text ul {
  padding: 1em 0;
}

.sns-container {
  display: flex;
  gap: 1em;
}

#es-section-overlay-7,
#es-section-overlay-8,
#es-section-overlay-9,
#es-section-overlay-10,
#es-section-overlay-11,
#es-section-overlay-12,
#es-section-overlay-13 {
  position: fixed;
  top:0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  visibility: hidden;
  opacity: 0;
  background: rgba(0,0,0,0.6);
  transition: all 0.5s ease-out;
}

#es-section-overlay-7.overlay-on,
#es-section-overlay-8.overlay-on,
#es-section-overlay-9.overlay-on,
#es-section-overlay-10.overlay-on,
#es-section-overlay-11.overlay-on,
#es-section-overlay-12.overlay-on,
#es-section-overlay-13.overlay-on {
  visibility: visible;
  opacity: 1;
}

#es-overlay-inner-7,
#es-overlay-inner-8,
#es-overlay-inner-9,
#es-overlay-inner-10,
#es-overlay-inner-11,
#es-overlay-inner-12,
#es-overlay-inner-13 {
  background-color: #D9D9D9;
  padding: 2em;
  text-align: center;
  color: #1B1B1B;
  font-family: "Noto sans JP";
  width: 50%;
}

#es-overlay-inner-7 img,
#es-overlay-inner-8 img,
#es-overlay-inner-9 img,
#es-overlay-inner-10 img,
#es-overlay-inner-11 img,
#es-overlay-inner-12 img,
#es-overlay-inner-13 img {
  width: 30%;
}

#es-overlay-inner-7 a,
#es-overlay-inner-8 a,
#es-overlay-inner-9 a,
#es-overlay-inner-10 a,
#es-overlay-inner-11 a,
#es-overlay-inner-12 a,
#es-overlay-inner-13 a {
  color: #232D83;
  text-decoration: underline;
}

@media (max-width: 1000px) {
  .es-hero {
    padding: 60px 0 0;
  }
  .slide-content {
    height: 50px;
  }
  .slide-content img {
    height: 100%;
  }
  .es-intro {
    flex-direction: column;
    margin: 0 auto;
  }
  .es-slider p {
    font-size: 1em;
  }
  .es-member {
    width: 90%;
    margin: 0 auto;
  }
  .es-member-grid-container {
    grid-template:
        "area1 area1 area01 area01" 10%
        "area1 area1 area2 area2" 14%
        "area3 area3 area2 area2" 10%
        "area3 area3 area4 area4" 14%
        "area5 area5 area4 area4" 10%
        "area5 area5 area02 area02" 14%
        / 20% 20% 20% 20%;
  }
  .es-member-item {
    height: 200px;
  }
  .es-member-item h3 {
    font-size: 2em;
  }
  .es-member-item img {
    height: 100%;
    object-fit: cover;
  }
  #es-overlay-inner-1, #es-overlay-inner-2, #es-overlay-inner-3, #es-overlay-inner-4, #es-overlay-inner-5, #es-overlay-inner-6 {
    width: 90%;
  }
  .es-overlay-inner-text ul {
    font-size: 0.8em;
  }
  .es-sponsor {
    width: 90%;
    margin: 0 auto;
  }
  .es-sponsor h2 {
    padding-top: 0;
    padding-bottom: 1em;
  }
  .es-sponsor-grid-container {
    grid-template:
        "area1 area2 area3 area4" 60%
        "area5 area6 area7 area8" 60% 
        / 22.5% 22.5% 22.5% 22.5%;
  }
  .es-sponsor-item-8 {
    font-size: 0.5em;
  }
  #es-overlay-inner-7, #es-overlay-inner-8, #es-overlay-inner-9, #es-overlay-inner-10, #es-overlay-inner-11, #es-overlay-inner-12, #es-overlay-inner-13 {
    width: 80%;
  }
  #es-overlay-inner-7 img, #es-overlay-inner-8 img, #es-overlay-inner-9 img, #es-overlay-inner-10 img, #es-overlay-inner-11 img, #es-overlay-inner-12 img, #es-overlay-inner-13 img {
    width: 60%;
  }
  #es-overlay-inner-7 p, #es-overlay-inner-8 p, #es-overlay-inner-9 p, #es-overlay-inner-10 p, #es-overlay-inner-11 p, #es-overlay-inner-12 p, #es-overlay-inner-13 p {
    font-size: 0.7em;
  }
  .es-recruit {
    width: 90%;
    margin: 64px auto;
  }
}

@media (max-width: 600px) {
  #es-overlay-inner-1, #es-overlay-inner-2, #es-overlay-inner-3, #es-overlay-inner-4, #es-overlay-inner-5, #es-overlay-inner-6 {
    width: 80%;
    flex-direction: column-reverse;
    justify-content: center;
  }
  .es-overlay-inner-text {
    padding: 1em;
  }
}

/* ES_SPONSOR */
.es-sp-title {
  width: 100%;
  height: 600px;
  background: url(../img/e-sports/es_fv.jpg);
  background-size: cover;
  background-position: center;
  position: relative;
}

.es-sp-title::before {
  content: '';
  background-color: rgba(0,0,0,.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.es-sp-title h1 {
  color: #FFF;
  font-family: "Noto sans JP";
  font-weight: 700;
  font-size: 4em;
  text-shadow: 0px 0px 15px var(--black, #1B1B1B);
  position: absolute;
  top: 25%;
  left: 10%;
}

.es-sp-section-1 {
  margin: 3em auto;
  font-family: "Noto Sans JP";
  font-size: 1.25em;
  font-weight: 500;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  gap: 2em;
}

.es-sp-section-2 {
  width: 100%;
  margin: 0 auto 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.es-sp-section-2 h2 {
  width: 90%;
  margin: 0 auto;
  padding-top: 2em;
  padding-bottom: 2em;
  font-family: "Noto Sans JP";
  font-size: 2em;
  font-style: normal;
  font-weight: 700;
  text-align: center;
}

.es-sp-grid-container-1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 72px;
  width: 80%;
}

.es-sp-grid-item {
  height: 480px;
  background-color: #d9d9d9;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.es-sp-grid-item h3 {
  font-family: "Noto sans JP";
  padding: 32px 0;
  text-align: center;
}

.es-sp-grid-item h3::after {
  content: "";
  display: block;
  width: 240px;
  height: 3px;
  margin: 32px auto 0;
  background-color: #CA9F2B;
}

.es-sp-grid-item img {
  width: 100px;
  height: 100px;
}

.es-sp-grid-item p {
  height: 200px;
  background-color: #004A95;
  position: absolute;
  left: 0;
  bottom: 0;
  color: #FFF;
  font-family: "Noto sans JP";
  font-size: 1em;
  text-align: justify;
  padding: 2em;
}

.es-sp-section-3 {
  width: 90%;
  margin: 0 auto 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.es-sp-section-3 h2 {
  font-family: "Noto Sans JP";
  font-size: 2em;
  font-weight: 700;
} 

.es-sp-section-3 p {
  padding-top: 1em;
  font-family: "Noto Sans JP";
  font-size: 1em;
  font-weight: 400;
  text-align: center;
}

.es-sp-section-3-1 {
  width: 100%;
  margin: 1.5em auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: 250px;
  gap: 1em;
  justify-content: center;
}

.es-sp-plan-item {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  color: #fff;
  font-family: "Noto sans JP";
  padding: 0.5em;
  font-size: 0.8em;
  height: 200px;
}

.es-sp-plan-item h3 {
  font-size: 3em;
}

.es-sp-plan-item ul li {
  font-family: "Noto sans JP";
}

.es-sp-plan-item-1 {
  background-color: #7088A0;
}
.es-sp-plan-item-2 {
  background-color: #3B6A9A;
}
.es-sp-plan-item-3 {
  background-color: #14589C;
}
.es-sp-plan-item-4 {
  background-color: #004A95;
}

.es-sp-form {
  width: 100%;
  padding-bottom: 96px;
  background:linear-gradient(to bottom, transparent 0%, #fff 100%), url(../img/aig-ai23717019-xl_TP_V.jpg);
  background-size: cover;
  background-position: center;
}

.es-form-title {
  width: 90%;
  margin: 0 auto;
  text-align: center;
  padding: 72px 0;
}

.es-form-title h2 {
  color: #FFF;
  font-family: "Noto sans JP";
  text-shadow: 0px 0px 15px var(--black, #1B1B1B);
  padding-bottom: 1em;
}

.es-form-title p {
  font-family: "Noto Sans JP";
  font-size: 1em;
  font-weight: 500;
  text-shadow: 0px 0px 15px var(--black, #1B1B1B);
  color: #FFF;
}

.es-sp-form form {
  width: 80%;
  margin: 0 auto;
}

.es-sp-form label {
  display: block;
  width: 30%;
  font-size: 1em;
  font-family: "Noto sans JP";
  color: #FFF;
  font-weight: 600;
  text-shadow: 0px 0px 15px var(--black, #1B1B1B);
}

.es-sp-form input,
.es-sp-form textarea {
  width: 80%;
  padding: 0.5em 2em;
  margin-bottom: 1.25em;
  border-radius: 5px;
  border: none;
  background: #D9D9D9;
  font-family: "Noto Sans JP";
}

.es-sp-form textarea {
  height: 320px;
}

.note {
  text-align: right;
  font-family: "Noto sans JP";
}

.es-sp-form button {
  text-align: center;
  width: 100%;
  height: 64px;
  background-color: #004A95;
  color: #FFF;
  font-family: "Noto sans JP";
  font-size: 2em;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 1000px) {
  .es-sp-section-1 {
    width: 90%;
    font-size: 0.8em;
  }
  .es-sp-section-3 p {
    font-size: 0.8em;
  }
  .es-sp-section-3-1 {
    grid-template-rows: repeat(auto-fit, 200px);
  }
  .es-form-title p {
    font-size: 0.8em;
  }
  .es-sp-form label {
    width: 50%;
  }
  .es-sp-form input, 
  .es-sp-form textarea {
    width: 100%;
  }
}

/* ES RECRUIT */
.es-re-title {
  width: 100%;
  height: 600px;
  background: url(../img/e-sports/es_fv.jpg);
  background-size: cover;
  background-position: center;
  position: relative;
}

.es-re-title::before {
  content: '';
  background-color: rgba(0,0,0,.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.es-re-title h1 {
  color: #FFF;
  font-family: "Noto sans JP";
  font-weight: 700;
  font-size: 4em;
  text-shadow: 0px 0px 15px var(--black, #1B1B1B);
  position: absolute;
  top: 40%;
  left: 10%;
}

.es-re-section-1 {
  margin: 3em;
  font-family: "Noto Sans JP";
  font-size: 1.25em;
  font-weight: 500;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  gap: 2em;
}

.es-re-section-1 p {
  font-size: 0.6em;
}

.es-re-section-2 {
  width: 80%;
  margin: 144px auto;
}

.es-re-section-item {
  position: relative;
  margin-top: 2em;
}

.es-re-section-item-2 h3, 
.es-re-section-item-4 h3 {
  position: absolute;
  bottom: 0%;
  right: 0%;
  padding: 0.25em;
  color: #fff;
  font-family: "Noto sans JP";
  font-size: 4em;
  font-weight: 900;
  text-shadow: 0px 0px 15px var(--black, #1B1B1B);
}
.es-re-section-item-1 h3, 
.es-re-section-item-3 h3 {
  position: absolute;
  top: 0%;
  left: 0%;
  padding: 0.25em;
  color: #fff;
  font-family: "Noto sans JP";
  font-size: 4em;
  font-weight: 900;
  text-shadow: 0px 0px 15px var(--black, #1B1B1B);
}

.es-re-section-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #ffffff66;
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  left: 0%;
  bottom: -10%;
  transition: 0.3s ease;
}

.es-re-section-item:hover::after {
  transform: scale(1, 1);
}

#es-section-overlay-14,
#es-section-overlay-15,
#es-section-overlay-16,
#es-section-overlay-17 {
  position: fixed;
  top:0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  visibility: hidden;
  opacity: 0;
  background: rgba(0,0,0,0.6);
  transition: all 0.5s ease-out;
}

#es-section-overlay-14.overlay-on,
#es-section-overlay-15.overlay-on,
#es-section-overlay-16.overlay-on,
#es-section-overlay-17.overlay-on {
  visibility: visible;
  opacity: 1;
}

#es-overlay-inner-14,
#es-overlay-inner-15,
#es-overlay-inner-16,
#es-overlay-inner-17 {
  background-color: #232D83;
  padding: 2em;
  color: #fff;
  font-family: "Noto sans JP";
  width: 50%;
}

#es-overlay-inner-14 h3,
#es-overlay-inner-15 h3,
#es-overlay-inner-16 h3,
#es-overlay-inner-17 h3 {
  font-size: 4em;
  font-weight: 900;
  text-shadow: 0px 0px 15px var(--black, #1B1B1B);
}

#es-overlay-inner-14 h4,
#es-overlay-inner-15 h4,
#es-overlay-inner-16 h4,
#es-overlay-inner-17 h4 {
  font-size: 2em;
  font-weight: 900;
  text-shadow: 0px 0px 15px var(--black, #1B1B1B);
  margin-bottom: 0.5em;
}

#es-overlay-inner-14 h5,
#es-overlay-inner-15 h5,
#es-overlay-inner-16 h5,
#es-overlay-inner-17 h5 {
  font-size: 1em;
}

#es-overlay-inner-14 ul,
#es-overlay-inner-15 ul,
#es-overlay-inner-16 ul,
#es-overlay-inner-17 ul {
  list-style: inside;
  padding-left: 1em;
}

.es-recruit-form {
  width: 100%;
  padding-bottom: 96px;
  background:linear-gradient(to bottom, transparent 0%, #fff 100%), url(../img/aig-ai23717019-xl_TP_V.jpg);
  background-size: cover;
  background-position: center;
}

.es-recruit-form form {
  width: 80%;
  margin: 0 auto;
}

.es-recruit-form label {
  display: block;
  width: 30%;
  font-size: 1em;
  font-family: "Noto sans JP";
  color: #FFF;
  font-weight: 600;
  text-shadow: 0px 0px 15px var(--black, #1B1B1B);
}

.es-recruit-form input,
.es-recruit-form textarea {
  width: 80%;
  padding: 0.5em 2em;
  margin-bottom: 1.25em;
  border-radius: 5px;
  border: none;
  background: #D9D9D9;
  font-family: "Noto Sans JP";
}

input[type="radio"] {
  width: 24px;
  height: 24px;
}

.es-form-item-list {
  width: 80%;
  display: inline-block;
  font-family: "Noto sans JP";
}

.es-recruit-form textarea {
  height: 320px;
}

.es-recruit-form p {
  text-align: right;
  font-family: "Noto sans JP";
}

.es-recruit-form button {
  text-align: center;
  width: 100%;
  height: 64px;
  background-color: #004A95;
  color: #FFF;
  font-family: "Noto sans JP";
  font-size: 2em;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 1000px) {
  .es-re-section-2 {
    width: 90%;
    margin: 96px auto;
  }
  .es-re-section-item h3 {
    font-size: 3em;
    padding: 0.1em;
  }
  #es-overlay-inner-14, 
  #es-overlay-inner-15, 
  #es-overlay-inner-16, 
  #es-overlay-inner-17 {
    width: 85%;
  }
  #es-overlay-inner-14 ul, 
  #es-overlay-inner-15 ul, 
  #es-overlay-inner-16 ul, 
  #es-overlay-inner-17 ul {
    font-size: 0.6em;
  }
  .es-recruit-form label {
    width: 50%;
  }
  .es-recruit-form input, 
  .es-recruit-form textarea {
    width: 100%;
  }
  .es-form-item-list {
    font-size: 0.8em;
    width: 100%;
  }
}

/* DS */

.ds-grid-container {
  width: 90%;
  margin: 0 auto;
  padding: 192px 0;
  display: grid;
  grid-gap: 1em;
  justify-content: center;
  align-self: center;
  grid-template:
    "area1 area1 area2 area2" 12.5%
    "area1 area1 area3 area4" 12.5%
    "area5 area6 area7 area8" 12.5%
    "area9 area9 area11 area11" 12.5%
    "area10 area10 area11 area11" 12.5%
    "area12 area13 area13 area14" 12.5%
    "area12 area13 area13 area15" 12.5%
    "area16 area17 area18 area19" 12.5%
      / 25% 25% 25% 25%;
}

@media (max-width: 1000px) {
  .ds-grid-container {
    grid-template: 
    "area2 area2" 5%
    "area1 area1" 5%
    "area1 area1" 5%
    "area3 area3" 5%
    "area4 area4" 5%
    "area5 area6" 7.5%
    "area7 area8" 7.5%
    "area9 area9" 5%
    "area11 area11" 5%
    "area11 area11" 5%
    "area10 area10" 7.5%
    "area12 area14" 5%
    "area12 area15" 5%
    "area16 area17" 5%
    "area13 area13" 5%
    "area13 area13" 5%
    "area18 area19" 5%
    / 50% 50%;
  }
}

.ds-grid-item-1 {
  grid-area: area1;
  background-color: #484848;
}
.ds-grid-item-1 video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ds-grid-item-2 {
  grid-area: area2;
  background-color: #004A95;
  padding: 1em;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.ds-grid-item-2 p {
  font-family: "Anton";
  color: #FFF;
  font-size: 1.5em;
}
.ds-grid-item-2 img {
  width: 230px;
  height: 230px;
  filter: brightness(100);
}
.ds-grid-item-3 {
  grid-area: area3;
  background-color: #484848;
  padding: 1em;
  color: #FFF;
  font-family: "Noto sans JP";
}
.ds-grid-item-4 {
  grid-area: area4;
  position: relative;
}
.ds-grid-item-5 {
  grid-area: area5;
  background-color: #004A95;
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}
.ds-grid-item-5 img {
  width: 152px;
  height: 37px;
  object-fit: cover;
}
.ds-grid-item-5 p {
  font-family: "Anton";
  color: #fff;
}
.ds-grid-item-6 {
  grid-area: area6;
  background-color: #484848;
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}
.ds-grid-item-7 {
  grid-area: area7;
  background-color: #484848;
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}
.ds-grid-item-8 {
  grid-area: area8;
  background-color: #484848;
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}
.ds-grid-item-6 h2,
.ds-grid-item-7 h2,
.ds-grid-item-8 h2 {
  font-family: "Anton";
  color: #FFF;
  font-size: 2em;
  font-weight: 500;
}
.ds-grid-item-6 p,
.ds-grid-item-7 p,
.ds-grid-item-8 p {
  font-family: "Noto sans JP";
  font-size: 1em;
  color: #FFF;
}
.ds-grid-item-9 {
  grid-area: area9;
  position: relative;
}
.ds-grid-item-10 {
  grid-area: area10;
  background-color: #004A95;
  position: relative;
}
.ds-grid-item-10 a {
  height: 100%;
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}
.ds-grid-item-10 h2 {
  font-family: "Anton";
  font-size: 2.5em;
  color: #FFF;
  font-weight: 500;
}
.ds-grid-item-10 p {
  font-family: "Anton";
  font-size: 2em;
  font-weight: 500;
  color: #FFF;
  text-align: right;
}
.ds-grid-item-11 {
  grid-area: area11;
  position: relative;
}
.ds-grid-item-12 {
  grid-area: area12;
  position: relative;
}
.ds-grid-item-13 {
  grid-area: area13;
  position: relative;
}
.ds-grid-item-14 {
  grid-area: area14;
  background-color: #484848;
  position: relative;
}
.ds-grid-item-14 a{
  height: 100%;
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}
.ds-grid-item-14 h2{
  font-family: "Anton";
  font-size: 2em;
  font-weight: 500;
  color: #fff;
}
.ds-grid-item-14 p {
  font-family: "Noto sans JP";
  font-size: 0.85em;
  font-weight: 600;
  color: #fff;
  text-align: right;
}
.ds-grid-item-15 {
  grid-area: area15;
  background-color: #004A95;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  position: relative;
}
.ds-grid-item-15-btn {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  position: relative;
  padding: 1em;
  height: 100%;
}
.ds-grid-item-15-btn h2 {
  font-family: "Anton";
  font-size: 2.5em;
  font-weight: 500;
  color: #fff;
  text-align: left;
}
.ds-grid-item-15-btn p {
  font-family: "Noto sans JP";
  font-size: 1em;
  font-weight: 600;
  color: #fff;
  text-align: right;
}
.ds-grid-item-16 {
  grid-area: area16;
  position: relative;
}
.ds-grid-item-17 {
  grid-area: area17;
  position: relative;
}
.ds-grid-item-18 {
  grid-area: area18;
  position: relative;
}
.ds-grid-item-19 {
  grid-area: area19;
  position: relative;
}

.ds-grid-item-4:after,
.ds-grid-item-9:after,
.ds-grid-item-10 a:after,
.ds-grid-item-11:after,
.ds-grid-item-12:after,
.ds-grid-item-13:after,
.ds-grid-item-14 a:after,
.ds-grid-item-15:after,
.ds-grid-item-16:after,
.ds-grid-item-17:after,
.ds-grid-item-18:after,
.ds-grid-item-19:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #ffffff66;
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  left: 0%;
  bottom: -10%;
  transition: 0.3s ease;
}
.ds-grid-item-4:hover::after,
.ds-grid-item-9:hover::after,
.ds-grid-item-10 a:hover::after,
.ds-grid-item-11:hover::after,
.ds-grid-item-12:hover::after,
.ds-grid-item-13:hover::after,
.ds-grid-item-14 a:hover::after,
.ds-grid-item-15:hover::after, 
.ds-grid-item-16:hover::after, 
.ds-grid-item-17:hover::after, 
.ds-grid-item-18:hover::after, 
.ds-grid-item-19:hover::after {
  transform: scale(1, 1);
}

.square-img,
.rectangle-img-beside,
.rectangle-img-vertical {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#ds-section-overlay-1,
#ds-section-overlay-2,
#ds-section-overlay-3,
#ds-section-overlay-4,
#ds-section-overlay-5,
#ds-section-overlay-6,
#ds-section-overlay-7,
#ds-section-overlay-8,
#ds-section-overlay-9,
#ds-section-overlay-10 {
  position: fixed;
  top:0;
  left: 0;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  visibility: hidden;
  opacity: 0;
  background: rgba(0,0,0,0.9);
  transition: all 0.5s ease-out;
}

#ds-section-overlay-1.overlay-on,
#ds-section-overlay-2.overlay-on,
#ds-section-overlay-3.overlay-on,
#ds-section-overlay-4.overlay-on,
#ds-section-overlay-5.overlay-on,
#ds-section-overlay-6.overlay-on,
#ds-section-overlay-7.overlay-on,
#ds-section-overlay-8.overlay-on,
#ds-section-overlay-9.overlay-on,
#ds-section-overlay-10.overlay-on {
  visibility: visible;
  opacity: 1;
}

#ds-overlay-inner-1,
#ds-overlay-inner-2,
#ds-overlay-inner-3,
#ds-overlay-inner-5,
#ds-overlay-inner-6,
#ds-overlay-inner-7,
#ds-overlay-inner-8,
#ds-overlay-inner-9 {
  width: 60%;
  text-align: center;
}

#ds-overlay-inner-10 {
  background-color: #004A95;
  text-align: center;
  color: #FFF;
  font-family: "Noto sans JP";
  width: 70%;
  padding: 40px;
  position: relative;
}

#ds-overlay-inner-10 h2 {
  padding-bottom: 30px;
}

#ds-overlay-inner-10 h2::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  margin: 32px auto 0;
  background-color: #CA9F2B;
}

#ds-overlay-inner-4 {
  width: 25%;
}

#ds-overlay-inner-1 p,
#ds-overlay-inner-2 p,
#ds-overlay-inner-3 p,
#ds-overlay-inner-4 p,
#ds-overlay-inner-5 p,
#ds-overlay-inner-6 p,
#ds-overlay-inner-7 p,
#ds-overlay-inner-8 p,
#ds-overlay-inner-9 p {
  font-family: "Noto sans JP";
  font-weight: 600;
  color: #fff;
  padding-top: 1em;
}


@media (max-width: 1000px) {
    #ds-overlay-inner-1,
    #ds-overlay-inner-2,
    #ds-overlay-inner-3,
    #ds-overlay-inner-5,
    #ds-overlay-inner-6,
    #ds-overlay-inner-7,
    #ds-overlay-inner-8,
    #ds-overlay-inner-9 {
    width: 90%;
  }
  #ds-overlay-inner-4 {
    width: 50%;
  }
}

@media (max-width: 600px) {
  .ds-grid-item-3 p,
  .ds-grid-item-5 p,
  .ds-grid-item-6 p,
  .ds-grid-item-7 p,
  .ds-grid-item-8 p {
    font-size: 0.75em;
  }
  .overlay-text-container {
    font-size: 0.6em;
  }
}

/* ds-terms */
.ds-terms-main {
  width: 80%;
  margin: 0 auto;
  padding: 192px 0;
  font-family: "Noto sans JP";
}
.ds-terms-main h1 {
  text-align: center;
  padding-bottom: 2em;
}
.ds-terms-main h1::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  margin: 32px auto 0;
  background-color: #CA9F2B;
}


/* .background-img-ds {
  background: url(../img/composing-331294_1920.jpg);
  filter: brightness(300%) contrast(75%);
  position: fixed;
  width: 100vw;
  height: 100vw;
}

.container-ds {
  position: relative;
  display: flex;
  flex-direction: column;
}

.design-section {
  width: 100%;
  height: 350vw;
  position: relative;
}

.main-content-wrapper-ds {
  width: 80%;
  position: absolute;
  left: 10%;
  top: 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  gap: 2em;
}

.design-header {
  font-size: 5em;
  margin-bottom: 20px;
  color: #484848;
  font-family: 'Anton', sans-serif;
}

.design-subheader {
  font-size: 2em;
  margin-bottom: 40px;
  color: rgba(72, 72, 72, 0.75);
  font-family: 'Anton', sans-serif;
  margin: 0 auto;
}

.design-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.design-item {
  background: #D9D9D9;
  box-shadow:  0px 0px 15px -5px #777777;
  border-radius: 1em;
  color: white;
}

.design-item img {
  width: 100%;
  border-radius: 1em 1em 0 0;
  margin-bottom: 20px;
}

.design-item video {
  width: 100%;
  border-radius: 1em 1em 0 0;
  
}

.design-text {
  text-align: left;
  padding: 0.75em;
}

.design-text h3 {
  font-size: 2em;
  margin-bottom: 10px;
  color: #484848;
  font-family: Anton;
  font-weight: 400;
}

.design-text p {
  font-size: 1em;
  font-family: "Noto Sans JP";
  font-weight: 500;
  margin-bottom: 10px;
  color: #484848;
} */

/* CO */

.sidebar-logo-2 {
  width: 50%;
  height: 20%;
  left: 25%;
  top: 25%;
  position: absolute;
}

.sidebar-logo-3 {
  width: 50%;
  height: 20%;
  left: 25%;
  top: 45%;
  position: absolute;
}

.main-content-wrapper-co {
  height: 70vw;
  position: relative;
}

.contact-form {
  position: absolute;
  left: 20%;
  top: 10%;
  width: 60%;
  margin: 0 auto;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  color: white;
}

.contact-form .form-header {
  font-family: Anton;
  font-size: 2em;
  text-align: center;
  margin-bottom: 20px;
}

.contact-form label {
  display: block;
  margin-bottom: 10px;
  font-size: 1.2em;
  font-family: Anton;
  display: flex;
  align-items: flex-end;
  gap: 1em;
}

.contact-form label span {
  display: block;
  font-size: 0.8em;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.5em 2em;
  margin-bottom: 1.25em;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.8);
  font-family: "Noto Sans JP";
}

.contact-form input::placeholder,
.contact-form textarea::placeholder,
.contact-form select {
  font-family: "Noto Sans JP";
  color: #fff;
}

.contact-form select{
  padding: 0.5em 2em;
  margin-bottom: 1.25em;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.8);
}

.contact-form option {
  background-color: #484848;
}

.contact-form textarea {
  height: 300px;
  resize: none;
  color: #FFF;
}

.contact-form button.submit-button {
  width: 100%;
  padding: 10px;
  background: #004A95;
  color: white;
  font-size: 1.5em;
  font-family: Anton;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.contact-form button.submit-button:hover {
  background: #004A95;
}

.wrapped-inquiry {
  white-space: pre-wrap; /* Preserve line breaks */
  word-wrap: break-word; /* Ensure long words are wrapped */
}

.confirm form p {
  padding: 1em 0;
}

.send-button,
.back-button {
  margin: 1em 0;
}

.contact-form button.back-button {
  background-color: #484848;
}

.contact-form button.back-button:hover {
  background: #262626;
}

/* PR */

.main-content-pr {
  height: 100vw;
  position: relative;
}

.main-content-wrapper-pr {
  width: 80%;
  position: absolute;
  left: 10%;
  top: 15%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
}

.page-title-pr{
  color: #FFF;
  font-family: "Noto sans JP";
  font-weight: 900;
  font-size: 3em;
}

.text-section-pr {
  background-color: rgba(0, 0, 0, 0.5);
}

.privacy-table tr {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.privacy-table th {
  padding: 0.25em;
  color: #FFF;
  font-family: "Noto Sans JP";
  text-align: left;
  font-weight: 700;
}

.privacy-table td {
  text-align: left;
  width: 100%;
  padding: 1em;
  color: #FFF;
  font-family: "Noto Sans JP";
  font-weight: 500;
}

.privacy-table td ul {
  padding: 0.5em;
}


/* レスポンシブスタイル */
@media (max-width: 600px) {

  /* 下層ページ共通 */
  .sidebar {
    width: 100%;
    height: 10%;
    position: fixed;
    flex-direction: row;
    align-items: flex-start;
  }

  .sidebar-menu,
  .header-menu {
    display: none;
  }

  .sidebar-logo {
    width: 20%;
    position: absolute;
    top: 0%;
    left: 0%;
  }

  .footer {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
  }

  .footer-section-3 {
    display: flex;
    flex-direction: column;
  }

  .footer-menu,
  .footer-company-details {
    font-size: 0.75em;
  }

  

  /* AB */
  .container-ab {
    background-image: url(../img/e-commerce-8656646_1920.jpg);
    background-position: center;
    background-size: cover;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  .main-content-ab {
    background-color: rgba(0, 0, 0, 0.75);
    width: 100%;
    height: 650vw;
  }

  .main-content-wrapper-ab {
    width: 90%;
    left: 10%;
    top: 5%;
  }

  .philosophy-title {
    font-size: 2.2em;
  }

  .philosophy-subtitle {
    font-size: 1.2em;
  }

  .business-section-container {
    display: grid;
    grid-template-columns: 1fr;
  }

  .business-section {
    margin: 10px 0; /* セクション同士の間隔を調整 */
    padding: 10px; /* セクション内の余白を調整 */
  }

  .business-description {
    font-size: 0.9em; /* フォントサイズを調整 */
  }

  /* OV */
  .container-ov {
    background-image: url(../img/e-commerce-8656646_1920.jpg);
    background-position: center;
    background-size: cover;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  .main-content-ov {
    width: 100%;
    height: 400vw;
    position: relative;
    background-color: rgba(0, 0, 0, 0.75);
  }

  .main-content-wrapper-ov{
    width: 90%;
    position: absolute;
    left: 5%;
    top: 10%;
  }

  table.company-info th, table.company-info td {
    padding: 2em 0.5em;
    color: #FFF;
    font-family: "Noto Sans JP";
  }

  table.company-info th {
    width: 30%;
  }

  /* TR */
  .container-tr {
    background-image: url(../img/e-commerce-8656646_1920.jpg);
    background-position: center;
    background-size: cover;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  .main-content-tr {
    width: 100%;
    height: 1500vw;
    position: relative;
    background-color: rgba(0, 0, 0, 0.75);
  }

  .main-content-wrapper-tr {
    width: 90%;
    position: absolute;
    left: 5%;
    top: 2%;
  }

  .header-logo {
    font-size: 3em;
  }

  .transport-description {
    font-size: 0.8em;
  }

  .transport-item ol {
    margin-top: 0.8em;
  }
  .transport-item ol li {
    font-size: 0.8em;
    font-weight: 300;
  }

  .transport-item ul {
    margin-top: 0.8em;
  }

  .transport-item ul li {
    font-size: 0.8em;
    font-weight: 300;
  }

  .category-img {
    width: 30%;
  }

  /* ES */

  .container-es {
    background-image: url(../img/graph_04.jpg);
    background-position: center;
    background-size: cover;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  .main-content-es {
    width: 100%;
    height: 1000vw;
    background-color: rgba(0, 0, 0, 0.75);
  }

  .main-content-wrapper-es {
    width: 90%;
    position: absolute;
    left: 5%;
    top: 2%;
  }

  .main-text {
    color: white;
    font-family: 'Noto Sans JP';
    font-weight: 700;
    font-size: 20px;
    padding: 1em 0;
  }
  
  .main-text.large-text {
    font-size: 40px;
    font-weight: 900;
  }

  .member-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .member-item {
    width: 100%;
    color: white;
    font-family: 'Anton';
    text-align: center;
    position: relative;
  }

  .sponsor-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .sponsor-item {
    width: 100%;
  }

  .recruit-item h3 {
    font-size: 1.75em;
    color: #484848;
    text-align: center;
    background: rgba(255, 255, 255, 0.75);
    padding: 0.5em;
  }

  /* DS */

  .sidebar-ds {
    width: 100%;
    height: 10%;
  }

  .background-img-ds {
    height: 1000vw;
  }

  .design-section {
    width: 100%;
    height: 900vw;
    position: relative;
  }

  .main-content-wrapper-ds {
    width: 90%;
    position: absolute;
    left: 5%;
    top: 5%;
  }

  .design-header {
    font-size: 5em;
    margin-bottom: 20px;
    color: #484848;
    font-family: 'Anton', sans-serif;
  }

  /* CO */

  .sidebar-logo-2,
  .sidebar-logo-3 {
    display: none;
  }

  .main-content-wrapper-co {
    height: 220vw;
    position: relative;
    background-color: rgba(0, 0, 0, 0.75);
  }

  .contact-form {
    position: absolute;
    left: 5%;
    top: 10%;
    width: 90%;
  }

  /* PR */

  .main-content-pr {
    width: 100%;
    height: 400vw;
    background-color: rgba(0, 0, 0, 0.75);
  }

  .main-content-wrapper-pr {
    width: 90%;
    position: absolute;
    left: 5%;
    top: 10%;
  }

  .page-title-pr {
    font-size: 2em;
    padding-bottom: 1em;
  }
}

/* 
@media (max-width: 480px) {
  .project-title {
    width: 90%;
    max-width: none;
  }

  .text-item {
    font-size: 1em;
  }

  .vertical-text-section.left,
  .vertical-text-section.right {
    font-size: 0.6em;
  }

  .footer-text {
    font-size: 0.6em;
  }
} */