@charset "utf-8";

body:not(#top) section#mv {
  background-image: url(../../img/sltn/bg_mv.jpg);
}

main > section > div > h3 {
  margin: 0 auto 70px;
  color: #fff;
  text-align: left;
}

.swiper-slide a {outline: none;}

.swiper-button-next,
.swiper-button-prev {
  width: 46px!important;
  background: #fff!important;
  border-radius: 4rem;
  opacity: 0.8;
  top: 33%!important;
/*   right: 80px!important; */
}
.swiper-button-prev {
    left: 10px;
/*     right: auto!important; */
}
.swiper-button-next:after,
.swiper-button-prev:after {
  width: 100%;
  height: 100%;
  color: #011423!important;
  content: ' '!important;
  background: transparent url(../../img/arw_nvy.svg) no-repeat 56% center;
  background-size: auto 70%;;
  font-size: 28px !important;
  font-weight: bold;
}
.swiper-button-prev:after {transform: rotate(180deg)}

#esld {
  width: 92%;
  max-width: 1000px;
  margin: 0 auto 26px;
  overflow: hidden;
}
#esld .swiper-wrapper{
  -webkit-transition-timing-function:linear!important;
  -o-transition-timing-function:linear!important;
  transition-timing-function:linear!important;
}
div.swiper-controller {
  max-width: 1200px;
  margin: -18vw auto 22vw;
  position: relative;
}
@media (min-width: 1200px) {
  div.swiper-controller {
    margin: -190px auto 240px;
  }
}
#esld_thm {
  width: 80%;
  max-width: 900px;
  margin: 0 auto 100px;
}
/* #esld_thm > div {gap: 0 1vw;} */
#esld_thm > div img:hover {
  opacity: .8;
  cursor: pointer;
}
#esld_thm .swiper-slide {
  padding: 0 2px;
}
#esld_thm div.swiper-slide:not(.swiper-slide-thumb-active) img {
  max-width: 160px;
  filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(300%) contrast(120%);
}
div#esld .swiper-slide img {
  width: 100%;
  max-width: 506px;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: .9;
}
.main div.swiper-controller {
    width: 88%;
    position: relative;
    margin: 0 auto;
    max-width: 1060px;
}
.swiper-button-next:after,
.swiper-button-prev:after {
  color: #ccc;
}
/* .swiper--wrapper {
  width: 100%;
  height: 300px;
}

.swiper-slide {
  color: #ffffff;
  width: 300px;
  height: 100%;
  text-align: center;
  line-height: 300px;
  text-align: center;
}

.sample-slider .swiper-wrapper{
    transition-timing-function: linear;
} */


    div#carousel {
      perspective: 1200px;
      background: #100000;
      padding-top: 4%;
      font-size: 0;
      margin-bottom: 3rem;
      overflow: hidden;
touch-action: pan-y;
    }

    figure#spinner {
      transform-style: preserve-3d;
      height: 300px;
      transform-origin: 50% 50% -500px;
      transition: transform 1s;
      animation: rotateCarousel 35s linear infinite;
    }

    @keyframes rotateCarousel {
      from {
        transform: rotateY(0deg) rotateZ(-10deg);
      }
      to {
        transform: rotateY(360deg) rotateZ(-10deg);
      }
    }

    figure#spinner a {
      width: 40%;
      max-width: 425px;
      position: absolute;
      left: 30%;
      transform-origin: 50% 50% -500px;
      outline: 1px solid transparent;
    }

    figure#spinner a:nth-child(1) { transform: rotateY(0deg); }
    figure#spinner a:nth-child(2) { transform: rotateY(-45deg); }
    figure#spinner a:nth-child(3) { transform: rotateY(-90deg); }
    figure#spinner a:nth-child(4) { transform: rotateY(-135deg); }
    figure#spinner a:nth-child(5) { transform: rotateY(-180deg); }
/*     figure#spinner a:nth-child(6) { transform: rotateY(-225deg); }
    figure#spinner a:nth-child(7) { transform: rotateY(-270deg); }
    figure#spinner a:nth-child(8) { transform: rotateY(-315deg); } */

    div#carousel:hover figure#spinner {
      animation-play-state: paused; /* オンマウスでアニメーションを一時停止 */
    }


#sltn_d {
  background: #eef2f2;
}
#sltn_d h1 {
  margin: 0 auto 50px;
  padding: 0 0 0 86px;
  background: transparent url(../../img/sltn/ico_sl1.png) no-repeat 0 center;
  background-size: auto 100%;
  color: #021d4b;
  font-size: min(6vw, 2.4rem);
  text-align: left;
}
#sltn_d #drn h1 {background-image: url(../../img/sltn/ico_sl2.png);}
#sltn_d #mve h1 {background-image: url(../../img/sltn/ico_sl3.png);}
#sltn_d #scrty h1 {background-image: url(../../img/sltn/ico_sl4.png);}
#sltn_d #drr h1 {background-image: url(../../img/sltn/ico_sl5.png);}
#sltn_d #s_infr h1 {background-image: url(../../img/sltn/ico_sl6.png);}
#sltn_d #s_crtn h1 {background-image: url(../../img/sltn/ico_sl7.png);}
#sltn_d #enrgy h1 {background-image: url(../../img/sltn/ico_sl8.png);}
#sltn_d #dc h1 {background-image: url(../../img/sltn/ico_sl9.png);}

#sltn_d h1 span {
  padding: 12px 0 9px;
  border-bottom: 3px solid;
  display: block;
  font-family: Cinzel, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
}
#sltn_d dl {
  width: 96%;
  margin: 0 auto;
}
#sltn_d dl > * {
  width: 48%;
}
#sltn_d dl > dd {
  text-align: left;
}
#sltn_d dl > dd h2 {
  margin: 0 auto 19px;
  color: #021d4b;
  line-height: 1.6;
}
#sltn_d #bx_hm a {
  max-width: 480px;
  font-size: min(2.4vw, .8rem);
}
#sltn_d #bx_hm a:first-child,
#sltn_d #bx_hm a.btn_bl {
  margin: 0 auto 23px;
  padding: 15px 1%;
  background: #003366 url(../../img/arw_wht.svg) no-repeat 96% center;
  background-size: auto 39%;
  border: none;
  color: #fff;
}
#sltn_d #bx_hm a:not(:last-child) {
  margin: 0 auto 23px;
}

#sltn > ul.nst {
  justify-content: center;
  gap: 33px 3%;
}
#sltn > ul.nst li:last-child {
  width: 100%;
}
#sltn > ul li a {
  color: #fff;
}

/* -C.C.C.- new 2025/02/17 */
#sltn > div.cap > p,
#sltn #srch {
  margin: 0 auto 20px;
  color: #fff;
  font-size: min(4vw, 1.2rem);
  font-weight: bold;
  text-align: left;
}
#sltn #srch {
  margin: 0 auto 66px;
  font-size: .8rem;
  font-weight: normal;
  align-items: anchor-center;
  justify-content: flex-start;
  gap: 0 13px;
}
#sltn #srch form {
  width: 40%;
  max-width: 300px;
}
#sltn #srch input[name="srch"] {
  width: calc(98% - 41px);
  border: 1px solid #ccc;
  border-right: none;
  border-radius: 1.4rem 0 0 1.4rem;
}
#sltn #srch button {
  padding: 8px 5px 5px 30px;
  background: #fff url(../../img/ico_srch.svg) no-repeat 12% center;
  background-size: auto 90%;
  border: 1px solid #ccc;
  border-left: none;
  border-radius: 0 1.4rem 1.4rem 0;
  color: #fff;
}

#sltn #tab {
  margin: 0 auto 60px;
  border-bottom: 3px solid #fff;
}
#sltn #tab ul li {
  width: 33%;
  background: rgba(102,102,102,0.96);
  color: #ccc;
  opacity: .8;
}
#sltn #tab ul li.srch {
  padding: 16px 0;
}
#sltn #tab ul li a {
  padding: 16px 0;
  color: #ccc;
  display: block;
  font-weight: bold;
  text-decoration: none;
}
#sltn #tab ul li.on,
#sltn #tab ul li.on a {
  background: #fff;
  color: #021d4b;
  display: block;
  opacity: 1;
}
#sltn #tab ul li.lst {
  background: none;
  opacity: 1;
}
#sltn #tab ul li.lst a {
  max-width: 160px;
  margin: 0 0 0 auto;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid;
  border-radius: 2rem;
  color: #021d4b;
  display: block;
  font-size: .8rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

#sltn #lst {
  margin: 0 auto 60px;
}
#sltn #lst ul.flx {
  justify-content: flex-start;
  gap: 0 5%;
}
#sltn #lst ul > li {
  width: 30%;
  text-align: left;
}
#sltn #lst ul > li > div,
section#sltn_d2 {
  background: #fff;
}
#sltn #lst ul > li > div h3 {
  padding: 8px 3%;
  color: #021d4b;
  font-size: min(2.5vw, 1.2rem);
  line-height: 1;
  text-align: left;
}
#sltn #lst ul > li > p {
  margin: 0 auto 16px;
  padding: 9px 0 0;
  color: #fff;
  font-size: min(2.2vw, 1rem);
}
#sltn #lst ul > li > a {
  margin: 0 auto 16px;
  border-bottom: 1px solid;
  color: #fff;
  display: block;
  font-size: min(3vw, .9rem);
  position: relative;
  text-decoration: none;
}
#sltn #lst ul > li > a:after {
  height: 21px;
  margin: 3px 8px 0;
  border-right: 1px solid;
  content: '';
  display: inline-block;
  float: right;
  transform: rotate(-45deg);
    position: absolute;
    right: 0;
    bottom: -3px;
}
section#sltn #lst ol#tag > li {
  cursor: unset;
}
section#sltn #lst ol#tag > li a,
#sltn_d2 > #hd.nst ol#tag > li a {
  padding: 6px 16px;
  font-size: min(2vw, .8rem);
  pointer-events: none;
}

#sltn_d2 > #hd {
  margin: 0 auto 99px;
}
#sltn_d2 > #hd > div {
  width: 56%;
  padding: 23px 0 0;
  text-align: left;

  display: flex;
  flex-flow: column;
}
#sltn_d2 > #hd > div > div:last-child {
  margin: auto auto 0;
}
#sltn_d2 > #hd > img {
  width: 40%;
}
#sltn_d2 > #hd.nst > div:first-child,
#sltn_d2 > #hd > div > * {
  width: 100%;
  padding: 0;
}
#sltn_d2 > #hd.nst > div > h3 {
  width: 56%;
  padding: 0 0 9px;
  border-bottom: 2px solid;
  color: #021d4b;
  font-size: min(3.4vw, 2.4rem);
}
#sltn_d2 > #hd.nst > div > p:first-child {
  margin: 0 auto 33px;
  color: #021d4b;
  font-size: min(3vw, 1.6rem);
  font-weight: bold;
}
#sltn_d2 > #hd.nst ol#tag {
  margin: 0 auto 33px;
}
#sltn_d2 > #hd.nst ol#tag > li a {
  padding: 10px 16px;
}
#sltn_d2 > #hd > div div > a {
  width: 48%;
  padding: 16px 0;
  background: #fff url(../../img/arw_nvy.svg) no-repeat 96% center;
  background-size: auto 20px;
  border: 1px solid;
  color: #021d4b;
  display: block;
  font-size: min(3.8vw, 1rem);
  line-height: 1;
  text-align: center;
  text-decoration: none;
}
#sltn_d2 > #hd > div div > a:first-child,
#sltn_d2 > #blk .bx_btn a {
  background: #021d4b url(../../img/arw_wht.svg) no-repeat 96% center;
  background-size: auto 20px;
  color: #fff;
}
#sltn_d2 > #blk {
  text-align: left;
}
#blk div.blk {
  margin: 0 auto 60px;
  overflow: hidden;
}
#blk div.blk > h3 {
  margin: 0 auto 50px;
  padding: 1.4%;
  background: #ffffdd;
  border: 1px solid;
  color: #021d4b;
  font-size: min(4.2vw, 1.4rem);
}
#blk div.blk .flx {
  gap: 39px 0;
}
#blk div.blk .flx.swiper-wrapper {
  flex-wrap: unset;
  justify-content: unset;
  gap: 0;
}
#blk div.blk .flx > li {
  width: 48%;
  text-align: center;
}
#blk div.blk .flx.flx3 > li {
  width: 30%;
}

#sltn_d2 > #blk .bx_yt {
  width: 96%;
  max-width: 880px;
  margin: 0 auto 39px;
}
#sltn_d2 > #blk .bx_yt .yt {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
}
#sltn_d2 > #blk .bx_yt iframe {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  right: 0;
}
#sltn_d2 > #blk .bx_btn {
  width: 96%;
  max-width: 600px;
  margin: 0 auto 39px;
  text-align: center;
}
#sltn_d2 > #blk .bx_btn a {
  padding: 16px 8%;
  border: 1px solid;
  color: #fff;
  display: block;
  line-height: 1;
  text-align: center;
  text-decoration: none;
}

#sltn_d2 #bx_hm > a:nth-child(1) {
  width: 98%;
  max-width: 370px;
  margin: 0 auto 30px;
  background: no-repeat;
  border: none;
  display: block;
  font-weight: normal;
  text-align: center;
  text-decoration: underline;
}


@media (max-width: 640px) {
  .bx_sp {overflow: hidden;}
  #esld {
    width: 180%;
    margin: 0 auto 26px -40%;
  }
  div.swiper-controller {
    max-width: 1200px;
    margin: -38vw auto 42vw;
    position: relative;
  }

  #esld_thm {width: 96%;}
  #esld_thm .swiper-wrapper {
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px 2%;
  }
  #esld_thm .swiper-slide {
    width: 18.2% !important;
    padding: 0;
  }

  #sltn_d dl {display: block;}
  #sltn_d dl > * {
    width: 96%;
    margin: 0 auto;
  }
  #sltn_d h1 {padding: 0 0 0 68px;}
  #sltn_d dl > dt {margin: 0 auto 25px;}

  #sltn_d #bx_hm a {
    width: 96%;
    max-width: 460px;
  }

  #sltn > ul li:not(:last-child) {
    width: 60%;
  }
  /* Cohaku Creative Co.2025/02/26 */
  #sltn #srch > p {flex-shrink: unset;}
  #sltn #srch form {width: 80%;}
  #sltn #tab ul li {
    width: 30.8vw;
  }
  #sltn #tab ul li.on,
  #sltn #tab ul li.on a {
    width: 30.8vw;
    display: flex;
    font-size: 2.6vw;
  }
  #sltn #tab ul li a,
  #sltn #tab ul li.on a {
    font-size: 2.6vw;
    display: block;
  }
  #sltn #lst ul > li {width: 47%;}
  #sltn #lst ul > li > a {margin: 0 auto 9px;}

  #sltn_d2 > #hd > div div > a,
  #sltn_d2 > #hd > div div > a:first-child,
  #sltn_d2 > #blk .bx_btn a {
    background-size: auto 16px;
  }

  #sltn_d2 > #hd.nst > div > h3,
  #sltn_d2 > #hd > div,
  #sltn_d2 > #hd > img {
    width: 100%;
  }
  #sltn_d2 > #hd > div > div:last-child {
    margin: 0 auto 19px;
  }
  #sltn_d2 > #hd {margin: 0 auto 50px;}



}