@charset "utf-8";

.related-site {position: relative; margin-top:4rem;}
.related-site .related-list > ul {display: flex; flex-wrap:wrap; gap:2rem;}
.related-site .related-list > ul > li {width:calc((100% - (2rem * 4)) / 5);} 
.related-site .related-list a {position: relative; display: flex; align-items: center; justify-content: center; min-height:10rem; padding:1rem 2rem; border:1px solid #ccc; border-radius:1rem; text-align: center;}
.related-site .related-list a::after {content:''; position: absolute; left:50%; top:-0.7rem; z-index: 1; width:1.4rem; height:1.4rem; margin-left:-0.7rem; background:#1174FF; border-radius:50%; opacity:0; transform:translateY(0.3rem); transition:all .3s;}
.related-site .related-list a strong {font-weight: 500; font-size: 2rem; color:#333;}
.related-site .related-list strong span {background:linear-gradient(#1174FF, #1174FF) no-repeat left bottom; background-size:0 1px; transition: background-size .3s;}
.related-site .related-list a:hover {background:#F0FAFF url(../images/logo.png) no-repeat center / 15rem auto;}
.related-site .related-list a:hover::after {opacity:1; transform:translateY(0);}
.related-site .related-list a:hover strong {color:#1174FF;}
.related-site .related-list a:hover strong span {background-size:100% 1px;}
.related-site .related-list a[target="_blank"] strong::after {content:''; display: inline-block; width:1.5rem; height:1.5rem; margin-left:0.5rem; background:#333; mask:url(../images/ic-blank.png) no-repeat center / 1.5rem auto; -webkit-mask:url(../images/ic-blank.png) no-repeat center / 1.5rem auto; }
.related-site .related-list a[target="_blank"]:hover strong::after {background:#1174ff;}
@media screen and (max-width:1200px) {
    .related-site .related-list > ul > li {width:calc((100% - (2rem * 3)) / 4);} 
}
@media screen and (max-width:768px) {
    .related-site {margin-top:2rem;}
    .related-site .related-list > ul > li {width:calc((100% - (2rem * 2)) / 3);} 
    .related-site .related-list a strong {font-size: 1.8rem;}
}
@media screen and (max-width:600px) {
    .related-site .related-list > ul > li {width:calc((100% - (2rem)) / 2);} 
    .related-site .related-list a strong {font-size: 1.8rem;}
}