main{
    text-align:center;
    margin:0px 3% 100px 3%;
}
h2{
    padding-top:30px;
    margin-top:50px;
    border-top:3px solid gray;
    text-align:center;
}
.content{
    display:inline-block;
    position:relative;
    margin:10px;
    width:200px;
    height:200px;
}
.content p{
    position:absolute;
    text-align:center;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:100%;
}
.content img{
    width:100%;
    height:100%;
}
.button{
    display:inline-block;
    color:black;
    text-align: center;
    text-decoration:none; /* リンクの下線を消す */
    border-radius:20px; /* ボタンの角を丸くする */
    background-color:rgba(255, 192, 203, 0.5);
    padding:30px 0px;
    margin:1%;
    width:200px;
}
.button:hover{
    background-color: rgba(255, 166, 0, 0.5);
}
main iframe{
    margin-top: 2.5vh;
    width:95vw;
    height:95vh;
}
.endmain{
    width:100%;
    background-image:url(https://play-college.jp/data/images/congratulation.png);
    background-size:cover;
    text-align:center;
    padding:20vh 0px;
}
.teachbutton{
    display:inline-block;
    color:black;
    font-size: 20px;
    border:15px inset gray ;
    text-decoration:none; /* リンクの下線を消す */
    padding:15px 0px;
    margin:1%;
    width:200px;
}
.teachbutton:hover{
    border:15px outset gray;
}
.lessonbutton{
    display:inline-block;
    color:black;
    font-size: 20px;
    background-image:url(https://play-college.jp/data/images/pink-circle.png);
    background-size:cover;
    border:10px groove rgba(0, 0, 0, 0.5);
    text-decoration:none; /* リンクの下線を消す */
    padding:20px 0px;
    margin:1%;
    width:200px;
    filter:grayscale(100%);
}
.lessonbutton:hover{
    border:10px dotted rgba(128, 128, 128, 0.5);
}