@charset "utf-8";

/*==================================================
　機能編 4-1-5　ロゴアウトラインアニメーション
===================================*/

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

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

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

/*=============== SVGアニメーション内の指定 =================*/

/*アニメーション前の指定*/
#mask path {
		fill-opacity: 0;/*最初は透過0で見えない状態*/
		transition: fill-opacity .5s;/*カラーがつく際のアニメーション0.5秒で変化*/
		fill: none;/*塗りがない状態*/
		stroke: #fff;/*線の色*/
	}

/*アニメーション後に.doneというクラス名がで付与された時の指定*/
#mask.done path{
	  fill: none;/*塗りの色*/
	  fill-opacity: 1;/*透過1で見える状態*/
	  stroke: #fff;/*線の色なし*/
	}

/*==================================================
　機能編 4-2-1　背景色が伸びる（上から下）
===================================*/

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

body.appear .splashbg{
    display: block;
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
	left: 0;
    transform: scaleY(0);
    background-color:#504237;/*伸びる背景色の設定*/
	animation-name:PageAnime;
	animation-duration:0.7s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
}

@keyframes PageAnime{
	0% {
		transform-origin:top;
		transform:scaleY(0);
	}
	50% {
		transform-origin:top;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:bottom;
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}

/*画面遷移の後現れるコンテンツ設定*/
#container{
    position: relative;
    z-index: 1;
	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;
}
}

/*===========================================================*/
/*機能編 9-1-1	縦線が動いてスクロールを促す*/
/*===========================================================*/

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

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
	position: absolute;
	left:-15px;
	top: -15px;
    /*テキストの形状*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 30px;
	background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}

.scrolldown_dl {
  position: relative;/*スクロール表示の親*/
}

.scrolldownsab{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	left:25%;
	bottom:0;
	transform: translateX(-50%);
    /*全体の高さ*/
	height:30px;
	animation: arrowmove 1s ease-in-out infinite;
}

@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:5%;}
     100%{bottom:1%;}
 }

/* 線の描写 */
.scrolldownsab:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 2px;
    height: 15px;
    background: #eee;
    transform: skewX(-31deg);
}

.scrolldownsab:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	right:0;
    /*矢印の形状*/
	width:2px;
	height: 30px;
	background:#eee;
}

@media screen and (max-width:550px){
	.scrolldownsab{
		left:50%;
	}
}

.yajirusi_anime{
  animation-name: yajirusi_img_anime;
  animation-duration: 1.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

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

.yajirusi_anime_2{
  animation-name: yajirusi_img_anime_2;
  animation-duration: 1.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

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


.btn{
    position: relative;
	overflow: hidden;
	text-decoration: none;
	display: inline-block;
   	border: 1px solid #fff;
    padding: 10px 30px;
    text-align: center;
    outline: none;
		margin-top: 2.5vh;
}

.font_color_black_boder{
			border: 1px solid #333;
			color: #333;
			margin-top: 2.5vh;
}

.sp_contact_btn {
	display: block;
}

.btn span {
	position: relative;
	z-index: 3;
	color:#fff;
}

.font_color_black_boder span{
		color:#333;
}

/*===========================================================*/
/*印象編　8-10 テキストがタイピング風に出現*/
/*===========================================================*/

.TextTyping span {
	display: none;
}

.TextTyping::after {
 	content: "|";
	animation: typinganime 5.0s ease infinite;
    font-weight: normal;
    padding: 0 0 0 10px;
}

@keyframes typinganime{
	from{opacity:0}
	to{opacity:1}
}


.TextTyping_2 span {
	display: none;
}

.TextTyping_2::after {
 	content: "|";
	animation: typinganime_2 5.0s ease infinite;
    font-weight: normal;
    padding: 0 0 0 10px;
}

@keyframes typinganime_2{
	from{opacity:0}
	to{opacity:1}
}


/*＝＝＝＝＝＝＝＝＝＝＝サービスページcases img アニメ＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.before_after_anime {
	margin: auto;
	position: relative;
}

.before_after_anime img {
	height: 70vh;
	animation-name: album;
	-webkit-animation-name: album;
	animation-duration: 10s;
	-webkit-animation-duration: 10s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	opacity: 0;
}

@media screen and (max-width:1020px){

	.before_after_anime img {
		height: 40vh;

	}
}

@media screen and (max-width:550px){

	.before_after_anime img {
		height: 70vh;

	}
}

.before_after_anime .before_sp_img {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

.before_after_anime .after_sp_img {
	animation-delay:5s;
		-webkit-animation-delay:5s;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}


@keyframes album {
	0% {
		opacity: 0;
	}

	12.5% {
		opacity: 1;
	}

	37.5% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}

	@-webkit-keyframes album {
	0% {
		opacity: 0;
	}

	12.5% {
		opacity: 1;
	}

	37.5% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}