@charset "utf-8";



.btn2 {
	width: 330px;
	text-align: center;
	display: inline-block;
	padding: 0.75rem 1.25rem;
	border-radius: 10rem;
	color: #fff !important;
	text-transform: uppercase;
	line-height: 1;
	font-size:16px;
	font-size:1.6rem;
	font-weight: 500;
	padding: 30px 10px;
	letter-spacing: 0.15rem;
	transition: all 0.3s;
	position: relative;
	overflow: hidden;
	z-index: 1;
  }
  .btn2:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000000;
	border-radius: 10rem;
	z-index: -2;
  }
  .btn2:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background: linear-gradient(#d3dce6 0%, #ece9ea 100%);
	transition: all 0.3s;
	border-radius: 10rem;
	z-index: -1;



background: linear-gradient(#d4dde6 0%, #ebe9ea 100%);

  }
  .btn2:hover {
	color: #000000 !important;
  }
  .btn2:hover:before {
	width: 105%;
  }


/* ヤギ */
a.btnYAGI {
	color:#ffffff;
	text-transform: capitalize;
	font-weight: 500;
	display: inline-block;
	border-radius: 300px;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
.btn-toha   a.btnYAGI {	width: 330px;	height: 92px;}
.btn-campus   a.btnYAGI {	width: 240px;	height: 69px;}


a.btnYAGI div{
	position: absolute;
	left: 0;right: 0;
	top: 50%;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
	outline: 0;
	margin: auto;
	text-align: center;
	color:#ffffff;

	z-index: 4444;
	line-height: 1;
	font-size:16px;
	font-size:1.6rem;
	letter-spacing: 0.15rem;
	font-weight: 500;
}
a.btnYAGI:hover div{	color:#000000;}
a.btnYAGI:after {
	content: "";
	display: block;
	padding-top: 100%;
	pointer-events: none;
	position: absolute;
	z-index: 0;
	background: #000000;
	color: #000000;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1);
	border-radius: 100%;
	transition: transform .4s, opacity .4s, color .4s, background .6s
}
a.btnYAGI:after {
	border-radius: 0;
	width: 120%
}
a.btnYAGI:before{
	content: "";
	display: block;
	padding-top: 100%;
	pointer-events: none;
	position: absolute;
	z-index: 1;
	background: #ff0000;
	/* background: linear-gradient(85deg, #f0ebeb, #ebebeb 50%, #d2dce6); */
	background: linear-gradient(85deg, #d4dde6 0%, #ebe9ea 100%);
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	border-radius: 100%;
	transform-origin: center left;
	transition: transform .4s, opacity .4s, color .4s, background .6s
}
a.btnYAGI:hover:before{
	transform: translate(-50%, -50%) scale(1)
}
a.btnYAGI:hover:after {
	opacity: 0
}
a.btnYAGI{
	transition: transform .4s, opacity .4s, color .4s, background .6s
}
a.btnYAGI:hover{
	color:#000000
}

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

	a.btnYAGI {
		background-color: #000000;
	}

	.btn-toha   a.btnYAGI {	width: 262px;	height: 72px;}
	.btn-campus   a.btnYAGI {	width: 240px;	height: 69px;}


	a.btnYAGI:hover div{	color:#ffffff;}

	a.btnYAGI:before{
		content: "";
		display: block;
		padding-top: 100%;
		pointer-events: none;
		position: absolute;
		z-index: 1;
		background: #000000;
		background: linear-gradient(85deg, #000000, #000000 50%, #000000);
		width: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0);
		border-radius: 100%;
		transform-origin: center left;
		transition: transform .4s, opacity .4s, color .4s, background .6s
	}
	a.btnYAGI:hover:before{
		transform:none
	}
	a.btnYAGI:hover:after {
		opacity: 1;
	}
	a.btnYAGI{
		transition:none
	}
	a.btnYAGI:hover{
	color:#000000
	}

}



/** *****************************************************************
コンテンツ
最終更新日：2021.05.20
***************************************************************** **/
@media only screen and (max-width: 1400px) {

body#ABOUT.vr{
	overflow-x: hidden;

}

}



/* ボタン */
/* 共通 */
.vrbtn{
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.vrbtn a{
	text-align: center;
	position: relative;
	background: #000000;
	text-align: center;
	color: #ffffff;
	font-size:16px;
	font-size:1.6rem;
	font-weight: 500;
	padding: 30px 10px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
}
.vrbtn a:hover{
	text-align: center;
	color: #000000;
	background-color: transparent;
}

/* LETS VR */
.btn-lets {
	position: fixed;
	z-index: 8888;
	/* bottom: 30px; */
	bottom: 180px;
	right: 30px
}
.btn-lets a.hvr-radial-out{
	position: relative;
	width: 138px;
	height: 138px;
	background: #000000;
	text-align: center;
	/* 角丸 */
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
.btn-lets a span{
	margin: 42px 0 0 42px;
	display: block;
	white-space: nowrap;	text-indent: 100%;	overflow: hidden;
	background: url(images/vr/icon_lets.svg) no-repeat;
	width: 53px;  height: 55px;
}
.btn-lets a:hover{
	background: #D3DCE6;
}
.btn-lets a:hover span{
	display: block;
	white-space: nowrap;	text-indent: 100%;	overflow: hidden;
	background: url(images/vr/icon_lets_ov.svg) no-repeat;
	width: 53px;  height: 55px;
}
/* Radial Out */
.hvr-radial-out {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	overflow: hidden;

	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
  }
  .hvr-radial-out:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	/* background: #ede9ea;
	background: -moz-linear-gradient(top, #ede9ea 0%, #d3dce6 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ede9ea), color-stop(100%,#d3dce6));
	background: -webkit-linear-gradient(top, #ede9ea 0%,#d3dce6 100%);
	background: -o-linear-gradient(top, #ede9ea 0%,#d3dce6 100%);
	background: -ms-linear-gradient(top, #ede9ea 0%,#d3dce6 100%);
	background: linear-gradient(to bottom, #ede9ea 0%,#d3dce6 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ede9ea', endColorstr='#d3dce6',GradientType=0 ); */

	background: linear-gradient(#d3dce6 0%, #ece9ea 100%);
	filter: drop-shadow(0px 1px 6px rgba(57, 57, 57, 0.16));
	

	
	border-radius: 100%;
	-webkit-transform: scale(0);
	transform: scale(0);
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
  }
  .hvr-radial-out:hover,
  .hvr-radial-out:focus,
  .hvr-radial-out:active {
	color: #ffffff;

  }
  .hvr-radial-out:hover:before,
  .hvr-radial-out:focus:before,
  .hvr-radial-out:active:before {
	-webkit-transform: scale(2);
	transform: scale(2);
  }

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

	.btn-lets a:hover{
		background: #000000;
	}
	.btn-lets a:hover span{
		display: block;
		white-space: nowrap;	text-indent: 100%;	overflow: hidden;
		background: url(images/vr/icon_lets.svg) no-repeat;
		width: 53px;  height: 55px;
	}

	.hvr-radial-out:before {
		display: none;
	  }
	.hvr-radial-out:hover:before,
	.hvr-radial-out:focus:before,
	.hvr-radial-out:active:before {
	  -webkit-transform: none;
	  transform: none;
	}


	.btn-lets {
		bottom: 13%;
		right: 20px
	}
	.btn-lets a.hvr-radial-out{
		position: relative;
		width: 70px;
		height: 70px;
	}
	.btn-lets a span{
		margin: 21px 0 0 20px;
		width: 30px;  height: 31px;
		background-size: 30px 31px;
	}
	.btn-lets a:hover span{
		width: 30px;  height: 31px;
		background-size: 30px 31px;
	}

}


  /* 丸い背景を左から右へ */
  a.btn-mo {
	position: relative;
	z-index: 1;
	display: block;
	overflow: hidden;
	transition: .3s;

	margin: auto;
	background: #000000;
	text-align: center;
	color: #ffffff;
	line-height: 1;
	font-size:16px;
	font-size:1.6rem;
	font-weight: 500;
	padding: 30px 10px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
  }
.btn-toha   a.btn-mo {	width: 330px;}
.btn-campus   a.btn-mo {	width: 240px;}

  a.btn-mo::before {
	content: "";
	width: 120%;
	height: 200%;
	position: absolute;
	top: -50%;
	right: 0;
	z-index: -1;

	background: linear-gradient(#d3dce6 0%, #ece9ea 100%);
	/* filter: drop-shadow(0px 1px 6px rgba(57, 57, 57, 0.16)); */


	border-radius: 0 100% 100% 0;
	transform: translateX(-120%);
	transition: transform ease .5s;
  }
  a.btn-mo:hover {
	color: #000000;
	/* background-color: rgba(255, 255, 255, 0.5); */
  }
  a.btn-mo:hover::before {
	transform: translateX(10%);
  }





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

	a.btn-mo::before {
		display: none;

		transform: none;
		transition: none;
	  }
	  a.btn-mo:hover {
		color: #ffffff;
		background-color: #000000;
	  }

}

/* *-------------------------------------------------------------------
 ファーストビュー
-------------------------------------------------------------------* */
#topMOVIE {
	position: relative;
	width: 100%;
	height: 100vh;

	/* height: -webkit-calc(100vh - 78px) ;
	height: calc(100vh - 78px) ;
	margin-top: 78px; */
  }
  @media only screen and (max-width: 768px) {

	#topMOVIE {	
		/* height: -webkit-calc(100vh - 45px) ;
		height: calc(100vh - 45px) ;
		margin-top: 45px; */
	  }

}
  #topMOVIE .textwrap {

  }
  #topMOVIE .wrap {
	/* position: relative; */
	z-index: 8888;

}
  #topMOVIE .textwrap .wrap .logo {
	position: absolute;
	z-index: 10;
	left: 0;right: 0;
	top: 50%;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
	outline: 0;
	margin: auto;
	text-align: center;
	width: 266px;height: 287px;
  }


  .topMV{
	width: 100%;
	height: 100vh;
	position: relative;
	background-image: url('images/vr/mainvisual.png');
	background-position: center center;
	background-repeat: no-repeat;
  }

  
  /* @media screen and (max-width: 559px) {
#topMOVIE .textwrap {
	  width: 100%;
	  display: block;
	  bottom: 80px;
	  left: 50%;
	  transform: translateX(-50%);
	  text-align: center;
	}
#topMOVIE .textwrap.bottom155 {
	  bottom: 155px;
	}
  } */

  /* @media screen and (max-width: 559px) {
#topMOVIE .textwrap:before {
	  display: block;
	  margin: 0 auto 20px;
	}
  } */
  
#topMOVIE .textwrap .wrap {
	margin: auto 0;
  }
  



  
  #topMOVIE .mov_wrap {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
  }

  #topMOVIE .mov_wrap .top_mov {
	position: absolute;
	z-index: 0;
  }
  /* @media screen and (max-width: 559px) {
	#topMOVIE .mov_wrap .top_mov {
	  width: 100%;
	}
  } */
  
  #topMOVIE .mov_wrap .topimgsp {
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-family: 'object-fit: cover;';
  }
  

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

	.topMV{
		width: 100%;
		height: 100vh;
		position: relative;
		background-image: url('images/vr/mainvisual_sp@2x.png');
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	  }

	  #topMOVIE .textwrap .wrap .logo {
		top: 50%;
		-webkit-transform: translate(0, -50%);
		-ms-transform: translate(0, -5%);
		transform: translate(0, -50%);
		width: 45vw;height: auto;
	  }

}
/*
 スクロール
-----------------------------* */
.scrollBLOCK {
	position: absolute;
	left: 0;right: 0;
	bottom: 120px;
	z-index: 11;
	outline: 0;
	margin: auto;
	text-align: center;
}
.scroll-label {
	font-size: 1.2rem;
    color: #000000;
    position: absolute;
	left: 0;right: 0;
	margin: auto;

    top: -30px;
    letter-spacing: .09em;
	font-weight: 700;
}
.scroll-line.scroll-line {
    width: 1px;
    height: auto;
    position: absolute;
	left: 0;right: 0;
	margin: auto;
    top: 0;
    z-index: 1;
}
.scroll-line-ob-container {
    position: relative;
    overflow: hidden;
    width: 1px;
    height: 140px;
}
@media only screen and (max-width: 768px) {

	.scrollBLOCK {
		bottom: 140px;
	}
	.scroll-label {
		font-size: 1.1rem;
		top: -30px;
	}
	.scroll-line-ob-container {
		height: 100px;
	}

}


.scroll-line .ob01 {
    -webkit-animation: scroll-line 2s linear 0s infinite;
    animation: scroll-line 2s linear 0s infinite;
}
.scroll-line .ob02 {
    -webkit-animation: scroll-line-b 2s linear 1s infinite;
    animation: scroll-line-b 2s linear 1s infinite;
}
.scroll-line-ob {
    position: absolute;
    left: 0;
    display: inline-block;
    height: 90%;
    width: 1px;
    background-color: #323c44;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
@-webkit-keyframes scroll-line {
0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
100% {
    -webkit-transform: translateY(150%);
    transform: translateY(150%);
}
}
@keyframes scroll-line{
	0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
100% {
    -webkit-transform: translateY(150%);
    transform: translateY(150%);
}
}
@-webkit-keyframes scroll-line-b {
0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
100% {
    -webkit-transform: translateY(150%);
    transform: translateY(150%);
}
}
@keyframes scroll-line-b{
	0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
100% {
    -webkit-transform: translateY(150%);
    transform: translateY(150%);
}
}

/* *-------------------------------------------------------------------
 背景
-------------------------------------------------------------------* */
body#ABOUT.vr .bg{
	/* width: 100%;
	height: 1366px; */

	background: #ede9ea;
	background: -moz-linear-gradient(top, #ede9ea 0%, #d3dce6 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ede9ea), color-stop(100%,#d3dce6));
	background: -webkit-linear-gradient(top, #ede9ea 0%,#d3dce6 100%);
	background: -o-linear-gradient(top, #ede9ea 0%,#d3dce6 100%);
	background: -ms-linear-gradient(top, #ede9ea 0%,#d3dce6 100%);
	background: linear-gradient(to bottom, #ede9ea 0%,#d3dce6 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ede9ea', endColorstr='#d3dce6',GradientType=0 );
}
body#ABOUT.vr .bg.firstviewBG{
	padding-bottom: 60px;
}


/* 横 */
body#ABOUT.vr .bgY{
	background: rgb(237,233,234);
	background: -moz-linear-gradient(240deg, rgba(237,233,234,1) 0%, rgba(211,220,230,1) 100%);
	background: -webkit-linear-gradient(240deg, rgba(237,233,234,1) 0%, rgba(211,220,230,1) 100%);
	background: linear-gradient(240deg, rgba(237,233,234,1) 0%, rgba(211,220,230,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ede9ea",endColorstr="#d3dce6",GradientType=1);
}

/* フッター */
body#ABOUT.vr #PAGE{
	display: block;
	padding-bottom: 215px;
	background: url(images/vr/footer_bg.png) no-repeat;
	background-position: center bottom 5px;
	border-bottom:2px #000000 solid;
}

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

	body#ABOUT.vr #PAGE{
		display: block;
		padding-bottom: 115px;
		background: url(images/vr/footer_bg_sp.png) no-repeat;
		background-position: center bottom 5px;
		border-bottom:2px #000000 solid;
	}

}

/* *-------------------------------------------------------------------
 BLOCK1
-------------------------------------------------------------------* */
#BLOCK1{
	padding-top: 200px;
	padding-bottom: 60px;
}
body#ABOUT.vr h2#h2catch{
	text-align: center;
	font-size:75px;
	font-size:7.5rem;
	line-height: 1.25;
	letter-spacing: 0.01em;
}
body#ABOUT.vr h2#h2catch .sub{
	font-size:26px;
	font-size:2.6rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	margin-bottom: 30px;
}

body#ABOUT.vr p.expl{
	text-align:center;
	font-size:24px;
	font-size:2.4rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 2.5;
	margin-top: 150px;
	margin-bottom: 150px;
	padding-bottom: 300px;
	background-image: url(images/vr/5gtv.svg);
	background-size: 213px;
	background-repeat: no-repeat;
	background-position: center bottom;
}
@media only screen and (max-width: 768px) {

	#BLOCK1{
		padding-top: 0px;
		padding-bottom: 60px;
	}
	body#ABOUT.vr h2#h2catch{

		font-size:42px;
		font-size:4.2rem;
		line-height: 1.28;
		letter-spacing: -0.01em !important;
	}
	body#ABOUT.vr h2#h2catch .sub{
		font-size:17px;
		font-size:1.7rem;
		line-height: 1.78;
		letter-spacing: 0.05em;
		margin-bottom: 30px;
	}
	
	body#ABOUT.vr p.expl{

		font-size:21px;
		font-size:2.1rem;
		letter-spacing: 0.1em;
		line-height: 2.38;
		margin-top: 50px;
		margin-bottom: 50px;
		padding-bottom: 260px;
		background-image: url(images/vr/5gtv.svg);
		background-size: 213px;
	}

}

/* *-------------------------------------------------------------------
 VRとは
-------------------------------------------------------------------* */
#PAGE-TOHA{
	width: 1300px;
	margin: auto;
	background-color: #ffffff;
	padding: 120px 50px;
}
#PAGE-TOHA h2{
	display: block;
	white-space: nowrap;	text-indent: 100%;	overflow: hidden;
	background: url(images/vr/toha_title.svg) no-repeat;
	width: 409px;  height: 165px;
	margin: 0 auto 70px auto;
	text-align:center;
}

#PAGE-TOHA .block {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	margin-bottom: 140px;
}
#PAGE-TOHA .block .col {
	width: 350px;

}
#PAGE-TOHA .block .col:nth-child(1) p{
	background-image: url(images/vr/toha_pic01.svg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 347px 316px;
}
#PAGE-TOHA .block .col:nth-child(2) p{
	background-image: url(images/vr/toha_pic02.svg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 347px 316px;
}
#PAGE-TOHA .block .col:nth-child(3) p{
	background-image: url(images/vr/toha_pic03.svg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 347px 316px;
}
#PAGE-TOHA .block .col p{
	margin: 0 0;
	padding-top: 376px;
}
#PAGE-TOHA .block .col p span{
	display: inline-block;
	padding: 0 20px;
	font-size:19px;
	font-size:1.9rem;
	letter-spacing: 0.06em;
	line-height: 1.89;
}

.btn-toha a{
	width: 330px;
}

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

	.h2sp{width: 85%;margin-left: auto;margin-right: auto;}

	#PAGE-TOHA{
		width: 95%;
		margin: auto;
		background-color: #ffffff;
		padding: 60px 20px;
	}
	#PAGE-TOHA h2{
		background: url(images/vr/toha_title_sp.svg) no-repeat;

		background-size: 100%;
		width:100%;    height:0;
		padding-top: 54.75%;
		margin: 0 auto 70px auto;
	}
	
	#PAGE-TOHA .block {
		flex-direction: column;
		margin-bottom: 140px;
	}
	#PAGE-TOHA .block .col {
		width: 100%;

	}
	#PAGE-TOHA .block .col + .col {
		margin-top: 50px;
	}

	#PAGE-TOHA .block .col:nth-child(1) p{
		background-image: url(images/vr/toha_pic01_sp.svg);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 288px 200px;
	}
	#PAGE-TOHA .block .col:nth-child(2) p{
		background-image: url(images/vr/toha_pic02_sp.svg);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 288px 217px;
	}
	#PAGE-TOHA .block .col:nth-child(3) p{
		background-image: url(images/vr/toha_pic03_sp.svg);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 288px 194px;
	}


	#PAGE-TOHA .block .col p{
		padding-top: 260px
/* 
		background-size: 100%;
		width:100%;    height:0;
		padding-top: 91.07%;
 */


	}

	#PAGE-TOHA .block .col p{

		font-size:18px;
		font-size:1.8rem;
	}
	#PAGE-TOHA .block .col p span{
		display: block;
		padding: 0 10px
	}
	
	.btn-toha a{
		width: 80%;
	}

}



/* *-------------------------------------------------------------------
 使い方
-------------------------------------------------------------------* */
#PAGE-USE{
	width: 100%;
	position: relative;
	margin: auto;
	background-color: #ffffff;
	padding: 80px 0 0 0;
}
#PAGE-USE h2{
	display: block;
	white-space: nowrap;	text-indent: 100%;	overflow: hidden;
	background: url(images/vr/use_title.svg) no-repeat;
	width: 364px;  height: 165px;
	margin: 0 auto 70px auto;
	text-align:center;
}
#PAGE-USE .chara{
	width: 1110px;
	margin: -28px auto 0 auto;
	text-align: right;
}
#PAGE-USE .chara img{
	width: 350px;height: 205px;

}

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

	#PAGE-USE{
		width: 100%;
		position: relative;
		margin: auto;
		background-color: #ffffff;
		padding: 80px 0 0 0;
	}
	#PAGE-USE h2{
		background: url(images/vr/use_title_sp.svg) no-repeat;

		background-size: 100%;
		width:100%;    height:0;
		padding-top: 54.34%;
		margin: 0 auto 70px auto;
	}


#PAGE-USE dl{width: 90%;
	margin: 60px auto;
}

#PAGE-USE dt{
	font-size:22px;
	font-size:2.2rem;
	font-weight: 600;
	margin-bottom: 20px;
	padding: 4px 0;
}
#PAGE-USE dd{
	font-size:18px;
	font-size:1.8rem;
	letter-spacing: 0.1em;
	line-height: 1.55;
	font-weight: 600;
}
#PAGE-USE dd + dt{
	margin-top: 60px;
}
#PAGE-USE dt{
	padding-left: 95px;
}

#PAGE-USE dt:nth-of-type(1){
	background: url(images/vr/use_no1.svg) no-repeat left center;
	background-size: 64px 30px;
}
#PAGE-USE dt:nth-of-type(2){
	background: url(images/vr/use_no2.svg) no-repeat left center;
	background-size: 71px 21px;
}
#PAGE-USE dt:nth-of-type(3){
	background: url(images/vr/use_no3.svg) no-repeat left center;
	background-size: 73px 35px;
}
#PAGE-USE dt:nth-of-type(4){
	background: url(images/vr/use_no4.svg) no-repeat left center;
	background-size: 75px 40px;
}
#PAGE-USE dt:nth-of-type(5){
	background: url(images/vr/use_noN.svg) no-repeat left 50px center;
	background-size: 20px 34px;
}
#PAGE-USE dt:nth-of-type(6){
	background: url(images/vr/use_no5.svg) no-repeat left center;
	background-size: 71px 33px;
}
#PAGE-USE dt:nth-of-type(7){
	background: url(images/vr/use_no6.svg) no-repeat left center;
	background-size: 71px 30px;
}
#PAGE-USE dt:nth-of-type(8){
	background: url(images/vr/use_no7.svg) no-repeat left center;
	background-size: 75px 24px;
}


	#PAGE-USE .chara{
		width: 100%;
		margin: auto;
		text-align: center;
	}
	#PAGE-USE .chara img{
		width: 350px;height: 205px;
	
	}
	


}

/* モックアップ部分 */
#PAGE-USE .videoBLOCK{
	position: relative;
	margin: auto;

	width: 1091px;  height: 857px;
}
#PAGE-USE .videoBLOCK .videoBOX  video{
	width: 360px;
}
#PAGE-USE .videoBLOCK .videoBOX{
	position: absolute;
	z-index: 10;
	left: 380px;
	top:35px;
	outline: 0;
}
#PAGE-USE .videoBLOCK .video-setumei{
	position: absolute;
	z-index: 14;
	left: 0;right: 0;
	top:0;
	outline: 0;
	margin: auto;
	text-align: center;
	background: url(images/vr/use_setsumei.svg) no-repeat;
	width: 1091px;  height: 857px;
}
#PAGE-USE .videoBLOCK .video-mockupicon{
	position: absolute;
	z-index: 12;
	left: 428px;
	top:129px;
	outline: 0;
	background: url(images/vr/use_mockup_icon.png) no-repeat;
	width: 239px;  height: 432px;
}

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

	#PAGE-USE .videoBLOCK{
		position: relative;
		margin: auto;
	
		width: 319px;  height: 447px;
	}
	#PAGE-USE .videoBLOCK .video-setumei{
		position: absolute;
		z-index: 14;
		left: 0;right: 0;
		top:0;
		outline: 0;
		margin: auto;
		text-align: center;
	
		background: url(images/vr/use_setsumei_sp@2x.png) no-repeat;
		background-size: 319px 447px;
		width: 319px;  height: 447px;
	}
	#PAGE-USE .videoBLOCK .video-mockupicon{
		display: none;
	}
	#PAGE-USE .videoBLOCK .videoBOX{
		left: 50px;
		top:25px;
		outline: 0;
	}
	#PAGE-USE .videoBLOCK .videoBOX  video{
		width: 226px;
	}


}

/* 動画テスト */
.bx-wrapper {
	width: 100%;
  }

/* パララックス */
#trigger01,#trigger02,#trigger03{  position: absolute;}

.mgt150{  margin-top: 150px;}

#top_photo01{}
#top_photo02{}
#top_photo03{}

.photobox {
	width: 100%;
	height: 310px;
	display: block;
	overflow: hidden;
	position: relative;
  }
  
  .top_photo03,
  .top_photo02,
  .top_photo01 {
	width: 100%;
	height: 130%;
	object-fit: cover;
	font-family: 'object-fit: cover;';
	transform: translateY(0px);
  }


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

	.photobox {display: none;

	  }
	  
	  .top_photo03,
	  .top_photo02,
	  .top_photo01 { display: none;

	  }

}

/* *-------------------------------------------------------------------
 北大VRを体験！
-------------------------------------------------------------------* */
#PAGE-LETS{
	width: 100%;
	position: relative;
	margin: auto;
	background-color: #ffffff;
	padding: 0 0 0 0;
}
#PAGE-LETS .h2bg{
	background-image: url('images/vr/lets_title_bg.jpg');
}
#PAGE-LETS h2{
	position: absolute;
	left: 0;right: 0;
	top: 50%;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
	outline: 0;
	margin: auto;
	text-align: center;

	display: block;
	white-space: nowrap;	text-indent: 100%;	overflow: hidden;
	background: url(images/vr/lets_title.svg) no-repeat;
	width: 553px;  height: 216px;
	margin: 0 auto;
	text-align:center;
}
#PAGE-LETS .h2titleBG,
#PAGE-LETS h2 .expl{
	display: none;
}
@media only screen and (max-width: 768px) {

	#PAGE-LETS{

	}
	#PAGE-LETS .h2titleBG{
		display: block;
		background: url(images/vr/lets_title_bg_sp@2x.jpg) no-repeat;
		background-size: cover;
		background-position: center center;
		width: 100%;		height: 445px;
		position: relative;
	}

	/* #PAGE-LETS .h2sp{
		display: block;
		width: 65%;
		padding: 20px auto;
	} */
	#PAGE-LETS h2{
		background: url(images/vr/lets_title_sp.svg) no-repeat;
		/* background-size: 100%;
		width:100%;    height:0;
		padding-top: 98.73%; */
		width: 313px;height: 310px;
		position: absolute;
		left: 0;right: 0;
		top: 50%;
		-webkit-transform: translate(0, -50%);
		-ms-transform: translate(0, -50%);
		transform: translate(0, -50%);
		outline: 0;
		margin: auto;
		text-align: center;
	}

}




#PAGE-LETS .bg{
	padding-top: 140px;
	padding-bottom: 170px;
}
#PAGE-LETS .block{
	width: 1076px;
	margin-left: auto;
	margin-right: auto;
}

#PAGE-LETS .block + .block{
	margin-top: 170px;
}

#PAGE-LETS .block h3{
	text-align: center;
	font-size:30px;
	font-size:3.0rem;
	padding-bottom: 40px;
	border-bottom:1px #707070 solid;
	margin-bottom: 40px;
}
#PAGE-LETS .block h3 .placename{
	text-align: center;
	font-size:19px;
	font-size:1.9rem;
}



#PAGE-LETS .block .box {
    display: flex;
    justify-content: space-between;
	flex-wrap: wrap;
}
#PAGE-LETS .block.vr07 .box,
#PAGE-LETS .block.vr05 .box,
#PAGE-LETS .block.vr03 .box,
#PAGE-LETS .block.vr01 .box {
	flex-direction: row-reverse;
}
#PAGE-LETS .block.vr06 .box,
#PAGE-LETS .block.vr04 .box,
#PAGE-LETS .block.vr02 .box {
	flex-direction: row;
}
#PAGE-LETS .block .box .picture {
	width:536px;
}
#PAGE-LETS .block .box .text {
	width:456px;
	margin-top: 30px;
	font-size:18px;
	font-size:1.8rem;
	line-height: 2.2;
	letter-spacing: 0.11em;
}
#PAGE-LETS .block .box .text .chara{
	margin: 30px auto 0 auto;
	text-align: center;
	width: 85%;
}


#PAGE-LETS .block .box .picture .pic{
	position: relative;
}



#PAGE-LETS .block.vr07 .box .picture .pic .no,
#PAGE-LETS .block.vr05 .box .picture .pic .no,
#PAGE-LETS .block.vr03 .box .picture .pic .no,
#PAGE-LETS .block.vr01 .box .picture .pic .no{
	position: absolute;
	z-index: 4444;
	left: 55px;bottom: -40px;
}
#PAGE-LETS .block.vr06 .box .picture .pic .no,
#PAGE-LETS .block.vr04 .box .picture .pic .no,
#PAGE-LETS .block.vr02 .box .picture .pic .no{
	position: absolute;
	z-index: 4444;
	right: 55px;bottom: -40px;
}
#PAGE-LETS .block .box .picture .pic .play{
	position: absolute;
	z-index: 4444;
	left: 0;right: 0;
	top: 50%;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
	outline: 0;
	margin: auto;
	text-align: center;
}
#PAGE-LETS .block .box .picture .pic .play img{
	margin: auto;
}

#PAGE-LETS .block .box .picture div{
    filter: alpha(opacity=100);
    -moz-opacity:1;
    opacity:1
}

#PAGE-LETS .block .box .picture a:hover img{
	filter: brightness(60%);
	filter: alpha(opacity=100);
    -moz-opacity:1;
    opacity:1;

    -webkit-transition:all 0.6s ease 0s;
    -moz-transition:all 0.6s ease 0s;
    -o-transition:all 0.6s ease 0s;
    transition:all 0.6s ease 0s;


}

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

	#PAGE-LETS .bg{
		padding-top: 70px;
		padding-bottom: 100px;
	}
	#PAGE-LETS .block{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	
	#PAGE-LETS .block + .block{
		margin-top: 80px;
	}
	
	#PAGE-LETS .block h3{
		text-align: center;
		font-size:28px;
		font-size:2.8rem;
		letter-spacing: 0;
		line-height: 1.33;
		padding-bottom: 36px;
		border-bottom:1px #707070 solid;
		margin-bottom: 30px;
	}
	#PAGE-LETS .block h3 .placename{
		text-align: center;
		font-size:18px;
		font-size:1.8rem;
		letter-spacing: 0.05em;
		line-height: 1.722;
		margin-top: 25px;
	}
	
	
	
	#PAGE-LETS .block .box {
		flex-direction: column;
	}
	#PAGE-LETS .block.vr07 .box,
	#PAGE-LETS .block.vr05 .box,
	#PAGE-LETS .block.vr03 .box,
	#PAGE-LETS .block.vr01 .box {
		flex-direction: row-reverse;
	}
	#PAGE-LETS .block.vr06 .box,
	#PAGE-LETS .block.vr04 .box,
	#PAGE-LETS .block.vr02 .box {
		flex-direction: row;
	}
	#PAGE-LETS .block .box .picture {
		width:100%;
	}
	#PAGE-LETS .block .box .text {
		width:100%;
		margin-top: 60px;
		font-size:18px;
		font-size:1.8rem;
		line-height: 2;
		letter-spacing: 0.1em;
	}
	#PAGE-LETS .block .box .text .chara{
		margin: 30px auto 0 auto;
		text-align: center;
		/* width: 85%; */
		width: 100%;
	}
	
	
	#PAGE-LETS .block .box .picture .pic{
		position: relative;
	}
	
	
	
	#PAGE-LETS .block.vr07 .box .picture .pic .no,
	#PAGE-LETS .block.vr05 .box .picture .pic .no,
	#PAGE-LETS .block.vr03 .box .picture .pic .no,
	#PAGE-LETS .block.vr01 .box .picture .pic .no{
		left: 25px;bottom: -30px;
	}
	#PAGE-LETS .block.vr06 .box .picture .pic .no,
	#PAGE-LETS .block.vr04 .box .picture .pic .no,
	#PAGE-LETS .block.vr02 .box .picture .pic .no{
		right: 25px;bottom: -30px;
	}
	/* #PAGE-LETS .block .box .picture .pic .play{
		position: absolute;
		z-index: 4444;
		left: 0;right: 0;
		top: 50%;
		-webkit-transform: translate(0, -50%);
		-ms-transform: translate(0, -50%);
		transform: translate(0, -50%);
		outline: 0;
		margin: auto;
		text-align: center;
	} */


}


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

	#PAGE-LETS .block .box .picture .pic .no{
		width: 40.2%;height: auto;
		/* width: 23vw;height: auto; */

	}
	#PAGE-LETS .block .box .picture .pic .play{
		width: 25.14%;height: auto;
		/* width: 30vw;height: auto; */
	}

}


/* *-------------------------------------------------------------------
 パノラマビュー
-------------------------------------------------------------------* */
#PAGE-PANO{
	width: 100%;
	position: relative;
	margin: auto;
	background-color: #ffffff;
	padding: 0 0 0 0;
}
#PAGE-PANO .h2bg{
	position: relative;
	background: url(images/vr/pano_title_bg.jpg) no-repeat;
	background-size: cover;
	height: 310px;
	margin: 0 auto;
	text-align:center;
}
#PAGE-PANO h2{
	position: absolute;
	left: 0;right: 0;
	top: 50%;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
	outline: 0;
	margin: auto;
	text-align: center;

	display: block;
	white-space: nowrap;	text-indent: 100%;	overflow: hidden;
	background: url(images/vr/pano_title.svg) no-repeat;
	width: 483px;  height: 184px;
	margin: 0 auto;
	text-align:center;
}
#PAGE-PANO .h2titleBG,
#PAGE-PANO h2 .expl{
	display: none;
}
@media only screen and (max-width: 768px) {

	#PAGE-PANO{

	}
	#PAGE-PANO .h2titleBG{
		display: block;
		background: url(images/vr/pano_title_bg_sp@2x.jpg) no-repeat;
		background-size: cover;
		background-position: center center;
		width: 100%;		height: 445px;
		position: relative;
	}

	/* #PAGE-PANO .h2sp{
		display: block;
		width: 65%;
		padding: 20px auto;
	} */
	#PAGE-PANO h2{
		background: url(images/vr/pano_title_sp.svg) no-repeat;
		/* background-size: 100%;
		width:100%;    height:0;
		padding-top: 98.73%; */
		width: 280px;height: 347px;
		position: absolute;
		left: 0;right: 0;
		top: 50%;
		-webkit-transform: translate(0, -50%);
		-ms-transform: translate(0, -50%);
		transform: translate(0, -50%);
		outline: 0;
		margin: auto;
		text-align: center;
	}


}



.btn-campus-block{
	margin: 70px auto 0 auto;
	text-align: center;
}
.btn-campus{
	display: inline-block;
	margin: auto 20px;
}

.btn-campus a{
	width: 240px;
}

@media only screen and (max-width: 768px) {
	.btn-campus{
		display:block;
		margin: auto;
	}
	.btn-campus a{
		width: 80%;
	}
	.btn-campus + .btn-campus{
		margin-top: 20px;
	}

}


.panoblock.bgY{
	padding: 30px 0;
}

/* マップ */
#PAGE-PANO h4 {
    position: relative;
    display: inline-block;
    padding: 0 35px;
	font-size:30px;
	font-size:3.0rem;
	margin: 150px auto 50px auto;
}

#PAGE-PANO h4:before,
#PAGE-PANO h4:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 32px;
    height: 3px;
    background-color: #000000;
}

#PAGE-PANO h4:before {
    left: 0;
}

#PAGE-PANO h4:after {
    right: 0;
}
@media only screen and (max-width: 768px) {

	#PAGE-PANO h4 {
		position: relative;
		display: inline-block;
		padding: 0 35px;
		font-size:20px;
		font-size:2.0rem;
		margin: 80px auto 50px auto;
	}

}



/* 太陽が丘キャンパス */
#map-taiyougaoka{
	display: block;
	position: relative;
	z-index: 1111;
	background: url(images/vr/map_taiyou_202304.png) no-repeat;
	width: 1087px;  height: 579px;
	margin: auto;
}
#map-taiyougaoka .mark360{
	position: absolute;
	z-index: 4444;
	top: 0;right: -120px;
}
#map-taiyougaoka .chara{
	position: absolute;
	z-index: 4444;
	bottom: -30px;left: -120px;
	width: 273px;height: 171px;
}
#map-taiyougaoka .pin-01{	left:288px;top:225px;}
#map-taiyougaoka .pin-02{	left:400px;top:240px;}
#map-taiyougaoka .pin-03{	left:600px;top:132px;}
#map-taiyougaoka .pin-04{	left:635px;top:132px;}
#map-taiyougaoka .pin-05{	left:627px;top:160px;}
#map-taiyougaoka .pin-06{	left:660px;top:160px;}
#map-taiyougaoka .pin-07{	left:450px;top:378px;}
#map-taiyougaoka .pin-08{	left:700px;top:345px;}
#map-taiyougaoka .pin-09{	left:727px;top:100px;}
#map-taiyougaoka .pin-10{	left:875px;top:345px;}
#map-taiyougaoka .pin-11{	left:760px;top:290px;}
/* 薬学キャンパス */
#map-yakugaku{
	display: block;
	position: relative;
	z-index: 1111;
	background: url(images/vr/map_yakugaku.png) no-repeat;
	width: 779px;  height: 612px;
	margin: auto;
}
#map-yakugaku .mark360{
	position: absolute;
	z-index: 4444;
	top: 60px;right: -220px;
}
#map-yakugaku .chara{
	position: absolute;
	z-index: 4444;
	bottom: 80px;left: -220px;
	width: 273px;height: 171px;
}
#map-yakugaku .pin-01{	left:290px;top:210px;}
#map-yakugaku .pin-02{	left:220px;top:100px;}
#map-yakugaku .pin-03{	left:305px;top:505px;}




/* 共通 */

#map-yakugaku div[class^="pin"],
#map-taiyougaoka div[class^="pin"] {
	position: absolute;
	width: 26px;height: 43px;
}
.pin a img:hover{
    filter: alpha(opacity=100);
    -moz-opacity:1;
    opacity:1;
	margin-top: 4px;
}

#PAGE-PANO ul li:nth-of-type(1) a{	background: url(images/vr/mappin_01.svg) no-repeat;}
#PAGE-PANO ul li:nth-of-type(2) a{	background: url(images/vr/mappin_02.svg) no-repeat;}
#PAGE-PANO ul li:nth-of-type(3) a{	background: url(images/vr/mappin_03.svg) no-repeat;}
#PAGE-PANO ul li:nth-of-type(4) a{	background: url(images/vr/mappin_04.svg) no-repeat;}
#PAGE-PANO ul li:nth-of-type(5) a{	background: url(images/vr/mappin_05.svg) no-repeat;}
#PAGE-PANO ul li:nth-of-type(6) a{	background: url(images/vr/mappin_06.svg) no-repeat;}
#PAGE-PANO ul li:nth-of-type(7) a{	background: url(images/vr/mappin_07.svg) no-repeat;}
#PAGE-PANO ul li:nth-of-type(8) a{	background: url(images/vr/mappin_08.svg) no-repeat;}
#PAGE-PANO ul li:nth-of-type(9) a{	background: url(images/vr/mappin_09.svg) no-repeat;}
#PAGE-PANO ul li:nth-of-type(10) a{	background: url(images/vr/mappin_10.svg) no-repeat;}
#PAGE-PANO ul li:nth-of-type(11) a{	background: url(images/vr/mappin_11.svg) no-repeat;}

#PAGE-PANO #YAKUGAKU ul li:nth-of-type(4) a{	background: transparent;}

#PAGE-PANO ul{
	width: 1187px;
	margin: 30px auto 0 auto;
}

#PAGE-PANO #TAIYOU ul li{
	float: left;
	width: -webkit-calc(100% / 3) ;
	width: calc(100% / 3) ;

	margin-top: 30px;
}

*::-ms-backdrop, #PAGE-PANO #TAIYOU ul li {
	float: left;
	width: 33.33%; /* IE11 */
  }

#PAGE-PANO #YAKUGAKU ul li{
	float: left;
	margin-right: 37px;
	margin-top: 30px;
}

#PAGE-PANO ul li a{
	font-size:18px;
	font-size:1.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 17px 0 17px 36px;
	background-size:26px 43px !important;
}
#PAGE-PANO ul li a{background-position:left top 5px !important;}
#PAGE-PANO ul li a:hover{background-position:left top !important;}


/* tooltip */
.dark-tooltip a{
	color: #ffffff;;
}
.dark-tooltip a div{
	margin-top: 5px;
}
.dark-tooltip a:hover{
    filter: alpha(opacity=100);
    -moz-opacity:1;
    opacity:1;
}


.mapblockSP{display: none;}
@media only screen and (max-width: 768px) {

.panoblock,
.mapblock{display: none;}
.mapblockSP{
	position: relative;
	display: block;
}
#map-taiyougaokaSP.mapblockSP .chara{
	margin: -40px auto 0 auto;
	text-align: center;
	z-index: 4444;

	width: 273px;height: 171px;
}
#map-yakugakuSP.mapblockSP .chara{
	margin: -40px auto 0 auto;
	text-align: center;
	z-index: 4444;

	width: 273px;height: 171px;
}


#PAGE-PANO ul{
	width: 90%;
	margin: 10px auto 0 auto;
}

#PAGE-PANO #yakugaku ul li,
#PAGE-PANO #TAIYOU ul li{
	float: none;
	width: 100%;
	margin-top: 30px;
}
#PAGE-PANO ul li a{
	font-size:17px;
	font-size:1.7rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}
#PAGE-PANO #TAIYOU ul li:nth-of-type(5) a{
	font-size:16px;
	font-size:1.6rem;
}
#PAGE-PANO #YAKUGAKU ul li:nth-of-type(2) a{
	display: block;
/* 
	background-position:left top !important; */
	padding-top: 0;	padding-bottom: 0;
}

#PAGE-PANO #YAKUGAKU ul li:nth-of-type(4){ padding-bottom: 20px;}

#PAGE-PANO ul li a{background-position:left center !important;}
#PAGE-PANO ul li a:hover{background-position:left center !important;}

}



/* *-------------------------------------------------------------------
 施設紹介
-------------------------------------------------------------------* */
#PAGE-FACILITY{
	width: 100%;
	position: relative;
	margin: auto;
	background-color: #ffffff;
	padding: 200px 0 0 0;
}
#PAGE-FACILITY .h2bg{
	position: relative;
	background: url(images/vr/facility_title_bg.jpg) no-repeat;
	background-size: cover;
	height: 310px;
	margin: 0 auto;
	text-align:center;
}
#PAGE-FACILITY h2{
	position: absolute;
	left: 0;right: 0;
	top: 50%;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
	outline: 0;
	margin: auto;
	text-align: center;

	display: block;
	white-space: nowrap;	text-indent: 100%;	overflow: hidden;
	background: url(images/vr/facility_title.svg) no-repeat;
	width: 422px;  height: 177px;
	margin: 0 auto;
	text-align:center;
}
#PAGE-FACILITY .h2titleBG,
#PAGE-FACILITY h2 .expl{
	display: none;
}

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

	#PAGE-FACILITY{
		padding:80px 0 0 0;
	}
	/* #PAGE-FACILITY .h2titleBG{
		display: block;
		position: relative;
		background: url(images/vr/facility_title_bg_sp@2x.jpg) no-repeat;
		background-size: cover;
		background-position: center center;
		width: 100%;
		padding: 40px 0;
		margin-bottom: 80px;
	}

	#PAGE-FACILITY .h2sp{
		display: block;
		width: 65%;
		padding: 20px auto;
	}
	#PAGE-FACILITY h2{
		background: url(images/vr/facility_title_sp.svg) no-repeat;
		background-size: 100%;
		width:100%;    height:0;
		padding-top: 93.7%;
		margin: 40px auto;
		position: static;
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0);
	} */


	#PAGE-FACILITY .h2titleBG{
		display: block;
		background: url(images/vr/facility_title_bg_sp@2x.jpg) no-repeat;
		background-size: cover;
		background-position: center center;
		width: 100%;		height: 443px;
		position: relative;
	}

	/* #PAGE-FACILITY .h2sp{
		display: block;
		width: 65%;
		padding: 20px auto;
	} */
	#PAGE-FACILITY h2{
		background: url(images/vr/facility_title_sp.svg) no-repeat;
		/* background-size: 100%;
		width:100%;    height:0;
		padding-top: 98.73%; */
		width: 254px;height: 238px;
		position: absolute;
		left: 0;right: 0;
		top: 50%;
		-webkit-transform: translate(0, -50%);
		-ms-transform: translate(0, -50%);
		transform: translate(0, -50%);
		outline: 0;
		margin: auto;
		text-align: center;
	}


}


#PAGE-FACILITY .facility-list{
	width: 1122px;
	margin: auto;
}
#PAGE-FACILITY ul{
	width: 1158px;
	/* overflow: hidden; */
}
#PAGE-FACILITY ul li{
	float: left;
	margin-right: 36px;
	margin-top: 100px;
}
#PAGE-FACILITY ul li h5{
	font-size:20px;
	font-size:2.0rem;
	line-height: 1.1;
	margin-bottom: 15px;
}
#PAGE-FACILITY ul li .facilityPIC{
	position: relative;
	z-index: 4443;
	display: block;
}



#PAGE-FACILITY ul li .caption{
	position: absolute;
	z-index: 4444;
	top: 0;right: 0;
	background-color: #000000;
	color: #ffffff;
	line-height: 1;
	padding: 10px 8px;
	font-size:13px;
	font-size:1.3rem;
}
#PAGE-FACILITY ul li img{
	position: relative;
	z-index: 4443;
}

#PAGE-FACILITY ul li:nth-child(1) .chara{
	position: absolute;
	z-index: 4442;
	bottom:0;left: -87px;
}
#PAGE-FACILITY ul li:nth-child(6) .chara{
	position: absolute;
	z-index: 4442;
	top:10px;right: -65px;
}
#PAGE-FACILITY ul li:nth-child(8) .chara{
	position: absolute;
	z-index: 4442;
	top:-70px;right: 50px;
}
#PAGE-FACILITY ul li:nth-child(10) .chara{
	position: absolute;
	z-index: 4442;
	bottom:-72px;right: 10px;
}

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

	#PAGE-FACILITY .facility-list{
		width: 90%;
		margin: 90px auto 0 auto;
	}
	#PAGE-FACILITY ul{
		width: 100%;
	}
	#PAGE-FACILITY ul li{
		float: none;
		margin-right: 0;
		margin-top: 0;
	}

	#PAGE-FACILITY ul li + li{
		margin-top: 60px;
	}
	/* #PAGE-FACILITY ul li a .caption{
		padding: 3px 5px;
		font-size:11px;
		font-size:1.1rem;
	} */
	
	#PAGE-FACILITY ul li:nth-child(1) .chara{
		display: inline-block;
		bottom:auto;left: auto;top:-58px;right: 10px;
	}
	#PAGE-FACILITY ul li:nth-child(3) .chara{
		position: absolute;
		z-index: 4442;
		bottom:-58px;right: 30px;
	}
	#PAGE-FACILITY ul li:nth-child(8) .chara{
		position: absolute;
		z-index: 4442;
		top:-58px;right: 40%;
	}
	#PAGE-FACILITY ul li:nth-child(12) .chara{
		position: absolute;
		z-index: 4442;
		top:-64px;right: 48px;
	}

}




/* *-------------------------------------------------------------------
 ANIM
-------------------------------------------------------------------* */
.js-fadein {
    opacity: 1 !important;
    transform: translate(0) !important
}



[class^="i-"],
[class*=" i-"] {
	font-family: 'i' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

.i-phone:before {
	content: "\e900"
}

.i-email:before {
	content: "\e901"
}

.i-pin:before {
	content: "\e902"
}

.i-mobile:before {
	content: "\e903"
}

.i-ar-left:before {
	content: "\e904"
}

.i-ar-right:before {
	content: "\e905"
}

.i-ar-up:before {
	content: "\e906"
}

.i-subdirectory_arrow_left:before {
	content: "\e907"
}

.i-subdirectory_arrow_right:before {
	content: "\e908"
}

.i-ar-down:before {
	content: "\e909"
}

.page-footer,
.page-body,
.js-splash,
.site-header,
.js-webgl {
	opacity: 0
}

.section-title-icon svg path {
	stroke-dashoffset: 125.681px;
	stroke-dasharray: 125.681px
}

.site-menu {
	transform: translate(100%);
	opacity: 0
}

.is-loaded .site-menu,
.is-loaded .page-footer,
.is-loaded .page-body {
	opacity: 1
}

.section-title-icon svg {
	visibility: hidden
}

.is-loaded .section-title-icon svg {
	visibility: visible
}


/* パララックス */
.fade_off {
    opacity: 0;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
}

.fade_on {
    opacity: 1;
}




.parallax {
	min-height: 800px;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
   }





/* *--------------------------------------------------------------------
 ヘッダー（/）
--------------------------------------------------------------------* */
   #ABOUT.vr main{
	display: block;
	margin-top:  0 !important;
}

.cb-header {
  position: fixed !important;
  z-index: 9999 !important;
  display: block;
  left: 0;
  top: -80px;
}
.slide-down {
  animation-name: slideDown;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-delay: 0s;
  transform-origin: 50% 50% 0px;
  animation-duration: .5s;
  top: 0;
}
@keyframes slideDown {
  0% {
    top: -80px;
  }
  100% {
    top: 0px;
  }
}
.slide-up {
  animation-name: slideUp;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-delay: 0s;
  transform-origin: 50% 50%  0px;
  animation-duration: .5s;
  top: -80px;
}
@keyframes slideUp {
  0% {
    top: 0px;
  }
  100% {
    top: -80px;
  }
}

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

.cb-header {
  position: fixed;
  left: 0;
  top: -45px;
}
.slide-down {
  animation-name: slideDown;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-delay: 0s;
  transform-origin: 50% 50% 0px;
  animation-duration: .5s;
  top: 0;
}
@keyframes slideDown {
  0% {
    top: -45px;
  }
  100% {
    top: 0px;
  }
}
.slide-up {
  animation-name: slideUp;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-delay: 0s;
  transform-origin: 50% 50%  0px;
  animation-duration: .5s;
  top: -45px;
}
@keyframes slideUp {
  0% {
    top: 0px;
  }
  100% {
    top: -45px;
  }
}

}


/* *--------------------------------------------------------------------
 下からニョロン（/）
--------------------------------------------------------------------* */
.cb-footer {
  position: fixed;
	z-index: 8888;
  left: 0;
  bottom: -100px;
}
.slide-downdown {
  animation-name: slideDownDown;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-delay: 0s;
  transform-origin: 50% 50% 0px;
  animation-duration: .5s;
  bottom: -100px;
}
@keyframes slideDownDown {
  0% {
    bottom: 0px;
  }
  100% {
    bottom: -100px;
  }
}
.slide-upup {
  animation-name: slideUpUp;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-delay: 0s;
  transform-origin: 50% 50%  0px;
  animation-duration: .5s;
  bottom: 0;
}
@keyframes slideUpUp {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 0px;
  }
}