@charset "utf-8";

/*========================================
  how to use
========================================*/
main { margin:20px; }
.columnSet img { display:block; width:100%; }


/* howtouseHead ======== */
.howtouseHead > div      { display:flex; justify-content:space-between; align-items:center; margin-bottom:70px; }
.howtouseHead .faqSearch { display:flex; }
.howtouseHead .faqSearch input { width:auto; margin-right:10px; }

@media screen and (max-width:768px) {
        .howtouseHead > div,
        .howtouseHead .faqSearch { display:block; margin:10px 0 ; }
        .howtouseHead .faqSearch input,
        .howtouseHead .faqSearch button { width:100%; margin-top:20px; }
}


/* index.html */
.howtouseHead h1 { font-size:3.2rem; line-height:1; margin-bottom:.2em; }

/* タグnav 一時非表示 */
.tag-nav {
    display: none;
}

/* list.html */
.howtouseHead > div .actSet,
.howtouseHead > div .actSet li { margin:0; }

@media screen and (max-width:480px) {
        .howtouseHead > div .actSet    { display:flex; }
        .howtouseHead > div .actSet li { width:auto; }
}


/* タグnav 一時非表示 */
/* howtouseHeadNav ======== */
/* @media screen and (max-width:480px) {
        .howtouseHead nav .actSet    { display:flex; }
        .howtouseHead nav .actSet li { width:auto; margin: 0 16px 16px 0; }
} */


/* contentBlockHead ======== */
.howtouseBoxHead { display:flex; justify-content:space-between; align-items:center; }
.howtouseBoxHead .actSet,
.howtouseBoxHead .actSet li { margin:0; }

@media screen and (max-width:480px) {
        .howtouseBoxHead .actSet a { font-size:1.2rem; padding:5px 20px 5px 5px; white-space:nowrap; }
        .howtouseBoxHead .actSet a:after { right:5px; }
}


/* howtouseBox ======== */
.howtouseBox .columnSet { justify-content:flex-start; margin-top:0; margin-left:-20px;}
.howtouseBox .columnSet li   { margin-left:20px; border:1px solid #CCC; }
.howtouseBox .columnSet li div:nth-child(1) {
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.howtouseBox .columnSet li div:nth-child(1) img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}
.howtouseBox .columnSet li a { color:#353E43; display:block; padding-bottom:1.3em; }

.howtouseBox .columnSet li p {
    overflow:hidden;
    position:relative;
    display:block;
    max-height:4.5em;
    height: 80px;
    margin:.8em 1.1em 0;
    line-height: 20px;
    text-align: justify;
    text-justify: inter-ideograph;
}
.howtouseBox .columnSet li p::before,
.howtouseBox .columnSet li p::after {
    position: absolute;
    background: #fff;
}
.howtouseBox .columnSet li p::before {
    content: "\002026";
    bottom: 0;
    right: 0;
}
.howtouseBox .columnSet li p::after {
    content: "";
    width: 100%;
    height: 100%;
}


.howtouseBox .columnSet li span { display:block; margin:.8em 1.1em -0.3em; }
.howtouseBox .columnSet li span img { width:16px; height:16px; }

@media screen and (max-width:768px) {
    .contentBlock.howtouseBox {margin: 80px 0;}

        .howtouseBox .columnSet { display:block; margin:0; }
        .howtouseBox .columnSet li { margin: 32px 0 0; }
        .howtouseBox .columnSet li a { display:flex; justify-content:space-between; align-items:center; padding:0; }
        .howtouseBox .columnSet li div:nth-child(1) { width:120px; height:120px; overflow:hidden; position:relative; }
        .howtouseBox .columnSet li div:nth-child(1) img { width:auto; height:auto; top:50%; left:50%; transform:translate(-50%, -50%); position:absolute; }
    .howtouseBox .columnSet li div:nth-child(2) { flex:1; }
    .howtouseBox .columnSet li p {height:auto; margin:16px; }
        .howtouseBox .columnSet li span { margin-bottom:0; }
}
@media screen and (max-width:520px) {
        .howtouseBox .columnSet li div:nth-child(1) img { width:auto; height:auto; }
}



/* slider */
.showcase {
    margin: 40px auto;
    max-width: 872px;
}
.showcaseBox {
    width: 184px;
    margin: 0 10px;
    border: 1px solid #D7D8D9;
}
.before-slick .showcase {
    display: flex;
    justify-content: start;
    max-width: 812px;
    overflow: hidden;
}
.before-slick .showcaseBox {
    flex-shrink: 0;
}
.showcaseBox a {
    font-size: 1.2rem;
    color: #5D6569;
}
.showcaseBox a div:first-child{
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.showcaseBox a div:not(:first-child) {
    padding: 16px;
}
.showcaseBox img {
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
}
.showcaseBox p {
}
.showcaseBox span {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    margin-top: 8px;
}
@media screen and (min-width:769px) {
    .slick-track {
        display: flex;
        align-items: stretch;
    }
    .slick-slide {
        height: auto;
    }
}
@media screen and (max-width:768px) {
    .showcase {
        margin: 32px 0;
    }
    .showcaseBox {
        width: 100%;
        margin: 10px 0;
    }
    .showcaseBox a {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: stretch;
    }
    .showcaseBox a div:first-child {
        overflow: hidden;
        position: relative;
        width: 118px;
    }
    .showcaseBox a div:first-child::before {
        content: "";
        display: block;
        position: relative;
        z-index: 0;
        width: 118px;
        height: 118px;
    }
    .showcaseBox a div:first-child img {
        position: absolute;
        top: -50%;
        right: -50%;
        bottom: -50%;
        left: -50%;
        z-index: 10;
        margin: auto;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }
    .showcaseBox a div:nth-child(2) {
        flex: 1;
    }
    .showcaseBox a div:nth-child(2) p {
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 5.4rem;
        background-color: #FFF;
        text-align: justify;
        line-height: 1.5;
        font-size: 1.2;
    }
    .showcaseBox a div:nth-child(2) p::before,
    .showcaseBox a div:nth-child(2) p::after {
        position: absolute;
        background-color: #FFF;
    }
    .showcaseBox a div:nth-child(2) p::before {
        content: "\002026";
        bottom: 0;
        right: 0;
        color: #5D6569;
    }
    .showcaseBox a div:nth-child(2) p::after {
        content: "";
        height: 100%;
        width: 100%;
    }

}



/*========================================
@media screen and (max-width:768px) {
}
@media screen and (max-width:480px) {
}
========================================*/