@charset "utf-8";

#sec1 {
}
.mainv {
    position:  relative;
}
.mainv:before {
	content: '';
	display: block;
	padding-top: 28.125%;
}
.mainv .mainv_img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.mainv .mainv_img img {}
.mainv .mainv_t {
    position:  absolute;
    top: 58.33%;
    left:  0;
    right:  0;
    margin:  auto;
    text-align:  center;
    font-size:  40px;
    font-weight:  600;
    line-height:  1;
    letter-spacing:  0.15em;
    color:  #fff;
}
.mainv .mainv_t span {
    display:  block;
}
.mainv .mainv_t img {}

#sec2 {
	padding: 130px 0 110px;
	background: url(../img/study/bg01.png) center top no-repeat;
	background-size: cover;
	background-color: #f5f5f5;
}
#sec2 .sec_inner {}
#sec2 .sec2_01 {
    margin-bottom: 162px;
}
#sec2 .sec2_02 {}

.link_box {}
.link_box h3 {
    text-align:  center;
    margin-bottom: 60px;
}
.link_box h3 img {}
.link_box .flex01 {}
.link_box .flex01 .flex01_l {
    width:  62.5%;
}
.link_box .flex01 .flex01_l .link01 {
    height: 306px;
}
.link_box .flex01 .flex01_l .link01 a {
    display:  block;
    width:  100%;
    height:  100%;
    color:  #fff;
    text-align:  center;
    padding-top: 121px;
    background: url(../common/img/arrow01.png) right 22px center no-repeat;
    background-size: 12px;
}
.link_box .flex01 .flex01_l .link01 a:hover {
		opacity: 1;
		background-position: right 12px center;
		background-color: rgba(0,0,0,0.3);
}
.link_box .flex01 .flex01_l .link01 a b {
    display:  block;
    font-size:  30px;
    font-weight:  bold;
    letter-spacing: 0.2em;
    margin-bottom: 24px;
    text-shadow: 0px 0px 12px #000;
}
.link_box .flex01 .flex01_l .link01 a span {
    display: block;
    font-size:  11px;
    font-weight:  600;
    letter-spacing: 0.15em;
    text-shadow: 0px 0px 12px #000;
}
.link_box .flex01 .flex01_r {
    width:  34%;
    max-width:  408px;
}
.link_box .flex01 .flex01_l .link01.link01_bg01 {
	background: url(../img/study/img01.jpg) no-repeat;
}
.link_box .flex01 .flex01_l .link01.link01_bg02 {
	background: url(../img/study/img02.jpg) no-repeat;
}
.link_box .flex01 .flex01_l .link01.link01_bg01 a {}
.link_box .flex01 .flex01_l .link01.link01_bg02 a {}

.link_box .flex01 .flex01_r .link02 {
    width:  100%;
    max-width: 408px;
    height: 140px;
}
.link_box .flex01 .flex01_r .link02 a {
    display:  block;
    width:  100%;
    height: 100%;
    background: url(../common/img/arrow01.png) right 22px center no-repeat;
    background-size: 12px;
    background-color:  #000;
    color:  #fff;
    /* padding-top: 50px; */
    position:  relative;
}
.link_box .flex01 .flex01_r .link02 a:hover {
		opacity: 1;
		background-position: right 12px center;
		background-color: rgba(0,0,0,0.8);
}
.link_box .flex01 .flex01_r .link02 a i {
    display: block;
    position:  absolute;
    top: 55px;
    left: 75px;
}
.link_box .flex01 .flex01_r .link02 a i img {}
.link_box .flex01 .flex01_r .link02 a b {
    display: block;
    /* padding-left: 116px; */
    font-size:  19px;
    font-weight:  bold;
    line-height:  1.4;
    letter-spacing:  0.2em;
    position:  absolute;
    top:  50%;
    left: 126px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.link_box .flex01 .flex01_r .link02 + .link02 {
    margin-top: 26px;
}


/*---------------------------------------------------------
	w1200
---------------------------------------------------------*/
@media screen and (max-width: 1200px) {
	.link_box .flex01 .flex01_r .link02 a i {
    	/* left:  18.38%; */
    	left: 13%;
 }
	.link_box .flex01 .flex01_r .link02 a b {
			/* left:  30.88%; */
			left: 28%;
	}
}

/*---------------------------------------------------------
	スマホ
---------------------------------------------------------*/
@media screen and (max-width: 680px) ,screen and (max-width: 737px) and (orientation: landscape) {

	#sec1 {}
	.mainv {}
	.mainv:before {}
	.mainv .mainv_img {}
	.mainv .mainv_img img {}
	.mainv .mainv_t {
		font-size: 20px;
    top: 50%;
		-webkit-transform: translateY(-50%);
    transform: translateY(-50%);
	}
	.mainv .mainv_t span {}
	.mainv .mainv_t img {}

	#sec2 {
    padding: 40px 0 40px;
    background-size: contain;
 }
	#sec2 .sec_inner {}
	#sec2 .sec2_01 {
    margin-bottom: 60px;
}
	#sec2 .sec2_02 {}
	
	.link_box {}
	.link_box h3 {
    margin-bottom: 30px;
}
	.link_box h3 img {
    max-width:  200px;
}
	.link_box .flex01 {}
	.link_box .flex01 .flex01_l {
    width:  100%;
    margin-bottom: 20px;
}
	.link_box .flex01 .flex01_l .link01 {
    height: 153px;
}
	.link_box .flex01 .flex01_l .link01 a {
    padding-top: 50px;
    background-size: 6px;
    background-position: right 10px center;
}
	.link_box .flex01 .flex01_l .link01 a:hover {
    background-position: right 4px center;
}
	.link_box .flex01 .flex01_l .link01 a b {
    font-size: 18px;
    margin-bottom: 12px;
    text-shadow: 0px 0px 6px #000;
}
	.link_box .flex01 .flex01_l .link01 a span {
    font-size: 10px;
    text-shadow: 0px 0px 6px #000;
}
	.link_box .flex01 .flex01_r {
    width: 100%;
    max-width:  100%;
    text-align:  center;
}
	.link_box .flex01 .flex01_l .link01.link01_bg01 {}
	.link_box .flex01 .flex01_l .link01.link01_bg02 {}
	.link_box .flex01 .flex01_l .link01.link01_bg01 a {}
	.link_box .flex01 .flex01_l .link01.link01_bg02 a {}
	.link_box .flex01 .flex01_r .link02 {
    width: 49%;
    height: 70px;
    display:  inline-block;
}
	.link_box .flex01 .flex01_r .link02 a {
    background-size: 6px;
    background-position: right 10px center;
}
	.link_box .flex01 .flex01_r .link02 a:hover {
    background-position: right 4px center;
}
	.link_box .flex01 .flex01_r .link02 a i {
    width:  15px;
    height: 15px;
    top: 10px;
    left: 0;
    right:  0;
    margin:  auto;
}
	.link_box .flex01 .flex01_r .link02 a i img {}
	.link_box .flex01 .flex01_r .link02 a b {
    font-size: 10px;
    left: 0;
    right:  0;
    top: 60%;
}
	.link_box .flex01 .flex01_r .link02 + .link02 {
    margin-top:  0;
}
	.link_box .flex01 .flex01_r .link02.link02_02 {}
	.link_box .flex01 .flex01_r .link02.link02_02 a {}
	.link_box .flex01 .flex01_r .link02.link02_02 a i {
    top: 5px;
}
	.link_box .flex01 .flex01_r .link02.link02_02 a i img {}
	.link_box .flex01 .flex01_r .link02.link02_02 a b {
    top: 64%;
}
	
	
}