@charset "utf-8";

/* Common */
.tit-deco {position: relative; padding-bottom: 35px; line-height: 1em;}
.tit-deco.item-tit {padding-bottom: 30px;}
.tit-deco:before {position: absolute; content: ''; background: url('../images/sub/tit_deco.png') no-repeat center center; background-size: contain; left: 0; bottom: 0; width: 88px; height: 8px;}
.doc-tit {font-weight: 700; font-size: 28px; line-height: 1.429em;}
.doc-tit.large {font-size: 34px;}
.item-tit {font-size: 24px; font-weight: 600;}
.doc-txt {margin-top: 50px;}
.doc-txt p:not(:first-child) {margin-top: 25px;}

/* sub01 */
.about .section {margin-bottom: 40px;}
.about .section .doc-cnt {display: flex; align-items: center; justify-content: flex-end;}
.about .section .doc-cnt > .img {width: 50%;}
.about .section	 .doc-cnt > .img img {width: 100%; height: 100%; object-fit: cover;}
.about .section .doc-cnt .doc-desc {width: 50%; max-width:680px; padding-left: 30px; padding-right: 80px;}

.about .containers .doc-cnt {justify-content: flex-start;}
.about .containers .doc-cnt .doc-desc {padding-left: 80px; padding-right: 30px;}

.about .chemical .item-cnt {padding-left: 38px; margin-top: 65px;}
.about .chemical .items {display: flex; justify-content: space-between; gap: 10px;}
.about .chemical .item {flex: 1;}
.about .chemical .item .img {position: relative;}
.about .chemical .item .img:before {position: absolute; content: ''; width: 90px; height: 90px; bottom: 0; left: 38px; transform: translateY(50%);}
.about .chemical .item:nth-child(1) .img:before {background: url('../images/sub/ico_chemical01.png') no-repeat center center; background-size: contain;}
.about .chemical .item:nth-child(2) .img:before {background: url('../images/sub/ico_chemical02.png') no-repeat center center; background-size: contain;}
.about .chemical .item:nth-child(3) .img:before {background: url('../images/sub/ico_chemical03.png') no-repeat center center; background-size: contain;}
.item-txt {font-weight: 300; font-size: 18px; color: #686868; line-height: 1.667em; margin-top: 18px;}

/* sub02 */
.service-type .section {padding: 100px 0;}
.service-type .section:first-child {padding-top: 0;}
.service-type .section:nth-child(even) {background-color: #f8f8f8;}
.service-type .section .contain {display:flex;}

.service-type .doc-tit {max-width: 360px; width: 28%;}
.service-type .item-tit {font-size: 20px; color: #d40073; line-height: 1em; margin-bottom: 30px;}
.service-type .list-cnt {margin-top: 40px;}
.service-type .list-cnt li {position: relative; padding-left: 23px; font-size: 18px; line-height: 1em; margin-bottom: 17px;}
.service-type .list-cnt li:before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background-color: #c8c8c8;}
.service-type .img {margin-top: 45px;}

.service-area .photo {background-color: #f8f8f8; padding: 100px 0;}
.service-area .location {padding-top: 50px;}
.service-area .location .area {display: flex; align-items: center; justify-content: flex-start; padding: 50px 0; border-bottom: 1px solid #ddd;}
.service-area .location .area .doc-tit {max-width: 360px;width: 28%;}
.service-area .location .area .doc-desc {font-size: 22px; font-weight: 600; color: #878787; line-height: 2em;}

/* sub03 */
.solutions .item {display: flex; margin-bottom: 70px;}
.solutions .item > div {width: 50%;}
.solutions .item .doc-cnt {padding-right: 70px; padding-top: 100px; padding-bottom: 30px;}
.solutions .item:nth-child(even) .doc-cnt {padding-left: 70px;padding-right: 0;}
.solutions .item .doc-txt {margin-top: 35px;}

/* sub04 */
.contacts {background-color: #f8f8f8; padding: 60px 0;}
.contacts .contain {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 40px;}
.contacts .card {width: calc(50% - 20px); background-color: #fff; border: 1px solid #ddd; border-top: 4px solid #d40073; padding: 50px;}
.contacts .card .info {margin-top: 38px;}
.contacts .card .info > div {padding-left: 43px; line-height: 1em; position: relative; font-size: 18px;}
.contacts .card .info .name {margin-bottom: 30px;}
.contacts .card .info .name:before {content: ''; position: absolute; width: 20px; height: 20px; background: url('../images/sub/ico_name.png') no-repeat center center; background-size: contain; left: 0; top: 50%; transform: translateY(-50%);}
.contacts .card .info .phone:before {content: ''; position: absolute; width: 20px; height: 20px; background: url('../images/sub/radiobox.png') no-repeat center center; background-size: contain; left: 0; top: 50%; transform: translateY(-50%);}
.contacts .card .info .email:before {content: ''; position: absolute; width: 24px; height: 16px; background: url('../images/sub/ico_mail.png') no-repeat center center; background-size: contain; left: 0; top: 50%; transform: translateY(-50%);}