@charset "utf-8";

/*------------  quality  ------------*/

.quality_title_block { padding: 0 0 40px; }
.quality_title { margin: 0 auto; width: 256px; }

.quality_wrap { padding: 0 2% 40px; }
.quality_wrap .panel { position: relative; margin: 0 0 80px; }

.quality_wrap .panel01 .pic { margin: 0 0 0 auto; width: 72%; }
.quality_wrap .panel01 .info { position: absolute; top: 13%; left: 0; width: 35%; min-height: 310px; }
.quality_wrap .panel02 .pic { margin: auto 0 0 0; width: 72%; }
.quality_wrap .panel02 .info { position: absolute; top: 13%; right: 0; width: 35%; min-height: 310px; }
.quality_wrap .panel03 .pic { margin: 0 0 0 auto; width: 72%; }
.quality_wrap .panel03 .info { position: absolute; top: 13%; left: 0; width: 35%; min-height: 310px; }
.quality_wrap .panel04 .pic { margin: auto 0 0 0; width: 72%; }
.quality_wrap .panel04 .info { position: absolute; top: 13%; right: 0; width: 35%; min-height: 310px; }

.quality_wrap .info { padding: 3.5%; background: url(/images/bg_quality.jpg) center #fff; line-height: 1.2; }
.quality_wrap .info .sub_name { padding: 0 0 .2em; font-family: 'Noto Sans JP', sans-serif; font-size: 16px; font-weight: 900; color: #53231b; }
.quality_wrap .info .name { padding: 0 0 .7em; font-family: 'Noto Sans JP', sans-serif; font-size: 28px; font-weight: 900; color: #53231b; }
.quality_wrap .info .sub_cat { padding: 0 0 .5em; font-family: 'Noto Sans JP', sans-serif; font-size: 15px; font-weight: 700; line-height: 1; color: #53231b; }
.quality_wrap .info .txt { padding: 0 0 1em; line-height: 1.5; }
.quality_wrap .info .txt:last-child { padding: 0; }





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

  .quality_title { width: 224px; }

  .quality_wrap .panel { margin: 0 0 70px; }
  .quality_wrap .panel01 .pic { width: 85%; }
  .quality_wrap .panel01 .info { width: 38%; min-height: 270px; }
  .quality_wrap .panel02 .pic { width: 85%; }
  .quality_wrap .panel02 .info { width: 38%; min-height: 270px; }
  .quality_wrap .panel03 .pic { width: 85%; }
  .quality_wrap .panel03 .info { width: 38%; min-height: 270px; }
  .quality_wrap .panel04 .pic { width: 85%; }
  .quality_wrap .panel04 .info { width: 38%; min-height: 270px; }

  .quality_wrap .info .sub_name { font-size: 14px; }
  .quality_wrap .info .name { font-size: 24px; }
  .quality_wrap .info .sub_cat { font-size: 14px; }

}





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

  .quality_title_block { padding: 12px 0 12px; }
  .quality_title { width: 172px; }

  .quality_wrap { padding: 0 4% 20px; }
  .quality_wrap .panel { position: relative; margin: 0 0 25px; }

  .quality_wrap .panel01 .pic { margin: auto; width: auto; }
  .quality_wrap .panel01 .info { position: relative; bottom: auto; width: auto; min-height: inherit; }
  .quality_wrap .panel02 .pic { margin: auto; width: auto; }
  .quality_wrap .panel02 .info { position: relative; bottom: auto; width: auto; min-height: inherit; }
  .quality_wrap .panel03 .pic { margin: auto; width: auto; }
  .quality_wrap .panel03 .info { position: relative; bottom: auto; width: auto; min-height: inherit; }
  .quality_wrap .panel04 .pic { margin: auto; width: auto; }
  .quality_wrap .panel04 .info { position: relative; bottom: auto; width: auto; min-height: inherit; }

  .quality_wrap .info { padding: 15px 4% 20px; }
  .quality_wrap .info .sub_name { padding: 0 0 .1em; font-size: 13px; }
  .quality_wrap .info .name { padding: 0 0 .7em; font-size: 18px; }
  .quality_wrap .info .sub_cat { padding: 0 0 .4em; font-size: 14px; }
  .quality_wrap .info .txt { padding: 0 0 .7em; font-size: 13px; }

}