@charset "utf-8";

/*-------------------------------
	Keyvisu_sustaina
-------------------------------*/

.Keyvisu_sustaina {
	padding:15rem 0 5rem;
}

.Key_txt {
	width:56%;
	padding-right:6rem;
}

.Key_img {
	width:44%;
	max-width:46.5rem;
}

.Key_title {
	max-width:34.2rem;
	margin-bottom:3rem;
}

.Key_title img {
	width:100%;
	height:100%;
	object-fit: contain;
}

.Key_txt p {
	font-family: var(--mincho);
	font-size:2.4rem;
	font-weight:600;
	line-height:2;
	letter-spacing: 0.05em;
	margin-bottom:1.5em;
}

.Key_txt .logo_sdgs_goals {
	width:18.2rem;
}

/*-------------------------------
	ar green
-------------------------------*/

.ar_green {
	padding:17rem 0 3rem;
	margin-top:-13rem;
	position:relative;
}

.ar_green::before {
	content:"";
	display: block;
	width:100%;
	height:196%;
	background:url(../images/sustaina_project/bg_green.png) no-repeat top center / cover;
	position:absolute;
	left:0;
	top:0;
	z-index: -1;
}

.Building {
	padding-top: 0;
	padding-bottom: 0;
}

.bg_white {
	background:#fff;
	padding:9rem 5.5rem 7.5rem;
	border-radius: 1rem;
}

.build_title {
	margin-bottom:6rem;
}

.build_title_en,
.ar_title_en {
	font-size:2rem;
	font-weight:500;
	font-family: var(--en);
	text-align: center;
	line-height:1;
	letter-spacing: 0.1em;
	color:#fff;
	text-shadow: .1rem .1rem 0 var(--maincolor), -.1rem -.1rem 0 var(--maincolor),
				-.1rem .1rem 0 var(--maincolor), .1rem -.1rem 0 var(--maincolor);
}

.build_title h2 {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top:2rem;
}

.txt_sustaina {
	width:15rem;
}

.build_jp {
	font-size:3.6rem;
	font-weight:600;
	font-family: var(--mincho);
	letter-spacing: 0.15em;
	color:var(--maincolor);
	line-height:1;
	position:relative;
	padding:0 0.75em 0 0.25em;
}

.build_jp::after {
	content:"";
	display: inline-block;
	width:5rem;
	height:.1rem;
	background:var(--maincolor);
	transform:rotate(-45deg);
	position:absolute;
	right:-1.6rem;
	top:0;
	bottom:0;
	margin:auto 0;
}

.build_en {
	font-size:1.2rem;
	font-family: var(--en);
	font-weight:500;
	color:var(--maincolor);
	letter-spacing: 0.06em;
	line-height: 1;
}

.build_en span {
	font-size:3rem;
	line-height: 1;
}

/*-------------------------------
	build flex
-------------------------------*/

.build_flex {
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
}

.build50 {
	width:48.2%;
	max-width:47rem;
	margin-bottom:9rem;
}

.build_block02 {
	width:100%;
}

.build_comp_title {
	padding:1.5rem 2rem;
	border-top:.1rem solid var(--maincolor);
	border-bottom:.1rem solid var(--maincolor);
	margin-bottom:2rem;
}

.build_comp_title h3 {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.build_comp_title .logo_sdgs_goals {
	width:9rem;
}

.build_comp_title h3 span {
	font-size:2.4rem;
	font-weight:700;
	letter-spacing: 0.05em;
	line-height:1.25;
	color:var(--maincolor);
	padding-left:0.5em;
}

.build_comp_img {
	border-radius:1rem;
	overflow: hidden;
	margin-bottom:2rem;
}

.build_comp_dl {
	display: flex;
	flex-wrap:wrap;
	max-width:35rem;
	margin:0 auto 2rem;
}

.build_comp_dl dt {
	font-weight:700;
	width:10rem;
}

.build_comp_dl dd {
	width:calc(100% - 10rem);
}

.build_comp_txt p,
.build_comp_txt p span {
	font-weight:700;
}

.build_comp_txt span {
	color:var(--maincolor);
}

/*-------------------------------
	build block
-------------------------------*/

.build_block {
	background:#ECF2F8;
	border-radius: 1rem;
	padding:5.5rem 0;
	display: flex;
	flex-direction: column;
	position:relative;
	box-shadow: .5rem .5rem 0px 0px var(--maincolor);
}

.build_block_line {
	padding:0 3rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	position: relative;
}

.build_block_txt {
	flex-grow: 1;
	margin-bottom:3rem;
}

.build_block_txt span{
	color: var(--maincolor);
}
.build_block .numbers_title {
	display: block;
	text-align: center;
	color:var(--maincolor);
}

.build_block01 {
	min-height: 92rem;
}

.build_block01 .numbers_title {
	margin-bottom:7rem;
}

.build_block .numbers_title span {
	margin-right:0;
	display: block;
	text-align: center;
	margin-bottom: 4.6rem;
	-webkit-text-stroke-color: var(--maincolor);
}

.build_block .affe_wrap .numbers_title {
	font-size:1.8rem;
	line-height:2;
	margin-bottom:6rem;
}

.build_block .affe_wrap .numbers_title span {
	font-size:5.1rem;
	margin-bottom:3rem;
}

.build_block .affe_wrap {
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
}

.build_block .affe_wrap .build_block_line {
	width:48.2%;
	max-width:46.5rem;
	padding-top:5.5rem;
}

/*-------------------------------
	ar sus
-------------------------------*/

.ar_sus {
	position:relative;
}

.ar_title {
	position:relative;
	padding:79rem 0 0;
}

.ar_title::before {
	content:"";
	display: block;
	width:calc(100% - 1.5rem);
	height:100%;
	border-radius:0 1rem 0 0;
	background:#fff;
	position:absolute;
	left:0;
	top:0;
}

.ar_sus::before {
	content:"";
	display: block;
	width:100%;
	height:58.4rem;
	background-image:url(../images/sustaina_project/bg_ar_sus.jpg);
	background-size:cover;
	background-position:center center;
	background-repeat: no-repeat;
	background-attachment:  fixed;
	position:absolute;
	left:0;
	top:9rem;
	z-index: 1;
}

.ar_title_inner {
	position:relative;
}

.ar_title h2 {
	text-align: center;
	background:url(../images/sdgs/bg_sdgs_line.svg) repeat-x center;
}

.ar_title h2 span {
	display: inline-block;
	font-size:3.5rem;
	font-weight:700;
	line-height:1.25;
	color:var(--maincolor);
	text-align: center;
	padding:0.25em 2.5em;
	background:#fff;
}

.ar_title .Button_pdf {
	margin:4rem auto 0;
}

.ar_title .Button_pdf a {
	background:var(--maincolor);
}

.ar_title .Button_pdf a::after {
	width:2.2rem;
	height:2.3rem;
	background:url(../images/sustaina_project/icon_pdf-white.svg) no-repeat center / contain;
	right:2.5rem;
}

.ar_title .Button_pdf a:hover::after{
	background-image: url(../images/sustaina_project/icon_pdf.svg);
}

.sus_ini {
	background: linear-gradient(
	to right,
	#fff calc(100% - 1.5rem),
	transparent calc(100% - 1.5rem),
	transparent 100%
	);
	padding:0;
}

.ini_wrap {
	position:relative;
}

.ini_wrap::before {
	content:"";
	display: block;
	width:.1rem;
	height:100%;
	background:#3C97D1;
	position:absolute;
	left:2.5rem;
	top:0;
}

.sus_ini_comp .ini_wrap::before {
	display: none;
}

.ini_head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background:#3D97D1;
	border-radius: 1rem;
	padding:3rem 3.5rem;
	position:relative;
	margin-bottom:6rem;
}

.ini_title {
	padding-left:13rem;
	padding-right:2rem;
	position:relative;
}

.sus_ini02-1 .ini_title,
.sus_ini02-2 .ini_title {
	padding-left:19rem;
}

.ini_title::before {
	content:attr(data-no);
	display: block;
	height:100%;
	padding-right:0.25em;
	border-right:.1rem solid #fff;
	font-size:7rem;
	font-weight:600;
	font-style: italic;
	font-family: var(--no);
	-webkit-text-stroke-width: 0.1rem;
	-webkit-text-stroke-color: #fff;
	color:transparent;
	line-height:0.85;
	position:absolute;
	left:1rem;
	top:0;
}

.ini_title h2,
.ini_title h3 {
	color:#fff;
	font-weight:700;
	letter-spacing: 0.05em;
	line-height:1.35;
}

.ini_title h2 {
	font-size:2.4rem;
	margin-bottom:1em;
}

.ini_title h3 {
	font-size:2.2rem;
}

.ini_head_img {
	width:28rem;
	border:.1rem solid var(--maincolor);
	border-radius:1rem;
	overflow:hidden;
	box-shadow: .5rem .5rem 0px 0px var(--maincolor);
}

.ini_flex {
	padding:0 5.5rem;
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
	align-items: flex-start;
}

.ini_block {
	width:48.2%;
	max-width:46.5rem;
	margin-bottom:9rem;
}

.ini_maru {
	font-size:2.2rem;
	font-weight:700;
	line-height:1.5;
	letter-spacing: 0.05em;
	color:var(--maincolor);
	margin-bottom:1.5em;
	position:relative;
}

.ini_maru::before {
	content:"";
	display: block;
	width:3rem;
	height:3rem;
	background:#3C97D1;
	border-radius: 50%;
	position:absolute;
	left:-4.5rem;
	top:0.1em;
}

.ini_txt h4 {
	font-size:1.8rem;
	font-weight:700;
	line-height:1.5;
	letter-spacing: 0.05em;
	color:var(--maincolor);
	margin-bottom:1.5em;
}

.ini_txt p:not(:last-of-type) {
	margin-bottom:1em;
}

.sus_ini00 {
	margin-top:-2.4rem;
}

.ini_block00 {
	padding-top:13rem;
}

.ini_block02-1 {
	width:calc(100% - 30rem);
	max-width:60rem;
	padding-right:3rem;
}

.ini_block02-2 {
	width:30rem;
}

.ini_block02-2 figcaption {
	font-size:1.5rem;
	line-height:1.75;
	display: block;
	padding-top: 1.5rem;
}

.ini_block01-4 .ini_img {
	margin-top:6rem;
}

.ini_movie video,
.ini_movie iframe {
	width:100%;
	height:32.5rem;
	object-fit: contain;
}

/*-------------------------------
	ini comp
-------------------------------*/

.sus_ini_comp {
	margin-top:-2rem;
	padding-bottom:15rem;
	background:linear-gradient(
		to bottom,
		transparent 50%,
		#fff 50%,
		#fff 100%
	);
	position:relative;
	border-radius: 0 0 5rem 5rem;
}

.ini_title_comp {
	margin-bottom:6.5rem;
}

.ini_title_comp h2 {
	padding-left:8rem;
	font-size:10rem;
	font-weight:600;
	font-style: italic;
	font-family: var(--no);
	-webkit-text-stroke-width: 0.1rem;
	-webkit-text-stroke-color: #3D97D1;
	color:transparent;
	line-height:0.85;
	position:relative;
}

.ini_title_comp h2::before {
	content:"";
	display: block;
	width:5.5rem;
	height:5.8rem;
	background:url(../images/sustaina_project/icon_circle.svg) no-repeat center / contain;
	position:absolute;
	left: 0;
	top:0;
	bottom:0;
	margin:auto 0;
}

.ini_comp_list .ini_block {
	border-radius:1.5rem;
	overflow:hidden;
	margin-bottom:4rem;
}

.comp_txt {
	padding:0 5.5rem;
}

.comp_txt p {
	font-weight:700;
	color:var(--maincolor);
}

/*-------------------------------

-------------------------------*/

/*-------------------------------

-------------------------------*/

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

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

/*-------------------------------
	build flex
-------------------------------*/

.build50 {
	width:100%;
	max-width:100%;
}

.build_block .affe_wrap .build_block_line {
	width:100%;
	max-width:100%;
}

.ini_block {
	width:100%;
	max-width:100%;
}

.ini_block01-4 .ini_img {
	margin-top:0;
}

} /* end 960px */

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

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

/*-------------------------------
	Keyvisu_sustaina
-------------------------------*/

.Keyvisu_sustaina {
	padding:15rem 0 5rem;
}

.Key_txt {
	width:100%;
	max-width:100%;
	padding-right:0rem;
}

.Key_img {
	width:100%;
	max-width:46.5rem;
	margin:0 auto 8rem;
	order:-1;
}

.Key_title {
	max-width:47rem;
	margin:0 auto 5rem;
}

.Key_txt p {
	font-size:3.2rem;
	text-align: center;
	margin-bottom:1.5em;
}

.Key_txt .logo_sdgs_goals {
	width:30.5rem;
	margin:0 auto;
}

/*-------------------------------
	ar green
-------------------------------*/

.ar_green {
	padding:8rem 0 3rem;
	margin-top:0rem;
}

.ar_green::before {
	height:100%;
}

.Building {
	padding-bottom:12rem;
}

.bg_white {
	background:#fff;
	padding:5rem 5rem 9rem;
	border-radius: 1rem;
	box-shadow: 0 0 .6rem rgba(0,0,0,.16);
}

.build_title {
	margin-bottom:6rem;
}

.build_title_en,
.ar_title_en {
	font-size:2.2rem;
	text-shadow:.1rem .1rem 0 var(--maincolor), -.1rem -.1rem 0 var(--maincolor),
			-.1rem .1rem 0 var(--maincolor), .1rem -.1rem 0 var(--maincolor),
			0px .1rem 0 var(--maincolor),  0 -.1rem 0 var(--maincolor),
			-.1rem 0 0 var(--maincolor), .1rem 0 0 var(--maincolor);
}

.build_title h2 {
	margin-top:2rem;
}

.txt_sustaina {
	width:15.4rem;
	display: flex;
	align-items: center;
}

.build_jp {
	font-size:3.6rem;
}

.build_jp::after {
	width:5rem;
	height:.2rem;
	right:-1.6rem;
	top:0;
	bottom:0;
	margin:auto 0;
}

.build_en {
	font-size:1.2rem;
}

.build_en span {
	font-size:3rem;
}

/*-------------------------------
	build flex
-------------------------------*/

.build50 {
	width:100%;
	max-width:100%;
	margin-bottom:7rem;
}

.build_block02 {
	width:100%;
}

.build_comp_title {
	padding:2.5rem 2.5rem;
	border-top:.2rem solid var(--maincolor);
	border-bottom:.2rem solid var(--maincolor);
	margin-bottom:3rem;
}

.build_comp_title .logo_sdgs_goals {
	width:15rem;
}

.build_comp_title h3 span {
	font-size:3rem;
}

.build_comp_img {
	border-radius:1rem;
	margin-bottom:4rem;
}

.build_comp_dl {
	max-width:calc(100% - 4rem);
	margin:0 auto 4rem;
}

.build_comp_dl dt {
	width:12rem;
}

.build_comp_dl dd {
	width:calc(100% - 12rem);
}

/*-------------------------------
	build block
-------------------------------*/

.build_block {
	padding:7rem 0;
	display: block;
}

.build_block_line {
	padding:0 5rem;
	display: block;
}

.build_block_txt {
	margin-bottom:4rem;
}

.build_block01 {
	min-height:auto;
}

.build_block01 .numbers_title {
	margin-bottom:4rem;
}

.build_block .numbers_title span {
	margin-bottom:4rem;
}

.build_block .affe_wrap .numbers_title {
	font-size:3rem;
	line-height:1.5;
	margin-bottom:6rem;
}

.build_block .affe_wrap .numbers_title span {
	font-size:7.5rem;
	margin-bottom:4rem;
}

.build_block .affe_wrap .build_block_line {
	width:100%;
	max-width:100%;
	padding-top:5.5rem;
	position:relative;
}

.build_block02 .build_block_line:not(:first-of-type) {
	margin-top:7.5rem;
}

.build_block02 .build_block_line:not(:first-of-type)::before {
	content:"";
	display: block;
	width:calc(100% - 11rem);
	height:.2rem;
	background:#fff;
	position:absolute;
	left:50%;
	top:0;
	transform:translateX(-50%);
}

/*-------------------------------
	ar sus
-------------------------------*/

.ar_title {
	padding:100rem 0 0;
}

.ar_title::before {
	display: none;
}

.ar_sus::before {
	width:100%;
	height:82.4rem;
	top:0;
}

.ar_title h2 {
	text-align: center;
	background:url(../images/sdgs/bg_sdgs_line.svg) repeat-x center;
}

.ar_title h2 span {
	font-size:3.6rem;
	padding:0.25em 0.5em;
}

.ar_title .Button_pdf {
	margin:5rem auto 8rem;
}

.ar_title .Button_pdf a::after {
	width:3.7rem;
	height:4rem;
	right:5rem;
}

.sus_ini {
	background:#fff;
	padding:0;
}

.ini_wrap::before {
	width:.2rem;
	height:100%;
	left:5.4rem;
	top:1rem;
}

.ini_head {
	display: block;
	padding:6rem 6rem;
	margin-bottom:7.5rem;
	margin-left:4.5rem;
}

.ini_title {
	padding-left:0rem;
	padding-right:0rem;
	position:relative;
}

.sus_ini02-1 .ini_title,
.sus_ini02-2 .ini_title {
	padding-left:0rem;
}

.ini_title::before {
	height:auto;
	padding-right:0;
	border-right:none;
	font-size:10.2rem;
	-webkit-text-stroke-width: 0.2rem;
	position:relative;
	left:auto;
	top:auto;
	margin-bottom:5rem;
}

.ini_title h2 {
	font-size:3.2rem;
	margin-bottom:1.25em;
	line-height:1.5;
}

.ini_title h3 {
	font-size:2.8rem;
	line-height:2;
	margin-bottom:2em;
}

.ini_head_img {
	width:41.6rem;
	border:.2rem solid var(--maincolor);
	box-shadow: .5rem .5rem 0px 0px var(--maincolor);
	margin:0 auto;
}

.ini_flex {
	padding:0 0 0 8.5rem;
}

.ini_block {
	width:100%;
	max-width:100%;
	margin-bottom:10rem;
}

.ini_maru {
	font-size:3rem;
}

.ini_maru::before {
	width:3rem;
	height:3rem;
	left:-4.5rem;
	top:0.3em;
}

.ini_txt h4 {
	font-size:3rem;
	margin-bottom:1em;
}

.sus_ini00 {
	margin-top:0rem;
}

.ini_block00 {
	padding-top:0rem;
}

.ini_block02-1 {
	width:100%;
	max-width:100%;
	padding-right:0rem;
}

.ini_block02-2 {
	width:100%;
}

.ini_block02-2 figcaption {
	font-size:2.4rem;
}

.ini_block02-5 {
	margin-bottom:12rem;
}

.ini_block01-4 .ini_img {
	margin-top:0rem;
}

.ini_movie video,
.ini_movie iframe {
	height:40rem;
}

/*-------------------------------
	ini comp
-------------------------------*/

.sus_ini_comp {
	margin-top:-2rem;
	padding-bottom:15rem;
}

.ini_title_comp {
	margin-bottom:6.5rem;
}

.ini_title_comp h2 {
	padding-left:10rem;
	font-size:8.4rem;
	-webkit-text-stroke-width: 0.2rem;
}

.ini_title_comp h2::before {
	width:8.2rem;
	height:8.7rem;
	left: 1.4rem;
}

.ini_comp_list .ini_block {
	margin-bottom:6rem;
}

.comp_txt {
	padding:0 0 0 8.5rem;
}

} /* end 768px */