@charset "utf-8";

.pc-hidden {
	display:none;
}
.sp-hidden {
}

@media only screen and (max-width: 767px) {
	.pc-hidden {
		display:inherit;
	}
	.sp-hidden {
		display:none;
	}
}


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

#splash-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


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

body{
    background:#fff;/*遷移アニメーションと同じ色を指定*/
}

body.appear{
    background:#fff;/*画面を開いた後の背景色を指定*/
}

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

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg1,
body.appear .splashbg2{
	display:block;
}

/*右に消えるエリア*/
body.appear .splashbg1{
	animation-name:PageAnime;
	animation-duration:1.5s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
    content: "";
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
	left:50%;
    transform: scaleX(1);
    background-color: #fff;/*伸びる背景色の設定*/
}

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

/*左に消えるエリア*/
body.appear .splashbg2{
	animation-name:PageAnime2;
	animation-duration:1.5s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
    content: "";
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
	right:50%;
    transform: scaleX(1);
    background-color: #fff;/*伸びる背景色の設定*/
}

@keyframes PageAnime2{
	0% {
		transform-origin:right;
		transform:scaleX(1);
	}

	50% {
		transform-origin:left;
	}
	100% {
		transform-origin:left;
		transform:scaleX(0);
	}
}

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

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

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

.video-container {
  height: 50vh;
  position: relative;
  overflow: hidden;
}
@media (min-width: 600px) {
  .video-container {
    height: 100vh;
  }
}

.video-container video {
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.box .btn{
    /*アニメーションの起点とするためrelativeを指定*/
    overflow: hidden;
    /*ボタンの形状*/
    text-decoration: none;
    display: inline-block;
    padding: 10px 20px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .4s;
	background:rgba(255,255,255,0.7);
	font-family: 'Lora', serif;
	font-weight: normal;
	letter-spacing: .3em;
	color:#333;
}

/*ボタン内spanの形状*/
.btn span {
  position: absolute;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color:#fff;
}


/*== 背景が流れる（中央から横全体） */
.bgcenterx:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background:rgba(0,0,0,0.3);
  width: 100%;
  height: 88%;
  transition: transform .4s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: top;
}

/*hoverした際の形状*/
.bgcenterx:hover:before{
  transform:scale(1, 1);
}

.flex{
  display:flex;
  flex-wrap: wrap;
}
.mt80{ top: 78vh; }
.mt90{ top: 90vh; }

.box{
	box-sizing:border-box;
	position: relative;
	bottom: 0;
}
/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.box{
  opacity: 0;
}

img.hover-brightness {
	width: 200px;
	transition: 0.3s;
}

img.hover-brightness:hover {
	filter: brightness(0.5);
}


/*==================================================
出現制御
===================================*/

.fadeUp {
	animation-name:fadeUpAnime;
	animation-duration:2s;
	animation-delay:3s;
	animation-fill-mode:forwards;
	opacity: 0;
	margin: 0 auto 20px auto;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

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

.fadeUp-Mvbn {
	animation-name:fadeUp-Mvbn;
	animation-duration:2s;
	animation-delay:3s;
	animation-fill-mode:forwards;
	opacity: 0;
	bottom: 0;
}
@keyframes fadeUp-Mvbn{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

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

.fadeUp-chatbn {
	animation-name:fadeUp-chatbnAnime;
	animation-duration:2s;
	animation-delay:3s;
	animation-fill-mode:forwards;
	opacity: 0;
	bottom: 0;
}
@keyframes fadeUp-chatbnAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

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


.fadeDown {
	animation-name:fadeDownAnime;
	animation-duration:2s;
	animation-delay:3s;
	animation-fill-mode:forwards;
	opacity: 0;
	margin: -80px 0 0 0;
}
@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(0);
  }

  to {
    opacity: 1;
  transform: translateY(100px);
  }
}

/*==================================================
ヘッダーリンク
===================================*/
.box-link { top:-20px;
}

.h_link a{
  display: inline-block;
  color: #fff;
  font-size: 16px;
  letter-spacing: 2px;
  text-decoration: none;
  position:absolute;
  right: 110px;
  bottom: 36px;
  font-family: 'Lora', serif;
  font-weight: normal;
}
.h_link a:hover { color: #787878; transition: .5s; }

.insta_btn {
  display: inline-block;
  text-align: center;
  color: #2e6ca5;
  font-size: 20px;
  text-decoration: none;
  position:absolute;
  right: 50px;
  bottom: 20px;
}


.insta_btn .insta{
  position: relative;
  display: inline-block;
  width: 38px;
  height: 38px;
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;
  border-radius: 11px;

}

.insta_btn .insta:before{
  content: '';
  position: absolute;
  top: 23px;
  left: -18px;
  width: 40px;
  height: 40px;
  background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
}

.insta_btn .fa-instagram {
  color: #FFF;
  position: relative;
  z-index: 2;
  font-size: 28px;
  line-height: 38px;
}
.insta_btn .fa-instagram:hover { color:#a8aeb3; transition: .5s; }

.movie_wrap { margin: -50px 0 0 0; }

/*===========================================================*/
/*機能編  7-1-12 無限に波紋が広がる
/*===========================================================*/

.btnripple2{
    position:fixed;
    z-index: 2;
    left:50%;
    top:92%;
    transform: translate(-50%,-50%);
    border: 1px solid #fff;
    background:transparent;
    /*波紋の形状*/
	display:inline-block;
	width:45px;
	height:45px;
	border-radius: 50%;
    /*アニメーションの設定*/
    transition: all .3s;
    outline:none;
}

/*hoverした際の背景色の設定*/
.btnripple2:hover{
	background: rgba(0,0,0,0.7);	
    border-color: transparent;
}

/*波形を2つ設定*/
.btnripple2::after,
.btnripple2::before {
    content: '';
    /*絶対配置で波形の位置を決める*/
    position: absolute;
    left: -25%;
    top: -26%;
    /*波形の形状*/
    border: 1px solid #fff;
    width: 150%;
    height: 150%;
    border-radius: 50%;
    /*はじめは不透明*/
    opacity: 1;
    /*ループするアニメーションの設定*/
    animation:2s circleanime linear infinite;
}

/*波形の2つ目は0.5秒遅らせてアニメーション*/
.btnripple2::before {
    animation-delay:.5s; 
}

/*波形のアニメーション*/
@keyframes circleanime{
	0%{
	  transform: scale(0.68);
	}
	100%{
		transform: scale(1.2);
		opacity: 0;
	}
}

/*中央矢印*/

.btnripple2 span::after {
    content: '';
    /*絶対配置で矢印の位置を決める*/
    position: absolute;
    top: 30%;
    left: 45%;
    /*矢印の形状*/
    border: 12px solid transparent;
    border-top-width: 10px;
    border-bottom-width: 10px;
    border-left-color: #fff;
}


body.access {
  background-image: url('img/logo_w.png');
  background-size: 680px auto;
  background-position: top center;
  background-repeat: no-repeat;	
}

.access h1{
  position: relative;
  z-index: 2;
  top: 100px;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size:2vw;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: #000;
  font-family: 'Lora', serif;
  font-weight: 500;
}

.google-map iframe {
	width: 100%;
	margin: 200px 0 0 0;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

.access ul {
	padding:0;
	margin: 100px auto 100px auto;
	width: 800px;
	border-top: 1px solid #ccc;
}
.access li {
	list-style-type: none;
	line-height:2.0em;
	padding: 20px;
	border-bottom: 1px solid #ccc;
	text-align: center;
	font-family: "游明朝 Regular", YuMincho, "A1 Mincho";
}

.access p.link {
	line-height:2.0em;
	padding: 20px;
	text-align: center;
	font-family: "游明朝 Regular", YuMincho, "A1 Mincho";
	color: #000;
}
.access p.link a{ color: #000; }




@media screen and (max-width: 767px) {
	.video-container {
	  height: auto;
	  position: none;
	  overflow: none;
	}
	@media (min-width: 600px) {
	  .video-container {
		height: auto;
	  }
	}

	.video-container video {
	  -o-object-fit: cover;
		 object-fit: cover;
	  position: none;
	  height: 100%;
	  width: auto;
	  margin: 0 auto;
	  padding: 0;
	}
	
	.video_wrapper {
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}

	.video_wrapper > video {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		min-width: 100%;
		min-height: auto;
	}
	
	/*==================================================
	出現制御
	===================================*/
	.fadeUp-Mvbn {
		animation-name:fadeUp-Mvbn;
		animation-duration:2s;
		animation-delay:3s;
		animation-fill-mode:forwards;
		opacity: 0;
		bottom: 0;
	}
	@keyframes fadeUp-Mvbn{
	  from {
		opacity: 0;
	  transform: translateY(100px);
	  }

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

	.fadeDown {
		animation-name:fadeDownAnime;
		animation-duration:2s;
		animation-delay:3s;
		animation-fill-mode:forwards;
		opacity: 0;
		margin: -80px 0 0 0;
	}
	@keyframes fadeDownAnime{
	  from {
		opacity: 0;
	  transform: translateY(0);
	  }

	  to {
		opacity: 1;
	  transform: translateY(30px);
	  }
	}
	
	/*==================================================
	ボタン位置
	===================================*/
	.movie_wrap { margin: -150px 0 0 0; }
	
	.h_link a{
	  display: inline-block;
	  color: #fff;
	  font-size: 17px;
	  letter-spacing: 2px;
	  text-decoration: none;
	  position:absolute;
	  right: 78%;
	  bottom: 96vh;
	  font-family: 'Lora', serif;
	  font-weight: normal;
	}	
	
	.insta_btn {
	  display: inline-block;
	  text-align: center;
	  color: #2e6ca5;
	  font-size: 20px;
	  text-decoration: none;
	  position:absolute;
	  right: 20px;
	  bottom: 94vh;
	}
	
	h1{
	  position: absolute;
	  width: 100%;
	  z-index: 2;
	  top: 53%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  text-align: center;
	  font-size:4vw;
	  letter-spacing: .5em;
	  text-transform: uppercase;
	  color: #fff;
	  font-family: 'Lora', serif;
	  font-weight: 500;
	}
	
	h2{
	  position: absolute;
	  width: 100%;
	  z-index: 2;
	  top: 60%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  text-align: center;
	  font-size:3vw;
	  letter-spacing: 1px;
	  font-family: 'Lora', serif;
	}
	
	h3 {
	  width: 65%;
	  position: absolute;
	  z-index: 2;
	  top: 30%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  text-align: center;
	}
	h3 img{
	  width: 100%;
	  height: auto;	
	}
	
	.btn{ left: 31%; }


	.access ul {
		padding:0;
		margin: 80px auto;
		width: 90%;
		border-top: 1px solid #ccc;
	}
	
	.access h1{
	  font-size:5vw;
	}
	
	.f_logo {
		padding:0;
		margin: 40px auto;
		width: 30%;
	}
	.f_logo img{
		width: 100%; height: auto;
	}
	
	/*==================================================
	スマホ下部固定ボタン
	===================================*/

	#sp-fixed-menu{
	   position: fixed;
	   width: 100%;
	   bottom: 0px;
	   font-size: 0;
	   opacity: 0.9;
	   z-index: 99;
	}

	/*メニューを横並びにする*/
	#sp-fixed-menu ul{
	   display: flex;
	   list-style: none;
	   padding:0;
	   margin:0;
	   width:100%;
	}

	#sp-fixed-menu li{
	   justify-content: center;
	   align-items: center;
	   width: 50%;
	   padding:0;
	   margin:0;
	   font-size: 16px;
	   border-right: 1px solid #fff;
	}

	/*左側メニュー*/
	#sp-fixed-menu li:first-child{
	   background: #333;
		letter-spacing: 2px;
	}

	/*右側メニュー*/
	#sp-fixed-menu li:last-child{
	   background: #333;
	}
	#sp-fixed-menu img{
	   width: 100%;
	}
	

	/*ボタンを調整*/
	#sp-fixed-menu li a{
	   color: #fff;
	   text-align: center;
	   display:block;
	   width: 100%;
	   padding:20px 5px;
	   text-decoration: none;
	}
	
}