@charset "UTF-8";
/* ----------------------------------------
* レスポンシブ
* ~ / 1200px / 991px / 767px
* desctop / laptop / tablet / phone
---------------------------------------- */

/* ------　ヘッダーロゴ　　----------------- */

.headlogo{
  position:fixed;
  top:50px;
	left:50px;
	z-index:10000;
	mix-blend-mode:difference;
}
.headlogo a{
	display:block;
}

.headlogo svg{
width:80px;
height:auto;
}

	@media screen and (max-width: 991px) {
.headlogo svg{
width:40px;
height:auto;
}
.headlogo{
  top:20px;
	left:20px;
}
}
	@media screen and (max-width: 767px) {
.headlogo svg{
width:50px;
height:auto;
}
.headlogo{
  top:20px;
	left:20px;
}
}



/* ------　ヘッダーメニュー　　----------------- */

#gloval-nav {
		background: #000;
		color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 990;
		text-align: center;
		display: flex;
		visibility: hidden;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 29px;
		opacity: 0;
		transition: opacity .6s ease, visibility .6s ease;
}
.open #gloval-nav {
		visibility: visible;
		opacity: 1;
}

#nav-toggle {
	display:none !important; /*　一旦非表示 */
  position: fixed;
  top: 50px;
  right: 50px;
  height: 32px;
  cursor: pointer;
	mix-blend-mode:difference;
}

#nav-toggle > div {
  position: relative;
  width: 36px;
}


@media screen and (max-width: 991px) {
#nav-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  height: 32px;
  cursor: pointer;
	mix-blend-mode:difference;
}

#nav-toggle > div {
  position: relative;
  width: 36px;
}
}
	@media screen and (max-width: 767px) {
#nav-toggle {
  top: 30px;
  right: 20px;
  height: 32px;
}

#nav-toggle > div {
  position: relative;
  width: 36px;
}

}


#nav-toggle span {
  width: 100%;
  height: 1px;
  left: 0;
  display: block;
  background: #FFF;
  position: absolute;
  transition: top .5s ease, -webkit-transform .6s ease-in-out;
  transition: transform .6s ease-in-out, top .5s ease;
  transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;
}
#nav-toggle span:nth-child(1) {
  top: 0;
}
#nav-toggle span:nth-child(2) {
  top: 14px;
}
#nav-toggle span:nth-child(3) {
  top: 28px;
}
#nav-toggle:hover span:nth-child(1) {
  top: 4px;
}
#nav-toggle:hover span:nth-child(3) {
  top: 23px;
}
@media screen and (max-width: 991px) {
#nav-toggle:hover span:nth-child(1) {
  top: 0px;
}
#nav-toggle:hover span:nth-child(3) {
  top: 28px;
}
}
@media screen and (max-width: 767px) {
#nav-toggle:hover span:nth-child(1) {
  top: 0px;
}
#nav-toggle:hover span:nth-child(3) {
  top: 28px;
}
}
.open #nav-toggle span {
  background: #fff;
}
.open #nav-toggle span:nth-child(1) {
  top: 15px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.open #nav-toggle span:nth-child(2) {
  top: 15px;
  width: 0;
  left: 50%;
}
.open #nav-toggle span:nth-child(3) {
  top: 15px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}



/* z-index */
#nav-toggle {
  z-index: 1000;
}

#container {
  z-index: 900;
}

#gloval-nav {
  background: #000;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 990;
  text-align: center;
  display: flex;
  visibility: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 29px;
  opacity: 0;
  transition: opacity .4s ease, visibility .4s ease;
}

#gloval-nav a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 10px 0;
  transition: color .6s ease;
}
#gloval-nav a:hover {
  color: #666;
}
#gloval-nav ul {
  list-style: none;
}
#gloval-nav ul li {
  opacity: 0;
  -webkit-transform: translateX(200px);
          transform: translateX(200px);
  transition: opacity .2s ease, -webkit-transform .6s ease;
  transition: transform .6s ease, opacity .2s ease;
  transition: transform .6s ease, opacity .2s ease, -webkit-transform .6s ease;
}
#gloval-nav ul li:nth-child(2) {
  transition-delay: .15s;
}
#gloval-nav ul li:nth-child(3) {
  transition-delay: .3s;
}
#gloval-nav ul li:nth-child(4) {
  transition-delay: .45s;
}
#gloval-nav ul li:nth-child(5) {
  transition-delay: .6s;
}
#gloval-nav ul li:nth-child(6) {
  transition-delay: .75s;
}
#gloval-nav ul li:nth-child(7) {
  transition-delay: .9s;
}

/* open */
.open {
  overflow: hidden;
}
.open #gloval-nav {
  visibility: visible;
  opacity: 1;
}
.open #gloval-nav li {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  transition: opacity .9s ease, -webkit-transform 1s ease;
  transition: transform 1s ease, opacity .9s ease;
  transition: transform 1s ease, opacity .9s ease, -webkit-transform 1s ease;
}


/* ------メインロゴアニメーション　MOVIE----------------- */

.video-container {
	position: relative;
	height:100%;
	}
.video-container video{
	position:absolute;
	z-index: 10;
	width: 100%;
	height: 100%;
	object-fit: cover;
	}

.video-container svg{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
	z-index: 20;
	}
.video-container .st0{
	fill:#FFF;
	stroke:#FFF;
	stroke-dasharray: 5000;
	stroke-dashoffset: 5000;
	stroke-width: 2;
	-webkit-animation: hello 4s ease-in 0.5s;
	animation: hello 4s ease-in 0.5s;
	}
	@-webkit-keyframes hello {
		0% {
		fill:transparent;
		}
		50% {
		fill:transparent;
		}
		85% {
		fill:transparent;
		stroke-dashoffset: 0;
		}
		100% {
		fill:#FFF;
		fill-opacity:1;
		}
	}

/* ------メインスライダー --- */
.aps-prev-2103298319{
	left:0 !important;
}
.aps-next-2103298319{
	right:0 !important;
}

/* ------メインロゴサイズ --- */

.video-container svg{
	width: auto;
	height:60%;
		}


	@media screen and (max-width: 991px) {
.video-container svg{
	width: 50%;
	height:auto;
		}
}
	@media screen and (max-width: 767px) {
.video-container svg{
	width: 50%;
	height:auto;
		}
	}

/* ------フッターロゴサイズ --- */

svg.footer_logo{
	width: 80px;
	height:auto;
	margin-top:60px;
}


	@media screen and (max-width: 991px) {
svg.footer_logo{
	width: 60px;
	height:auto;
		}
}
	@media screen and (max-width: 767px) {
svg.footer_logo{
	width: 60px;
	height:auto;
		}
	}

/* ------フォームページ --- */
div.form_info,
div.form_box,
div.repiar_attention{
	margin-bottom:50px;
	line-height:2em;
}

div.form_box{
	padding:50px 0 ;
	border-bottom:1px solid #000;
	border-top:1px solid #000;
}

div.form_box p,
div.repiar_attention p{
	margin-bottom:50px;

}

div.form_info a{
	color:#900;
	text-decoration:underline;
}
div.mail_attention{
	border:1px solid #900;
	padding:20px;
	box-sizing:border-box;
	font-size:0.8em;
	color:#900;
}

span.required{
	font-size:0.5em;
	color:#FFF;
	background-color:#900;
	border-radius: 3px;
	-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	padding:3px 10px;
	box-sizing:border-box;
	margin-right:10px;
	vertical-align:middle;
}

div.include_repiar{
	border:1px solid #000;
	padding:20px;
	box-sizing:border-box;
	margin-bottom:20px;
	margin-top:-40px;
}

div.repiar_attention a{
	display:block;
	margin:100px auto 0;
	background:#900;
	padding:10px 50px;
	color:#FFF;
	text-align:center;
}




/* ------TOP コンタクト --- */

#repiar_form{

}

#repiar_form ul{
	width:90%;
	margin:50px auto 80px;
}

#repiar_form li{
	float:left;
	text-align:center;
	width:50%;
}

#repiar_form a{
	background:#000;
	color:#FFF;
    padding:20px;
	width:60%;
	display:inline-block;
}


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

#repiar_form ul{
	width:100%;
	margin:0 0 70px;
	padding:0;
}

#repiar_form li{
	text-align:center;
	width:100%;
	margin-bottom:20px;
	float:none;
}


#repiar_form a{
	background:#000;
	color:#FFF;
	padding:10px;
	width:70%;
	display:inline-block;
	margin:auto;
}

}
	@media screen and (max-width: 767px) {
#repiar_form ul{
	width:100%;
	margin:0 0 70px;
	padding:0;
		}

#repiar_form li{
	text-align:center;
	width:100%;
	margin-bottom:20px;
	float:none;
}


#repiar_form a{
	background:#000;
	color:#FFF;
	padding:10px;
	width:70%;
	display:inline-block;
	margin:auto;
}
		
}