@charset "UTF-8";
/* ==========================================================================
   Csr
   ========================================================================== */
@media screen and (max-width: 1023px) {
  /*-------------------------------------
  
   共通
  
  -------------------------------------*/
  #breadCrumb h1:before {
    background: url(../../img/csr/common/bread_icon_csr.png) no-repeat 0 0/52px auto;
  }

  #cr03 {
    display: none;
  }

  /*-------------------------------------
  
   CSR活動TOP
  
  -------------------------------------*/
  .csr #content {
    padding: 0 10px 20px;
    box-sizing: border-box;
  }

  .csr .conteInr {
    width: 100% !important;
  }

  .csr #section01 {
    margin: 40px 0 30px;
  }
  .csr #section01 h3 {
    margin-bottom: 30px;
  }
  .csr #section01 h3 img {
    width: 85%;
    height: auto;
  }

  .csr #section01 h4 {
    font-size: 131%;
    margin: 24px 0 8px 0;
  }

  .csr #section01 p {
    padding: 0 10px;
    font-size: 100%;
    text-align: left;
  }
  .csr #section01 p br {
    display: none;
  }

  .csr #section02,
  .csr #section03 {
    width: 100%;
    background: none;
  }

  .csr #section04 {
    width: 100%;
    margin: 0 auto 10px;
    background: none;
  }

  .csr #section04 .left,
  .csr #section04 .right {
    margin-bottom: 0;
  }

  .csr .section .left {
    float: none;
    width: 100%;
    margin-bottom: 25px;
    padding-bottom: 25px;
    background: url(../../img/sp/csr/top/line_dot.png) repeat-x center bottom;
  }

  .csr .section .right {
    float: none;
    width: 100%;
    margin-bottom: 25px;
    padding-bottom: 25px;
    background: url(../../img/sp/csr/top/line_dot.png) repeat-x center bottom;
  }

  .csr #section03 h3,
  .csr #section04 h3 {
    padding-top: 0;
  }

  .csr .section .left p,
  .csr .section .right p {
    margin-top: 15px;
  }

  .csr #section02,
  .csr #section03,
  .csr #section04 {
    padding: 0 10px;
    box-sizing: border-box;
  }
  .csr #section02 img,
  .csr #section03 img,
  .csr #section04 img {
    width: 100%;
    height: auto;
  }

  .csr #section04 .left {
    background: none;
  }

  /*-------------------------------------
  
    安全・安心
  
  -------------------------------------*/
  .quality #content {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .quality .conteInr {
    float: none;
    width: 100% !important;
    margin: 0 0 50px !important;
  }

  .quality #catImg h2 {
    width: 100%;
    margin: 0 0 30px 0;
    overflow: hidden;
  }
  .quality #catImg h2 img {
    width: auto;
    height: 43px;
  }

  .quality h3 {
    margin-bottom: 25px;
  }
  .quality h3 img {
    width: auto;
    height: 18px;
  }

  .quality .kv {
    margin-bottom: 30px !important;
  }
  .quality .kv img {
    width: 100%;
    height: auto;
  }

  .quality .section {
    margin-bottom: 35px;
  }

  .quality #section01 {
    padding: 0 10px;
    background: none;
    margin-bottom: 20px;
  }

  .quality #section01 ul {
    width: 100%;
    margin: 15px 0 0 0;
  }

  .quality #section01 li {
    box-sizing: border-box;
  }
  .quality #section01 li br {
    display: none;
  }

  .quality #section01 li:nth-of-type(1) {
    background: url(../../img/csr/quality/img02.png) no-repeat 0 0;
    width: 100%;
  }

  .quality #section01 li:nth-of-type(2) {
    background: url(../../img/csr/quality/img03.png) no-repeat 0 0;
    width: 100%;
  }

  .quality #section01 li:nth-of-type(3) {
    background: url(../../img/csr/quality/img04.png) no-repeat 0 0;
    width: 100%;
  }

  .quality #section02 {
    padding: 0 10px 0;
    min-height: 1px;
  }

  .quality #section02 p {
    margin-bottom: 8px;
  }

  .quality #section0202 {
    padding: 0 10px 0;
    min-height: 1px;
  }
  .quality #section0202 p {
    margin-bottom: 8px;
  }

  .quality #section03 {
    padding: 0 10px;
    margin-bottom: 40px;
  }
  .quality #section03 img {
    width: 100%;
    height: auto;
  }

  .quality #section04 {
    position: relative;
    padding-top: 40px;
    margin: 0 10px 60px;
    background: none;
    background-color: #F1ECE0;
  }
  .quality #section04::before {
    content: '';
    display: block;
    position: absolute;
    top: -20px;
    left: -20px;
    width: 75px;
    height: 75px;
    background: url(../../img/sp/csr/quality/block_top.png) no-repeat 0 0;
  }
  .quality #section04::after {
    visibility: visible;
    content: '';
    display: block;
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 75px;
    height: 75px;
    background: url(../../img/sp/csr/quality/block_bottom.png) no-repeat 0 0;
  }

  .quality #section04 .secInr {
    background: none;
    padding: 0 20px;
  }

  .quality #section04 .secInr dl {
    width: 100%;
    float: none;
    margin-top: 0;
    font-size: 100%;
    padding-bottom: 30px;
  }

  .quality #section04 .secInr dl:nth-of-type(1) {
    margin-left: 0;
  }

  .quality #section04 .secInr dl:nth-of-type(2) {
    margin: 0;
  }

  .quality #section04 .secInr dl dt {
    text-align: center;
    background: url(../../img/sp/common/line_dot.png) repeat-x center bottom;
  }

  .quality #section04 .secInr dl dd {
    margin-top: 10px;
    line-height: 1.7;
  }

  .quality .section h4 {
    font-size: 131%;
  }
  .quality .section h4 span {
    font-size: 14px;
    font-weight: bold;
  }

  /*-------------------------------------
  
    環境への取り組み
  
  -------------------------------------*/
  .eco #content {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .eco .conteInr {
    float: none;
    width: 100% !important;
    margin: 0 0 40px !important;
  }

  .eco #catImg h2 {
    width: 100%;
    margin: 0 0 30px 0;
    overflow: hidden;
  }
  .eco #catImg h2 img {
    width: auto;
    height: 43px;
  }

  .eco h3 {
    margin-bottom: 25px;
  }
  .eco h3 img {
    width: auto;
    height: 18px;
  }

  .eco .kv {
    margin-bottom: 30px !important;
  }
  .eco .kv img {
    width: 100%;
    height: auto;
  }

  .eco #section01 {
    /*background:url(../../img/csr/eco/img02.png) no-repeat 65% bottom/auto 200px;*/
    min-height: inherit;
    padding: 0 10px 10px;
  }

  .eco #section01 h4 {
    width: auto;
    font-size: 131%;
  }

  .eco #section01 h4:nth-of-type(2) {
    margin-top: 25px;
  }

  .eco #section01 p {
    width: auto;
  }

  /*-------------------------------------
  
    地域社会のために
  
  -------------------------------------*/
  .society #content {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .society .conteInr {
    float: none;
    width: 100% !important;
    margin: 0 0 40px !important;
  }

  .society #catImg h2 {
    width: 100%;
    margin: 0 0 30px 0;
    overflow: hidden;
  }
  .society #catImg h2 img {
    width: auto;
    height: 43px;
  }

  .society h3 {
    margin-bottom: 25px;
  }
  .society h3 img {
    width: auto;
    height: 18px;
  }

  .society .kv {
    margin-bottom: 30px !important;
  }
  .society .kv img {
    width: 100%;
    height: auto;
  }

  .society .section h4 {
    font-size: 131%;
  }

  .society #section01 {
    padding: 0 10px 250px;
    background: url(../../img/csr/society/img02.png) no-repeat center calc(100% + 138px);
  }

  .society #section01 h4,
  .society #section01 p {
    width: 100%;
  }

  .society #section01 p {
    margin-bottom: 12px;
  }

  .society #section02 {
    padding: 0 10px;
    margin: 40px 0;
  }
  .society #section02 img {
    width: 100%;
    height: auto;
  }

  .society #section03 {
    width: calc(100% - 20px);
    box-sizing: border-box;
    text-align: center;
    margin: 0 10px 40px;
  }

  .society #section03 h5 {
    font-size: 108%;
  }

  /*-------------------------------------
  
    業界発展のために
  
  -------------------------------------*/
  .jna #content {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .jna .conteInr {
    float: none;
    width: 100% !important;
    margin: 0 0 40px !important;
  }

  .jna #catImg h2 {
    width: 100%;
    margin: 0 0 30px 0;
    overflow: hidden;
  }
  .jna #catImg h2 img {
    width: auto;
    height: 43px;
  }

  .jna h3 {
    margin-bottom: 25px;
  }
  .jna h3 img {
    width: auto;
    height: 18px;
  }

  .jna .kv {
    margin-bottom: 30px !important;
  }
  .jna .kv img {
    width: 100%;
    height: auto;
  }

  .jna #section01 {
    padding: 0 10px;
  }

  .jna #section01 h4 {
    font-size: 131%;
  }

  .jna #section01 ul {
    float: none;
    width: auto;
    margin-bottom: 15px;
  }

  .jna #section01 .right {
    width: auto;
  }

  .jna #section02 {
    width: calc(100% - 20px);
    box-sizing: border-box;
    text-align: center;
    margin: 0 10px 40px;
  }

  .jna #section02 h5 {
    font-size: 108%;
  }

  /*-------------------------------------
  
    2度の震災を乗り越えて
  
  -------------------------------------*/
  .disaster #content {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .disaster .conteInr {
    float: none;
    width: 100% !important;
    margin: 0 0 40px !important;
  }

  .disaster #catImg h2 {
    width: 100%;
    margin: 0 0 30px 0;
    overflow: hidden;
  }
  .disaster #catImg h2 img {
    width: auto;
    height: 43px;
  }

  .disaster h3 {
    margin-bottom: 25px;
  }
  .disaster h3 img {
    width: auto;
    height: 18px;
  }

  .disaster .kv {
    margin-bottom: 30px !important;
  }
  .disaster .kv img {
    width: 100%;
    height: auto;
  }

  .disaster .section h4 {
    font-size: 131%;
  }

  .disaster .section h5 {
    width: 100%;
    box-sizing: border-box;
  }

  .disaster .section h4 span {
    left: 0;
    line-height: 1.3;
  }

  .disaster #section01 {
    padding: 0 10px 40px;
  }

  .disaster #section01 ul {
    margin: 20px 0 0 0;
  }

  .disaster #section01 ul li {
    float: none;
    margin: 0 auto 10px;
    width: 220px;
  }

  .disaster #section01 ul li:last-child {
    margin: 0 auto;
  }

  .disaster #section02 {
    padding: 0 10px;
  }

  .disaster #section02 div {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: #F9F6F5 url(../../img/sp/csr/disaster/img04.png) no-repeat right bottom;
  }

  .disaster #section02 div .w330 {
    width: 100%;
    box-sizing: border-box;
  }

  .disaster #section03 {
    padding: 0 10px;
  }

  .disaster #section03 div {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }

  .disaster #section04 {
    padding: 0 10px;
    margin-bottom: 50px;
  }

  .disaster #section04 div {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }
}