@charset "utf-8";

* {
    line-height: 1.75;
	font-size: 14px;
}

.naviBox {
    margin: 0;
}

img { max-width: 100%; width: 100%;}


/******************** main ********************/

#main {
	position: relative;
	width: 1160px;
	padding: 160px 0;
	margin: 0 auto;
	letter-spacing: 0.2em;
}

#main p {
	width: 750px;
	margin: 0 auto 58px;
}

#main h2 {
	padding-bottom: 60px;
	text-align: center;
	font-size: 20px;
}

#main .gda {
	padding: 0;
	margin: 1em auto;
	text-align: center;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.4;
}
#main .gda span { display: block; font-size: 18px;}

#main dl {
	border-top: 10px solid #000;
	padding: 60px 0 0;
	text-align: center;
}
#main dt {
	margin-bottom: 30px;
	font-size: 30px;
	font-weight: bold;
}
#main dd {
	font-size: 19px;
}

@media only screen and (max-width:767px){
	#main {
		width: auto;
		padding: 60px 10px;
	}

	#main p {
		width: 100%;
		margin: 0 auto 25px;
	}

	#main h2 {
		padding-bottom: 30px;
		font-size: 18px;
	}

	#main .gda { font-size: 24px;}
	#main .gda span { font-size: 12px;}

	#main dl {
		border-top: 5px solid #000;
		padding: 30px 0 0;
	}
	#main dt {
		margin-bottom: 20px;
		font-size: 20px;
	}
	#main dd {
		font-size: 16px;
		text-align: left;
	}
}


/******************** area1 ********************/

#area1 {
	padding: 145px 0 0;
}

#area1 .text {
	text-align: center;
	font-size: 19px;
	font-weight: bold;
}

#area1 div {
	background: #eeeeef;
}
#area1 div ul {
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	width: 1160px;
	padding: 90px 0;
	margin: 0 auto;
}
#area1 div ul li {
	width: 498px;
	font-size: 18px;
}
#area1 div h3 {
	font-size: 23px;
	font-weight: bold;
}
#area1 div h3::before {
	content: "■";
}
#area1 div p {
	margin-top: 30px;
}
#area1 div li p:first-of-type {
	text-align: right;
}
#area1 div p img {
	margin-bottom: 10px;
}

@media only screen and (max-width:767px){
	#area1 {
		padding: 40px 0;
	}

	#area1 .text {
		padding: 0 10px;
		font-size: 15px;
		text-align: left;
	}

	#area1 div {
		padding: 0 10px;
	}
	#area1 div ul {
		display: block;
		width: 100%;
		padding: 0 0 40px;
		margin: 40px auto 0;
	}
	#area1 div ul li {
		width: 100%;
		padding-top: 40px;
		font-size: 15px;
	}
	#area1 div h3 {
		font-size: 20px;
	}
	#area1 div p {
		margin-top: 15px;
	}
	#area1 div p img {
		margin-bottom: 5px;
	}
}

/******************** area2 ********************/

#area2 {
	width: 1160px;
	padding: 140px 0;
	margin: 0 auto;
	font-size: 18px;
	text-align: center;
}

#area2 h3 {
	position: relative;
	padding-bottom: 50px;
	font-size: 30px;
	font-weight: bold;
}
#area2 h3::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	background: #000;
	width: 284px;
	height: 5px;
}

#area2 h4 {
	margin: 55px 0 30px;
	font-size: 23px;
	font-weight: bold;
}
#area2 h4 span {
	position: relative;
	padding-left: 1.2em;
}
#area2 h4 span::before {
	content: "■";
	position: absolute;
	top: -0.2em;
	left: 0;
}

#area2 .text {
	padding-top: 45px;
	font-size: 19px;
}
#area2 .image {
	padding-top: 30px;
}

@media only screen and (max-width:767px){
	#area2 {
		width: auto;
		padding: 40px 10px;
		margin: 0 auto;
		font-size: 15px;
		text-align: left;
	}

	#area2 h3 {
		padding-bottom: 25px;
		font-size: 20px;
	}
	#area2 h3::after {
		width: 142px;
		height: 3px;
	}

	#area2 h4 {
		margin: 25px 0 15px;
		font-size: 17px;
	}
	#area2 h4 span {
		display: block;
	}
	#area2 h4 span::before {
		top: 0em;
		left: 0;
	}

	#area2 .text {
		padding-top: 45px;
		font-size: 15px;
	}
	#area2 .image {
		padding-top: 30px;
	}
}


/******************** area3 ********************/

#area3 {
	background: #eeeeef;
	padding: 140px 0;
	margin: 0 auto;
	font-size: 18px;
	text-align: center;
}

#area3 h3 {
	position: relative;
	padding-bottom: 50px;
	font-size: 30px;
	font-weight: bold;
}
#area3 h3::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	background: #000;
	width: 284px;
	height: 5px;
}

#area3 p {
	width: 1160px;
	padding-top: 40px;
	margin: 0 auto;
}

@media only screen and (max-width:767px){
	#area3 {
		padding: 40px 10px;
		font-size: 15px;
	}

	#area3 h3 {
		padding-bottom: 25px;
		font-size: 20px;
	}
	#area3 h3::after {
		width: 142px;
		height: 3px;
	}

	#area3 p {
		width: 100%;
		padding-top: 20px;
		text-align: left;
	}
}


/******************** area4 ********************/

#area4 {
	padding: 140px 0 0;
	font-size: 18px;
}

#area4 .box1 {
	width: 1160px;
	padding-bottom: 90px;
	margin: 0 auto;
	text-align: center;
}
#area4 h3 {
	background-color: #fff;
	border: 1px solid #000;
	padding: 12px 0;
	margin-bottom: 35px;
	text-align: center;
	font-size: 25px;
	font-weight: 700;
}

#area4 .box2 {
	background: #eeeeef;
	padding: 90px 0;
}
#area4 .box2 .image {
	width: 1160px;
	margin: 0 auto;
}

#area4 .box2A {
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	gap: 50px 0;
	border-top: 1px solid #000;
	width: 1160px;
	padding-top: 80px;
	margin: 80px auto 0;
}
#area4 .list {
	width: 548px;
}
#area4 .list h4 {
	padding-bottom: 10px;
	font-size: 20px;
	font-weight: 700;
}
#area4 .list div {
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
	gap: 0 30px;
}
#area4 .list p {
	width: 264px;
}
#area4 .list dl {
	flex: 1;
}
#area4 .list dt {
	position: relative;
	padding: 0 0 10px 1.5em;
	font-size: 18px;
	line-height: 1.5em;
}
#area4 .list dt::before {
	content: "■";
	position: absolute;
	top: 0;
	left: 0;
}
#area4 .list dd {
	font-size: 15px;
	line-height: 1.5em;
}

#area4 .box3 {
	width: 1160px;
	padding: 90px 0;
	margin: 0 auto;
}
#area4 .box3 .text {
	text-align: center;
	font-size: 20px;
}
#area4 .box3A {
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
#area4 .box3A div {
	width: 528px;
	padding-top: 48px;
	font-size: 15px;
}
#area4 .box3A h4 {
	position: relative;
	border-bottom: 1px solid #000;
	padding: 0 0 15px 1.5em;
	margin-bottom: 15px;
	font-size: 18px;
	line-height: 1.5em;
}
#area4 .box3A h4::before {
	content: "■";
	position: absolute;
	top: 0;
	left: 0;
}
#area4 .box3A dt {
	position: relative;
	padding: 0 0 0 20px;
	margin: 15px 0 5px;
	font-size: 17px;
	line-height: 1.5em;
}
#area4 .box3A dt::before {
	content: "●";
	position: absolute;
	top: 0;
	left: 0;
}
#area4 .box3A dd {
	padding-left: 20px;
}

#area4 .box4 {
	background: #eeeeef;
	padding: 90px 0;
}
#area4 .box4 ul {
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 0 64px;
}
#area4 .box4 ul li {
	text-align: center;
	line-height: 1.5em;
}
#area4 .box4 ul li img {
	padding-bottom: 10px;
}

@media only screen and (max-width:767px){
	#area4 {
		padding: 40px 10px 0;
		font-size: 15px;
	}

	#area4 .box1 {
		width: 100%;
		padding-bottom: 40px;
	}
	#area4 h3 {
		padding: 12px 0;
		margin-bottom: 15px;
		font-size: 18px;
		line-height: 1.5em;
	}

	#area4 .box2 {
		padding: 40px 0 20px;
		margin: 0 -10px;
	}
	#area4 .box2 .image {
		width: 100%;
		padding: 0 10px;
	}

	#area4 .box2A {
		display: block;
		width: calc(100% - 20px);
		padding-top: 40px;
		margin: 40px 10px 0;
	}
	#area4 .list {
		width: 100%;
		padding-bottom: 20px;
	}
	#area4 .list div {
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		gap: 0 15px;
	}
	#area4 .list p {
		width: 30%;
	}
	#area4 .list dt {
		font-size: 16px;
	}
	#area4 .list dd {
		font-size: 14px;
	}

	#area4 .box3 {
		width: auto;
		padding: 40px 10px;
		margin: 0 auto;
	}
	#area4 .box3 .text {
		text-align: left;
		font-size: 16px;
	}
	#area4 .box3A {
		display: block;
	}
	#area4 .box3A div {
		width: 100%;
		padding-top: 24px;
		font-size: 14px;
	}
	#area4 .box3A h4 {
		padding: 0 0 10px 20px;
		margin-bottom: 10px;
		font-size: 16px;
	}
	#area4 .box3A dt {
		padding: 0 0 0 20px;
		margin: 15px 0 5px;
		font-size: 15px;
	}
	#area4 .box3A dd {
		padding-left: 20px;
	}

	#area4 .box4 {
		padding: 40px 10px;
		margin: 0 -10px;
	}
	#area4 .box4 ul {
		-ms-flex-wrap: wrap;
  		flex-wrap: wrap;
		gap: 20px 4%;
	}
	#area4 .box4 ul li {
		width: 48%;
		font-size: 14px;
	}
	#area4 .box4 ul li img {
		padding-bottom: 5px;
	}
}


/******************** area5 ********************/

#area5 {
	background-color: #eeeeef;
	padding: 140px 0;
	font-size: 18px;
	text-align: center;
}

#area5 h3 {
	position: relative;
	padding-bottom: 90px;
	margin-bottom: 90px;
}
#area5 h3::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	background-color: #000;
	width: 284px;
	height: 5px;
}
#area5 h3 img {
	width: 810px;
}

#area5 h4 {
	padding-bottom: 20px;
	font-size: 30px;
	font-weight: bold;
}

@media only screen and (max-width:767px){
	#area5 {
		padding: 40px 10px;
		font-size: 15px;
		text-align: left;
	}

	#area5 h3 {
		padding-bottom: 40px;
		margin-bottom: 40px;
	}
	#area5 h3::after {
		width: 142px;
		height: 3px;
	}
	#area5 h3 img {
		width: 100%;
	}

	#area5 h4 {
		padding-bottom: 10px;
		font-size: 20px;
		text-align: center;
	}
}


/******************** area6 ********************/

#area6 {
	width: 1160px;
	padding: 140px 0 0;
	margin: 0 auto;
	font-size: 18px;
}

#area6 h3 {
	border-bottom: 1px solid #231815;
	padding-bottom: 40px;
	margin-bottom: 35px;
	font-size: 25px;
}

#area6 h4 {
	display: inline-block;
	background-color: #727171;
	padding: 0 15px;
	margin: 40px 0 20px;
	color: #fff;
	font-size: 23px;
	font-weight: bold;
}

#area6 .box {
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: justify;
	justify-content: space-between;
	padding-bottom: 30px;
}
#area6 .box div {
	width: 545px;
}
#area6 .box h5 {
	font-size: 23px;
	font-weight: bold;
}
#area6 .box p {
	text-align: right;
}
#area6 .box dl {
	padding-top: 45px;
}
#area6 .box dt {
	padding-bottom: 15px;
	line-height: 1.5em;
	font-size: 18px;
}
#area6 .box dt span {
	font-size: 19px;
	font-weight: bold;
}
#area6 .box dd {
	display: -webkit-box;
	display: flex;
	-webkit-box-align: start;
	align-items: flex-start;
	gap: 0 20px;
}
#area6 .box dd img {
	width: 216px;
}
#area6 .box dd span {
	padding-top: 55px;
}

#area6 .box2 {
	border: 1px solid #000;
	width: 545px;
	padding: 45px 40px 35px;
}
#area6 .box2 dd {
	display: -webkit-box;
	display: flex;
	-webkit-box-align: start;
	align-items: flex-start;
	padding-top: 20px;
	font-size: 17px;
}
#area6 .box2 dd img {
	width: 200px;
}

#area6 .box3 {
	width: 545px;
	padding-top: 45px;
}
#area6 .box3 dt {
	padding-bottom: 15px;
	line-height: 1.5em;
	font-size: 18px;
}
#area6 .box3 dt span {
	font-size: 19px;
	font-weight: bold;
}
#area6 .box3 dd {
	display: -webkit-box;
	display: flex;
	gap: 0 20px;
}
#area6 .box3 dd img {
	width: 216px;
}
#area6 .box3 dd span {
	padding-top: 55px;
}

@media only screen and (max-width:767px){
	#area6 {
		width: 100%;
		padding: 40px 10px;
		margin: 0 auto;
		font-size: 16px;
	}

	#area6 h3 {
		padding-bottom: 20px;
		margin-bottom: 20px;
		font-size: 20px;
	}

	#area6 h4 {
		padding: 0 10px;
		margin: 20px 0 0;
		font-size: 18px;
	}

	#area6 .box {
		display: block;
		padding-bottom: 20px;
	}
	#area6 .box div {
		width: 100%;
	}
	#area6 .box h5 {
		margin-top: 20px;
		font-size: 18px;
	}
	#area6 .box dl {
		padding-top: 20px;
	}
	#area6 .box dt {
		padding-bottom: 10px;
		font-size: 15px;
	}
	#area6 .box dt span {
		font-size: 16px;
		font-weight: bold;
	}
	#area6 .box dd img {
		width: 40%;
	}
	#area6 .box dd span {
		flex: 1;
		padding-top: 0;
	}

	#area6 .box2 {
		width: 100%;
		padding: 20px;
		margin-bottom: 20px;
	}
	#area6 .box2 dd {
		padding-top: 10px;
		font-size: 15px;
	}
	#area6 .box2 dd img {
		width: 40%;
	}
	#area6 .box2 dd span {
		flex: 1;
		padding-top: 0;
	}

	#area6 .box3 {
		width: 100%;
		padding-top: 20px;
	}
	#area6 .box3 dt {
		padding-bottom: 15px;
		font-size: 15px;
	}
	#area6 .box3 dt span {
		font-size: 16px;
	}
	#area6 .box3 dd {
		display: -webkit-box;
		display: flex;
		gap: 0 20px;
	}
	#area6 .box3 dd img {
		width: 40%;
	}
	#area6 .box3 dd span {
		flex: 1;
		padding-top: 0;
	}
}










/******************** banner ********************/

#banner {
	width: 647px;
	padding: 100px 0 150px;
	margin: 0 auto;
}

#banner li { margin-top: 40px;}

#banner li:first-child { margin-top: 0;}

#banner a:hover {
	opacity: 0.6;
}
@media only screen and (max-width:767px){
	#banner {
		width: 90%;
		padding: 40px 0;
	}

	#banner li { margin-top: 20px;}
}