@charset "UTF-8";
/*===========================================================================*/
/* #1 全要素                                                                 */
/*---------------------------------------------------------------------------*/
h1+p{
  font-size:3em;
}

h1 , h1+p {
  line-height: 1.2;
  text-align: center;
  font-weight: 900;
  font-family: 'Noto Sans JP';
  color:#ffffff;
  mix-blend-mode:overlay;

  letter-spacing : 2px;                /* 文字間 */
  text-shadow    : 
       1px  1px 0px #000000,
      -1px  1px 0px #000000,
       1px -1px 0px #000000,
      -1px -1px 0px #000000,
       1px  0px 0px #000000,
       0px  1px 0px #000000,
      -1px  0px 0px #000000,
       0px -1px 0px #000000;        /* 文字の影 */

}


h2{

    bottom: 0;
    text-shadow: 10px #3d3d3d;
    font-size: 3rem;
    font-family: 'Noto Sans JP', sans-serif;
    text-align:center;
    white-space: nowrap;
    color:#1A120F;

}

h3 {
  position: relative;
  padding: 0.6em;
  margin:5rem auto 24px auto;
  background-color:rgba(232, 232, 232, 0.4);
  border-radius: 7px;
  box-shadow: 0 3px 7px 0 rgba(63, 63, 63, 0.7);
  text-align:center;
}


p{
  padding:24px;
  display:block;
}

small{
  color:red;
  text-align: center;
  font-weight:bold;
  width: 100%;
  display: inline-block;
}

em{
  min-width:100%;
  font-size:0.5em;

}


dl{
  display: flex;
  flex-wrap: wrap;
  margin:auto;
}

dt {
  width: 35%;
  padding: 20px;
  background-color: #DADADA;
  box-shadow: 3px 3px 5px -3px;
  margin: 0 0 10px 0;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:1.2em;
}

dd {
  width: 65%;
  padding: 20px;
  background-color: #F3F3F3;
  box-shadow: -1px 3px 5px -3px;
  margin: 0 0 10px 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  font-size:1.2em;
}

footer{
  color: #fff;
  font-weight: 900;
}

/*===========================================================================*/
/* #2 コンテンツ要素                                                         */
/*---------------------------------------------------------------------------*/
.fulltext-search{
  text-align:center !important;
}

.company{
  background:#35363a;
}

.company h2{
  width:100%;
  color:#fff;

  text-align:center;
}

.video {
  position:fixed;
  top: 50%;  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: -1;

}

.video-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  z-index: -1;
}


.overlay::after {
  position: absolute;
  top: 0; left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: rgba(18, 148, 255, 0.249);
  z-index: -1;
}

.text-box {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}




.box2 {
  background-color: #fafafa;
  z-index:1;
}

.box3 {
  padding-top:48px;
  background-color: #d6d6d6;
  display: block;
}

.other{
  text-align:center;
}


/*===========================================================================*/
/* #3 アニメーション                                                         */
/*---------------------------------------------------------------------------*/

.marker {
  padding: 0 5px;
  background-image: linear-gradient(#ffff60, #ffff60);
  background-size: 0 50%;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: 2s;
}
 
/*アニメーション後*/
.marker.active {
  background-size: 100% 50%;
}

/*画像ループ*/
.loopSlide {
  position: relative;
  padding:48px 0px;
  display: flex;
  overflow: hidden;
  /*width: 100%;*/
  box-sizing: border-box;
  color:fff;
  background-color: #1A120F;
}




.loopSlide ul {
  padding: 0;
  min-width: 100vw;
  display: flex;
  flex-shrink: 0;
}

.loopSlide ul:first-child {
  animation: slide1 60s -30s linear infinite;
}

.loopSlide ul:last-child {
  animation: slide2 60s linear infinite;
}

.loopSlide ul li {
  display: inline-block;
  width: 100%;
  min-width: 150px;
  margin-right: 20px;
  list-style: none;
  text-align: center;
}

.loopSlide ul li img {
  display: block;
  width: 100%;
  height: auto;
}

.loopSlide:hover ul {
  animation-play-state: paused;
}

.loopSlide ul li a{
  color:#fff;
}

.center-mode img{
  box-shadow: 0 10px 15px 0 rgba(0, 0, 0, .5);
}


@keyframes slide1 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes slide2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}


/*===========================================================================*/
/* # slick css                                                               */
/*---------------------------------------------------------------------------*/
.slick-prev:before,
.slick-next:before {
  color: #000 !important;
}

.center-mode{
  width:80%;
  margin:auto;
  padding:12px 0px;
}

.center-mode p {
  margin-bottom:1.5em;
  font-size: 2rem;
  font-weight: bold;
  line-height: 0.5em;
  color: #666;
  /*background-color: #e0e0e0;*/
  opacity: 0.4;
  transition: all 300ms ease;
}

.center-mode p img{
  text-align: center !important;
}

.center-mode p.slick-center {
  margin:auto;
  color: #f50057;
  opacity: 1;
  transform: scale(1.16);
}

/* athome用 INPUT BOX補正*/
.suggest-input-container{
  margin-top:20px;
}

/*===========================================================================*/
/* # メディアクエリー PC/Mobile                                              */
/*---------------------------------------------------------------------------*/
@media screen and (min-width: 769px) {
  h1{
      font-size: 60px;
      padding: 0 50px;
    } 


  h2{
    padding-top:48px;
    margin:0px 0px 12px;
  } 

  h2+p{
    line-height:1.75em;
    font-size:1.6em;
  }

  #company{
    padding-bottom:24px;
  }

  .company dl{
    width:90%;
  }

  .box2 h2,.box3 h2{
    width:60%;
    margin:auto;
    position: relative;
   }


  h3 {
    width:60%;
  }

 }

/* スマホ */
@media screen and (max-width: 768px) {

  h1{
    font-size: 2em;
  } 

  h1+p{
    font-size: 1.8em;
  } 
  h2{
    
    text-align:center;
    font-size:1.9em;
  }

  h2{
    padding-top:32px;
    padding-bottom:6px;
  }


  .company dl{
    width:97%;
  }

  h3 {
    width:80%;
  }


}