@charset "utf-8";

.page_ps.page_head{
	padding-bottom: clamp(16px, 1.6vw, 28px);
}
.ps_en{
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.08em;
}
.ps_en p{
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.02em;
}
.ps_en_print,
.ps_en_safety{
	font-size: clamp(36px, 4.17vw, 80px);
}
.ps_en_print{
	color: #23a3b3;
}
.ps_en_slash{
	font-size: clamp(30px, 3.47vw, 67px);
	color: #888;
}
.ps_en_safety{
	color: #9d73b5;
}
.page_ps.is_safety .ps_en_print{
	color: #68a0ae;
}
html.is_safety .ps_en_print{
	color: #68a0ae;
}
html.is_safety .page_head_img .ps_fv_print,
html.is_safety .ps_view_print{
	display: none;
}
html.is_safety .page_head_img .ps_fv_safety{
	display: block;
}
html.is_safety .ps_view_safety{
	display: block;
}
html.is_safety .ps_btn_print{
	opacity: 0.45;
}
html.is_safety .ps_btn_safety{
	opacity: 1;
}
.page_head_img .ps_fv{
	display: none;
}
.page_head_img .ps_fv.on{
	display: block;
}
body.gjs-dashed .page_head_img .ps_fv{display: block!important}
body.gjs-dashed .page_head_img .ps_fv,body.gjs-dashed .page_head_img .ps_fv_print,body.gjs-dashed .ps_view_print{
	display: block!important;
}
.ps_switch{
	background: #faf9f7;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(16px, 2.08vw, 40px);
	padding: 8px 6% clamp(36px, 4.6vw, 88px);
}
.ps_btn{
	width: min(433px, 46%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: clamp(14px, 1.4vw, 27px) clamp(18px, 2.1vw, 40px);
	border-radius: 999px;
	cursor: pointer;
	opacity: 0.45;
	transition: opacity 0.3s;
}
.ps_btn p{
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: clamp(16px, 1.53vw, 29px);
	letter-spacing: 0.09em;
	line-height: 1.15;
}
.ps_btn_print{
	background: #98e1ea;
}
.ps_btn_print p{
	color: #23a3b3;
}
.ps_btn_safety{
	background: #cfb7dc;
}
.ps_btn_safety p{
	color: #9d73b5;
}
.ps_btn.on,
.ps_btn:hover{
	opacity: 1;
}
.ps_btn_icon{
	width: clamp(28px, 2.2vw, 43px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgba(255,255,255,0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.ps_btn_icon img{
	width: 44%;
	height: auto;
}

.ps_view{
	display: none;
}
.ps_view.on{
	display: block;
}
body.gjs-dashed .ps_view{display: block!important}

.ps_sec{
	width: min(1547px, 80.6%);
	margin: 0 auto clamp(48px, 4.2vw, 80px);
}
.ps_sec:last-child{
	margin-bottom: 0;
}
.ps_row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 3.4vw, 67px);
}
.ps_txt{
	width: 52.6%;
}
.ps_img{
	width: 43.1%;
}
.ps_img img{
	width: 100%;
	height: auto;
	border-radius: clamp(24px, 2.8vw, 53px);
}
.ps_ph{
	background: #d4d4d4;
	border-radius: clamp(24px, 2.8vw, 53px);
	aspect-ratio: 500 / 380;
}
.ps_num{
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: clamp(16px, 1.39vw, 27px);
	letter-spacing: 0.12em;
	line-height: 1;
	color: #1c1e29;
}
.ps_name{
	margin-top: 10px;
	font-weight: 500;
	font-size: clamp(26px, 2.4vw, 46px);
	line-height: 1.4;
	color: #1c1e29;
}
.ps_item_en{
	margin-top: 8px;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: clamp(16px, 1.39vw, 27px);
	letter-spacing: 0.12em;
	line-height: 1.3;
	color: #23a3b3;
}
.ps_view_safety .ps_item_en{
	color: #9d73b5;
}
.ps_copy{
	margin-top: 24px;
}
.ps_copy p{
	font-size: clamp(14px, 1.04vw, 20px);
	line-height: 2;
	color: #1c1e29;
}
.ps_use{
	margin-top: 20px;
	border-radius: 10px;
	padding: clamp(20px, 2.1vw, 40px);
}
.ps_view_print .ps_use{
	background: rgba(104,160,174,0.2);
}
.ps_view_safety .ps_use{
	background: rgba(157,115,181,0.2);
}
.ps_use_label{
	display: inline-block;
	border-radius: 50px;
	padding: 6px 10px;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.3;
	color: #fff;
}
.ps_view_print .ps_use_label{
	background: #23a3b3;
}
.ps_view_safety .ps_use_label{
	background: #9d73b5;
}
.ps_use_txt{
	margin-top: 10px;
	font-size: clamp(14px, 1.11vw, 21px);
	line-height: 1.58;
	color: #1c1e29;
}

@media screen and (max-width: 1080px){
	.ps_sec{
		width: min(640px, 86%);
	}
}
@media screen and (max-width: 768px){
	.ps_sec{
		width: 88%;
	}
	.ps_row{
		flex-direction: column;
		align-items: stretch;
	}
	.ps_txt,
	.ps_img{
		width: 100%;
	}
	.ps_txt{
		order: 2;
	}
	.ps_img{
		order: 1;
	}
}
@media screen and (max-width: 576px){
	.ps_switch{
		flex-direction: column;
		align-items: center;
	}
	.ps_btn{
		width: min(433px, 100%);
	}
}