@charset "UTF-8";
/*-------------------------------------------------- about --*/
#about_title {
		position: relative;
		padding: 0;
		margin: 100px 0 0;
		text-align: center;
}

@media (max-width: 768px) {
		#about_title {
				margin: 85px 0 0;
		}
}

@media (max-width: 480px) {
		#about_title {
				margin: 66px 0 0;
		}
}

#about_title .about_title_inner {
		text-align: right;
}

#about_title .about_title_inner img {
		width: 100%;
		max-height: 240px;
		min-height: 150px;
		-o-object-fit: cover;
		object-fit: cover;
}

#about_title .section_title {
		padding-top: 3.75rem;
		margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
		#about_title .section_title {
				padding-top: 2.5rem;
		}
}

@media (max-width: 480px) {
		#about_title .section_title {
				position: unset;
				padding-left: 1.25rem;
		}
}

#about_title .section_title .section_title_ja {
		font-size: 1rem;
		color: #00B2A9;
}

#about_introduction {
		margin: 0 auto 5rem;
		text-align: center;
}

@media (max-width: 480px) {
		#about_introduction {
				margin-bottom: 3.75rem;
		}
}

#about_introduction .about_introduction_title {
		font-size: 3.75rem;
		font-weight: 700;
		letter-spacing: -0.025em;
}

@media (max-width: 768px) {
		#about_introduction .about_introduction_title {
				font-size: 3rem;
		}
}

@media (max-width: 480px) {
		#about_introduction .about_introduction_title {
				font-size: 2.5rem;
		}
}

#about_introduction .about_introduction_title span {
		font-size: 3.75rem;
		color: #00B2A9;
}

@media (max-width: 768px) {
		#about_introduction .about_introduction_title span {
				font-size: 3rem;
		}
}

@media (max-width: 480px) {
		#about_introduction .about_introduction_title span {
				font-size: 2.5rem;
		}
}

#about_introduction p {
		line-height: 2.2;
		margin: 2.5rem 0 0;
}

@media (max-width: 480px) {
		#about_introduction p {
				text-align: left;
		}
}

#para img {
		width: 100%;
		max-height: 240px;
		min-height: 150px;
		-o-object-fit: cover;
		object-fit: cover;
}

#about_point {
		text-align: center;
		margin: 3.75rem auto 5rem;
}

@media (max-width: 480px) {
		#about_point {
				margin-bottom: 3.75rem;
		}
}

#about_point .about_point_title {
		font-size: 2rem;
		font-weight: 700;
		letter-spacing: -0.025em;
}

@media (max-width: 480px) {
		#about_point .about_point_title {
				font-size: 1.5rem;
		}
}

#about_point .about_point_title::after {
		content: "";
		background: #00B2A9;
		height: 2px;
		width: 40px;
		display: block;
		margin: 1.5rem auto 0;
}

#about_point .about_point_title span {
		font-size: 3.75rem;
		font-weight: 700;
		color: #00B2A9;
}

@media (max-width: 480px) {
		#about_point .about_point_title span {
				font-size: 2.5rem;
		}
}

#about_point > p {
		line-height: 2.2;
		margin: 2.5rem 0 6.25rem;
}

@media (max-width: 480px) {
		#about_point > p {
				text-align: left;
				margin-bottom: 3rem;
		}
}

#about_point ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
}

@media (max-width: 480px) {
		#about_point ul {
				flex-direction: column;
		}
}

#about_point ul li {
		padding: 2.5rem 2rem 2rem;
		background-color: #F4FAFB;
		border-radius: 8px;
		position: relative;
		counter-increment: number;
}

@media (max-width: 768px) {
		#about_point ul li:not(:last-of-type) {
				margin-bottom: 2.5rem;
		}
}

#about_point ul li:nth-of-type(-n+3) {
		width: calc((100% - 1rem * 2) / 3);
		margin-bottom: 2rem;
}

@media (max-width: 768px) {
		#about_point ul li:nth-of-type(-n+3) {
				width: calc((100% - 1rem) / 2);
		}
}

@media (max-width: 480px) {
		#about_point ul li:nth-of-type(-n+3) {
				width: 100%;
		}
}

#about_point ul li:nth-last-of-type(-n+2) {
		width: calc((100% - 1rem) / 2);
}

@media (max-width: 768px) {
		#about_point ul li:nth-last-of-type(-n+2) {
				width: calc((100% - 1rem) / 2);
		}
}

@media (max-width: 480px) {
		#about_point ul li:nth-last-of-type(-n+2) {
				width: 100%;
		}
}

#about_point ul li::before {
		content: "point " counter(number, decimal-leading-zero);
		text-transform: uppercase;
		font-family: 'Pathway Gothic One', sans-serif;
		-webkit-text-stroke-width: 0.25px;
		letter-spacing: 1.5px;
		font-size: 1.25rem;
		color: #00B2A9;
		position: absolute;
		top: -0.8rem;
		right: 0;
		left: 0;
}

#about_point ul li h3 {
		font-size: 1.25rem;
		font-weight: 700;
}

#about_point ul li img {
		width: 50px;
		margin: 1rem 0;
}

#about_point ul li p {
		line-height: 1.8;
		text-align: left;
}

#about_cta {
		position: relative;
		background-image: url("../image/img_cta.jpg");
		background-size: cover;
		background-position: right center;
		z-index: 0;
}

@media (max-width: 768px) {
		#about_cta {
				background-image: none;
		}
}

#about_cta::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 50%;
		height: 100%;
		background: linear-gradient(90deg, #00B2A9 0%, #008EBB 100%);
		opacity: 0.8;
		z-index: -1;
}

@media (max-width: 768px) {
		#about_cta::before {
				width: 100%;
		}
}

#about_cta .about_cta_text_inner {
		width: 50%;
		padding: 5rem 1.5rem 5rem 0;
}

@media (max-width: 768px) {
		#about_cta .about_cta_text_inner {
				width: 100%;
				padding: 3.75rem 0;
		}
}

#about_cta .about_cta_text_title {
		font-size: 1.75rem;
		font-weight: 700;
		color: #FFF;
		margin-bottom: 2.5rem;
}

#about_cta .about_cta_text_meta {
		color: #FFF;
		margin-bottom: 2.5rem;
		line-height: 2;
}

#about_cta .about_cta_text .btn_style_01 {
		max-width: 350px;
		color: #00B2A9;
}

@media (max-width: 768px) {
		#about_cta .about_cta_text .btn_style_01 {
				margin: 0 auto;
		}
}

#about_cta .about_cta_text .btn_style_01:hover {
		color: #FFF;
}

#about_cta .about_cta_text .btn_style_01:hover::before {
		background-image: url("../../common/image/ic_cart.svg");
}

#about_cta .about_cta_text .btn_style_01:hover::after {
		right: 25px;
		border-color: #FFF #FFF transparent transparent;
}

@media (max-width: 480px) {
		#about_cta .about_cta_text .btn_style_01:hover::after {
				right: 15px;
		}
}

#about_cta .about_cta_text .btn_style_01::before {
		content: "";
		display: inline-block;
		background-image: url("../../common/image/ic_cart_color.svg");
		background-repeat: no-repeat;
		background-size: contain;
		width: 20px;
		height: 16px;
		margin-right: 0.5rem;
		line-height: 1;
		vertical-align: bottom;
		transition: all 0.2s ease-in-out;
}

#about_cta .about_cta_text .btn_style_01::after {
		right: 30px;
		border-color: #00B2A9 #00B2A9 transparent transparent;
}

@media (max-width: 480px) {
		#about_cta .about_cta_text .btn_style_01::after {
				right: 20px;
		}
}

#about_cta .about_cta_image {
		display: none;
}

@media (max-width: 768px) {
		#about_cta .about_cta_image {
				display: block;
		}
}
