@charset "utf-8";

/* loading ---------------------------------------------------------*/
/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10001;
  background:#f5fafc;
  text-align:center;
  color:#fff;
}

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

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

/* fadeUpをするアイコンの動き */

.fadeUp{
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);
  }
}


/*mv*/
#mv { position: relative; width: 100%; padding-bottom: 3rem; }
.catch_area { padding: 220px 5% 40px; }
.txt_area { margin-top: 3rem;  }
.catch { margin-bottom: 2rem; }
.catch > span { font-size: 3.2rem; line-height: 1; letter-spacing: 7px; border: 1px solid; }
.slide { width: 58%; order: 1; }
.mv_txt { text-align: center; }
#mv .reserve { margin-top: 2rem; }

/*くるくる回る*/
@keyframes rotation {
  0% { transform: rotateZ(0);}
  100% { transform: rotateZ(360deg); }
}

.spin_img { position: absolute; left: 5%; bottom: 50px; width: 160px; height: 160px; background: url("../img/top/circle_arrow.png") no-repeat 0 0; }
.spin_img img { animation: 10s linear infinite rotation; }


/*ここから文字が左から出てくる動作*/
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger {
  opacity: 0;
}

/*========= 親要素と子要素の共通CSS ===============*/

.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden; /*　はみ出た色要素を隠す　*/
  opacity: 0;
}

@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*中の要素*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 2.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

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

/*==================================================
左から右に伸びて出現
===================================*/
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
	top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: #285a87; /*伸びる背景色の設定*/
	opacity: 0;
}
@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
    opacity: 1;
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
    opacity: 1;
  }
  50.001% {
    transform-origin: right;
    opacity: 1;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
    opacity: 1;
  }
}



/*==================================================
contents*/

#intro { margin: 0 15%; padding: 1rem 2%; text-align: center; background: url("../img/top/bg_intro_01.png") no-repeat 0 0/contain,url("../img/top/bg_intro_02.png") no-repeat 100% 0/contain; }
#intro .secTtl { margin-bottom: 0; } 
#intro .txt { font-size: 1.1rem; line-height: 2.8; } 

.whatsList li { width: 30%; padding: 4rem 4% 1rem; text-align: center; }
.whatsList li .ttl { margin-top: 1rem; font-size: 1.3rem; letter-spacing: 3px; }
.whatsList li .txt { text-align: left; }
.whatsList li .what_img { position: relative; z-index: 1; width: 155px; }

.worksList > li a.thumbnail img { margin-bottom: 1rem; }

.planList li { width: 30%; }

.flowList li { width: 14%; }
.flowList li div { position: relative; min-height: 182px; padding: 2rem 2% 1rem; text-align: center; border: 1px solid #285a87; border-radius: 30px; }
.flowList li .no { position: absolute; top: -15px; left: -6px; content: ""; margin: 0; padding: 1rem 2rem 1.5rem 1rem; font-size: 2rem; line-height: 1; background: #f5fafc; }
.flowList li img { width: 60px; position: relative; z-index: 1; }
.flowList li .ttl { margin: 1.5rem 0 0; line-height: 1.5; }
.flowList li:not(:last-child) div:after { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: -34%; width: 30px; height: 23px; background: url("../img/top/arrow.png") no-repeat 0 0 / 100%; }

.faq a { padding: 3rem 2%; font-size: 1.1rem; text-align: center; border: 1px solid #285a87; border-radius: 30px; }

.line_list { width: 80%; margin: 20px auto 0; border-top: 1px solid #a1b1bf; }
.line_list dt,.line_list dd { padding: 20px 10px; border-bottom: 1px solid #a1b1bf; }
.line_list dt { width: 15%; color: #003f73; }
.line_list dd { width: 85%; }



/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {

	

	


}

/* 1024以上(PC) */
@media screen and (min-width: 1024px) {



}


/* ================================================================
  タブレット
=================================================================== */
@media screen and (max-width: 1024px) {
	.catch_area { padding-top: 60px; }
	.slide { width: 100%; }
	.spin_img { left: auto;bottom: auto;right: 5%; top: 100px; }
	
	#intro { margin: 0 5%; }
	#whats .sec { padding: 100px 0; }
	.whatsList li .ttl { font-size: 1.1rem; }
	.planList li .ttl { font-size: 1.1rem; }

	.planList li dd .big { font-size: 1.5rem; }
	.planList li dd .medium { font-size: 1.3rem; }
	
	.flowList { justify-content:center!important; -webkit-justify-content:center!important; }
	.flowList li { width: 29%; margin: 0 2%; }
	.flowList li:not(:last-child) div:after { right: -15%; }
	
	
	
	
}

/* タブレットのみ */ 
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.planList li dt { width: 100%; text-align: left; } 
	.planList li dd { width: 100%; }
}



/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
	
	.catch_area { padding-top: 100px; }
	.catch > span { font-size: 2.2rem; }
	
	.spin_img { top: auto; bottom: 30px; width: 110px; height: 110px; background: url(../img/top/circle_arrow.png) no-repeat 0 0 / 110px; }
	
	#intro { background: none; }
	#intro .txt { font-size: 15px; }
	
	#whats .sec { padding: 30px 0; }
	.whatsList li { width: 100%; padding: 4rem 8% 1rem; }
	.whatsList li:not(:last-child) { margin-bottom: 3rem; }
	
	.worksList > li { width: 47%; margin-bottom: 2rem; }

	.planList li { width: 100%; padding: 2rem 8% 3rem; }
	.planList li:not(:last-child) { margin-bottom: 3rem; }
	
	.flowList li { width: 80%; margin: 0 auto 2rem; }
	.flowList li:last-child { margin-bottom: 0; }
	
	.flowList li div { min-height: auto; padding: .5rem 2% 2rem; }
	.flowList li img { width: 100px; float: left; padding: 1rem 0 0 2rem; }
	.flowList li:not(:last-child) div:after { right: auto; left: 45%; transform: rotate(90deg); bottom: -283px;  }
	
	.faq a { padding: 2rem 2%; }
	
	.line_list { width: 100%; }
	.line_list dt,
	.line_list dd { width: 100%; padding: 10px 10px; }
	.line_list dt { padding-bottom: 0; border-bottom: none; }
	.line_list dd { padding-top: 0; }
	
	
	
}