/*---------------------------------------------------------------------------*/
@media screen and (min-width: 768px), print {
  .contents__inner .introduction > p {
    margin: 20px 0 40px;
    text-indent: 1em;
  }
  .contents__inner .introduction > p span {
    padding-left: 1em;
  }
  .contents__inner .introduction h4 {
    font-size: 2.6rem;
    font-weight: bold;
    border-bottom: 1px solid #be9664;
    color: #be9664;
    padding-bottom: 5px;
    margin: 40px 0 30px;
  }
  .contents__inner .introduction li .flex_area {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .contents__inner .introduction li .flex_area figure {
    width: 370px;
    display: inline-block;
    -webkit-box-ordinal-group: 3;
       -moz-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .contents__inner .introduction li .flex_area dl {
    display: -ms-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    width: 690px;
    border: 1px solid #c5c5c5;
    border-top: none;
    -webkit-box-ordinal-group: 2;
       -moz-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .contents__inner .introduction li .flex_area dl:nth-of-type(1) {
    border-top: 1px solid #c5c5c5;
  }
  .contents__inner .introduction li .flex_area dl dt {
    width: 120px;
    color: #fff;
    background-color: #be9664;
    border-right: 1px solid #c5c5c5;
    display: -ms-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .contents__inner .introduction li .flex_area dl dd {
    width: 570px;
    display: inline-block;
    padding: 5px 20px;
  }
}

@media screen and (max-width: 767px) {
  .contents__inner {
    overflow: hidden;
  }
  .contents__inner .introduction > p {
    margin-top: 2.60417vw;
  }
  .contents__inner .introduction > p span {
    padding-left: 1em;
  }
  .contents__inner .introduction h4 {
    font-weight: bold;
    border-bottom: 1px solid #be9664;
    color: #be9664;
    padding-bottom: 1.30208vw;
    margin: 7.16146vw 0 3.25521vw;
    font-size: 4.16667vw;
  }
  .contents__inner .introduction li dl {
    border: 1px solid #c5c5c5;
    border-top: none;
  }
  .contents__inner .introduction li dl:nth-of-type(1) {
    border-top: 1px solid #c5c5c5;
    margin-top: 6.51042vw;
  }
  .contents__inner .introduction li dl dt {
    color: #fff;
    background-color: #be9664;
    display: -ms-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    line-height: 2em;
    font-weight: bold;
  }
  .contents__inner .introduction li dl dd {
    display: inline-block;
    padding: 1.95312vw 2.60417vw;
  }
}