@charset "utf-8";
/* CSS Document */

/*-----------------------------------------------
#A88D00
-----------------------------------------------*/

/*-----------------------------------------------
  __title
-----------------------------------------------*/
.__title {
padding: 40px 4%;
background: #EEE8CC;
}
.__title .text {
max-width: 1000px;
margin: auto;
font-size: 2rem;
font-weight: 700;
line-height: 1.4;
color: #A88D00;
}
.__title span {
padding: 2rem 0 2rem 6rem;
background-image: url("../img/common/logo_mark.png");
background-position: left center;
background-repeat: no-repeat;
background-size: 5rem;
}
@media screen and (max-width: 800px) {
	.__title {
	padding: 8% 4%;
	}
	.__title span {
	display: block;
	padding: 3em 0 0 0;
	text-align: center;
	background-image: url("../img/common/logo_mark.png");
	background-position: center top;
	background-size: 2.5em;
	}
}

/*-----------------------------------------------
  reason
-----------------------------------------------*/
.__reason .head1 {
font-size: 3rem;
font-weight: 700;
line-height: 1.4;
color: #A88D00;
text-align: center;
}
.__reason .head1 span::before {
content: "―";
margin-right: 0.25rem;
}
.__reason .head1 span::after {
content: "―";
margin-left: 0.25rem;
}
.__reason .number {
font-family: "Alumni Sans", sans-serif;
font-size: 4rem;
font-weight: 700;
line-height: 0.6;
color: #A88D00;
}
.__reason .number span {
margin-left: 1rem;
font-size: 5.5rem;
}
.__reason .grid {
display: flex;
justify-content: space-between;
}
.__reason .grid-1 {
width: 49%;
}
.__reason .grid-2 {
width: 49%;
}
.__reason .head2 {
font-size: 2rem;
font-weight: 700;
line-height: 1.4;
color: #A88D00;
}
.__reason .head2 small {
font-size: 1.5rem;
}
.__reason strong {
font-size: 1.125rem;
font-weight: 700;
}
.__reason .list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 460px;
}
.__reason .list li {
width: 49%;
margin-top: 0.5rem;
padding: 0.25em;
font-size: 1.5rem;
font-weight: 700;
text-align: center;
color: #FFF;
background: #A88D00;
border-radius: 5px;
}

/* point */
.__reason .pict {
width: 360px;
height: 360px;
}
.__reason .point1,
.__reason .point2,
.__reason .point3 {
position: relative;
min-height: 360px;
}
.__reason .point1 .pict,
.__reason .point3 .pict {
position: absolute;
top: 0;
left: 150px;
}
.__reason .point2 .pict {
position: absolute;
top: 0;
right: 0;
}
.__reason .point1::before,
.__reason .point3::before {
content: "";
position: absolute;
top: -100px;
left: calc(500px - 50vw);
width: 100vw;
height: calc(100% + 200px);
z-index: -1;
background: #F4F1E8;
clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
}
@media screen and (max-width: 800px) {
	.__reason .head1 {
	font-size: 2rem;
	}
	.__reason .head1 span::before,
	.__reason .head1 span::after {
	display: none;
	}
	.__reason .number {
	text-align: center;
	}
	.__reason .grid {
	display: block;
	}
	.__reason .grid-1 {
	width: 100%;
	}
	.__reason .grid-2 {
	width: 100%;
	}
	.__reason .head2 {
	margin-top: 0.5rem;
	text-align: center;
	}
	.__reason .head2 small {
	font-size: 1.4rem;
	}
	.__reason p {
	text-align: justify;
	}
	.__reason .list li {
	padding: 0.5rem;
	font-size: 1.125rem;
	}

	/* point */
	.__reason .pict {
	width: 96%;
	margin: auto;
	}
	.__reason .point1,
	.__reason .point2,
	.__reason .point3 {
	min-height: 0;
	}
	.__reason .point1 .pict,
	.__reason .point2 .pict,
	.__reason .point3 .pict {
	position: static;
	}
	.__reason .point1::before,
	.__reason .point3::before {
	display: none;
	}
}

/*-----------------------------------------------
  consul
-----------------------------------------------*/
.__consul .lead {
padding-top: 80px;
text-align: center;
}
.__consul .lead strong {
display: block;
margin: 0.5rem 0;
font-size: 2rem;
font-weight: 700;
text-align: center;
color: #A88D00;
}
.__consul .head {
padding: 0.25em;
font-size: 1.5em;
font-weight: 700;
text-align: center;
color: #FFF;
background: #A88D00;
}
.__consul .list {
display: flex;
flex-wrap: wrap;
width: 92%;
margin: auto;
}
.__consul .list li {
position: relative;
margin: 40px 0 0 40px;
padding-left: 1em;
}
.__consul .list li::before {
content: "";
position: absolute;
top: -0.15rem;
left: 0;
width: 4px;
height: 2rem;
background: #A88D00;
}
.__consul .contact dt {
font-size: 1.5em;
font-weight: 700;
text-align: center;
}
@media screen and (max-width: 800px) {
	.__consul .lead {
	padding-top: 0;
	text-align: center;
	}
	.__consul .list {
	display: block;
	width: 100%;
	}
	.__consul .list li {
	margin: 1.5rem 0 0 0;
	}
}