.dex{
max-width:1200px;
margin:auto;
padding:20px;
}

.dex-list{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
gap:14px;
}

.dex-card{
background:white;
border-radius:12px;
padding:10px;
text-align:center;
cursor:pointer;
border:1px solid #eee;
transition:.2s;
}

.dex-card:hover{
transform:scale(1.05);
}

.dex-card img{
width:100%;
border-radius:8px;
}


.dex-modal{
display:none;
position:fixed;
top:70px;
left:0;

width:100%;
height:calc(100% - 70px);

background:rgba(0,0,0,.6);

z-index:9999;

justify-content:center;

/* 修正 */
align-items:flex-start;

overflow-y:auto;
padding:20px 0;
}

.dex-modal-content{
background:white;
border-radius:14px;

width:900px;
max-width:95%;

max-height:calc(100vh - 110px);

overflow-y:auto;

display:flex;
flex-direction:column;

position:relative;

/* 追加 */
box-sizing:border-box;
}

.dex-close{
position:absolute;
top:10px;
right:16px;
font-size:26px;
border:none;
background:none;
cursor:pointer;
z-index:10;
}


/* preview */

.dex-preview{
text-align:center;
padding:20px;
}

.dex-preview img{
max-width:400px;
width:100%;
}

.preview-view{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
}

.preview-title{
margin-top:10px;
}

.nav{
width:42px;
height:42px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;
background:#EBB9CA;
color:white;

font-size:26px;
line-height:1;

border:none;
cursor:pointer;
transition:.2s;
}

/* 視覚中央補正 */

.nav.prev{
padding-left:2px;
}

.nav.next{
padding-right:2px;
}

.nav:hover{
transform:scale(1.1);
}

.nav svg path {
color: white;
}

.detail-btn{
margin-top:12px;
padding:8px 16px;
border:none;
border-radius:8px;
background:#EBB9CA;
color: white;
}


/* detail */

.dex-detail{
display:none;
overflow-y:auto;
padding:20px;
}

.detail-header{
text-align:center;
margin-bottom:20px;
}

.detail-header img{
max-width:260px;
width:100%;
border-radius:10px;
}

.detail-body{
line-height:1.8;
}

.dex-more{
margin-top:30px;
}

.dex-more a{
background:#EBB9CA;
color: white;
padding:10px 16px;
border-radius:10px;
text-decoration:none;
}

@media (max-width:600px){

.dex{
padding:12px;
}

.dex-list{
grid-template-columns:repeat(2,1fr);
gap:10px;
}

.dex-card{
padding:8px;
}

}

@media (max-width:600px){

.dex-modal-content{
width:100%;
max-height:none;
height:auto;
border-radius:12px;
margin:10px;
}

.dex-preview img{
max-width:90%;
}

.detail-header img{
max-width:80%;
}

}

@media (max-width:600px){

.nav{
width:38px;
height:38px;
font-size:20px;
}

.detail-btn{
padding:12px 20px;
font-size:16px;
}

.dex-close{
font-size:30px;
}

}

@media (max-width:600px){

.preview-view{
gap:6px;
}

.dex-preview img{
max-width:70%;
}

}