@charset "utf-8";

#otoiawase .pc {
    display: block !important;
}

#otoiawase .sp {
    display: none !important;
}

#otoiawase * {
    box-sizing: border-box;
}

#otoiawase p,
#otoiawase li,
#otoiawase a,
#otoiawase dt,
#otoiawase dd {
    color: #000;
    font-size: 18px;
    line-height: 2;
}

#otoiawase h2 {
    font-size: 27px;
    color: #000;
    margin: 0 auto 25px;
}

#otoiawase .q_icon {
    border-radius: 3px;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #e50014;
    display: inline-block;
    font-size: 16px;
    color: #fff;
    margin: 0 25px 0 0;
}

#otoiawase .a_icon {
    border-radius: 3px;
    width: 30px;
    height: 30px;
    text-align: center;
    border: #e50014 1px solid;
    background: #fff;
    display: inline-block;
    font-size: 16px;
    color: #e50014;
    margin: 0 25px 0 0;
}


/* -------------------title------------------- */

#otoiawase .title {
    width: 1024px;
    margin: 40px auto;
}

#otoiawase .title h1 {
    font-size: 34px;
    color: #000;
    margin: 0 auto 25px;
    border-left: #e50014 2px solid;
    padding: 15px 0 10px 15px;
}

/* -------------------most------------------- */
#otoiawase .most {
    width: 1024px;
    margin: 50px auto 0;
}

#otoiawase .most dl {
    background: #fef0f0;
    padding: 30px;
}

#otoiawase .most dt {
    display: flex;
    flex-flow: wrap;
    margin: 0 auto 20px;
}

#otoiawase .most dd {
    display: flex;
    flex-flow: wrap;
    background: #fff;
    padding: 20px 20px 15px;
}


/* -------------------faq------------------- */
#otoiawase .faq,
#otoiawase .eiyou {
    width: 1024px;
    margin: 60px auto 0;
}

#otoiawase .faq_link {
    width: 1024px;
    margin: 0 auto;
}

/* -------------------link_area------------------- */
#otoiawase ul.link_area {
    display: flex;
    flex-flow: wrap;
    margin: 30px auto 0;
}

#otoiawase ul.link_area li {
    width: 32.1%;
    border: 1px solid #ddd;
    text-align: left;
    box-sizing: border-box;
    margin: 0 18px 18px 0;
}

#otoiawase ul.link_area li:nth-child(3n) {
    margin: 0 0 18px 0;
}

#otoiawase ul.link_area li a {
    display: block;
    padding: 22px 0 22px 60px;
    position: relative;
}

#otoiawase ul.link_area li a::before {
    content: '';
    width: 8px;
    height: 8px;
    border: 0px;
    border-top: solid 2px #e50014;
    border-right: solid 2px #e50014;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 38px;
    left: 25px;
    margin-top: -4px;
}

/* -------------------customer------------------- */

#otoiawase .customer {
    background: #f9f9f9;
    padding: 70px 0 40px;
    margin: 60px auto 0;
}

#otoiawase .customer .wrap {
    width: 1024px;
    margin: 0 auto;
}

#otoiawase .customer .tell {
    background: #fff;
    display: flex;
    flex-flow: wrap;
    vertical-align: middle;
    padding: 26px 40px 20px;
    margin: 20px auto;
}

#otoiawase .customer .tell .box {
    display: flex;
    flex-flow: wrap;
    align-items: flex-start;
}

#otoiawase .customer .tell img {
    width: 80px;
    margin: 8px 30px 0 0;
}

#otoiawase .customer .tell p.number {
    font-size: 36px;
    font-weight: bold;
}

#otoiawase .customer .tell p.time {
    font-size: 20px;
    font-weight: bold;
    margin: 15px 0 0 40px;
}

#otoiawase .customer ul li {
    padding-left: 1em;
    text-indent: -1em;
}

/* -------------------list------------------- */
#otoiawase .list {
    width: 1024px;
    margin: 0 auto;
    padding: 70px 0 0;
}

/* -------------------accordion------------------- */

#otoiawase .list ul {
    margin: 34px auto 0;
    border-bottom: 1px solid #ddd;
}

#otoiawase .list .accordion {
    position: relative;
    outline: 0;
}

#otoiawase .list .accordion .question {
    display: flex;
    flex-flow: wrap;
    border-top: 1px solid #ddd;
    padding: 22px;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
}

#otoiawase .list .accordion .question:after {
    content: "＋";
    font-size: 25px;
    font-weight: bold;
    position: absolute;
    right: 35px;
    top: 14px;
    transition: all 0.2s ease-in-out;
    display: block;
    width: 10px;
    height: 10px;
    color: #e50014;
}

#otoiawase .list .accordion .question.open:after {
    content: "－";
}

#otoiawase .list .accordion .answer {
    background: #fef0f0;
    border-top: 1px solid #ddd;
    padding: 22px;
    display: none;
    cursor: auto;
}

#otoiawase .list .accordion .question .box,
#otoiawase .list .accordion .answer .box {
    display: flex;
    flex-flow: wrap;
}

#otoiawase .list .accordion .question .box p,
#otoiawase .list .accordion .answer .box p {
    width: 900px;
}

#otoiawase .list .accordion .answer a {
    display: block;
    margin: 20px 0 10px;
    padding: 0 0 0 30px;
    position: relative;
}

#otoiawase .list .accordion .answer a::before {
    content: '';
    width: 8px;
    height: 8px;
    border: 0px;
    border-top: solid 2px #e50014;
    border-right: solid 2px #e50014;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 10px;
    left: 0;
}

/* -------------------factory------------------- */
#otoiawase .factory {
    margin: 10px 0 0 60px;
    width: 850px;
}

#otoiawase .factory h3 {
    font-weight: bold;
    margin: 20px auto 0;
}

#otoiawase .factory table,
#otoiawase .factory td,
#otoiawase .factory th {
    border: 5px solid #FEF0F0;
    border-collapse: collapse;
    font-size: 16px;
}

#otoiawase .factory table {
    width: 100%;
}

#otoiawase .factory th {
    padding: 6px 20px;
    text-align: left;
    background: #f2f2f2;
}

#otoiawase .factory th.num {
    width: 210px;
    text-align: center;
}

#otoiawase .factory td {
    padding: 6px 20px;
    text-align: center;
    background: #fff;
}

#otoiawase .factory td.name {
    text-align: left;
}



/* -------------------page-top------------------- */

#otoiawase #page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 12px;
}

#otoiawase #page-top a {
    font-size: 12px;
    background: #e50014;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 20px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}

#otoiawase #page-top a:hover {
    transition: 0.3s;
    text-decoration: none;
    opacity: 0.5;
    color: #fff;
}


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


    #otoiawase .pc {
        display: none !important;
    }

    #otoiawase .sp {
        display: block !important;
    }

    #otoiawase p,
    #otoiawase li,
    #otoiawase a,
    #otoiawase dt,
    #otoiawase dd {
        font-size: 16px;
        line-height: 1.8;
        text-decoration: none;
    }

    #otoiawase h2 {
        font-size: 20px;
        margin: 0 auto 26px;
    }

    #otoiawase .q_icon {
        width: 26px;
        height: 26px;
        font-size: 15px;
        margin: 0 18px 0 0;
    }

    #otoiawase .a_icon {
        width: 26px;
        height: 26px;
        font-size: 15px;
        margin: 0 18px 0 0;
    }

    /* -------------------title------------------- */

    #otoiawase .title {
        width: 90%;
        margin: 20px auto;
    }

    #otoiawase .title h1 {
        font-size: 24px;
        margin: 0 auto 20px;
        padding: 10px 0 10px 12px;
        letter-spacing: -2px;
    }

    /* -------------------most------------------- */
    #otoiawase .most {
        width: 100%;
        margin: 40px auto 0;
    }

    #otoiawase .most h2 {
        width: 90%;
        margin: 0 auto 26px;
    }

    #otoiawase .most dl {
        padding: 22px;
        width: 100%;
    }

    #otoiawase .most dt {
        margin: 0 auto 14px;
    }

    #otoiawase .most dt p {
        width: 70%;
    }

    #otoiawase .most dd {
        padding: 20px;
    }

    #otoiawase .most dd p {
        margin: 10px 0 0;
    }

    /* -------------------faq------------------- */
    #otoiawase .faq,
    #otoiawase .eiyou {
        width: 90%;
        margin: 50px auto 0;
    }

    #otoiawase .faq_link {
        width: 90%;
        margin: 0 auto;
    }

    /* -------------------link_area------------------- */
    #otoiawase ul.link_area {
        display: block;
        margin: 20px auto 0;
    }

    #otoiawase ul.link_area li,
    #otoiawase ul.link_area li:nth-child(3n) {
        width: 100%;
        margin: 0 0 10px;
    }

    #otoiawase ul.link_area li a {
        padding: 18px 0 18px 40px;
    }

    #otoiawase ul.link_area li a::before {
        top: 32px;
        left: 15px;
    }

    #otoiawase .list .accordion .question:after {
        font-size: 18px;
        right: 25px;
        top: 18px;
    }

    /* -------------------customer------------------- */

    #otoiawase .customer {
        padding: 50px 0 40px;
        margin: 50px auto 0;
    }

    #otoiawase .customer .wrap {
        width: 90%;
        margin: 0 auto;
    }

    #otoiawase .customer .tell {
        display: block;
        padding: 18px 20px;
        margin: 15px auto 20px;
    }

    #otoiawase .customer .tell .box {
        margin: 0 auto;
        text-align: center;
    }

    #otoiawase .customer .tell img {
        width: 50px;
        margin: 8px 20px 0 0;
    }

    #otoiawase .customer .tell p.number {
        font-size: 26px;
    }

    #otoiawase .customer .tell p.time {
        font-size: 16px;
        line-height: 1.4;
        margin: 5px auto 0;
    }

    /* -------------------list------------------- */
    #otoiawase .list {
        width: 100%;
        margin: 0 auto 0;
        padding: 60px 0 0;
    }

    #otoiawase .list h2 {
        width: 90%;
        margin: 0 auto 20px;
    }

    #otoiawase .list ul {
        margin: 20px auto 0;
        border-bottom: 1px solid #ddd;
    }

    /* -------------------accordion------------------- */

    #otoiawase .list .accordion .question {
        padding: 18px 15px;
        display: block;
    }

    #otoiawase .list .accordion .answer {
        padding: 18px 15px;
    }

    #otoiawase .list .accordion .question .box {
        display: flex;
        flex-flow: wrap;
    }

    #otoiawase .list .accordion .question .box p {
        width: 74%;
    }

    #otoiawase .list .accordion .answer .box p {
        width: 100%;
        margin: 12px auto 0;
    }

    /* -------------------factory------------------- */
    #otoiawase .factory {
        margin: 10px 0 0;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #otoiawase .factory h3 {
        margin: 10px auto 0;
    }

    #otoiawase .factory table,
    #otoiawase .factory td,
    #otoiawase .factory th {
        border: 2px solid #FEF0F0;
        font-size: 14px;
    }

    #otoiawase .factory table {
        width: 600px;
    }

    #otoiawase .factory table::-webkit-scrollbar {
        background: #E5EBF3;
        width: 10px;
    }

    #otoiawase .factory table::-webkit-scrollbar-thumb {
        background: #575757;
        border-radius: 50px;
        height: 50px;
    }

    #otoiawase .factory th,
    #otoiawase .factory td {
        padding: 6px 10px;
    }

    #otoiawase .factory th.num {
        width: 130px;
        text-align: center;
    }

    /* -------------------page-top------------------- */

    #otoiawase #page-top {
        bottom: 10px;
        right: 10px;
    }

    #otoiawase #page-top a {
        width: 80px;
        font-size: 10px;
        padding: 13px 0;
    }


}

/* -------------------table------------------- */

#faq04 .answer table{
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
  }
  #faq04 .answer .tb01 th,
  #faq04 .answer .tb01 td{
    padding: 10px;
    border: solid 1px #ccc;
    text-align:left;
    box-sizing:border-box;
  }

  #faq04 .answer .tb01 th {
    background: #ebebeb;
    color: #000;
  }

  #faq04 .answer .tb01 td {
    background: #fff !important;
    color: #000;
    text-align:right !important;
  }

  #faq04 .answer .tb01 .center {
    height: 100%;
  }

  #faq04 .answer .tb01 .center .pro{
    line-height:65px;
  }

  @media screen and (max-width: 640px) {
    #faq04 .answer .tb01 .head{
      display:none;
    }
    #faq04 .answer .tb01 th {
        background: #ebebeb !important;
      }
    #faq04 .answer .tb01 {
      width: 100%;
    }
    #faq04 .answer .tb01 td,
    #faq04 .answer .tb01 th{
      display: block;
      width: 100%;
      border-bottom:none;
    }
    #faq04 .answer .tb01 td{
      padding: 0px 12px 0 0;
      display: block;
      width: 100%;
      line-height: 2.5;
      text-align:left;
    }
    #faq04 .answer .tb01 td:before{
      color: #333;
      content: attr(data-label);
      padding: 0px 10px;
      display: inline;
      margin-right: 10px;
      float: left;
    }
    #faq04 .answer .tb01 tr:last-child{
      border-bottom: solid 1px #ccc;
    }
  }