/* about stylesheet */
#page-about {
}
#page-about > .page_ttl > .container > h2 {
	text-align: center;
	font-size: 32px;
	color: #000;
	font-weight: bold;
	
}
#page-about > .page_ttl > .container > h2  > span{
	display: inline-block;
	padding: 1rem 2rem;
	background: #fff;
}
/* 上下・斜めで色を変えるセパレート風グラデーション */
.page_ttl {
	padding: min(10.68814055636896vw,146px) 0;
  background: linear-gradient(
    135deg,               /* グラデーションの角度（45deg, 90deg, 180deg など） */
    #EFEFEF 0%,           /* 1色目の開始 */
    #F4F4F4 50%,          /* 1色目を中央（50%）まで維持 */
    #1FBFFA 50%,          /* 2色目を中央（50%）から開始 */
    #2D88C9 100%          /* 2色目の終了 */
  );
}
.about_section {
	padding: 60px 0;
}
.about_section:nth-child(odd) {
	background: #F8F8F8;
}
.about_section h2 {
	font-size: 28px;
	font-weight: bold;
	line-height: 1.5;
	margin-bottom: 2rem;
}
.about_section h2 span {
	color: #1D76C4;
}
.about_section p {
	line-height: 1.75;
	margin-bottom: 0;
}
.about_lead {
	text-align: center;
	position: relative;
}
.about_lead h2{
	text-align: center;
	position: relative;
	background: #fff;
	padding: 1rem;
	display: inline-block;
	color: #000;
	margin-bottom: 0;
}
.about_lead h2 span{
	color: #1D76C4;
}
.about_lead .container {
	max-width: 1000px;
}
.lead_wrap{
	position: relative;
	padding: 3rem 0;
	background: #F6FAFD;
}
.lead_wrap > h2{
	position: absolute;
	white-space: nowrap;
	top:0;
	left: 50%;
	transform: translate(-50% , -50%);
}
.about_flex {
	display: flex;
	align-items: center;
	gap: 70px;
}
.about_flex.is-reverse {
	flex-direction: row-reverse;
}
.about_flex .img,
.about_flex .text {
	width: 50%;
}
.about_flex .img img {
	border: solid 8px #EFEFEF;
	width: 100%;
}
.about_graph {
	text-align: center;
}
.about_graph .text {
	max-width: 1000px;
	margin: 0 auto 2.5rem;
}
.about_graph .img img {
	border: solid 8px #EFEFEF;
	width: 100%;
	max-width: 900px;
}
.about_message {
	padding: 80px 0;
	text-align: center;
	background: linear-gradient(270deg,#2487CE 0%,#05BCFB 100%);
	position: relative;
}
/* --- ::before（右上：大きな直角三角形） --- */
.about_message::before {
  content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 30%;
    z-index: 1;
    clip-path: polygon(100% 0%, 0% 0%, 100% 100%);
    background-color: #f5f5f5;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* --- ::after（左下：小さな直角三角形） --- */
.about_message::after {
      content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40%;
    height: 30%;
    z-index: 1;
    clip-path: polygon(0% 100%, 0% 0%, 100% 100%);
    background-color: #00bcd4;
    mix-blend-mode: screen;
    pointer-events: none;
}
.about_message h2 {
	color: #000;
	font-size: 32px;
	font-weight: bold;
	margin-bottom: 1.5em;
	background: #fff;display: inline-block;
	padding: 1rem 3rem;
}
.about_message h2 span{
	color: #1D76C4;
}
.about_message p {
	color: #fff;
	line-height: 2;
	max-width: 1000px;
	margin: 0 auto;
}
.about_closing {
	padding: 80px 0;
	text-align: center;
	background: #F8F8F8;
}
.about_closing h2 {
	display: inline-block;
	background: #1D76C4;
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	padding: 0.75em 2em;
	border-radius: 100px;
	margin-bottom: 2em;
}
.about_closing p {
	max-width: 760px;
	margin: 0 auto;
	line-height: 1.75;
}
@media screen and (max-width:768px) {
	
	#page-about > .container > h2 {
		font-size: 24px;
	}
	#page-about > .page_ttl > .container > h2 > span{
		padding: 1rem;
	}
	#page-about > .page_ttl > .container > h2{
		font-size: 26px;
	}
	.lead_wrap > h2{
		position: inherit;
		left: 0;
		transform: none;
		margin-bottom: 2rem;
	}
	.lead_wrap > h2 + p{
		text-align: left;
	}
	.about_section {
		padding: 40px 0;
	}
	.about_section h2 {
		font-size: 22px;
	}
	.about_section.about_graph h2 + p {
		text-align: left;
	}
	.about_section .about_flex h2 {
		text-align: center;
	}
	.lead_wrap{
		padding: 15px;
	}
	.about_flex,
	.about_flex.is-reverse {
		flex-direction: column;
		gap: 30px;
	}
	.about_flex .img,
	.about_flex .text {
		width: 100%;
	}
	.about_message,
	.about_closing {
		padding: 50px 0;
	}
	.about_message h2 {
		font-size: 24px;
		padding: 1rem;
	}
	.about_closing h2 {
		font-size: 20px;
	}
}