@charset "utf-8";

html{
	font-size: 62.5%;
}
@media screen and (max-width: 1330px){
html{
	font-size: 58%;
}
}
@media screen and (max-width: 520px){
  html{
    font-size: 54.6875%; /*14px*/
  }
}

/*--------------------------------------*/

body{
  font-size: 1.6rem;
	font-family: "Noto Sans JP", sans-serif !important;
	line-height: 1.75 !important;
	font-weight: bold;
}
@media screen and (max-width: 1330px){
	body{
		font-size: 1.5rem;
	}
}
@media screen and (max-width: 520px){
	body{

	}
}

@keyframes csn-rotate{
	to{
		transform: rotate(360deg);
	}
}

/*--------------------------------------*/

#wrapper{
	
}
@media screen and (min-width: 521px){
	#wrapper{

	}
}
@media screen and (max-width: 520px){
	#wrapper{

	}
}

/*--------------------------------------*/

#main{
	
}
@media screen and (min-width: 521px){
	#main{

	}
}
@media screen and (max-width: 520px){
	#main{

	}
}

/*--------------------------------------*/

#contents{
	min-height: 100vh;
}
@media screen and (min-width: 521px){
	#contents{

	}
}
@media screen and (max-width: 520px){
	#contents{

	}
}

/*--------------------------------------------------------------------*/

.cta.contact{
	padding: 4em 5vw 6em 5vw;
	background-color: var(--bg_dark);
	color: #fff;
}
.cta.contact .heading{
	margin-bottom: 2em;
}
.cta.contact .bodying{
	max-width: 31em;
	margin: 0 auto;
}
.cta.contact .bodying .link{
	margin-top: 3em;
}
.cta.contact .bodying .link a{
	width: 20em;
	max-width: 100%;
	box-sizing: border-box;
	background-color: #fff;
	color: #000;
	margin: 0 auto;
	padding: 1em 1.25em;
	border-radius: .75em;
	font-size: 125%;
}
.cta.contact .bodying .link a .icon{
	padding-left: 1.75em;
	background-image: url("../img/icons/email.svg");
	background-repeat: no-repeat;
	background-position: left top 60%;
	background-size: 1.2em auto;
}
@media screen and (max-width: 520px){
	.cta.contact{
		padding: 4em 5vw 4em 5vw;
	}
	.cta.contact .heading .ja{
		font-size: 200%;
	}
	.cta.contact .bodying .link a{
		font-size: 110%;
	}
}

/*--------------------------------------------------------------------*/

.link a{
	display: inline-block;
}
.link a .button{
	display: inline-block;
  padding: 1em 2em;
  background-color: var(--c_al_gray);
  color: #fff;
}
@media screen and (max-width: 520px){
	.link a .button{
		min-width: 12em;
		text-align: center;
	}
}

/*--------------------------------------------------------------------*/

.common.title .en{
	margin-bottom: .5em;
	font-size: 112.5%;
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--c_slightgray);
}
.common.title .ja{
	font-size: 287.5%;
  line-height: 1.4545;
}
@media screen and (max-width: 520px){
	.common.title .en{
		font-size: clamp(1.2rem, 3.4vw, 1.4rem);
	}
	.common.title .ja{
		font-size: clamp(2.4rem, 7vw, 5.6rem);
	}
}

/*--------------------------------------*/

#sidebar{
	
}
@media screen and (min-width: 521px){
	#sidebar{

	}
}
@media screen and (max-width: 520px){
	#sidebar{

	}
}

/*--------------------------------------*/

footer{
	
}
@media screen and (min-width: 521px){
	footer{

	}
}
@media screen and (max-width: 520px){
	footer{

	}
}

/**********************************************************************/
/*  ローディングアニメーション
/**********************************************************************/

[data-load="wait"]{
  height: 100vh;
}
[data-load="wait"] #wrapper{
  opacity: 0;
}
[data-load="wait"] header{
  transform: translate(0, -100%);
}
[data-load="wait"] #loading_bar{
  content: "";
  display: block;
  width: 100vw;
  height: 1px;
  margin-top: 50vh;
  background-color: var(--border_gray);
  position: fixed;
}
[data-load="wait"] #loading_bar .progress_bar{
  background-color: var(--bg_dark);
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
}
[data-load="done"]{
  position: static;
  height: auto;
}
[data-load="done"] #wrapper{
  opacity: 1;
  transition: opacity 2s;
}
[data-load="done"] header{
  transform: translate(0, 0);
  transition: transform 1s ease-out, backdrop-filter .4s;
  transition-delay: 1s;
}