@charset "UTF-8";

/* ===================
  メインコンテンツ：HOME
*/

/* Home用カバーエリア */

.home #cover{
  height: 80vh;
  background-image: url(../images/home-cover-img.jpg);
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: cover;
  /* background-attachment: fixed; */
  color: #fff;
}

.home #cover .inner{
  width: 100%;
  height: 100%;
  position: relative;
}

.home #cover .cover-logo{
  width: 350px;
  position: relative;
  z-index: 10;
  top: 50%;
  left: 0;
  transform: translate(0,-50%);
  text-align: center;
  
}
.home #cover .cover-logo h1{
  font-size: 18px;
}
.home #cover .cover-logo h1 strong{
  display: inline-block;
  color: #3F6AA5;
  background-color: #FFFD5C;
  border-radius: 30px;
  padding: 3px 15px;
  margin-bottom: 3px;
}

.home #cover::before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(27, 106, 167, 0.5);
  position: absolute;
  top:0;
  left: 0;
}


.home #cover.cover-poster{
  height: calc( 100vh - 80px );
}

.home #cover.cover-poster .inner{
  width: 1000px;
  margin: 0 auto;
}

.home #cover.cover-poster .inner.flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.home #cover.cover-poster .cover-logo{
  position: relative;
  top: auto;
  left: auto;
  transform: none;
}

.home #cover.cover-poster .cover-poster-image{
  flex: 1 0 0 auto;
}
.home #cover.cover-poster .cover-poster-image img{
  width: auto;
  height: calc( 100vh - 180px );
}

.home #feature{
  background-color: #A7DCFD;
  padding: 30px 0;
}

.home #information{
  background-color: #FCF0E0;
  padding: 30px 0;
}

.home #banner{
  background-color: #3F6AA5;
  padding: 20px;
}

#content{
  background-color: #fff;
  padding: 30px 0;
}


/* -------------
.home #safety
安全性
*/
.home #safety .inner{
  padding: 25px;
  display: flex;
  align-items: center;
}
.home #safety .heading{
  font-size: 140%;
  margin-bottom: 1em;
}

.home #safety .section-content{
  width: 60%;
  margin-left: 30px;
  line-height: 1.8;
}

/* -------------
.home #pr
告知スペース
*/
.home #pr .inner{
  padding: 25px;
  display: flex;
  align-items: center;
}
.home #pr .heading{
  font-size: 140%;
  margin-bottom: 1em;
}

.home #pr .section-content{
  width: 60%;
  margin-left: 40px;
  flex-shrink: 0;
  line-height: 1.8;
}

.home #pr img{
  width: 100%;
  height: auto;
}


/* -------------
.home #feature
アオコーナー ３つの魅力
*/

.home #feature .section-content{
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.home #feature .item{
  width: 33.3%;
  color: #3F6AA5;
}
.home #feature .item-inner{
  display: block;
  padding: 20px;
}

.home #feature .item figure img{
  width: 100%;
  height: auto;
}

.home ul.button-menu a{
  border: 0;
}

.home ul.button-menu-holizontal{
  padding: 15px 0 0;
}
.home ul.button-menu-holizontal a{
  background-color: #DE6464;
  background-image: url(../images/icon-arrow-right-w.svg);
  color: #fff;
}

/* -------------
.home #information
インフォメーション
*/

.home #information .inner{
  width: 100%;
  min-width: 1000px;
}

.home #information .item{
  /* width: 333px !important; */
}
.home #information .item-inner{
  display: block;
  padding: 20px;
  color: #000;
  text-decoration: none;
}
.home #information .item-inner .thumbnail img{
  width: 100%;
  height: 320px;
  object-fit: contain;
}

.home #information .item-inner .date{
  color: #666;
  font-size: 80%;
  margin-bottom: 10px;
}
.home #information .item-inner .heading{
  color: #DE6464;
}
.home #information .item-inner .excerpt{
  font-size: 90%;
}

/* --------------------
slick
*/
.home #information .slick-dotted.slick-slider {
  margin: 80px 0 0;
}

.home #information .slick-dots {
  position: absolute;
  bottom: auto;
  top: -40px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.home #information .slick-dots li button:before {
  color: rgba(0, 0, 0, 0.5);
  font-size: 10px;
}

.home #information .slick-dots li.slick-active button:before {
  color: #DE6464;
  opacity: 1;
  font-size: 16px;
}


@media ( max-width:520px ) {

  /* =================== SP
  メインコンテンツ：HOME
  */

  .home #cover{
    height: 40vh;
    text-align: center;
    background: 50% 50%;
    background-image: url(../images/home-cover-img.jpg);
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: cover;
    /* background-attachment: scroll !important; */
    /* background-size: cover; */
  }

  .home #cover .inner{
    width: 100%;
  }

  .home #cover .cover-logo{
    width: 70vw;
    height: auto;
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .home #cover .cover-logo h1{
    font-size: 5vw;
  }

  .home #banner{
    padding: 25px;
  }

  /* -------------
  .home #safety
  安全性
  */

  .home #safety .inner{
    padding: 20px;
    display: block;
  }
  .home #safety .heading{
    font-size: 5vw;
    /* text-align: center; */
    margin-bottom:1em;
  }

  .home #safety .section-content{
    width: 100%;
    margin-left: 0px;
  }

  /* -------------
  .home #pr
  告知スペース
  */

  .home #pr .inner{
    padding: 20px;
    display: block;
  }
  .home #pr .heading{
    font-size: 5vw;
    /* text-align: center; */
    margin-bottom:1em;
  }

  .home #pr .section-content{
    width: 100%;
    margin-left: 0px;
  }

  /* -------------
  .home #feature
  アオコーナー ３つの魅力
  */

  .home #feature .section-content{
    display: block;
  }

  .home #feature .section-content .item{
    width: 100%;
    /* margin: 20px 0; */
  }
  .home #feature .section-content .item-inner{
    display: block;
    padding: 20px;
  }


  /* -------------
  .home #information
  インフォメーション
  */

  .home #information .inner{
    min-width: 0;
  }

  .home ul.button-menu-holizontal{
    display: block;
    padding: 0 20px;
  }

  .home #information .item-inner .thumbnail img{
    /* width: 100%; */
    height: 200px;
    /* object-fit: contain; */
  }

/* end of max-width:520px */
}

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

  .home #cover h1{
    font-size: 100%;
  }

}