/*
 * 攻略記事用囲み枠CSS
 */
.point{
    border: double 5px #FEC46B;
}
.point::after{
    color: #FEC46B;
    content: "POINT";
}
.caution{
    border: 1px solid red;
}
.caution::after{
    color: red;
    content: "注意";
}
.memo{
    border: 1px solid #007ADC;
}
.memo::after{
    color: #007ADC;
    content: "MEMO";
}
.point,
.caution,
.memo{
    border-radius: 10px;
    margin-top: 30px;
    padding: 15px;
    position: relative;
}
.point::after,
.caution::after,
.memo::after{
    display: block;
    position: absolute;
    top: -10px;
    left: 15px;
    background-color: white;
    font-weight: bold;
    padding: 0 10px;
    font-size: 16px;
}
.point p,
.caution p,
.memo p{
    font-size: 14px;
    margin-top: 5px;
    line-height: 26px;
}
.point p:first-child,
.caution p:first-child,
.memo p:first-child{
    margin-top: 10px;
}
.point ul,
.caution ul,
.memo ul{
    padding-left: 20px;
}
.point ul li,
.caution ul li,
.memo ul li{
    list-style-type: disc;
    font-size: 14px;
    margin-top: 10px;
}
@media screen and (max-width:768px){
    .point,
    .caution,
    .memo{
        padding: 11px 15px 8px;
    }
    .point p,
    .caution p,
    .memo p{
        margin-top: 10px;
    }
    .point ul li,
    .caution ul li,
    .memo ul li{
        margin-top: 0;
    }
}
mark.line-yellow{
    background: linear-gradient(transparent 60%, rgba(255, 196, 107, 0.4) 60%);
}
mark.line-pink{
    background: linear-gradient(transparent 60%, rgba(255, 153, 153, 0.4) 60%);
}
mark.line-blue{
    background: linear-gradient(transparent 60%, rgba(0, 122, 220, 0.4) 60%);
}
:root {
    --ck-highlight-marker-yellow: #fdfd77;
    --ck-highlight-marker-green: #62f962;
    --ck-highlight-marker-pink: #fc7899;
    --ck-highlight-marker-blue: #72ccfd;
    --ck-highlight-line-yellow: #fed8a0;
    --ck-highlight-line-pink: #f99;
    --ck-highlight-line-blue: #007cdb;
}
mark.marker-yellow {
    background-color: var(--ck-highlight-marker-yellow) !important;
}
mark.marker-green {
    background-color: var(--ck-highlight-marker-green) !important;
}
mark.marker-pink {
    background-color: var(--ck-highlight-marker-pink) !important;
}
mark.marker-blue {
    background-color: var(--ck-highlight-marker-blue) !important;
}