@charset "UTF-8";

/* whatisMain */
.selfSufficiencyBlock .whatisMain {
	padding: 2em 60px;
	margin-bottom: 30px;
	position: relative;
}

.selfSufficiencyBlock .whatisMain .subTitle {
	display: block;
	width: 17em;
	padding: .4em 0;
	margin-bottom: 2.5em;
	border-radius: 2em;
	background: var(--blue-gradient);
	color: #fff;
	font-weight: bold;
	text-align: center;
	font-size: .9em;
}

.selfSufficiencyBlock .whatisMain .subTitle span {
	display: inline-block;
	width: 1.4em;
	line-height: 1.4em;
	margin-left: .5em;
	text-align: center;
	background-color: #fff;
	color: var(--color-blue);
	border-radius: 50%;
}

.selfSufficiencyBlock .whatisMain h3 {
	font-size: 2.5em;
	line-height: 1.4;
	margin-bottom: .5em;
	color: var(--color-blue);
}

.selfSufficiencyBlock .whatisMain h3+p {
	line-height: 1.8;
	font-weight: bold;
	color: #222;
}

.selfSufficiencyBlock .whatisMain .mainImg {
	width: 250px;
	position: absolute;
	right: 30px;
	bottom: -7%;
}

.selfSufficiencyBlock .whatisMain .mainImg img {
	width: 100%;
	height: auto;
}

.selfSufficiencyBlock .whatisMain .mainImg .display {
	width: 330px;
	height: auto;
	position: absolute;
	right: 35%;
	bottom: 85%;
}

/* column */
.selfSufficiencyBlock .whatisMain .column {
	position: relative;
	border: 1px solid;
	color: var(--color-blue);
	padding: 30px 50px 30px 50px;
}

.selfSufficiencyBlock .whatisMain .column h5 {
	font-size: 17px;
	margin-bottom: 30px;
}

.selfSufficiencyBlock .whatisMain .column .titleImg {
	position: absolute;
	top: -44px;
	left: -20px;
}

.selfSufficiencyBlock .whatisMain .column ol {
	display: flex;
	justify-content: space-between;
	counter-reset: columNum;
}

.selfSufficiencyBlock .whatisMain .column li {
	width: 230px;
}

.selfSufficiencyBlock .whatisMain .column li p {
	position: relative;
	padding-left: 1.5em;
	font-size: .9em;
	margin-top: 1em;
	margin-bottom: 0;
}

.selfSufficiencyBlock .whatisMain .column li p:before {
	content: counter(columNum);
	counter-increment: columNum;
	position: absolute;
	left: 0;
	top: -.2em;
	font-size: 1.2em;
}

/* whatisSection */
.selfSufficiencyBlock .whatisSection {
	text-align: center;
	padding: 40px 60px;
}

.selfSufficiencyBlock .whatisSection h3 {
	font-size: 24px;
	display: inline-block;
	text-align: center;
	color: var(--color-blue);
	border-bottom: 1px solid;
	padding: 0 1.5em 10px;
	margin-bottom: 1.5em;
	line-height: 1.3;
}

.selfSufficiencyBlock .whatisSection img {
	width: 100%;
	height: auto;
}

.selfSufficiencyBlock .whatisSection p {
	color: #000;
	text-align: left;
	font-size: .95em;
	line-height: 1.8em;
	margin-bottom: 2.5em;
}

.selfSufficiencyBlock .whatisSection p .note {
	font-size: .8em;
	color: #666;
}

.selfSufficiencyBlock .whatisSection a {
	color: var(--color-blue);
	text-decoration: underline;
}

.selfSufficiencyBlock .whatisSection1 h4 {
	font-size: 1.2em;
	color: var(--color-blue);
	border: 2px solid var(--color-blue);
	padding: .3em 2em;
	margin-bottom: 1em;
	display: inline-block;
}

.selfSufficiencyBlock .whatisSection1 .lead {
	font-weight: bold;
	text-align: center;
	margin-bottom: 2em;
}

.selfSufficiencyBlock .whatisSection1 .note {
	font-size: .85em;
	color: #666;
	line-height: 1.6em;
}

.selfSufficiencyBlock .whatisSection1 .fig {
	margin: 2em auto 1em;
	padding: 2em;
	background-color: #f4f7f7;
}

.selfSufficiencyBlock .whatisSection1 .fig h5 {
	text-align: left;
	margin-bottom: -.5em;
	font-size: .95em;
	font-weight: bold;
	color: #666;
}

.selfSufficiencyBlock .whatisSection1 .fig img {
	width: 700px;
	height: auto;
}

.selfSufficiencyBlock .whatisSection1 .column {
	border: 1px dotted var(--color-blue);
	padding: 20px 18px 20px 166px;
	position: relative;
}

.selfSufficiencyBlock .whatisSection1 .column .logo {
	position: absolute;
	left: 18px;
	top: 50%;
	margin-top: -24px;
	margin-bottom: 0;
}

.selfSufficiencyBlock .whatisSection2 h3 small {
	font-size: 0.8em;
}

.selfSufficiencyBlock .whatisSection2 ul {
	padding-top: 50px;
	text-align: center;
}

.selfSufficiencyBlock .whatisSection2 li {
	margin: 0 30px;
	display: inline-block;
	width: 280px;
	position: relative;
}

.selfSufficiencyBlock .whatisSection2 li img {
	margin-bottom: 15px;
}

.selfSufficiencyBlock .whatisSection2 li p {
	margin-bottom: 0;
	font-size: .9em;
	font-weight: bold;
	text-align: center;
}

@media screen and (min-width:768px) {
	.selfSufficiencyBlock .whatisSection2 li .balloon {
		width: 11.5em;
		height: 11.5em;
		padding-top: .5em;
		display: flex;
		justify-content: center;
		flex-direction: column;
		position: absolute;
		top: -90px;
		right: -120px;
		border: 1px solid #e78e27;
		border-radius: 50%;
		font-size: .95em;
		text-align: center;
		color: #e78e27;
	}
}

.selfSufficiencyBlock .whatisSection3 p {
	width: 480px;
	/* padding-left: 70px; */
}

.selfSufficiencyBlock .whatisSection3 .figure {
	width: 330px;
	padding-right: 70px;
}



/*==========================================================================
sp
==========================================================================*/

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

	.selfSufficiencyBlock .whatisMain {
		padding: 3vw 5vw 5vw;
		margin-bottom: 0;
	}

	.selfSufficiencyBlock .whatisMain .subTitle {
		margin: 0 auto 2em;
	}

	.selfSufficiencyBlock .whatisMain h3 {
		text-align: center;
		font-size: 1.7em;
		margin-bottom: 1em;
		font-weight: bold;
	}

	.selfSufficiencyBlock .whatisMain h3+p br {
		display: none;
	}

	.selfSufficiencyBlock .whatisMain .mainImg {
		position: static;
		width: 50%;
		margin: 30% 0 0 35%;
	}

	.selfSufficiencyBlock .whatisMain .mainImg .display {
		width: 50%;
		height: auto;
		position: absolute;
		right: 35%;
		bottom: 22%;
	}

	/* column */
	.selfSufficiencyBlock .whatisMain .column {}

	.selfSufficiencyBlock .whatisMain .column h5 {}

	.selfSufficiencyBlock .whatisMain .column .titleImg {}

	.selfSufficiencyBlock .whatisMain .column ol {}

	.selfSufficiencyBlock .whatisMain .column li {}

	.selfSufficiencyBlock .whatisMain .column li p {}

	.selfSufficiencyBlock .whatisMain .column li p:before {}

	/* whatisSection */
	.selfSufficiencyBlock .whatisSection {
		padding: 10vw 5vw 5vw;
	}

	.selfSufficiencyBlock .whatisSection h3 {
		padding: 0 0 .5em;
		font-size: 1.2em;
		width: 100%;
	}

	.selfSufficiencyBlock .whatisSection1 .note {
		margin-bottom: 0;
	}

	.selfSufficiencyBlock .whatisSection1 .fig {
		padding: 1.5em;
	}

	.selfSufficiencyBlock .whatisSection1 .fig h5 {
		text-align: center;
		margin-bottom: 1em;
	}

	.selfSufficiencyBlock .whatisSection1 .fig img {
		width: 100%;
		height: auto;
	}

	.selfSufficiencyBlock .whatisSection2 h3 small {
		font-size: .7em;
	}

	.selfSufficiencyBlock .whatisSection2 ul {
		padding: 0;
	}

	.selfSufficiencyBlock .whatisSection2 li {
		width: 100%;
		margin: 1.5em 0;
	}

	.selfSufficiencyBlock .whatisSection2 li img {
		width: 65%;
	}

	.selfSufficiencyBlock .whatisSection2 li .balloon {
		display: inline-block;
		margin-bottom: 2em;
		padding: .6em 3em .5em;
		text-align: center;
		color: #e78e27;
		border: solid 1px;
		line-height: 1.5;
		position: relative;
	}

	.selfSufficiencyBlock .whatisSection2 li .balloon::before,
	.selfSufficiencyBlock .whatisSection2 li .balloon::after {
		content: '';
		display: block;
		border: solid 12px transparent;
		position: absolute;
		left: calc(50% - 12px);
		top: 100%;
	}

	.selfSufficiencyBlock .whatisSection2 li .balloon::before {
		border-top: solid 15px #e78e27;
	}

	.selfSufficiencyBlock .whatisSection2 li .balloon::after {
		margin-top: -2px;
		border-top: solid 15px #fff;
	}

	.selfSufficiencyBlock .whatisSection3 p {
		padding-left: 0;
	}

	.selfSufficiencyBlock .whatisSection3 .figure {
		width: 60%;
		padding: 0;
		margin: 0 auto;
	}


}