/* CSSファイルの最上部に記述 */
@import url('https://fonts.googleapis.com/css?family=Sawarabi+Mincho');
@import url("./reset.css");
html{
	height: 100%;
	
	}
body{
	width: 100vw;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	color:#000;
	position:relative;
	height: 100%;
	overflow-x: hidden;
 
}
iframe {
	vertical-align: bottom;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
/* =============================== */

#loader {
    width: 100px;
    height: 100px;
    display: none;
    position: fixed;
    _position: absolute; /* IE6対策 */
    top: 50%;
    left: 50%;
    margin-top: -50px; /* heightの半分のマイナス値 */
    margin-left: -50px; /* widthの半分のマイナス値 */
    z-index: 200;
}
#fade {
    width: 100%;
    height: 100%;
    display: none;
    background-color: #FFFFFF;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 150;
}
/* =============================== */
img{
	width:100%;
	display:block;
	 border:0;
}
a{
	text-decoration: none;
	color:black;
}
a img:hover{
	opacity:0.8;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
 
.clearfix:before {
　　　　content: "";
	display: block;
	clear: both;
}
 
.clearfix {
	display: block;
}
.content{
	width:90%;
	max-width:960px;
	margin:auto;
	padding:5% 0;
	overflow:hidden;
}
.full-content{
	width:97%;
	margin:auto;
}

h4,h3,h2,h1{
	text-align:center;
	line-height:1.8em;
}
h3{
	font-size:18px;
	line-height:1.5em;
	margin:2em 0 0;
	color:black;
}
h2{
	font-size:50px;
	line-height:0.3em;
	margin:5% auto;
	color:#3F4F60;
	font-family: trajan-pro-3,serif;
	font-weight: 600;
	font-style: normal;
}
h2 span{
	font-size:15px;
}
h2 span::before{
	  content:"\A";
	  white-space: pre;
}
.bold{
	font-weight:bold;
}

p{
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	font-size:90%;
	line-height:1.8em;
}
p.text_center{
	text-align:center;
}
p.text_right{
	text-align:right;
}


.left,.right{
	width:50%;
	float:left;
	padding: 0 1%;
}

.ringt{
	padding-right:0;
}

.flex{
	display: flex;
}
.flex a{
	padding:1%;
}
.pan a{
	color:#3f4f60;
}

/* =============================== */

.main {
  position: relative;
}

.pager {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  padding: 0;
}
.pager li {
  display: block;
  margin: 20px;
}
.pager li a {
  display: block;
  width: 10px;
  height: 10px;
  background: #999;
  border-radius: 50%;
}
.pager .is-current a {
  background: #232323;
}

.section {
  width: 100%;
}
.section.is-show .section-content {
  opacity: 1;
  
}

.section-1{
	position:relative;
}

#business {
	width: 100%;
	padding:0 0 8%;
	background: url("../img/stage4-bg.jpg")center center / cover no-repeat;

}


#consulting,#company {
  background: linear-gradient(90deg, #FFFFFF, #D7D7D7);
}


/* .section-1
--------------------------- */
ul.nav-list {
	position:absolute;
	bottom:0;
	color:#3f4f60;
	font-size:15px;
	width:100%;
	background: linear-gradient(90deg, #D7D7D7,#FFFFFF, #D7D7D7);
	text-align:center;
	line-height:3em;
	letter-spacing:0.3em;
	z-index:9999;
}
ul.nav-list li {
  padding-left:18px;
  display: inline; /* 横並びにさせる */
  border-left: 1px solid #000; /* 区切り線 */
  
}

ul.nav-list li:first-child {
  border: none; /* 親要素から見て一番目のli要素のボーダーを無しに */
}

div.logo{
	margin:2%;
}
div.logo a img{
	width:100%;
	max-width:350px;
	margin:auto;
}
.bg-slider {
	width: 100%;
	height: 100vh;
	background-position:center center;
	background-size: cover;
	position: relative;
}

.bg-slider .content img{
	margin: 20vh auto 0;
	transform: translateY(-20%);
}

.bg-slider img{
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	z-index:80;
	width:70%;
	max-width:800px;
}

.results p{
	text-align:left;
	line-height:2em;
	width:100%;
	padding:2em;
	border-top: solid 2px #000 ;
	border-bottom: solid 2px #000 ;
}


/*
======================section-2==================================
*/
.content img.mmm{
	max-width:500px;
	margin:auto;
}
h3{
	margin:3% auto;
	line-height:2em;
}

#main_slide{
	width:auto;
}
#main_slide ul li img{
	width:auto;
	height:250px!important;
}
.main_slide_child img{
	position:absolute;
	left: 0;
	right: 0;
	z-index:99;
	width:auto;
	height:250px;
	margin:auto;
}
/*
=====================section-3===================================
*/
.bottom0{
	padding-bottom:0;
	margin-bottom:0;
}
div.consul,div.perfor{
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	background:#FFF;
	padding:20px 50px 50px;	
}
div.consul h4, div.consul h4 , div.perfor h4{
	font-size:21px;
	text-align:left;
	line-height:1.3em;
}
.left div.consul h4{
	color:#3f4f60;
}
.right div.consul h4{
	color:#bc5058;
}
div.consul p,div.perfor p{
	text-align:justify;
	margin:0.8em 0 ;
}
div.consul .btn-gradation1,div.consul .btn-gradation2 {
	display: inline-block;
	width: 100%;
	text-align: center;
	font-size: 16px;
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
	padding: 12px 24px;
	transition: .5s;
	background-size: 200%;
}
div.consul .btn-gradation1{
	background-image: linear-gradient(-90deg, #3f4f60, #728aa0);
}
div.consul .btn-gradation2{
	background-image: linear-gradient(-90deg, #bc5058, #cc8b93);
}

div.consul .btn-gradation1:hover,div.consul .btn-gradation2:hover  {
	background-position: right center;
}


.parent{
	margin:2% auto;
	position:relative;
}
.parent h4{
	margin:5px auto 20px;
}
.parent .left-1{
	float:left;
	width:70%;
       background: url('../img/br1.jpg')center center / cover no-repeat;
	height:400px;
}
.parent .right-1{
	margin-top:2%;
	width:40%;
	position:absolute;
	padding:3%;
	background:#FFF;
	right:5%;
	box-shadow: 0 0 8px gray;
}
.parent .right-2{
	float:right;
	width:70%;
       background: url('../img/br2.jpg')center center / cover no-repeat;
	height:400px;
}
.parent .left-2{
	margin-top:2%;
	width:40%;
	position:absolute;
	padding:3%;
	background:#FFF;
	left:5%;
	box-shadow: 0 0 8px gray;
}
@media screen and (max-width:850px){
	.parent .left-1,.parent .right-2{
		float:none;
		clear:both;
		width:100%;
		height:250px;
	}
	.parent .right-1,.parent .left-2{
		margin:auto;
		width:85%;
		position:relative;
		padding:7%;
		background:#FFF;
		right:0;
		left:0;
		z-index:1;
		box-shadow: 0 0 8px gray;
		
	}
	.parent p {
		text-align:justify;
	}
}

/*
========================================================
*/

#company .company .left,#company .company .right{
	width:48%;
	margin:1%;
       background: -webkit-linear-gradient(left, #3f4f60 40%, #123156 100%);
       background: linear-gradient(90deg, #3f4f60 40%, #123156 100%);
	background-size: 200% auto;
	transition: 1s;
}
#company .company .left:hover,#company .company .right:hover{
       background-position: right center;
	transition: 1s;
}

#company h2.btn{
	font-size:27pt;
	color:white;
	line-height:0.5em;
	background-position: right center;
}

.news ul.list-news{
 width:100%;
 text-align:left;
 font-size:20px;
}
.list-meta{
	padding:10px;
	border-bottom:solid 1px #3f4f60;
}
.news p.date{
	float:left;
}
ul.cat{
	float:left;
	margin:0 20px;
	display:inline-block;
}

ul.cat .tag{
	padding:0.5em 2em;
	background-color:#3f4f60;
	border-radius:5px;
	color:#fff;
	margin:0 5px;
	font-size:60%;
	display:inline-block;
	text-decoration:none;
}

.seminar .left{
	width:30%;
	max-width:300px;
	margin-right:10px;
	padding:0;
}
.seminar .right{
	text-align:justify;
	width:70%;
	max-width:650px;
}

.contact{
	background-image: linear-gradient(0deg, #3f4f60, #72899f);
	overflow:auto;
}



/*
========================================================
*/


footer{
	background:#333;
	}

footer .left{
	max-width:180px;
	margin-right:5%;
}
footer .right{
	width:70%;
}
footer .right p,footer .right a{
	color:white;
	text-align:left;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}


p.copy{
	text-align:center;
	line-height:3em;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}


/*
========================================================
*/


.btn,
a.btn,
button.btn {
	margin:0.5em 0;
	width:100%;
	font-size: 1rem;
	position: relative;
	display: inline-block;
	padding: 1rem 3rem;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0.1em;
	color: #3f4f60;
	border-radius: 0.5rem;
}

a.btn-gradient {
  font-weight: normal;
  color: #fff;
  border-radius: 0;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(40%, #3f4f60),
    to(#123156)
  );
  background-image: -webkit-linear-gradient(left, #3f4f60 40%, #123156 100%);
  background-image: linear-gradient(90deg, #3f4f60 40%, #123156 100%);
}

a.btn-gradient:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  background-image: -webkit-gradient(linear,left top,right top,from(#3f4f60),color-stop(#123156),to(#3f4f60));
  background-image: -webkit-linear-gradient(left, #3f4f60, #123156, #3f4f60);
  background-image: linear-gradient(90deg, #3f4f60, #123156, #3f4f60);
}

a.btn-gradient span {
  position: relative;
  z-index: 1;
}

a.btn-gradient:hover {
  color: #fff;
}

a.btn-gradient:hover:after {
  opacity: 0;
}

.btn1{
	width:100%;
	display:block;
       background-image: -webkit-linear-gradient(left, #3f4f60 40%, #123156 100%);
       background-image: linear-gradient(90deg, #3f4f60 40%, #123156 100%);
	color:white;
	text-align:center;
	margin:2% 0;
	padding:1.3%;
}
.btn1:hover{
       background-image: -webkit-linear-gradient(left, #123156 40%, #3f4f60 100%);
       background-image: linear-gradient(90deg, #123156 40%, #3f4f60 100%);
}

.btn-border {
	width:32%;
	border: 1px solid #3f4f60;
	border-radius: 0;
	background: #fff;
	-webkit-box-shadow: 0px 4px 0 #3f4f60;
	box-shadow: 0px 4px 0 #3f4f60;
}

.btn-border:hover {
	-webkit-box-shadow: 0px -4px 0 #000;
	box-shadow: 0px -4px 0 #000;
}

.fotter_button{
	position:fixed;
	bottom:0;
	width: 100%;
}

.fotter_button .left{
	background:#3f4f60;
}
.fotter_button .right{
	background:#bc5058;
}
.fotter_button a{
	line-height:2em;
	color:white;
	text-align:center;
	display:block;
	margin:auto;
	
}


.in {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;
}