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

	Compiled from _css/gla_journey/gla_journey.css

---------------------------------------------------------------------- */
/* # =================================================================
   # テンプレート調整
   # ================================================================= */
.l-breadcrumbs {
    margin-bottom: 0;
}

/* # =================================================================
   # コンテンツ（共通）
   # ================================================================= */
/* inview（共通） */
.gla-inview {	
    transition: 0.8s;
    opacity: 0;
    transform: translate(0,20px);
    -webkit-transform: translate(0,20px);
}	
.gla-inview.mv {
    opacity: 1.0;
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
}

/* # =================================================================
   # メインビジュアル（student-mainvisual）
   # ================================================================= */
.student-mainvisual{
	background: url("/kuis/assets/img/gla_journey/gla_student/student_mainvisual_bg.jpg") repeat center top;	
	background-size: 100%;
	min-height: 50vw;
}
.student-mainvisual .student-mainvisual-inner{
	width: 94%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 10% 0;
}
.student-mainvisual .student-mainvisual-title{
	width: 84%;
	max-width: 675px;
	margin: 0 auto;
	padding: 0 0 5%;
}		
.student-mainvisual .student-mainvisual-lead{
	width: 94%;
	max-width: 980px;
	margin: 0 auto;
	padding: 15px 0.5%;
	background: #fff;
	border-top: solid 2px #1d213f;
	border-bottom: solid 2px #1d213f;
	box-sizing: border-box;
	position: relative;
	font-family: "YakuHanMPs", "YuMincho", "Yu Mincho", "游明朝体", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Sawarabi Mincho", sans-serif;
	font-size: 14px;
}
.student-mainvisual .student-mainvisual-lead::before{
	content: "";
	display: block;
	position: absolute;
	top:1px;
	left:0;
	width:100%;
	height: 1px;
	background: #1d213f;
}	
.student-mainvisual .student-mainvisual-lead::after{
	content: "";
	display: block;
	position: absolute;
	bottom:1px;
	left:0;
	width:100%;
	height: 1px;
	background: #1d213f;
}
@media only screen and (min-width: 1024px), print{
	.student-mainvisual{
		min-height: 1020px;	
		background-size:auto;
	}
	.student-mainvisual .student-mainvisual-inner{
		padding: 140px 0;
	}	
	.student-mainvisual .student-mainvisual-title{
		padding: 0 0 95px;
	}
	.student-mainvisual .student-mainvisual-lead{
		padding: 35px 0.5%;
		font-size: 16px;
	}	
}

/* # =================================================================
   # コンテンツ（journey-contents）
   # ================================================================= */
.student-contents{
	position: relative;
	text-align: center;
	background: #e8ecf2;
}
.student-contents .student-contents-inner{
	width: 94%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 80px 0 100px;
}
@media only screen and (min-width: 1024px), print{
	.student-contents .student-contents-inner{
		padding: 130px 0;
	}	
}
	
/* student-keyword */
.student-contents .student-keyword{
	width: 100%;
	max-width: 790px;
	border: solid 5px #1d213f;
	background: #fff;
	margin: 0 auto;
	position: relative;
}
.student-contents .student-keyword .student-keyword-ttl	{
	position: absolute;
	top:-25px;
	left:0;
	right:0;
	text-align: center;	
}
.student-contents .student-keyword .student-keyword-ttl span{
	background: #1d213f;
	color: #fff;
    display: inline-block;
	align-items: center;
	min-width: 300px;
	line-height: 40px;
	margin: 0 auto;
	padding: 0 3%;	
	border-radius: 10px;
	font-family: "YakuHanMPs", "YuMincho", "Yu Mincho", "游明朝体", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Sawarabi Mincho", sans-serif;
	font-size: 20px;
	position: relative;
	z-index: 1;
}
.student-contents .student-keyword .student-keyword-ttl span::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 4px;
	left: 4px;
	border-radius: 10px;
	background: url("/kuis/assets/img/gla_journey/gla_student/student_keyword_ttl_bg.png") repeat left top;
	z-index: -1;
}
.student-contents .student-keyword > ul{
	padding: 35px 5% 20px;
	display: -webkit-flex;
    display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}	
.student-contents .student-keyword > ul li{
	width: 18%;
	padding: 0 0 15px;
}	
.student-contents .student-keyword > ul li span{
	width: 100%;
	border-radius: 8px;
	background: #e8ecf2;
	display: inline-block;
	padding: 3px 2%;
	cursor: pointer;
	-webkit-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
.student-contents .student-keyword > ul li span:hover{
	opacity: 0.5;
}	
.student-contents .student-keyword > ul li span.active{
	background: #1d213f;
	color: #fff;
}	
.student-contents .student-keyword > ul li.student-keyword_all{
	width: 100%;
	padding-bottom: 0;
	padding-top: 5px;
}	
.student-contents .student-keyword > ul li.student-keyword_all span{
	width: 50%;
}		
@media only screen and (min-width: 1024px), print{
	.student-contents .student-keyword .student-keyword-ttl span{
		min-width: 335px;
		line-height: 50px;
		font-size: 26px;
	}
	.student-contents .student-keyword > ul{
		padding: 45px 5% 20px;
	}	
}
@media screen and (max-width: 800px) {
	.student-contents .student-keyword > ul li{
		width: 48%;
		padding: 0 0 15px;
	}
}
	
/* student-talks */
.student-contents .student-talks{
	padding: 50px 0 0;
}
.student-contents .student-talks .student-talkBox {
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: end;
	align-items: flex-end;
	padding-bottom: 50px;
}	
.student-contents .student-talks .student-talkBox:nth-child(even) {
	flex-direction: row-reverse;
}
.student-contents .student-talks .student-talkBox:last-child {
	padding-bottom: 0;
}	
.student-contents .student-talks .student-talkBox .student-talkBox-icon {
	width: 80px;
	height: 80px;
	text-align: center;
	background: #e01983;
	border-radius: 50%;
	margin-bottom: 2px;
}	
.student-contents .student-talks .student-talkBox.talkBox-pink .student-talkBox-icon{ /* ピンク色 */
	background: #e01983;
}
.student-contents .student-talks .student-talkBox.talkBox-org .student-talkBox-icon{ /* オレンジ色 */
	background: #f99d24;
}
.student-contents .student-talks .student-talkBox.talkBox-green .student-talkBox-icon{ /* 緑色 */
	background: #2c9a47;
}
.student-contents .student-talks .student-talkBox.talkBox-blue .student-talkBox-icon{ /* 水色 */
	background: #00add8;
}
.student-contents .student-talks .student-talkBox.talkBox-yellow .student-talkBox-icon{ /* 黄色 */
	background: #fdb713;
}
.student-contents .student-talks .student-talkBox.talkBox-red .student-talkBox-icon{ /* 赤色 */
	background: #ea1c2c;
}
.student-contents .student-talks .student-talkBox.talkBox-navy .student-talkBox-icon{ /* 紺色 */
	background: #00548a;
}	
.student-contents .student-talks .student-talkBox:nth-child(odd) .student-talkBox-icon {
  margin-right: 25px;
}
.student-contents .student-talks .student-talkBox:nth-child(even) .student-talkBox-icon {
  margin-left: 25px;
}
.student-contents .student-talks .student-talkBox .student-talkBox-baloon {
	position: relative;
	padding: 15px 3%;
	border-radius: 10px;
	background: #fff;
	font-size: 14px;
	opacity: 0;
	-webkit-transform: translateY(20%);
	-ms-transform: translateY(20%);
	transform: translateY(20%);
	-webkit-box-shadow: 5px 5px 12px 1px rgba(0,0,0,0.2);
	box-shadow: 5px 5px 12px 1px rgba(0,0,0,0.2);
	line-height: 1.7;
	width: 80%;
	max-width: 700px;
	text-align: left;
	box-sizing: border-box;
	flex: 1;
}
.student-contents .student-talks .student-talkBox .student-talkBox-baloon::after {
	content: '';
	display: block;
	bottom: 15px;
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
}
.student-contents .student-talks .student-talkBox .student-talkBox-baloon.anime {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: all 0.3s cubic-bezier(0.1, 0.5, 0.35, 1.35) 0.5s;
  transition: all 0.3s cubic-bezier(0.1, 0.5, 0.35, 1.35) 0.5s;
}
.student-contents .student-talks .student-talkBox:nth-child(odd) .student-talkBox-baloon::after {
  position: absolute;
  left: -25px;
  background-image: url(/kuis/assets/img/gla_journey/gla_student/student_talks_baloon_left_sp.png);
}
.student-contents .student-talks .student-talkBox:nth-child(even) .student-talkBox-baloon::after {
  position: absolute;
  right: -25px;
  background-image: url(/kuis/assets/img/gla_journey/gla_student/student_talks_baloon_right_sp.png);
}
.student-contents .student-talks .student-talkBox .student-talkBox-name{
	font-family: "YakuHanMPs", "YuMincho", "Yu Mincho", "游明朝体", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Sawarabi Mincho", sans-serif;
	font-size: 24px;
	line-height: 1.4;
}
.student-contents .student-talks .student-talkBox .student-talkBox-name span{
	font-size: 14px;
}
.student-contents .student-talks .student-talkBox ul.student-talkBox-keyword{
	color:#fff;
	font-size: 13px;
	display: -webkit-flex;
    display: flex;
	flex-wrap: wrap;
	padding: 3px 5px;
}
.student-contents .student-talks .student-talkBox ul.student-talkBox-keyword li{
	margin:0 0.5em;
}
.student-contents .student-talks .student-talkBox.talkBox-pink ul.student-talkBox-keyword{ /* ピンク色 */
	background: #e01983;
}
.student-contents .student-talks .student-talkBox.talkBox-org ul.student-talkBox-keyword{ /* オレンジ色 */
	background: #f99d24;
}
.student-contents .student-talks .student-talkBox.talkBox-green ul.student-talkBox-keyword{ /* 緑色 */
	background: #2c9a47;
}
.student-contents .student-talks .student-talkBox.talkBox-blue ul.student-talkBox-keyword{ /* 水色 */
	background: #00add8;
}
.student-contents .student-talks .student-talkBox.talkBox-yellow ul.student-talkBox-keyword{ /* 黄色 */
	background: #fdb713;
}
.student-contents .student-talks .student-talkBox.talkBox-red ul.student-talkBox-keyword{ /* 赤色 */
	background: #ea1c2c;
}
.student-contents .student-talks .student-talkBox.talkBox-navy ul.student-talkBox-keyword{ /* 紺色 */
	background: #00548a;
}
.student-contents .student-talks .student-talkBox .student-talkBox-ttl{
	font-family: "YakuHanMPs", "YuMincho", "Yu Mincho", "游明朝体", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Sawarabi Mincho", sans-serif;
	font-size: 24px;
	line-height: 1.4;
	font-weight: bold;
	margin: 15px 0 5px;
}
.student-contents .student-talks .student-talkBox.talkBox-pink .student-talkBox-ttl{ /* ピンク色 */
	color: #e01983;
}
.student-contents .student-talks .student-talkBox.talkBox-org .student-talkBox-ttl{ /* オレンジ色 */
	color: #f99d24;
}
.student-contents .student-talks .student-talkBox.talkBox-green .student-talkBox-ttl{ /* 緑色 */
	color: #2c9a47;
}
.student-contents .student-talks .student-talkBox.talkBox-blue .student-talkBox-ttl{ /* 水色 */
	color: #00add8;
}
.student-contents .student-talks .student-talkBox.talkBox-yellow .student-talkBox-ttl{ /* 黄色 */
	color: #fdb713;
}
.student-contents .student-talks .student-talkBox.talkBox-red .student-talkBox-ttl{ /* 赤色 */
	color: #ea1c2c;
}
.student-contents .student-talks .student-talkBox.talkBox-navy .student-talkBox-ttl{ /* 紺色 */
	color: #00548a;
}
.student-contents .student-talks .student-talkBox .student-talkBox-txt{
}
@media only screen and (min-width: 1024px), print{
	.student-contents .student-talks{
		padding: 80px 0 0;
	}
	.student-contents .student-talks .student-talkBox {	
		padding-bottom: 70px;
	}
	.student-contents .student-talks .student-talkBox .student-talkBox-icon {
		width: 120px;
		height: 120px;
		margin-bottom: 5px;
	}
	.student-contents .student-talks .student-talkBox:nth-child(odd) .student-talkBox-icon {
	  margin-right: 45px;
	}
	.student-contents .student-talks .student-talkBox:nth-child(even) .student-talkBox-icon {
	  margin-left: 45px;
	}
	.student-contents .student-talks .student-talkBox .student-talkBox-baloon {
		padding: 40px 50px;
		border-radius: 15px;
		width: 80%;
		max-width: 630px;
		font-size: 16px;
	}
	.student-contents .student-talks .student-talkBox .student-talkBox-baloon::after {
		bottom: 20px;
		width: 40px;
		height: 44px;
	}
	.student-contents .student-talks .student-talkBox:nth-child(odd) .student-talkBox-baloon::after {
	  left: -40px;
	  background-image: url(/kuis/assets/img/gla_journey/gla_student/student_talks_baloon_left.png);
	}
	.student-contents .student-talks .student-talkBox:nth-child(even) .student-talkBox-baloon::after {
	  right: -40px;
	  background-image: url(/kuis/assets/img/gla_journey/gla_student/student_talks_baloon_right.png);
	}
	.student-contents .student-talks .student-talkBox .student-talkBox-name{
		font-size: 30px;
	}
	.student-contents .student-talks .student-talkBox .student-talkBox-name span{
		font-size: 18px;
	}
	.student-contents .student-talks .student-talkBox .student-talkBox-ttl{
		font-size: 28px;
		margin: 20px 0 8px;
	}
}
@media screen and (max-width: 800px) {
	.student-contents .student-talks .student-talkBox .student-talkBox-icon {
		width: 50px;
		height: 50px;
	}
	.student-contents .student-talks .student-talkBox:nth-child(odd) .student-talkBox-icon {
		margin-right: 20px;
	}
	.student-contents .student-talks .student-talkBox:nth-child(even) .student-talkBox-icon {
		margin-left: 20px;
	}
	.student-contents .student-talks .student-talkBox .student-talkBox-baloon {    
		-webkit-box-shadow: 3px 3px 8px 0px rgb(0 0 0 / 20%);
		box-shadow: 3px 3px 8px 0px rgb(0 0 0 / 20%);
	}
	.student-contents .student-talks .student-talkBox:nth-child(odd) .student-talkBox-baloon::after {
		left: -20px;
		background-size: 20px;
		background-position: left top;
	}
	.student-contents .student-talks .student-talkBox:nth-child(even) .student-talkBox-baloon::after {
		right: -20px;
		background-size: 20px;
		background-position: right top;
	}
	
	
	.student-contents .student-talks .student-talkBox .student-talkBox-ttl{	
		font-size: 20px;
	}
}