@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
common
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width:768px) {
.clickable:hover {filter: alpha(opacity=65) ;	opacity: .65;transition: all 0.2s ease-in-out;}
}

/* ----------------------------------------------------
element base setting (common)
---------------------------------------------------- */
body { color: #000; line-height: 1.5;  background: #fff;}
a { color: #1e84b9;  text-decoration: none;}
a:hover { text-decoration: none;}
.clickable a, .clickable a:hover { color: #333;}
.flex {display: flex; display:-webkit-flex; justify-content: space-between; flex-wrap: wrap;}
.ff-serif {font-family: 'Noto Serif JP', serif;}

#topWrapper{min-height: 100vh; position: relative;}
#topInnerBox{min-height: 100vh;	display: flex; display: -webkit-flex; flex-flow: column; justify-content:space-between;}

header{background: url("../img/bg-visual.jpg") no-repeat 0 0; background-size: cover; height: 36.3vw; max-height: 545px; position: relative;}
header h1{width: 159px; position: absolute; top: 2.3vw; left: 3%;}
header h2{position: absolute; top: 10.3vw; left: 10%; font-size: 3.9rem; letter-spacing: 0.5rem; font-weight: 600;}
header h2 span{display: block; font-size: 1.6rem; color: #9a9a9a; letter-spacing: 0.3rem; font-family:'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; font-weight: normal;}

/* corp bottom */
#corporateBtn {position: fixed; right: 3%; top: 2.3rem; width: 14rem; height: 3.5rem; z-index: 90;}
#corporateBtn a {display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: #444; color: #fff; border-radius: 30px;}

/*.btBox{background-color: white; margin: -10.3vw 0 0 14%; width: 86%; max-width: 1300px; height: 29.3vw; max-height: 440px; z-index: 2;}
.btBox ul{display: flex; display:-webkit-flex; justify-content: space-between; width: 84%; margin: 50px auto;}*/
.btBox{background-color: white; margin: -10.3vw 0 0 14%; width: 86%; height: 29.3vw; max-height: 440px; z-index: 2;}
.btBox ul{display: flex; display:-webkit-flex; width: 84%; margin: 50px 0 0 6%;}
.btBox ul li{width: 30%; margin-left: 5%;}
.btBox ul li:first-child{margin-left: 0;}
.btBox ul li img{width: 100%;}
.btBox ul li p{margin-top: 10px; font-size: 2.2rem; position: relative;}
.btBox ul li p::before { /* くの字の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 8px;    /* くの字を山なりに見た時、左側の長さ */
  height: 8px;   /* くの字を山なりに見た時、右側の長さ */
  border-top: 2px solid #000;     /* くの字を山なりに見た時、左側の太さと色 */
  border-right: 2px solid #000;   /* くの字を山なりに見た時、右側の太さと色 */
  transform: rotate(45deg);    /* くの字の向き */
}
.btBox ul li p::after{
content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1px;
  width: 80px; /* 棒の長さ */
  height: 1px; /* 棒の太さ */
  background: #000;
}
.btBox ul li p span{font-size: 1.6rem; display: block; font-family:'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;}
footer{display: flex!important;	display: -webkit-flex!important; flex-flow: column;	justify-content: center; align-items: center; text-align: center; height: 4vh; background-color: #003352;}
footer span{font-size: 1.4rem; line-height: 1.4rem;	color: #5e5e5e; }


@media (max-width: 1360px) {
header h2{font-size: 2.868vw; letter-spacing: 0.368vw;}
header h2 span{font-size: 1.176vw; letter-spacing: 0.221vw;}
.btBox ul{margin: 3.676vw 0 0 6%;}
.btBox ul li p{margin-top: 0.735vw; font-size: 1.618vw;}
.btBox ul li p::before {width: 0.588vw; height: 0.588vw; border-top: 2px solid #000; border-right: 2px solid #000;}
.btBox ul li p::after{width: 5.882vw;}
.btBox ul li p span{font-size: 1.176vw;}
footer span{font-size: 1.029vw; line-height: 1.029vw;}
}

@media (max-width: 1200px) {
header{height: 40.3vw;}
header h2{top: 12.3vw; font-size: 3vw;}
.btBox{margin: -20.3vw 0 0 10%; width: 90%;}
	
/* corp bottom */
#corporateBtn {right: 2vw; top: 2vw; width: 11.6vw; height: 3.2vw;}
	
}

@media (max-width: 1023px) {
header{height: 40.3vw;}
header h1{width: 15.543vw; top: 4.3vw; left: 5%;}
header h2{top: 15.3vw; left: 5%; font-size: 3.812vw; letter-spacing: 0.489vw;}
header h2 span{font-size: 1.564vw; letter-spacing: 0.293vw;}	
.btBox{margin: 0 auto; width: 90%;}
.btBox ul{justify-content: space-between; margin: 1.5vw 0 0 0; width: 100%;}
.btBox ul li{margin-left: 0;}
}

@media (max-width: 912px) {
#topInnerBox{justify-content:flex-start;}
header{height: 80.3vw;}
header h1{width: 20.73vw; top: 2.3vw; left: 5%;}
header h2{top: 30.3vw; left: 5%; font-size: 6.085vw; letter-spacing: 0.652vw;}
header h2 span{font-size: 2.086vw; letter-spacing: 0.391vw;}
.btBox{margin: 7vw auto 0 auto; width: 90%; height: inherit; max-height: inherit;}
.btBox ul{flex-flow: column; align-items: flex-start;}
.btBox ul li{width: 100%; position: relative; height: 35vw; margin-bottom: 5vw; display: flex; display:-webkit-flex; align-items: center; justify-content: center;}
.btBox ul li::before {content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.4);}
.btBox ul li.bt-bg01{background: url("../img/bt-intern.jpg") no-repeat 0 0; background-size: cover;}
.btBox ul li.bt-bg02{background: url("../img/bt-graduate.jpg") no-repeat center center; background-size: cover;}
.btBox ul li.bt-bg03{background: url("../img/bt-career.jpg") no-repeat center center; background-size: cover;}
.btBox ul li img{display: none;}
.btBox ul li p{margin-top: 0; font-size: 4.2vw; z-index: 10; color: white; text-align: center;}
.btBox ul li p::before {display: none;}
.btBox ul li p::after{display: none;}
.btBox ul li p span{font-size: 3.3vw;}

footer span{font-size: 1.4rem; line-height: 1.825vw;}
	
/* corp bottom */
#corporateBtn {right: 3.5vw; width: 23vw; height: 6vw; top: 3.5vw; font-size: 3.2vw;}	
	
@media (orientation: landscape) {/* スマホ横 */
header{height: 43.3vw;}
header h2{top: 15.3vw; font-size: 5.085vw;}
}

}