/* 発音矯正ドリル 統合版 0.1.0 */

body.single-pronunciation_word,
body.single-wasei_expression,
body.single-sound_pair{
    background:#fff;
    padding-bottom:0!important;
}

body.single-pronunciation_word #content-in,
body.single-wasei_expression #content-in,
body.single-sound_pair #content-in{
    display:block;
    max-width:none;
}

body.single-pronunciation_word #main,
body.single-wasei_expression #main,
body.single-sound_pair #main{
    float:none;
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
    border:0;
    background:#fff;
    box-shadow:none;
}

body.single-pronunciation_word #sidebar,
body.single-wasei_expression #sidebar,
body.single-sound_pair #sidebar,
body.single-pronunciation_word .mobile-footer-menu-buttons,
body.single-wasei_expression .mobile-footer-menu-buttons,
body.single-sound_pair .mobile-footer-menu-buttons,
body.single-pronunciation_word #mobile-footer-menu-buttons,
body.single-wasei_expression #mobile-footer-menu-buttons,
body.single-sound_pair #mobile-footer-menu-buttons,
body.single-pronunciation_word .footer-mobile-buttons,
body.single-wasei_expression .footer-mobile-buttons,
body.single-sound_pair .footer-mobile-buttons{
    display:none!important;
}

.ll-pd,
.ll-pd *{
    box-sizing:border-box;
}

.ll-pd{
    --red:#d22f3d;
    --ink:#171717;
    --sub:#686868;
    --line:#dedede;
    --soft:#f7f7f5;

    width:min(calc(100% - 40px),820px);
    margin:0 auto;
    padding:26px 0 72px;
    color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
    line-height:1.8;
}

.ll-pd a{
    color:inherit;
}

.ll-pd__breadcrumb{
    display:flex;
    flex-wrap:wrap;
    gap:4px 7px;
    margin:0 0 24px;
    color:#898989;
    font-size:12px;
}

.ll-pd__breadcrumb a{
    color:#777;
    text-decoration:none;
}

.ll-pd__category-band{
    margin:0 0 28px;
    padding:18px 18px 16px;
}

.ll-pd__category-band--green{
    border:1px solid #8bc89d;
    background:#a9dbb5;
}

.ll-pd__category-band--blue{
    border:1px solid #72b5dd;
    background:#8fc7e8;
}

.ll-pd__category-band--yellow{
    border:1px solid #d8bc4f;
    background:#f0d66e;
}

.ll-pd__category-band h1,
.ll-pd__category-band p{
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    color:var(--ink)!important;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Yu Gothic",sans-serif!important;
    font-size:clamp(24px,5vw,32px)!important;
    font-weight:400!important;
    line-height:1.35!important;
}

.ll-pd__label{
    margin:0 0 3px;
    color:var(--sub);
    font-size:12px;
    font-weight:700;
}

.ll-pd__japanese{
    padding:0 0 20px;
}

.ll-pd__japanese-main{
    margin:0;
    font-size:24px;
    font-weight:700;
    line-height:1.45;
}

.ll-pd__paper-card{
    margin-top:8px;
    padding:22px;
    border:0;
    background-color:#f1e6cb;
    background-image:url("paper-texture.webp");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.ll-pd__word-main{
    margin:6px 0 0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    color:var(--ink)!important;
    font-family:"Segoe UI","Hiragino Sans","Yu Gothic",sans-serif!important;
    font-size:clamp(52px,8vw,76px)!important;
    font-weight:500!important;
    line-height:1!important;
    letter-spacing:-.025em!important;
    overflow-wrap:anywhere;
}

.ll-pd__word-main::before,
.ll-pd__word-main::after{
    display:none!important;
}

.ll-pd__ipa{
    margin:16px 0 0;
    color:#505050;
    font-family:"Segoe UI","Hiragino Sans","Yu Gothic",sans-serif;
    font-size:19px;
}

.ll-pd__audio-row{
    margin-top:18px;
}

.ll-pd-audio{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    padding:0;
    border:1px solid var(--red);
    background:var(--red);
    color:#fff;
    border-radius:0;
    box-shadow:none;
    cursor:pointer;
}

.ll-pd-audio svg{
    width:20px;
    height:20px;
}

.ll-pd-audio:hover,
.ll-pd-audio:focus-visible,
.ll-pd-audio.is-speaking{
    border-color:#171717;
    background:#171717;
}

.ll-pd-audio--inline{
    width:28px;
    height:28px;
    border:0;
    background:transparent;
    color:var(--red);
}

.ll-pd-audio--inline svg{
    width:17px;
    height:17px;
}

.ll-pd__section{
    margin-top:24px;
    padding:30px 0 32px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.ll-pd__section + .ll-pd__section{
    margin-top:0;
    border-top:0;
}

.ll-pd__section-title{
    position:relative;
    margin:0 0 18px!important;
    padding:0 0 0 16px!important;
    border:0!important;
    background:transparent!important;
    color:var(--ink)!important;
    font-size:20px!important;
    font-weight:700!important;
    line-height:1.5!important;
}

.ll-pd__section-title::before{
    content:"";
    position:absolute;
    left:0;
    top:2px;
    width:4px;
    height:27px;
    background:var(--red);
}

.ll-pd__section-title::after{
    display:none!important;
}

.ll-pd__body{
    margin:0;
    font-size:17px;
    line-height:2;
}

.ll-pd-inline-audio{
    display:inline-flex;
    align-items:center;
    gap:4px;
    vertical-align:middle;
}

.ll-pd-inline-audio__text{
    font-family:"Segoe UI","Hiragino Sans","Yu Gothic",sans-serif;
    font-weight:500;
}

.ll-pd__expression-list{
    display:grid;
    gap:14px;
}

.ll-pd__expression-row{
    display:flex;
    align-items:center;
    gap:12px;
}

.ll-pd__expression{
    min-width:0;
    margin:0;
    font-family:"Segoe UI","Hiragino Sans","Yu Gothic",sans-serif;
    font-size:clamp(34px,6vw,50px);
    font-weight:500;
    line-height:1.15;
    letter-spacing:-.015em;
    overflow-wrap:anywhere;
}

.ll-pd__example-row{
    display:flex;
    align-items:center;
    gap:8px;
}

.ll-pd__example-en{
    margin:0;
    font-family:"Segoe UI","Hiragino Sans","Yu Gothic",sans-serif;
    font-size:24px;
    font-weight:500;
}

.ll-pd__example-ja{
    margin:4px 0 0;
    color:#555;
    font-size:15px;
}

.ll-pd__pair-title{
    margin:0 0 18px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    color:var(--ink)!important;
    font-family:"Segoe UI","Hiragino Sans","Yu Gothic",sans-serif!important;
    font-size:clamp(40px,7vw,60px)!important;
    font-weight:500!important;
    line-height:1.08!important;
    letter-spacing:-.02em!important;
}

.ll-pd__pair-title::before,
.ll-pd__pair-title::after{
    display:none!important;
}

.ll-pd__intro{
    margin:0 0 24px;
    font-size:17px;
    line-height:1.9;
}

.ll-pd__sound-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.ll-pd__sound-card{
    margin-top:0;
}

.ll-pd__sound-label{
    margin:0 0 14px;
    font-family:"Segoe UI","Hiragino Sans","Yu Gothic",sans-serif;
    font-size:28px;
    font-weight:500;
    line-height:1.1;
}

.ll-pd__sound-word-list{
    display:grid;
    gap:12px;
}

.ll-pd__sound-word-row{
    display:flex;
    align-items:center;
    gap:10px;
}

.ll-pd__sound-word{
    min-width:0;
    margin:0;
    font-family:"Segoe UI","Hiragino Sans","Yu Gothic",sans-serif;
    font-size:27px;
    font-weight:500;
    line-height:1.3;
    overflow-wrap:anywhere;
}

.ll-pd__point-list{
    display:grid;
    gap:14px;
}

.ll-pd__point-list p{
    margin:0;
    font-size:17px;
    line-height:1.95;
}

.ll-pd__point-list strong{
    display:inline-block;
    min-width:28px;
    font-weight:600;
}

.ll-pd__compare-lead{
    margin:0 0 18px;
    font-size:16px;
    line-height:1.9;
}

.ll-pd__compare-list{
    display:grid;
    gap:12px;
}

.ll-pd__compare-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.ll-pd__mask-card{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:66px;
    padding:12px 14px;
    border:1px solid #d5d5d5;
    background:var(--soft);
}

.ll-pd__mask{
    flex:1;
    height:16px;
    background:#333;
    opacity:.9;
}

.ll-pd__answer{
    display:none;
    flex:1;
    font-family:"Segoe UI","Hiragino Sans","Yu Gothic",sans-serif;
    font-size:23px;
    font-weight:500;
}

.ll-pd__compare-list.is-open .ll-pd__mask{
    display:none;
}

.ll-pd__compare-list.is-open .ll-pd__answer{
    display:block;
}

.ll-pd__reveal-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:150px;
    min-height:48px;
    margin-top:18px;
    padding:10px 18px;
    border:1px solid #171717;
    background:#fff;
    color:#171717;
    font-weight:700;
    cursor:pointer;
}

.ll-pd__reveal-button:hover,
.ll-pd__reveal-button:focus-visible{
    background:#171717;
    color:#fff;
}

.ll-pd__pager{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:24px;
}

.ll-pd__pager-cell a,
.ll-pd__pager-disabled{
    display:flex;
    min-height:78px;
    padding:14px 16px;
    flex-direction:column;
    justify-content:center;
    border:1px solid #cfcfcf;
    background:#f7f7f7;
    text-decoration:none;
}

.ll-pd__pager-cell--next a,
.ll-pd__pager-cell--next .ll-pd__pager-disabled{
    align-items:flex-end;
    text-align:right;
}

.ll-pd__pager-cell span{
    color:#666;
    font-size:12px;
    font-weight:700;
}

.ll-pd__pager-cell strong{
    margin-top:4px;
    font-family:"Segoe UI","Hiragino Sans","Yu Gothic",sans-serif;
    font-size:18px;
    font-weight:500;
}

.ll-pd__pager-disabled{
    color:#aaa;
}

.ll-pd__back{
    margin:22px 0 0;
    font-size:14px;
    font-weight:700;
}

.ll-pd__back a{
    text-underline-offset:4px;
}

@media(max-width:600px){
    .ll-pd{
        width:min(calc(100% - 28px),820px);
        padding:18px 0 48px;
    }

    .ll-pd__breadcrumb{
        margin-bottom:20px;
        font-size:11px;
    }

    .ll-pd__category-band{
        margin-bottom:24px;
        padding:14px 14px 12px;
    }

    .ll-pd__category-band h1,
    .ll-pd__category-band p{
        font-size:17px!important;
        line-height:1.45!important;
    }

    .ll-pd__japanese-main{
        font-size:22px;
    }

    .ll-pd__paper-card{
        padding:18px 16px;
    }

    .ll-pd__word-main{
        font-size:clamp(44px,14vw,62px)!important;
    }

    .ll-pd__expression{
        font-size:clamp(30px,9vw,42px);
    }

    .ll-pd__section{
        padding:26px 0 28px;
    }

    .ll-pd__section-title{
        font-size:19px!important;
    }

    .ll-pd__body{
        font-size:16px;
        line-height:1.95;
    }

    .ll-pd__sound-grid{
        grid-template-columns:1fr;
    }

    .ll-pd__pair-title{
        font-size:44px!important;
    }

    .ll-pd__sound-word{
        font-size:24px;
    }

    .ll-pd__compare-row{
        gap:8px;
    }

    .ll-pd__mask-card{
        min-height:62px;
        padding:10px;
    }

    .ll-pd__pager{
        grid-template-columns:1fr;
        gap:10px;
        margin-top:20px;
    }

    .ll-pd__pager-cell--next a,
    .ll-pd__pager-cell--next .ll-pd__pager-disabled{
        align-items:flex-start;
        text-align:left;
    }
}