@charset "utf-8";

body main {
    font-size: 16px;
    padding-top: 32px;
}

main .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 960px;
}

main .inner p {
    width: 100%;
}

main .inner a {
    color: #1d94d4;
    text-decoration: underline;
}

main .inner a:hover {
    background-color: #1d94d4;
    color: #FFF;
    text-decoration: none;
}

.prHead {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

main .inner .prHead p {
    width: auto;
}

.prLead {
    color: #fff;
    background-color: #61B341;
    text-align: center;
    font-size: 24px;
    padding: 8px;
}

.prLead span {
    font-size: 18px;
    display: block;
}

.prTitle {
    /* font-size: 24px; */
    margin-bottom: 32px;
}

/* .prTitle span{
  font-size: 18px;
  display: block;
} */
.text1 {
    /* font-size: 18px; */
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
    text-indent: 1em;
}

.text1 div {
    width: 464px;
}

.text1 div.img {
    display: flex;
}



.prConcept {
    width: 100%;
    color: #61B341;
    font-size: 24px;
    text-align: center;
    border: 0 solid #61B341;
    border-top-width: 2px;
    border-bottom-width: 2px;
    margin-bottom: 16px;
}

.prConcept span {
    font-size: 20px;
    display: block;
}

.jushoubanner {
    display: grid;
    grid-template-columns: 1fr 300px 1fr;
    grid-column-gap: 32px;
    margin-bottom: 16px;
    justify-content: center;
    align-items: end;
}
.jushoubanner img {
    grid-column: 2;
    max-width: 300px;
}
.jushoubanner p {
    grid-column: 3;
}
.jushoubanner p::before {
    content: "◀";
}
.jushoubanner p span {
    font-size: 14px;
}

.prConcept + p {
    margin-bottom: 32px;
}

main .inner a.wholelink {
    color: #61B341;
    text-decoration: none;
    cursor: default;
}

main .inner a.wholelink:hover {
    background-color: transparent;
}

main .inner a.wholelink span {
    color: #ed3131;
    text-decoration: underline;
    cursor: pointer;
    transition: .3s;
}

main .inner a.wholelink span:hover {
    color: #fff;
    background-color: #ed3131;
    text-decoration: none;
}

.usenkids_start {
    display: flex;
}

.usenkids_start span {
    display: block;
}

.usenkids_start span:last-of-type {
    display: block;
}

.usenkids_start::after {
    content: '';
    width: 200px;
    height: 200px;
    display: block;
    background-image: url(../img/read_aloud/usenkids20211225.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.youtube {
    position: relative;
    padding-top: calc(9 / 16 * 80%);
    width: 80%;
    height: 0;
    overflow: hidden;
    margin: 32px 0 16px;
}

.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.prDetail {
    width: 100%;
    margin-bottom: 32px;
}

.prDetail > div {
    display: flex;
    margin-bottom: 20px;
}

.prDetail > div > dt {
    width: 128px;
    color: #61B341;
}

.prDetail > div > dd {
    width: calc(100% - 128px);
}

.prDetail .btn {
    width: 300px;
    display: block;
    padding: 16px;
    color: #fff;
    text-align: center;
    background-color: #61B341;
    font-size: 20px;
    text-decoration: none;
}

.prDetail .btn:hover {
    background-color: #97d180;
}

.prDivList {
    display: flex;
    flex-wrap: wrap;
}

.prDivList li::after {
    content: "、";
}

.prDivList li:last-of-type::after {
    content: none;
}

.prPrise dd dt {
    font-weight: 800;
}

.prPrise dd dd {
    margin-bottom: 20px;
}

.prPrise dd ul.disc {
    list-style-type: disc;
    margin-left: 20px;

}

.prPrise dd ul.disclosure-closed {
    list-style-type: disclosure-closed;
}

.prDetail > div.prJudge {
    margin-bottom: 0;
}

.prDetail .app_button {
    margin-left: 0;
    box-shadow: 4px 4px 11px 4px rgba(0, 0, 0, .2);
}
.prDetail .app_button a {
    color: #fff;
    text-decoration: none;
    background-color: #61B341;
}
.prDetail .app_button a:hover {
    background-color: #9ad283;
}
.prDetail .app_button a::before {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: "\f0da";
    margin-right: 2px;
}

.prList {
    width: 100%;
}
.prList > div {
    margin-bottom: 24px;
}
.prList > div > dt {
    color: #61B341;
}
.prList div > dd {
    display: flex;
    align-items: center;
}
.prList dl {
    display: flex;
}
.prList dl div {
    display: flex;
}
.prList dl dt::after {
    content: "：";
}
.prList dl dd {
    margin-right: 16px;
}
.prList dd p {
    width: fit-content;
    margin-bottom: 0;
}
.prList dd p a {
    color: #504934;
    position: relative;
    padding: 4px 20px 4px 16px;
    display: inline-block;
    text-decoration: none;
    background-color: #f4d020;
    /* clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
/* ::before, ::after 共通スタイル */
.prList dd p a::before, .prList dd p a::after {
    content: "";
    position: absolute;
    z-index: -1;
}
/* めくれ */
.prList dd p a::after {
    bottom: 0;
    right: 0;
    height: 14px;
    width: 14px;
    background-color: rgba(0, 0, 0, 0.52);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
main .inner .prList dd p a:hover {
    box-shadow: inset 0 0 12px 2px rgba(0, 0, 0, .2);
    color: #504934;
    background-color: #f4d020;
}

.prJudge dd dt {
    font-weight: 800;
}

.prJudge dd p {
    margin: 0 0 0 16px;
}

.report_1st {
    border-top: 2px dashed #61B341;
    width: 100%;
    padding-top: 16px;

}

.report_1st h2 {
    color: #61B341;
    font-size: 20px;
}

.report_1st ul {
    list-style-type: disc;
    margin-left: 20px;
    font-size: 16px;
    margin-bottom: 16px;

}

.report_1st .products dt {
    font-size: 18px;
}

.report_1st .products .img_caption {
    font-size: 10px;
}

.report_1st .illust_and_book {
    display: flex;
    width: 480px;
    justify-content: space-between;
}

.prAboutPicassoProject,
.prContact {
    width: 100%;
    font-size: 20px;
    text-align: left;
}

.prAboutPicassoProject {
    width: 100%;
    font-size: 20px;
    text-align: left;
}

.prDownload {
    text-align: center;
    font-size: 18px;
    margin-bottom: 32px;
}

main .inner .prDownload a {
    text-decoration: none;
}

.prDownload a::after {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: "\f019";
}

/* スマホ以下 */
@media only screen and (max-width: 767px) {
    main .inner {
        padding: 0 16px;
    }

    .jushoubanner {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .jushoubanner img {
        margin-bottom: 16px;
    }
    .jushoubanner p {
        grid-column: 3;
        justify-self: center;
        align-self: end;
    }
    .jushoubanner p::before {
        content: "▲";
    }

    .text1 {
        flex-direction: column;
        font-size: 16px;
    }

    .text1 div {
        width: 100%;
    }

    .text1 div.img {
        margin-bottom: 16px;
    }

    .youtube {
        padding-top: calc(9 / 16 * 100%);
        width: 100%;
    }

}
/* このとじカッコは消さないこと */

@media only screen and (max-width: 700px) {
    .prList dl,
    .prList div > dd {
        flex-direction: column;
        align-items: flex-start;
    }

    .prList li {
        margin-bottom: 16px;
    }
}
/* このとじカッコは消さないこと */

@media only screen and (max-width: 530px) {
    .prConcept {
        font-size: 18px;
        text-align: left;
    }

    .prDetail > div {
        flex-direction: column;
    }

    .prDetail > div > dd {
        width: 100%;
    }

    .prPrise dd ul {
        margin-left: 24px;
    }

    .report_1st .illust_and_book {
        flex-direction: column;
        width: 100%;
    }


}
/* このとじカッコは消さないこと */