@charset "UTF-8";


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

/* ヘッダ */

header{
	margin-bottom:0
}

header .titlearea div {
  margin: auto;
  width: 1240px;
  height: 380px;
  position: relative;
}

@media screen and (max-width: 1239px) {
	header .titlearea div{ 
		width: 100%;
		padding-top: 27%;
		height:auto;
	}
}

@media screen and (max-width: 767px) {
	header .titlearea div{ 
		padding-top: 39%;
	}
}


header .titlearea {
	background: url(../care/images/header_pc.jpg) no-repeat center top;
}
@media screen and (max-width: 1239px) {
	header .titlearea {
		background: url(../care/images/header_tb.jpg) no-repeat center top;
		background-size: cover;
	}
}
@media screen and (max-width: 767px) {
	header .titlearea {
		background: url(../care/images/header_sp.jpg) no-repeat center top;
		background-size: cover;
	}
}


header .titlearea div h2 {
	font-size: 0;
}


#content{
	padding-top: 60px;
	background-color: #f3fcff;
	background-image: url(../care/images/back.png);
	background-position: right;
	background-repeat: repeat-y;
}

#care{
	overflow: hidden;
	& h3{
		background: linear-gradient(to right,  #002a58 0%,#004ea2 45%,#002a58 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		color: #ffffff;
		font-size: 24px;
		text-align: center;
		font-family: "Noto Serif JP", serif;
		font-weight: 500;
		height: 60px;
		padding: 10px 0 0 0;
		margin:0 auto 50px;
		position: relative;
		letter-spacing: 10px;
		& span{
			color: #ffffff;
			display: inline-block;
		}
		
		@media screen and (max-width: 1239px) {
				margin: 0 auto 30px;
				height: 50px;
				font-size: 20px;
				letter-spacing: 5px;			
		}
		@media screen and (max-width: 767px) {
				font-size: 18px;
				letter-spacing: 0px;	
				height: 40px;
				padding-top: 5px;		
		}
		@media screen and (max-width: 430px) {
				font-size: 20px;
				height: auto;
				padding: 5px 30px 8px;
		}

		&::after{
			content: "";
			background-image: url(../care/images/title_icon.png);
			width: 53px;
			height: 85px;
			display: block;
			top: -15px;
			position: absolute;
			right: 10px;
		}
		@media screen and (max-width: 767px) {
			&::after{
				background-size: contain;
				background-repeat: no-repeat;
				width: 30px;
				top: -5px;
				right: -10px;
	      }
		}
	 }
	 

	.list01 {
		list-style: none;
		display: flex;
		justify-content: space-between;
		max-width: 995px;
		margin: 70px auto 50px;
		width: 100%;
		@media screen and (max-width: 1239px) { margin: 40px auto 40px;}
		@media screen and (max-width: 767px) { flex-wrap: wrap;justify-content: space-around; }

		& li{ width: 32%;
			@media screen and (max-width: 767px) { width: 48%; margin-bottom: 10px; }
			@media screen and (max-width: 430px) { width: 80%; text-align: center;}
		}

	}
	
	.what_is{
		display: flex;
		max-width: 1000px;
		width: calc( 100% - 250px );
		margin: 75px auto 100px;
		justify-content: space-between;
		@media screen and (max-width: 1239px) {
			width: 100%;
			margin: 50px auto 50px;
			.left_area{
				padding-left: 100px;
				margin-right: 20px;
			}
		}
		@media screen and (max-width: 767px) {
			display: block;
			.right_area{
				text-align: center;
				margin: 50px 0 0;
			}
		}
		@media screen and (max-width: 430px) {
			margin: 30px auto 30px;
			.left_area{
				padding-left: 0px;
				margin-right: 0px;
			}		
		}
	}

	.shadow {
		box-shadow: 10px 10px 0px 0px rgba(21, 137, 164, 0.1);
	}
	
	.list02{
		list-style: none;
		position: relative;
		&::before{
			content: "";
			background-image: url(../care/images/leaf.png);
			width: 130px;
			height: 296px;
			display: block;
			top: -40px;
			left: -100px;
			position: absolute;
			background-repeat: no-repeat;
		}
		@media screen and (max-width: 430px) {
			&::before{ display: none;}
		}
		& li{
			font-size: 20px;
			color: #000000;
			position: relative;
			padding: 0 0 0 1em;
			margin-bottom: 10px;
			font-weight: 600;
			@media screen and (max-width: 767px) { font-size: 16px;}
			&::before{
				content: "";
				background-color: #1589a4;
				width: 4px;
				height: 4px;
				display: block;
				top: 12px;
				left: 5px;
				position: absolute;
				border-radius: 50%;
			}
			& strong{
				color: #1589a4;
			}
			.small{
				font-size: 14px;
				color: #000000;
			}
		}
	}
	
	.list02 + small{ font-size: 13px; color: #000000;}

	.list03 {
		list-style: none;
		display: flex;
		justify-content: space-between;
		max-width: 995px;
		margin: 0 auto 50px;
		position: relative;
		z-index: 2;

		@media screen and (max-width: 1239px) {
			margin: 40px auto 40px;
		}
		@media screen and (max-width: 767px) { flex-wrap: wrap;justify-content: space-around; }

		&::before{
			content: "";
			background-image: url(../care/images/leaf02.png);
			width: 157px;
			height: 132px;
			display: block;
			top: -10px;
			right: -80px;
			position: absolute;
			background-repeat: no-repeat;
			z-index: 1;
			background-size: contain;
		}
		@media screen and (max-width: 1239px) {
			&::before{
				right: -60px;
			}
		}

		@media screen and (max-width: 767px) {
			&::before{
				right: -20px;
				top: inherit;
				bottom: 0;
			}
		}

		@media screen and (max-width: 430px) { 
			&::before{
				top: inherit;
				bottom: -20px;
			}
		}		
		& li{	
			position: relative;
			z-index: 3;
			width: 32%;
			@media screen and (max-width: 767px) { width: 48%; margin-bottom: 10px; }
			@media screen and (max-width: 430px) { width: 80%; text-align: center;}

		}
	}
	
	.before_after{
		display: flex;
	    max-width: 875px;
	    margin: 75px auto 100px;
	    justify-content: space-between;
	    align-items: center;
	    width: 100%;
		.arrow{ margin: 0 10px;}
		& figcaption{ font-size: 16px; color: #000000; padding-bottom: 3px;
			@media screen and (max-width: 430px) { font-size: 14px;}
			& span{  font-size: 13px; color: #000000;
				@media screen and (max-width: 430px) { font-size: 11px;}
			}
		}
	}

	& h4{
		background: linear-gradient(to right,  #002a58 0%,#004ea2 45%,#002a58 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		color: #ffffff;
		font-size: 24px;
		text-align: center;
		font-family: "Noto Serif JP", serif;
		font-weight: 500;
		height: 60px;
		padding: 10px 0 0 0;
		margin:0 auto 50px;
		position: relative;
		letter-spacing: 10px;
		max-width: 875px;
		width: 100%;

		@media screen and (max-width: 1239px) {
				margin: 0 auto 30px;
				height: 50px;
				font-size: 20px;
				letter-spacing: 5px;			
		}
		@media screen and (max-width: 430px) {
				margin:0 auto 15px;
				font-size: 20px;
				height: auto;
				padding: 5px 30px 8px;
		}
		&::after{
			content: "";
			background-image: url(../care/images/title_icon02.png);
			width: 53px;
			height: 85px;
			display: block;
			top: -15px;
			left : 10px;
			position: absolute;
		}
		@media screen and (max-width: 767px) {
			&::after{
				background-size: contain;
				background-repeat: no-repeat;
				width: 30px;
				top: -5px;
				left: -10px;
	      }
		}

	 }
	 
	 .treatment_details{
		max-width: 875px;
		width: 100%;
		margin: 0 auto 100px;
		display: flex;
		justify-content: space-between;

		@media screen and (max-width: 767px) { display: block;}
		
		.right_area{
			margin:0 30px 0 0;
			@media screen and (max-width: 767px) {
				margin: 0 auto;
				text-align: center;
			}
		}
		.left_area{
			@media screen and (max-width: 767px) {
				display: flex;
				justify-content: center;
			}
		}

	 }

	.list04{
		list-style: none;
	    position: relative;
	    margin: 30px 0 0 50px;
	    @media screen and (max-width: 767px) { margin: auto; }
		& li{
			font-size: 18px;
			color: #000000;
			position: relative;
			padding: 0 0 0 1em;
			margin-bottom: 10px;
			font-weight: 600;
			@media screen and (max-width: 767px) { font-size: 16px;}

			&::before{
				content: "";
				background-color: #000000;
				width: 4px;
				height: 4px;
				display: block;
				top: 12px;
				left: 5px;
				position: absolute;
				border-radius: 50%;
			}
		}
	}
	
	.QR{
		max-width: 640px;
		width: 100%;
	    height: 340px;
	    background-color: #ffffff;
	    border: 1px solid #daf0f9;
	    border-radius: 15px;
	    margin: 0 auto 100px;
	    position: relative;
	    
	    @media screen and (max-width: 767px) {
	    	height: auto;
	    	padding: 30px;
	    }

		&::before{
			content: "";
			background-image: url(../care/images/leaf03.png);
			width: 242px;
			height: 436px;
			display: block;
			top: -65px;
			left: -90px;
			position: absolute;
			background-repeat: no-repeat;
			z-index: 1;
			background-size: contain;
		}
		@media screen and (max-width: 800px) {
			&::before{
				width: 200px;
				height: 350px;
				top: -15px;
				left: -30px;
			}
		}
		@media screen and (max-width: 767px) {
			&::before{
				width: 100px;
				height: 200px;
				transform: scaleX(-1);
				left: inherit;
				right: 0;
				top: inherit;
				bottom: -40px;
			}
		}
		@media screen and (max-width: 430px) {
			&::before{
				width: 50px;
				height: 100px;
			}
		}
		
		.read{
			color: #005ba7;
			font-size: 26px;
			text-align: center;
			font-family: "Noto Serif JP", serif;
			font-weight: 500;
			margin: 40px auto 0px;
			@media screen and (max-width: 767px) {
				font-size: 16px;
				margin: 0;
			}
		}
		
		.qrcode_set{
			width: 400px;
			display: flex;
			margin: 20px 0 0 150px;
			@media screen and (max-width: 767px) {
				width: 100%;
				margin: 15px auto 10px;
				display: block;
				text-align: center;
			}
			
			.text{
				color: #000000;
			    font-size: 16px;
			    margin: 10px 0px 0 20px;
			    line-height: 1.8;
				@media screen and (max-width: 767px) {
					font-size: 14px;
					margin: 10px auto 0;
				}

			}
		}

	}






}