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

/*//////////////////////
	RESET
//////////////////////*/
*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;}
input, button{ color: inherit; font: inherit; -webkit-appearance: none; -moz-appearance: none;}
input,button,select,textarea{ padding: 0; border: none; border-radius: 0; outline: none; background: none;}
input{ line-height: normal;}
input:focus{ outline: none;}
input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-ms-clear,input::-ms-reveal{ display: none;}
input::-moz-focus-inner{ padding: 0; border: 0;}
button{ text-transform: none; overflow: visible; cursor: pointer;}
button::-moz-focus-inner{ padding: 0; border: 0;}
*:focus { outline: none;}
input::-ms-clear,input::-ms-reveal{ display: none;}


/*//////////////////////
	BASE
//////////////////////*/
html{ font-size:62.5%;}
body{ font:1.3rem Lucida Grande,Arial,Meiryo,Hiragino Maru Gothic Pro,verdana,'Trebuchet MS',Helvetica,sans-serif; line-height:1.8; color:#000;}
body{ min-width:320px; -webkit-text-size-adjust: 100%;}

a{ color:#069; text-decoration:none;}
a:visit{ color:#069; text-decoration:none}
a:hover{ opacity:0.8; filter:alpha(opacity=80); -ms-filter:"alpha( opacity=80 )"; }
a:hover img{ opacity:0.8; filter:alpha(opacity=80); -ms-filter:"alpha( opacity=80 )"; background:none !important; }

img{ display:block; border:none; max-width:100%; height:auto;}

p{ margin-bottom:1rem;}

ul,ol{ padding-left:0;}
ol li,ul li{ list-style:none;}

button,html [type="button"], [type="reset"],[type="submit"]{ text-align: center;}
svg,polygon{ vertical-align:middle;}

@font-face {
  font-family: 'icomoon';
  src:  url('./fonts/icon.eot?yvqo55');
  src:  url('./fonts/icon.eot?yvqo55#iefix') format('embedded-opentype'),
    url('./fonts/icon.ttf?yvqo55') format('truetype'),
    url('./fonts/icon.woff?yvqo55') format('woff'),
    url('./fonts/icon.svg?yvqo55#icon') format('svg');
  font-weight: normal;
  font-style: normal;
}

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

/*//////////////////////
	FRAME
//////////////////////*/
html.locked{ overflow-y: hidden;}
body{ width:100%; height: 100%; min-width:320px; position: relative;}
body.fixed{ position: fixed; overflow-x: hidden; overflow-y:scroll;}
#wrap{ width:100%; height:100%; position:relative;}
#header{ width:100%;}
#contents{ width:100%;}
#footer{ width:100%;}
/*//////////////////////
	LOADING
//////////////////////*/
#loadingWrap{ width: 100%; height: 100%; display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background:#fff; z-index: 9999;}
#loadingImg{ width: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,40px); transform: translate(-50%,40px);}
#loadingImg .ball{ margin-bottom:-5px; width: 20px; height: 20px; border-radius: 50%; position:absolute; top:-13px; left:5px; background-color:#0088d0; -webkit-animation: ballanimation 1s ease-in-out infinite; animation:ballanimation 1s ease-in-out infinite; z-index:2;}
@-webkit-keyframes ballanimation{ 20% { -webkit-transform: translate(0,-40px); } 35% { -webkit-transform: translate(0,-45px); } 90% { -webkit-transform: translate(0,-50px); } 95% { -webkit-transform: translate(0,-40px);}}
@keyframes ballanimation{ 20% { transform: translate(0,-40px); } 35% { transform: translate(0,-45px); } 90% { transform: translate(0,-50px); } 95% { transform: translate(0,-40px);}}
#loadingImg .shadow{  width:30px; height:15px;position:absolute; -webkit-animation: ballshadow 1s infinite; animation: ballhadow 1s infinite; border-radius:50%; background-color:#005AA2;}
@-webkit-keyframes ballshadow{ 70% { -webkit-transform:  scale(0.5); opacity:0.5; } 100% { -webkit-transform:  scale(0.4); opacity:0.4; }}
@keyframes ballshadow{ 70% { transform:  scale(0.5); opacity:0.5; } 100% { transform:  scale(0.4); opacity:0.4; }}
/*//////////////////////
	ANIMATION
//////////////////////*/
.js-inviewport{ -webkit-animation-fill-mode:backwards; animation-fill-mode:backwards;}
.js-inviewport.slide-in-left{ -webkit-animation: slideLeft .4s linear 0s; animation: slideLeft .4s linear 0s;}
.js-inviewport.slide-in-right{ -webkit-animation: slideRight .4s linear 0s; animation: slideRight .4s linear 0s;}
.js-inviewport.feed-in-up{ -webkit-animation: feedinUp .4s linear 0s; animation: feedinUp .4s linear 0s;}
@-webkit-keyframes slideLeft { 0%{ -webkit-transform:translate(-100px,0); transform:translate(-100px,0); opacity:0;}100% { -webkit-transform:translate(0,0); transform:translate(0,0); opacity: 1;}}
@keyframes slideLeft { 0% { -webkit-transform:translate(-100px,0); transform:translate(-100px,0); opacity:0;}100% { -webkit-transform:translate(0,0); transform:translate(0,0); opacity: 1;}}
@-webkit-keyframes slideRight { 0%{ -webkit-transform:translate(100px,0); transform:translate(100px,0); opacity:0;}100% { -webkit-transform:translate(0,0); transform:translate(0,0); opacity: 1;}}
@keyframes slideRight { 0% { -webkit-transform:translate(100px,0); transform:translate(100px,0); opacity:0;}100% { -webkit-transform:translate(0,0); transform:translate(0,0); opacity: 1;}}
@-webkit-keyframes feedinUp { 0%{ -webkit-transform:translate(0,20px); transform:translate(0,20px); opacity:0;}100% { -webkit-transform:translate(0,0); transform:translate(0,0); opacity: 1;}}
@keyframes feedinUp { 0% { -webkit-transform:translate(0,20px); transform:translate(0,20px); opacity:0;}100% { -webkit-transform:translate(0,0); transform:translate(0,0); opacity: 1;}}
/*//////////////////////
	WRAP
//////////////////////*/
#wrap{ position: relative; overflow: hidden;}

/*//////////////////////
	HEADER
//////////////////////*/
.hd-inner{ width:100%;}
.gnav{ position:absolute; top: 0; right:0; z-index:9998;}
.gnav ul{ padding:0; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:end; -ms-flex-pack:end; -webkit-justify-content:flex-end; justify-content:flex-end;}
.gnav li{ background: #000;}
.gnav li a{ padding:1rem 2rem; display: block; position: relative; font-size: 1.2rem; color: #fff;}
.gnav li a:after{ content:""; display: block; width: 0px; height: 4px; background:#00aeef; position: absolute; bottom: 0; left: 0; -webkit-transition: all .3s ease-out; transition: all .3s ease-out;}
.gnav li a:hover:after{ width:100%;}
.gnav li a span{ display: block; font-size: 1.2rem; font-weight: bold;}
.contact-area{ position: absolute; top: 7rem; right: 0; z-index: 9998; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:end; -ms-flex-pack:end; -webkit-justify-content:flex-end; justify-content:flex-end;}
.contact-area div{ background: #000;}
.contact-area a{ padding:1rem 2rem; display: block; font-size: 1.2rem; color: #fff;}
.contact-area .icon-tel{ margin-right:.6rem;}
.contact-area .icon-tel:before{ content: "\e942"; display: inline-block;}
.contact-area .icon-contact{ margin-right:.6rem;}
.contact-area .icon-contact:before{ content: "\e904"; display: inline-block;}
.hd-buttons{ display:none; position: fixed; top: 0; right: 0; z-index: 9998;}
.menu-btn{ width: 6rem; height: 6rem; background: #000; position: relative; cursor: pointer;}
.menu-btn span{ margin-top: -.1rem; width:2rem; height: .2rem; display: block; position: absolute; top:50%; left:2rem; background: #fff;}
.menu-btn span:before,.menu-btn span:after{ content: ""; width:100%; height: .2rem; display: block; position: absolute; left:0; background: #fff;}
.menu-btn span:before{ top: -.8rem;}
.menu-btn span:after{ bottom: -.8rem;}
.open .menu-btn span:before{ -webkit-transform: translateY(8px) rotate(45deg); -moz-transform: translateY(8px) rotate(45deg); -ms-transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg);}
.open .menu-btn span{ background-color: transparent;}
.open .menu-btn span:after{ -webkit-transform: translateY(-8px) rotate(-45deg); -moz-transform: translateY(-8px) rotate(-45deg); -ms-transform: translateY(-8px) rotate(-45deg); transform: translateY(-8px) rotate(-45deg);}
.tel-sm{ margin-right: .1rem; width:6rem; height:6rem; background: #000; font-size: 2rem; position: relative;}
.tel-sm a{ padding: 2rem; display: block; color: #fff; border-radius: .4rem;}
.tel-sm a:before{ content: "\e942"; display: block;}

.gnavsm{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; bottom:0; right: 0; background: #fff; visibility: hidden; opacity: 0; overflow-y: scroll; z-index:9997;}
.gnavsm ul{ margin: 8rem 10% 0; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; -webkit-justify-content:space-between; justify-content:space-between; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;}
.gnavsm ul li{ margin-bottom: 2rem; width: 48%; -webkit-animation-fill-mode:backwards; animation-fill-mode:backwards;}
.gnavsm ul li.on{ -webkit-animation: feedinUp .4s linear 0s; animation: feedinUp .4s linear 0s;}
.gnavsm li a{ padding: 2rem 0; color: #000; display: inline-block; position: relative; font-size:2.4vw;}
.gnavsm li a:after{ content:""; display: block; width: 0px; height: 4px; background:#00aeef; position: absolute; bottom: 0; left: 0; -webkit-transition: all .3s ease-out; transition: all .3s ease-out;}
.gnavsm li a:hover:after{ width:100%;}
.gnavsm li a span{ display: block; font-size:4vw; font-weight: bold;}
/*//////////////////////
	CONTENTS
//////////////////////*/


.content-footer{ width:100%; position:relative; z-index:3;}
.content-footer:before{ content:""; display: block; padding-top:50%;}
#contentBg,#contentBgL,#contentBgSm{ position: absolute; top: 0; left: 0;}
.cf-section-container{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 4;}
.cf-section-inner{ width: 100%; position:absolute; top: 50%; left: 0; -webkit-transform: translateY(-40%); transform: translateY(-40%);}
.cf-section-inner .cf-content-wrap{ padding: 0 20%; width: 100%; text-align: center;}
.cf-section-inner .cf-content-wrap h3{ margin-bottom:4rem !important;}
.cf-link{ margin-bottom: 4rem;}
.cf-link a{ padding:2rem 6rem; display:inline-block; font-weight: bold; color:#00aeef; border:3px solid #00aeef; position: relative; overflow: hidden;}
.cf-link a:hover{ color: #fff;}
.cf-link a:before{ content: ""; width:0; height: 100%; display: inline-block; position: absolute; top: 0; left:0; background:#00aeef; z-index: -1; -webkit-transition: .2s; transition: .2s;}
.cf-link a:hover:before{ width: 100%; border:3px solid #00aeef;}
.cf-link .icon-arrow{ position: absolute; top: 50%; right:2rem; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.cf-link .icon-arrow:before{ content: "\e900"; position:relative; display: inline-block;}
h4.cf-corp-name{ margin-bottom:2rem;}
h4.cf-corp-name span{ display: block;}
.cf-corp-number p { margin: 0 .6rem; display: inline-block;}
.cf-corp-number p a{ color:#000;}


/*//////////////////////
	FOOTER
//////////////////////*/
.footer{ width: 100%; position: relative;}
#footerTopBg,#footerTopBgSm{ margin-top: -1px; width: 100%; position: absolute; top: 0; left: 0; z-index: 3;}
.ft-container{ width: 100%; position: relative; background: url(../images/ft_bg.png) no-repeat center bottom; background-attachment: fixed; background-size: 100% auto;}
.ft-container:before{ content: ""; display: block; padding-top:26%;}
.ft-inner{ position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
.ft-logo-wrap{ position:absolute; bottom: 1rem; left: 1rem;}
.ft-logo{ width: 180px; height: auto;}
.ft-content{ position: absolute; bottom: 1rem; right:1rem; text-align: right;}
.ft-nav{ padding-left:20rem; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:end; -ms-flex-pack:end; -webkit-justify-content:flex-end; justify-content:flex-end; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;}
.ft-nav li{ margin-bottom: 1rem; margin-left: 1rem;}
.ft-nav li a{ color: #fff;}
.copyright{ text-align:left; color: #fff;}

.pagetop{ margin-bottom: 1rem; width: 4rem; height: 4rem; font-size: 2rem; z-index: 9996; position:absolute; top:-50px; right: 0; }
.pagetop.fixed{ margin-bottom:0; position: fixed; top:auto; bottom:1rem; right: 1rem;}
.pagetop a{ padding: 1rem; display: block; color: #fff; background: #000; border-radius: .4rem;}
.pagetop a:before{ content: "\e903"; display: block;}

/*//////////////////////
	CLASS
//////////////////////*/
.s-container{ margin: 0 auto; padding:0 90px; max-width: 1280px;}

.mb_s{ margin-bottom:1rem;}
.mb_m{ margin-bottom:3rem;}
.mb_l{ margin-bottom:5rem;}

.red{ color:#FF0000;}

/*20200420*/
.fix-bottom{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: rgba(255,255,255,.94);
	transform: translateY(100vh);
	transition: all .6s ease;
	z-index: 10;
}
.fix-bottom a{
	padding: 10px 50px 10px 10px;
	display: block;
}