/* CSS Document */

section{ padding: 30px 15px;}

.inner{
	width: 90%;
	max-width: 1200px;
	margin: auto;
	padding: 0 10px;
}

h2{ padding: 30px 0 15px;}


/**************************************************
 loading
**************************************************/
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #F5F5F5;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
#loading.hide{ animation: hideAnimation 0.8s cubic-bezier(0.5, 0.2, 0.05, 1) 0.2s forwards;}

.loader {
  margin: calc(50vh - 0.5rem) auto;
  font-size: 10px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.5), -1.8em -1.8em 0 0em rgba(0,0,0, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.7), 1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.5), 1.8em -1.8em 0 0em rgba(0,0,0, 0.7), 2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.5), 2.5em 0em 0 0em rgba(0,0,0, 0.7), 1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.5), 1.75em 1.75em 0 0em rgba(0,0,0, 0.7), 0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.5), 0em 2.5em 0 0em rgba(0,0,0, 0.7), -1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.5), -1.8em 1.8em 0 0em rgba(0,0,0, 0.7), -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.5), -2.6em 0em 0 0em rgba(0,0,0, 0.7), -1.8em -1.8em 0 0em #000000;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.5), -1.8em -1.8em 0 0em rgba(0,0,0, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.7), 1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.5), 1.8em -1.8em 0 0em rgba(0,0,0, 0.7), 2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.5), 2.5em 0em 0 0em rgba(0,0,0, 0.7), 1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.5), 1.75em 1.75em 0 0em rgba(0,0,0, 0.7), 0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.5), 0em 2.5em 0 0em rgba(0,0,0, 0.7), -1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.5), -1.8em 1.8em 0 0em rgba(0,0,0, 0.7), -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.5), -2.6em 0em 0 0em rgba(0,0,0, 0.7), -1.8em -1.8em 0 0em #000000;
  }
}

/* loading end animetion */
@keyframes hideAnimation {
  0% {
		opacity: 1;
  } 100% {
    opacity: 0;
  }
}


/**************************************************
 mv
**************************************************/
.mv_hanger{
	position: relative;
	margin: 100px 0 0 0;
	height: 70vh;
	background-color: #f5f5f5;
	overflow: hidden;
	opacity : 0;
	animation: fadeIn 0.5s cubic-bezier(0.8, 0.3, 0.05,0) 0.5s forwards;
}

.mv_hanger::before,
.mv_hanger::after{
	position: absolute;
	top: 0;
	content: '';
	display: block;
	height: 70vh;
}
.mv_hanger::before{
	left: 0;
	width: 50%;
	background: url("../img/top/mv01.png") no-repeat center left;
	background-size: cover;
	opacity : 0;
	transform : translate(0, -20px);	
	animation: fadeInTop 0.5s cubic-bezier(0.8, 0.3, 0.05,0) 1.2s forwards;
}
.mv_hanger::after{
	right: 0;
	width: 50%;
	background: url("../img/top/mv02.png") no-repeat center right;
	background-size: cover;
	opacity : 0;
	transform : translate(0, 20px);	
	animation: fadeInBottom 0.5s cubic-bezier(0.8, 0.3, 0.05,0) 1.2s forwards;
}

/* animetion */
@keyframes fadeIn {
  0% { opacity : 0;}
  100% { opacity : 1;}
}
@keyframes fadeInTop {
  0% { transform : translate(0, -20px); opacity : 0;}
  100% { transform : translate(0, 0); opacity : 1;}
}
@keyframes fadeInBottom {
  0% { transform : translate(0, 20px); opacity : 0;}
  100% { transform : translate(0, 0); opacity : 1;}
}

.mv_hanger p{
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
	z-index: 1;
	height: 100%;
	display: inline-block;
	margin: auto;
	padding: 20px 30px;
	background-color: #f5f5f5;
	font-size: 1.5rem;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
	display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: center;
  -ms-flex-pack: justify;
  justify-content: center;
  align-items: center; /* 縦方向中央揃え */
  flex-wrap: wrap;
}
@-moz-document url-prefix() {
  .mv_hanger p{
		transform: translate(-50%, 0);
  }
}
@supports (-ms-ime-align: auto) {
	.mv_hanger p{
		transform: translate(-50%, 0);
  }
}


/**************************************************
 about
**************************************************/
.about_hanger{
	background: url("../img/top/about_bg01.jpg") no-repeat center;
	background-size: cover;
}

.about_menu{
	margin: 30px;
	-webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.about_menu li{
	width: 48%;
	text-align: center;
	font-size: 1.1rem;
	font-weight: 500;
}
.about_menu li a{
	position: relative;
	display: block;
	padding: 10vh 30px;
	background-color: rgba(255,255,255,0.85);
	line-height: 1;
}
.about_menu li a::after{
	content: '';
	display: inline-block;
  width: 8px;
  height: 8px;
	margin: 0 0 0 2rem;
  border-top: 2px solid #0e1a2e;
  border-right: 2px solid #0e1a2e;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.about_menu li a:hover{ background-color: #fff;}


/**************************************************
 products
**************************************************/
.products_hanger p{ text-align: center;}

.products_menu{
	margin: 20px 0;
	-webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.products_menu li{
	width: 32%;
	text-align: center;
}

.products_menu li a{
	display: block;
	background-color: #e4eff9;
}
.products_menu li a .products_menu_title{
	padding: 20px 1rem;
	background-color: #0e1a2e;
	color: #fff;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-o-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
}
.products_menu li a:hover{
	background-color: #c1d9ea;
	text-decoration: none;
}
.products_menu li a:hover .products_menu_title{ background-color: #1f518e;}

.more{
	margin: 30px 0;
	text-align: center;
}
.more a{
	display: inline-block;
	width: 320px;
	max-width: 60%;
	padding: 20px;
	color: #fff;
	background-color: #0e1a2e;
}
.more a::after{
	content: '';
	display: inline-block;
  width: 8px;
  height: 8px;
	margin: 0 0 0 2rem;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.more a:hover{ background-color: #1f518e;}


/**************************************************
 Responsive
**************************************************/

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

  .inner{ width: 100%;}
	
	/** mv ********************/
	.mv_hanger{ margin: 60px 0 0 0;}
	.mv_hanger,.mv_hanger::before, .mv_hanger::after{ height: 60vh;}
	
	.mv_hanger::after{ width: 48%;}
	
	.mv_hanger p{
		transform: none;
    -webkit-transform: none;
    -ms-transform: none;
		left: inherit;
		right: 0;
		bottom: 0;
		width: 100%;
		height: auto;
		font-size: 1.2rem;
		writing-mode: inherit;
	}
	
	/** about ********************/
	.about_hanger .inner{ padding: 0;}
	.about_menu{ margin: 0;}
	.about_menu li{
		width: 49%;
		text-align: left;
	}
	.about_menu li a{ padding: 4rem 10px;}
	.about_menu li a::after{
		position: absolute;
		bottom: calc(50% - 4px);
		right: 20px;
	}	
	
	/** products ********************/
	.products_hanger p br{ display: none;}
	
	.products_menu li{
		width: 100% !important;
		margin: 5px 0;
	}
	
	.products_menu li a{ display: table;}
	.products_menu li a > div{
		display: table-cell;
		vertical-align: middle;
	}
	.products_menu_image{ width: 30%;}
	.products_menu_title{ width: 70%;}
	
}