@charset "UTF-8";
html {
	font-size: .6945vw;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.pc {
  display: inline;
}
.sp {
  display: none;
}
body {
  color: #0e243d;
	font-family: 'Roboto', sans-serif !important;
	font-family: 'Noto Sans JP',sans-serif;
	font-size: 1.8rem;
}
body.cross{
	overflow:hidden;
}
img {
  vertical-align: middle;
}
#header{
	background: #221f1f;
	height: 5vw;
	position: fixed;
	z-index: 20;
	left: 0;
	top: 0;
	width: 100%;
}
.header__content{
	position: relative;
	top: 22%;
	left: 10%;
	width: 9vw;
	height: ;
}
.header__content a {
	color: #221f1f;
}
.header__content svg {
	fill: #ffffff;
}
.blow{
	height: 100%;
	width: 50%;
	background: #221f1f;
	position: fixed;
	z-index: 10;
	left: 0;
	transform: translate(0%, -100%) translate3d(0px, 0px, 0px);
	transition: 0.5s;
	transition-timing-function:ease-in;
	transition-delay: 0.3s;
}
.blow__right{
	transition-delay: 0.2s;
}
.cross .blow{
	transform: translate(0%, 0%) translate3d(0px, 0px, 0px);
	transition: 0.5s;
}
.cross .blow__right{
	transition-delay: 0.1s;
}
.blow__right{
	left: auto;
	right: 0;
	transition-delay: 0.1s;
}
/* ハンバーガーボタン */
#hamburgerAnimation{
	position: fixed;
	top: 0.3vw;
	left: 5%;
	transform: translateX(-50%);
}
#hamburgerAnimation svg {
  width: 5vw;
  height: 4vw;
  cursor: pointer;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
#hamburgerAnimation path {
  fill: none;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
  -moz-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
  -o-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
  -ms-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
  transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
  stroke-width: 25px;
  stroke-linecap: round;
  stroke: #ffffff;
	stroke-dashoffset: 0px;

}
#hamburgerAnimation path#top,
#hamburgerAnimation path#bottom {
  stroke-dasharray: 240px 950px;
}
#hamburgerAnimation path#middle {
  stroke-dasharray: 240px 240px;
}
.cross #hamburgerAnimation path#top,
.cross #hamburgerAnimation path#bottom {
  stroke-dashoffset: -650px;
	stroke-dashoffset: -650px;

}
.cross #hamburgerAnimation path#middle {
  stroke-dashoffset: -115px;
  stroke-dasharray: 1px 220px;
}

.contact_notice{
	line-height: initial;
	font-size: 14px;
	background: #fffbd9;
	padding: 10px 20px;
	border: 1px solid #FFEB3B;
}

/* #nav */
#nav{
	position: fixed;
	z-index: 15;
	visibility: hidden;
	opacity: 1;
	width: 84rem;
	font-size: 5rem;
	line-height: 7.5rem;
	transform: translateY(-50%);
	top: 50%;
	opacity: 0;
	transition: 0.5s;
	width: 100%;
}
.cross #nav{
	visibility: visible;
	opacity: 1;
	transition: 0.5s;
}
#nav ul{
	padding: 0 0 0 30%;
}
#nav li{
	visibility: hidden;
	opacity: 0;
	transition: 0.5s;
	transition-delay: 0.5s;
	transform: translate(0, 100%);
}
.cross #nav li{
	visibility: visible;
	opacity: 1;
	transition-delay: 0.5s;
	transform: translate(0, 0) skew(0);
}
#nav a{
	display: inline-block;
	color: #fff;
	text-decoration: none;
	line-height: 1.5;
	padding: 10px 0;
} 
#nav .active a{
	color: #FF5B46;
} 
#nav .active.top_active a{
	color: #fff;
}
.cross #nav a{
	transition: color .4s;
}
.cross #nav a:hover{
	color: #FF5B46;
}
.cross #nav li:nth-of-type(2){
	transition-delay: 0.6s;
}
.cross #nav li:nth-of-type(3){
	transition-delay: 0.7s;
}
.cross #nav li:nth-of-type(4){
	transition-delay: 0.8s;
}
.cross #nav li:nth-of-type(5){
	transition-delay: 0.9s;
}
.cross #nav li:nth-of-type(6){
	transition-delay: 1.1s;
}
#nav .dot{
	background-color: #FF5B46;
	width: 6px;
	height: 6px;
	position: absolute;
	top: 0px;
	left: 28%;
	border-radius: 50%;
	transition-duration: 0.5s;
	opacity: 0;
	visibility: hidden;
}
.cross #nav .dot{
	opacity: 1;
	visibility: visible;
}
#credit{
	color: #fff;
	font-size: 1.2rem;
	position: absolute;
	left: -2%;
	display: inline-block;
	top: calc(100% - 1rem);
	line-height: initial;
	transform: rotate(-90deg);
}

#progress{
	position: fixed;
	top: 0;
	left: 0;
	transform-origin: 50% 0;
	background: #ff5b46;
	z-index: 100;
	width: 3px;
	height: 100%;
}
.cross #progress{
	display:none;
}

.line{
	height: 100%;
	position: fixed;
	bottom: 0;
	top: 0;
	width: 1px;
	background: rgba(0,0,0,.03);
	z-index: 30;
}
.l1{
	left: 10%;
}
.l2{
	left: 30%;
}
.l3{
	left: 50%;
}
.l4{
	left: 70%;
}
.l5{
	left: 90%;
}
.cross .line{
	background: rgba(255,255,255,.03);
}

::selection{
	background: #ff5b46;
	color: #ffffff;
}

/* for Firefox */
::-moz-selection{
	background: #ff5b46;
	color: #ffffff;
}

.section-offset{
	max-width: 1720px;
	padding: 3% 10%;
}

.flex{
	display: flex;
}
.flex-reverse{
	flex-flow: row-reverse;
}
.pb56{
	padding-bottom: 5.6vw;
}
.pb36{
	padding-bottom: 3.6vw;
}

.animation-down,
.animation-up{
	transition: all 1000ms 0s ease;
}
.formError { z-index: 7!important; }
.formError .formErrorContent { z-index: 8!important; }
.formError .formErrorArrow { z-index: 9!important; }

#footer{
	text-align: center;
	padding: 0 0 5vw;
}
#gotop{
	display: inline-block;
	width: 5vw;
}
#gotop a{
	display: inline-block;
	width: 100%;
	height: 100%;
}

/* 1000px以下 */
@media screen and (max-width: 1000px) {
#header{
	height: 55px;
}
.header__content{
	width: 100px;
}
#hamburgerAnimation{
	top: 0;
}
#hamburgerAnimation svg{
	width: 100px;
	height: 50px;
}
.section-offset{
	padding-top: 70px;
}
#nav{
	font-size: 40px;
}
#nav .dot{
	left: 26%;
}
html{
	font-size: 62.5%;
}
body{
	font-size: 1.6rem;
}
h2{
	font-size: 4.6rem!important;
}
h3{
	font-size: 2.8rem!important;
}
}
#gotop{
	width: 50px;
}

/* 500px以下 */
@media screen and (max-width: 500px) {
	#hamburgerAnimation{
		left: 20px;
	}
	.header__content{
		top: 11px;
		left: 45px;
	}
	h3{
		font-size: 2.2rem!important;
	}
	.pb56 {
    padding-bottom: 20px;
	}
	#credit{
		left: -64px;
		top: auto;
    bottom: 120px;
	}
	#nav{
		font-size: 2.4rem;
		line-height: 5.5rem;
	}
	
}