:root{
    --overlay:rgba(0,71,145,.82);
    --panel:#004791;
    --radius:14px;
    --width:900px;
}
.modal{
    position:fixed;
    inset:0;
    display:grid;
    place-items:center;
    background:var(--overlay);
    opacity:0;
    pointer-events:none;
    transition:.25s;
    z-index:9999;
}
.modal.show{
    opacity:1;
    pointer-events:auto
}
.modal-panel{
    width:min(var(--width),92vw);
    max-height:90vh;
    overflow:auto;
    background:var(--panel);
    color:#fff;
    border-radius:var(--radius);
    padding:28px;
    position:relative;
    transform:scale(.96);
    transition:.25s;
}
.modal.show .modal-panel{
    transform:scale(1);
}
.modal-media{
    display:block;
    width:100%;
    height:auto;
    margin-bottom:18px;
}
.modal-icon{
    height:auto;
    flex-shrink:0;
}
/* 通常サイズ */
.modal-icon.small{
    width: 60px;
}
/* 大きめサイズ */
.modal-icon.large{
    width:120px;
}
.modal-point {
    width:60px;
    height:auto;
}
.modal-header{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:20px;
}
.modal-ttl {
    margin: 0;
    color:#fff;
    font-size: 32px;
    font-weight: 600;
    margin-top: 45px;
    margin-bottom: 20px;
}
.modal-ttl ruby[data-ruby]::after {
    font-size: 13px;
    transform: translate(-50%, -1.6em);
}
.modal-text p {
    font-size: 18px;      /* ←文字サイズ */
    line-height: 2.5!important;     /* ←行間 */
    color:#fff;
}
.modal-text p ruby[data-ruby]::after {
    font-size: 9px;      /* ←文字サイズ */
    line-height: 0.5;     /* ←行間 */
    color:#fff;
    margin:0 0 1.5em;
    letter-spacing: 0.05em;
}
.modal-close{
    position:absolute;
    right:12px;
    top:10px;
    background:none;
    border:0;
    color:#fff;
    font-size:75px;
    cursor:pointer;
}
.modal-panel::-webkit-scrollbar{
    width:10px;
}
.modal-panel::-webkit-scrollbar-thumb{
    background:#7bb7ff;
    border-radius:8px;
}
.btn_position01,.btn_position02{
    cursor:pointer;
}
.icon_position01,.icon_position02,.icon_position03,.icon_position04,.icon_position05,.icon_position06 {
    cursor:pointer;
}

@media(max-width:768px){
    :root{
        --width:96vw
    }
    .modal-panel{
        padding:18px
    }
}