@charset "utf-8";

div#main{
    margin:100px 150px;
    background-color:rgba(255, 255, 255, 0.794);
    width: 80%;
    height:565px;
    padding-top:20px;
}

h3.title{
    font-size:35px;
    color:#8b837a;
    display:inline-block;
    background-color:rgba(255, 255, 255, 0.794);
}

/*
.maru{
    border-radius: 10px;
    background-color:#d4ece4;
  }
  .maru h3{
    background: #1fb4bc;
    color: #FFF;
    margin: 0;
    padding: 0.25em;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .maru ol{
    padding: 3em;
    font-weight: bold;
    list-style-type: none;
    padding:0 20px 30px 0;
  }

  .maru p{
      text-align:left;
      padding:20px 0 20px 120px;
  }*/

  .list{
    border-radius:10px;
    background-color:#d4ece4;
    padding:40px;
  }

  a.list{
    color:#8b837a;
  }

  a.modal-open{
    color:#8b837a;
    text-decoration: none;;
  }

  a.modal-open:hover{
    color:#686868;
  }

.flex{
  display: flex; 
  flex-wrap: wrap; 
  align-items: left;
  margin:50px 150px;
}
.flex div{
  width: 22%;
  margin: 5em 5px;
  margin-top: auto;
 }

 .irasuto{
    height:13em;
 }
 
a.iframe-open{
  position:relative;
  text-decoration:none;
  color:#8b837a;
  padding-bottom:2px;
}

a.iframe-open:after{
  color:#686868;
  border-bottom:3px solid #55848c; /*下線の太さと色*/
  animation: border_anim 1s linear forwards;
}

a.iframe-open:hover{
  color:#686868;
  border-bottom:3px solid #55848c; /*下線の太さと色*/
  animation: border_anim 1s linear forwards;
}

@keyframes border_anim {
  0%{
    width: 0%;
  }
  100%{
    width: 100%;
  }
}