/* ==========================================================================
   Main visual
========================================================================== */
#mv {
  background-image: url(../img/mv.jpg);
  background-position: bottom center; }

#mv .hero__inner{
  text-align: left;
  color: #262c38; }
#mv .hero__inner::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(66,165,184,.3); }

#mv .hero__inner .h1 {
  font-size: 5rem;
  line-height: 10rem;
  margin-top: -2rem; }

#mv .hero__inner .script {
  display: inline-block;
  margin: -1.5rem -4rem 0;
  padding: 0 4rem;
  font-size: 1.4em;
  position: relative; }
#mv .hero__inner .script span {
  display: inline-block;
  color: #379eaf;
  transform: rotate(-6deg) translateY(-1rem); }
#mv .hero__inner .script::before {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background-color: #262c38;
  position: absolute;
  right: 14%;
  bottom: .375em;
  z-index: -1;
  animation: border-anim .8s 1.6s ease forwards; }

@keyframes border-anim {
    0%   { width: 0; }
    100% { width: 72%; }
}

#mv .hero__inner .sub-ttl {
  font-size: 1.2rem;
  line-height: 2;
  font-weight: 600;
  letter-spacing: .08em; }

/* ==========================================================================
   Banner
========================================================================== */

.bannerlist #philosophy .cover {
  background-image: url(../img/philosophy.jpg);
}
.bannerlist #about .cover {
  background-image: url(../img/about.jpg);
}
.bannerlist #csr .cover {
  background-image: url(../img/csr.jpg);
}
.bannerlist #strength .cover {
  background-image: url(../img/strength.jpg);
}
.bannerlist #product .cover {
  background-image: url(../img/product.jpg);
}
.bannerlist#product .cover {
  background-image: url(../img/product2.jpg);
  background-position: 5% 50%;
}


.bannerlist #lot .cover {
  background-image: url(../img/lot.jpg);
}
.bannerlist #variety .cover {
  background-image: url(../img/variety.jpg);
}
.bannerlist #speed .cover {
  background-image: url(../img/speed.jpg);
}
.bannerlist #manufactureing .cover {
  background-image: url(../img/manufactureing.jpg);
}
.bannerlist #quality .cover {
  background-image: url(../img/quality.jpg);
}



/* 3 column */
.bannerlist.skew-bannerlist-3col .bannerlist__header {
  padding: 0 15px; }

/* 2 column */
.bannerlist.skew-bannerlist-2col li .bannerlist__header {
  position: absolute;
  left: 0;
  width: 100%; }


.bannerlist.skew-bannerlist-3col .bg-txt {
  left: auto;
  right: 0; }

.bannerlist.skew-bannerlist-2col .bg-txt {
  left: auto;
  right: 0;
  margin: -2rem 15px 0; }

#feature.bannerlist .banner .cover::before,
#other.bannerlist .banner .cover::before {
  background-color: rgba(38, 44, 56, .5);
}

#product .bannerlist__header {
  z-index: 10;
}


/* ==========================================================================
   News
========================================================================== */
#news .container {
  position: relative; }

#news .container .youtubeBtn {
	max-width: 660px;
	margin: 45px auto;
}
#news .container .youtubeBtn ul {
	display: -webkit-flex;
	-webkit-justify-content: space-between;
	-webkit-align-items: flex-start;
	-webkit-flex-wrap: wrap;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}
#news .container .youtubeBtn ul li {
	width: 290px;
	margin: 0 20px;
}
#news .container .youtubeBtn ul li {
  text-align: center;
	list-style: none;
}
#news .container .youtubeBtn ul li img {
  width: 100%;
  max-width: 250px;
}
#news .container .youtubeBtn ul li a {
  display: block;
  padding: 20px;
  background-color: #FFF;
}