@charset "UTF-8";
/* CSS Document */

/*top*/
.ttlArea .inner .item .left h1:after {
	content: url("../img/service_detail/h1_txt.svg");
	width: 90px;
}
/*catalog*/
.ttlArea .inner .item .right01 .img {
	background-image: url("../img/service_detail/ttl_bg01.webp");
}
/*flier*/
.ttlArea .inner .item .right02 .img {
	background-image: url("../img/service_detail/ttl_bg02.webp");
}
/*card*/
.ttlArea .inner .item .right03 .img {
	background-image: url("../img/service_detail/ttl_bg03.webp");
}
/*house_organ*/
.ttlArea .inner .item .right04 .img {
	background-image: url("../img/service_detail/ttl_bg04.webp");
}
/*label*/
.ttlArea .inner .item .right05 .img {
	background-image: url("../img/service_detail/ttl_bg05.webp");
}
/*manual*/
.ttlArea .inner .item .right06 .img {
	background-image: url("../img/service_detail/ttl_bg06.webp");
}


/*common*/
.serviceArea .desc01,
.serviceArea .desc02,
.serviceArea .desc03{
	padding-top:50px;
}
.serviceArea .inner{
	max-width: 1040px;
	padding: 0 20px;
	margin:0 auto;
	display: flex;
	align-items: center;
}
.serviceArea .desc03,.serviceArea .last{
	padding-bottom:100px;
}
.serviceArea .block{
	display: block;
}
.serviceArea .left{
	width: 45%;
	padding-right:40px;
}
.serviceArea .right{
	width:55%;
}
.serviceArea .inner .img{
	width: 100%;
	background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	aspect-ratio: 550/340;
}

/*h2*/
.serviceArea h2{
	font-size: clamp(1.25rem, 1.155rem + 0.47vw, 1.688rem);
	font-weight: bold;
	position: relative;
	text-align: center;
	margin-bottom: 30px;
}

.serviceArea .h201:after{
	position: absolute;
	content: url("../img/common/hc_l.svg");
	width: 28px;
	bottom:-20px;
	left:50%;
	transform: translateX(-50%);
}

.serviceArea .h202:after{
	position: absolute;
	content: url("../img/common/hc_r.svg");
	width: 28px;
	bottom:-20px;
	left:50%;
	transform: translateX(-50%);
}
/*h3*/
.serviceArea h3 {
	color: #1D5DA4;
	font-size: clamp(1.125rem, 1.084rem + 0.2vw, 1.313rem);
	font-weight: bold;
	border-left: 5px solid;
	padding-left: 15px;
	margin-bottom: 16px;
}
.serviceArea h3 .under {
	border-bottom: solid 3px #FFD300;
}
.serviceArea p{
	font-size: clamp(0.875rem, 0.848rem + 0.14vw, 1rem);
	line-height: 1.7;
}
.serviceArea .p01{
    font-size: clamp(0.813rem, 0.785rem + 0.14vw, 0.938rem);
    padding: 20px;
}


/*btn*/
.btn02 {
	position: relative;
	display: block;
	width: 190px;
	background: #1d5da4;
	color: #fff;
	padding: 14px 20px;
	text-align: left;
	transition: ease .2s;
	border: 1px solid #1d5da4;
	border-top-right-radius: 26px;
	margin-top:40px;
}
.btn02:hover {
	background: #fff;
	color: #1d5da4;
}
.btn02:hover span {
	background: #fff;
}
.btnarrow:after {
	content: ">";
	position: absolute;
	top: 12px;
	right: 20px;
	color: #fff;
	transition: all .3s;
}
.btnarrow:hover:after {
	right: 10px;
	color: #1d5da4;
}

/*imgbox*/
.serviceArea .imgBox{
	display: flex;
	justify-content: flex-start;
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.serviceArea .imgBox img{
	width: 35%;
	padding:15px 10px 0 0;
}

/*pleaseBox*/
.pleaseBox {
	width: 100%;
	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: -34px;
    width: 28px;
}
.pleaseBox dd {
	font-size: clamp(0.813rem, 0.785rem + 0.14vw, 0.938rem);
}

/*img*/
/*catalog*/
.serviceArea .desc01 .inner .right01 .img{
	background-image: url("../img/service_detail/bg01.webp");
}
.serviceArea .desc02 .inner .right02 .img{
	background-image: url("../img/service_detail/bg02.webp");
}
/*flier*/
.serviceArea .desc01 .inner .right03 .img{
	background-image: url("../img/service_detail/bg03.webp");
}
/*flier*/
.serviceArea .desc01 .inner .right04 .img{
	background-image: url("../img/service_detail/bg04.webp");
}
/*house_organ*/
.serviceArea .desc01 .inner .right05 .img{
	background-image: url("../img/service_detail/bg05.webp");
}
/*label*/
.serviceArea .desc01 .inner .right06 .img{
	background-image: url("../img/service_detail/bg06.webp");
}
.serviceArea .desc02 .inner .right07 .img{
	background-image: url("../img/service_detail/bg07.webp");
}
/*manual*/
.serviceArea .desc01 .inner .right08 .img{
	background-image: url("../img/service_detail/bg08.webp");
}
.serviceArea .desc02 .inner .right09 .img{
	background-image: url("../img/service_detail/bg09.webp");
}

/*flier*/
.serviceArea .desc02 .block,
.serviceArea .desc03 .block {
	display: block;
}
.serviceArea .lineup img{
	width: 13%;
	padding:15px 10px 0 0;
}
/*BlueBox*/
.serviceArea .BlueBox dl {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding:30px 20px 10px;
	background: linear-gradient(90deg, rgba(236,246,251,1) 0%, rgba(226,243,248,1) 53%, rgba(206,238,243,1) 100%);
}
.serviceArea .BlueBox dl div {
	background-color: #fff;
	padding: 200px 32px 20px;
	width: 24%;
	box-shadow: 1px 3px 5px rgb(0 0 0 / 20%);
}
.serviceArea .BlueBox dl div:nth-of-type(-n+9) {
	margin-bottom: 2%;
}
.serviceArea .BlueBox 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;
	color: #1d5da4;
}
.serviceArea .BlueBox dl div dt::before {
	top: -180px;
    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;
}
.serviceArea .BlueBox dl div:first-of-type dt::before {
    background-image: url(../img/service_detail/data03.svg);
}
.serviceArea .BlueBox dl div:nth-of-type(2) dt::before {
    background-image: url(../img/service_detail/data04.svg);
}
.serviceArea .BlueBox dl div:nth-of-type(3) dt::before {
    background-image: url(../img/service_detail/data05.svg);
}
.serviceArea .BlueBox dl div:nth-of-type(4) dt::before {
    background-image: url(../img/service_detail/data06.svg);
}

.serviceArea .BlueBox 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;
}
.serviceArea .BlueBox dl div dd {
	font-size: clamp(0.813rem, 0.785rem + 0.14vw, 0.938rem);
}

/*card*/
.serviceArea .desc02 .inner ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.serviceArea .desc02 .inner ul li {
	width: 48%;
	border-top: 2px solid #D1D1D1;
    padding: 30px 30px 40px;
}
.serviceArea .desc02 .inner ul li .img {
	margin-bottom: 20px;
}
.serviceArea .desc02 .inner ul li .img a {
	display: block;
}
.serviceArea .desc02 .inner ul li .img a img {
	object-fit: cover;
    width: 100%;
    aspect-ratio: 420/320;
}
.serviceArea .desc02 .inner ul li h2 {
	font-size: clamp(1rem, 0.946rem + 0.27vw, 1.25rem);
	font-weight: bold;
	position: relative;
	padding-left: 35px;
	text-align: left;
	margin:0;
}
.serviceArea .desc02 .inner ul li h2::before {
	content: url(../img/common/hc_l.svg);
    position: absolute;
	top: -4px;
    left: 0px;
    width: 28px;
}


@media screen and (max-width: 1000px) {
	
.serviceArea .BlueBox dl div {
	padding: 180px 24px 20px;
}
.serviceArea .BlueBox dl div dt::before {
	top: -150px;
	height: 120px;
    width: 120px;
}
}

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

.serviceArea .desc01,
.serviceArea .desc02,
.serviceArea .desc03{
	padding-top:40px;
}
.serviceArea .desc03{
	padding-bottom:50px;
}
.serviceArea .inner{
    padding: 0px 20px 0;
    display: flex;
    flex-direction: column-reverse;
}
.serviceArea .desc02 .inner .img{
	margin-bottom:40px;
}
.serviceArea .inner .left{
    width: 100%;
	padding-right:0;
}
.serviceArea p {
    padding: 20px;
}
.serviceArea .right{
	width:100%;
}	
.serviceArea h3{
	margin:0 0 0 0;
}
.btn02 {
	margin-top:0;
}
.pleaseBox {
    margin-bottom: 0;
}
.serviceArea .imgBox img{
	width: 25%;
	padding:15px 10px 0 0;
}
/*catalog*/
.serviceArea .catalog{
	padding-top:0;
}	
	
/*flier*/
.serviceArea .lineup img{
	width: 18%;
	padding-top:20px;
}
.serviceArea .BlueBox dl div {
    width: 48%;
}
.serviceArea .BlueBox dl div:nth-of-type(-n+10) {
    margin-bottom: 2%;
}
.serviceArea .desc02 .inner ul li {
    padding: 30px 30px 20px;
}
}

@media screen and (max-width: 600px) {
.serviceArea .BlueBox dl div {
    padding: 170px 20px 20px;
}
.serviceArea .BlueBox dl div dt::before {
	top: -150px;
    height: 130px;
    width: 130px;
}
.serviceArea .imgBox img{
	width: 23%;
}
}

@media screen and (max-width: 500px) {
.serviceArea .desc02 .inner ul li {
    width: 100%;
	padding: 30px 20px 20px;
}
}

@media screen and (max-width: 450px) {
.serviceArea .imgBox img{
	width: 30%;
}
.serviceArea .BlueBox 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: -23px;
    width: 20px;
}

/*flier*/
.serviceArea .lineup img{
	width: 25%;
	padding-top:20px;
}

@media screen and (max-width: 400px) {
.serviceArea .BlueBox dl div {
    width: 100%;
    padding: 140px 20px 20px;
}
.serviceArea .BlueBox dl div:nth-of-type(-n+11) {
    margin-bottom: 2%;
}
.serviceArea .BlueBox dl div dt::before {
    top: -120px;
    height: 110px;
    width: 110px;
}
}