@charset "UTF-8";

/*-------------------------------
	sub visual
-------------------------------*/

.sub_visual::before {
	background:url(../images/bg_subvisual_pediatric_care.png) no-repeat right center / cover;
}

/*-------------------------------
	ar general
-------------------------------*/

.pc_about {
	background: linear-gradient(180deg,rgba(255, 255, 255, 1) 28%, rgba(205, 197, 143, 0.2) 100%);
}

.pc_about .icon-title::after {
	width:13.5rem;
	height:5rem;
	background:url(../images/icon_pediatric.svg) no-repeat center / contain;
}

.pc_primary .sec-title01 {
	margin-bottom:7rem;
}

/*-------------------------------
	banner wrap
-------------------------------*/

.banner_wrap {
	max-width:80rem;
	margin:10rem auto 13rem;
}

.banner_wrap a {
	display: block;
	box-shadow: 0px 0px 1rem 0px rgba(0, 0, 0, .15);
	padding:1rem;
	background:url(../images/banner_ortho_bg.jpg) no-repeat center / cover;
	position:relative;
}

.banner_wrap a::before,
.banner_wrap a::after {
	content:"";
	display: block;
	position:absolute;
}

.banner_wrap a::before {
	width:45%;
	max-width:35.5rem;
	height:100%;
	background:url(../images/banner_ortho_family.png) no-repeat right bottom / contain;
	right:0;
	bottom:0;
}

.banner_wrap a::after {
	width:13rem;
	height:13rem;
	background:url(../images/banner_ortho_lens.png) no-repeat center / contain;
	border-radius:50%;
	left:2rem;
	bottom:2rem;
	filter: drop-shadow(0px 0px 1.5rem rgba(18, 88, 173, 0.1));
	z-index: 1;
}

.banner_inner {
	border:.1rem solid #fff;
	padding:3.5rem 1rem 2.5rem;
}

.banner_txt {
	width:63%;
	max-width:47.5rem;
	text-align: center;
	margin-left:7%;
	display: flex;
	justify-content: center;
	flex-wrap:wrap;
}

.banner_txt h4,
.banner_txt h4 span  {
	line-height: 1.75;
	font-size:2.1rem;
	letter-spacing: 0.088em;
	font-weight:700;
	position:relative;
	text-shadow: 0px 0px .2rem rgba(255, 255, 255, 0.7),
				 0px 0px 1rem rgba(255, 255, 255, 0.8),
				 0px 0px 1rem rgba(255, 255, 255, 0.8),
				 0px 0px 1rem rgba(255, 255, 255, 0.8),
				 0px 0px 1rem rgba(255, 255, 255, 0.8),
				 0px 0px 1rem rgba(255, 255, 255, 0.8);
}

.banner_txt h4 span{
	color:#2c7dbf;
}

.banner_txt h4::before {
	content:"";
	display: block;
	width:6.5rem;
	height:2.6rem;
	background:url(../images/icon_emphasis.svg) no-repeat center / contain;
	position:absolute;
	transform:rotate(-43deg);
	left:-4rem;
	top:-1.5rem;
	filter: drop-shadow(0px 0px .2rem rgba(255, 255, 255, 0.7))
			drop-shadow(0px 0px .2rem rgba(255, 255, 255, 0.7))
			drop-shadow(0px 0px .2rem rgba(255, 255, 255, 0.7))
			drop-shadow(0px 0px .2rem rgba(255, 255, 255, 0.7))
			drop-shadow(0px 0px 1rem rgba(255, 255, 255, 0.8))
			drop-shadow(0px 0px 1rem rgba(255, 255, 255, 0.8))
			drop-shadow(0px 0px 1rem rgba(255, 255, 255, 1));
}

.banner_txt p {
	margin:1rem auto 1rem;
	transform:rotate(-3.8deg);
}

.banner_txt p span {
	font-size:1.5rem;
	letter-spacing: 0.05em;
	font-weight:500;
	position:relative;
	display: inline-block;
}

.banner_txt p span::after {
	content:"";
	display: block;
	width:23rem;
	height:3.1rem;
	background:url(../images/frame_ribbon.svg) no-repeat center / contain;
	position:relative;
	margin-top:-1rem;
}

.banner_txt h3 span {
	font-size:2.4rem;
	font-weight:600;
	letter-spacing: 0.075em;
	display: inline-block;
	padding:0.75em 3.5em 0.75em 1.5em;
	background:rgba(255,255,255,.8);
	position:relative;
}

.banner_txt h3 span::after {
	content:"";
	display: block;
	width:2.8rem;
	height:2.8rem;
	background:url(../images/arrow_right_circle.svg) no-repeat center / contain;
	position:absolute;
	right:3rem;
	top:0;
	bottom:0;
	margin:auto 0;
}



/*-------------------------------
	responsive
-------------------------------*/

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


} /* end 960px */

/*-------------------------------
	ver sp
-------------------------------*/

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

/*-------------------------------
	sub visual
-------------------------------*/

.sub_visual::before {
	background-position:70% center;
}

/*-------------------------------
	ar general
-------------------------------*/

.pc_about .icon-title::after {
	width:10.1rem;
	height:3.7rem;
}

.pc_primary .sec-title01 {
	margin-bottom:5rem;
}

/*-------------------------------
	banner wrap
-------------------------------*/

.banner_wrap {
	max-width:100%;
	margin:6rem auto 7rem;
}

.banner_wrap a {
	padding:1rem;
}

.banner_wrap a::before {
	width:75%;
	max-width:100%;
	height:100%;
	background:url(../images/banner_ortho_family.png) no-repeat right bottom / contain;
	right:0;
	bottom:0;
}

.banner_wrap a::after {
	width:12rem;
	height:12rem;
	left:2rem;
	bottom:5rem;
	filter: drop-shadow(0px 0px 1.5rem rgba(18, 88, 173, 0.1));
}

.banner_inner {
	border:.1rem solid #fff;
	padding:5rem 2rem 17.5rem;
}

.banner_txt {
	width:100%;
	max-width:100%;
	margin-left:0%;
}

.banner_txt h4,
.banner_txt h4 span  {
	font-size:2rem;
	text-shadow: 0px 0px .2rem rgba(255, 255, 255, 0.7),
				 0px 0px 1rem rgba(255, 255, 255, 0.8),
				 0px 0px 1rem rgba(255, 255, 255, 0.8),
				 0px 0px 1rem rgba(255, 255, 255, 0.8),
				 0px 0px 1rem rgba(255, 255, 255, 0.8),
				 0px 0px 1rem rgba(255, 255, 255, 0.8);
}

.banner_txt h4::before {
	width:6.2rem;
	height:2.5rem;
	left:-2rem;
	filter: drop-shadow(0px 0px .2rem rgba(255, 255, 255, 0.7))
			drop-shadow(0px 0px .2rem rgba(255, 255, 255, 0.7))
			drop-shadow(0px 0px .2rem rgba(255, 255, 255, 0.7))
			drop-shadow(0px 0px .2rem rgba(255, 255, 255, 0.7))
			drop-shadow(0px 0px 1rem rgba(255, 255, 255, 0.8))
			drop-shadow(0px 0px 1rem rgba(255, 255, 255, 0.8))
			drop-shadow(0px 0px 1rem rgba(255, 255, 255, 1));
}

.banner_txt p {
	margin:1.5rem auto 1.5rem;
}

.banner_txt h3 {
	width:100%;
}

.banner_txt h3 span {
	font-size:2rem;
	display:block;
	width:100%;
	padding:0.75em 1.5em 0.75em 1.5em;
}

.banner_txt h3 span::after {
	width:2.3rem;
	height:2.3rem;
	right:1rem;
}

} /* end 768px */