@charset "utf-8";

/*===========================================================*/
/* ■ SPLASH 背景色が伸びる								 */
/*===========================================================*/

/* ● MainConents  SPLASH */

	/*========= ローディング画面のためのCSS ===============*/
	#splash {
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 9999999;
		text-align:center;
		color:#fff;
/*
		background-image:
			url("../images/bg/brline03.svg"),
			url("../images/bg/brline04.svg");
		background-size:
			:contain,
			:contain;
		background-position:
			center top 65%,
			center top 75%;
		background-repeat:
			no-repeat,
			no-repeat;	*/
/*		background-color:linear-gradient( 45deg,#1F4175 0%,#1F4175 50%,#7282A7 100% );*/	/* 伸びる背景色の設定 suzumeya01,02 */
		background-color:#8d6d2b;		/* tranquwell01 */
		background-color:linear-gradient( 45deg,#8d6d2b 0%,#8d6d2b 50%,#B82E2B 100% );	/* 伸びる背景色の設定 tranquwell01,02 */
		background:
			url("../images/bg/brline01.svg") no-repeat center top 120%,
			url("../images/bg/brline02.svg") no-repeat center top 95%;
		background-color:#8d6d2b;		/* tranquwell01 */
	}
	#splash-cont {
		position: absolute;
		top: 43%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	#splash-cont {
		text-align:center;
	}
	#splash-cont img {
		width:421px;
		height:238px;
	}

	@media only screen and (min-width: 993px) and (max-width: 1400px) {	/*◇ PC-S */

	}
	@media only screen and (max-width:992px) {	/* SP Layout ◇ */

		#splash {
/*			background:linear-gradient( 45deg,#1F4175 0%,#1F4175 50%,#7282A7 100% ),	*/	/* 伸びる背景色の設定 suzumeya01,02 */
			background:linear-gradient( 45deg,#8d6d2b 0%,#8d6d2b 50%,#B82E2B 100% ),	/* 伸びる背景色の設定 tranquwell01,02 */
				url("../images/bg/brline03.svg"),
				url("../images/bg/brline04.svg");
			background-position:
				center top 43%,
				center top 50%;
			background-repeat:
				no-repeat,
				no-repeat;
		}
		#splash-cont {
			position: absolute;
			top: 45%;
			transform: translate(-50%, -50%);
		}
		#splash-cont img{
			width:80%;
			height:80%;
		}
	}

/*==================================================
　	■ 画面遷移アニメーション 背景色が伸びる（右から左）
===================================*/

/*画面遷移アニメーション*/

	.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(1);
		background-color:#8d6d2b;	/*伸びる背景色の設定*/		/* suzumeya01 */
		background:linear-gradient( 45deg,#8d6d2b 0%,#8d6d2b 50%,#B82E2B 100% );	/* 伸びる背景色の設定 tranquwell01,02 */
			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);
		}
	}
	/*画面遷移の後現れるコンテンツ設定*/

	#wrapper{
/*		opacity: 0;*/	/*はじめは透過0に*/
	}

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

/*===========================================================*/
/*  ページの指定の高さを超えたら右から出現	*/
/*===========================================================*/

/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	width: 100%;
	height: auto;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	transition:all 0.3s;
}

#page-top a:hover{
	
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	
	right: 0;
	bottom:10px;
	z-index: 9;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateX(100px);
}
@media screen and (min-width:769px) {
	#page-top {
		width: 150px;
	}
}
@media screen and (max-width:768px) {

	#page-top {
		position: fixed;
		right: 0;
		bottom: 20px;
		z-index: 9;
		width: 100px;
	}
}

/*　左の動き　*/

#page-top.LeftMove{
	animation: LeftAnime 0.5s forwards;
}

@keyframes LeftAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }
  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/*　右の動き　*/

#page-top.RightMove{
	animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime{
  from {
  	opacity: 1;
	transform: translateX(0);
  }
  to {
  	opacity: 1;
	transform: translateX(200px);
  }
}

/*===========================================================*/
/*	□ 任意の場所をクリックすると隠れていた内容が開き、先に開いていた内容が閉じる*/
/*===========================================================*/

/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 96%;
    max-width: 900px;
    margin:0 auto;
}

.accordion-area li{
    margin: 10px 0;
}

.accordion-area section {
	border: 1px solid #ccc;
}

/*アコーディオンタイトル*/
.title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1rem;
    font-weight: normal;
    padding: 3% 3% 3% 50px;
    transition: all .5s ease;
}

@media screen and (max-width:768px) {
.title {
    font-size:0.9rem;
}
}

/*アイコンの＋と×*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #333;
    
}
.title::before{
    top:48%;
    left: 15px;
    transform: rotate(0deg);
    
}
.title::after{    
    top:48%;
    left: 15px;
    transform: rotate(90deg);

}

/*　closeというクラスがついたら形状変化　*/

.title.close::before{
	transform: rotate(45deg);
}

.title.close::after{
	transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
    background: #f3f3f3;
	margin:0 3% 3% 3%;
    padding: 3%;
}

/*===========================================================*/
/* ■BASIC  animation ■ 																    */
/*===========================================================*/

	/*  ■ じわっ（ぼかしから出現） */
	.blur{
		animation-name: blurAnime;
		animation-duration:1s;
		animation-fill-mode:forwards;
	}

	@keyframes blurAnime{
	  from {
		filter: blur(10px);
		transform: scale(1.02);
		opacity: 0;
	  }

	  to {
		filter: blur(0);
		transform: scale(1);
		opacity: 1;
	  }
	}

	/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
	 
	.blurTrigger{
	    opacity: 0;
	}


	/* ■ スーッ（枠線が伸びて出現）*/

	.lineTrigger{
	  position: relative; /* 枠線が書かれる基点*/
	  opacity:0;
	}

	.lineTrigger.lineanime{
		animation-name:lineAnimeBase;
		animation-duration:.5s;
		animation-fill-mode:forwards;
	}

	@keyframes lineAnimeBase{
	  from {
	    opacity:0;
	  }

	  to {
	    opacity:1;  
	}
	}

	/*上下線*/
		.lineTrigger::before,
		.lineTrigger::after{
			position: absolute;
			content: '';
			width:0;
			height:1px;
			background:#A4966A;	/* ◆ 枠線の色 gold01 */
	}

	/*左右線*/
		.line2::before,
		.line2::after{
			position: absolute;
			content: '';
			width: 1px;
			height:0;
			background:#A4966A;	/* ◆ 枠線の色 gold01 */
		}

	/*上線*/
		.lineTrigger::before {
			top:0;
			left:0;
		}

	.lineTrigger.lineanime::before {
		animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
	}

	/*右線*/
	.line2::before{ 
		top:0;
		right:0;
	}

	.lineTrigger.lineanime .line2::before {
		animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
	}

	/*下線*/
	.lineTrigger::after { 
		bottom:0;
		right:0;
	}

	.lineTrigger.lineanime::after {
		animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
	}

	/*左線*/
	.line2::after{ 
		bottom:0;
		left:0;
	}

	.lineTrigger.lineanime .line2::after {
		animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
	}

	@keyframes lineAnime {
		0% {width:0%;}
	    100%{width:100%;}
	}

	@keyframes lineAnime2 {
		0% {height:0%;}
	    100%{height:100%;}
	}

	/*枠線内側の要素*/

	.lineTrigger.lineanime .lineinappear{
		animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
		opacity: 0;/*初期値を透過0にする*/	
	}

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

	/*  ■ パタッ（左へ） */
	.flipLeft {
		animation-name: flipLeftAnime;
		animation-duration:0.5s;
		animation-fill-mode:forwards;
		perspective-origin: left center;
		opacity:0;
	}
	@keyframes flipLeftAnime{
		from {
			transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
			opacity: 0;
		}
		  to {
			transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
			opacity: 1;
		}
	}

	/* ■ シャッ（左から）*/
	.bgextend {
		animation-name:bgextendAnimeBase;
		animation-duration:1s;
		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: 0.6s;
		animation-fill-mode:forwards;
		opacity: 0;
	}
	@keyframes bgextendAnimeSecond {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	.bgLRextend::before{
		animation-name:bgLRextendAnime;
		animation-duration:1s;
		animation-fill-mode:forwards;
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #eb6100;		/*◎ 伸びる背景色の設定 */
		background-color: #2843B6;		/* plumsa-blue01 */		/*◆ 伸びる背景色の設定 HISAYA-blue01 */
		background-color: #BDC3C7;		/*◆ 伸びる背景色の設定 SILVER */
	}
	@keyframes bgLRextendAnime{
		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);
		}
	}
	/* 4-1 ふわっ（下から） */
	.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);
		}
	}
	/* 4-2　パタッ（左へ） */
	.flipLeft {
		animation-name: flipLeftAnime;
		animation-duration:0.5s;
		animation-fill-mode:forwards;
		perspective-origin: left center;
		opacity:0;
	}
	@keyframes flipLeftAnime{
		from {
			transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
			opacity: 0;
		}
		  to {
			transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
			opacity: 1;
		}
	}

	/* スマホ表示用。flipLeftTriggerを指定している親要素に指定しないとうまく動かない*/
	#vision,.service-area {
		transform:  translate3d(0, 0, 0);
	}

	/* ●スクロールをしたら出現する要素にはじめに透過0を指定　*/
	.bgLRextendTrigger,.bgappearTrigger,.fadeUpTrigger,.flipLeftTrigger {
	 	opacity: 0;
	}


/*===========================================================*/
/* 印象編　6-6　スクロールすると下のエリアがヘッダーにかぶさる*/
/*===========================================================*/

#top-main{
	width:100%;
	height: 100vh;
	position: relative;
} 

#top-main:before{
	content: '';
	position:fixed;
	top:10vh;
	left:5%;
	z-index:-1;
	width:90%;
	height: 80vh;
	/*背景画像設定*/
	background:url("../images/fview/main.jpg") no-repeat center;
	background-size:cover;
}

@media screen and (max-width:768px) {
#top-main:before{
    background-position: top center;
    background-size:auto 90%;
    }
}

#container{
	position: relative;
	z-index:1;
	background:#fff;
}

/* ■ TEXT Effect　animation  */

/*========= 1文字ずつ出現させるためのCSS   ●script/ui/text.js =============*/
.eachTextAnime {
	color:transparent;
}
.eachTextAnime span{
	opacity: 0;
	font-weight:bold;
	/* font-family: "Lora", "Noto Serif JP", serif; */
	font-family: "minion-pro", "Noto Serif JP", serif;
	font-display: swap;
	color: #333;
}
.eachTextAnime02 {
	color:transparent;
}
.eachTextAnime02 span{
	opacity: 0;
	font-weight:bold;
	/* font-family: "Lora", "Noto Serif JP", serif; */
	font-family: "minion-pro", "Noto Serif JP", serif;
	font-display: swap;
	color:#FFF;
}
.eachTextAnime.appeartext span{
	animation:text_anime_on 0.05s ease-out forwards; 
	color: #555;
}
.eachTextAnime02.appeartext02 span{
	animation:text_anime_on 0.05s ease-out forwards; 
	color:#FFF;
}

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

/*========= 1文字ずつ出現させるためのCSS #02  ●script/ui/text.js =============*/

/*======================================================*/
/* ■ 波打つ（1 つ 重なりあり）													      */
/*======================================================*/

	#waveCanvas{
	/*	position: absolute;
		bottom: 0;
		left:0;	*/
		display:block;
		margin:-30px auto -30px auto;
		width: 100%;
		z-index: -1;
		background-color:transparent;
		background-image: url(../images/bg/bg_washi.png);
		background-size:48px 48px;
	}
	@media screen and (max-width:767px) {

		#waveCanvas{
			display:block;
			margin:-50px auto 0 auto;
		}
	}

/*==================================================
	複数の画像を一覧で見せる
===================================*/
.gallery{
	columns: 4;/*段組みの数*/
	padding:0 15px;	/* ギャラリー左右に余白をつける */
	padding:15px;
}

.gallery li {
	margin-bottom: 20px;/*各画像下に余白をつける*/
}

/*ギャラリー内のイメージは横幅100%にする*/
.gallery img{
	width:100%;
	height:auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/}

@media only screen and (max-width: 600px) {
	.gallery {
		columns: 2;
	}
}
/*======================================================*/
/* ■slick slider   フェードイン・アウトさせて全画面で見せる								*/
/*======================================================*/

.slider {
	position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	height: 90vh;/*スライダー全体の縦幅を90vhにする*/
}
/* ◆背景画像設定　*/
	.slider-item01 {
		background:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
		url("../images/fview/fv_01.jpg") no-repeat;
	}
	.slider-item02 {
		background:url(../images/fview/fv_02.jpg);
		background:linear-gradient(rgba(31, 65, 117, 0.1), rgba(31, 65, 117, 0.1)),
		url("../images/fview/fv_02.jpg") no-repeat;
	}
	.slider-item03 {
		background:url(../images/fview/fv_03.jpg);
	}
	.slider-item04 {
		background:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
		url("../images/fview/fv_04.jpg") no-repeat;
	}
	.slider-item05 {
		background:url(../images/fview/fv_05.jpg);
	}
	.slider-item {
		width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
		height:90vh;/*各スライダー全体の縦幅を90vhにする*/
		background-repeat: no-repeat;/*背景画像をリピートしない*/
		background-position: center;/*背景画像の位置を中央に*/
		background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
	}

	/* 矢印の設定 */
	.slick-prev, 
	.slick-next {
		position: absolute;
		z-index: 3;
		top: 42%;
		cursor: pointer;/*マウスカーソルを指マークに*/
		outline: none;/*クリックをしたら出てくる枠線を消す*/
		border-top: 2px solid #fff;/*矢印の色*/
		border-right: 2px solid #fff;/*矢印の色*/
		height: 25px;
		width: 25px;
	}
	.slick-prev {/*戻る矢印の位置と形状*/
		left:2.5%;
		transform: rotate(-135deg);
	}
	.slick-next {/*次へ矢印の位置と形状*/
		right:2.5%;
		transform: rotate(45deg);
	}
	/*ドットナビゲーションの設定*/
	.slick-dots {
		position: relative;
		z-index: 3;
		text-align:center;
		margin:-50px 0 0 0;/*ドットの位置*/
	}
	.slick-dots li {
		display:inline-block;
		margin:0 5px;
	}
	.slick-dots button {
		color: transparent;
		outline: none;
		width:8px;/*ドットボタンのサイズ*/
		height:8px;/*ドットボタンのサイズ*/
		display:block;
		border-radius:50%;
		background:#fff;/*ドットボタンの色*/
	}
	.slick-dots .slick-active button{
		background:#333;/*ドットボタンの現在地表示の色*/
	}
/*==================================================
 	クリックしたら円形背景が拡大（下から）
===================================*/
/*========= ナビゲーションのためのCSS ===============*/

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

	/*アクティブになったエリア*/
	#g-nav.panelactive{
		/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
		/*IE11対応のために今回は記述を削除
		position:fixed;
		z-index: 999;
		top: 0; */
		width:100%;
		height: 100vh;
	}
	/*丸の拡大*/
	.circle-bg{
		position: fixed;
		top:50px;
		z-index:3;
		/*丸の形*/
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background:#1F4175;		/* suzumeya01 */
		/*丸のスタート位置と形状*/
		transform: scale(0);/*scaleをはじめは0に*/
		bottom:-50px;
		left:calc(50% - 50px);/*50%から円の半径を引いた値*/
		transition: all .6s;/*0.6秒かけてアニメーション*/
	}
	.circle-bg.circleactive{
		transform: scale(50);/*クラスが付与されたらscaleを拡大*/
	}

	/*ナビゲーションの縦スクロール*/
	#g-nav-list{
		display: none;/*はじめは表示なし*/
		/*ナビの数が増えた場合縦スクロール*/
		position: fixed;
		z-index: 999; 
		width: 100%;
		height: 100vh;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	#g-nav.panelactive #g-nav-list{
		display: block; /*クラスが付与されたら出現*/
	}

	/*ナビゲーション*/
	#g-nav ul {
		opacity: 0;/*はじめは透過0*/
		/*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
		position: absolute;
		z-index: 999;
		top:40%;
		left:50%;
		transform: translate(-50%,-40%);
	}
	#g-nav ul li a {
		font-family: "Lora", "Noto Serif JP", serif;
		font-display: swap;
	}
	/*背景が出現後にナビゲーションを表示*/
	#g-nav.panelactive ul {
		opacity:1;
	}

	/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
	#g-nav.panelactive ul li {
		animation-name:gnaviAnime;
		animation-duration:1s;
		animation-delay:.2s;/*0.2 秒遅らせて出現*/
		animation-fill-mode:forwards;
		opacity:0;
	}
}

@keyframes gnaviAnime{
		0% {
			opacity: 0;
			transform: translateY(100px);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
}

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

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

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

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

/*==================================================
 機能編 7-1-47	矢印が右に移動して背景がつく 
===================================*/

.btnarrow5{
    /*矢印の基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/
	border: 1px solid #555;
    padding: 8px 30px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #333;
    outline: none;
    /*アニメーションの指定*/
    transition: all .2s linear;
    font-size: 0.9rem;
}

.btnarrow5:hover{
	background:#333;
	color:#fff;
}

/*矢印と下線の形状*/
.btnarrow5::before{
	content:"";
    /*絶対配置で下線の位置を決める*/
	position: absolute;
	top:50%;
	right:-26px;
    /*下線の形状*/
	width:40px;
	height:1px;
	background:#333;
    /*アニメーションの指定*/
    transition: all .2s linear;
}

.btnarrow5::after{
	content:"";
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    top: 20%;
    right: -21px;
    /*矢印の形状*/
	width:1px;
	height:12px;
	background:#333;
    transform:skewX(45deg);
    /*アニメーションの指定*/
    transition: all .2s linear;
}

/*hoverした際の移動*/
.btnarrow5:hover::before{
	right:-30px;
}

.btnarrow5:hover::after{
	right:-25px;
}

/*===========================================================*/
/* 機能編 8-1-6　ページの指定の高さを超えたら出現し、フッター手前で止まる*/
/*===========================================================*/

/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	color: #8d6d2b;
/*	border:1px solid #BDC3C7;	*/		/* Siver */
	transition:all 0.3s;
}

@media screen and (min-width:769px) {
	#page-top {
		right: 100px;
	}
}
@media screen and (max-width:768px) {
	#page-top {
		right: 20px;
	}
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	z-index: 2;
	cursor: pointer;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
	animation-delay:0s;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}

/*==================================================
 	■BASIC  animation ■
===================================*/

	/* じわっ（ぼかしから出現） */
	.blur{
		animation-name: blurAnime;
		animation-duration:1s;
		animation-fill-mode:forwards;
	}

	@keyframes blurAnime{
	  from {
		filter: blur(10px);
		transform: scale(1.02);
		opacity: 0;
	  }

	  to {
		filter: blur(0);
		transform: scale(1);
		opacity: 1;
	  }
	}

	/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
	 
	.blurTrigger{
	    opacity: 0;
	}


	/*スーッ（枠線が伸びて出現）*/

	.lineTrigger{
	  position: relative; /* 枠線が書かれる基点*/
	  opacity:0;
	}

	.lineTrigger.lineanime{
		animation-name:lineAnimeBase;
		animation-duration:.5s;
		animation-fill-mode:forwards;
	}

	@keyframes lineAnimeBase{
	  from {
	    opacity:0;
	  }

	  to {
	    opacity:1;  
	}
	}

	/*上下線*/
		.lineTrigger::before,
		.lineTrigger::after{
			position: absolute;
			content: '';
			width:0;
			height:1px;
			background:#A4966A;	/* ◆ 枠線の色 gold01 */
	}

	/*左右線*/
		.line2::before,
		.line2::after{
			position: absolute;
			content: '';
			width: 1px;
			height:0;
			background:#A4966A;	/* ◆ 枠線の色 gold01 */
		}

	/*上線*/
		.lineTrigger::before {
			top:0;
			left:0;
		}

	.lineTrigger.lineanime::before {
		animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
	}

	/*右線*/
	.line2::before{ 
		top:0;
		right:0;
	}

	.lineTrigger.lineanime .line2::before {
		animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
	}

	/*下線*/
	.lineTrigger::after { 
		bottom:0;
		right:0;
	}

	.lineTrigger.lineanime::after {
		animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
	}

	/*左線*/
	.line2::after{ 
		bottom:0;
		left:0;
	}

	.lineTrigger.lineanime .line2::after {
		animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
	}

	@keyframes lineAnime {
		0% {width:0%;}
	    100%{width:100%;}
	}

	@keyframes lineAnime2 {
		0% {height:0%;}
	    100%{height:100%;}
	}

	/*枠線内側の要素*/

	.lineTrigger.lineanime .lineinappear{
		animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
		opacity: 0;/*初期値を透過0にする*/	
	}

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

	/* ◎パタッ（左へ） */
	.flipLeft {
		animation-name: flipLeftAnime;
		animation-duration:0.5s;
		animation-fill-mode:forwards;
		perspective-origin: left center;
		opacity:0;
	}
	@keyframes flipLeftAnime{
		from {
			transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
			opacity: 0;
		}
		  to {
			transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
			opacity: 1;
		}
	}


/*==================================================
	■ SVG アニメーション
===================================*/

.svganimeblock svg{
	width:100%;	/*SVGのサイズ*/
}

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

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

/*===========================================================*/
/*	下線が伸びて背景に変わる*/
/*===========================================================*/

.btnlinestretches3 {
	/*線の基点とするためrelativeを指定*/
	position:relative;
    /*ボタンの形状*/  
	font-size:13px;
	color:#8d6d2b;
	padding: 5px 30px;
	display:inline-block;
	text-decoration: none;
	outline: none;
}

/*テキストの設定*/
.btnlinestretches3 span {
	/*テキストを前面に出すためz-indexの値を高く設定*/
	position:relative;
	z-index: 2;
	font-weight:bold;
	font-family: "Lora", "Noto Serif JP", serif;
	font-display: swap;
}
.btnlinestretches3:hover span{
	font-family: "Lora", "Noto Serif JP", serif;
	font-display: swap;
	color: #fff;
}
/*線の設定*/
.btnlinestretches3::after {
	content:'';
    /*絶対配置で線の位置を決める*/
	position:absolute;
	z-index:1;
	bottom:0;
	left:0;
    /*線の形状*/
	background:#8d6d2b;
	width:100%;
	height:3px;
    /*アニメーションの指定*/
	transition:all 0.3s ease-in-out;
}

/*線が伸びて背景に*/
.btnlinestretches3:hover::after {
	height:100%;
}


/* 一覧に戻る　Button :hover 「 □　→ ■  」  */

	.listbk {
		display:block;
		width:200px;
		height:45px;
		border:2px solid #8d6d2b;		/* tranquwell01 */
		float:left;
		text-align:center;
		cursor:pointer;
		position:relative;
		box-sizing:border-box;
		overflow:hidden;
		margin:0 0 40px 0;
		background	: url("../images/icon/btn-sym01.png") no-repeat;
		background-size:8px 8px;
		background-position: 10px  15px;
		background-color:#8d6d2b;		/* tranquwell01 */
	}
	.listbk  a{
		display:block;
		font-size:15px;
		color:#FFF;
		font-family: "Lora", "Noto Serif JP", serif;
		font-display: swap;
		text-decoration:none;
		line-height:39px;
		transition:all .5s ease;
		z-index:2;
		position:relative;
	}
	.eff-listbk {
		width:200px;
		height:45px;
		left:-200px;
		top:0px;
		background	: url("../images/icon/btn-sym02.png") no-repeat;
		background-size:8px 8px;
		background-position: 170px 15px; 
		background-color:#FFF;
		position:absolute;
		transition:all .5s ease;
		z-index:1;
	}
	.listbk:hover .eff-listbk  {
		left:0;top:0;
	}
	.listbk:hover a{
		color:#8d6d2b;		/* tranquwell01 */
	}

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

		.listbk {
			width:180px;
			height:30px;
			background-position:  left 0px  top 10px;
			background	: url("../images/icon/btn-sym01.png") no-repeat;
			background-size:8px 8px;
			background-position: 5px  8px; 
			background-color:#8d6d2b;		/* tranquwell01 */
		}
		.listbk  a{
			font-size:12px;
			line-height:26px;
		}
		.eff-listbk {
			width:180px;
			height:30px;
			left:-180px;
			top:0px;
		}
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		.listbk {
			width:180px;
			height:40px;
			background-position:  left 15px  top 13px;
		}
		.listbk  a{
			font-size:14px;
			line-height:36px;
			font-family: "Lora", "Noto Serif JP", serif;
			font-display: swap;
		}
		.eff-listbk {
			width:180px;
			height:40px;
			left:-180px;
			top:0px;
			background	: url("../images/icon/btn-sym02.png") no-repeat;
			background-size:8px 8px;
			background-position: 15px  13px; 
		}
	}