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

#cad_materials section h2 {
	font-size: 2.6rem;
	font-weight: 600;
	color: #e65a6b;
	margin-bottom: 1em;
}

.btwFlex {
	display: flex;
	justify-content: space-between;
	margin-top: .7em;
}
.normalTxt {
}
.subTxt {
	font-size: 1.2rem;
}

#cad_materials .featureBlock {
	padding-bottom: 0;
}
.featureBlock {
  /* 親の padding (33px) 分だけ左右に広げる */
  --side-padding: 33px; /* ここで定義 */
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
}

/* スマホ用のメディアクエリで1箇所変えるだけ */
@media (max-width: 768px) {
  .featureBlock {
    --side-padding: 15px;
  }
}
.featureBlock section {
	/*border-bottom: 1px dotted #ddd;*/
	padding-bottom: 2em;
	margin-bottom: 3em;
	position: relative;
	line-height: 1.8;
}
.featureBlock section::after {
	content: "";
  position: absolute;
  bottom: 0;
  height: 1px;
  border-bottom: 1px dotted #a6a6a6;
	/* section側は自動で追従する */
  left: calc(var(--side-padding) * -1);
  right: calc(var(--side-padding) * -1);
}
.featureBlock section article {
	margin: 5em 0;
}
.featureBlock > section:last-of-type {
	margin-bottom: 0;
	padding-bottom: 0;
}
.featureBlock > section:last-of-type::after {
		display: none;
}

/* Features Benefits コンテナ*/
.grid-container {
  max-width: 888px; 
  margin: 0 auto;
}

/* ==========================================
   グリッドの共通定義（縦のラインを揃えるコア設定）
========================================== */
.grid-header-row,
.grid-row {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 左1 : 右2 の比率を共通化 */
  gap: 30px;                      /* 左右の間隔を共通化 */
}

/* ==========================================
   見出し行のスタイル
========================================== */
.grid-header-row {
  margin-bottom: 15px; /* 見出しとコンテンツの間の余白 */
}

.left-header,
.right-header {
  font-size: 2.2rem;
  font-weight: 600;
  color: #4d4d4d;
}

/* ==========================================
   コンテンツ行（等高カラム）のスタイル
========================================== */
.grid-row {
  align-items: stretch; /* 右のテキスト量に合わせて左の背景を伸ばす */
  margin-bottom: 20px;  /* 各行の間の余白 */
}

/* 左カラム（背景色あり・上下中央揃え） */
.left-col {
  background-color: #e65a6b; 
  color: white;
  padding: 18px;
  display: flex;
  align-items: center;       /* 背景が伸びても文字は常に上下中央 */
  gap: 15px;
}

.left-col .num {
	width: 35px;
	min-width: 35px;
	height: 42px;
  font-size: 2.8rem;
  font-weight: bold;
  line-height: 1;
	background-position: center;
	background-repeat: no-repeat;
}
.left-col .num.n1 { background-image: url("../images/katana_zirconia_yml/num_01.svg"); }
.left-col .num.n2 { background-image: url("../images/katana_zirconia_yml/num_02.svg"); }
.left-col .num.n3 { background-image: url("../images/katana_zirconia_yml/num_03.svg"); }
.left-col .num.n4 { background-image: url("../images/katana_zirconia_yml/num_04.svg"); }

.left-col .txt {
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1.7;
}

/* 右カラム（テキスト） */
.right-col {
  display: flex;
  align-items: center; /* 右側の文章も、左の高さに合わせて上下中央にしたい場合はこれを入れる（不要なら削除） */
  line-height: 1.6;
  font-size: 1.6rem;
}
.right-col strong {
	font-weight: 500;
}

.right-col p {
  margin: 0;
}

#cad_materials section h3 {
	font-size: 2.6rem;
	color: #e65a6b;
  padding-bottom: .3em;
	margin-bottom: 1.3em;
  background-image: linear-gradient(to right, #e65a6b 275px, #d9d9d9 275px);
  background-position: bottom left;
  background-size: 100% 3px; /* 線の太さ */
  background-repeat: no-repeat;
}
.desireBox {
	width: 600px;
	margin: 0 auto;
}
.shotTtl {
	font-size: 2.6rem;
	font-weight: 600;
	margin: 1em 0 .5em;
	text-align: center;
	color: #4d4d4d;
}
.blockTtl {
	font-size: 2.2rem;
	font-weight: 600;
	margin: 1em 0 .5em;
	color: #4d4d4d;
}
.imgCap {
	font-size: 1.2rem;
	text-align: right;
	padding-top: .7em;
}

.flexWrap.AIO_Solution{
	overflow: hidden;
}

.AIO_Solution p {
	align-self: center;
}
	overflow: hidden;
.check {
	display: inline-block;
	font-family: "Noto Sans Symbols", sans-serif;
	font-size: 2.2rem;
	color: #2d2d2d;
	transform: scaleX(1.2);
	vertical-align: -0.1em;
}

p.checkTxt {
	padding-right: 5em;
	line-height: 1.6;
}
.over_video {
	margin-top: 3em;
	text-align: center;
}
.over_video p {
	margin-top: 1em;
}
.comparisonTbl {

}
.comparisonTbl strong {
	font-weight: 600;
}
.comparisonTbl th {
	font-weight: 400;
}
.comparisonTbl th  ,
.comparisonTbl td  {
	text-align: center;
	font-size: 1.4rem;
	padding: .8em;
}
.comparisonTbl td.bg  {
	background-color: #f0f0f0;
	line-height: 1.4;
}
.comparisonTbl td.bg[colspan="2"] {
	padding-top: 0;
}
.tableWrap {
	margin-left: -33px;  /* 左のpadding分だけ外に出す */
	margin-right: -33px; /* 右のpadding分だけ外に出す */
  width: auto;
}
.sinteringTbl  {
	width: 100%;
}
.sinteringTbl th ,
.sinteringTbl td {
	text-align: center;
	padding: .8em;
	border:1px solid #979494;
	font-size: 1.1rem;
	line-height: 1.4;
	vertical-align: middle;
}

.sinteringTbl th {
	background-color: #f8d6ce;
}
.sinteringTbl th span {
	font-weight: 400;
}
.sinteringTbl td.bg {
	background-color: #e5e5e5;
	font-weight: 500;
}

.shadeTbl {
	width: 100%;
}
.shadeTbl th ,
.shadeTbl td {
	text-align: center;
	vertical-align: middle;
	font-size: 1.2rem;
	padding: 4px;
	border:1px solid #979494;
}
.shadeTbl th {
	background-color: #808080;
	color: #fff;
}
.shadeTbl td.bg {
	background-color: #e5e5e5;
}
.shadeTbl td.series {
	background-color: #e45259;
	font-size: 2.4rem;
	color: #fff;
	font-weight: 600;
	padding: 1em;
}
.shadeTbl td.shade {
	text-align: left;
}
.shadeTbl td.shade span {
	font-size: 1.4rem;
	display: inline-block;
	padding: .4em;
	background-color: #f8d6ce;
	border-radius: 6px;
	margin: 3px;
	width: 3.7em;
	text-align: center;
}

/* /////////////////////// SP /////////////////////////////*/
@media screen and (max-width:767px){
	.flexWrap.spCol {
		flex-direction: column;
	}
	.spCol .mgl2em {
		margin-left: 0;
		margin-top: 1em;
	}
	.desireBox {
		width: 100%;
	}
	img {
		max-width: 100%;
		height: auto;
	}
	.tableWrap {
		margin-left: 0;
		margin-right: 0;
	}
	.fullWrap {
		width: 100%;
		max-width: 100vw;
	}
	.fullWrapImg {
		width: 888px;
		height: auto;
		max-width: unset;
	}
	#cad_materials section h3 {
		font-size: 2.1rem;
	}
	#cad_materials section h3 ,
	.shotTtl ,
	.blockTtl {
		line-height: 1.4;
	}
	.right-header {
		font-size: 1.8rem;
		display: none;
	}
	.left-header:after {
		content: "/Benefits"
	}
	.grid-row {
		grid-template-columns: 1fr;
	}
	.sinteringTbl {
		width: 890px;
	}
	.AIO_Solution {
		width: 890px;
		gap: 0 1em;
	}
	.shadeTbl {
		width: 880px;
	}

}