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

html { height: 100%; font-size: 100%;}

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
 
.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

body {
	font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , 'Noto Serif JP', serif;
    background: #f9f9f9;
    font-weight: 400;
    font-size: 14.7px;
	line-height:2.2em;
	letter-spacing:0.1em;
    color: #000;
	margin:0 auto;
	-webkit-font-smoothing: antialiased;
}


/* Header Style */
.codrops-top {
	line-height: 2.5;
	font-size: 0.688em;
	background: #fff;
	background: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	z-index: 9999;
	position: relative;
	box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
	margin: 0 calc(50% - 50vw);
	width: 100vw;

}

.codrops-top a {
	padding: 0 1em;
	letter-spacing: 0.1em;
	color: #333;
	display: inline-block;
}

.codrops-top a:hover {
	background: rgba(255,255,255,0.8);
	color: #000;
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: block;
}


a {
	color: #930;
	text-decoration: none;
}
.fontLato{
	font-family: 'Lato', Calibri, Arial, sans-serif;
}


.container > header h1 {
	font-size: 2.5rem;
	line-height: 1.3;
	margin-top:150px;
	margin-bottom:150px;
	font-weight: 100;
	color: #666;
	text-align:center;
}

.container > header h1 span {
	display: block;
	font-size: 65%;
	font-weight: 300;
}

.rb-grid li h2 {
	font-weight:100;
	font-size: 2em;
}

.rb-grid li h3 {
	font-size: 2em;
	font-weight:100;
	color:#000;
	text-align:center;
}


.rb-grid li h4{
	font-size: 1.0em;
	font-weight:100;
	color:#000;
	text-align:center;
}

.rb-grid li h4 span{
	font-size: 0.8em;
	color:#000;
}

.rb-grid li h4 span::before {
	content: "\A" ;
	white-space: pre ;
}


.rb-grid li.rb-span-4.clearfix a {
    color: #000;
}



.newgraduate{
	background:#286786;
	text-align:center;
	margin:50px auto 150px;
	border-radius:5px;
}
.newgraduate a{
	display:block;
	color:#fff;
	height:100%;
	padding:70px;
}
.newgraduate a h2{
	font-size:200%;
    font-weight:normal !important;
    margin:0 0 10px 0;
}
.newgraduate a h2 span{
	font-size:150%;
	margin:0 0 0 0.3em;
	display:block;
	font-weight:100;
}
.newgraduate a .Induction span{
	color:#000;
	background:#fff;
	padding:3px 15px;
	border-radius:20px;
}


.group{
	margin:0 auto 200px;
}
.group dl{
	width:80%;
	margin:auto;
}
.group dl h4{
	font-size:2rem;
	font-weight:normal;
	text-align:center;
	margin-bottom:20px;
}
.group dl h4 span{
	color:#aaa;
	font-size:90%;
	display:block;
	font-weight: 300;
}
.group ul{
	width:80%;
	margin:50px auto 0;
	display: flex;
    justify-content: space-between;
}
.group ul li{
	width:45%;
	max-width:500px;
	margin:auto;
	list-style:none;
}
.group ul li a dt{
	height:150px;
	position:relative;
	background:#fff;
	border-radius:10px;
	box-shadow:5px 5px 0 #ccc;
}

.group ul li a dt img{
	width:50%;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}

.school {
	width: 99%;
	margin: 100px auto 80px;
}
.school h3 {
	font-size: 150%;
	color: #000000;
	font-weight: normal;
	text-align: left;
	border-top: 1px #999999 solid;
	border-bottom: 1px #999999 solid;
	margin-top: 30px;
	margin-bottom: 30px;
	padding:0.3em 0;
}
.school h4 {
	font-size: 110%;
	font-weight: normal;
	margin: 50px 0 10px;
}
.school h3 + h4 {
	margin-top: 0;
}
.school ul {
	margin-left: 1.1em;
}
.school ul li {
	font-size:85%;
	line-height: 2.0;
	display: inline-block;
}
.school ul li:after {
	content: '|';
	display: inline;
	padding: 0 5px;
}
.school ul li:last-child:after {
	content: none;
}



.copy{
	font-size:80%;
	text-align:center;
	margin:30px auto 0;
	background:#333;
	padding: 10px 0;
	color: #fff;
	margin: 0 calc(50% - 50vw);
  width: 100vw;
}

.copy img{
	width:10%;
}

@media screen and (max-width:1024px) {
	.container > header h1 {
		font-size: 2.0rem;
	}
}

@media screen and (max-width:640px) {
	.container > header h1 {
		font-size: 1.5rem;
		margin-top:100px;
	    margin-bottom:100px;
	}
	.rb-grid li h3 {
		text-align:unset;
	}
	.rb-grid li h4{
		text-align:unset;
	}
	.newgraduate a{
		padding:70px 2%;;
	}
	.group ul{
		display: unset;
		justify-content: unset;
	}
	.group ul li{
		width:100%;
		max-width:500px;
		margin:2em auto 2em;
		list-style:none;
	}
	.group dl{
		width:100%;
	}
	.group ul{
		width:100%;
	}
	.group ul li a dt img{
		width:60%;
	}
}

@media screen and (max-width:499px) {
	.newgraduate{
		margin:50px auto 100px;
	}
	.newgraduate a h2{
		font-size:130%;
	}
	.newgraduate a .Induction span{
		font-size:80%;
	}
	.newgraduate a{
		padding:50px 2%;;
	}
	.group{
		margin:0 auto 100px;
	}
	.group dl{
		margin:0 auto 30px auto;
	}
	.group dl h4{
		font-size:1.5rem;
	}
	.group ul li a dt{
	height:150px;
	position:relative;
	background:#fff;
	border-radius:10px;
	box-shadow:5px 5px 0 #ccc;
	}
	.group ul li a dt{
		height:100px;
	}
}



/*　swiper */


#top_works{
	margin:10vh auto 10vh auto;
	position:relative;
}


#top_works h6{
	color:#ccc;
	height:1.5em;
	font-size:130px;
	font-weight:100;
    position:absolute;
    line-height:1em;
    text-align:center;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}
#top_works h5{
	color:#333;
	font-size:150%;
	font-weight:100;
	margin:1em auto 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
#top_works h5:before,
#top_works h5:after {
	border-top: 1px solid #999;
	content: "";
	flex-grow: 0.07;
}
#top_works h5:before {
	margin-right: 1rem;
}
#top_works h5:after {
	margin-left: 1rem;
}


#top_works .sample.sample02{
}

#top_works .sample02 .swiper-wrapper {
  align-items: stretch;
}

#top_works .sample02 .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  padding-bottom: 40px;
}

#top_works .sample02 .sample02-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  max-width:800px;
}

#top_works .sample02 .sample02-inner p{
  width: 100%;
  margin:0;
}

#top_works .sample02 .sample02-inner p img{
  width: 100%;
  box-shadow:10px 30px 20px #ccc;
}

#top_works .sample02 .swiper-button-prev,
#top_works .sample02 .swiper-button-next {
  display: none;
  width: 30px;
  height: 32.58px;
  fill: #666;
  stroke: none;
  stroke-width: 0;
  background-image: none;
  z-index: 10000;
}

#top_works .sample02 .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 0;
}

#top_works .sample02 .swiper-pagination-bullet-active {
  background: #666;
}

#top_works .sample02 .swiper-button-prev,
#top_works .sample02 .swiper-button-next {
    display: block;
}
@media screen and (max-width:960px) {
		#top_works h6{
		font-size:500%;
	}
}
@media screen and (max-width:768px) {
	#top_works{
		margin:7vh auto 3vh auto;
	}
}

@media screen and (max-width:520px) {
	#top_works{
		margin:5vh auto 2vh auto;
	}
	#top_works h6{
		font-size:300%;
	}
	#top_works .sample02 .swiper-button-prev,
	#top_works .sample02 .swiper-button-next {
 		width: 20px;
  		fill: #666;
  		stroke: none;
  		stroke-width: 0;
  		background-image: none;
  		z-index: 10000;
	}
}