.appArea {
    width: 50%;
    height: 90%;
}

@font-face {
    font-family: 'Klee One';
    src: url('font/KleeOne-Regular_small.woff') format('woff');
    font-display: swap;
}

body {
    font-family: 'Klee One',sans-serif;
    font-size: 15px;
    color: #4a5438;
    background-color: whitesmoke;
    margin: 0px;
}

h6{
    font-weight:normal;
}
section.top {
    background: url('img/lavender-flowers-gb96a611e0_1920.webp');
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    /*    padding-top:20px;
    padding-bottom: 20px;*/
    padding-left: 10%;
    padding-right: 10%;
    margin-bottom: 50px;
    height: 500px;
}

    section.top article {
        background: #ffffffd9;
        padding: 50px;
        margin: 0 auto;
        text-align: center;
    }

article.attention {
    margin-top: 20px;
}

section.contents {
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 100px;
    display: block;
}

    /*    section.contents article {
        display: flex;
    }*/

    section.contents aside {
        flex: 0;
        display: flex;
        flex-direction: column;
        order: -1;
    }

        section.contents aside fieldset {
            display: flex;
            flex-flow: wrap;
            justify-content: space-between;
            align-items: flex-end;
        }

article.appprom {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    margin-left: 10%;
    margin-right: 10%;
    background-color: white;
    text-align: center;
    margin-top: 54px;
    margin-bottom: 60px;
}

    article.appprom img.icon {
        background: white;
        border-radius: 14px;
        box-shadow: 0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);
    }

div.itemset {
    display: block;
    background-color: white;
    border: 2px solid #98a581;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-position-x: right;
    background-size: contain;
    margin-bottom: 20px;
}

    .itemset h3 {
        margin-top: 0;
    }

    .itemset img {
        width: 100px;
        height: 100px;
        align-self: center;
        padding-right: 20px;
    }

    .itemset p {
        display: -webkit-box;
        position: relative;
        overflow: hidden;
        -webkit-box-orient:vertical;
        -webkit-line-clamp: 3;
        margin: 0;
    }

    .itemset:has(#show:checked) p{
        display: block;
    }

/*    div.itemset:has(:checked) p{
        display: block;
    }*/

    .itemset p::after {
        position: absolute;
        background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .9) 50%, hsla(0, 0%, 100%, .9) 0, #fff);
        content: '';
    }

.itemset .showlabel {
    display: flex;
    position: absolute;
    align-items: center;
    color: #c188be;
    text-decoration-line: underline;
}

    .itemset .showlabel:hover {
        color: orange;
        cursor: pointer;
    }

   /* .itemset:has(#show:checked) .showlabel{
        display: none;
    }*/

/*    div.itemset:has(:checked) label.showlabel {
        display: none;
    }*/

    .itemset .showlabel::after {
        display: inline-block;
        width: 10px;
        height: 5px;
        background-color: #b6bdc3;
        clip-path: polygon(0 0, 100% 0,50% 100%);
        content: '';
    }


.itemset .hidelabel {
    display: none;
    position: absolute;
    align-items: center;
    color: #c188be;
    text-decoration-line: underline;
}

    .itemset .hidelabel:hover {
        color: orange;
        cursor: pointer;
    }

/*    div.itemset:has(:checked) label.hidelabel {
        display: flex;
    }*/

    .itemset .hidelabel::after {
        display: inline-block;
        width: 10px;
        height: 5px;
        background-color: #b6bdc3;
        clip-path: polygon(50% 0, 100% 100%,0 100%);
        content: '';
    }

    div.itemset input{
        display:none;
    }

.itemset:has(#show:checked) .showlabel {
    display: none;
}

.itemset:has(#show:checked) .hidelabel {
    display: flex;
}


    .toumei {
        padding: 20px;
        padding-bottom:40px;
        background: rgba(255,255,255,0.8);
    }



    /*
        qa用デザイン
    */
div.qaitemset {
    display: block;
    background-color: white;
    border: 2px solid #98a581;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-position-x: right;
    background-size: contain;
    margin-bottom: 20px;
}

    .qaitemset h3 {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 1.1em;
    }

    .qaitemset p {
        display: -webkit-box;
        position: relative;
        -webkit-box-orient: vertical;
        margin: 0;
        padding-top: 10px;
    }

.qaitemset .qlabel {
    color: #4a5438;
    display: contents;
    position: absolute;
    align-items: center;
}

    .qaitemset .qlabel:hover {
        cursor: pointer;
    }

    .qaitemset .qlabel::after {
        display: none;
        width: 10px;
        height: 5px;
        background-color: #b6bdc3;
        clip-path: polygon(0 0, 100% 0,50% 100%);
        content: '';
    }

.qaitemset .hidelabel {
    display: none;
    position: absolute;
    align-items: center;
    text-decoration-line: none;
}



    .qaitemset .hidelabel::after {
        display: none;
        width: 10px;
        height: 5px;
        background-color: #b6bdc3;
        clip-path: polygon(50% 0, 100% 100%,0 100%);
        content: '';
    }


div.qaitemset input {
    display: none;
}
/*
.qaitemset:has(#show:checked) {
    animation-duration: 1s;
    animation-name: showAnswer;
}
    */
.qaitemset:has(#show:checked) .qlabel {
    color: rebeccapurple;
}

.qaitemset:has(#show:checked) .hidelabel {
    display: contents;

}

    .qaitemset:has(#show:checked) .hidelabel p {
        animation-duration: 1s;
        animation-name: showAnswer;
    }
    
.qaitemset:has(#show:checked) .toumei {
    background: rgba(250,240,250,0.5);
}

.qaitemset .toumei {
    padding: 20px;
    border-radius: 10px;
    background: rgba(255,255,255,0.8);
}

@keyframes showAnswer {
    
    from {
        transform: scaleY(0.8) translateY(-10%);
        opacity: 0;
    }

    to {
        opacity: 1;
        transform: scaleY(1) translateY(0);
    }
}




/*
    QAデザイン用ここまで
*/

#demo_controls {
    padding: 40px 20px 0px 20px;
    z-index: 10;
}

#flutter_target {
    height: 600px;
    border-radius: 0px;
    margin: 0 auto;
    transition: all 150ms ease-in;
}

@media screen and (max-width: 500px) {

    body {
        font-size : 16px;
    }

    section.top {
        padding: 30px;
        height: 300px;
    }

    section.top article{
        padding: 30px;
    }

    section.contents {
        /*background-color: palevioletred;*/
        display: block;
        margin-left: 20px;
        margin-right: 20px;
    }

        section.contents article {
            /*        margin-left:auto;
        margin-right:auto;*/
        }

    #flutter_target {
        margin-left: auto;
        margin-right: auto;
    }

    .qaitemset h3 {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 1em;
    }

    .attention h2 {
        font-size: 1.3em;
    }

    p.qa_answer {
        font-size: 14px;
    }
}

@media screen and (max-heigh: 300px){

    section.top{
        height: 50%;
    }

}