@charset "UTF-8";
/* CSS Document */
.ttlArea .inner .item .left h1:after {
	content: url("../img/manufacturing/h1_txt.svg");
	width: 180px;
}
.ttlArea .inner .item .right .img {
	background-image: url("../img/manufacturing/ttl_bg.webp");
}
.manufacturingArea .desc01 .inner {
	max-width: 1040px;
	padding: 50px 20px 0;
}
.manufacturingArea .desc .inner h2 {
	font-size: clamp(1.25rem, 1.155rem + 0.47vw, 1.688rem);
	font-weight: bold;
	position: relative;
	text-align: center;
	margin-bottom: 50px;
}
.manufacturingArea .desc .inner h2:after {
	position: absolute;
	width: 28px;
	bottom:-20px;
	left:50%;
	transform: translateX(-50%);
}
.manufacturingArea .desc01 {
	margin-bottom: 40px;
}
.manufacturingArea .desc01 .inner h2:after,
.manufacturingArea .desc02 .inner h2:after {
	content: url("../img/common/hc_r.svg");
}
.manufacturingArea .desc03 .inner h2:after {
	content: url("../img/common/hc_l.svg");
}
.manufacturingArea .desc01 .inner .item,
.manufacturingArea .desc03 .inner .item{
	display: flex;
}
.manufacturingArea .desc01 .inner .item .left,
.manufacturingArea .desc03 .inner .item .left{
	width: 45%;
}
.manufacturingArea .desc01 .inner .item .left p,
.manufacturingArea .desc03 .inner .item .left p{
	font-size: clamp(0.875rem, 0.848rem + 0.14vw, 1rem);
	padding: 20px 30px 0 0;
	line-height: 1.7;
}
.manufacturingArea .desc01 .inner .item .right {
	background-image: url("../img/manufacturing/technology.webp");
	background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	width: 55%;
    aspect-ratio: 550/340;
}
.manufacturingArea .desc02 {
	background: linear-gradient(270deg, rgba(206,238,243,1) 0%, rgba(236,246,251,1) 100%);
}
.manufacturingArea .desc02 .inner {
	max-width: 1040px;
	padding: 50px 20px;
}
.manufacturingArea .desc02 .inner dl {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.manufacturingArea .desc02 .inner dl div {
	background-color: #fff;
	padding: 200px 32px 20px;
	width: 31%;
	box-shadow: 1px 3px 5px rgb(0 0 0 / 20%);
}
.manufacturingArea .desc02 .inner dl div:nth-of-type(-n+9) {
	margin-bottom: 2%;
}
.manufacturingArea .desc02 .inner dl div dt {
	position: relative;
	font-size: clamp(0.938rem, 0.91rem + 0.14vw, 1.063rem);
	font-weight: bold;
	text-align: center;
	margin-bottom: 15px;
}
.manufacturingArea .desc02 .inner dl div dt::before {
	top: -170px;
    content: '';
    background-image: url(../img/manufacturing/process01.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: absolute;
    height: 150px;
    width: 150px;
    right: 0;
    left: 0;
    margin: auto;
}
.manufacturingArea .desc02 .inner dl div:first-of-type dt::before {
    background-image: url(../img/manufacturing/process01.svg);
}
.manufacturingArea .desc02 .inner dl div:nth-of-type(2) dt::before {
    background-image: url(../img/manufacturing/process02.svg);
}
.manufacturingArea .desc02 .inner dl div:nth-of-type(3) dt::before {
    background-image: url(../img/manufacturing/process03.svg);
}
.manufacturingArea .desc02 .inner dl div:nth-of-type(4) dt::before {
    background-image: url(../img/manufacturing/process04.svg);
}
.manufacturingArea .desc02 .inner dl div:nth-of-type(5) dt::before {
    background-image: url(../img/manufacturing/process05.svg);
}
.manufacturingArea .desc02 .inner dl div:nth-of-type(6) dt::before {
    background-image: url(../img/manufacturing/process06.svg);
}
.manufacturingArea .desc02 .inner dl div:nth-of-type(7) dt::before {
    background-image: url(../img/manufacturing/process07.svg);
}
.manufacturingArea .desc02 .inner dl div:nth-of-type(8) dt::before {
    background-image: url(../img/manufacturing/process08.svg);
}
.manufacturingArea .desc02 .inner dl div:nth-of-type(9) dt::before {
    background-image: url(../img/manufacturing/process09.svg);
}
.manufacturingArea .desc02 .inner dl div:nth-of-type(10) dt::before {
    background-image: url(../img/manufacturing/process10.svg);
}
.manufacturingArea .desc02 .inner dl div:nth-of-type(11) dt::before {
    background-image: url(../img/manufacturing/process11.svg);
}
.manufacturingArea .desc02 .inner dl div:nth-of-type(12) dt::before {
    background-image: url(../img/manufacturing/process12.svg);
}
.manufacturingArea .desc02 .inner dl div dt::after {
	position: absolute;
	content: '';
    width: 120px;
    height: 2px;
    display: inline-block;
    background-color: #FFD300;
    bottom: -10px;
    right: 0;
    left: 0;
    margin: auto;
}
.manufacturingArea .desc02 .inner dl div dd {
	font-size: clamp(0.813rem, 0.785rem + 0.14vw, 0.938rem);
}
.manufacturingArea .desc03 .inner {
	max-width: 1040px;
	padding: 50px 20px 100px;
}
.manufacturingArea .desc03 .inner .item {
	margin-bottom: 20px;
}
.manufacturingArea .desc03 .inner .item .right {
	background-image: url("../img/manufacturing/convert.webp");
	background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	width: 55%;
    aspect-ratio: 550/340;
}
.pleaseBox {
	padding: 30px 20px;
	background: linear-gradient(90deg, rgba(236,246,251,1) 0%, rgba(226,243,248,1) 53%, rgba(206,238,243,1) 100%);
}
.pleaseBox dt{
	font-size: clamp(0.938rem, 0.897rem + 0.2vw, 1.125rem);
	font-weight: bold;
	position: relative;
	display: inline-block;
	padding: 0 0 10px 40px;
}
.pleaseBox dt::before {
	content: url(../img/common/y_circle.svg);
    position: absolute;
    top: -3px;
    left: 6px;
    width: 28px;
}
.pleaseBox dt::after {
    content: url(../img/common/y_circle.svg);
    position: absolute;
    top: -3px;
    right: -24px;
    width: 28px;
}
.pleaseBox dd {
	font-size: clamp(0.813rem, 0.785rem + 0.14vw, 0.938rem);
}
@media screen and (max-width: 767px) {
.manufacturingArea .desc .inner h2 {
    margin-bottom: 30px;
}
.manufacturingArea .desc01 .inner {
    max-width: 1040px;
    padding: 40px 20px 0;
}
.manufacturingArea .desc02 .inner {
    padding: 40px 20px;
}
.manufacturingArea .desc03 .inner {
    max-width: 1040px;
    padding: 40px 20px 50px;
}
.manufacturingArea .desc01 .inner .item,
.manufacturingArea .desc03 .inner .item {
    display: flex;
    flex-direction: column-reverse;
}
.manufacturingArea .desc01 .inner .item .left,
.manufacturingArea .desc03 .inner .item .left {
    width: 100%;
}
.manufacturingArea .desc01 .inner .item .left p,
.manufacturingArea .desc03 .inner .item .left p {
    padding: 20px 10px;
}
.manufacturingArea .desc01 .inner .item .right,
.manufacturingArea .desc03 .inner .item .right{
    width: 100%;
}
.manufacturingArea .desc02 .inner dl div {
    width: 48%;
}
.manufacturingArea .desc02 .inner dl div:nth-of-type(-n+10) {
    margin-bottom: 2%;
}
}
@media screen and (max-width: 600px) {
.manufacturingArea .desc02 .inner dl div {
    padding: 170px 20px 20px;
}
.manufacturingArea .desc02 .inner dl div dt::before {
	top: -150px;
    height: 130px;
    width: 130px;
}
}
@media screen and (max-width: 450px) {
.manufacturingArea .desc02 .inner dl div {
    width: 49%;
	padding: 170px 10px 20px;
}
.pleaseBox dt {
    padding: 0 0 10px 20px;
}
.pleaseBox dt::before {
    left: -4px;
    width: 20px;
}
.pleaseBox dt::after {
    right: -15px;
    width: 20px;
}
}
@media screen and (max-width: 400px) {
.manufacturingArea .desc02 .inner dl div {
    width: 100%;
    padding: 140px 20px 20px;
}
.manufacturingArea .desc02 .inner dl div:nth-of-type(-n+11) {
    margin-bottom: 2%;
}
.manufacturingArea .desc02 .inner dl div dt::before {
    top: -120px;
    height: 110px;
    width: 110px;
}
}