@charset "UTF-8";
/* CSS Document */

.lock {
overflow:hidden;
}
.modal-content {
position:relative;
display:none;
margin:0 auto;
padding:10px 0 0;
box-sizing: border-box;
}
.modal-content p {
margin:0;
padding:0;
}
.modal-overlay {
z-index:10;
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:120%;
background:#AB2A2F;
}
.modal-wrap {
z-index:20;
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
overflow:auto;
}
.modal-open {
text-decoration:underline;
}
.modal-open:hover {
cursor:pointer;
}
.modal-close {
text-align: right;
}
.modal-close:hover {
cursor:pointer;
}
p.close_top{
text-align: right;
margin: 10px 0 20px;
color:#FFF;
}
p.close_top .modal-close{
height:35px;
font-size: 1.2em;
padding:10px 20px;
}
.modal-content > ul{
overflow: hidden;
margin:0;
padding:0;
}

.modal-content li {
float:left;
text-align:center;
border:1px solid #FFF;
}
.modal-content li a {
font-family: 'Roboto Slab', serif;
display:block;
color:#fff;
text-decoration:none;
}
.modal-content li a span {
display:block;
border-top:1px solid #FFF;
font-family:"Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

@media screen and (max-width: 480px) {
p.close_top .modal-close{
margin-right: 0;
}
.modal-content {
width:96%;
}
.modal-content li {
width:22%;
height:80px;
margin:0 0.5% 20px 0.5%;
}
.modal-content li a {
padding:25px 2% 0 2%;
width:96%;
height:55px;
font-size:11px;
}
.modal-content li a span {
padding:3px 0 0 0;
margin:3px 0 0 0;
font-size:8px;
}
}

@media screen and (min-width: 481px) and (max-width: 1023px) {
p.close_top .modal-close{
margin-right: 20px;
}
.modal-content {
width:96%;
margin:auto;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
.modal-content li {
width:21%;
height:160px;
margin:0 1.5% 20px 1.5%;
}
.modal-content li a {
padding:55px 5% 0 5%;
width:90%;
height:105px;
}
.modal-content li a span {
padding:3px 0 0 0;
margin:3px 0 0 0;
font-size:10px;
}
}

@media screen and (min-width: 1024px) {
p.close_top .modal-close{
margin-right: 20px;
}
.modal-content {
width:1024px;
margin:auto;
position:absolute;
left:0;
right:0;
}
.modal-content li {
width:200px;
height:200px;
margin:0 27px 20px 27px;
}
.modal-content li a {
padding:75px 30px 0 30px;
width:140px;
height:125px;
}
.modal-content li a span {
padding:5px 0 0 0;
margin:5px 0 0 0;
font-size:12px;
}
}