@charset "utf-8";
/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
/* clearfix */	
.clearfix:after {content: "";display: block;clear: both;}
/* flex */	
.flex,.flexA,.flexB,.flexC {display: flex;flex-wrap: wrap;}
.flexA {justify-content: space-around;}
.flexB {justify-content: space-between;}
.flexC {justify-content: center;}
/*------------------------------------------------------------
	mainBox
------------------------------------------------------------*/
.mainBox {
    margin: 0 auto;
    width: 1000px;
}
@media all and (max-width: 896px) {
    .mainBox {
        width: auto !important; 
    }
}


/*------------------------------------------------------------
	headLine01
------------------------------------------------------------*/
.headLine01 {
    color: #333;
    margin-bottom: 13px;
    font-size: 1.2rem;
    text-align: center;
    letter-spacing: 0.06em;
}
.headLine01 span {
    display: block;
    font-size: 7.1rem;
    line-height: 1.0;
    letter-spacing: 0.02em;
    font-family: 'gillB';
}
@media all and (max-width: 896px) {
    .headLine01 {
        margin-bottom: 27px;
        font-size: 1.45rem;
        letter-spacing: 0.38em;
    }
    .headLine01 span {
        margin-bottom: 5px;
        font-size: 5rem;
        letter-spacing: 0.075em;
    }
}

/*------------------------------------------------------------
	comLink
------------------------------------------------------------*/
.comLink {
    margin: 0 auto;
    width: 300px;
}
.comLink a {
    padding: 15px 10px 13px;
    font-size: 1.6rem;
    color: white;
    border-radius: 50px;
    text-align: center;
    font-weight: bold;
    display: block;
    background: url("../../img/common/arrow.png") no-repeat right 17px center #333333;
    background-size: 75px auto;
    letter-spacing: 0.19em;
}
.comLink a span {
    margin-bottom: 2px;
    display: block;
    font-size: 1rem;
    letter-spacing: 0.21em;
}
.comLink a:hover {
    opacity: 0.7;
}
.comLink02 {
    margin: 0;
    width: 300px;
}
.comLink02 a {
    background-color: #333333;
    color: #fff;
    background-image: url("../../img/common/icon04.png");
    background-size: 64px auto;
}
@media all and (max-width: 896px) {
    .comLink {
        width: 285px;
    }
    .comLink a {
        padding: 10px 10px 8px;
        font-size: 1.8rem;
        letter-spacing: 0.25em;
        background-size: 67px auto;
    }
    .comLink a span {
        margin-bottom: 0;
        font-size: 1.1rem;
        letter-spacing: 0.3em;
    }
    .comLink02 {
        margin: 0 auto;
    }
    .comLink02 a {
        font-size: 1.75rem;
        letter-spacing: 0.1em;
        background-size: 58px auto;
    }
}

/*------------------------------------------------------------
	topBox
------------------------------------------------------------*/
.topBox {
    overflow: hidden;
    position: relative;
}
.topBox:after {
	width: calc(50% + 376px);  
	height: 402px;
    background: url("../../img/lecture/bg03.jpg") no-repeat;
    background-size: cover;
	position: absolute;  
	top: 0;
	right: 0;  
	content: ""; 
    z-index: -1;
}
.topBox .subBox {
    margin: 0 auto;
    width: 1000px;
    height: 460px;
    position: relative;
    display: flex;
    align-items: center;
}
.topBox .subBox .photoBox {
    position: absolute;
    bottom: -80px;
    right: -29px;
    width: 76%;
}
.topBox .subBox .photoBox img {
    width: 100%;
}
.topBox h1 {
    font-size: 2.05rem;
    letter-spacing: 0.21em;
}
.topBox h1 span {
    display: block;
    font-size: 7.1rem;
    letter-spacing: 0;
    line-height: 1.3;
}

@media all and (max-width: 896px) {
    .topBox {
        box-sizing: border-box;
        padding: 41px 0;
    }
    .topBox .subBox {
        height: 271px;
        width: auto !important;
        margin: 0 20px;
    }
    .topBox h1 {
        margin-top: -32px;
        font-size: 1.4rem;
        position: relative;
        z-index: 10;
    }
    .topBox h1 span {
        letter-spacing: -1px;
        font-size: 3.95rem;
    }
    .topBox .subBox .photoBox {
        width: 375px;
        bottom: 2px;
        right: -20px;
    }
    .topBox::after {
        top: 7.7vw;
        height: auto;
        width: calc(50% + 36.27vw);
        bottom: 43px;
    }

}

.fadeIn {
	opacity: 0;
	transform: translate(0,50px);
	-webkit-transition: all ease-in-out 0.8s;
    transition: all ease-in-out 0.8s;
}

.fadeIn.on {
	opacity: 1;
	transform: translate(0, 0);
}

.fadeInRight {
    opacity: 0;
	transform: translate(40px,0);
	-webkit-transition: all ease-in-out 0.8s;
	transition: all ease-in-out 0.8s;
}

.fadeInRight.on {
    opacity: 1;
	transform: translate(0,0);
}

.fadeInDown {
    opacity: 0;
	transform: translate(0,-200px);
	-webkit-transition: all ease-in-out 0.8s;
	transition: all ease-in-out 0.8s;
}

.fadeInDown.on {
    opacity: 1;
	transform: translate(0,0);
}
.dely02 {
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}
.dely03 {
	-webkit-transition-delay: 0.8s;
	transition-delay: 0.8s;
}
.dely04 {
	-webkit-transition-delay: 1.2s;
	transition-delay: 1.2s;
}

@media all and (max-width: 374px) {
    .headLine01 span {
        font-size: 4rem;
    }
    .comLink a {
        background-size: 50px auto !important;
    }
}