* {font-family: serif ,sans-serif, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo;}
body{-webkit-text-size-adjust: 100%;letter-spacing : 0.1em;margin: 0;}

h1 img{width:200px;height:95px;float:left;}
h2{padding:20% 2% 0 5%;font-size:80px;color:#fff;text-shadow: 0 0 16px #000;text-align: center;}
h3{margin:0 0 80px 0;font-weight:normal;text-align:center;font-size:36px;}
h3:before {content: '';position: absolute;left: 50%;bottom:0;display: inline-block;width:100%;max-width: 300px;height: 3px;-webkit-transform: translateX(-50%);transform: translateX(-50%);background-color: #00648f;}

#mainImg {width: 100%;height: 0;padding-bottom: 60%;background:url("../images/m-image.jpg")#b7bcc0;background-repeat: no-repeat;background-position: center center;background-size: cover;z-index: -1;}
#mainImg p {padding:1% 2% 0 5%;font-size:24px;color:#fff;text-shadow: 0 0 16px #000;text-align: center;}
.video-wrap {position: relative;overflow: hidden;}
.video-wrap:before {width: 100%;height: 100%;content: '';position: absolute;top: 0;left: 0;opacity: 1;background-image: url("../images/kv_bg2.png");background-size: 1px auto;z-index: 11;}
/*.video_word {font-family: serif;color: #fff;font-size: 600%;position: absolute;left: 32%;top: 200px;z-index: 15;text-align: center;}*/
.video_word {font-family: serif;color: #fff;font-size: 600%;position: absolute;/*left: 32%;*/top: 200px;z-index: 15;text-align: center;left: 52%;transform: translate(-50%,0);-webkit-transform: translate(-50%,0);-ms-transform: translate(-50%,0);letter-spacing : 0;}
video {display: block;margin: 0 0 0 auto;}
.caveat span {font-family: "Caveat", cursive !important;font-optical-sizing: auto;font-weight: 700;font-style: normal;}
.grayAnime {width:600px;animation: img-opacity 1s cubic-bezier(.4, 0, .2, 1);overflow: hidden;position: relative;}
.content_title{color:#f6f6f6;position:relative;line-height: 150%;font-size:500%;}
.content_title_text{position:absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);font-size: 30%;color: #333;font-weight: bold;letter-spacing:0.3em;text-shadow:2px 2px 0 #fff,-2px 2px 0 #fff,2px -2px 0 #fff,-2px -2px 0 #fff;}
#service {max-width: 1200px;width:90%;margin:0 auto;padding:60px 5% 0 5%;background:#fff;}
#service p {margin:30px;line-height:2em;text-shadow: 0 0 10px #fff;}
#service #serviceText {width:80%;margin: 0 auto;}
.company_info {width:80%;margin: 0 auto;}
.company_info dt {padding: 40px 20px 55px;width: 25%;float: left;font-weight:bold;}
.company_info dd {padding: 40px 20px 55px;border-bottom:1px solid #ccc;}
#profile {max-width: 1200px;width:90%;margin:0 auto 120px auto;padding:50px 5% 0;}
#contact {width: 100%;height: auto;padding:80px 0 ;background:url("../images/c-bg.jpg");background-repeat: no-repeat;background-position: center center;background-size: cover;}
#contact #mailBox {max-width: 1000px;width:98%;margin:0 auto;padding:30px 5% 0 5%;text-align:center;background:#fff;border-radius: 30px;box-sizing: border-box;}
.btn{position: relative;overflow: hidden;text-decoration: none;display: inline-block;border: 1px solid #00648f;padding: 10px 30px;text-align: center;outline: none;transition: ease .2s;margin: 50px 0;border-radius: 10px;}
.btn span {position: relative;z-index: 3;color:#00648f;}
.btn:hover{text-decoration-color:#fff;}
.btn:hover span{color:#fff;}
.bgcenterx:before {content: '';position: absolute;top: 0;left: 0;z-index: 2;background: #00648f;width: 100%;height: 100%;transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;transform: scale(0, 1);transform-origin: top;}
.bgcenterx:hover:before{transform:scale(1, 1);}
#footerLogo {padding:20px 0 0 0;background:#fff;text-align:center;}
#footerLogo img{max-width: 250px;  height: auto;  width: 100%;}
#footerLogo p {margin:20px 0 20px 0;font-size:14px;}
#fotterNav_btn{}
#footerNav {width:70%;padding-right:5%;background:#000;float:left;}
#footerNav ul {float:right;}
#footerNav li {float:left;color:#fff;}
#footerNav a {padding:80px 30px;color: #fff;display: block;-moz-transition: background-color .3s linear;-webkit-transition: background-color .3s linear;transition: background-color .3s linear;}
#footerNav a:hover {color: #fff;background: rgba(255,255,255,.3);}
#global-head {position: fixed;padding-top: 25px;padding-left:5%;z-index: 301;}
#sidebar {width: 100%;padding: 40px 0;font-size: 18px;color: #fff;position: fixed;z-index:300;transition: background-color 0.2s;}
#global-nav ul {float:right;padding:0 5% 0 0;}
#global-nav ul li {float:left;}
#global-nav a {padding:15px 30px;color: #fff;display: block;-moz-transition: background-color .3s linear;-webkit-transition: background-color .3s linear;transition: background-color .3s linear;}#global-nav a:hover {color: #fff;background: rgba(0,0,0,.6);}
#nav-toggle {display: none;position: fixed;top: 45px;right: 5%;height: 40px;background: rgba(235,235,235,.9);padding:15px 10px 40px 10px;}
#nav-toggle > div {position: relative;width: 40px;}
#nav-toggle span {width: 100%;height: 2px;left: 0;display: block;background: #666;position: absolute;-webkit-transition: .35s ease-in-out;-moz-transition: .35s ease-in-out;transition: .35s ease-in-out;}
#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 11px;}
#nav-toggle span:nth-child(3) {top: 22px;}
#overlay {display: none;position: fixed;background: rgba(0,0,0,.8);width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;}
#page-top {position: fixed;bottom: 20px;right: 20px;font-size:30px;width:40px;height:40px;background:rgba(255,255,255,.9);border-radius:20px;border:rgba(255,255,255,.9) solid 1px;box-sizing: border-box;}
#page-top:hover {border:#666 solid 1px;box-sizing: border-box;-webkit-transition: .35s ease-in-out;-moz-transition: .35s ease-in-out;transition: .35s ease-in-out;}
#page-top a {color: #666;text-decoration: none;padding: 4px 9px ;text-align: center;display: block;-webkit-transition: .35s ease-in-out;-moz-transition: .35s ease-in-out;transition: .35s ease-in-out;}
.service_wrap{position:relative;width:90%;margin:8% auto;background:#fff;box-sizing: border-box;border:2px solid #00648f;}
.service_Title{text-align:center;font-size:150%;font-weight:bold;position:absolute;top:-18px;left: 5%;background: #fff;padding: 0 20px;}
.service_Body{clear:both;display:block;content:"";}

#introduction {max-width: 1200px;width:90%;margin:0 auto;padding:60px 5% 0 5%;background:#fff;}
#introduction p {margin: 0 5% 5%;line-height:2em;/*text-shadow: 0 0 10px #fff;*/}
#introductionText {margin: 0 auto;font-size: 135%;text-align: center;}
#introduction_wrap{background:#00648f;color:#fff;border-radius: 20px; padding: 5%;}
.philosophy_wrap{position:relative;width:90%;margin:8% auto;background:#00648f;box-sizing: border-box;border:2px solid #fff;padding: 5% 3% 0;}
.philosophy_Title{text-align:center;font-size:250%;font-weight:bold;position:absolute;top:-30px;left: 5%;background: #00648f;padding: 0 20px;color:#fff;}
.philosophy_Body{clear:both;display:block;content:"";margin-bottom:5%;}
.philosophy_Body dt{font-size: 170%; font-weight: bold;text-shadow: 0 0 10px #fff;}
.philosophy_Body dd{padding-left:40px;}

/*========= LoadingのためのCSS ===============*/

main{display:none}

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置　*/
#splash_text {
  position: absolute;
  top: 50%;
  left: 50%;
    z-index: 999;
  transform: translate(-50%, -50%);
  color: #fff;
  width: 100%;
}

/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg{
    height: 5px;
}

/*割れる画面のアニメーション*/
.loader_cover {
    width: 100%;
    height: 50%;
    background-color: #333;
    transition: all .2s cubic-bezier(.04, .435, .315, .9);
    transform: scaleY(1);
}
/*上の画面*/
.loader_cover-up {
    transform-origin: center top;
}

/*下の画面*/
.loader_cover-down {
    position: absolute;
    bottom: 0;
    transform-origin: center bottom;
}
/*クラス名がついたらY軸方向に0*/
.coveranime {
    transform: scaleY(0);
}

/*========= レイアウトのためのCSS ===============*/


#container{
    width:100%;
    height: 100%;
    background: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

a{
//    color: #333;
}

a:hover{
//     text-decoration: none;
}

/*========= LoadingのためのCSS ===============*/

.slow.fade-in {z-index:1;-webkit-animation-fill-mode: both;-ms-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-duration: 2s;-ms-animation-duration: 2s;animation-duration: 2s;-webkit-animation-name: fid;animation-name: fid;visibility: visible !important;}
@-webkit-keyframes fid {0% {opacity: 0;-webkit-transform: translateY(-30px);}100% {opacity: 1;-webkit-transform: translateY(0);}}
@keyframes fid {0% {opacity: 0;-webkit-transform: translateY(-30px);-ms-transform: translateY(-30px);transform: translateY(-30px);}100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}}
@keyframes img-opacity { 0%{ opacity: 0; } }
@keyframes grayAnime { 100% { transform: translateX(100%); } }

@media screen and (max-width: 1000px) {
	h2{font-size:180%;-webkit-transition: .35s ease-in-out;-moz-transition: .35s ease-in-out;transition: .35s ease-in-out;}
	.content_title{font-size:300%;}
	.content_title_text{font-size: 35%;}
	#mainImg p {font-size:110%;}
	.company_info{width:100%;}
	.company_info dl {display: block;box-sizing: border-box;}
	.company_info dt {padding: 40px 0 20px 20px;width: 100%;border-bottom:none;}
	.company_info dd {padding: 0 0 40px 40px;border-bottom:1px solid #ccc;margin: 0;}
	#service #serviceText {width:100%;}
	#service p {margin-bottom:35px;}
	#footerLogo {width:100%;margin:0 auto;padding:70px 0 30px 0;text-align:center;float:none;box-sizing: border-box;}
	#footerLogo img {width: 100%; height: auto; max-width: 240px;}
	#footerLogo p {margin:40px 0;font-size:110%;}
	#footerNav {width:100%;padding-right:0;font-size: 26px;}
	#footerNav ul ,#footerNav li {float:none;margin:0;padding:0;}
	#footerNav a {text-align:center;padding:30px;border-bottom:1px solid rgba(255,255,255,.5);}
	#main-in {padding-left: 0;}
	#sidebar {position: fixed;padding-top: 80px;right: -300px;top: 0;height: 100%;width: 300px;color: #333;-webkit-transition: .35s ease-in-out;transition: .35s ease-in-out;}
	#nav-toggle {display: block;}
	#global-nav a {padding:15px 50px;top: 25px;}
	#global-nav ul {padding:0;}
	.open {overflow: hidden;}
	.open #overlay {display: block;}
	.open #sidebar  {-webkit-transform: translate3d(-300px,0,0);transform: translate3d(-300px,0,0);}
	.open #nav-toggle span:nth-child(1) {top: 11px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);}
	.open #nav-toggle span:nth-child(2) {width: 0;left: 50%;}
	.open #nav-toggle span:nth-child(3) {top: 11px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);transform: rotate(-45deg);}
	#overlay { z-index: 200;}
	#sidebar { z-index: 300;}
	#nav-toggle {z-index: 400;}
	
}

@media screen and (max-width: 690px) {
	h1 img{width:125px;height:59px;}
	#contact #mailBox { width:90%; }
	.btn { width:80%;font-size:120%;}
}

@media screen and (max-width: 640px) {
	.toggle {transform: translateY( 0 );opacity: 1;}
	.main-visual {padding: 0 4%;}
	h2 {line-height: 1.6;text-align: center;}
	.video_word{font-size: 300%;width: 100%;/*left: 12%;*/}
	.service_wrap{width:100%;}
	.service_Title{font-size: 115%;top: -15px;left: 2%;}
	#service {width:95%;padding: 60px 2% 0 2%;}
	#service p{20px 20px 15px}
	.service_wrap{margin: 10% auto;}
	#introduction{width: 95%;padding: 60px 2% 0 2%;}
	#introduction p{line-height: 1.8em;margin: 0 0% 15%;}
	#introductionText{font-size: 100%;}
	.philosophy_wrap{width: 100%; margin: 10% auto;padding: 10% 5% 0;}
	.philosophy_Title{font-size: 150%;top: -20px;padding: 0 15px;}
	#introduction_wrap{padding: 10% 5%;}
	.philosophy_Body dt{font-size: 120%;}
	.philosophy_Body dd{padding-left: 15px;}
	.philosophy_Body{margin-bottom: 10%;}
}

a {text-decoration: none;color: #aaa;font-size: 16px;letter-spacing: 0.1em;}
a:hover{text-decoration: underline;color: #999;opacity: 1;animation: fadeIn 0.5s ease-in-out;}

@keyframes fadeIn {
	0% {opacity: 1;}
	5% {opacity: 0.1;}
	100% {opacity: 1;}
}

ol,ul {list-style: none;list-style-type: none;}
.hamburger {margin: 0 auto 0;width: 100%;justify-content: space-between;position: fixed;top: 0;left: 0;background-color: rgba(255,255,255,.95);z-index: 99;border-bottom: rgba(0,0,0,.2) solid 1px;}
.hamburger-black{background-color: rgba(0,0,0,.8);color:#fafafa !important;}
.logo {font-size: 40px;font-weight: 700;width: 100%;max-width: 250px;float: left;}
.logo a {display: block;margin: 10px 0 0 10px;}
.logo a img {width: 100%;max-width: 180px;}
.hamburger .btn-gNav {position: absolute;top: 15px;right: 15px;width: 40px;height: 35px;z-index: 9999;box-sizing: border-box;cursor: pointer;-webkit-transition: all 400ms;transition: all 400ms;}
.hamburger .btn-gNav span {position: absolute;width: 30px;margin-left: 5px;height: 4px;background: #999;border-radius: 10px;-webkit-transition: all 400ms;transition: all 400ms;}
.hamburger .btn-gNav span:nth-child(1) {top: 5px;}
.hamburger .btn-gNav span:nth-child(2) {top: 15px;}
.hamburger .btn-gNav span:nth-child(3) {top: 25px;}
.hamburger .btn-gNav.open {background-color: unset;}
.hamburger .btn-gNav.open span:nth-child(1) {background-color: #fff;top: 11px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);transform: rotate(-45deg);}
.hamburger .btn-gNav.open span:nth-child(2),.hamburger .btn-gNav.open span:nth-child(3) {top: 11px;background-color: #fff;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);}
.btn-gNav {display: none;}
.gNav .gNav-menu {display: flex;justify-content: space-between;max-width: 640px;float: right;width: 100%;margin-top: 15px;}
.gNav .gNav-menu li {margin: 0 auto;padding: 0 5px;}

@media screen and (max-width: 600px) {
	.btn-gNav {	display: block;}
	.gNav {position: fixed;top: 0;right: -100%;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8);font-size: 16px;box-sizing: border-box;z-index: 1;padding-top: 50px;transition: .3s;}
	.gNav.open {right: 0;}
	.gNav .gNav-menu {padding: 0;width: 100%;height: 100%;display: block;flex-direction: column;text-align: center;}
	.gNav .gNav-menu li {width: 86%;padding: 15px;border-bottom: #525252 1px solid;}
}

.sp-video {display: block;height: 100vh;}
.pc-video {display: none;}

@media screen and (min-width: 768px) {
	.sp-video {display: none;}
	.pc-video {display: block;}
}

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');
.scroll_down{position:absolute;bottom:30%;right:50%;animation: arrowmove 1s ease-in-out infinite;z-index:50;}
.scroll_down a{position: absolute;left: -24px;bottom: 30px;color: #fff;font-size: 14px;font-family: 'Josefin Sans', sans-serif;letter-spacing: .2em;text-transform: uppercase;width: 24px;height: 24px;text-decoration: none;}
.text {display: block;margin-top: 70px;margin-left: -14px;font-size: 12px;color: #fff;text-transform: uppercase;white-space: nowrap;letter-spacing: 2px;}
.arrow {position: absolute;width: 28px;height: 5px;opacity: 0;transform: scale3d(0.5, 0.5, 0.5);animation: move 3s ease-out infinite;}
.arrow:first-child {animation: move 3s ease-out 1s infinite;}
.arrow:nth-child(2) {animation: move 3s ease-out 2s infinite;}
.arrow:before,.arrow:after {content: ' ';position: absolute;top: 0;height: 100%;width: 51%;background: #fff;}
.arrow:before {left: 0;transform: skew(0deg, 30deg);}
.arrow:after {right: 0;width: 50%;transform: skew(0deg, -30deg);}

@keyframes move {
  25% { opacity: 1; }
  33% { opacity: 1; transform: translateY(30px); }
  67% { opacity: 1; transform: translateY(40px); }
  100% { opacity: 0; transform: translateY(55px) scale3d(0.5, 0.5, 0.5); }
}

*::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none;
}

*::--webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none;
}

*::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

//video{display: none;}