@charset "utf-8";

body {
    min-width: 1200px;
    background: #fff;
}
.left{float: left;}
.center{text-align: center;}
.clear{clear: both;}
.pc{display: block;}
.mb{display: none;}
@media (max-width:480px){
body {width: 100%; min-width: auto;}
.pc{display: none;}
.mb{display: block;}
}
img.hover-up:hover{
	margin-top: -2px;
	margin-bottom: 2px;
	position: relative;
	overflow: hidden;
}

/*-nav------------------
#RightMenu{
    width: 100px;
    height: 100%;
    background: #fff;
	position: fixed;
	top: 0;
    left: 0;
    z-index: 6;
}
/*Navi//////////////////////////////////////*/

#G-navi {
	position: fixed;
    height: 100px;
    width: 120px;
    left: 0;
    top: 0;
    float: none;
    color: #fff;
    font-size: 32px;
	z-index: 100;
}
#G-navi a{
	color: #fff;
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    overflow: hidden;
    background: #618bc8;
}
#G-navi a:hover{background: #769bd9;}
#G-navi ul.humberger{	
	display: inline-block;
	padding: 19px 17px;
	height: 100px;
	width: 120px;
	margin: 0;
}
#G-navi ul.humberger li{
	display: block;
	height: 1px;
	width: 52px;
	background-color:#fff;
	margin: 10px 0 0 16px;
}	
#G-navi ul.humberger li.menu{
	background-color: rgba(98, 138, 199, 0);
	font-size: 18px;
	color: #fff;
	margin: 10px 0 0 0;
	padding-left: 0;
}
#G-navi .button-collapse p.menu{
	font-size: 16px;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
    display: block;
    position: relative;
    overflow: hidden;
}
#Side-bg{
	display: block;
    position: fixed;
    width: 120px;
	height: calc(100% - 100px);
	bottom: 0;
	z-index: 100;
	background: #fff;
	display: block;

}
.SideLogo{
	display: block;
    position: fixed;
    top: 40%;
    width: 120px;
    padding: 0 0.5%;
    text-align: center;
	z-index: 100;
}
#Contact{
	display: flex;
    width: 120px;
    height: auto;
    background: #333333;
    color: #fff;
    text-align: center;
    font-size: 14px;
    transition: background .2s linear;
    cursor: pointer;
    bottom: 0;
    position: fixed;
	z-index: 100;
}
#Contact:hover{opacity: .8;}
#Contact ul {margin: 0;}
#Contact ul li {padding-bottom: 5px;}
#Contact a {
    color: #fff;
    width: 100%;
    height: 100px;
    display: block;
    position: relative;
    overflow: hidden;
}

@media (max-width:480px){
	#G-navi {
	    left: auto;
	    right: 0;
	    top: 0;
	    height: 45px;
	    width: 60px
	}
	#G-navi a{
	}
	#Side-bg,#Contact{
		display: none;
	}
	#G-navi ul.humberger{
		height: 45px;
		width: 60px;
    	padding: 7px 0;
	}
	#G-navi ul.humberger li{
		width: 32px;
	}
	#G-navi .button-collapse p.menu{
		display: none;
	}
	#G-navi .side-nav .contact-nav{
		position: absolute;
		bottom: 0;
		width: 100%;
	}
	#G-navi .side-nav .contact-nav ul{
		position: relative;
		width: 100%;
		height: auto;
	}
	#G-navi .side-nav .contact-nav > ul li a {
		display: inline-block;
		color: #fff;
		text-align: left;
		text-decoration: none;
		height: auto;
		width: 100%;
		line-height: 2;
	}
	#G-navi .side-nav .contact-nav > ul > li.tel > a {
		background: #fff000;
		color: #000;
		padding: 0.8em 2em;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	#G-navi .side-nav .contact-nav ul li.tel a span{
		font-size: 14px;
	}
	#G-navi .side-nav .contact-nav ul li.mail a {
		background: #303030;
		padding: 1.5em 2em;
		display: block;
	}
	#G-navi .side-nav .contact-nav ul li a img{
		width: 20px;
		margin-right: 5px;
	}
}
/*-ContentsArea------------------*/
.ContentsArea{
	margin: 0 0 0 120px;
	position: relative;
	width: calc(100% - 120px);
	float: left;
	top: 0;
	right: 0;
	overflow: hidden;
}
.header{
	position: absolute;
	right: 0;
	width: 100%;
	color: #fff;
	z-index: 200;
}
.header ul {float: right;}
.header ul li{
	float: left;
	border-bottom: 1px solid #fff;
    margin: 0 10px;
    height: 35px;
    width: 130px;
    text-align: center;
}
.header ul li.item01{ padding-left: 20px; }
.header ul li.item01 p{ padding-top: 7px; }
.header ul li.item02{ padding-top: 7px; }
.header ul li.item03{ padding-top: 4px; padding-left: 10px;}
.header ul li.item03 p{ padding-top: 3px; }
.header ul li a, .header ul li a:active {color: #fff;}

.header ul li .item02{
	padding: 10px 5px;
}
.header ul li.tel{
	width: 180px;
}
.header ul li.tel a{
	display: flex;
	align-items: center;
	width: 180px;
	letter-spacing: 2px;
}
.header ul li.tel a img{
	width: 33px;
}
.header ul li p{
	margin: 0;
	float: left;
}
.header ul li img{
	padding-right: 7px;
	float: left;
}
.header-mb{display: none;}

@media (max-width:480px){
	.ContentsArea{
		width: 100%;
		margin: 0 ;
		float: none;
	}
	.header{display: none;}
	.header-mb{
	height: 36px;
    display: block;
    margin-top: 1.5em;
    padding-left: 10px;
    overflow: hidden;
	}
	.header-mb p{margin: 0;}
	.header-mb img{
		width: 180px;
		height: auto;
	}
}
.loader-bg {
  display: block;
  position: fixed;
  width: 100%;
  height: 750px;
  top: 0px;
  right: 0px;
  background: #ffffff;
  z-index: 100;
}
.loader {
  display: block;
  position: fixed;
  top: 35%;
  left: 12%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #fff;
  z-index: 100;
}

.MainVisual{
	height: 750px;
	z-index: 50;
	display: block;
	overflow: hidden;
}
html.chrome .MainVisual #movie{
	display: none;
}
.MainVisual #movie{
	width: 100%;
	height: 750px;
	position: relative;
	overflow: hidden;
	z-index: -1;
	background: #fff;
	display: block;
}
.MainVisual #movie iframe{
	overflow: hidden;
	display: block;
	position: relative;
}
.MainVisual .mainicon01{
	width: 100%;
    z-index: 50;
    text-align: center;
    top: 150px;
    position: absolute;
    animation-name: mainicon01;
    animation-duration:30s;
    animation-fill-mode:forwards;
    -webkit-animation-name: mainicon01;
    -webkit-animation-duration:30s;
    -webkit-animation-fill-mode:forwards;
    z-index: 50;
}
@keyframes mainicon01{
	0%{opacity: 0;}
	4%{opacity: .8;}
	8%{opacity: 1;}
	12%{opacity: .8;}
	16%{opacity: 0;}
	100%{opacity: 0;}
}
.MainVisual .mainicon02{
	width: 100%;
    margin: 0 auto;
    z-index: 100;
    text-align: center;
    padding-top: 150px;
    position: absolute;
    animation-name: mainicon02;
    animation-duration:30s;
    animation-fill-mode:forwards;
    -webkit-animation-name: mainicon02;
    -webkit-animation-duration:30s;
    -webkit-animation-fill-mode:forwards;
    z-index: 50;
}
@keyframes mainicon02{
	0%{opacity: 0;}
	16%{opacity: 0;}
	20%{opacity: .8;}
	24%{opacity: 1;}
	28%{opacity: .8;}
	32%{opacity: 0;}
	100%{opacity: 0;}
}
.MainVisual .mainicon03{
	width: 100%;
    margin: 0 auto;
    z-index: 100;
    text-align: center;
    padding-top: 150px;
    position: absolute;
    animation-name: mainicon03;
    animation-duration:30s;
    animation-fill-mode:forwards;
    -webkit-animation-name: mainicon03;
    -webkit-animation-duration:30s;
    -webkit-animation-fill-mode:forwards;
    z-index: 50;
}
@keyframes mainicon03{
	0%{opacity: 0;}
	32%{opacity: 0;}
	36%{opacity: .8;}
	40%{opacity: 1;}
	44%{opacity: .8;}
	48%{opacity: 0;}
	100%{opacity: 0;}
}
.MainVisual .mainicon04{
	width: 100%;
    margin: 0 auto;
    z-index: 100;
    text-align: center;
    position: absolute;
    top: 18%;
    text-align: left;
    padding-left: 3%;
    z-index: 50;
    animation-name: mainicon04;
    animation-duration:30s;
    animation-fill-mode:forwards;
    -webkit-animation-name: mainicon04;
    -webkit-animation-duration:30s;
    -webkit-animation-fill-mode:forwards;
}
@keyframes mainicon04{
	0%{opacity: 0;}
	48%{opacity: 0;}
	52%{opacity: .8;}
	56%{opacity: 1;}
	60%{opacity: .8;}
	64%{opacity: 0;}
	100%{opacity: 0;}
}
.MainVisual .mainicon05{
	width: 100%;
    margin: 0 auto;
    z-index: 100;
    text-align: center;
    position: absolute;
    top: 18%;
    text-align: left;
    padding-left: 3%;
    z-index: 50;
    animation-name: mainicon05;
    animation-duration:30s;
    animation-fill-mode:forwards;
    -webkit-animation-name: mainicon05;
    -webkit-animation-duration:30s;
    -webkit-animation-fill-mode:forwards;
}
@keyframes mainicon05{
	0%{opacity: 0;}
	64%{opacity: 0;}
	68%{opacity: .8;}
	72%{opacity: 1;}
	76%{opacity: .8;}
	80%{opacity: 0;}
	100%{opacity: 0;}
}
.MainVisual .mainicon06{
	width: 100%;
    margin: 0 auto;
    z-index: 100;
    text-align: center;
    position: absolute;
    top: 18%;
    text-align: left;
    padding-left: 3%;
    z-index: 50;
    animation-name: mainicon06;
    animation-duration:30s;
    -webkit-animation-name: mainicon06;
    -webkit-animation-duration:30s;
}
@keyframes mainicon06{
	0%{opacity: 0;}
	80%{opacity: 0;}
	84%{opacity: .8;}
	88%{opacity: 1;}
	100%{opacity: 1;}
}
.MainVisual .movie-ef{
	width: 100%;
	height: 800px;
	display: block;
	position: absolute;
	background: url(../img/top/movie-ef.png);
	background-size: auto;
}
html.chrome .MainVisual #movie-tb {display: block;}
.MainVisual #movie-tb {display: none;}
.MainVisual #movie-tb video{
	min-width: 100%;
	min-height: 750px;
}
.MainVisual #movie iframe{
position: fixed;
z-index: -1;
top: 47%;
left: 50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}

.Contents{
	background: #fff;
}
@media (max-width:868px){
.MainVisual #movie{display: none;}
.MainVisual #movie-tb{
	display: block;
	overflow: hidden;
	}
.MainVisual #movie-tb video{
	width: 120%!important;
	display: block;}
}
@media (max-width:480px){
	.ContentsArea{
		width: 100%;
		margin: 0 ;
		float: none;
	}
	.loader-bg ,.loader ,.loader img ,.wrap{
		display: none!important;
	}
	.MainVisual{
		background: none;
		width: 100%;
		height: auto;
	}
	.MainVisual-mb img{
		width: 100%;
	}
	.MainVisual #movie,
	.MainVisual #movie-ef{
	display: none;
	}
}
/*-Map------------------*/
.stripe-BG-TOP{
	background: url(../img/bg-stripe-top.png) repeat-x left;
	height: 8px;
	width: 100%;
	margin-top: 60px;
}
.stripe-BG{
	background: url(../img/bg-stripe.png) ;
	width: 100%;
	display: block;
	position: relative;
	overflow: hidden;
	padding-top: 40px;
	padding-bottom: 40px;
}
.stripe-BG-BOTTOM{
	background: url(../img/bg-stripe-bottom.png) repeat-x left;
	height: 8px;
	width: 100%;
}
.MapArea h2.Mapttl{
	float: left;
	margin: 0;
}
.MapArea .Maptext{
	float: left; 
	padding-left: 50px; 
	padding-top: 30px; 
	font-size: 1em; 
	font-weight: bold;
	line-height: 1.8em;
	color: #fff;
	z-index: 50;
	position: relative;
}
.MapArea .Mapimg{
    text-align: center;
    display: block;
    position: relative;
    z-index: 30;
    padding-bottom:30px; 
}

@media (max-width:480px){
	.stripe-BG-TOP{margin-top: 0px;}
	.stripe-BG{padding: 10px 0;}
	.MapArea {
	width:100%;
	padding: 5% 2%;
	}
	.MapArea h2.Mapttl{
	text-align: center;
	}
	.MapArea h2.Mapttl img{
		width: 90%;
	}
	.MapArea .Maptext{
	font-size: 1em;
	font-weight: normal;
	padding-left: 0;
	padding-top: 0;
	}
	.MapArea .Mapimg {
		top: 0;
	}
	.MapArea .Mapimg img{
		width: 100%;
	}
	.MapArea > .center img{
		width: 98%;
	}
}
/*--Other-----------------*/
.Other{
    width: 1020px;
    margin: 50px auto 80px auto;
    display: block;
    position: relative;
    overflow: hidden;
}
.Other ul li{
	margin: 20px;
	float: left;
}
.Other ul li img{
	font-size:1px;
	line-height:1px;
}
@media (max-width:480px){
	.Other{
		width: 100%;
		margin: 0 auto;
	}
	.Other ul {
	padding: 0 2%;
	}
	.Other ul li{
	margin: 0 auto;
	float: none;
	text-align: center;
	}
}
/*--contact nav-----------------*/

#Contactnav{
	display: flex;
    width: 120px;
    height: auto;
/*	padding: 17px 8px;*/
    text-align: left;
    cursor: pointer;
    bottom: 0;
    position: fixed;
	z-index: 100;
}

/* common */
#Contactnav  ul {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}
#Contactnav ul li {
	position: relative;
	width: 120px;
	height: auto;
	display: flex;
	align-items: center;
}
#Contactnav ul li a {
	display: inline-block;
	color: #fff;
	text-align: left;
	text-decoration: none;
	height: auto;
	width: 120px;
}
#Contactnav ul li.tel a {
	background: #fff000;
	color: #000;
	padding: 0.8em 0.5em;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 2px;
}
#Contactnav ul li.tel a span{
	font-size: 14px;
}
#Contactnav ul li.mail a {
	background: #303030;
	padding: 1.5em 1em;
	display: block;
}
#Contactnav ul li a img{
	width: 20px;
	margin-right: 5px;
}
#Contactnav ul li.sub {
	width: 120px;
	height: 48px;
	left: 100px;
    border: 1px solid #303030;
    background: #303030;
	margin-left: 10px;
    padding: 6px 14px;
}
#Contactnav ul li.sub.balloon-left:before,
#Contactnav ul li.sub.balloon-left:after {
	border-color: transparent #303030 transparent transparent;
	left: -10px;
}
#Contactnav ul li:hover {
/*background-color: rgba(255,255,255,.3);*/
background: #6e7176;
}

#Contactnav ul ul {
	position: absolute;
	bottom: 0;
	top: 0;
	width: 100px;
	height: 100px;
	visibility: hidden;
	opacity: 0;
	transition: .2s ease-in-out;
}
#Contactnav ul ul li {
	float: none;
	margin: 0;
}
#Contactnav ul ul li:not(:first-child) {
	border-top: 1px solid #fff;
	padding: 12px 14px;
}

#Contactnav ul li:hover > ul {
	visibility: visible;
	opacity: 1;
}
@media (max-width:480px){
	#Contactnav{display: none;}
}

/*--News-----------------*/
.News{
	background: #eeeeee;
	padding: 20px 0;
}
.News .Newsinner{
	width:980px;
	margin: 0 auto;
}
.News h3{
	font-size: 1.5em;
	float: left;
}
.News h3 span{
	font-size: 0.7em;
	color: #618bc8;
	font-weight: normal;
}
.News .back-btn{
	float: right;
	width: 130px;
	color: #fff;
	text-align: center;
	background: #555555;
	border:1px solid #555555;
	border-radius: 22px;
	padding: 8px 10px 6px 13px;
	font-size: 0.9em;
	margin: 1.4em 0;
}
.News .back-btn:hover{
	opacity: .8;
}
.News dl.list{
	line-height: 3.5em;
	font-size: 0.9em;
}
.News dl.list hr{
	color:#cccccc;
	border-bottom: 1px;
}
.News dt{
	float: left;
	color: #618bc8;	
	padding-right: 1em;
}
@media (max-width:480px){
	.News .Newsinner{
	width:100%;
	padding: 0 2%;
	}
	.News h3{
	font-size: 1.5em;
	float: left;
	}
	.News h3 span{
	}
	.News .back-btn{
	float: right;
	width: 120px;
	margin: 1.4em 0;
	}
	.News dl.list{
		line-height: 2em;
	}
	.News dl.list hr{
	}
	.News dt{
	float: none;
	padding-right: 0em;
	}
	.News dd{
		margin-left: 0;
	}
}
/*--footer-----------------*/
footer {
	text-align: left;
	display: block;
	position: relative;
	overflow: hidden;
	padding-bottom: 2em;
	padding-top: 3.5em;
	background: #fff;
}
footer .address{
	float: left;
	width: 66%;
	padding-left: 5.5em;
	padding-top: 3em;
    line-height: 2em;
	font-size: 0.9em;
}
footer .address h1,
footer .address span{
	font-weight: bold;
	display: block;
	font-size:14px;
	margin: 0;
	padding: 0;
}
footer .privacy{
	float: left;
	width: 28%;
	padding-top: 5.4em;
	font-size: 0.9em;
}
footer .address a,
footer .privacy a{
	color: #000;
}
footer .pagetop{
	float: left;
	width: 2%;
}
footer .pagetop:hover{
	opacity: .8;
}

@media (max-width:480px){
	footer {
    margin-bottom: 0em;
    padding-top: 1.5em;
    padding-left: 2%;
    padding-right: 2%;
    }
	footer .address{
	float: none;
	width: 90%;
	padding-left: 0;
	padding-top: 0;
    line-height: 1.5em;
	font-size: 0.8em;
	}
	footer .privacy{
	float: none;
	width: 90%;
	padding-top: 0;
	font-size: 0.8em;
	}
	footer .pagetop{
    width: 10%;
    position: absolute;
    overflow: hidden;
    bottom: 2.5em;
    right: 2%;
    }

}
/* balloon-1 left */
.balloon-left {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 40px;
	line-height: 34px;
	color: #000;
	text-align: center;
	background: #ffffff;
	border: 3px solid #618bc8;
	z-index: 0;
	height: auto;
	text-align: left;
}
.balloon-left:before {
	content: "";
	position: absolute;
	top: 50%; left: -9px;
	margin-top: -9px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 9px 9px 9px 0;
	border-color: transparent #618bc8 transparent transparent;
	z-index: 0;
}
/*-------------------*/
.ToastBase_module_toast__a4511d95.TopCenterActionItems_module_topCenterActionItems__cde6f652{
	display: none;
}
/*-------------------*/