.kyouju{
    display: flex;
    justify-content:center;
}
.saeki{
    width: 40%;
    text-align: center;
    margin: 8px;
}
.suda{
    width: 40%;
    text-align: center;
    margin: 8px;
}

.saeki h1{
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 40px;
}

.suda h1{
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 40px;
}

/*　画像の透過+グラデーション＋テキスト出現　*/

.opacityText{/*テキストの基点となる位置を定義*/
	position: relative;
    font-family: "Story Script", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 70px;
    color: rgb(249, 250, 250);
}

.opacityText span.mask{
	position: relative;/*グラデーションの基点となる位置を定義*/
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
	display: block;/*画像をくくるspanタグをブロック要素にする*/
    line-height: 0;/*行の高さを0にする*/
}

.opacityText:hover span.mask::before{/*hoverした時の変化*/
	content:"";
	position: absolute;
	z-index:2;
	top:0;
	left:0;
	width: 100%;
    height: 100%;
	background: linear-gradient(45deg,rgba(88,182,211,.6),rgba(229,93,135,.6));/*背景色（グラデーション）*/
}

.opacityText img{
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
	opacity:1;
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.opacityText:hover img{/*hoverした時の変化*/
	opacity:0.6;/*透過具合を変更したい場合はこの数値を変更*/
}

.opacityText span.cap{
	opacity:0;
	transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
	position: absolute;
	z-index:3;/*テキストを前面に出す*/
	top: 50%;
    left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;/*テキストの色を変えたい場合はここを修正*/
    line-height: 1.5;/*行の高さを1.5にする*/
}

.opacityText:hover span.cap{/*hoverした時の変化*/
	opacity:1;
}

/* 滑らかに変形して出現 */
.smooth{
	animation-name:smoothAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    transform-origin:left;
	opacity:0;
}

@keyframes smoothAnime{
    from {
    transform:translate3d(0, 100%, 0) skewY(12deg);
    opacity:0;
    }

    to {
    transform:translate3d(0, 0, 0) skewY(0);
    opacity:1;
    }
}

.student{
    display: flex;
    justify-content:center;
}
.saeki-stu{
    width: 35%;
    text-align: center;
    margin: 8px;
	padding: 0.5em 1em;
    color: #474747;
    background: whitesmoke;/*背景色*/
    border-left: double 10px #dd6684;/*左線*/
    border-right: double 10px #dd6684;/*右線*/
}
.suda-stu{
    width: 35%;
    text-align: center;
    margin: 8px;
	padding: 0.5em 1em;
    color: #474747;
    background: whitesmoke;/*背景色*/
    border-left: double 10px #4ec4d3;/*左線*/
    border-right: double 10px #4ec4d3;/*右線*/
}
.saeki-stu h2{
    font-family: "Story Script", sans-serif;
    font-weight: bold;
    font-style: normal;
	font-size: 30px;
	margin: 0; 
    padding: 0;
}
.suda-stu h2{
    font-family: "Story Script", sans-serif;
    font-weight: bold;
    font-style: normal;
	font-size: 30px;
}

.saeki-stu h3{
	font-family: "Zen Maru Gothic", sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
}
.suda-stu h3{
	font-family: "Zen Maru Gothic", sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
}
/*==================================================
ギャラリーのためのcss
===================================*/
.gallery{
columns: 4;/*段組みの数*/
padding:0 15px;/*ギャラリー左右に余白をつける*/
margin:0;
}

.gallery li {
    margin-bottom: 20px;/*各画像下に余白をつける*/
list-style:none;
}

/*ギャラリー内のイメージは横幅100%にする*/
.gallery img{
	width:100%;
	height:auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/}

/*　横幅900px以下の段組み設定　*/
@media only screen and (max-width: 900px) {
	.gallery{
	columns:3;
	}	
}

@media only screen and (max-width: 768px) {
	.gallery{
	columns: 2;
}	
    .saeki{
    width: 45%;
    text-align: center;
    margin: 5px;
}
.suda{
    width: 45%;
    text-align: center;
    margin: 5px;
}
.saeki h1{
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 30px;
}

.suda h1{
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 30px;
}
}