@charset "UTF-8";
/* CSS Document */
/* 基本-モバイルファースト ======================================================================================================== */

.top_comment{
font-weight: bold;
}

#index_menu ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#index_menu ul li{
width: 49.5%;
margin-top: 1%;
}
#index_menu ul li a{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
text-align: center;
color: #fff;
padding: 20vw 0;
position: relative;
aspect-ratio: 2 / 3;
overflow: hidden;
}
#index_menu ul li a .photo{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -10;
}
#index_menu ul li a em{
display: block;
font-size: 6vw;
font-weight: bold;
}
#index_menu ul li a h3{
color: #fff;
font-weight: bold;
}





/* PCのみ======================================================================================================== */
@media print and (min-width: 751px), screen and (min-width: 751px){

.top_comment{
font-size: 18px;
font-weight: bold;
text-align: center;
}

#index_menu ul li{
width: 24.8%;
margin-top: 0;
}
#index_menu ul li a{
padding: 15vw 0;
}
#index_menu ul li a .photo{
transition: all 0.5s ease;
}
#index_menu ul li a:hover .photo{
transform: scale(1.1);
}
#index_menu ul li a .photo::before,
#index_menu ul li a .photo::after{
content: "";
display: block;
width: 0;
height: 100%;
position: absolute;
top: 0;
background-color: rgba(0, 0, 0, 0.4);
transition: all 0.5s ease;
}
#index_menu ul li a .photo::before{
left: 0;
}
#index_menu ul li a .photo::after{
right: 0;
}
#index_menu ul li a:hover .photo::before,
#index_menu ul li a:hover .photo::after{
width: 100%;
}
#index_menu ul li a em{
font-size: 3vw;
}
#index_menu ul li a h3{
font-size: 1.5vw;
}






}