@charset "UTF-8";

.contentpage .m_img {background-image: url("../images/clean/m_img@2x.jpg");}


#lead .point{
	max-width: 600px;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
#lead .point{
	width: 100%;
}
}

/*
---------------------------------------------------------*/
.cle_index {
	text-align: center;
	font-size: min(3vw,168%);
	margin-bottom: 1.8em;
}
.cle_index .ft_commons {
	color: #4bbba1;
	font-size: 187%;
	letter-spacing: .15em;
	line-height: 1;
	margin-bottom: .3em;
}
.cle_index .ft_gothic {
	letter-spacing: .1em;
	line-height: 1.2em;
}

.maru_list {
	display: flex;
	justify-content: center;
}
.maru_list > li {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #FFF;
	font-size: 130%;
    letter-spacing: .04em;
    line-height: 1.3;
    width: 7.7em;
    height: 7.7em;
    box-sizing: border-box;
    background-color: rgba(75,187,161,0.9);
    border-radius: 50%;
	padding-top: .5em;
	margin: 0 .3em;
}
.maru_list > li span {
	font-size: 135%;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.cle_index {
	font-size: 120%;
	margin-bottom: 1em;
}
.cle_index .ft_commons {
	font-size: 150%;
	letter-spacing: .12em;
}

.maru_list > li {
	font-size: 96%;
}
}

/*sterilization
---------------------------------------------------------*/
.col_blu {	color: #6f95d1;}
.col_yel {	color: #d4bc2c;}
.col_pnk {	color: #ff96a6;}

/* area_dscr */
.area_dscr {
	position: relative;
	display: flex;
	justify-content: space-between;
	margin-bottom: -60px;
	z-index: 1;
}
.area_dscr > li {
	width: 33.33%;
	text-align: center;
}
.area_dscr .txt1 {
	max-width: 255px;
	font-size: 90%;
	font-weight: bold;
	line-height: 1.4;
	margin: 0 auto .5em;
}
.area_dscr .txt2 {
	position: relative;
	display: inline-block;
	color: #FFF;
	font-size: 110%;
	line-height: 1.4;
	box-sizing: border-box;
	padding: 2.2em 1em;
}
.area_dscr .txt2 span {
	display: block;
	font-size: 128%;
}
.area_dscr .txt2::before {
	position: absolute;
	content: "";
	background-color: currentColor;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: -1;
}
.area_dscr > li:nth-of-type(1) .txt2::before {
	background-color: #6f95d1;
	clip-path: polygon(0 0, 0 100%, 100% 87.5%, 100% 12.5%);
}
.area_dscr > li:nth-of-type(2) .txt2::before {
	background-color: #ebd131;
	clip-path: polygon(0 12.5%, 0 87.5%, 100% 87.5%, 100% 12.5%);
}
.area_dscr > li:nth-of-type(3) .txt2::before {
	background-color: #ff96a6;
	clip-path: polygon(0 12.5%, 0 87.5%, 100% 100%, 100% 0);
}

.zoom_box {
	position: relative;
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

/* area_dscr */
.area_dscr {
	width: 108%;
	margin-left: -4%;
	margin-bottom: -13vw;
}
.area_dscr > li {
	width: 28%;
}
.area_dscr .txt2 {
	display: block;
	font-size: 100%;
}

#sterilization .fig_sp {
	width: 75%;
	margin: 8% auto 0;
}
}
  
  
/*sterilization : popup
---------------------------------------------------------*/
.pop_list input {
	display: none;
}
.popup-btn {
	position: absolute;
	display: block;
	text-align: center;
	font-size: 115%;
	width: 1.8em;
	line-height: 1.8;
	letter-spacing: normal;
	background-color: #fff;
	border-radius: 50%;
	cursor: pointer;
	translate: -50% -50%;
	transition: background-color .5s;
}
.popup-btn::before {
	font-family: 'fontello';
	content: '\e809';
	font-weight: normal;
	transition: all .5s;
}
.popup-btn:hover {
	background-color: currentColor;
}
.popup-btn:hover::before {
	color: #FFF;
}
.popup-bg {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	background-color: rgba(0,0,0,0.2);
	z-index: 1;
}
.pop_list input:checked ~ .popup-bg,
.pop_list input:checked ~ .popup-window {
	display: block;
	animation: fadePop 0.3s linear 0s;
}
.popup-window {
	position: absolute;
	width: 35vw;
	max-width: 330px;
	text-align: center;
	background-color: #FFF;
	border-radius: 1.5em;
	padding: 1.5em;
	box-sizing: border-box;
	border: 1px solid currentColor;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	z-index: 1;
	transition: opacity .8s;
}
.popup-window img {
	width: 85%;
	max-width: 220px;
}
.popup-window .com_style4_txt {
	line-height: 1.4;
	margin-top: 1em;
}

.popup-close {
	cursor: pointer;
	position: absolute;
	color: #67605a;
	font-weight: normal;
	transition: color .5s;
	right: 1em;
	top: .8em;
}
.popup-close::before {
	font-family: 'fontello';
	content: '\e80a';
}
.popup-close:hover {
	color: inherit;
}

.pop_list input:not(:checked) ~ .popup-bg,
.pop_list input:not(:checked) ~ .popup-window {
	display: none;
}

@keyframes fadePop {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.pop_list .item_b1 .popup-btn {
	left: 20.8%;
	top: 41.7%;
}
.pop_list .item_b2 .popup-btn {
	left: 37.3%;
	top: 43.3%;
}
.pop_list .item_y1 .popup-btn {
	left: 49.8%;
	top: 40.5%;
}
.pop_list .item_r1 .popup-btn {
	left: 76.1%;
	top: 49.8%;
}
.pop_list .item_r2 .popup-btn {
	left: 64%;
	top: 52.4%;
}

/* PC,Tablet
------------------------------------------*/
@media only screen and (min-width: 768px) {
.col_blu .popup-window {
	left: 20%;
}
.col_pnk .popup-window {
	left: 80%;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.popup-btn {
	font-size: 100%;
}
.popup-window {
	width: 60vw;
	translate: -50% 10%;
}
}



/*sterilization : ster_bg
---------------------------------------------------------*/
#sterilization .fixed_wrap {
	position: relative;
}
#sterilization .ster_bg {
	position: relative;
	padding: 110px 0;
	margin-bottom: 4px;
}
#sterilization .ster_bg .inbox {
	width: 50%;
	max-width: 400px;
}
#sterilization .ster_bg dl {
	margin-bottom: 3.2em;
}
#sterilization .ster_bg dl:last-of-type {
	margin-bottom: 0;
}
#sterilization .ster_bg dl dt {
	text-align: left;
	line-height: 1.25;
	margin-bottom: .8em;
}
#sterilization .ster_bg dl .box_img {
	max-width: 400px;
	margin: 0 auto 1em;
}
#sterilization .stick_fig {
	position: relative;
	width: 40%;
	max-width: 400px;
	left: 50%;
	top: 0;
	padding-top: 60px;
	padding-bottom: 50px;
	opacity: 0;
	transition: opacity 1s, padding .8s;
	z-index: 1;
}
#sterilization .fixed_wrap.pos_abs .stick_fig {
	position: absolute;
}
#sterilization .fixed_wrap.pos_abs.btm_0 .stick_fig {
	top: auto;
	bottom: 0;
}
#sterilization .fixed_wrap.pos_fix .stick_fig {
	position: fixed;
}
#sterilization #area1.active .stick_fig,
#sterilization #area2.active .stick_fig,
#sterilization #area3.active .stick_fig {
	opacity: 1;
}
#sterilization #area1:has(+ #area2.active) .stick_fig,
#sterilization #area2:has(+ #area3.active) .stick_fig {
	opacity: 0;
}

#sterilization #area1 {	background-color: rgba(255,150,166,0.05);}
#sterilization #area2 {	background-color: rgba(227,207,80,0.05);}
#sterilization #area3 {	background-color: rgba(67,135,191,0.05);}


/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
#sterilization .ster_bg {
	padding: 10% 0;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
#sterilization .ster_bg {
	padding: 12% 0;
	margin-bottom: 2px;
}
#sterilization .ster_bg .inbox {
	width: 60%;
}
#sterilization .stick_fig {
	width: 40%;
	left: auto;
	right: 0;
	box-sizing: border-box;
	padding-top: 55vw;
	padding-bottom: 10vw;
	translate: 6% 0;
}
#sterilization .fixed_wrap.pos_abs .stick_fig {
	position: fixed;
}
#sterilization .fixed_wrap.pos_abs.btm_0 .stick_fig {
	position: absolute;
}

}


/*medical
---------------------------------------------------------*/
#medical .med_main{
	max-width: 1040px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	position: relative;
}
#medical .med_main .abs{
	position: absolute;
	max-width: 270px;
	width: 26%;
	left: -4.9%;
	bottom: 0;
	transform: translateY(12%);
}
#medical .maru_list {
	margin: 45px auto;
}
#medical .com_index8 {
	color: #4bbba1;
	background-color: #edf8f6;
}
#medical .com_style4 > dt {
	position: relative;
	font-weight: bold;
	padding-left: 1.6em;
}
#medical .com_style4 > dt::before {
	position: absolute;
	font-family: 'fontello';
	content: '\e808';
	font-weight: normal;
	left: 0;
	top: 0;
}
#medical .com_pickup ul{
	max-width: 770px;
	width: 90%;
	margin: 50px auto 0;
	display: flex;
	justify-content: space-between;
}
#medical .com_pickup ul li{
	width: 45%;
	max-width: 324px;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
#medical .com_pickup ul{
	margin: 5% auto 0;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
#medical .med_main .abs{
	width: 40%;
	left: -4%;
	bottom: 0;
	transform: translateY(12%);
}
#medical .maru_list {
	margin: 5% auto 7%;
}
#medical .com_pickup ul{
	width:100%;
	margin: 8% auto 0;
}
#medical .com_pickup ul li{
	width: 47.5%;
}
}

/*
---------------------------------------------------------*/

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
}