@charset "utf-8";


h1 {
  font-size: 30px;
  font-weight: bold;
  padding: 10px 30px;
  margin-bottom: 1em;
  border-radius: 10px;
  background: #d9e9f2;
}

figure.gazo-box {
float: left;
margin: 0 1%;
border:1px solid #cccccc;
border-radius: 30px;
padding-right: 10px;
padding-left: 10px;
margin-top: 30px;
}

figcaption{
font-size:1.5em;
height:50px;
background-color:#498fca;/* タイトルブルー */
padding-top:10px;
line-height:1.5em;
margin-bottom:30px;
color:#ffffff;
}


figcaption:nth-child(2){
font-size:1.5em;
height:50px;
margin-bottom:30px;
background-color:#ffd800;/* タイトル黄色 */
line-height:1.5em;
color:#000000;
}

a:nth-child(n+3) img{

  background-image: url("https://magni-hyogo.com/matchingtest/img/osusumePlus.jpg");
  background-position-y: 0px;
  background-size: 100%; /* 画像を要素のサイズに合わせて調整 */
  background-repeat: no-repeat; /* 画像を繰り返さない */
  padding-top:150px;
  height:240px;
}

a:nth-child(n+5) img{
  background-image: url("https://magni-hyogo.com/matchingtest/img/osusumeOr.jpg");
  background-position-y: 0px;
  background-size: 100%; /* 画像を要素のサイズに合わせて調整 */
  background-repeat: no-repeat; /* 画像を繰り返さない */
  height:240px;
}



.button{

    margin-top: 30px;
    
}

.button a {
    background: #eee;
    border-radius: 9999px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 250px;
    padding: 10px 25px;
    font-family: "Noto Sans Japanese";
    color: #333333;
    line-height: 1.8;
    text-decoration: none;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.button a:hover {
    background: #333333;
    color: #FFF;
}
.button a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #333333;
    border-right: 3px solid #333333;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.button a:hover:after {
    border-color: #FFF;
}
body{
    vertical-align:middle; 
    padding: 50px 0;
    text-align: center;
}