@charset "UTF-8";

/*-------------------------
__hoge_style
-------------------------*/

#page_ttl{background-image: url("images/page_ttl_bg.jpg");}

.achievements_list{margin: calc(var(--inner_p) * -0.5) calc(var(--inner_p) * -0.5) calc(var(--inner_p) * -1);display: flex;flex-wrap: wrap;}
.achievements_list .achievements_box{width: calc(100% / 3);margin-bottom: var(--inner_p);padding: calc(var(--inner_p) / 4);box-sizing: border-box;}
.achievements_list .achievements_box .box_inner{padding: calc(var(--inner_p) / 4);border-radius: calc(var(--inner_p) / 1.5);transition: box-shadow .3s;display: block;}
.achievements_list .achievements_box .box_inner .pic{width: 100%;height: auto;aspect-ratio: 4 / 3;border: solid 1px #ccc;border-radius: calc(var(--inner_p) / 2);box-sizing: border-box;overflow: hidden;}
.achievements_list .achievements_box .box_inner .pic img{width: 100%;height: 100%;object-fit: contain;transition: all .3s;}
.achievements_list .achievements_box .box_inner .info dl dt,
.achievements_list .achievements_box .box_inner .info dl dd{overflow: hidden;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2;max-height: 4em;}

@media only screen and (max-width: 999px) {
    .achievements_list .achievements_box{width: calc(100% / 2);}
}
@media only screen and (max-width: 767px) {
    .achievements_list .achievements_box{width: 100%;}
    .achievements_list .achievements_box .box_inner .info {padding: 2em 0 1em;}
}


.narrow {padding:50px 0 0;}
.narrow ul {display: flex;
list-style: none;
justify-content: center;}
.narrow ul li {font-size: 1.4em;
font-weight: 600;line-height: 3; border: 1px solid #999;margin: 0 20px 0 0;width: 10em;text-align: center;border-radius:50vh;opacity: .5;}
.narrow ul li:hover {background: #999;transition: all .3s;}
.narrow ul li.check {color: #fff; background-color: var(--blue);opacity: 1; border: 1px solid var(--blue);}
.narrow ul li.check:hover {background: var(--blue);;transition: all .3s;}
.narrow ul li:last-child {margin: 0;}
.narrow ul li a {display: block;}
@media only screen and (max-width: 767px) {
.narrow { width: 90%;margin: auto; padding:20px 0 0;}
.narrow ul {display: flex;
list-style: none;
justify-content: center;
margin: auto;}
.narrow ul li {font-size: 1.4em;
font-weight: 600;line-height: 3; border: 1px solid #999;margin: 0 2.5% 0 0;width: 10em;text-align: center;border-radius:50vh;opacity: .5;}
.narrow ul li:hover {background: #999;transition: all .3s;}
.narrow ul li.check {color: #fff; background-color: var(--blue);opacity: 1; border: 1px solid var(--blue);}
.narrow ul li.check:hover {background: var(--blue);;transition: all .3s;}
.narrow ul li:last-child {margin: 0;}
.narrow ul li a {display: block;}
}