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

/*--Base------------------------------------------------------------*/
html, body { width: 100%; height: 100%; }
html { height: 100%; overflow-y: scroll; }

/*--Reset-----------------------------------------------------------*/
* { margin: 0; padding: 0; }
img { border: none; vertical-align: middle; }
ul,ol { list-style: none; }

/*--clearfix-----------------------------------------------------------*/
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/*--Text------------------------------------------------------------*/
body {
	font-size: 88%; font-weight: normal; line-height: 1.5;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	font-weight: 500;
}
h1,h2,h3,h4,h5,h6 { font-size: 100%; }

/*--Link------------------------------------------------------------*/
a, a:link { color: #1d2087; text-decoration: none; }
a:visited { color: #1d2087; }
a:hover, a:active { text-decoration: none; }
a:focus { outline: none; }

/*--HTML5-----------------------------------------------------------*/
article,aside,details,footer,header,main,menu,nav,section,summary { display: block; }

/*--style----------------------------------------------------------*/

/*-- #contents----------------------------------------------------------*/
.contents_inner {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

/*--header----------------------------------------------------------*/
/* #main_img */
#header {
	width: 100%;
	height: 100vh;
  position: relative;
}
.main_visual__bg{
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #153999;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  -webkit-animation: anime 15s 0s infinite;
  animation: anime 15s 0s infinite;
}
.main_visual__bg:nth-of-type(2) {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}
.main_visual__bg:nth-of-type(3) {
  -webkit-animation-delay: 10s;
  animation-delay: 10s;
}
/*--
.main_visual__bg:nth-of-type(4) {
  -webkit-animation-delay: 30s;
  animation-delay: 30s;
}--*/

@keyframes anime {
  0% { opacity: 0; }
  5% { opacity: 1; }
  33% { opacity: 1; }
  50% { opacity: 0; z-index: 9; }
  100% { opacity: 0; }
/*--
  0% { opacity: 0; }
  5% { opacity: 1; }
  25% { opacity: 1; }
  35% { opacity: 0; z-index: 9; }
  100% { opacity: 0; }
  --*/
}


header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
	padding: 40px;
	box-sizing: border-box;
  transition: .3s;
}

.is-animation {
	padding: 20px 40px 0;
	height: 110px;
	background: rgba(10,37,85,0.7);
}
	.is-animation h1 img {
		width: 150px;
		height: auto;
	}

#header .contents_inner { position: relative; }

#header > p {
	padding-top: 300px;
	text-align: center;
  position: relative;
  z-index: 100;
}

#header > p img {
	max-width: 950px;
	width: 90%;
}

/* #gnav */
#gnav_list {
	position: absolute;
	top: 30px;
	right: 20px;
  z-index: 10;
  font-size: 1.1em;
}

	.is-animation #gnav_list { top: 20px; }

	#gnav_list li {
		padding: 10px 5px;
		line-height: 1.1;
		font-size: 1.0em;
		display: inline-block;
		margin-left: 50px;
		border-top: #fff 1px solid;
		border-bottom: #fff 1px solid;
	}
	#gnav_list li:first-child { border-left: none; }
	#gnav_list li a {
		display: block;
		color: #fff;
	}

#gnav_list li a:hover {
		opacity: 0.7;
		filter: alpha(opacity=70);
		-ms-filter: "alpha(opacity=70)";
	}

#nav_toggle { display: none; }

/*--footer----------------------------------------------------------*/
#footer {
	width: 100%;
	padding: 10px 0;
	color: #fff;
	font-size: 1.4em;
	text-align: center;
	background-color: #0a2762;
}

/*--section----------------------------------------------------------*/
section {
	padding: 100px 0;
	text-align: center;
}

section h2 {
	margin:  0 auto 40px;
	padding: 20px 0;
	display: inline-block;
	font-size: 3em;
	line-height: 1.3;
	letter-spacing: 0.1em;
	color: #16258b;
	border-top: 1px solid #16258b;
	border-bottom: 1px solid #16258b;
}
section h2 span {
	display: block;
	letter-spacing: 0;
	font-size: 0.4em;
}

/* #philosophy */
section#philosophy {
	background: url(../images/main_image2.png) no-repeat center top #153999;
	background-size: contain auto;
}

section#philosophy p img {
	max-width: 920px;
	width: 90%;
}

/* #business */
#business .contents_inner {
	padding: 0 40px;
}
.con_wrap {
	margin-top: 80px;
	padding-top: 40px;
	position: relative;
	text-align: left;
}

.con_wrap:first-of-type { margin-top: 40px;	}

.con_box {
	width: 50%;
	min-height: 370px;
	padding: 40px;
	position: relative;
	box-sizing: border-box;
	background-color: #f5f5f5;
	text-align: left;
}

.con_wrap:nth-child(even) .con_box {
	padding-left: 100px;
	margin-left: auto;
}
	.con_wrap:nth-child(even) .con_box::after {
		content: "";
		width: 0;
		height: 0;
		position: absolute;
		top: 10px;
		right: 10px;
		border-style: solid;
		border-width: 0 60px 60px 0;
		border-color: transparent #0a2762 transparent transparent;
	}
.con_wrap:nth-child(odd) .con_box {
	padding-right: 100px;
	margin-right: auto;
}
	.con_wrap:nth-child(odd) .con_box::after {
		content: "";
		width: 0;
		height: 0;
		position: absolute;
		bottom: 10px;
		left: 10px;
		border-style: solid;
		border-width: 60px 0 0 60px;
		border-color: transparent transparent transparent #0a2762;
	}

.con_wrap img {
	max-width: 642px;
	width: 57%;
	position: absolute;
	top: 0;
	z-index: 100;
}

.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 400ms;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

.con_wrap:nth-child(even) img { left: 0; }
.con_wrap:nth-child(odd) img { right: 0; }

.con_box h3 {
	font-size: 2.3em;
}

.con_box p { margin-top: 20px; }
.con_box p:first-of-type { margin-top: 10px; }


/* #about */
section#about {
	background: url(../images/about_back.png) repeat #fbfbfb;
}

#about p {
	margin-top: 30px;
	font-size: 1.1em;
}
#about p:first-of-type { margin-top: 0; }

#about dl {
	max-width: 760px;
	width: 90%;
	margin: 50px auto 0;
	font-size: 1.1em;
	text-align: left;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}
#about dt {
	display: block;
	width: 30%;
	padding: 10px 60px;
	box-sizing: border-box;
	clear: left;
	float: left;
	border-top: 1px dotted #9fa0a0;
}
#about dd a {
	color: #0a2762;
	text-decoration: underline;
}
#about dd a.icon_pdf {
	margin-left: 50px;
	padding-left: 35px;
	position: relative;
}

#about dd a.icon_pdf:before {
	position: absolute;
	top: 0;
	left: 0;
	content: url(../images/icon_pdf.png);
}

#about dd {
	display: block;
	width: 70%;
	padding: 10px 0;
	float: left;
	border-top: 1px dotted #9fa0a0;
}
#about dt:first-of-type,
#about dd:first-of-type {
	border-top: none;
}

/* #contact */
#contact dl {
	text-align: center;
}
#contact dl dt {
	font-size: 1.3em;
}
#contact dl dt:last-of-type {
	margin-top: 40px;
}

#contact dl dd .big {
	font-size: 3em;
	color: #0a2762;
	text-decoration: underline;
	font-weight: bold;
	line-height: 1.4;
}
#contact dl dd p { font-size: 1em; }


/*--Retina------------------------------------------------------------*/
@media screen and (max-width: 960px) {
	#header {
    width: 100%;
    height: 60vh;
  }
  .main_visual__bg{
    width: 100%;
    height: 60vh;
  }
	nav {
		display: none;
		position: fixed;
		top: 0;
		width: 100%;
		height: 100vh;
		background: rgba(255,255,255,0.9);
		left: 0;
		z-index: 100;
	}
	#gnav_list {
		width: 100%;
		padding: 10px 0;
		position: relative;
		top: 50px;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		box-shadow: none;
		background:  none;
		font-size: 1.1em;
	}
	#gnav_list:before { display: none; }
	#gnav_list li {
		width: 90%;
		display: block;
		border-left: none;
		margin: 0 auto;
		padding: 0;
		border-top: #000 1px solid;
	}
	#gnav_list li:last-child { border-bottom: #000 1px solid; }
	#gnav_list li a { color: #000; padding: 15px 0; }
	#gnav_list li span,
	#gnav_list li a:after { display: none; }

	#nav_toggle {
		display: block;
		width: 20px;
		height: 20px;
		padding: 8px 10px 10px;
		position: fixed;
		top: 30px;
		right: 20px;
		z-index: 200;
	}
	#nav_toggle div { position: relative; }
	#nav_toggle span{
		display: block;
		height: 3px;
		background: #fff;
		position:absolute;
		width: 100%;
		left: 0;
		-webkit-transition: 0.5s ease-in-out;
		-moz-transition: 0.5s ease-in-out;
		transition: 0.5s ease-in-out;
	}
	#nav_toggle span:nth-child(1){ top: 0; }
	#nav_toggle span:nth-child(2){ top: 10px; }
	#nav_toggle span:nth-child(3){ top: 20px; }

	.open #nav_toggle { background-color: transparent; }
	.open #nav_toggle span:nth-child(1) {
			top: 10px;
		  -webkit-transform: rotate(135deg);
			-moz-transform: rotate(135deg);
			transform: rotate(135deg);
			background: #000;
		}
		.open #nav_toggle span:nth-child(2) {
			width: 0;
			left: 50%;
			background: #000;
		}
		.open #nav_toggle span:nth-child(3) {
			top: 10px;
			-webkit-transform: rotate(-135deg);
			-moz-transform: rotate(-135deg);
			transform: rotate(-135deg);
			background: #000;
		}

	.con_box { width: 90%; min-height: auto; margin-top: -30px; }
	.con_wrap {  margin-top: 40px; padding-top: 0; }
	.con_wrap:first-of-type { margin-top: 0; }
	.con_wrap:nth-child(even) .con_box { padding-left: 40px; display: block; }
	.con_wrap:nth-child(odd) .con_box { padding-right: 40px; display: block; }

	.con_wrap img { max-width: auto; width: 90%; position: relative; }
	.con_wrap:nth-child(odd) { text-align: right; }

	#about dt { padding: 10px 30px; }
	#about dd a.icon_pdf { margin-left: 30px; }
}

@media screen and (max-width: 640px) {
	#header {
    width: 100%;
    height: 60vh;
  }
  .main_visual__bg{
    width: 100%;
    height: 60vh;
  }
	header { padding: 20px 0 0; }
	.is-animation { padding: 10px 0 0; height: 70px; }
	#nav_toggle { top: 15px; }

	#header h1 img { width: 105px; height: auto; }

	#header > p { padding-top: 200px;}
	#header > p img {	width: 95%; }
	#footer { font-size: 1em; }

	section { padding: 50px 0; }
	section#philosophy p img { width: 100%; }

	#business .contents_inner { padding: 0;}
	.con_wrap:nth-child(even) .con_box { padding: 40px 20px 20px; }
	.con_wrap:nth-child(odd) .con_box { padding: 40px 20px 20px; }
		.con_wrap:nth-child(even) .con_box::after { border-width: 0 30px 30px 0; }
		.con_wrap:nth-child(odd) .con_box::after { border-width: 30px 0 0 30px; }
	.con_box h3 { font-size: 1.8em; }

	#about dl { width: 100%; margin: 30px auto 0; }
	#about dt { padding: 10px 15px; }


	#contact { margin-bottom: 40px; }
	#contact dl dd .big { font-size: 1.8em; }

	.pc { display: none; }
	.smp { display: block; }


}