/**************************************************
 responsive
**************************************************/
@media screen and (max-width: 767px){
	html{
		font-size: 62.5%;
		font-size: 10px;
	}

body{}

/**************************************************
 common
**************************************************/
	p,ol,table,ol,dl{
		padding: 1.6rem 0 0 0;
		font-size: 1.6rem;
		font-weight: normal;
	}
	
	.pc{display: none;}
	.smp{display: block;}

	.mainInner,
	.infoInner,
	.contentInner{width: 100%;}

	h1{
		font-size: 1.2rem;}
	
	h1 img{
		width: 17rem;
		margin-inline-end: 0.8rem;
	}

	.re{flex-direction: column-reverse;}


	.wrapper{position: relative;}




/**************************************************
 header
**************************************************/
header{height: 6.4rem;}

.headerInner{
	padding-inline: 2.4rem;
	padding-block-start:1.4rem;
	align-items: center;
	height: 100%;
}

h1 img{width: 14.9rem;}


/**************************************************
 globalNavi
**************************************************/

	#globalNavi{
		display: block;
		position: fixed;
		top: 0;
		height: 100%;
		width: 100%;
		right: 0;
		background: linear-gradient(#fff,#AAD9F2);
		background-size: cover;
		z-index: 9990;
		opacity: 0;
		right: 0;
		visibility: hidden;
		transition: .3s ease-in-out;
		margin-block-start: 0;
		padding-inline: 1.6rem;
	}


	#globalNavi.active{
		opacity: 1;
		visibility: visible;
		right: 0;
		transition-delay: 0s;
	}

	#globalNavi.show{transition-delay: 0s;}

	#globalNavi ul{
		padding-block-start: 0;
		padding-inline: 0;
		align-content: center;
		height: 100%;
		justify-content: center;
		width:100%;
		text-align: center;
	}

	#globalNavi ul li{
		margin-inline-end: 0rem;
		display: block;
		width: 100%;
		margin-block-end: 2.4rem;
	}

	#globalNavi ul li:nth-of-type(5),
	#globalNavi ul li:nth-of-type(6){display: block;}

	#globalNavi ul li:nth-of-type(5) a{

	}

	#globalNavi ul li:nth-of-type(5) a{
		color: #fff;
		background: transparent;
		display: flex;
		align-items: center;
		padding-block: 1.2rem;
		border-radius: 50px;
		position: relative;
		z-index: 2;
		overflow: hidden;
		font-size: 1.5rem;
		justify-content: center;
	}

	#globalNavi ul li:nth-of-type(5) a img{margin-inline-start: 0.8rem;}

	#globalNavi ul li:nth-of-type(5) a::before, #globalNavi ul li:nth-of-type(5) a::after {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	#globalNavi ul li:nth-of-type(5) a::before{
		transition: .3s;
		z-index: -1;
		background: var(--gradient2-color);
	}

	#globalNavi ul li:nth-of-type(5) a::after {
		z-index: -2;
		background: var(--gradient2-hover-color);
		transform: scale(1, 1);
	}

	#globalNavi ul li a{font-size: 1.6rem;}

	#globalNavi ul li:nth-of-type(6) a{
		font-size: 1.5rem;
		width: 24.2rem;
		background-color: #fff;
		padding-block: 0.8rem;
		padding-inline: 1.6rem;
		border:0.2rem solid var(--text-color);
		border-radius: 26px;
		display: flex;
		align-items: center;
		text-align: center;
		z-index: 2;
		font-family: var(--zen);
		margin-inline: auto;
		justify-content: center;
	}

	#globalNavi ul li:nth-of-type(6) a svg{
		margin-inline-start: 0.4rem;
		width: 1.4rem;
		height: 1.4rem;
	}

/**************************************************
 menu
**************************************************/
	#menu{
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 1.6rem;
		right: 1.6rem;
		width: 4.2rem;
		height: 4.2rem;
		text-align: center;
		z-index: 9998;
		background-color: var(--main-color);
		border: 0.1rem solid var(--main-color);
		transition: .3s;
		opacity: 1;
		border-radius: 50%;
		visibility: visible;
		cursor: pointer;
		pointer-events: auto;
	}

	#menu.active{background-color: #fff;}

	#menu.close{
		opacity: 0;
		visibility: hidden;
		transition: .4s ease-in-out;
		pointer-events: none;
	}

.menu-btn,
.menu-btn span {
	display: inline-block;
	transition: all .8s;
	box-sizing: border-box;
}

	.menu-btn {
		position: relative;
		width: 1.8rem;
		height: 1.2rem;
		background: none;
		border: none;
		appearance: none;
		cursor: pointer;
	}

	.menu-btn span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  border-radius: 4px;
}
.menu-btn span:nth-of-type(1) {top: -2px;}
.menu-btn span:nth-of-type(2) {bottom: 5px;}
.menu-btn span:nth-of-type(3) {top: 12px;}

.menu-btn span:nth-of-type(2)::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background-color: #fff;
  border-radius: 4px;
  transition: all .4s;
}

.menu-btn.active span,.menu-btn.active span:nth-of-type(2)::after{background-color: var(--main-color);}

.menu-btn.active span:nth-of-type(1) {transform: translate(50%) scale(0);}
.menu-btn.active span:nth-of-type(2) {transform: rotate(45deg);}
.menu-btn.active span:nth-of-type(2)::after {transform: rotate(90deg);}
.menu-btn.active span:nth-of-type(3) {transform: translate(-50%) scale(0);}

/**************************************************
 mainVisual
**************************************************/
	.mainVisual{
		height:68rem;
		padding-block-start: 6.4rem;
	}

	.mainVisual::before{
		height: 45.4rem;
		background: url(../img/mv/mv_smp.png)no-repeat center center;
		background-size: cover;
	}

	.mainVisual h2{
		width: calc(100% - 3.2rem);
		margin-block-start: 1.6rem;
	}

	.mv_link01 a{
		font-size: 1.5rem;
		bottom: 3.2rem;
		left: 1.6rem;
	}

	.mv_link02{
		width: 100%;
		bottom: 0;
		right: 0;
		height: auto;
		z-index: 99;
	}


/**************************************************
 copyHanger
**************************************************/
	.copyHanger{margin-block-start: 4rem;overflow-x: hidden;}

	.copyHanger h2{font-size: 2rem;}

	.copyHanger h2::before{
		width: 140%;
		height: 9.2rem;
		background: url(../img/copy/bg.svg)no-repeat center center;
		background-size: 100%;
		position: absolute;
		left: -4.5rem;
		top: -3.2rem;
	}

	.copyHanger p{
		padding-block-start: 1.6rem;
		font-size: 1.6rem;
		padding-inline: 1.6rem;
		text-align: left;
	}

	.copyHanger .contentInner img{
		padding-inline: 1.6rem;
	}

/**************************************************
 welcomeHanger
**************************************************/
	.welcomeHanger{margin-block: 8rem;}

	.welcomeHanger .contentInner{padding-inline: 1.6rem;}

	.welcomeHanger h2 > img{width: 24rem;}

	.welcomeHanger h2 span{font-size: 2rem;}

	.welcomeHanger .contentInner > p{}

	.wel_item{margin-block-start: 4rem;}

	.welcomeHanger .contentInner > .wel_item:first-of-type{margin-block-start: 2.4rem;}

	.wel_item_cont.wel_pc{display: none;}
	.wel_item_cont.wel_smp{display: block;}

	.wel_first .wel_item_cont{width: 100%;}

	.wel_first .wel_item_cont + .wel_item_cont{margin-block-start: 4rem;}
	
	.wel_item_cont > a::before{
		width: 4rem;
		height: 4rem;
	}

	.wel_item_cont > a::after{
		width: 3.3rem;
		height: 2.9rem;
		top: -1.6rem;
		left: 0.8rem;
	}


	.wel_second .wel_item_cont:first-of-type > a::after{
		background: url(../img/welcome/01.svg)no-repeat center center;
		background-size: 100%;
	}
	
	.wel_second .wel_item_cont:last-of-type{margin-block-start: 4rem;}

	.wel_item_cont h3{
		font-size: 1.5rem;
		margin-block-start: 1.6rem;
	}

	.wel_item_cont p{
		font-size: 1.5rem;
		padding-block-start: 1.2rem;
	}

	.wel_item_link{
		width: 100%;
		margin-block-start: 1.2rem;
		margin-inline: auto;
	}

	.wel_item_link a{
		padding-block: 1.2rem;
		font-size: 1.4rem;
	}

.wel_item_link a img{margin-inline-start: 0.8rem;}

.wel_item_link a::before, .wel_item_link a::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.wel_item_link a::before{
    transition: .3s;
    z-index: -1;
    background: var(--gradient-color);
}
.wel_item_link a::after {
    z-index: -2;
    background: var(--gradient-hover-color);
    transform: scale(1, 1);
}

.wel_item_link a:hover::before {
    opacity: 0;
}



/**************************************************
 courseHanger
**************************************************/
	.courseHanger{padding-block: 8rem;}

	.courseHanger .contentInner{padding-inline: 1.6rem;}

	.courseHanger h2 > img{width: 19.6rem;}

	.courseHanger h2 span{font-size: 2rem}

	.courseHanger .course_item{margin-block-start: 4rem;}

	.courseHanger .course_item h3{font-size: 2rem;}

	.courseHanger .course_item ul{align-items: flex-start;}

	.courseHanger .course_item ul li{
		width: calc(100% / 2 - 1.2rem);
		font-size: 1.5rem;
		margin-inline-end: 2.4rem;
		margin-block-start: 4rem;
	}

	.courseHanger .course_item ul li:nth-of-type(2n){margin-inline-end: 0;}
	.courseHanger .course_item ul li:first-of-type,
	.courseHanger .course_item ul li:nth-of-type(2){margin-block-start: 0;}

	.courseHanger .course_item ul li::before{
		height: 0.4rem;
	}


	.courseHanger .course_item ul li span{
		padding-block: 1.2rem 2rem;
		display: block;
		line-height: 1.3;
	}

	.course_item ul li > a::before{
		width: 4rem;
		height: 4rem;
	}


/**************************************************
 supportHanger
**************************************************/
	.supportHanger{padding-block: 8rem;}

	.supportHanger .contentInner{padding-inline: 1.6rem;}

	.supportHanger h2 > img{width: 22.9rem;}

	.supportHanger h2 span{font-size: 2rem;}

	.supportHanger .contentInner > p{font-size: 1.5rem;}


/**************************************************
 box_item
**************************************************/
	.box_item{margin-block-start: 4rem;}

	.box_item h3 span{
		font-size: 2.2rem;
	}

	.box_item ul {
		justify-content: space-between;
		gap: 3rem 0;
	}

	.box_item ul li:not(.btn-wrap){
		width: calc(100% / 2 - 1.2rem);
		font-size: 1.5rem;
		line-height: 1.3;
	}

	.box_item ul li span{padding-block-start: 1.6rem;}

	.box_item ul li > p {font-size: 1.5rem;}

	.box_item ul li > a::before{
		width: 4rem;
		height: 4rem;
	}

	.box_item_link{
		width: 100%;
		margin-block-start: 1.6rem;
	}

	.box_item_link a{
		padding-block: 1.2rem;
		font-size: 1.4rem;
	}

	.box_item_link a img{
		width: 1.2rem;
		height: 1.2rem;
		margin-inline-start: 0.4rem;
	}

	.box_item_link a::before, .box_item_link a::after {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.btn-wrap {
		width: 100%;
		gap: 2rem;
	}

	.btn-wrap .box_item_link {
		margin: 0;
	}

	
/**************************************************
campusHanger
**************************************************/
	.campusHanger{padding-block: 8rem;}

	.campusHanger .contentInner{padding-inline: 1.6rem;}

	.campusHanger h2 > img{width: 32.7rem;}

	.campusHanger h2 span{font-size: 2rem;}

	.campusHanger .contentInner > p{font-size: 1.5rem;}


/**************************************************
questionHanger
**************************************************/
	.questionHanger{padding-block: 8rem;}

	.questionHanger .contentInner{padding-inline: 1.6rem;}

	.questionHanger h2 > img{width: 35.8rem;}

	.questionHanger h2 span{font-size: 1.5rem;}

	.questionHanger .contentInner picture img{margin-block-start: 2.4rem;}

	.qu_link{
		width: 100%;
		margin-block-start:2.4rem;
	}

	.qu_link a{
		padding-block: 1.2rem;
		font-size: 1.5rem;
	}

	.qu_link a img{
		margin-inline-start: 0.4rem;
		width: 1.6rem;
		height: 1.6rem;
	}


/**************************************************
bannerHanger
**************************************************/
	.bannerHanger{padding-block: 8rem 2.4rem;}

	.bannerHanger .contentInner{padding-inline: 1.6rem;}

	.bannerHanger h2 > img{width: 29.6rem;}

	.bannerHanger h2 span{font-size: 1.8rem;}


	.bannerHanger ul{padding: 0;margin-block-start: 2.4rem;}

	.bannerHanger ul li{width: 100%;}

	.bannerHanger ul li:last-of-type{margin-block-start: 2.4rem;}

	.access{
		margin-block-start: 8rem;
		text-align: center;
		font-size: 1.4rem;
	}


/**************************************************
footer
**************************************************/
footer{
	background-color: #000000;
}

footer p{
	color: #fff;
	padding-block: 2.4rem 6.8rem;
	font-size: 1.2rem;
	text-align: center;
}

.bnr-wrap{
	flex-wrap: wrap;
}



}