@charset "UTF-8";

/*--------------------------------------------------------------------------------------------------------------------------------------------------------
	共通
--------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* フォント */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
#qualityContents { font-family: YuMincho, "Noto Serif JP", serif; }

/* 画像 */
img { max-width: 100%; }

/* ページ固有 */
#quality { padding: 0; }
#quality .l-header,
#quality .l-breadcrumb,
#quality .l-footer,
#quality .container_liquid { margin: 0; }
#quality p:not(:last-child) { margin: 0; }
#quality .m-btn.btn-primary { background-color: #28bbc6; margin-top: 35px; }
#quality .f_pagetop { background-color: #28bbc6; position: relative; }

/* タイトル */
#quality .leftLineTitle { font-size: 225%; font-weight: bold; letter-spacing: 0.1em; padding-left: 14px; border-left: solid 9px #32cad6; text-align: left; margin-top: 100px; }

/* コンテンツ幅 */
#quality .contentsWidth { max-width: 960px; padding: 0 10px; margin: 0 auto; }

@media screen and (max-width: 767px) { 
  
	/* ページ固有 */
	#quality .container_liquid { padding-left: 25px; padding-right: 25px; }
	#quality .f_pagetop::after { right: 10px; max-width: 22%; height: 40px; }
  
  /* タイトル */
  #quality .leftLineTitle { font-size: 180%; margin-top: 50px; }

	/* コンテンツ幅 */
	#quality .contentsWidth { padding: 0 25px; }

}


/*--------------------------------------------------------------------------------------------------------------------------------------------------------
	固有
--------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* MV */
#quality #mvSec { background: url("../images/mv_img_pc.jpg") no-repeat center center / cover; }
#quality #mvSec h2 { max-width: 480px; margin: 0 auto; padding-top: 250px; }
#quality #mvSec div { max-width: 1300px; margin: 0 auto; padding: 100px 50px 100px; }
#quality #mvSec p { max-width: 430px; }

@media screen and (max-width: 767px) {
	#quality #mvSec { background: url("../images/mv_img_sp.jpg") no-repeat center center / cover; }
	#quality #mvSec h2 { width: 74%; padding-top: 180px; }
  #quality #mvSec div { margin: 0 auto; padding: 100px 30px 30px; }
}

/* 品質方針 */
#quality #qualitySec .contentsWidth { position: relative; }
#quality #qualitySec .contentsWidth > div { position: absolute; left: -80px; width: 410px; margin-top: 30px;  transition: left .4s; }
#quality #qualitySec .contentsWidth > div p { width: 100%; }
#quality #qualitySec .contentsWidth > p { text-align: left; font-size: 188%; line-height: 3; padding: 90px 0 0 360px; }

@media screen and ( max-width: 1200px) {
  #quality #qualitySec .contentsWidth > div { left: 0; width: 32vw; }
  #quality #qualitySec .contentsWidth > p { font-size: 2.5vw; padding: 7vw 0 0  33vw; }
}
  
@media screen and ( max-width: 800px) {
  #quality #qualitySec .contentsWidth > div { position: static; text-align: center; width: 100%; margin-left: 2vw; }
  #quality #qualitySec .contentsWidth > div p { width: 80%; margin: 0 auto; }
  #quality #qualitySec .contentsWidth > p { font-size: 120%; padding: 0 0 0 0; text-align: center; }
}

@media screen and (max-width: 767px) {
  #quality #qualitySec .leftLineTitle { margin-top: 0; }
	#quality #qualitySec { padding-top: 47px; }	
  #quality #qualitySec .contentsWidth > div { width: 100%; margin-top: 10px; }
  #quality #qualitySec .contentsWidth > div p { width: 100%; }
}

/* 行動指針 */
#quality #BehavioralSec .leftLineTitle { margin-top: 140px; }
#quality #BehavioralSec ul { display: flex; justify-content: space-between; align-items: center; }
#quality #BehavioralSec li { text-align: center; font-size: 163%; font-weight: 600; padding: 20px; margin-top: 50px; background: url("../images/bg_yellow.png") no-repeat center center; }

@media screen and (max-width: 1000px) {
  #quality #BehavioralSec li { text-align: center; font-size: 140%; }
}

@media screen and (max-width: 767px) {
  #quality #BehavioralSec .leftLineTitle { margin-top: 50px; }
  #quality #BehavioralSec ul { display: block; margin-top: 10px; }
  #quality #BehavioralSec li { text-align: left; padding: 20px; margin-top: 0; background: url("../images/bg_yellow.png") no-repeat left center / 60px; }	
  #quality #BehavioralSec li br { display: none; }
}

/* 背景 */
#quality #conttentsBg { background: url("../images/bg_pc.jpg") no-repeat center top / cover; margin-top: 90px; }
#quality #conttentsBg .leftLineTitle { border-left: solid 9px #fff48b; }
#quality #conttentsBg p { font-size: 125%; line-height: 2; padding: 0 15px; }

@media screen and (max-width: 767px) {
	#quality #conttentsBg { background: url("../images/bg_sp.jpg") no-repeat center top / cover; margin-top: 50px; }
  #quality #conttentsBg p { font-size: 100%; padding: 0; }
  #quality #conttentsBg p br { display: none; }
}

/* コンセプト */
#quality #conceptSec { padding-top: 90px; }
#quality #conceptSec .leftLineTitle { margin-top: 0; }
#quality #conceptSec p { margin-top: 40px; }

@media screen and (max-width: 767px) {
	#quality #conceptSec { padding-top: 50px; }
  #quality #conceptSec p { margin-top: 30px; }
}

/* 具体的な行動指針 */
#quality #concreteSec .contentsWidth { border-top: 1px solid #000; margin-top: 100px; }
#quality #concreteSec h4 { margin-top: 40px; padding: 0 15px; font-size: 163%; font-weight: 600; }
#quality #concreteSec p { margin-top: 10px; }
#quality #concreteSec p + p { margin-top: 40px; }

@media screen and (max-width: 767px) {
	#quality #concreteSec .contentsWidth { margin-top: 50px; }
  #quality #concreteSec h4 { margin-top: 30px; padding: 0; font-size: 150%; }
  #quality #concreteSec p + p { margin-top: 20px; }
}