/* top
=================================================================== */
.loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent linear-gradient(270deg, #1d233b 0%, #1d69a9 100%) 0% 0% no-repeat padding-box;
	z-index: 20; 
}
.loading .loding__wrapper {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	overflow: hidden;
	animation: loadingAnime 1s ease-in-out; 
}
.loading .loding__wrapper .logo svg {
	fill: #fff; 
}
.loading .loding__wrapper .logo h1 {
	color: #fff;
	font-weight: bold;
	font-size: 1.3rem;
}

body.home header .header__inner nav .header__nav a,
body.home header .header__inner nav .header__nav a:visited {
color:#fff !important;
}

body.home header .header__inner nav .header__nav a:hover {
color:#d1e6ff !important;
}


.top {
/* =================================================================== */ }
.top .fv {
	height: 100vh;
	margin-bottom: 10rem;
	background: #eee;
	position: relative; 
}
.top .fv .fv__img {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden; 
}
.top .fv .fv__img li {
	width: 100%;
	height: 100vh;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover; 
}
.top .fv .fv__img .add-animation {
	animation: scaleAnime linear 8s forwards; 
}
.top .fv .fv__inner {
	position: relative;
	z-index: 1;
	width: calc(100% - 7.4vw);
	height: calc(100% - 6rem);
	margin-left: 6rem; 
}
.top .fv .fv__inner .fv__copy {
	position: absolute;
	left: 0;
	bottom: 0;
	color: #fff;
	font-weight: bold;
}
.top .fv .fv__inner .fv__copy p {
	font-size: 1.6rem;
	letter-spacing: 0.2em;			
}
.top .fv .fv__inner .fv__copy p.en {
	font-size: 7rem;
	line-height: 1;
	letter-spacing: .01em;
	margin-top: .5rem; 
}
.top .fv .fv__inner .scroll {
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 1.2rem;
	animation: scrollAnime .8s ease-in-out infinite alternate; }
	.top .fv .fv__inner .scroll svg {
	margin-left: 0.5rem; 
}


.top .service {
	background-image: url("../images/top_img01_pc.jpg");
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center;
	margin-bottom: 10rem; 
}
.top .service .service__inner {
	position: relative;
	z-index: 1;
	text-align: left;
	padding: 10rem 0 10rem 2rem;
	max-width: 80%;
	margin: 0 auto;
	color: #fff;
}
.top .service .title {
	font-size: 6rem;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: 5rem; 
}
.top .service h3 {
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: 1rem; 
}
.top .service h3 span {
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: 1rem;
	padding-left: 1.4rem;
}
.top .service h3 + p {
	font-size: 1.2rem;
	font-weight: bold;
	max-width: 600px;
}
.top .service .btn {
	margin: 4rem 0; 
}


.top .company {
	background-image: url("../images/top_img02_pc.jpg");
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center;
	margin-bottom: 10rem; 
}
.top .company .company__inner {
	position: relative;
	z-index: 1;
	text-align: left;
	padding: 10rem 0 10rem 2rem;
	max-width: 80%;
	margin: 0 auto;
	color: #fff;
}
.top .company .title {
	font-size: 6rem;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: 5rem; 
}
.top .company h3 {
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: 1rem; 
}
.top .company h3 span {
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: 1rem;
	padding-left: 1.4rem;
}
.top .company h3 + p {
	font-size: 1.2rem;
	font-weight: bold;
	max-width: 600px;
}
.top .company .btn {
	margin: 4rem 0; 
}


.top .sitelist {
	background-image: url("../images/top_img03_pc.jpg");
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center;
	margin-bottom: 10rem; 
}
.top .sitelist .sitelist__inner {
	position: relative;
	z-index: 1;
	text-align: left;
	padding: 10rem 0 10rem 2rem;
	max-width: 80%;
	margin: 0 auto;
	color: #fff;
}
.top .sitelist .title {
	font-size: 6rem;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: 5rem; 
}
.top .sitelist h3 {
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: 1rem; 
}
.top .sitelist h3 span {
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: 1rem;
	padding-left: 1.4rem;
}
.top .sitelist h3 + p {
	font-size: 1.2rem;
	font-weight: bold;
	max-width: 600px;
}
.top .sitelist .btn {
	margin: 4rem 0; 
}



.top .gotoshop {
	margin-bottom: 10rem; 
}
.top .gotoshop .gotoshop__inner {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 0;
	margin: 0 auto;
	color: #111;
}
.top .gotoshop .title {
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: 5rem; 
}
.top .gotoshop  p {
	font-size: 1.2rem;
	font-weight: bold;
	margin: 0 auto;
	max-width: 700px;
	text-align: center;
	
}
.top .gotoshop  p > img {
	width: auto;
}









@media only screen and (max-width: 767px) {
	
/* top
=================================================================== */
@keyframes loadingAnime {
	0% {
	width: 0; }
	100% {
	width: 13.3rem; } 
}
@-webkit-keyframes loadingAnime {
	0% {
	width: 0; }
	100% {
	width: 13.3rem; } 
}

.loading .loding__wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
overflow: hidden;
animation: loadingAnime 1s ease-in-out; 
}	
.loading .loding__wrapper .logo h1 {
	color: #fff;
	font-weight: bold;
	font-size: 1.2rem;
}	

	
	
body.home header .header__inner .sp__btn span {
    background: #fff !important;
  }
body.home header .header__inner .sp__btn span:after, body.home header .header__inner .sp__btn span:before {
    background: #fff !important;
  }	
	
	
	
.top {
/* common =================================================================== */
/* =================================================================== */ }

.top .title {
	font-size: 4rem; 
}
.top .title span {
	font-size: 1.8rem; 
}
.top .fv {
	margin-bottom: 8rem; 
}
.top .fv .fv__inner {
	width: calc(100% - 4rem);
	height: calc(100% - 4rem);
	margin-left: 2rem;
}
.top .fv .fv__inner .fv__copy {
	bottom: 10rem; 
	max-width: 100%;
}
.top .fv .fv__inner .fv__copy p {
	font-size: 1.5rem;
	letter-spacing: 0.3em; 
}
.top .fv .fv__inner .fv__copy p.en {
	font-size: 4.4rem; 
	max-width: 100%;
	line-height: 1.4;
	letter-spacing: 0;
	margin-top: 1rem; 
}
.top .fv .fv__inner .scroll {
	color: #fff;
	left: 50%;
	right: auto;
	animation: scrollAnime .8s ease-in-out infinite alternate; 
}
.top .fv .fv__inner .scroll svg path {
	stroke: #fff; 
}


.top .service {
	background-position: center;
	background-image: url("../images/top_img01_sp.jpg");
	margin-bottom: 8rem; 
}
.top .service .service__inner {
    position: relative;
    z-index: 1;
    text-align: left;
    padding: 10rem 0 10rem 0;
    max-width: 80%;
    margin: 0 auto;
    color: #fff;
}	
.top .service .title {
	font-size: 5rem;
	margin-bottom: 2rem; 
}
.top .service h3 {
	font-size: 2.4rem;
	margin-bottom: 2rem; 
}
.top .service h3 span {
	font-size: 1.2rem;
	margin-bottom: 2rem; 
}	
.top .service h3 + p {
	margin-bottom: 8rem; 
}
.top .service h3 + p br {
	display: none;
}

	
.top .company {
	background-position: center;
	background-image: url("../images/top_img02_sp.jpg");
	margin-bottom: 8rem; 
}
.top .company .company__inner {
    position: relative;
    z-index: 1;
    text-align: left;
    padding: 10rem 0 10rem 0;
    max-width: 80%;
    margin: 0 auto;
    color: #fff;
}	
.top .company .title {
	font-size: 4rem;
	margin-bottom: 2rem; 
}
.top .company h3 {
	font-size: 2.4rem;
	margin-bottom: 2rem; 
}
.top .company h3 span {
	font-size: 1.2rem;
	margin-bottom: 2rem; 
}	
.top .company h3 + p {
	margin-bottom: 8rem; 
}
.top .company h3 + p br {
	display: none;
}	

	
	
.top .sitelist {
	background-position: center;
	background-image: url("../images/top_img03_sp.jpg");
	margin-bottom: 8rem; 
}
.top .sitelist .sitelist__inner {
    position: relative;
    z-index: 1;
    text-align: left;
    padding: 10rem 0 10rem 0;
    max-width: 80%;
    margin: 0 auto;
    color: #fff;
}	
.top .sitelist .title {
	font-size: 5rem;
	margin-bottom: 2rem; 
}
.top .sitelist h3 {
	font-size: 2.4rem;
	margin-bottom: 2rem; 
}
.top .sitelist h3 span {
	font-size: 1.2rem;
	margin-bottom: 2rem; 
}	
.top .sitelist h3 + p {
	margin-bottom: 8rem; 
}
.top .company h3 + p br {
	display: none;
}	
	
.top .gotoshop .title {
		font-size: 1.4rem;
}	
	

	
	
}