@charset "UTF-8";

#service article {
    margin-bottom: 70px;
    padding: 5%;
}

#product ul, #product dl {
    margin-bottom: 50px;
    padding: 10%;
}

mark {
    background:#00FF66;
}
.outline {
    margin: 1%;
    padding: 2%;
    border-width: 5px;
    border-style: solid;
    border-color: #f8b188;
    border-radius: 10px;
}
#service h2 {
    position: relative;
    font-size: 1.4rem;
    font-weight: bold;
    margin: 20px 0 20px 0 ;
    padding: 0.5em 0.5em 0rem 2.0rem;
    border-bottom: 2px solid #B92A2C;
    background: #fff;
    color: #000;
}
#service h2 a {
    color: white;
}
#service h2:before {
    content: "□";
    font-size: 200%;
    position: absolute;
    color: #ff6b6e;
    top: -0.8em;
    left: 0.3em;
    height: 12px;
    width: 12px;
}

#service h2:after {
    content: "□";
    font-size: 200%;
    position: absolute;
    color: #B92A2C;
    top: -0.5em;
    left: 0;
    height: 12px;
    width: 12px;
}
#service h2 a {
    color: #000;
}
#base p,
#whats p,
#point p {
    margin: 1%;
    padding: 4%;
}
#base img {
    display: block;
    width: 80%;
    margin: 0 auto;
    padding-bottom: 40px;
}
#technical img {
    display: block;
    width: 60%;
    margin: 0 auto;
}
#technical li {
    margin-bottom: 15px;
    margin-right: 15px;
}
#technical {
    margin-bottom: 30px;
}
#product h3 {
    text-align: center;
    margin: 0 15% 0 15%;
}
#product dd {
    text-align: center;
}
.box-strip {
    position: relative;
    background: Moccasin;
    box-shadow: 0px 0px 0px 5px  Moccasin;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    color: black;
}
.box-strip:after {
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: #ffdb88 #fff #ffdb88;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
#product dl {
    display: block;
    margin: 1%;
    padding: 4%;
}
@media screen and (min-width:480px) {
    .outline {
        margin: 5% 20% 5% 20%;
    }
    #mokuzi h2 {
        margin-left: 15px;
    }
    #base h2 {
        margin-left: 15px;
    }
    #whats h2 {
        margin-left: 15px;
    }
    #point h2 {
        margin-left: 15px;
    }
    #point li {
        margin-left: 35%;
    }
    #technical h2 {
        margin-left: 15px;
    }
    #product h2 {
        margin-left: 15px;
    }
    #point img {
        float: left;
        padding: 3%;
    }
    #base img {
        width: 60%;
    }
    /* --- clearfix --- */
    .clearFix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearFix {
        min-height: 1px;
    }
}