@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

.mincho{
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
/*flexbox*/
.flex{display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;display: -webkit-flex;flex-wrap: wrap;-webkit-flex-wrap:wrap;}
.flex--start{/*左寄せ*/justify-content: flex-start;-webkit-justify-content: flex-start;}
.flex--center{/*中央寄せ*/justify-content: center;-webkit-justify-content: center;}
.flex--end{/*右寄せ*/justify-content: flex-end;-webkit-justify-content: flex-end;}
.flex--bet{/*残り余白の均等割り*/justify-content: space-between;-webkit-justify-content: space-between;}
.flex--around{/*左右余白 ＋ 均等割り*/justify-content: space-around;-webkit-justify-content: space-around;}
.flex--between{/*両端揃え*/-webkit-box-pack:justify;  -ms-flex-pack:justify;  justify-content:space-between;}
/*col*/
.col1{width:100%;}.col2{width:48%;}.col3{width:30%;}.col4{width:25%;}.col5{width:18.4%;}.col6{width:15%;}.col3_2{width: 68%}
.vaC{align-items: center;}.vaB{align-items: flex-end;}


#newproducts{ padding:14px 0;line-height: 1.6em }
	#newproducts #frame{display: block;}
	#newproducts #frame img{width: 100%;height: auto}
	#newproducts #frame h1{background: none;text-align: center;font-size: 30px;letter-spacing: 0.1em;line-height: 1.7;color: #231815;border-bottom: 1px solid #231815;padding-bottom: 20px;width: 70%;margin: 0 auto 20px}
	#newproducts #frame .txt{font-size: 14px;letter-spacing: 0.1em;line-height: 2;text-align: center}
	
	#newproducts #frame dl{width: 96%;margin: 60px auto 0}
	#newproducts #frame dl dt{width: 100%;margin: 0;padding: 0;position: relative;  overflow: hidden;}
	#newproducts #frame dl dd{margin: 0;padding: 0;margin-top: 30px}
	#newproducts #frame dl dd figure{padding: 0;margin: 0; display: block;position: relative}
	#newproducts #frame dl dd figure figcaption{position: absolute;left: 5px;bottom: 5px;color: #fff;font-size: 12px;}
	#seccontents #newproducts #frame dl dd h3{background: #000;padding: 8px;color: #fff;font-size: 15px;margin: 12px 0}
	#newproducts #frame dl dd ul.spec{border-right: 1px solid #666}
	#newproducts #frame dl dd ul.spec li{flex-grow: 1;text-align: center;display: flex;align-items: center;    justify-content: center;}
	#newproducts #frame dl dd ul.spec li{border-left: 1px solid #666}
	

#seccontents #newproducts #frame h2{ border-bottom:none; padding:0}
#seccontents #newproducts #frame dl dt::before {  content: "";  position: absolute;  top: 0;  left: 0;  right: 0;  height: 5px;  background: #000;}
#seccontents #newproducts #frame dl h2{  position: relative;  width: 45%;  background: #000;  color: #fff;  font-size: 20px;  font-weight: 700;  padding: 11px 20px;  box-sizing: border-box;  clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);}
#seccontents #newproducts #frame dl h2::before {  content: "";  position: absolute;  left: 0;  top: 0;  width: 10px;  height: 100%;  background: #000;}

#seccontents #newproducts #frame dl.c_red dt::before,
#seccontents #newproducts #frame .c_red h2,
#seccontents #newproducts #frame .c_red h2::before,
#seccontents #newproducts #frame dl.c_red dd h3{background: #b80010;}

#seccontents #newproducts #frame dl.c_blue dt::before,
#seccontents #newproducts #frame .c_blue h2,
#seccontents #newproducts #frame .c_blue h2::before,
#seccontents #newproducts #frame dl.c_blue dd h3{background: #005bac;}

#seccontents #newproducts #frame dl.c_green dt::before,
#seccontents #newproducts #frame .c_green h2,
#seccontents #newproducts #frame .c_green h2::before,
#seccontents #newproducts #frame dl.c_green dd h3{background: #008842;}


#seccontents #newproducts #frame dl.c_lightblue dt::before,
#seccontents #newproducts #frame .c_lightblue h2,
#seccontents #newproducts #frame .c_lightblue h2::before,
#seccontents #newproducts #frame dl.c_lightblue dd h3{background: #009fb9;}

#seccontents #newproducts #frame .col2 .col2{width: 49.4%}
#seccontents #newproducts #frame .col2 .col3{width: 32.5%}

#seccontents #newproducts #frame .box{border: 1px solid #666;display: inline-block;margin: 60px auto 0;padding: 40px}
#seccontents #newproducts #frame .box h4{text-align: center;border-bottom: 1px solid #333;padding-bottom: 20px;font-size: 16px}
#seccontents #newproducts #frame .box h4 span{font-size: 13px}
#seccontents #newproducts #frame .box li{margin-top: 20px;line-height: 2.3;text-align: left}
#seccontents #newproducts #frame .coution{text-align: left;width: 65%;margin: auto; font-size: 11px;margin-top: 20px}

#seccontents #newproducts #frame h2.copy{margin-top: 50px; color: #2e2f7b;font-weight: bold;text-align: center;font-size: 18px;letter-spacing: 0.05em;line-height: 2}
#seccontents #newproducts #frame h2.copy .underline{border-bottom: 1px solid #999}

@media screen and (max-width: 767px) {
#seccontents #frame{padding:30px 20px; display:block; }
#newproducts #frame h1{font-size: 20px;width: 90%;}
	#newproducts #frame .txt{font-size: 14px;letter-spacing: 0.1em;line-height: 2;text-align: center}
		#newproducts #frame dl{width: 100%;margin: 60px auto 0}

#seccontents #newproducts #frame dl h2{ width: 80%;  font-size: 18px;  }
#seccontents #newproducts #frame dd.col2{width: 100%}
#seccontents #newproducts #frame .box{margin: 60px auto 0;padding: 24px}
#seccontents #newproducts #frame .coution{width: 95%;}

}