@charset "utf-8";
/* CSS Document */

html{ scroll-behavior: auto !important;}
body{
	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  letter-spacing: 1px;
  color: #000 !important;
  position: relative;
}
body.nav_fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
a{ color: #2e3190;}
a:hover{ color: #4d4d4d;}
*:focus{ box-shadow: none !important;}

/*================================
Header
================================*/
#header{
	/*position: relative;*/
	z-index: 1000;
  position: absolute;
  width: 100%;
  top: 0;
}
.navbar-brand img{
  height: auto;
}
#global_nav > .container{
	position: relative;
	padding-left: 0;
	padding-right: 0;
}
#global_nav .navbar-brand{
	padding-left: .5rem;
	padding-top: 0;
}
#global_nav .navbar-nav .nav-link{
	color: #000;
	font-size: .95rem;
}
#global_nav .navbar-nav .dropdown-menu{
	border: none;
	border-radius: 0;
	background-color: rgba(255, 255, 255, .8);
	box-shadow: none;
}
#global_nav .navbar-nav .dropdown-menu li a{ font-size: .95rem;}
#global_nav .navbar-nav .dropdown-menu li a:hover{ background-color: transparent;}
#hd_contact{
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}
#hd_contact .tel{ font-weight: bold;}
#hd_contact .tel svg{
	margin-top: -2px;
	margin-right: 2px;
}
#hd_contact .contact .btn{
	color: #fff;
	font-size: .85rem;
	background-color: #333;
	box-shadow: none;
	border: none;
	background-image: none;
	border-radius: .25rem;
}
#hd_contact .contact .btn:hover{ background-color: #000;}
@media (min-width: 992px){
	#global_nav .navbar-nav{ margin-left: auto;}
	#hd_contact{
		top: -40px;
		right: 0;
	}
}
@media (min-width: 768px) and (max-width: 991px){
	#global_nav > .container{ flex-wrap: wrap;}
	#global_nav .navbar-brand{
		padding-bottom: 0;
		margin-bottom: .509rem;
	}
	#global_nav .navbar-collapse{
		width: 100%;
		justify-content: center;
	}
	#hd_contact{
		top: 0;
		right: .5rem;
	}
}
@media (min-width: 768px){
	#global_nav{ height: 110px;}
	#global_nav,
	#global_nav > .container{ align-items: flex-end;}
	#global_nav .navbar-brand{ max-width: 260px;}
	#global_nav .dropdown-toggle::after{ display: none;}
	#global_nav .navbar-nav .dropdown-menu[data-bs-popper]{
		margin-top: 8px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		text-align: center;
	}
	#global_nav .navbar-nav .nav-link,
	#global_nav .navbar-nav .dropdown-menu li a{ position: relative;}
	#global_nav .navbar-nav .nav-link::before,
	#global_nav .navbar-nav .dropdown-menu li a::before{
		content: '';
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient( rgba(250, 190, 0, .3) 0%, rgba(250, 190, 0, 0) 50%, rgba(250, 190, 0, 0) 100%);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    opacity: 0;
    transition: .3s;
	}
	#global_nav .navbar-nav .nav-link:hover::before,
	#global_nav .navbar-nav .dropdown-menu li a:hover::before{ opacity: .6;}
	#hd_contact{
		position: absolute;
		display: flex;
		align-items: center;
	}
	#hd_contact .tel{ font-size: 1.6rem;}
	#hd_contact .tel svg{
		width: 22px;
		height: 22px;
	}
	#hd_contact .contact .btn{
		width: 150px;
		padding: .2rem;
		margin-left: 1rem;
	}
	#hd_sp{ display: none;}
}
@media (max-width: 991px){
	#global_nav > .container{ max-width: 100%;}
}
@media (max-width: 767px){
	#header{ height: 64px;}
	#global_nav .navbar-brand{ max-width: 230px;}
	.navbar-collapse{
		background-color: #fff;
		padding-bottom: 1rem;
		height: 100vh;
    min-height: 100%;
		margin-top: 10px;
		z-index: 110;
	}
	#global_nav .navbar-nav{ border-top: #e4e4e4 1px solid;}
	#global_nav .navbar-nav .nav-item{
		border-bottom: #e4e4e4 1px solid;
	}
	#global_nav .navbar-nav .nav-item:not(.dropdown),
	#global_nav .dropdown-menu li a{ position: relative;}
	#global_nav .navbar-nav .nav-item:not(.dropdown)::after,
	#global_nav .dropdown-menu li a::after{
		content: '';
		display: inline-block;
		width: 5px;
    height: 5px;
    border-top: 1px solid #4d4d4d;
    border-right: 1px solid #4d4d4d;
		position: absolute;
		top: 50%;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
		right: 20px;
	}
	#global_nav .navbar-nav .nav-link{ padding: .75rem;}
	#global_nav .navbar-nav .nav-link:hover{ background-color: rgba(250, 190, 0, .1);}
	#global_nav .navbar-nav .dropdown-menu{
		margin-top: 0;
		border-top: #e4e4e4 1px solid;
		border-left: none;
		border-right: none;
		border-bottom: none;
		border-radius: 0;
	}
	#global_nav .navbar-nav .dropdown-toggle.show{ background-color: rgba(250, 190, 0, .1);}
	#global_nav .navbar-nav .dropdown-menu .dropdown-item{ padding: .25rem .75rem;}
	.navbar-toggler{
		position: absolute;
		top: 2px;
		right: .5rem;
		width: 46px;
		height: 46px;
		border: #4d4d4d 1px solid;
		border-radius: 50%;
		padding: 0;
		z-index: 120;
	}
	.navbar-toggler:focus{ box-shadow: none;}
	.navbar-toggler-icon{
		position: absolute;
		top: 21px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		background-color: #4d4d4d;
		width: 25px;
		height: 1px;
		border-radius: 10px;
		transition: background 10ms 300ms ease;
	}
	.navbar-toggler-icon::before,
	.navbar-toggler-icon::after {
		content: '';
		transition: top 300ms 350ms ease, transform 300ms 50ms ease;
		position: absolute;
		left: 0;
		background-color: #4d4d4d;
		width: 25px;
		height: 1px;
		border-radius: 10px;
	}
	.navbar-toggler-icon::before{ top: -6px;}
	.navbar-toggler-icon::after{ top: 6px;}
	.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon,
	.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before,
	.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after{ background-color: #4d4d4d;}
	.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{ background: transparent;}
	.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before,
	.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
		transition: top 300ms 50ms ease, transform 300ms 350ms ease;
		top: 0;
	}
	.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before{ transform: rotate(28deg);}
	.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after{ transform: rotate(-28deg);}
	.navbar-nav .dropdown .dropdown-toggle{ position: relative;}
	.navbar-nav .dropdown .dropdown-toggle::before,
	.navbar-nav .dropdown .dropdown-toggle::after{
		display: block;
		content: '';
		background-color: #4d4d4d;
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		border-radius: 10px;
		border: none;
	}
	.navbar-nav .dropdown .dropdown-toggle::after{
		left: auto;
		right: 15px;
		width: 11px;
		height: 1px;
	}
	.navbar-nav .dropdown .dropdown-toggle::before{
		right: 20px;
		width: 1px;
		height: 11px;
	}
	.navbar-nav .dropdown .dropdown-toggle[aria-expanded="true"]::before{ display: none;}
	#hd_contact .tel{ font-size: 1.1rem;}
	#hd_contact{
		max-width: 360px;
		margin: 0 auto;
	}
	#hd_contact li{
		text-align: center;
		border: #333 1px solid;
		border-radius: 0.25rem;
		padding: .5rem .75rem;
		margin-top: .5rem;
		display: table;
		width: 100%;
		height: 45px;
	}
	#hd_contact li.contact .btn,
	#hd_contact .tel{
		display: table-cell;
		vertical-align: middle;
	}
	#hd_contact li.contact{ background-color: #333;}
	#hd_contact li.contact .btn{ padding: 0;}
	#hd_contact .tel svg{
		width: 16px;
		height: 16px;
	}
	#hd_contact li .sp-tel{
		display: table;
		width: 100%;
		height: 100%;
		color: #333;
		text-decoration: none;
	}

	#hd_sp{
		text-align: center;
		margin: 1.5rem 0;
	}
	#hd_sp ul{
		list-style: none;
		padding-left: 0;
		margin-bottom: 0;
	}
	#hd_sp ul li{ margin-top: .5rem;}
	#hd_sp ul li a{
		color: #000;
		text-decoration: none;
	}
}

/*スマホメニュー開く動作*/
#global_nav .collapsing{
  -webkit-transition: none;
  transition: none;
  display: none;
}
#global_nav .navbar-collapse.show{ animation: fadeInNav 0.5s ease-out forwards;}
@keyframes fadeInNav {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@media (min-width: 768px){
	#mv_wrap{ padding-top: 110px;}
}
@media (max-width: 767px){
	#mv_wrap{ padding-top: 64px;}
}
/*ヘッダー固定*/
#header.fixed{ 
	position: fixed;
	width: 100%;
	background-color: rgba(255, 255, 255, .9);
}


/*================================
local nav
================================*/
/*ページ上部
================================*/
#local_nav .navbar{ padding: 0;}
#local_nav .navbar-nav{
	width: 100%;
	justify-content: center;
	padding: 1rem;
	background-color: #fff;
	filter: drop-shadow(0 0 5px rgba(178, 178, 178, .3));
}
#local_nav .navbar-nav .nav-link{
	position: relative;
	color: #000;
	padding: 0 1.5rem;
}
#local_nav .navbar-nav .nav-link::before{
	content: '';
	display: inline-block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: radial-gradient( rgba(250, 190, 0, .3) 0%, rgba(250, 190, 0, 0) 50%, rgba(250, 190, 0, 0) 100%);
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
	opacity: 0;
	transition: .3s;
}
#local_nav .navbar-nav .nav-link:hover::before{ opacity: .6;}
@media (min-width: 768px){
	#local_nav{ margin: 4rem 0;}
}
@media (max-width: 767px){
	#local_nav{ display: none;}
}


/*ページ下部
================================*/
#bottom_link ul{
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
	display: flex;
	justify-content: center;
}
#bottom_link ul li:first-child{ border-left: #4d4d4d 1px solid;}
#bottom_link ul li{ border-right: #4d4d4d 1px solid;}
#bottom_link ul li a{
	position: relative;
	text-align: center;
	display: block;
	color: #000;
	text-decoration: none;
}
#bottom_link ul li a::before{
	content: '';
	display: inline-block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: radial-gradient( rgba(250, 190, 0, .3) 0%, rgba(250, 190, 0, 0) 50%, rgba(250, 190, 0, 0) 100%);
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
	opacity: 0;
	transition: .3s;
}
#bottom_link ul li a:hover{ color: #000;}
#bottom_link ul li a:hover::before{ opacity: .6;}

@media (min-width: 992px){
	#bottom_link ul li{ width: 25%;}
}
@media (min-width: 768px){
	#bottom_link ul li a{ padding: 0 1rem;}
}
@media (max-width: 991px){
	#bottom_link ul li{ width: 50%;}
}
@media (max-width: 767px){
	#bottom_link ul li a{
		font-size: .8rem;
		padding: 0 .25rem;
	}
}

/*================================
Page header
================================*/
#page_hd > .container{
	position: relative;
	padding: 0;
}
#page_hd h1{
	position: absolute;
	bottom: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	text-align: center;
	width: 80%;
	margin-bottom: 0;
	font-size: calc(1.2rem + 1.5vw);
}
#page_hd h1 span{
	background-color: #fff;
	padding: .5rem;
	display: block;
}
#page_hd #mv_bg{
	width: 100%;
	height: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
#about #page_hd #mv_bg{ background-image: url("../img/about/mv.jpg");}
#privacy #page_hd #mv_bg{ background-image: url("../img/privacy/mv.jpg");}
#contact #page_hd #mv_bg{ background-image: url("../img/contact/mv.jpg");}
#news #page_hd #mv_bg{ background-image: url("../img/news/mv.jpg");}
#how_to #page_hd #mv_bg{ background-image: url("../img/how_to/mv.jpg");}
#q_a #page_hd #mv_bg{ background-image: url("../img/q_a/mv.jpg");}
#service #page_hd #mv_bg{ background-image: url("../img/service/mv.jpg");}
#facilities #page_hd #mv_bg{ background-image: url("../img/facilities/mv.jpg");}
#gallery #mv_bg{ background-image: url("../img/gallery/mv.jpg");}

@media (min-width: 1200px){
	#page_hd h1{ font-size: 2.25rem;}
}
@media (min-width: 768px){
	#page_hd h1{ max-width: 425px;}
	#page_hd #mv_bg{ padding-top: 28%;}
}
@media (max-width: 991px){
	#page_hd > .container{ max-width: 100%;}
}
@media (max-width: 767px){
	#page_hd h1{ max-width: 320px;}
	#page_hd #mv_bg{ padding-top: 50%;}
}

/*================================
Main
================================*/
#main{
	margin-top: 0 !important;
	overflow-x: hidden;
}
@media (min-width: 768px){
	.section{ padding: 4rem 0;}
	.sub_section{ padding: 3rem 0;}
}
@media (max-width: 767px){
	.section{ padding: 3rem 0;}
	.sub_section{ padding: 2rem 0;}
}

/*背景
================================*/
.bg_gry{ background-color: #f5f5f3;}

/*フォント
================================*/
.fc_red{ color: #bf272d;}

/*タイトル
================================*/
.sect_ttl{
	font-weight: bold;
	text-align: center;
	margin-bottom: 2rem;
}
.lb_ttl{
	position: relative;
	text-align: center;
	font-size: calc(1rem + 0.9vw);
}
.lb_ttl::before{
	content: '';
	display: inline-block;
	width: 40px;
	height: 2px;
	background-color: #fccc44;
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	bottom: -.8rem;
}
.lb_ttl:not(:first-child){ margin-top: 4rem;}
.ll_ttl{
	position: relative;
	font-size: calc(.8rem + 0.9vw);
	border-bottom: #e4e4e4 1px solid;
	padding-bottom: .5rem;
	margin-bottom: 1rem;
}
.ll_ttl::after{
	content: '';
	display: inline-block;
	width: 40px;
	height: 1px;
	background-color: #fccc44;
	position: absolute;
	bottom: -1px;
	left: 0;
}
.ll_ttl:not(:first-child){ margin-top: 2.5rem;}

@media (min-width: 1200px){
	.lb_ttl{ font-size: 1.6rem;}
	.ll_ttl{ font-size: 1.4rem;}
}
@media (min-width: 768px){
	.lb_ttl{ margin-bottom: 3rem;}
}
@media (max-width: 767px){
	.lb_ttl{ margin-bottom: 2rem;}
}

/*リンク
================================*/
/*詳細*/
.detail_link{
  position: relative;
	padding-right: 25px;
	text-decoration: none;
	color: #000;
	font-size: 1.1rem;
	font-weight: bold;
}
.detail_link::before{
	content: '';
	display: inline-block;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: radial-gradient( rgba(250, 190, 0, .3) 0%, rgba(250, 190, 0, 0) 50%, rgba(250, 190, 0, 0) 100%);
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
	opacity: 0;
	transition: .3s;
}
.detail_link span::before,
.detail_link span::after{
	content: '';
  position: absolute;
	right: 3px;
  background-color:#333;
  transition: .3s;
}
.detail_link span::before{
	top: 50%;
  -webkit-transform: translateY(-50%);
	transform: translateY(-50%);
  width: 15px;
  height: 1px;
}
.detail_link span::after{
	top: 50%;
  -webkit-transform: translateY(-50%) rotate(40deg);
	transform: translateY(-50%) rotate(40deg);
  width: 5px;
  height:1px;
	margin-top: -1px;
}
.detail_link:hover{ color: #000;}
.detail_link:hover::before{ opacity: 1;}
.detail_link:hover span::before,
.detail_link:hover span::after{ right : 0;}

/*PDF*/
.pdf_link{
	position: relative;
	padding-left: 30px;
}
.pdf_link::after{
	content: '';
	display: inline-block;
	width: 21px;
	height: 27px;
	background-image: url("../img/icon_pdf.png");
	background-size: contain;
	position: absolute;
	top: 50%;
  -webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 0;
}

/*================================
関連施設（TOP、概要・アクセス）
================================*/
#relation{ padding-bottom: 0;}
#relation > .container{ padding-bottom: 4rem;}
.opening{ text-align: center;}
.opening p{
	color: #6e361c;
	font-weight: bold;
	margin-bottom: .5rem;
}
.relationbox p{
	text-align: center;
	margin-top: .5rem;
	margin-bottom: 0;
}
@media (min-width: 768px) and (max-width: 991px){
	#relation .container{ max-width: 100%;}
}
@media (min-width: 768px){
	#relation{ background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 65%, #f5f5f3 65%, #f5f5f3 100%);}
	.opening p{ font-size: 1.3rem;}
	.relationbox{ margin-top: 3rem;}
}
@media (max-width: 767px){
	#relation{ background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%, #f5f5f3 35%, #f5f5f3 100%);}
	.opening p{ font-size: 1.1rem;}
	.opening p span{ display: block;}
	.relationbox{ margin-top: 2rem;}
}

/*================================
お問い合わせ
================================*/
.contactbox{
	max-width: 940px;
	margin: 0 auto;
	text-align: center;
	background-color: #f5f5f3;
	padding: 2rem 1rem;
}
.contactbox h2{
	font-weight: bold;
}
.contactbox ul{
	padding-left: 0;
	list-style: none;
	margin: 0 auto;
}
.contactbox ul li{
	display: table;
  width: 100%;
	background-color: #333;
	border: #f5f5f3 1px solid;
}
.contactbox ul li .btn_txt{
	position: relative;
	color: #fff;
	text-decoration: none;
	display: table-cell;
  vertical-align: middle;
}
.contactbox ul li a:hover{ background-color: #000;}
.btn_icon{
	position: absolute;
	top: 50%;
  -webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.btn_mail .cls-1{
	fill:none;
	stroke:#333;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-width:1.2px;
}
.btn_tel .cls-1{
	fill:#333;
	stroke-width:0;
}
.btn_tel .tel{ font-weight: bold;}
@media (min-width: 992px){
	.contactbox ul li{ height: 80px;}
	.btn_icon{
		width: 55px;
		height: 55px;
	}
	.btn_mail svg,
	.btn_tel svg{
		width: 25px;
		height: 25px;
	}
}
@media (min-width: 768px) and (max-width: 991px){
	.contactbox ul li{ height: 70px;}
	.btn_icon{
		width: 45px;
		height: 45px;
	}
	.btn_mail svg,
	.btn_tel svg{
		width: 20px;
		height: 20px;
	}
}
@media (min-width: 768px){
	.contactbox h2{ font-size: 1.4rem;}
	.contactbox ul{
		max-width: 740px;
		display: flex;
		justify-content: center;
	}
	.btn_icon{ left: 1.5rem;}
	.btn_tel .tel{ font-size: 1.3rem;}
}
@media (max-width: 767px){
	.contactbox h2{ font-size: 1.3rem;}
	.contactbox ul{ max-width: 330px;}
	.contactbox ul li{ height: 60px;}
	.contactbox ul li a{ font-size: .9rem;}
	.btn_icon{
		width: 35px;
		height: 35px;
		left: .75rem;
	}
	.btn_mail svg,
	.btn_tel svg{
		width: 15px;
		height: 15px;
	}
	.btn_tel .tel{ font-size: 1.2rem;}
	.btn_tel .sp-tel{
		display: table;
		width: 100%;
		height: 100%;
		text-decoration: none;
	}
}

/*================================
Footer
================================*/
#footer{
	border-top: #e4e4e4 1px solid;
	padding: 2rem 0 .5rem;
}
#footer a{ color: #000;}
#ft_logo{ margin-bottom: 1rem;}
#ft_logo img{ max-width: 280px;}
#ft_sns{
	display: flex;
	padding-left: 0;
	list-style: none;
}
#ft_sns li:not(:last-child){ margin-right: .5rem;}
#ft_sns li img{ height: 25px;}
#ft_link ul{ margin-bottom: 0;}
#ft_link .link_list{
	list-style: none;
	padding-left: 0;
}
#ft_link #ft_blank ul{ margin-top: .5rem;}
#ft_link ul li a{
	font-size: .95rem;
	text-decoration: none;
}
#copyright{
	font-size: .85rem;
	text-align: center;
	margin-top: 2rem;
}
@media (min-width: 768px) and (max-width: 991px){
	#ft_link{ flex-wrap: wrap;}
	#ft_link #ft_blank{ margin-top: 2rem;}
}
@media (min-width: 768px){
	#ft_wrap{
		display: flex;
		justify-content: space-between;
	}
	#ft_add{ width: 300px;}
	#ft_link{
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}
	#ft_link .link_list,
	#ft_link #ft_blank{ margin-left: 1.5rem;}
}
@media (max-width: 767px){
	#ft_wrap{ text-align: center;}
	#ft_add p{
		display: inline-block;
		text-align: left;
	}
	#ft_sns{ justify-content: center;}
	#ft_link .link_list:nth-child(1),
	#ft_link .link_list:nth-child(2) li:not(:last-child){ display: none;}
	#ft_link #ft_blank{ margin-top: 1rem;}
	#ft_link #ft_blank ul{ display: none;}
}

/*Page Top
================================*/
#page_top{
	position: fixed;
	z-index: 100;
	background-color: rgba(77, 77, 77, .9);
  border-radius: 50%;
  display: block;
  width: 50px;
  height: 50px;
	font-size: .95rem;
	font-weight: bold;
	text-align: center;
  text-decoration: none;
}
#page_top::before{
	content: 'TOP';
	display: inline-block;
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	bottom: 8px;
	color: #fff;
}
#page_top::after{
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%) rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
  top: 12px;
}
#page_top:hover{ background-color: rgba(77, 77, 77, 1);}

@media (min-width: 768px){
  #page_top{ right: 15px;}
}
@media (max-width: 767px){
  #page_top{ right: 8px;}
}