
/*====================================================
     //id #contents
====================================================*/
#contents .wrapper {
	position: relative;
	z-index: 10;
}
#contents img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	display: block;
	margin: auto;
}
#contents figure {
	text-align: center;
}
#contents .mplus {
    font-family: 'Comfortaa','mplus1p';
}
#contents .circle-outer {
	position: relative;
}
#contents .circle-outer .circleBox {
	position: absolute;
	content: '';
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
	transition-delay: .5s;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
}

@media screen and (min-width:480px) and (max-width:768px) {
}

/* ////////// PC ////////// */
@media print,
screen and (min-width: 769px) {
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
}


/*====================================================
     //id #tptitle
====================================================*/
#tptitle .h2Text {
    position: absolute;
    z-index: -10;
	top: -100%;
}
#tptitle {
}
#tptitle .circleBox {
	background: rgba(255, 221, 239, 0.8);
	z-index: -5;
}
#tptitle h2 {
	letter-spacing: -.06em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
	#tptitle {
		display: block;
	}
	#tptitle .circleBox {
		width: 90vw;
		max-width: 600px;
		height: 90vw;
		max-height: 600px;
		top: 10%;
		right: -10%;
	}
	#tptitle .h2Box {
		margin-bottom: 20px;
	}
	#tptitle .title_logo {
		margin-bottom: -1em;
	}
	#tptitle h2 {
		font-size: 5vw;
		text-align: center;
	}
	#tptitle .imgBox {
		width: 100%;
		max-width: 500px;
		margin: auto;
	}
}

@media screen and (min-width:480px) and (max-width:768px) {
}

/* ////////// PC ////////// */
@media print,
screen and (min-width: 769px) {
	#tptitle {
		align-items: stretch;
		padding: 0;
		width: 100%;
	}
	#tptitle .circleBox {
		width: 50vw;
		max-width: 600px;
		height: 50vw;
		max-height: 600px;
		top: 20%;
		left: 20%;
	}
	#tptitle .h2Box {
		padding: 30px 10px;
		width: 55%;
		text-align: center;
	}
	#tptitle h2 {
		font-size: 3.4rem;
	}
	#tptitle .imgBox {
		width: 45%;
	}	
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
	#tptitle {
		margin-bottom: 30px;
	}
	#tptitle .h2Box {
		width: 60%;
	}
	#tptitle h2 {
		font-size: 3.2rem;
	}
	#tptitle .imgBox {
		width: 40%;
	}	
}


/*====================================================
     //class .commonBox
====================================================*/
.commonBox h3 {
	line-height: 1.3;
	margin-bottom: .5em;
}
.commonBox .imgBox {
	position: relative;
	z-index: 20;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
	.commonBox{
		display: block;
		padding: 10px auto;
	}
	.commonBox h3 {
		font-size: 2.6rem;
		line-height: 1.2;
		display: inline-block;
	}
	.commonBox .txtBox {
		font-size: 1.5rem;
	}
	.commonBox .imgBox {
		width: 60%;
		max-width: 400px;
		margin: auto;
	}
}

@media screen and (max-width:479px) {
	.commonBox .h3Box {
		text-align: center;
	}
	.commonBox h3 {
		font-size: 6.5vw;
		text-align: center;
	}
	.commonBox h3 .second {
		display: block;
/*		padding-left: 1.5em;*/
	}
}

@media screen and (min-width:480px) and (max-width:768px) {
}

/* ////////// PC ////////// */
@media print,
screen and (min-width: 769px) {
	.commonBox {
		padding: 0;
		margin-top: -10px;
	}
	.commonBox .txtBox {
		width: 70%;
		font-size: 1.5rem;
	}
	.commonBox .txtBox p:last-child {
		margin-bottom: 0;
	}
	.commonBox h3 {
		font-size: 2.4rem;
	}
	.commonBox .imgBox {
		width: 30%;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
	.commonBox {
		margin-top: 20px;
	}
	.commonBox .txtBox {
		width: 70%;
		font-size: 1.5rem;
	}
	.commonBox h3 {
		font-size: 2.4rem;
	}
}

@media screen and (min-width:1200px) {
	.commonBox .txtBox {
		font-size: 1.7rem;
	}
	.commonBox h3 {
		font-size: 2.6rem;
	}
}

/*====================================================
     //id #leadCopy
====================================================*/
#leadCopy .circleBox {
	background: rgba(221, 242, 255, 0.8);
	z-index: -5;
}

/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
	#leadCopy .circleBox {
		width: 70vw;
		max-width: 500px;
		height: 70vw;
		max-height: 500px;
		top: -20px;
		left: -20%;
	}
}

@media screen and (min-width:480px) and (max-width:768px) {
}

/* ////////// PC ////////// */
@media print,
screen and (min-width: 769px) {
	#leadCopy {
		flex-direction: row-reverse;
	}
	#leadCopy .circleBox {
		width: 30vw;
		max-width: 400px;
		height: 30vw;
		max-height: 400px;
		top: 30%;
		right: 20%;
	}
	#leadCopy .txtBox {
		padding-left: 20px;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
}


/*====================================================
     //id #about
====================================================*/
#about .circleBox {
	background: rgba(255, 253, 231, 0.8);
	z-index: -5;
}

/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
	#about .circleBox {
		width: 90vw;
		max-width: 600px;
		height: 90vw;
		max-height: 600px;
		top: 40px;
		left: 12%;
	}
}

@media screen and (min-width:480px) and (max-width:768px) {
}

/* ////////// PC ////////// */
@media print,
screen and (min-width: 769px) {
	#about .circleBox {
		width: 40vw;
		max-width: 500px;
		height: 40vw;
		max-height: 500px;
		top: -15%;
		left: -15%;
	}
	#about .txtBox {
		padding-right: 20px;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
}


/*====================================================
     //id #course
====================================================*/

/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
}

@media screen and (min-width:480px) and (max-width:768px) {
}

/* ////////// PC ////////// */
@media print,
screen and (min-width: 769px) {
	#course {
/*		flex-direction: row-reverse;*/
	}
/*
	#course .courseBox {
		width: 60%;
		padding-right: 20px;
	}
	#course .profileBox-outer {
		width: 40%;
	}
	#course .profileBox {
		display: block;
	}
	#course .profileBox .imgBox {
		width: 60%;
		padding: 0;
	}
	#course .profileBox .txtBox {
		width: 100%;
	}
*/
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
}

/*====================================================
     //id #profile
====================================================*/
#profile .circleBox {
	background: rgba(245, 230, 255, 0.8);
	z-index: -5;
}

/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
	#profile .circleBox {
		width: 80vw;
		max-width: 500px;
		height: 80vw;
		max-height: 500px;
		top: 40px;
		left: -12%;
	}
}

@media screen and (min-width:480px) and (max-width:768px) {
}

/* ////////// PC ////////// */
@media print,
screen and (min-width: 769px) {
	#profile .circleBox {
		width: 37vw;
		max-width: 500px;
		height: 37vw;
		max-height: 500px;
		top: -15%;
		right: 5%;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
}

/*====================================================
     
====================================================*/

/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
}

@media screen and (min-width:480px) and (max-width:768px) {
}

/* ////////// PC ////////// */
@media print,
screen and (min-width: 769px) {
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
}

