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

/* common */

.over_video {
	margin-top: 3em;
	text-align: center;
}
.over_video p {
	margin-top: 1em;
}
.caution {
	font-size: 1.2rem;
}
h4 {
	font-size: 2.2rem;
	color: #279ca1;
	margin: 2em 0 1em;
}

/* content */
.ubq2 section h2 {
	font-size: 5.0rem;
	color: #279ca1;

}
.featuresBox {
	position: relative;
	color: #fff;
	background: linear-gradient(to right, #048585, #61b2b4);
	margin-top: 48px;
}
.featuresBox .container {
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 2em;
}
.featuresBox .title {
	margin-left: 2em;
}
.featuresBox .title strong {
	font-size: 2.0rem;
	font-weight: 700;
	margin-right: 1em;
}
.featuresBox .title span {
	font-size: 1.4rem;
	font-weight: 700;
}
.features-content {
	font-size: 1.8rem;
	padding: 1.5em 0;
}
.features-content li {
	margin: .8em 0;
}
.check {
	display: inline-block;
	padding-right: 5px;
	font-family: "Noto Sans Symbols", sans-serif;
	font-size: 2.2rem;
	transform: scaleX(1.2);
	vertical-align: -0.1em;
}

.featuresBox .photo img{
	display :block;
	margin-top: -165px;
}

.ubq2 section h3 {
	font-size: 2.6rem;
	color: #279ca1;
  padding-bottom: .3em;
	margin-top: 2em;
	margin-bottom: .8em;
  background-image: linear-gradient(to right, #279ca1 275px, #d9d9d9 275px);
  background-position: bottom left;
  background-size: 100% 3px; /* 線の太さ */
  background-repeat: no-repeat;
}

.benefitList {
}
.benefitList li {
	margin-bottom: 3em;
}
.benefitList li dl {
	display: flex;
	align-items: center;
}
.benefitList li dl dt {
	margin-right: 2em;
}
.benefitList li dl dd strong {
	display: block;
	color: #279ca1;
	font-size: 2.6rem;
	font-weight: 700;
	margin-bottom: .8em;
}
.benefitList li dl dd p {
	line-height: 1.6;
}

.advanceBox {
	padding: 3em 1em 3em;
	background-color: #f5f5f5;
}
.advanceBox dl {
	display: flex;
	align-items: center;
}
.advanceBox dt {
	margin: 0 2em;
}
.advanceBox dd strong {
	display: block;
	font-size: 3.0rem;
	color: #279ca1;
	font-weight: 700;
}
.advanceBox dd p {
	font-size: 1.8rem;
	font-weight: 700;
	margin-top: 1em;
	color: #4d4d4d;
}
.advanceBox ul {
	display: flex;
	gap: 1.5em;
	padding: 3em 1em 1em
}
.advanceBox ul li {
	background-color: #fff;
	flex:1
}
.advanceBox ul .title {
	background-color: #279ca1;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 700;
	text-align: center;
	padding: 12px 0;
}
.advanceBox ul li > div {
	padding: 2em .5em;
}
.advanceBox ul .image {
	text-align: center;
}
.advanceBox ul .text {
	margin-top: 2em;
	line-height: 1.6;
}
.checkList {
	margin: 1em 0 2em;
}
.checkList li {
	font-size: 1.8rem;
	font-weight: 700;
	margin: 1em 0 0 1em;
}
.checkList .check {
	color: #279ca1;
}
.checkList li span.caution {
	font-size: 1.4rem;
	background-color: #b5dde0;
	font-weight: 400;
	margin-left: 1em;
}
.techniquesBox {
	display: flex;
	justify-content: space-between;
}
.techniquesBox > div {
	width: 284px;
}
.techniquesBox .title {
	font-size: 1.6rem;
	font-weight: 700;
	margin: .6em 0;
}

#resinUper {
}
#resinUper dt {
}
#resinUper dt:not(span) {
	font-size: 1.6rem;
	color:  #279ca1;
	font-weight: 700;
	display: flex;
	align-items: center;
}
#resinUper dt span.normalTxt {
	font-weight: 400;
	color: #000;
	margin-left: 1em;
}

#resinUper dt .num {
	background-color: #279ca1;
	color: #fff;
	font-size: 2.4rem;
	font-weight: 700;
	padding: 1px 10px;
	margin-right: .5em;
}
#resinUper dd {
	margin: 1em 0;
}

#etchingBoxs {
	display: flex;
	gap: 15px;
}
#etchingBoxs > div {
	border: 1px solid #279ca1;
	flex: 1;
	padding: 1.5em 1em;
}
#etchingBoxs > div:first-child {
	display: flex;
	flex-direction: column;
}
#etchingBoxs > div:first-child .boxTtl {
	flex-shrink: 0;
}
#etchingBoxs > div > div {
	margin-top: auto;
	margin-bottom: auto;
	text-align: center;
}
#etchingBoxs > div > div span {
	background-color: #f0f0f0;
	font-weight: 700;
	color:  #279ca1;
	padding: 1em 1.6em;
	border-radius: 30px;
}
#etchingBoxs .boxTtl {
	font-size: 1.8rem;
	font-weight: 700;
	color:  #279ca1;
}
#etchingBoxs .text {
	font-size: 1.4rem;
	margin-top: .3em;
	line-height: 1.7;
}
#etchingBoxs .image {
	text-align: center;
}
.step-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 均等に4等分 */
  column-gap: 20px;                      /* ステップ間の隙間 */
}
.step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列 */
  grid-template-rows: auto auto;         /* 1行目(タイトル)と2行目(画像)の高さ自動 */
  row-gap: 0;                         /* 上下の隙間 */
  column-gap: 20px;                      /* 左右の隙間 */
}
h4.step-title {
	font-size: 1.6rem;
	font-weight: 700;
	display: grid;
  grid-template-columns: auto 1fr; 
  column-gap: 0.5em;
  align-items: start;
	min-height: 3em;
	line-height: 1.3;
}
h4.step-title .num {
	background-color: #279ca1;
	color: #fff;
	font-size: 2.4rem;
	font-weight: 700;
	padding: 1px 10px;
}
#DifferencesLight {
	margin-top: 2em;
}
#DifferencesLight .tableType01 {
	width: auto;
}
#DifferencesLight .tableType01 th ,
#DifferencesLight .tableType01 td {
	text-align: left;
	padding: 1em 3em;
}
#DifferencesLight .tableType01 th {
	background-color: #e5e5e5;
	font-weight: 400;
}

#DataSeetSprit  {
	display: flex;
	margin-top: 2em;
	justify-content: space-between;
}
#DataSeetSprit  .title {
	color: #279ca1;
	font-size: 2.0rem;
}
#DataSeetSprit  .title span {
	font-weight: 700;
}
#DataSeetSprit .graph > div {
	display: flex;
	justify-content: center;
	gap: 35px;
	font-size: 1.3rem;
	margin-bottom: 1.5em;
}
#DataSeetSprit .graph > div p {
	text-align: center;
}
#DataSeetSprit .graph > div p:last-child {
	position: relative;
	left: 11px;
}
#DataSeetSprit .graph > div p strong {
	font-weight: 700;
}
#DataSeetSprit  .text {
	font-size: 1.2rem;
}




/* /////////////////////// SP /////////////////////////////*/
@media screen and (max-width:767px){

	.fullWrap {
		width: 100%;
		max-width: 100vw;
	}
	.featuresBox .title{
			margin-left: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 20px;
		}
	.featuresBox .title strong {
		font-size: 2.6rem;
		margin-right: 0;
		margin-top: .6em;
	}
	.featuresBox .container {
		justify-content: unset;
		gap: unset;
		flex-direction: column;
		padding: 1em;
	}
	.featuresBox .title& {
		aling-items: senter;
	}
	.ubq2 section h2 {
		font-size: 2.6rem;
	}
	.featuresBox .photo img {
		width: 30vw;
		height: auto;
		margin-top: unset;
	}
	.featuresBox .title span {
		  display: inline-block;
		transform: rotate(90deg);
		writing-mode: horizontal-tb;
	}
	.features-content li {
		display :flex;
	}
	.ubq2 section h3 {
		font-size: 2.0rem;
	}
	.benefitList li dl ,
	.advanceBox dl,
	.advanceBox ul {
		flex-direction: column;
	}
	.benefitList li dl dd strong {
		font-size: 2.0rem;
		text-align: center;
	}
	.benefitList li dl dt {
		text-align: center;
		margin-right: unset;
	}
	.benefitList li dl dt img {
		width: 30vw;
		height:auto;
	}
	.advanceBox {
		padding: 1em;
	}
	.advanceBox dd strong {
		font-size: 2.2rem;
		text-align: center;
	}
	.advanceBox dd p {
		text-align: center;
	}
	.checkList li {
		display: flex;
	}
	#etchingBoxs,
	.step-grid,
	.techniquesBox {
		width: 890px;
	}
	#DataSeetSprit {
		flex-direction: column;
		gap: 2em;
	}
	#DataSeetSprit .graph img {
		width: 100%;
		height:auto ;
	}
	#DataSeetSprit .graph > div {
		gap: 7%;
	}

}