@media (min-width: 769px) {

    /*section{
      min-width: 1200px;
    }*/

  }


  /* scroll animation */
  .inview_fade {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .inview_fade.inview {
    opacity: 1;
    transform: translateY(0);
  }




  /* ========================================================================================== */
  /* main slider */
  .heroImage img{
    width: 100%;
    height: auto;
  }


  .mainVi {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 40.625%; /* PC: 780 / 1920 = 40.625% */
    overflow: hidden;
  }
  @media (max-width: 768px) {
    .mainVi {
      padding-top: 100%; /* SP: 1:1 */
    }
  }
  
  .slider-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .slider-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 0;
  }
  
  .slider-img.current {
    opacity: 1;
    z-index: 1;
  }
  
  .slider-img.next {
    z-index: 2;
  }
  

  /* slide indicator design */
  .heroImage .indicatorVi{
    background: #eef2fc;
    display: flex;
    justify-content: space-between;
    padding: 8px;
  }

  .heroImage .indicatorVi li{
    position: relative;
    width: 19.6%;
    background: #fff;
    display: flex;
    align-items: center;
    border: 4px solid transparent;
    box-shadow: 0 0px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: .3s;
  }

  .heroImage .indicatorVi li.slide-active{
    border-color: #1976D2;
  }
  .heroImage .indicatorVi li.slide-active::before {
    content: "";
    position: absolute;
    top: -14px; /* メニューの上に配置 */
    left: 50%;
    transform: translateX(-50%);
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 14px solid #1976D2; /* ←色の指定 */
    transition: .3s;
    z-index: 100;
  }


  .heroImage .indicatorVi li p{
    margin: 0 auto;
    padding: 0 8px;
    font-size: 14px;
    font-weight: 600;
    transition: .3s;
    white-space: nowrap;      /* 折り返さない */
    overflow: hidden;         /* はみ出た部分を隠す */
    text-overflow: ellipsis;  /* 省略記号「...」を表示 */
  }
  .heroImage .indicatorVi li img{
    max-width: 80px;
  }
  .heroImage .indicatorVi li.slide-active p{
    color: #1976D2;
  }


  /* フェードアニメーション */
  .heroImage img.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .heroImage img.fade-in {
    opacity: 1;
    transition: opacity 0.4s ease;
  }


  /* media query Dp */
  @media (min-width: 769px) {

    .heroImage .indicatorVi li:hover{
      transform: scale(1.02);
      opacity: .7;
    }  

  }

  /* media query rs */
  @media (max-width: 768px) {

    .heroImage .indicatorVi{ padding: 4px; }
    .heroImage .indicatorVi li{ width: 20%; background: transparent; box-shadow: none; aspect-ratio: 1/1; }
    .heroImage .indicatorVi li img{ max-width: initial; }
    .heroImage .indicatorVi li p{ display: none; }

    .heroImage .indicatorVi li.slide-active::before{ display: none; }

  }




  /* ========================================================================================== */
  /* productList */ 


  .productList{
    background: url(../images/effects/background_circle.png)no-repeat;
    background-size: contain;
    position: relative;
    overflow: hidden;
  }

  .productList .inner{
    width: 95%;
    max-width: 1366px;
    margin: 10% auto 5%;
    padding: 0;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 20;
  }

  .productList .productBox{
    width: 49.3%;
    padding: 24px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 0px 8px rgba(0, 0, 0, 0.2);
  }


  .productList .productBox img{ 
    width: 30%;
    position: relative;
    z-index: 10;
    filter: drop-shadow(0 0px 12px rgba(64, 65, 70, 0.2));
  }

  .productList .productBox .text_box{ 
    width: 70%;
    padding-left: 36px;
    margin-top: 32px;
    position: relative;
    z-index: 15;
  }

  .productList .productBox small{ font-size: 18px; color: #222; }
  .productList .productBox h2{ font-size: 54px; }

  .productList .productBox .viewmore{ margin-top: 48px; text-align: right; }


  /* pachinko area */
  .productList .productBox.pachinko{ border: 4px solid #1976D2; }
  .productList .productBox.pachinko h2{ color: #1976D2; }

  /* pachislot area */
  .productList .productBox.pachislot{ border: 4px solid #9A60D5; }
  .productList .productBox.pachislot h2{ color: #9A60D5; }
  .productList .productBox.pachislot .more-linkbtn02{ color: #9A60D5; border-color: #9A60D5; }
  .productList .productBox.pachislot .more-linkbtn02::before{ background: #9A60D5; }




  /* media query Dp */
  @media (min-width: 769px) {


    .productList .productBox::after{
      content: '';
      width: 100%;
      height: 100%;
      background: url(../images/latticePattern.png);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 6;
    }

    /* hover action */
    .productList .productBox {
      transition: transform 0.5s ease, opacity 0.5s ease;
      transform: scale(1);
      z-index: 0;
    }
    .productList .inner:hover .productBox {
      transform: scale(1);
    }
    .productList .inner:hover .productBox:hover {
      transform: scale(1.03);
      z-index: 2;
    }


    /* Radial hover action */
    .productBox::before {
      content: '';
      position: absolute;
      top: var(--mouse-y, 50%);
      left: var(--mouse-x, 50%);
      width: 0;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      transition: width 0.5s ease, opacity 0.5s ease;
      z-index: 5;
    }
    .productBox:hover::before {
      width: 250%;
      opacity: 1;
    }

    .productList .productBox img{ transition: 0.5s ease; }
    .productList .productBox:hover img{ opacity: .6; transform: scale(1.05); }

    .productList .productBox small,
    .productList .productBox h2{ transition: 0.5s ease; }
    .productList .productBox:hover h2{ color: #fff; }
    .productList .productBox:hover small{ color: #fff; }

    .productList .productBox .more-linkbtn02,
    .productList .productBox .more-linkbtn02::before,
    .productList .productBox .more-linkbtn02::after{ transition: 0.5s; }
    .productList .productBox:hover .more-linkbtn02{ color: #fff; border-color: #fff; }

    /* pachinko area */
    .productBox.pachinko::before{
      background: radial-gradient(circle, #1976d2 0%, #1976d2 60%);
    }
    .productList .productBox.pachinko:hover .more-linkbtn02::after{ color: #1976d2; }
    .productList .productBox.pachinko:hover .more-linkbtn02::before{ background: #fff; }

    /* pachislot area */
    .productBox.pachislot::before{
      background: radial-gradient(circle, #9A60D5 0%, #9A60D5 60%);
    }
    .productList .productBox.pachislot:hover .more-linkbtn02::after{ color: #9A60D5; }
    .productList .productBox.pachislot:hover .more-linkbtn02::before{ background: #fff; }


    .productBox:hover .more-linkbtn01::before,
    .productBox:hover .more-linkbtn01::after,
    .productBox:hover .more-linkbtn02::before,
    .productBox:hover .more-linkbtn02::after{
      transform: scale(1.2);
    }

  }


  /* media query rs */
  @media (max-width: 768px) {

      /* scroll animation */
      .productList .inner.inview_fade {
        opacity: 1;
        transform: translateY(0);
      }

    .productList .inner{ flex-direction: column; padding: 28px 12px; }
    .productList .productBox{ width: 100%; padding: 18px; margin-bottom: 12px; }

    .productList .productBox .text_box{ padding-left: 24px; }
    .productList .productBox small{ font-size: 14px; }
    .productList .productBox h2{ font-size: 28px; }

  }



/* ========================================================================================== */
/* news-section */


.news-section {
  background: #eef3fe;
  padding: 0 0 60px;
  border-radius: 0 0 40px 40px;
  position: relative;
}
.news-section::before{
  content: '';
  width: 100%;
  height: 90px;
  background: #fff;
  border-radius: 0 0 40px 40px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}


.news-container {
  width: 95%;
  max-width: 1366px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.news-list {
  max-width: 1180px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

.news-list li {
  margin-bottom: 12px;
}


/* aタグ全体をブロック要素にし、クリック範囲を広げる */
.news-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding: 18px;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0,0,0,0.1);
  text-decoration: none;
  color: inherit;
  font-size: 16px;
  transition: 0.3s;
  position: relative;
}
.news-list li a::after{
  content: '\f061';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  font-size: 14px;
  color: #1976D2;
  z-index: 10;
  transition: 0.3s;
}

@media (min-width: 769px) and (hover: hover) {

  .news-list li a:hover {
    border: 2px solid #1976D2;
    transform: scale(1.02);
  }
  .news-list li a:hover::after{
    right: 12px;
  }
  
}

.news-date {
  min-width: 80px;
  color: #989898;
}

.news-label {
  width: 120px;
  padding: 6px 12px;
  border-radius: 4px;
  border: 2px solid #1976d2;
  color: #fff;
  text-align: center;
  font-size: 14px;
}
.news-label.new {
  background: #1976d2;
}
.news-label.group {
  background: #fff;
  font-weight: 600;
  color: #0b4b93;
  border-color: #0b4b93;
}

/* test用CSS===================================- */
.news-label.group {
  background: #fff;
  font-weight: 600;
  color: #0b4b93;
  border-color: #0b4b93;
}


.news-label.pachinko {
    background: #1976d2;
    font-weight: 600;
    color: #fff;
    border-color: #1976d2;
}


.news-label.pachislot{
    background: #7C19D2;
    font-weight: 600;
    color: #fff;
    border-color: #7C19D2;
}



/* test===================================- */

.news-text {
  flex: 1;
  color: #444;
  min-width: 200px;
}

.news-viewmore{
  max-width: 1180px;
  margin: 36px auto 0;
  text-align: right;
}


/* scroll animation */
.news-list li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.news-list li.inview {
  opacity: 1;
  transform: translateY(0);
}


/* media query rs */
@media (max-width: 768px) {
  
  .news-section{ border-radius: 0 0 24px 24px; padding-bottom: 36px; }
  .news-section::before{ border-radius: 0 0 24px 24px; top: -4%; }

  .news-section .headTitle{ padding: 0 24px; margin-bottom: 0; }

  .news-list{ padding: 24px; }
  .news-list li{ margin-bottom: 8px; }
  .news-list li a::after{ right: 7px; }
  .news-list li a{ padding: 12px; padding-right: 18px; justify-content: flex-start; gap: 8px; }
  .news-label{ font-size: 12px; width: 80px; padding: 2px 4px; }
  .news-text{ font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .news-viewmore{ padding: 0 24px; margin-top: 0; }

}




/* ========================================================================================== */
/* youtube-section */


.youtube-section{
  padding: 36px 0;
  margin: 5% 0;
}

.youtube-section .headTitle{
  max-width: 1366px;
  margin: 0 auto 64px;
  padding: 0 24px;
}

#youtubeChannel_contents{
  position: relative;
  text-align: center;
}

#youtubeChannel_contents #yt-iframe {
  width: 816px;
  margin: 0 auto;
  border-radius: 12px;
  z-index: 10;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}


#youtubeChannel_contents #yt-iframe .box {
  background: #fff;
  position: relative;
  z-index: 2;
  vertical-align: bottom;
  overflow: hidden;
  border-radius: 12px;
  border: 6px solid #1976D2;
  -webkit-box-shadow: 0px 0px 24px rgba(0,0,0,.25);
  box-shadow: 0px 0px 24px rgba(0,0,0,.25);
}

#youtubeChannel_contents #yt-iframe iframe{
  vertical-align: bottom;
}

.modal-box.mdl_youtube::before{
  content: '';
  background: url(../images/movie_icon.png)no-repeat;
  width: 168px;
  height: 191px;
  position: absolute;
  bottom: 24px;
  left: 24px;
  opacity: .5;
}

.modal-box.mdl_youtube p{
  margin-bottom: 42px;
}



.YC_bg{
  width: 100%;
  height: 320px;
  background-size: auto auto;
  background-size: cover;
  background-image: url(../images/film_loop.png);
}
.YC_bg{ animation: anime_stripe_1 50s infinite linear; }
@keyframes anime_stripe_1 {
  0% {  background-position-x: 0;}
  100% {  background-position-x: -1555px;}
}


.loop-wrap{
  display: flex;
  display: -webkit-flex;
  width: auto;
  overflow: hidden;
}


/* テキストのループアニメーション */
.loop-wrap img:last-child{
  margin-left: 36px;
}

.loop-wrap.top img {
  animation :loop1 50s infinite linear 0.5s both;
}
@keyframes loop1 {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}

.loop-wrap.bottom img {
  animation :loop2 50s infinite linear 0.5s both;
}
@keyframes loop2 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}



#group-company .btn-recruit a{ font-size: 2rem; border: 2px solid #EBBB73; box-shadow: none; }
#group-company .btn-recruit a::before{
  background: #EBBB73;
}
#group-company .btn-recruit a:hover{
  color: #EBBB73;
}


@media screen and (max-width: 1020px) {
  .renewal_new_titleH2{ font-size: 2.8rem; }
}


@media screen and (max-width: 768px) {
  .YC_bg{ height: 180px; }

  .renewal_new_titleH2{ margin-bottom: 12px; }
  
  #youtubeChannel_contents{ padding-top: 0; padding-bottom: 24px; }
  #youtubeChannel_contents #yt-iframe{ width: 95%; }
  #youtubeChannel_contents #yt-iframe::after{ display: none; }
  #youtubeChannel_contents #yt-iframe .box{ max-width: 600px; margin: 0 auto; aspect-ratio: 16 / 9; border: 4px solid #1976D2; border-radius: 8px; }
  #youtubeChannel_contents #yt-iframe iframe{ width: 100% !important; height: 100% !important; }

  .youtube-section{
  }
  .youtube-section .headTitle{
    margin-bottom: 18px;
    padding: 0 24px;
  }
  .mdl_container{
    margin-top: 24px;
  }

}


@media screen and (max-width: 480px){
  #linkbtn_cont{ padding-top: 0; }
  #group-company::after{ background: url(../images/index2020/building_silhouette_W.png)no-repeat bottom left; }
}


/* scroll animation */
#yt-iframe .box{
  transform: scale(0.8); /* scaleを少し小さく */
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

#yt-iframe.inview .box {
  transform: scale(1); /* 元のサイズ */
  opacity: 1;
}




/* ========================================================================================== */
/* company_section */


.company_section{
  width: 100%;
  padding: 0;
  margin-bottom: 120px;
  position: relative;
}

.company_section .inner {
  max-width: 1366px;
  min-height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  position: relative;
  z-index: 50;
}

.company-text{
  width: 50%;
  padding: 0 24px;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}
.company-text .headTitle{
  margin-bottom: 24px;
}
.company-text h3{
  font-size: 24px;
  margin-bottom: 1rem;
}
.company-text h3, .company-text p{
  padding-left: 1rem;
}
.anchor-viewmore{
  margin-top: 82px;
  padding-right: 15%;
}
.company-text .loop-wrap{
  position: absolute;
  width: 300%;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}


.company-image {
  width: 50%;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.company-image img {
  max-width: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}


.company_section .loop-wrap{
  position: absolute;
  bottom: 0;
  left: 0;
}


/* media query Dp */
@media (min-width: 769px) {

}


/* media query rs */
@media (max-width: 768px) {

  .company_section{ margin-top: 64px; overflow: hidden; }
  .company_section .inner{ flex-direction: column-reverse; }
  .company-text, .company-image{ width: 100%; padding: 24px; }
  .company-text h3{ font-size: 18px; padding-left: 0; }
  .company-text p{ font-size: 14px; padding-left: 0; }

  .anchor-viewmore{ margin: 48px 0 24px; padding-right: 0; }
  .company-text .loop-wrap{ width: 500%; }

  .circle_border_b,
  .circle_border_p,
  .circle_par_p,
  .circle_dots_p{
    display:  none;
  }

  .company_section .loop-wrap{ 
    width: 300%;
   }

}


.zoom_in_target {
  transform: scale(0.8);
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.zoom_in_target.inview {
  transform: scale(1);
  opacity: 1;
}




/* ========================================================================================== */
/* info-section */


.info-section {
  display: flex;
  width: 100%;
  height: 55vh;
  margin: 48px 0 64px 0;
  font-family: sans-serif;
}

.info-block {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 2rem;
}
.info-block::before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #222;
  opacity: .3;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.info-block.left {
  background-image: url("../images/bg_sustainability.jpg"); /* 差し替え */
}

.info-block.right {
  background-image: url("../images/bg_recruit.jpg"); /* 差し替え */
}

.info-content{
  position: relative;
  z-index: 20;
}
.info-content h2 {
  color: #fff;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.info-content .sub {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.info-content .desc {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: bold;
  color: #fff;
  border-bottom: 1px solid #fff;
  text-decoration: none;
  font-size: 1rem;
}

.detail-btn span {
  display: inline-block;
  background: white;
  color: #0077cc;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-weight: bold;
}


/* media query Dp */
@media (min-width: 769px) {


}

/* media query rs */
@media (max-width: 768px) {

  .info-section{ flex-direction: column; margin-bottom: 36px; height: auto; }
  .info-block{ height: auto; padding: 64px 8px; }
  .info-content h2{ font-size: 32px; }
  .info-content .desc{ font-size: 14px; }

}





/* ========================================================================================== */
/* banner-grid */


.banner-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  padding: 20px;
}

.banner-item {
  flex: 0 0 calc(20% - 16px); /* デフォルトは5列 */
  text-align: center;
  display: flex;
  align-items: center;
}

.banner-item img {
  width: 100%;
  height: auto;
  display: block;
}


/* スマホ用（幅768px以下）は2列に切り替え */
@media screen and (max-width: 768px) {
  .banner-item {
    flex: 0 0 calc(50% - 16px); /* 2列 */
  }
}


section#contents .block404
{
    position: relative;

    width: 100%;
    max-width: 640px;
    min-height: 433px;
    margin: 0 auto 50px auto; 

    background: url(../images/error/bg404.png) no-repeat top left;
    background-size: 100%;
}


.wrap
{
    width: 100%; 
    background: url(../images/error/bgError.jpg) no-repeat top center;
}