@charset "utf-8";
/* CSS Document */
body {
	background-color: #000;
}
/*========= ローディング画面のためのCSS ===============*/
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #000;
	z-index: 9999999;
	text-align:center;
	color:#fff;
}

#splash-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/* Loading アイコンの大きさ設定　*/
#splash-logo img {
	display: block;
	opacity: 0.3;
  width:20vw;
}

/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/
.splashbg{
    display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg{
    display: block;
    content: "";
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
	left: 0;
    transform: scaleX(0);
    background-color: #131388;/*伸びる背景色の設定*/
	animation-name:PageAnime;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
}

@keyframes PageAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/*画面遷移の後現れるコンテンツ設定*/
#container{
	opacity: 0;/*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}


/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:260px;
}

/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}
/* fadeDownをするアイコンの動き */
.fadeDown{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*==================================================
スライダーのためのcss
===================================*/
#main-img {
	position: relative;
    width: 100%;
    height: 100svh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
#slider {
    width: 80%;
	margin: 0 0 0 20%;
    height: 95svh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
.top-copy {
	width: 95%;
	position: absolute;
	top: 50%;
	left: 5%;
	transform: translateY(-50%);
	margin: 0;
	color: #fff;
}
.top-copy h2 {
	font-family: "Oswald", sans-serif;
	font-size: 7rem;
  	font-weight:400;
	margin: 0;
	padding: 0;
}
.top-copy .text-s {
	width: 95%;
	font-size: 0.8rem;
	margin: 30px 0;
}
.top-copyright {
	font-size: 0.9rem;
	letter-spacing: 1px;
	position: relative;
	left: 60%;
	top: -5vh;
	display: block;
	text-align: right;
	color: #fff;
	background-color: #131388;
	height: 10vh;
	width: 35%;
	padding: 0 5% 0 0 ;
	line-height: 10vh;
}

.top-maintext {
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	font-size: 2rem;
	font-weight: normal;
	letter-spacing: 2px;
	color: #fff;
	text-align: center;
	margin: 7% auto;
}


.tit-blue, .tit-white {
	position: relative;
	display: inline-block;
	margin-top: 1em;
}
.tit-blue:before {
  content: '';
  position: absolute;
  top: -10px;
  display: inline-block;
  width: 50px;
  height: 4px;
  left: 10%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #2548aa;
}
.tit-white:before {
  content: '';
  position: absolute;
  top: -10px;
  display: inline-block;
  width: 50px;
  height: 4px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #ffffff;
}
.tit-blue h2, .tit-white h2 {
	font-family: "Oswald", sans-serif;
	font-size: 4rem;
  	font-weight:400;
	margin: 0;
	padding: 0;
}
.top-about {
	display: flex;
}
.top-about .image {
	width: 50%;
}
.top-about .image img {
	object-fit: cover;
	height: 110%;
}
.top-about .text {
	background-image: radial-gradient(at 100% 100%, #18186c, #000000 50%);
	width: 40%;
	padding: 0 5% 5% 5%;
	color: #fff;
}
.top-about-text, .top-service-text {
	margin: 7% 0;
}

/*SERVICE*/
.top-service {
	display: flex;
	flex-direction: row-reverse;
	width: 90%; 
	max-width: 1400px;
	position: relative;
	z-index: 2;
	margin: -150px auto 0 auto;
	padding: 0;
}
.top-service .image {
	width: 60%;
	max-width: 836px;
}
.top-service .image img {
	object-fit: cover;
	height: 100%;
}
.top-service .text {
	width: 35%;
	padding: 0 5% 0 0;
}

.top-service-list {
	width: 90%;
	max-width: 1400px;
	background-color: #f6f8f9;
	color: #2548aa;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
  	align-items: center;
	border-radius: 100vh;
	margin: 5% auto 7% auto;
	padding: 0.5rem;
}
.top-service-list li {
	margin: 2%;
}

/*WORKS*/
.top-works {
	position: relative;
	z-index: 2;
	color: #ffffff;
	text-align: center;
	background-image: url("../images/top/top_works_back_pc.png");
	background-size: cover;
    background-repeat: no-repeat;
	background-position: left 0% top 0%;
	padding: 7% 0;
}
.center a {
	margin: 0 auto;
}

/*PRICE*/
.top-price {
	background-color: #f6f8f9;
	background-image: url("../images/top/top_plice-pc.png");
	background-size: auto 100%;
    background-repeat: no-repeat;
	background-position: right 0% top 0%;
	z-index: -1;
	margin: -70px 0 0 0;
	padding: 70px 0 0 0;
}
.top-price-box {
	width: 90%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 5% 0 ;
}
.top-price-text {
	text-align: left;
	margin: 5% 0;
}


/*=== 9-1-2 丸が動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:12vh;
	right:8%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:10px;
    /*テキストの形状*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
	width:10px;
	height:10px;
	border-radius: 50%;
	background:#eee;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:2px;
	height: 50px;
	background:#eee;
}



@media screen and (max-width: 768px) {
#splash-logo img {
  width:40vw;
}
	
#main-img {
	position: relative;
    width: 100%;
    height: 100svh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
#slider {
    width: 100%;
	margin: 0;
    height: 97svh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
.top-copy h2 {
	font-family: "Oswald", sans-serif;
	font-size: 5rem;
  	font-weight:400;
}
.top-copyright {
	font-size: 0.7rem;
	letter-spacing: 1px;
	position: relative;
	left: 25%;
	top: -3vh;
	display: block;
	text-align: right;
	color: #fff;
	background-color: #131388;
	height: 6vh;
	width: 70%;
	padding: 0 5% 0 0 ;
	line-height: 6vh;
}

.top-maintext {
	font-size: 1.4rem;
	font-weight: normal;
}
	

/*TITLE*/
.tit-blue {
	position: relative;
	display: inline-block;
	margin-top: 1em;
}
.tit-blue:before {
  left: 50%;
}
.tit-blue h2, .tit-white h2 {
	font-family: "Oswald", sans-serif;
	font-size: 2.6rem;
  	font-weight:400;
	margin: 0;
	padding: 0;
}
	
/*ABOUT*/
.top-about {
	text-align: center;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}
.top-about .image {
	width: 90%;
	margin: 5% auto;
}
.top-about .text {
	text-align: center;
	width: 90%;
	padding: 5% 5% 10% 5%;
	margin: 0;
}
.top-about-text {
	text-align: left;
	margin: 7% 0;
}
	
/*SERVICE*/
.top-service {
	text-align: center;
	display: block;
	width: 100%;
	margin: -100px 0 0 0;
	padding: 0;
}
.top-service .image {
	width: 90%;
	margin: 3% auto 0 auto;
}
.top-service .text {
	text-align: center;
	width: 90%;
	padding: 5%;
	margin: 0;
}
.top-service-text{
	text-align: left;
	margin: 5% 0;
}
.top-service-list {
	margin: 3% auto 7% auto;
	padding: 0.5rem;
}
.top-service-list li {
	font-size: 0.8rem;
	margin: 1% 2%;
}
	
/*WORKS*/
.top-works {
	background-image: url("../images/top/top_works_back_sp.jpg");
}
	

/*PRICE*/
.top-price {
	text-align: center;
	background-color: #f6f8f9;
	background-image: url("../images/top/top_plice-sp.png");
	background-size: 100% auto;
    background-repeat: no-repeat;
	background-position: left 0% bottom 0%;
	z-index: -1;
	margin: 0;
	padding: 7% 0 0 0;
}
.top-price-box {
	padding: 0 0 300px 0 ;
}

	
}