@charset "UTF-8";

/** top.css **/
.contents{
	padding:0;
}
.content{
	margin:0 auto;
	max-width: none;
}
.content_wrap{padding: 10px 0 80px;}
.content{
}
.content_wrap .content{
	width:86%;
	max-width:1043px;
	margin:0 auto;
}
.content-imgap{
	background: center center no-repeat;
	background-size:cover;
}
.content_body{
	position:relative;
}
.content_wrap .content_body{
	padding:0;
}
.content_header{
	overflow:hidden;
	margin: 80px 0 30px;
}
.content_shoulder_title{
	font-size:31px;
	text-align:center;
	letter-spacing:8px;
	margin: 0;
}
.content_header_title{
	text-align:left;
	float:left;
	margin: 0;
}
.content_header_link{
	float:right;
	padding: 10px 30px 10px 10px;
	letter-spacing: 3px;
	background: url(../images/icon_arrow.png) right center no-repeat;
	background-size:23px auto;
}
.content_title{
	font-size:23px;
	line-height:1.4;
}
.content_txt{
	font-size:15px;
	line-height:1.8;
}
.content_body{
	padding: 120px 0;
}

@media screen and (max-width:767px) {
    #header:before{
    	opacity:1;
    }
    
	.content_body{
		padding: 80px 0;
	}
}

#mv_wrap{
	padding: 220px 0 0;
	overflow:hidden;
	position:relative;
}
#mv_wrap:before{
	content:"";
	display:block;
	width: 46%;
    max-width: 710px;
	position: absolute;
	background: linear-gradient(10deg, #254fd5 0%, rgba(0,155,228,1) 100%);
	top: 0;
	bottom: 0;
	left: 0;
	right:0;
	margin:0 auto;
	transform-origin: 0 0;
	transform: skew(-10deg);
}
.mv{
  position: relative;
  overflow: hidden;
}
.mv_img_wrapper{
  transform: skewX(-10deg);
    transform-origin: 0 100% 0;
  overflow: hidden;
}
.mv_img{
		transform: skewX(10deg);
		transform-origin: 0 100% 0;
}

#mv1{
  height: 594px;
}
#mv1_img{
  position: absolute;
  left:50%;
  top:0;
  margin: 0 0 0 -325px;
  width:1026px;
}
#mv1_title{
  position: absolute;
  right: 50%;
  top:186px;
  margin: 0 -55px 0 0;
}
.bgtitle{
  transform: skewX(-10deg);
  transform-origin: 0 100% 0;
  display: inline-block;
  white-space: nowrap;
}
.bgtitle:before{
	content:"";
	display:block;
  background: #fff;
  position:absolute;
  left:0;top:0.24em;right:0;bottom:0.05em;
}
.bgtitle_inner{
    position:relative;
}
#mv1_title_1{
  font-size:98px;
  line-height: 90px;
  font-family: 'Montserrat', sans-serif;
  letter-spacing:-2px;
  padding: 0;
  display: block;
  position:relative;
}
#mv1_title_2{
  font-size:48px;	
}
#mv1_title_2:before{
  bottom:0.1em;
}
.text_x{
  display: inline-block;
  position: relative;
  height: 1em;
  width:1em;
  top: 0.14em;
  margin: 0 -0.1em 0 -0.02em;
}
.text_x:after,.text_x:before{
  content:"";
  display: block;
  width:110%;
  height: 0.6px;
  background: #000;
  position: absolute;
  top:-100px;left:-100px;bottom:-100px;right:-100px;
  transform:rotate(45deg);
  margin: auto;
}
.text_x:after{
  transform:rotate(-45deg);
}
@media screen and (max-width:1024px) {

}@media screen and (max-width:767px) {
	#mv_wrap{
		padding: 0;
	}
    #mv_wrap:before{
    	width:400px;
    	left: 32%;
    }
    #mv1{
    	height: 670px;
    }
	#mv1_img{
	  top: 214px;
	  margin: 0 0 0 -154px;
	  width:429px;
	  height:453px;
	}
	#mv1_img .mv_img{
	    width:auto;
	    height:100%;
	}
	#mv1_title{
	  position: absolute;
	  left: 0;
	  right:auto;
	  top: 129px;
	  margin: 0 -55px 0 0;
	}
	#mv1_title_1{
	  font-size:50px;
	  line-height: 44px;
	  font-family: 'Montserrat', sans-serif;
	  letter-spacing:-2px;
	  padding: 0;
	  display: block;
	  position:relative;
	}
	#mv1_title_2{
	  font-size:30px;	
	}
	#mv1_title_2:before{
	  bottom:0.1em;
	}
	.text_x{
	  display: inline-block;
	  position: relative;
	  height: 1em;
	  width:1em;
	  top: 0.14em;
	  margin: 0 -0.1em 0 -0.02em;
	}
	.text_x:after,.text_x:before{
	  content:"";
	  display: block;
	  width:110%;
	  height: 0.6px;
	  background: #000;
	  position: absolute;
	  top:-100px;left:-100px;bottom:-100px;right:-100px;
	  transform:rotate(45deg);
	  margin: auto;
	}
	.text_x:after{
	  transform:rotate(-45deg);
	}
}

#mv2{
  padding:205px 0 205px;
  height: 530px;
}
#mv2_imgs{
	position:absolute;
	top:205px;
	right:50%;
	margin:0 -150px 0 0;
	width:877px;
}
#mv2_imgs .mv_img_wrapper{
	width:257px;
	float:left;
	margin-right:35px;
}
#mv2_title{
	position:absolute;
	left:50%;
	top: 395px;
	margin:0 110px;
	font-size:41px;
	font-weight:bold;
	white-space: nowrap;
	transform: skew(-10deg);
}
#mv2 .content_shoulder_title{
    text-align: left ;
}


@media screen and (max-width:1024px) {

}@media screen and (max-width:767px) {
	#mv2{
	  padding: 230px 0 100px;
	  height: 280px;
	}
	#mv2_imgs{
		position:absolute;
		top: 230px;
		right:auto;
		left:-40px;
		margin:0;
		width:877px;
	}
	#mv2_imgs .mv_img_wrapper{
		width:135px;
		height:280px;
		float:left;
		margin-right:15px;
	}
	#mv2_imgs .mv_img{
		height:100%;
		width:auto;

	}
	#mv2_title{
		position:absolute;
		left:50%;
		top: 90px;
		margin:0 0 0 -140px;
		font-size:26px;
		font-weight:bold;
		white-space: nowrap;
	}
}


#mission{
	background-image:url(../images/mission_bg_pc.jpg);
	overflow:hidden;
	position:relative;
}
#mission:before{
	content:"";
	display:block;
	position:absolute;
	left:2%;top:0;bottom:0;
	background:#00428dee;
	mix-blend-mode:multiply;
	width:46%;
	min-width:670px;
	padding:100px 120px;
	box-sizing:border-box;
	transform:skew(-10deg);
}
#mission .content_body{
	position:relative;
	background:rgb(0 66 141 / 0.7);
	width: 46%;
	min-width:670px;
	padding:150px 120px;
	box-sizing:border-box;
	transform:skew(-10deg);
	margin:0 0 0 2%;
}
#mission .content_body_inner{
	position:relative;
	transform:skew(10deg);
}
#mission .content_shoulder_title{
	font-size:31px;
	text-align:left;
	color:#fff;
	opacity:0.4;
}
#mission .content_title{
	font-size:41px;
	line-height:1.4;
	color:#fff;
}
#mission .content_txt{
	color:#fff;
}

@media screen and (max-width:1024px) {

}@media screen and (max-width:767px) {
	#mission{
		background-image:url(../images/mission_bg_sp.jpg);
	}
	#mission:after{
		content:"";
		display:block;
		padding:112% 0 0;
		background-image:url(../images/mission_bg-2.jpg);
		background-size:cover;
		position:relative;
	}
	#mission:before{
		left:0;top:0;bottom:0;right:0;
		mix-blend-mode:multiply;
		width:auto;
		min-width:0;
		padding:0;
		transform:none;
	}
	#mission .content_body{
		width: auto;
		min-width:0;
		padding:20% 9%;
		transform:none;
		margin:0;
	}
	#mission .content_body_inner{
		position:relative;
		transform:none;
	}
	#mission .content_shoulder_title{
		font-size:22px;
		text-align:left;
		color:#fff;
		opacity:0.4;
	}
	#mission .content_title{
		font-size:26px;
		line-height:1.4;
		color:#fff;
	}
	#mission .content_txt{
		color:#fff;
	}
}


.lineitems{
  max-width: 1004px;
  width: 86%;
  margin: 60px auto;
  overflow: hidden;
  position:relative;
}
.lineitem{
	float:left;
	width: 30%;
	margin: 5% 5% 0 0;
	position: relative;
}
.lineitem:nth-child(3n){
	margin-right: 0;
}
.lineitem_img_wrap{
  text-align: center;
}
.lineitem_img{
  width:105px;
  height: auto;
}
.lineitem_body{
}
.lineitem_title{
  margin: 20px auto 0;
  font-size: 29px;
  line-height: 1.3;
  text-align: center;
  font-weight:normal;
}
.lineitem_txt{
  margin: 23px auto 0;
  font-size: 15px;
  line-height: 1.7;
}
@media screen and (max-width:1024px) {
	.lineitem_title{
	  font-size: 21px;
	}
}
@media screen and (max-width:767px) {
	.lineitems{
	margin: 30px auto;
	}
	.lineitem, .lineitem:nth-child(3n){
    width:47%;
    margin-top: 12%;
    margin-right: 6%;
	}
  .lineitem:nth-child(2n){
    margin-right: 0;
  }
	.lineitem_title{
	  font-size: 18px;
	  font-weight:bold;
	}
}
@media screen and (max-width:400px) {
	.lineitem_title{
	  font-size: 15px;
	  font-weight:bold;
	}
  .lineitem_txt{
    font-size: 13px;
  }
}

#value{
}
#value .lineitems{
}

@media screen and (max-width:767px) {
	
}


#service{
	background:#e9eaec;
}

#posts{
}
.contentboxs{
}
.contentbox{
  overflow: hidden;
  width:86%;
  max-width: 1048px;
  margin: 0 auto;
  padding: 100px 0;
  position: relative;
}
.contentbox:nth-child(n + 2) {
  border-top:rgba(0,0,0,0.3) 1px solid;
}
.contentbox_imgs{
  float:right;
  width:55%;
}
.contentbox_img{
	max-width: 100%;
	border-radius:6px;
	box-shadow:0 8px 10px rgba(0,0,0,0.1);
}
.contentbox_imgs.c2 .contentbox_img{
  float:left;
  width:47%;
  margin: 0 6% 0 0;
}
.contentbox_imgs.c2 .contentbox_img:nth-child(n + 3){
  margin-top: 6%;
}
.contentbox_imgs.c2 .contentbox_img:nth-child(2n){
  margin-right: 0;
}
.contentbox_body{
  float:left;
  width:32.5%;
}
.contentbox_logo{
}
.contentbox_logo_img{
  height: auto;
  display:block;
  max-width: 100%;
}
.contentbox_title{
  font-size: 23px;
  line-height: 1.4;
  margin: 5px 0 0;
}
.contentbox_txt{
  line-height: 1.8;
  
}
.contentbox_con2{
	clear: both;padding: 50px 0 0;
}
.contentbox_con2 .contentbox_img{
  box-shadow:none;
}
.contentbox_con2 .contentbox_imgs{
  float:fight;
  width:44%;
}
.contentbox_con2 .contentbox_body{
  float:left;
  width:49%;
}

#getfit .contentbox_body{
	padding-top:150px;
}
#getfit .contentbox_con2 .contentbox_body{
	padding-top:30px;
}
#getfit .contentbox_logo_img{
  width:354px;
}
#getfityours .contentbox_logo_img{
  width:295px;
  display:block;
  margin-bottom:-20px;
}
#anytimepersonal .contentbox_logo_img{
  width:374px;
}

@media screen and (max-width:800px) {
	.contentbox{
	  overflow: visible;
	  width:86%;
	  padding: 200px 0 50px;
	}
	.contentbox:nth-child(n + 2) {
	}
	.contentbox_imgs{
	  float:none;
	  width: auto;
	}
	.contentbox_imgs.c2{
	  float:none;
	  width: 116%;
	  overflow-x:scroll;
	  white-space:nowrap;
	  padding:5px 1% 20px 7%;
	  margin: 0 -8%;
	}
	.contentbox_img{
	}
	.contentbox_imgs.c2 .contentbox_img{
	  float:none;
	  display:inline-block;
	  width:70%;
	  margin: 0 4% 0 0;
	}
	.contentbox_imgs.c2 .contentbox_img:nth-child(n + 3){
	  margin-top: 0;
	}
	.contentbox_imgs.c2 .contentbox_img:nth-child(2n){
	  margin-right: 4%;
	}
	.contentbox_body{
	  float:none;
	  width:auto;
	}
	.contentbox_logo{
	position: absolute;
	top: 50px;
	right: 0;
	left: 0;
	margin: 0 auto;
	}
	.contentbox_logo_img{
		margin:0 auto;
	}
	.contentbox_title{
	  font-size: 18px;
	  line-height: 1.4;
	  margin: 5px 0 0;
	}
	.contentbox_txt{
	  font-size:13px;
	  line-height: 1.8;

	}
	.contentbox_con2{
		padding: 30px 0 0;
	}
	.contentbox_con2 .contentbox_img{
	  box-shadow:none;
	}
	.contentbox_con2 .contentbox_imgs{
	  float:none;
	  width:auto;
	}
	.contentbox_con2 .contentbox_body{
	  float:none;
	  width:auto;
	}
    
	#getfit .contentbox_body{
		padding-top:0;
	}
	#getfit .contentbox_con2 .contentbox_body{
		padding-top: 0px;
	}
	#getfit .contentbox_logo_img{
	  width:247px;
	}
    #getfityours{
    	padding-top:160px;
    }
	#getfityours .contentbox_logo_img{
	  width:247px;
	  margin-bottom:-15px;
	}
    #anytimepersonal{
    	padding-top:100px;
    }
	#anytimepersonal .contentbox_logo_img{
	  width:290px;
	}
	
}



#company{
	background:#e9eaec;
}
#company_table_wrapper{
	position:relative;
	margin:100px auto 0;
	width:86%;
	max-width:934px;
	padding:0 335px 0 0;
	box-sizing:border-box;
}
#company_table{
	width:100%;
	box-sizing:border-box;
	font-size:15px;
}
#company_img{
	position:absolute;
	right:0;
	top:0;
	display:block;
}

#company td,#company th{
	padding:25px 10px;
}

#outline_table th{
    width: 60px
}


@media screen and (max-width:767px) {
	#company_table_wrapper{
		padding-right:0;
	}
	#company_table{
		font-size:13px;
	}
	#company td,#company th{
		padding:20px 1%;
	}	
	#company th{
		width:4.9em;
		box-sizing:content-box;
	}	
	#company_img{
		position:static;
		margin:20px 0 0;
		width:100%;
		height:auto;
	}
    #outline_table th{
        width: 60px
    }
}


#contact_form{
	text-align: left;
	width:86%;
	max-width:700px;
	margin:80px auto;
}
.form_item{
	margin-top: 20px;
}
.form_item label{
	display: block;
	font-size: 14px;
}
.form_item input[type="text"]{
	width: 100%;
	padding: 15px;
	font-size: 16px;
	border: none;
	margin-top: 5px;
	box-sizing: border-box;
	border-radius: 0;
}
.form_item textarea{
	width: 100%;
	padding: 15px;
	font-size: 16px;
	border: none;
	margin-top: 5px;
	box-sizing: border-box;
	height: 312px;
	border-radius: 0;
}
#contact_pp_txt{
	position: relative;
	display: inline-block;
	margin-left: 18px;
	text-align: center;
	margin: 20px 0;
	font-size: 14px;
	padding:0 0 0 15px;
}
#contact_pp_txt:before{
	content: "";
	position: absolute;
	top: 5px;
	left: 2px;
	width: 4px;
	height: 8px;
  border:#000 solid;
  border-width:0 2px 2px 0;
  transform: rotate(45deg);
}
#contact_pp_txt a{
	text-decoration: underline;
}
.form_item-submit{
	text-align: center;
	margin-top: 40px;
}
.form_item input[type="submit"]{
	display: inline-block;
	box-sizing: border-box;
	color: #fff;
	background: #000;
	text-align: center;
	max-width: 240px;
	width: 100%;
	height: 60px;
	line-height: 60px;
	font-weight: normal;
	letter-spacing:5px;

	border: none;
	font-size: 16px;
	cursor: pointer;
	text-decoration: none;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.form_item input[type="submit"]:hover{
	background: #009be3;
}
.note.alert{
	color: #e00;
	margin: 5px;
	line-height: 1.3;
	font-size: 12px;
	vertical-align: middle;
}


/*--ローディング・アニメーション--*/
.loading{
  position: fixed;
  left:0;top:0;bottom:0;right:0;
  background:#fff;
  z-index: 1000000;
  transform:translate(0,0);
  transform-origin:50% 0;
}
.loading:after{
  content:"";
  font-size:10px;
  letter-spacing: 1px;
  color:#fff;
  text-align: center;
  display: block;
  position: absolute;
  left:0;top:0;bottom:0;right:0;
  margin: auto;
  width:50px;
  height: 50px;
  padding: 0;
  background: url(../images/icon.png) center top no-repeat;
  background-size: 100% auto;
  transition:0.2s ease-out;
  animation: zooming 1s ease 0s;
  animation-iteration-count: infinite;
}
.init .loading{
   animation: upOut 0.3s ease-out 0.2s;
   animation-fill-mode:both;
}
.init .loading:after{
  opacity:0;
}


.anim1_container{
  position: relative;
}
body .anim1{
}
body .anim1:after{
  content:"";
  display: block;
  position: absolute;
  left:-10%;right:-10%;top:0;bottom:0;
  background: #00428d;
  z-index: 10;
  transform: scaleX(0.001);
  transform-origin: 0 0;
  opacity: 0;
}
body.inited .anim1.in:after{
  animation: slideInOut_l 0.8s ease-out 0s;
  animation-fill-mode: forwards;
}
body .anim1 *{
  visibility:hidden;
}
body.inited .anim1.in *{
  animation: delayIn 0.8s ease-out 0s;
  animation-fill-mode: forwards;
}

body .anim2{
  opacity:0;
}
body.inited .anim2.in{
  animation: zoomInBounce 0.8s ease-out 0s;
  animation-fill-mode: both;
}
body .anim3{
  opacity:0;
}
body.inited .anim3.in{
  animation: zoomInBounce 0.8s ease-out 0s;
  animation-fill-mode: both;
  transform-origin: bottom center;
}

body .anim4{
  opacity:0;
}
body.inited .anim4.in{
  animation: upIn 0.5s ease-out 0s;
  animation-fill-mode: both;
}


body.init #wc_header_txt_01{
  animation: zoomInBounce_2 0.8s ease-out 0.2s;
  animation-fill-mode: both;
  transform-origin: 50% 0;
}
body.init #wc_header_txt_02{
  animation: zoomInRotationBounce 0.8s ease-out 0.8s;
  animation-fill-mode: both;
}
body.init #wc_header_txt_03{
  animation: zoomInRotationBounce 0.8s ease-out 1s;
  animation-fill-mode: both;
}


body.inited .btn_search_overray.anim2.in{
  animation: zoomInBounce 0.8s ease-out 0.2s;
  animation-fill-mode: both;
}




@keyframes slideInOut_l {
  0% {
    opacity:0;
    transform: scaleX(0.001);
    transform-origin: 0 0;
  }
  1% {
    opacity: 1;
    transform: scaleX(0.001);
    transform-origin: 0 0;
  }
  40% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: 0 0;
  }
  60% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: 100% 0;
  }
  99% {
    opacity: 1;
    transform: scaleX(0.001);
    transform-origin: 100% 0;
  }
  100% {
    opacity: 0;
    transform: scaleX(0.001);
    transform-origin: 100% 0;
  }
}

@keyframes delayIn {
  0% {
      visibility:hidden;
  }
  45% {
      visibility:hidden;
  }
  46% {
      visibility:visible;
  }
  100% {
      visibility:visible;
  }
}

@keyframes zoomInRotationBounce {
  0% {
    opacity: 0;
    transform: scale(0.8);
    transform: rotate(10deg);
  }
  20% {
   opacity: 1;
   transform: scale(1.1);
  }
  40% {
    transform: scale(0.95);
  }
  60% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    transform: rotate(0deg);
    opacity: 1;
  }
}

@keyframes rotation {
  0% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes upOut {
  0% {
    transform: translateY(0%);
  }
  99% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-100%);
    display: none;
  }
}

@keyframes zooming {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes zoomInBounce {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  20% {
   opacity: 1;
   transform: scale(1.1);
  }
  40% {
    transform: scale(0.95);
  }
  60% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes zoomInBounce_2 {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  30% {
   opacity: 1;
   transform: scale(1.1);
  }
  50% {
   opacity: 1;
   transform: scale(0.93);
  }
  100% {
    transform: scale(1);
    opacity: 1;

  }
}

@keyframes upIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes downIn {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes zoomOutIn {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

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