@charset "UTF-8";

.natural .title1 {text-align: center; margin-bottom: 4.5rem;}
.natural .text2 {line-height: 1.5; white-space: pre-line;}

.natural img {display: block;}

.pad, .dvs {background: #F0F9FF; border-top: 1px solid #A8E1FF; border-bottom: 1px solid #A8E1FF;}
.sub-page>*:first-child {border-top: 0;}

.ul-info {width: 100%; max-width: 1200px; margin: 0 auto; display: -webkit-flex; display: flex; justify-content: end; align-items: start;}
.ul-info .img-area {display: -webkit-flex; display: flex; justify-content: start; align-items: center; flex-direction: column; gap: 36px; -webkit-flex-shrink: 0; flex-shrink: 0; margin: 0 auto;}
.ul-info .txt-area {width: 65%;}

.product {display: -webkit-flex; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.product img {max-width: 100%; height: 12.5rem; object-fit: contain; filter: drop-shadow(0 0 8px var(--shadow));}
.pad .product img {max-width: 6.25rem; height: 6.25rem;}
.product-name .tit {font-weight: 700; font-size: 0.938rem; color: var(--darkgray); text-align: center; margin-top: 12px;}

.txt-area .title2 {color: #1941B2; margin-bottom: 12px;}
.txt-area .text2 + .title2 {margin-top: 26px;}
.ul-txt>.text2 {display: -webkit-flex; display: flex; justify-content: start; align-items: start;}
.ul-txt>.text2::before {content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background: #9CD6DF; -webkit-flex-shrink: 0; flex-shrink: 0;}

/* .ul-icon {margin-top: 3.125rem; display: -webkit-flex; display: flex; justify-content: center; align-items: start;} */
.ul-icon {margin-top: 3.125rem; display: grid; justify-content: center; align-items: start;}
.ul-icon>.item {text-align: center;}
.ul-icon .circle {width: 7rem; height: 7rem; display: -webkit-flex; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: #FFFFFF; border: 2px dashed #0ACFB4; overflow: hidden; -webkit-flex-shrink: 0; flex-shrink: 0; margin: 0 auto;}
.ul-icon .circle img {width: calc(100% + 4px); height: calc(100% + 4px); object-fit: contain;}
.ul-icon .circle:first-child img {}
.ul-icon .circle:nth-child(2) img {}
.ul-icon .circle:nth-child(3) img {}
.ul-icon .circle + .title3 {margin-top: 20px;}
.ul-icon .circle + .title3 + .text3 {margin-top: 6px;}


.deodorant .ul-info {margin-bottom: 50px;}

.ul-diagram {display: grid; justify-content: center; margin-bottom: 4.5rem;}
.ul-diagram .title3 {padding: 10px 24px; background: #147CC2; border-radius: 10px 10px 0px 0px; color: #FFFFFF; text-align: center;}
.ul-diagram .text3 {height: calc(100% - 1.25rem*1.2 - 20px); padding: 2rem 1.5rem; display: -webkit-flex; display: flex; justify-content: center; align-items: center; background: #F0F9FF; border: 1px solid #A8E1FF; border-radius: 0px 0px 10px 10px; text-align: center;}

.deodorant .title2 {color: #1941B2;}
.deodorant>.inner>.title2 {text-align: center;}


/* .ul-img {width: 100%; max-width: 1200px; margin: 0 auto; margin-top: 3.125rem; display: -webkit-flex; display: flex; justify-content: center; align-items: start;} */
.ul-img {width: 100%; max-width: 1200px; margin: 0 auto; margin-top: 3.125rem; display: grid; justify-content: center; align-items: start;}
.ul-img>.item {text-align: center;}
.ul-img .circle {width: 10rem; height: 10rem; display: -webkit-flex; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: #fff; border: 3px solid #fff; outline: 6px solid; overflow: hidden; -webkit-flex-shrink: 0; flex-shrink: 0; margin: 0 auto;}
.ul-img>.item:nth-child(3n-2) .circle {outline-color: #5F8CC8;}
.ul-img>.item:nth-child(3n-1) .circle {outline-color: #736CB0;}
.ul-img>.item:nth-child(3n) .circle {outline-color: #434C9E;}
.ul-img .circle img {width: calc(100% + 6px); height: calc(100% + 6px); object-fit: cover;}
.ul-img .circle + .title3 {margin-top: 20px;}
.ul-img .circle + .title3 + .text3 {margin-top: 6px;}





@media screen and (max-width:1200px){
	.natural {padding-left: 0; padding-right: 0;}

	.pad, .dvs, .deodorant {padding-left: 36px; padding-right: 36px;}
}

@media screen and (min-width:993px){
	.natural {padding-top: 0; padding-bottom: 0;}

	.pad, .dvs {padding-top: 80px; padding-bottom: 80px;}

	.ul-info {gap: 100px;}
	.ul-info .img-area {max-width: calc(35% - 100px);}
	.ul-info .txt-area {max-width: 779px;}

	.eco {gap: 24px;}

	.product {gap: 24px;}
	.pad .product {gap: 16px;}

	.ul-txt>.text2 {gap: 10px;}
	.ul-txt>.text2::before {margin: 8.5px 0;}

	.ul-icon, .ul-img {gap: 24px;}


	.deodorant {padding-top: 120px; padding-bottom: 120px;}
	.ul-diagram {gap: 24px; margin-top: 40px;}

	.ul-img {grid-template-columns: repeat(5, 1fr);}
}

@media screen and (max-width:992px){
	.natural {padding-top: 0; padding-bottom: 0;}

	.pad, .dvs {padding-top: 60px; padding-bottom: 60px;}

	.ul-info {gap: 80px;}
	.ul-info .img-area {max-width: calc(35% - 80px);}

	.eco {gap: 16px;}

	.product {gap: 16px;}
	.pad .product {gap: 16px;}

	.ul-txt>.text2 {gap: 8px;}
	.ul-txt>.text2::before {margin: 7px 0;}

	.ul-icon, .ul-img {gap: 24px 16px;}


	.deodorant {padding-top: 100px; padding-bottom: 100px;}
	.ul-diagram {gap: 16px; margin-top: 36px;}
}

@media screen and (min-width:769px) and (max-width:992px){
	.ul-info .txt-area {max-width: 564px;}
	

	.ul-img {grid-template-columns: repeat(4, 1fr);}
	.ul-img>.item:nth-last-of-type(-n+2) {grid-column: 1 / span 2;}
	.ul-img>.item:last-of-type {grid-column: 3 / span 2;}
}

@media screen and (min-width:769px){
	.ul-icon {grid-template-columns: repeat(3, 1fr);}

	.ul-diagram {grid-template-columns: repeat(3, 1fr);}
}

@media screen and (max-width:768px){
	.natural .text2 {text-align: center;}

	.pad, .dvs, .deodorant {padding-left: 32px; padding-right: 32px;}

	.ul-info {align-items: center; flex-direction: column;}
	.ul-info .img-area {max-width: 100%;}
	.ul-info .txt-area {width: 100%;}

	.txt-area .title2 {text-align: center;}
	.ul-txt>.text2 {justify-content: center;}

	.ul-icon {grid-template-columns: unset;}


	.ul-diagram {grid-template-columns: unset; margin-top: 32px;}

	.ul-img {grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width:480px){
	.natural {padding-top: 0; padding-bottom: 0;}

	.pad, .dvs, .deodorant {padding-left: 16px; padding-right: 16px;}

	.pad, .dvs {padding-top: 54px; padding-bottom: 54px;}

	.ul-info {gap: 60px;}

	.eco {gap: 12px;}

	.product {gap: 12px;}
	.pad .product {gap: 12px;}

	.ul-txt>.text2 {gap: 6px;}
	.ul-txt>.text2::before {margin: 5.5px 0;}

	.ul-icon, .ul-img {gap: 16px 12px;}


	.deodorant {padding-top: 80px; padding-bottom: 80px;}
	.ul-diagram {gap: 12px; margin-top: 24px;}
}