@charset "utf-8";

/*========================================
  how to use / detail
========================================*/

/* wrapper ------- */
main { width:1240px; margin:auto; }
.contentBlock { width:840px; margin: 80px auto; padding-left: 20px; padding-right: 20px; }

.contentBlock .actSet {
  margin: 0;
}
.contentBlock .actSet *[class^="btn-"] {
    display: inline-block;
    width: auto;
}

@media screen and (max-width:899px) {
        main, .contentBlock { width:auto; display:block; }
        main { margin:20px; }
}


/* normalize */
.normalize h2 { margin:56px 0 24px; font-size:2.4rem;}
.normalize h3 { margin:32px 0 24px; font-size:1.8rem;}
.normalize h4 { margin:80px 0 30px; padding:.5em 0 .5em .8em; border-left:6px solid #00A6C2; font-size:1.6rem;}
.normalize h5 { margin-top:16px; font-size:1.4rem;}
.normalize h6 { margin-top:8px; font-size:1.2rem;}

.normalize p  { line-height:2em; }
.normalize img { display:block; max-width:100%; height:auto; margin:20px auto; border: 1px solid #CCC;}

.normalize ul { margin: 24px 0 24px 20px; list-style:disc;}
.normalize ol { margin: 24px 0 24px 20px; list-style:decimal;}
.normalize ol li, .normalize ul li { margin-top:0.5em;}



/* index */
.indexList    { background:#ebf6ff; padding:20px 30px 15px; margin:40px 0 20px; }
.indexList h3 { padding:0 0 10px 0; }
.indexList h3:before {
        content:""; display:block; width:24px; height:24px; float:left; margin-right:.5em;
        background:url(../../../cmn/img/icon_index.svg#bk) no-repeat center center; background-size: 24px 24px;
}
.indexList li { border-top:1px solid #CCC; padding:10px 0; }
.indexList li:first-child { border:0; }


/* tagList2 */
.tagList2    { display:flex; padding:0 20px; }
.tagList2 h3 { width:120px; }
.tagList2 h3:before {
        content:""; display:block; width:20px; height:26px; float:left; margin-right:.4em;
        background:url(../../../cmn/img/icon_tag.svg) no-repeat center center; background-size:100%;
}
.tagList2 li { display:inline; margin-right:1em; white-space:nowrap; }

@media screen and (max-width:899px) {
        .tagList2    { display:block; }
        .tagList2 ul { clear:both; padding-top:10px; }
}




/* howtouseBox ======== */
aside li   { border:1px solid #CCC; margin:16px 0; }
aside li a { display:flex; justify-content:space-between; color:#353E43; }

aside li a div:nth-child(1) { width:110px; height: 110px; overflow:hidden; position:relative; }
aside li a div:nth-child(1) img { width:auto; height:100%; top:50%; left:50%; transform:translate(-50%, -50%); position:absolute; }
aside li a div:nth-child(2) { flex:1; }


aside 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;
}
aside li p::before, aside li p::after {
    position: absolute;
    background: #fff;
}
aside li p::before {
    content: "\002026";
    bottom: 0;
    right: 0;
}
aside li p::after {
    content: "";
    width: 100%;
    height: 100%;
}

/*aside li p:after {
        position:absolute; display:block; right:0; bottom:0;
        content:"…"; background:white;
}*/

aside li span { display:block; margin:.8em 1.1em 0; }
aside li span img { width:16px; height:16px; }



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