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

/* common */
*,a{ color: #fff;}
.core{ max-width: 970px; padding-left: 10px; padding-right: 10px; margin-left: auto; margin-right: auto; position:relative; z-index:2;}
.colL{ float: left;}
.colR{ float: right;}
a:hover{ cursor: pointer;}
.active a{ font-weight: bold; letter-spacing: 0.2em;}
.off a{ opacity: 0.6; }
.sky{ background: url(../../img/common/bg_main.jpg) repeat top center; background-size: cover; position: fixed; top: auto; left: -70vw; right: auto; bottom: -70vh; z-index: -1; transform-origin:center center; animation:spin 600s linear 0s infinite; width:240vw; height:240vh}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
@keyframes star {
	0% { opacity:0;}
	25% { opacity:1;}
	50% { opacity:0;}
	75% { opacity:1;}
	100% { opacity:0;}
}
figure { margin:0; }

.wrapper {  position:relative; overflow:visible;}
.wrapper::before { background: url(../../img/common/star.png) no-repeat top center; background-size: 100%; position:absolute; left:0; top:0; width:100%; height:100%; display:block; content:'';  animation:star 12s linear 0s infinite; z-index:-1;}
.rows{ padding: 40px 20px;}
img{ max-width: 100%; vertical-align: bottom}
.spText { }


/* header */
/* header{ width: 100%;}
header .colL{ width: 76.5%; padding: 2% 0;}
header .colR{ width: 23%;}
header .pcv .hdlogo{ text-align: center; margin: 40px;} */

#header { }
#header .headerBox { display:flex; width:100%; max-width:970px; box-sizing:border-box; padding:20px 10px; flex-wrap:wrap; justify-content:space-between; margin:0 auto; position:relative; z-index:2; }
#header .headerBox h1 { flex-grow:0; flex-shrink:1; flex-basis:230px; }
#header .headerBox .btnBox { flex-grow:0; flex-shrink:1; flex-basis:250px; }
#header .headerBox .btnBox ul { display:flex;  flex-wrap:wrap; justify-content:space-between; }
#header .headerBox .btnBox ul li { flex-grow:0; flex-shrink:1; flex-basis:calc(50% - 5px); }
#header .headerBox .btnBox ul li a { display:block; }
#header img { width:100%; height:auto; display:block; }
#header .headerBox .spMenuBtn { display:none; }

#gNavi { margin:0 auto 80px auto; }
#gNavi ul { display:flex; width:100%; max-width:970px; box-sizing:border-box; padding:20px 10px; flex-wrap:wrap; justify-content:space-between; margin:0 auto; align-items:center;}
#gNavi ul li { display:block; flex-grow:0; flex-shrink:1; flex-basis:12.5%; position:relative; line-height:1; }
#gNavi ul li a { display:block; position:relative; line-height:1; cursor:pointer; width:100%; max-width:100%; z-index:9998;}
#gNavi ul li a.comingSoon,
#gNavi ul li a.comingSoon:hover { opacity:0.3 !important; }
#gNavi ul li a:not(.comingSoon)::after {content:''; width:0%; position:absolute; left:50%; bottom:0; height:1px; background:#fff; display:block; transition:0.5s linear 0s;  }
#gNavi ul li a.on::after,
#gNavi ul li a:not(.comingSoon):hover::after { width:calc(100% - 10px); left:5px; }
#gNavi ul li::before { content:''; display:block; width:1px; height:100%; background:#fff; position:absolute; left:0; top:0; }
#gNavi ul li:last-of-type::after { content:''; display:block; width:1px; height:100%; background:#fff; position:absolute; right:0; top:0; }
  .menuWrapper { display:none ;}

.main{ padding-bottom: 20%; background: url(../../img/common/bg_ft.png) no-repeat center bottom; background-size: 100%;}

.content { background:url(../../img/common/bg_content_01.png); border-radius:20px; position:relative; box-sizing:border-box; padding:60px 40px 60px 40px; width:calc(100% - 40px); max-width:950px; margin:40px auto 80px; } 
.content h3 { position:absolute; top:-40px; left:0; width:100%; }
.content h3 img { width:396px; max-width:calc(100% - 40px); margin:0 auto; display:block; }

/* footer */
footer{ background: url(../../img/common/bg_ft_01.png) repeat-y 0 0; background-size: 100%;}
footer .rows{ position: relative; padding-left: 120px; min-height: 100px; padding-top: 50px; padding-bottom: 50px;}
footer .logo{ position: absolute; top: 20px; left: 10px;}
footer li{ font-size: 12px; line-height: 1.5em; display: inline-block; vertical-align: middle; text-align: right;}
footer li:first-child{ width: 28%;}
footer li:nth-child(2){ width: 51.5%; padding-top: 8px}
footer li:nth-child(3){ width: 19%;}
footer li p{ text-align: left; display: inline-block;}
footer li .contact{ display: inline-block; line-height: 1em; padding: 3px 0 0; vertical-align: top;}
footer li .tel{ font-size: 30px; letter-spacing: 0.15em; padding: 4px 0 4px 25px; background: url(../../img/common/arrow.png) no-repeat 5px 50%;}
.copyrights{ font-size: 10px; text-align: center; padding: 10px 0; background: url(../../img/common/bg_ft_02.png) repeat-y 0 0; background-size: 100%;}

#footerSpBnr { display:none; background:#00b7ee; position:fixed; bottom:0; left:0; width:100%; margin:0; padding:0; z-index:99999999; }
#footerSpBnr ul { width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; }
#footerSpBnr ul li { margin:0; }
#footerSpBnr ul li:nth-of-type(1)  { flex-grow:0; flex-shrink:1; flex-basis:40%; }
#footerSpBnr ul li:nth-of-type(2)  { flex-grow:0; flex-shrink:1; flex-basis:20%;}
#footerSpBnr ul li:nth-of-type(3)  { flex-grow:0; flex-shrink:1; flex-basis:20%;}
#footerSpBnr ul li:nth-of-type(4)  { flex-grow:0; flex-shrink:1; flex-basis:20%;}
#footerSpBnr ul li a,
#footerSpBnr ul li a:hover { display:block;  text-align:center; line-height:1; }
#footerSpBnr ul li a img { width:100%; height:auto; }



/*---------------
    media
---------------*/
@media (min-width: 768px){
	.spv{ display: none;}
	/* header nav{ border-left: 1px solid #fff;}
	header li{ float: left; width: 16.66666%; text-align: center; border-right: 1px solid #fff; font-size: 13px;}
	header nav li{ position: relative;}
	header nav li a {padding: 5px 0; display: block;}
	header nav li a:after{ content: ' '; position: absolute; bottom: 0; left: 50%; right: 50%; padding-top: 1px; background-color: #fff; transition: all .3s; -webkit-transition: all .3s; z-index: 12;}
	header nav li:hover a:after,
	header nav li.active a:after{  left: 10px; right: 10px;}
	header nav li.off:hover a:after{ display: none;} */
	footer li .tel a,
	footer li .tel a:hover{ pointer-events: none; cursor: none;}
/* 768px~ */}
@media (max-width: 980px){
  header li {  font-size: 1.4vw;}
}
@media (max-width: 890px){
  footer .rows{ padding-top: 25px; padding-bottom: 25px;}
  footer .logo{ position: absolute; top: 25px;}
  footer li{ text-align: left; margin-bottom: 10px;}
  footer li:first-child{ width: 100%;}
  footer li:nth-child(2){ width: 380px;}
  footer li:nth-child(3){ width: auto;}
  /* ~890px */}
@media (max-width: 767px){
	.spText::before { content:attr(data-text); display:inline; }
	.spText img { display:none !important }
	
  .pcv{ display: none;}
  .wrapper{ background: url(../../img/common/star.png) no-repeat 50% 15vw; background-size: 100%;}
  #sphead{ position: fixed; top: 0; left: 0; right: 0; background-color: #021839; padding-top: 60px; z-index: 8; box-shadow:0px 1px 5px 2px rgba(255, 255, 255, 0.4);}
  #sphead .hdlogo{ position: fixed; left: 10px; top: 17px; right: 60px; width: 240px; z-index: 9;}
  #sphead #menubtn{ position: fixed; right: 10px; top: 10px; z-index: 9;}
  /* header nav{ position: fixed; top: 60px; left: 0; right: 0; z-index: 10; background-color: #fff;}
  header li{ width: 100%; text-align: center; font-size: 14px;}
  header li a{ padding: 10px; background-color: #fff; color: #555; border-bottom: 1px solid #ccc; display: block;} */
  
  #header { position:fixed; left:0; top:0; z-index:9999; background:rgba(2,24,57,0.9); box-shadow:0 0 3px 3px rgba(255,255,255,0.5); }
  #header .headerBox { align-items:center; padding:10px; }
  #header .headerBox h1 { flex-basis:30%; }
  #header .headerBox .btnBox { flex-basis:50% }
  #header .headerBox .spMenuBtn { display:block; flex-grow:0; flex-shrink:1; flex-basis:10%; text-align:center; font-size:5vw;}
  #header .headerBox .spMenuBtn a { display:block; height:100%; }
  #gNavi { display:none; }
  #gNavi.active { display:block; position:fixed; left:0; z-index:10000; }
  #gNavi ul {}
  #gNavi ul li { flex-basis:50%; border-bottom:#ccc solid 1px; }
  #gNavi ul li a { font-size:3vw; padding:1em 0; display:block; line-height:1em; text-align:center; }
  #gNavi ul li:nth-of-type(odd)::before,
  #gNavi ul li:last-of-type::after { display:none; }
  .menuWrapper { display:none; }
  .menuWrapper.active { display:block; position:fixed; width:100%; height:100%; left:0; top:0; z-index:9997; background:rgba(2,24,57,0.8); }
  
  .menu-trigger,
  .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box;}
  .menu-trigger { position: relative; width: 46px; height: 40px;}
  .menu-trigger span { position: absolute; left: 0; width: 100%; height: 4px; background-color: #fff; border-radius: 4px;}
  .menu-trigger span:nth-of-type(1) {top: 0;}
  .menu-trigger span:nth-of-type(2) {top: 18px;}
  .menu-trigger span:nth-of-type(3) {bottom: 0;}
  .open .menu-trigger span:nth-of-type(1) {-webkit-transform: translateY(18px) rotate(-45deg);transform: translateY(18px) rotate(-45deg);}
  .open .menu-trigger span:nth-of-type(2) {opacity: 0;}
  .open .menu-trigger span:nth-of-type(3) {-webkit-transform: translateY(-18px) rotate(45deg);transform: translateY(-18px) rotate(45deg);}
  .open {}
  .overlay{ display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 7;}
  .open .overlay{ display: block;}
  #footerSpBnr { display:block; }
  footer {padding-bottom: 20%;}
	.anchorfix{ padding-top: 60px; margin-top: -60px;}
	
	.content { padding:60px 20px; border-radius:10px; }
	
/* ~767px */}


@media (max-width: 510px){
  footer {text-align: center;}
  footer .rows{ position: static; padding-left: 20px; padding-top: 20px; padding-bottom: 20px; display: inline-block; width: auto;}
  footer .logo{ position: static; text-align: center;}
  footer li{ display: block; margin-top: 20px; margin-bottom: 0; width: auto!important;}
  footer li .contact{ display: block; line-height: 1em; padding: 0; margin-bottom: 10px;}
  footer li .tel{ display: block; font-size: 30px; padding: 4px 0 4px; background: none;}
/* ~510px */}