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

.int_flex{
	display: flex;
	gap: 10rem;
	justify-content: space-between;
	max-width: 100%;
	align-items: stretch;
	margin: 150px 0;
}

.int {
	display: inline-block;
	position: relative;
    outline: none;
	font-weight: bold;
	background: #FFF;
	box-shadow: rgba(149,157,165,.15) 0px 8px 24px;
	padding: 10px;
    transition: all .2s linear;
}

.int img{
	width: 100%;
	height: auto;
	transform: scale(1);
	transition: .3s ease-in-out;
}

.int span{
    font-size: 1.2rem;
    color: var(--sub-color);
	padding-left: 10px;
}

.int em{
	font-size: 1.2rem;
	font-weight: normal;
}



.int:hover{
	border: 2px solid var(--sub-color);
	border-image: linear-gradient(90deg, rgba(100, 124, 189, 1), rgba(0, 185, 239, 1));
	border-image-slice: 1;
}

.int::before{
	content: '';
	position: absolute;
    bottom:10px;
    left:50%;
    width: 45%;
    height: 2px;
	background: linear-gradient(90deg, rgba(100, 124, 189, 1), rgba(0, 185, 239, 1));
    transition: all .3s;
}

.int::after{
	content: '';
	position: absolute;
    bottom:15px;
    right: 5%; 
    width: 15px;
    height:2px;
	background: linear-gradient(90deg, rgba(100, 124, 189, 1), rgba(0, 185, 239, 1));
    transform: rotate(35deg);
    transition: all .3s;
}

.int:hover::before{
	left: 60%;
}

.int:hover::after{
	right:-5%;
}


.int a:hover img{
  transform: scale(1.2);/*拡大の値を変更したい場合はこの数値を変更*/
}

.division{
	display: inline-block;
	font-family: var(--font-kana);
	color: #FFF;
	background: var(--sub-color);
	padding: 10px 20px 5px;
	margin: 10px 0;
}

.mask{
    display: block;
    line-height: 0;
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}


@media screen and (max-width: 768px) {
	.int_flex{
		gap: 5rem;
	}
}

@media screen and (max-width: 430px) {
	.int_flex{
		flex-wrap: wrap;
		margin: 100px 35px;
	}
}


/********質問タイトル**********/



.quesution img{
	width:100%;
	height:auto;
	margin: 50px 0 100px;
}


.quesution h2{
	display: flex;
	position: relative;
	color: var(--sub-color);
	font-size: 2rem;
	font-weight: bold;
	text-align: left;
	margin-left: 0px;
	opacity: 0;
	transform: translateX(-100px);
	transition: 1s ease;
}

.quesution h2:before{
	content: "";
	left: 0px;
	border-top: 3px solid;
	margin-right: 1em;
	margin-top: 8px;
	animation: border_anim 1s linear forwards;
}


@keyframes border_anim {
	0%{
		width: 0%;
	}
	100%{
		width: 5%;
	}
}

@media screen and (max-width: 430px) {
	
	.quesution h2:before{
		margin-top: 15px;
	}
}

/********質問回答**********/

.answer h3{
	font-size: 2rem;
	font-weight: bold;
	text-align: left;
	color: #00B7CE;
	margin: 20px 0;
}

.answer p{
	margin-bottom: 100px;
}


/********スケジュール**********/

.flex-box {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
	align-items: center;
}

.list_box{
	font-family: var(--font-kana);
	border: 2px solid var(--sub-color);
	padding: 35px 40px;
	margin-bottom: 100px;
}

.list_box>p{
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 30px;
}

.list_box dl{
	padding: 20px 0;
	border-top: 2px dotted #707070;
}
.list_box dl:last-child{
	border-bottom: 2px dotted #707070;
}
.list_box dl dt{
	font-weight: bold;
	width: 30rem;
}
.list_box.schedule dl dt.flex-box p{
	display: inline-block;
}
.list_box.schedule dl dt.flex-box p:nth-child(1){
	width: 5em;
}
.list_box.schedule dl dt.flex-box p:nth-child(2){
	flex: 1;
}
.list_box.career dl dt{
	width: 14.5em;
}
.list_box dl dd{
	flex: 1;
	font-size: 1.3rem;
}

@media screen and (max-width: 430px) {
	.flex-box {
		display: block;
	}
}