@charset "utf-8";
@import "https://use.fontawesome.com/releases/v5.13.0/css/all.css";
/* CSS Document */
/* -------------------------------------------- Basic Setting */	
html { scroll-behavior: smooth;}

body{
	font: 18px/1.6 "Hiragino Kaku Gothic Pro",Osaka,"メイリオ","ＭＳ Ｐゴシック","MS PGothic",Verdana,Arial,sans-serif;
	margin:0;
	width: 100%;
	max-width: 100%;
}

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

.anchor {
  display: block;
    padding-top: 100px;
    margin-top: -100px;
}

.anchorB {
  display: block;
    padding-top: 300px;
    margin-top: -200px;
}

div#wall{background-image: url("../../../lib/i/bg.png");
	display: block;}
/* -------------------------------------------- Header */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color:rgba(0,22,38,0.7);
  z-index: 100;
  display: flex;
  justify-content: space-between;
}



@media screen and (max-width: 767px){
	.psBanner {
		width:80%;
	}
	.c-btn1__txt::after{right: 10px;}
}



header nav.pc-menu {
  width: 90%;
	margin: 0 auto;
}

header nav.pc-menu ul {
  width: 100%;
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

header nav.pc-menu ul li {
  width: 33%;
}
header nav.pc-menu ul li:last-child{
	border-right: solid 1px #223e52;
}
header nav.pc-menu ul li a {
  display: block;
  width: 100%;
  text-align: center;
	transition:.5s;
	color:#d7e1e8;
	font-weight:bold;
	position:relative;
	border-left:solid 1px #223e52;
	height:70px;
	padding-top:20px;
}

header nav.pc-menu ul li a::after{
	position:absolute;
	left:0;
	top:0;
	content:'';
	width:100%;
	height:70px;
	background:#c42323;
	opacity: 0.3;
	transform:scale(0,1);
	transform-origin:left top;
	transition:transform 0.3s;
}

header nav.pc-menu ul li#online a::after{background: #717071;}
header nav.pc-menu ul li#tokyo a::after{background: #35519d;}
header nav.pc-menu ul li#osaka a::after{background:#c5b752;}
header nav.pc-menu ul li#nagoya a::after{background:#7ab897;}
header nav.pc-menu ul li#fukuoka a::after{background:#c6291f;}
header nav.pc-menu ul li#sendai a::after{background:#554493;}
header nav.pc-menu ul li#hokkaidou a::after{background:#8771ad;}
header nav.pc-menu ul li#toyama a::after{background:#81b065;}

header nav.pc-menu ul li a:hover::after {
	transform:scale(1,1);
}



.sm {
  display: none;
}



/**********************************　
以下、ハンバーガーメニューの設定　
************************************/

@media screen and (max-width: 767px){
  header nav.pc-menu {
    display: none;
  }


  #hamburger {
    background-color: transparent;
    position: relative;
    cursor: pointer;
    margin: 0 0 0 auto;
    height: 60px;
    width: 60px;
	  z-index:2000;
  }

  #hamburger .icon span {
    position: absolute;
    left: 15px;
    width: 30px;
    height: 4px;
    background-color: #eeeeee;
    border-radius: 8px;
    transition: ease 0.75s;
  }

  .icon span:nth-of-type(1) {
    top: 16px;
  }
  .icon span:nth-of-type(2) {
    top: 28px;
  }
  .icon span:nth-of-type(3) {
    bottom: 16px;
  }

  .close span:nth-of-type(1) {
    transform: rotate(45deg);
    top: 28px;
  }

  .close span:nth-of-type(2) {
    opacity: 0;
  }

  .close span:nth-of-type(3) {
      transform: rotate(-45deg);
      top: 28px;
  }

  .sm {
      top: 60px;
      left: 0px;
      position: absolute;
      z-index: 10;
      width: 100%;
      background-color: rgba(34, 49, 52, 0.7);
  }
  .sm ul {
	  width:100%;
	  display:flex;
    flex-direction: column;
  }
	.sm ul li {
		width:100%;
		text-align: center; 
		 border-top: solid 0.5px rgba(255, 255, 255, 0.2);
		padding-top:30px;
		padding-bottom:30px;
	}

  .sm ul a {    
	  color:#ffffff;   
  }
}

/* -------------------------------------------- Layout共通 */
.wrapper {
	width:100%;
	max-width: 100%;
}

.container {
	width:900px;
	margin:0 auto;
	padding: 60px 50px 40px;
}
.container:nth-child(odd){background: #fff;}
.container:nth-child(even){background: #f2f2f0;}
#container_text {
	max-width:900px;
	width:100%;
	margin:0 auto;
	padding: 60px 50px 40px;
}
.container ul li,.container p{text-align: center;}
.container dl{font-size: 0.8em;line-height: 1.8em;width: 90%;margin: 1em auto 0;}
.container dl dd{text-indent: -1em;padding-left: 1em;}
#container_text ul#main_tex li{
	list-style: none;
	text-indent: -1.4em;
    padding-left: 1.4em;
	font-weight: 600;
}
div#h3{font-weight: 600;color: #fff;font-size:1.2em;background: #1D1D1D;text-align: center;padding: 1em 0; max-width:900px;margin:0 auto;display: block;}

div#h3 .parent {
  display: flex;
  justify-content: center; /* 左右の中央揃え */
  align-items: center;     /* 上下の中央揃え */
}

div#h3 .child-arrow {
  /* 下矢印のスタイル */
  width: 50%;
  text-align: center; /* 矢印文字を中央に配置 */
  margin: 0 auto; /* 上下左右の中央揃え */
}


@media screen and (max-width: 767px){
	#container_text{
	width: 94%;
    margin: 0 3%;
    padding: 50px 0.5em 40px 0.5em;
		}
	#container_text h2{font-size: 1.4em;}
}
#container_text ul#sb_tex li{
	list-style-type: disc;
	line-height: 1.8em;
	margin:0 0 0.6em 1em;
	font-size: 0.9em;
}
.container h2,#container_text h2{font-weight: 600;margin-bottom: 1.4em;}
#container_text h2{text-align: center;}
.container h2{color: #fff;border-radius: 25px;width: fit-content;
    padding: 0.2em 1.5em;
    margin: 0 auto 1em;}
#online h2{background: #717071;}
#tokyo h2{background: #35519d;}
#osaka h2{background:#c5b752;}
#nagoya h2{background:#7ab897;}
#fukuoka h2{background:#c6291f;}
#sendai h2{background:#554493;}
#hokkaidou h2{background:#8771ad;}
#toyama h2{background:#81b065;}
#container_text h2{color: #D32B2B;}


.container ul li{font-weight: 600;padding: 1.2em 0;margin:0 auto 0.4em;position: relative;font-size: 0.9em;line-height: 1.6em;max-width: 500px;}
.container ul li.academy{background-color: #7d0000;border: 2px solid #7d0000;color: #fff;letter-spacing: -0.05em;}
.container ul li.first{background: #fff;border: 2px solid #093d6e;color: #093d6e;}
.container ul li.corporate{background-color: #beac56;border: 2px solid #beac56;color: #fff;}
.container ul li.first::after{content: '';
    width: 8px;
    height: 8px;
    border-top: 2px solid #093d6e;
    border-right: 2px solid #093d6e;
    position: absolute;
    top: 50%;
    right: 20px;
    -webkit-transform: translate(0, -50%) rotate(45deg);
    transform: translate(0, -50%) rotate(45deg);
}
.container ul li.academy::after,.container ul li.corporate::after{
	content: '';
    width: 8px;
    height: 8px;
	border-top: 2px solid #fff;border-right: 2px solid #fff;
	position: absolute;
    top: 50%;
    right: 20px;
    -webkit-transform: translate(0, -50%) rotate(45deg);
    transform: translate(0, -50%) rotate(45deg);
}
.container p{line-height: 2em;text-decoration-line: underline;font-size: 0.8em;}
@media screen and (max-width: 767px){
	.container {
		width:100%;
		padding: 2em 2% 1.5em;
	}
	.container h2,#container_text h2{
		margin-bottom: 0.8em;
	}
	.container ul li.academy{font-size: 0.9em;}
}
/* -------------------------------------------- Hero */

h1{display: none;}
@media screen and (max-width:767px) {
	section#mv {
  background: url("../i/mv0110_sp.jpg") no-repeat center center;
		background-size: cover;
		padding: 50% 0 0;
}
section#mv_0113 {
  background: url("../i/mv0112_sp.jpg") no-repeat center center;
		background-size: cover;
		padding: 50% 0 0;
}
	footer{font-size: 0.7em;}
}
@media screen and (min-width:768px) {
	#mv {
		background:url("../i/0110_mv_pc.jpg")  no-repeat center center;
		background-size:cover;
		padding: 11em 0;
	}
	#mv_0113 {
		background:url("../i/0112_mv_pc.jpg")  no-repeat center center;
		background-size:cover;
		padding: 11em 0;
	}
}

/* -------------------------------------------- Hero */

@media screen and (min-width: 768px){	
  .container h2{font-size: 1.5em;}
}
@media screen and (max-width: 767px){	
  .container h2{font-size: 1.4em;}
}


/* -------------------------------------------- ジャンプリンク調整 */
#qualityCompany::before,#AC15::before {
	display: block;
    height: 7rem;
    margin-top: -7rem;
    content: "";
}

/* -------------------------------------------- Footer */	
footer {
	width:100%;
	/*height:250px;*/
	background-color:#000; 
	color: #fff;
	text-align:center;
	overflow:hidden;
	padding:2em 0;
	font-size: 16px;
}
ul.fNav {
	display:flex;
	justify-content: center;
	width:300px;
	margin:0 auto;
	padding:0 0 10px 0;
}
ul.fNav li{	
	margin:0 15px 0 0;
	color:#313131
	
}
ul.fNav li a{
	color:#313131;
		transition:.5s;
}
ul.fNav li a:hover{	
	color:#666666;
	border-bottom:solid 1px #666666;
	opacity:.5;
}
p {
	clear:both;
}