@charset "utf-8";

/*
//
// products style css /
// /products/c50/audioboard_factory/
//
*/
/*--------------------
common
--------------------*/
#audioboard_factory img {
    max-width: 100%;
}
.ff-page #wrapContent .breadcrumb {
    margin-top: 4px;
}
/*--------------------
layout
--------------------*/
.audioboard_factory_wrap.exceptionWrap {
    padding: 0 15px;
}
/*--------------------
mv
--------------------*/
.mv {
    width: 100vw;
    height: 32.599837vw;
    background: url('../images/mv_pc.jpg') no-repeat;
    background-size: contain;
}
/*--------------------
lead
--------------------*/
.lead_head {
    font-size: 28px;
    width: 80%;
    margin: 40px auto 60px;
    text-align: center;
    position: relative;
    line-height: 1.3;
}
.lead_head::after {
    position: absolute;
    content: '';
    width: 70px;
    height: 1px;
    background: #666;
    display: block;
    bottom: -25px;
    left: 50%;
    margin-left: -35px;
}
.lead_text {
    font-size: 14px;
    width: 100%;
    text-align: center;
    margin: 0 auto 5%;
    line-height: 1.7;
    max-width: 740px;
}
/*--------------------
list
--------------------*/
.list  {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
.list li {
    width: 44%;
    margin-bottom: 35px;
    padding: 20px;
    background: #f2f2f2;
}
.list a {
    width: 100%;
    display: inline-block;
    text-align: center;
}
.list p,
.list h2 {
    font-size: 14px;
    margin-top: 2%;
    line-height: 1.5;
}
.list h2 {
    font-weight: bold;
}
.list p.note {
    font-size: 12px;
}
a.anchor {
    border-bottom: 1px solid #999;
}
a.anchor:hover {
    border-bottom: 1px solid #cdcdcd;
}
.tag {
    margin: 2% 0;
}
.tag_item {
    float: left;
    width: 80px;
    font-size: 11px;
    background: #fff;
    border: 1px solid #cdcdcd;
    text-align: center;
}
.tag_item+.tag_item {
    margin-left: 10px;
}
/*--------------------
link
--------------------*/
a.link_area_btn,
a.link_area_btn:link,
a.link_area_btn:visited {
    display: block;
    width: 73%;
    max-width: 330px;
    margin: 28px auto 0;
    background: #666;
    border: 1px solid #666;
    color: #fff;
    font-size: 13px;
    line-height: 1;
    border-radius: 10px;
    padding: 20px 0;
    text-align: center;
    -webkit-transition: background 500ms, border 500ms;
    transition: background 500ms, border 500ms;
}
a.link_area_btn:hover {
   color: #666;
   background: #fff;
   border-color: #666;
}
a.link_area_btn:active{
    color: #fff;
}
.sns {
    padding-left: 0;
}

.bnrListFullWidth {
    max-width: 976px;
    width: 100%;
    margin: 0 auto 37px;
}

.bnrListFullWidth li {
    margin-bottom: 20px;
    text-align: center;
}

.bnrListFullWidth li:last-child {
    margin-bottom: 5%;
}
.bnrListFullWidth li img {
    margin: 0 auto;
}
@media only screen and (min-width:641px) and (max-width:768px) {
    /*--------------------
     Tablet Only
    --------------------*/
    .list li {
        width: 43%.5;
        padding: 15px;
    }
}
@media only screen and (max-width:768px) {
    /*--------------------
    Tablet
    --------------------*/
    .audioboard_factory_wrap.exceptionWrap {
        padding: 0 3.125%;
    }
}
@media only screen and (max-width:640px) {
    /*--------------------
    Mobile
    --------------------*/
    .mv {
        height: 62.5vw;
        background: url('../images/mv_spn.jpg') no-repeat;
        background-size: contain;
    }
    .lead_head {
        font-size: 5.6vw;
        width: 100%;
        margin: 10% auto 12%;
    }
    .lead_head::after {
        width: 50px;
        bottom: -30%;
        margin-left: -25px;
    }
    .lead {
        font-size: 12px;
        width: 100%;
        line-height: 1.9;
    }
    .list  {
        display: block;
    }
    .list li {
        width: 100%;
        padding: 3.3% 3.3% 4.2%;
        box-sizing: border-box;
    }
    .list p,
    .list h2 {
        font-size: 12px;
    }
    .btn a, .btn a:link, .btn a:visited {
        width: 100%;
        box-sizing: border-box;
    }
    .tag_item {
        float: left;
        width: 65px;
        font-size: 10px;
    }
    .link_area .co2-1 {
        margin-bottom: 12%;
    }
    .link_area a.link_area_btn {
        width: 100%;
        max-width: 100%;
        margin: 4.688% auto 0;
    }
}
/*-----------------------------------------*/
/*--------------------
module
--------------------*/
.pc-only {
  display: block;
}
.tb-only {
  display: none;
}
.sp-only {
  display: none;
}
@media only screen and (min-width:641px) and (max-width:768px) {
    /*--------------------
    Tablet Only
    --------------------*/
}
@media only screen and (max-width:640px) {
    /*--------------------
    Mobile
    --------------------*/
    .bnrListFullWidth li img {
        width: 100%;
        height: auto;
    }
    .pc-only {
        display: none;
    }
    .tb-only {
    display: none;
  }
  .sp-only {
    display: block;
  }
}