/* --------------------------------------------------- */
#wrap {
	margin: 0;
	padding: 0;
}
/* --------------------------------------------------- */
#mv {
	width: 100%;
	height: 100vh;
	position: relative;
	z-index: 0;
	background: url("../images/school/mv.jpg") no-repeat center;
	background-size: cover;
}
#mv .mv-logo {
	width: 100px;
	position: absolute;
	top: 30px;
	left: 40px;
}
#mv .mv-ttl {
	position: absolute;
	z-index: 0;
	opacity:.3;
}
#mv .patch {
	position: absolute;
	z-index: 1;
	max-width: 320px;
	width: 40%;
	top: 50%;
	right: 4%;
	transform:rotate(-10deg);
	transition: .3s;
}
#mv .patch:hover {
	filter: drop-shadow(3px 3px 5px rgba(0,0,0,.3));
}

#mv h1 {
	text-align: center;
	color: #fff;
	position: absolute;
	z-index: 2;
	top: 25%;
	width: 100%;
	left: 0;
	font-size: 1.7em;
	line-height: 2em;
}
#mv h1 span {
	display: inline-block;
	text-align: center;
	font-size: 2.0em;
}
#mv h1 strong {
	display: block;
	text-align: center;
	font-size: 1.3em;
}
#mv .btn-set {
	max-width: 1000px;
	width: 90%;
	display: flex;
	justify-content: space-between;
	position: absolute;
	left: 50%;
	bottom: 7%;
	transform: translate(-50%, 0%);
}
#mv .btn-set li {
	width: 48%;
	position: relative;
}
#mv .btn-set li .btn-copy {
	width: 100%;
  font-size: 15px;
  font-weight: 500;
  position: absolute;
  margin-bottom: .2em;
  text-align: center;
	top: -30px;
	left: 0;
	color: #fff;
	letter-spacing: 2px;
}
#mv .btn-set li .btn-copy:before {
  margin-right: 1rem;
  content: '＼';
}
#mv .btn-set li .btn-copy:after {
  margin-left: 1rem;
  content: '／';
}
#mv .btn-set li a {
	display: block;
	text-align: left;
	border: #fff 3px solid;
	color: #fff;
	padding: 25px 30px;
	border-radius: 10px;
	font-size: 1.1em;
	line-height: 170%;
	font-weight: 500;
	background-color: rgba(0,0,0,.1);
	letter-spacing: 2px;
}
#mv .btn-set li a span {
	display: block;
	font-size: 1.3em;
}
#mv .btn-set li a img {
	display: block;
	width: 24px;
	position: absolute;
	top: 50%;
	right: 17px;
	margin-top: -12px;
	transition: .3s;
}
#mv .btn-set li a:hover {
	background-color: rgba(0,138,206,.4);
}
#mv .btn-set li a:hover img {
	width: 30px;
	right: 15px;
	margin-top: -15px;
}
@media screen and (max-width: 1100px) {
}
@media screen and (max-width: 980px) {
	#mv {
        height: 600px;
    }
	#mv .patch {
        max-width: 220px;
        top: 42%;
        right: 1%;
    }
	
    #mv h1 {
        top: 25%;
        font-size: 1.4em;
        line-height: 2em;
    }
    #mv h1 span {
        font-size: 1.8em;
    }
    #mv h1 strong {
        font-size: 1.2em;
    }
	#mv .btn-set li a {
        padding: 20px 25px;
        font-size: 1em;
        line-height: 170%;
    }
}
@media screen and (max-width: 680px) {
	#mv h1 {
        top: 25%;
        font-size: 1.1em;
        line-height: 2em;
    }
    #mv h1 span {
        font-size: 1.6em;
    }
    #mv h1 strong {
        font-size: 1.2em;
    }
	#mv .btn-set {
        display: block;
        bottom: 3%;
    }
    #mv .btn-set li {
        width: 100%;
    }
	#mv .btn-set li:first-child {
		margin-bottom: 35px;
	}
	#mv .btn-set li a {
        padding: 10px 15px;
        font-size: .9em;
        line-height: 160%;
		background-color: rgba(0,0,0,.3);
    }
	#mv .btn-set li a span {
		font-size: 1.2em;
		display: inline-block;
		margin-right: 3px;
	}
	#mv .btn-set li .btn-copy {
		font-size: 13px;
		top: -23px;
	}
	#mv .patch {
		width: 45%;
        top: 52%;
        right: 1%;
    }
	
}
/* --------------------------------------------------- */
#area1 {
	width: 100%;
	margin-bottom: 100px;
	position: relative;
	z-index: 1;
}
#area1 .inner {
	max-width: 1400px;
	width: 90%;
	margin: 50px auto;
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: 1;
}
#area1 .inner > p {
	max-width: 750px;
	width: 60%;
}
#area1 .inner ul {
	max-width: 400px;
	width: 35%;
	position: relative;
	margin: -80px 0;
}
#area1 .inner li {
	text-align: center;
	background-color: #008ACE;
	color: #fff;
	width: 200px;
	padding-top: 200px;
	position: relative;
	border-radius: 50%;
}
#area1 .inner li:nth-child(1) {
}
#area1 .inner li:nth-child(2) {
	margin: -80px 0 -80px auto;
}
#area1 .inner li:nth-child(3) {
	margin: 0 auto 0 2%;
}
#area1 .inner li p {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	transform: translate(0%, -50%);
}
#area1 .inner li span {
	display: block;
	text-align: center;
	font-size: 1.2em;
	font-weight: 700;
}
.ph-set {
	width: 110%;
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: 0;
}
.ph-set-l {
	margin-left: -10%;
}
.ph-set-r {
	margin-right: -10%;
}
.ph-set div {
	width: 20%;
	border: #fff 2px solid;
}
@media screen and (max-width: 1100px) {
}
@media screen and (max-width: 980px) {
	#area1 .inner ul {
        margin: -60px 0 -40px;
    }
	#area1 .inner li {
        width: 160px;
        padding-top: 160px;
    }
	#area1 .inner li:nth-child(1) {
    }
    #area1 .inner li:nth-child(2) {
        margin: -60px -10px -60px auto;
    }
    #area1 .inner li:nth-child(3) {
        margin: 0 auto -40px 2%;
    }
}
@media screen and (max-width: 680px) {
	#area1 .inner {
        margin: 30px auto;
        display: block;
    }
    #area1 .inner > p {
        max-width: none;
        width: 100%;
		margin-bottom: 30px;
    }
    #area1 .inner ul {
        max-width: 400px;
        width: 100%;
        margin: 0 auto;
		display: flex;
		justify-content: space-between;
    }
    #area1 .inner li {
        width: 120px;
        padding-top: 120px;
    }
    #area1 .inner li:nth-child(1),
    #area1 .inner li:nth-child(2),
    #area1 .inner li:nth-child(3) {
        margin: 0;
    }
	#area1 .inner li p {
		line-height: 140%;
		font-size: 13px;
    }
    #area1 .inner li span {
        font-size: 1.2em;
    }
}
@media screen and (max-width: 480px) {
	#area1 .inner li {
        width: 100px;
        padding-top: 100px;
    }
}
/* --------------------------------------------------- */
#area2 {
	width: 100%;
	position: relative;
	margin-bottom: 100px;
	padding-bottom: 50px;
}
#area2 .back {
	display: block;
	width: 100%;
	position: absolute;
	height: 60%;
	left: 0;
	bottom: 0;
	background: url("../images/school/back01.png") center;
	background-size: 80px auto;
}
#area2 .inner {
	max-width: 1400px;
	width: 90%;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	padding-left: 30%;
}
#area2 .inner .ttl_style16 {
	position: absolute;
	top: 0;
	left: 0;
}
#area2 .youtube{
    position:relative;
    padding-top:56.25%;
	width: 100%;
}
#area2 .youtube iframe{
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
}
@media screen and (max-width: 1100px) {
}
@media screen and (max-width: 980px) {
	#area2 .inner {
		padding-left: 0;
	}
	#area2 .inner .ttl_style16 {
		position: static;
		margin-bottom: 35px;
	}
}
@media screen and (max-width: 680px) {
}
/* --------------------------------------------------- */
#area3 {
	width: 100%;
	margin-bottom: 100px;
}
#area3 .ttl_style16 {
	max-width: 1400px;
	width: 90%;
	margin: 0 auto;
}
#area3 .inner {
	max-width: 1500px;
	width: 95%;
	margin: 0 auto;
}
#area3 .block {
	max-width: 1300px;
	width: 95%;
	position: relative;
}
#area3 .block:nth-child(odd) {
	margin: 0 0 40px auto;
}
#area3 .block:nth-child(even) {
	margin: 0 auto 40px 0;
}
#area3 .block .ph {
	width: 60%;
}
#area3 .block:nth-child(odd) .ph {
	margin: 0 0 0 auto;
}
#area3 .block:nth-child(even) .ph {
	margin: 0 auto 0 0;
}
#area3 .block dl {
	background: none;
	color: #fff;
	max-width: 600px;
	width: 50%;
	padding: 30px 45px 45px 30px;
	position: absolute;
	top: 50%;
	transform: translate(0%, -50%);
	border: 2px solid #008ACE;
}
#area3 .block dl::after{
	background-color: #008ACE;
	border:none;
	content: '';
	position: absolute;
	top: -7px;
	left: -7px;
	width: 100%;
	height: 100%;
	z-index: -1;
}
#area3 .block:nth-child(odd) dl {
	left: 0;
}
#area3 .block:nth-child(even) dl {
	right: 0;
}
#area3 .block dt {
	font-size: 1.3em;
	font-weight: 700;
	margin-bottom: 25px;
	line-height: 160%;
}
#area3 .block dd {
}
@media screen and (max-width: 1100px) {
}
@media screen and (max-width: 980px) {
	#area3 .block dl {
		width: 60%;
	}
	#area3 .block dt {
        font-size: 1.1em;
    }
}
@media screen and (max-width: 680px) {
	#area3 {
        margin-bottom: 60px;
    }
	#area3 .ttl_style16 {
        margin: 0 auto 35px;
    }
    #area3 .inner {
    }
    #area3 .block {
        width: 90%;
    }
    #area3 .block:nth-child(odd),
    #area3 .block:nth-child(even) {
        margin: 0 auto 40px;
    }
    #area3 .block .ph {
        width: 100%;
    }
    #area3 .block:nth-child(odd) .ph,
    #area3 .block:nth-child(even) .ph {
        margin: 0 auto;
    }
    #area3 .block dl {
        background: none;
        max-width: none;
        width: 100%;
        padding: 20px 25px;
        position: static;
        border: 2px solid #008ACE;
		transform: translate(0%, 0%);
    }
	#area3 .block dl::after{
        top: -4px;
        left: -4px;
    }
}
/* --------------------------------------------------- */
#area4 {
	background: url("../images/school/back02.jpg") center;
	background-size: 400px;
	background-color: #008ACE;
	padding: 100px 0;
	position: relative;
}
#area4::before {
	content: "";
	clip-path: polygon(5% 0, 0% 100%, 100% 100%);
	max-width: 400px;
	width: 100%;
	height: 50px;
	position: absolute;
	z-index: 0;
	background-color: #E88624;
	top: -50px;
	left: 5%;
}
#area4 .inner {
	max-width: 1400px;
	width: 90%;
	margin: 0 auto;
}
#area4 .ttl_style16,
#area4 .ttl_style16 span {
	color: #fff;
}
#area4 .ttl_style16 {
	margin-bottom: 50px;
}
#area4 .inner ul {
	max-width: 1100px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
#area4 .inner li {
	width: 32%;
}
#area4 .inner li a {
	display: block;
	background-color: #fff;
	padding: 20px 15%;
	box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.3);
}
#area4 .inner li a:hover {
	background-color: #f6f6f6;
	box-shadow: 1px 1px 0px 0px rgba(0,0,0,0.6);
}
#area4 .btn1 {
	max-width: 400px;
	width: 90%;
	margin: 0 auto;
}
#area4 .btn1 a {
	display: block;
	background-color: #fff;
	padding: 20px 15%;
	box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.3);
}
#area4 .btn1 a:hover {
	background-color: #f6f6f6;
	box-shadow: 1px 1px 0px 0px rgba(0,0,0,0.6);
}
@media screen and (max-width: 1100px) {
}
@media screen and (max-width: 980px) {
	#area4 .inner ul {
		max-width: none;
	}
}
@media screen and (max-width: 680px) {
	#area4 {
        padding: 60px 0 30px;
    }
	#area4 .inner ul {
        display: block;
    }
    #area4 .inner li {
        width: 100%;
		margin-bottom: 15px;
    }
}
/* --------------------------------------------------- */
#area5 {
	background-color: #F5F5F5;
	margin-bottom: 100px;
	padding: 100px 0;
}
#area5 .inner {
	max-width: 1400px;
	width: 90%;
	margin: 0 auto;
}
#area5 .ttl_style17::after {
	border-color: #F5F5F5 transparent transparent;
}
#area5 .tab{
	display: flex;
	justify-content: space-between;
}
#area5 .tab li {
	width: 49.5%;
	box-shadow: 3px 3px 5px -5px #777777;
}
#area5 .tab li a{
	display: block;
	margin:0;
	padding:20px 10px;
	color: #fff;
	text-align: center;
	font-weight: 400;
	font-size: 1em;
	letter-spacing: 2px;
}
#area5 .tab li:nth-child(1) a{
	background-color: #62B8E5;
}
#area5 .tab li:nth-child(2) a{
	background-color: #06AF4B;
}
#area5 .tab li:nth-child(1).active a{
	background:#fff;
	color: #62B8E5;
}
#area5 .tab li:nth-child(2).active a{
	background:#fff;
	color: #06AF4B;
}
#area5 .tab li a br {
	display: none;
}
#area5 .area {
	display: none;
	opacity: 0;
	background: #fff;
	padding:40px;
	margin-bottom: 30px;
	box-shadow: 3px 3px 5px -5px #777777;
}
#area5 .area.is-active {
    display: block;
    animation-name: displayAnime;
    animation-duration: 0s;
    animation-fill-mode: forwards;
}
@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
#area5 .area h4 {
	font-weight: 500;
	font-size: 1.3em;
	letter-spacing: 2px;
	margin-bottom: 10px;
}
#area5 .area.blue h4 {
	color: #62B8E5;
}
#area5 .area.green h4 {
	color: #06AF4B;
}
#area5 .area .outer {
  width: 100%;
	margin-bottom: 15px;
}
#area5 .area table {
  border-collapse: collapse;
  width: 100%;
}
#area5 .area.blue table {
	border-bottom: #62B8E5 2px solid;
}
#area5 .area.green table {
	border-bottom: #06AF4B 2px solid;
}
#area5 .area table td,
#area5 .area table th {
	text-align: center;
	line-height: 170%;
	vertical-align: middle;
}
#area5 .area table th {
	font-weight: 500;
	color: #fff;
	padding: 6px;
}
#area5 .area.blue table th {
	background-color: #62B8E5;
}
#area5 .area.green table th {
	background-color: #06AF4B;
}
#area5 .area table tbody tr:nth-child(even) {
	background-color: #f5f5f5;
}
#area5 .area table td {
	padding: 15px;
}
#area5 .area table td .yen {
	font-weight: 600;
	font-size: 1.4em;
}
#area5 .area.blue td .yen {
	color: #62B8E5;
}
#area5 .area.green td .yen {
	color: #06AF4B;
}
#area5 .area table td.ttl {
	font-weight: 600;
	text-align: left;
	padding: 15px 10px 15px 20px;
}
#area5 .area table td.ttl span.mini {
	font-size: .9em;
	font-weight: 400;
}
#area5 .area table td .cap {
	display: inline-block;
	font-size: 12px;
	margin-left: 5px;
}
#area5 .area .cap {
}
#area5 .area .cap li {
	line-height: 150%;
	font-size: 13px;
	margin-bottom: 3px;
	padding-left:1em;
	text-indent:-1em;
}
#area5 .btn-set {
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
#area5 .btn-set li {
	width: 32%;
}
#area5 .btn-set li a {
	display: block;
	height: 100%;
	text-align: center;
	color: #fff;
	padding: 20px 0px 20px 40px;
	position: relative;
	font-weight: 600;
	border-radius: 8px;
	font-size: 1.1em;
}
#area5 .btn-set li a.line {
	background: url("../images/school/icon01.png") no-repeat left 15px center;
	background-size: 35px;
	background-color: #06C755;
}
#area5 .btn-set li a.mail {
	background: url("../images/school/icon02.png") no-repeat left 15px center;
	background-size: 35px;
	background-color: #DBB827;
}
#area5 .btn-set li a.phone {
	background: url("../images/school/icon04.png") no-repeat left 5px center;
	background-size: 35px;
	color: #333;
	pointer-events: none;
	text-align: left;
	padding: 10px 0px 0px 50px;
	line-height: 160%;
	font-size: 1em;
}
#area5 .btn-set li a img {
	display: block;
	width: 30px;
	position: absolute;
	top: 50%;
	left: 15px;
	margin-top: -16px;
}
#area5 .btn-set li a span {
	display: block;
	font-size: 1.3em;
	font-family: iroha-31nire-stdn, sans-serif;
	font-weight: 400;
	line-height: 100%;
}
#area5 .btn-set li a.line:hover {
	background-color: #06AF4B;
}
#area5 .btn-set li a.mail:hover {
	background-color: #C1A223;
}

#area5 .price-set {
	opacity: 1;
	background: #fff;
	padding:40px;
	margin-bottom: 30px;
	box-shadow: 3px 3px 5px -5px #777777;
}
#area5 .price-set .area {
	display: block;
	opacity: 1;
	background-color: transparent;
	padding:0;
	margin-bottom: 0;
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
}
#area5 .price-set .area.is-active {
    display: block;
    animation-name: offAnime;
    animation-duration: 0s;
    animation-fill-mode: forwards;
}
@keyframes offAnime{
	from {
		opacity: 1;
	}
	to {
		opacity: 1;
	}
}
#area5 .price-set .area.blue {
	margin-bottom: 40px;
}
#area5 .price-set .area h4 {
	text-align: center;
}
#area5 .price-set .area .outer {
	margin-bottom: 5px;
}
@media screen and (max-width: 1100px) {
}
@media screen and (max-width: 980px) {
	#area5 .area table td.ttl span.mini {
		font-size: .8em;
		display: block;
		margin-left: -10px;
	}
}
@media screen and (max-width: 680px) {
	#area5 {
        padding: 60px 0 30px;
		margin-bottom: 60px;
    }
	#area5 .tab li a {
		padding:15px 10px;
		line-height: 150%;
		font-size: 13px;
	}
	#area5 .tab li a br {
		display: block;
	}
	#area5 .area {
		padding: 20px;
	}
	#area5 .area h4 {
        font-size: 1.2em;
        margin-bottom: 7px;
    }
	#area5 .area .outer {
		overflow-x:scroll;
    }
    #area5 .area table {
        width: 400px;
    }
	#area5 .area table td,
    #area5 .area table th {
        line-height: 150%;
    }
	#area5 .area table td.ttl {
        padding: 15px;
    }
	#area5 .area table td .yen {
        font-size: 1.2em;
    }
	#area5 .area .cap li {
        line-height: 140%;
        font-size: 12px;
    }
	#area5 .btn-set {
        display: block;
    }
    #area5 .btn-set li {
        width: 100%;
		margin-bottom: 10px;
    }
	#area5 .btn-set li a.line,
	#area5 .btn-set li a.mail {
		padding: 20px 0px;
	}
	#area5 .btn-set li a.phone {
		pointer-events: auto;
		background-color: #62B8E5;
		padding: 20px 0px;
		text-align: center;
	}
	#area5 .btn-set li a span {
		text-align: center;
	}
	#area5 .btn-set li a.phone:hover {
		background-color: #57A2CA;
	}
	
	#area5 .price-set {
        padding:15px;
        margin-bottom: 30px;
    }
	#area5 .price-set .area h4 {
        font-size: 1.1em;
        margin-bottom: 7px;
    }
	#area5 .price-set .area table {
		width: 100%;
	}
	#area5 .area table td,
	#area5 .area table th {
		font-size: 13px;
	}
	#area5 .price-set .area table th {
        padding: 5px;
		font-size: 11px;
    }
    #area5 .price-set .area table td {
        padding: 10px 3px;
    }
	#area5 .price-set .area table td.ttl {
        padding: 10px 0 10px 10px;
		font-weight: 500;
    }
	#area5 .price-set .area table td.ttl span.mini {
        font-size: 8px;
		line-height: 130%;
    }
	#area5 .price-set .area table td .yen {
        font-size: 1.1em;
    }
}
/* --------------------------------------------------- */
#area6 {
	max-width: 1400px;
	width: 90%;
	margin: 0 auto 100px;
}
#area6 .ttl_style16 {
	margin-bottom: 40px;
}
#area6 .inner {
	display: flex;
	justify-content: space-between;
}
#area6 .box {
	border-radius: 10px;
	width: 32%;
	box-shadow: 0px 0px 12px -6px rgba(0,0,0,0.6);
	overflow: hidden;
	position: relative;
	padding-bottom: 250px;
}
#area6 .box .ttl {
	background-color: #008ACE;
	color: #fff;
	text-align: center;
	padding: 10px 0;
	line-height: 150%;
	font-weight: 500;
	letter-spacing: 2px;
	font-size: 1.1em;
}
#area6 .box dl {
	padding: 20px 25px;
}
#area6 .box dt {
	font-weight: 500;
	margin-bottom: 5px;
}
#area6 .box dd {
	font-size: 13px;
	line-height: 150%;
}
#area6 .box .ggmap {
    position: absolute;
	width: 100%;
    padding-bottom: 250px;
    height: 0;
    overflow: hidden;
	left: 0;
	bottom: 0;
}
.ggmap iframe,
.ggmap object,
.ggmap embed {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
	height: 100%;
}
.ggmap.other iframe {
}
@media screen and (max-width: 1100px) {
}
@media screen and (max-width: 980px) {
	#area6 .inner {
        display: flex;
        flex-wrap: wrap;
    }
    #area6 .box {
        width: 48%;
		margin-right: 4%;
		margin-bottom: 4%;
    }
	#area6 .box:nth-child(even) {
		margin-right: 0;
    }
}
@media screen and (max-width: 680px) {
	#area6 {
        margin: 0 auto 30px;
    }
	#area6 .box {
        width: 100%;
		margin-right: 0;
		margin-bottom: 20px;
    }
}
/* --------------------------------------------------- */
#area7 {
	width: 100%;
	background-color: #EDA257;
	margin-bottom: 50px;
}
#area7 .mv {
	width: 100%;
	position: relative;
}
#area7 .mv .ph {
	display: block;
	width: 95%;
	height: 650px;
	margin: 0 0 30px auto;
	background: url("../images/school/ph16.jpg") no-repeat center;
	background-size: cover;
}
#area7 .mv .ttl {
	width: 85%;
	position: absolute;
	top: 0;
	left: 0;
}
#area7 .ttl2 {
	text-align: center;
	color: #fff;
	font-size: 1.3em;
	font-weight: 500;
	margin-bottom: 30px;
}
#area7 .mv .ttl2 span {
	font-size: 1.5em;
	display: inline-block;
	margin: 0 6px 0 8px;
	font-family: iroha-31nire-stdn, sans-serif;
	font-weight: 400;
	border-bottom: double 4px #fff;
	line-height: 120%;
	text-shadow: 2px 2px 3px rgba(185, 108, 32, .6);
}
#area7 .ttl2 br {
	display: none;
}
#area7 .mv .obi-list {
	position: absolute;
	top: 50%;
	left: 0;
	max-width: 500px;
	width: 70%;
}
#area7 .mv .obi-list li {
	margin-bottom: 15px;
}
#area7 .mv .obi-list li span {
	display: inline-block;
	background-color: #E88624;
	color: #fff;
	font-size: 1.8em;
	font-weight: 700;
	padding: 5px 10%;
	letter-spacing: 3px;
	position: relative;
}
#area7 .mv .obi-list li span::before {
    position: absolute;
    content: '';
    top: 100%;
    right: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-left: solid 20px rgb(185, 108, 32);
}
#area7 .mv .patch-set {
	position: absolute;
	z-index: 1;
	width: 300px;
	bottom: 7%;
	right: 5%;
	transition: .3s;
}
#area7 .mv .patch-set li {
	margin-bottom: 10px;
}
#area7 .inner {
	max-width: 1300px;
	width: 90%;
	margin: 0 auto 5%;
	background-color: #FFFAD8;
	padding: 25px;
}
#area7 p {
	margin-bottom: 15px;
}
#area7 .outer {
  width: 100%;
	margin-bottom: 15px;
	border: rgba(0,0,0,.1) 1px solid;
}
#area7 table {
  border-collapse: collapse;
  width: 100%;
	background-color: #fff;
}
#area7 table tr.basic {
	background-color: rgba(0,0,0,.04);
}
#area7 table td,
#area7 table th {
	text-align: center;
	line-height: 170%;
	vertical-align: middle;
}
#area7 table th {
	font-weight: 400;
	color: #fff;
	padding: 15px 6px;
	font-size: 12px;
}
#area7 table th {
	background-color: #E88624;
	border-right: #fff 1px solid;
}
#area7 table th:last-child {
	border-right: none;
}
#area7 table th strong {
	display: block;
	text-align: center;
	font-weight: 500;
	font-size: 1.3em;
	letter-spacing: 2px;
}
#area7 table td {
	padding: 15px;
	border-right: rgba(0,0,0,.2) 1px dotted;
	border-bottom: rgba(0,0,0,.1) 1px solid;
	font-weight: 500;
}
#area7 table td:last-child {
	border-right: none;
}
#area7 table td .yen {
	font-weight: 600;
	font-size: 1.4em;
	display: inline-block;
	padding-top: 5px;
}
#area7 table td.number {
	font-size: 12px;
	font-weight: 500;
	padding: 0 5px;
	position: relative;
	line-height: 140%;
}
#area7 table td.number::after {
	content: "";
	width: 0;
    height: 0;
    border-style: solid;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid #ccc;
    border-right: 0;
	position: absolute;
	right: -7px;
	top: 50%;
	transform: translate(0%, -50%);
}
#area7 table td.ttl {
	font-weight: 500;
	text-align: left;
	padding: 15px 10px 15px 20px;
	background-color: #EDA257;
	color: #fff;
	border-bottom: none;
	border-top: #fff 1px solid;
}
#area7 table td span.mini {
	font-size: 12px;
	font-weight: 400;
}
#area7 table td.ttl span.mini {
	display: block;
}
#area7 table td .cap {
	display: inline-block;
	font-size: 12px;
	margin-left: 5px;
}
#area7 .cap {
}
#area7 .cap li {
	line-height: 150%;
	font-size: 13px;
	margin-bottom: 3px;
	padding-left:1em;
	text-indent:-1em;
}
#area7 .btn-set {
	display: flex;
	justify-content: space-between;
	margin: 15px 0 50px;
}
#area7 .btn-set li {
	width: 49%;
}
#area7 .btn-set li a {
	display: block;
	text-align: left;
	padding: 20px 25px;
	border-radius: 10px;
	font-size: 1em;
	line-height: 170%;
	font-weight: 500;
	letter-spacing: 2px;
}
#area7 .btn-set li a.btn1 {
	border: #B96C20 3px solid;
	color: #B96C20;
	background: url("../images/school/arrow03.png") no-repeat right 15px center;
	background-size: 30px;
}
#area7 .btn-set li a.btn2 {
	border: #B2961F 3px solid;
	color: #B2961F;
	background: url("../images/school/arrow05.png") no-repeat right 15px center;
	background-size: 30px;
}
#area7 .btn-set li a span {
	display: block;
	font-size: 1.3em;
}
#area7 .btn-set li a.btn1:hover {
	border: #E88624 3px solid;
	color: #E88624;
	background-image: url("../images/school/arrow04.png");
}
#area7 .btn-set li a.btn2:hover {
	border: #DBB827 3px solid;
	color: #DBB827;
	background-image: url("../images/school/arrow06.png");
}
#area7 .block {
	display: flex;
	justify-content:  space-between;
}
#area7 .block .box {
	width: 49%;
}
#area7 .block .box a {
	display: block;
	height: 100%;
	text-align: center;
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	position: relative;
	line-height: 160%;
	font-size: 13px;
	box-shadow: 0px 0px 6px -2px rgba(0,0,0,.2);
}
#area7 .block .box .ken {
	position: absolute;
	background-color: #EDA257;
	color: #fff;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	top: 0;
	left: 0;
	font-size: 1.2em;
}
#area7 .block .box strong {
	display: block;
	font-weight: 700;
	margin-bottom: 25px;
	padding-left: 70px;
	font-size: 1.2em;
}
#area7 .block .box a .img {
	display: block;
	max-width: 240px;
	width: 70%;
	margin: 0 auto 10px;
	box-shadow: 0px 0px 9px -2px rgba(0,0,0,0);
	transition: .3s;
}
#area7 .block .box a:hover .img {
	box-shadow: 0px 0px 9px -2px rgba(0,0,0,.2);
}
#area7 .block2 {
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
}
#area7 .block2 .left {
	width: 52%;
	padding: 40px;
}
#area7 .block2 .right {
	width: 48%;
}
#area7 .block2 .ttl {
	font-size: 1.2em;
	font-weight: 500;
	line-height: 170%;
	margin-bottom: 10px;
}
#area7 .block2 .ttl br {
	display: none;
}
#area7 .block2 .ttl span {
	display: block;
	font-size: 9px;
	letter-spacing: 2px;
	font-weight: 500;
	line-height: 150%;
}
#area7 .block2 p {
	font-size: .9em;
}
#area7 .block2 .left a.btn {
	display: block;
	max-width: 200px;
	width: 100%;
	line-height: 120%;
	border: #444 1px solid;
	padding: 10px 10px 8px;
	border-radius: 40px;
	text-align: center;
	font-size: 12px;
	font-weight: 400;
}
#area7 .block2 .left a.btn:hover {
	border: #E88624 1px solid;
	background-color: #E88624;
	color: #fff;
}
#area7 .block2 .ggmap {
	position: relative;
    padding-bottom: 65%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
#area7 .block2 .ggmap iframe {
    position: absolute;
    left: 0;
    width: 100%;
    top: -150px;
	height: calc(100% + 150px + 150px);
}
#area7 .btn-set2 {
	display: flex;
	justify-content: space-between;
}
#area7 .btn-set2 li {
	width: 33.33%;
}
#area7 .btn-set2 li a {
	display: block;
	color: #fff;
	text-align: center;
	font-size: 1.2em;
	font-weight: 600;
	padding: 20% 0;
	height: 100%;
}
#area7 .btn-set2 li a img {
	display: inline-block;
	width: 35px;
	margin-right: 10px;
}
#area7 .btn-set2 li a.btn1 {
	background-color: #06C755;
}
#area7 .btn-set2 li a.btn2 {
	background-color: #008ACE;
}
#area7 .btn-set2 li a.btn3 {
	background-color: #0D5A80;
	padding: 16% 0;
	pointer-events: none;
}
#area7 .btn-set2 li a.btn3 span {
	display: block;
	text-align: center;
	font-size: 1.2em;
	font-family: iroha-31nire-stdn, sans-serif;
	font-weight: 400;
}
#area7 .btn-set2 li a.btn1:hover {
	background-color: #06AF4B;
}
#area7 .btn-set2 li a.btn2:hover {
	background-color: #227AA5;
}
@media screen and (max-width: 1100px) {
}
@media screen and (max-width: 980px) {
	#area7 .mv .ph {
        height: 450px;
    }
	#area7 .mv .ttl {
		top: -8%;
    }
	#area7 .mv .patch-set {
        width: 220px;
		bottom: 10%;
    }
	#area7 .mv .patch-set li {
		margin-bottom: 5px;
	}
	#area7 table td span.mini {
		display: block;
		text-align: center;
	}
	#area7 .block2 {
        display: block;
    }
    #area7 .block2 .left {
        width: 100%;
        padding: 40px;
    }
    #area7 .block2 .right {
        width: 100%;
    }
}
@media screen and (max-width: 680px) {
	#area7 {
		padding-bottom: 5px;
	}
	#area7 .mv .ph {
        width: 92%;
        height: 280px;
        margin: 0 0 30px auto;
    }
	#area7 .mv .obi-list {
        top: 30%;
        left: 0;
        width: 90%;
    }
    #area7 .mv .obi-list li {
        margin-bottom: 10px;
    }
    #area7 .mv .obi-list li span {
        font-size: 1.2em;
        padding: 5px 10%;
        letter-spacing: 3px;
        position: relative;
    }
    #area7 .mv .ttl {
        width: 100%;
    }
    #area7 .ttl2 {
        font-size: 1.2em;
        margin-bottom: 30px;
    }
    #area7 .mv .ttl2 span {
        font-size: 1.2em;
    }
	#area7 .ttl2 br {
		display: block;
	}
	#area7 .mv .patch-set {
        width: 170px;
		bottom: 20%;
    }
	#area7 .inner {
        width: 98%;
        padding: 15px;
    }
	#area7 .outer {
      width: 100%;
        margin-bottom: 15px;
        border: none;
		overflow-x:scroll;
    }
    #area7 table {
		width: 680px;
		border: rgba(0,0,0,.1) 1px solid;
    }
	#area7 table th {
        padding: 10px 4px 8px;
        font-size: 11px;
    }
	#area7 table td.ttl span.mini {
		display: block;
	}
	#area7 table td {
		padding: 10px;
	}
	#area7 table td.ttl {
        padding: 10px 5px 10px 15px;
    }
	#area7 .btn-set {
        display: block;
        margin: 15px 0 50px;
    }
    #area7 .btn-set li {
        width: 100%;
		margin-bottom: 10px;
    }
	#area7 .block {
        display: block;
    }
    #area7 .block .box {
        width: 100%;
		margin-bottom: 10px;
    }
	#area7 .btn-set2 {
        display: block;
		width: 90%;
		margin: -20px auto 5%;
    }
    #area7 .btn-set2 li {
        width: 100%;
    }
	#area7 .btn-set2 li a {
        font-size: 1.1em;
        padding: 20px 0;
    }
    #area7 .btn-set2 li a.btn3 {
        padding: 20px 0;
        pointer-events: auto;
    }
	#area7 .btn-set2 li a img {
        width: 30px;
    }
	#area7 .block2 .ggmap {
        padding-bottom: 100%;
    }
	#area7 .block2 .left {
        padding: 20px;
    }
	#area7 .block2 .ttl br {
		display: block;
	}
}
/* --------------------------------------------------- */
#area8 {
	width: 100%;
	background: url("../images/school/back03.png") center;
	background-size: 500px;
	background-color: #008ACE;
	color: #fff;
	padding: 100px 0 5px;
}
#area8 .group1 {
	max-width: 1400px;
	width: 90%;
	margin: 0 auto 100px;
	position: relative;
	display: flex;
	gap: 40px;
}
#area8 .group1 .left {
	flex: 1;
}
#area8 .group1 .left .ttl {
	font-size: 1.3em;
	font-weight: 600;
	line-height: 1.6;
	margin-bottom: 40px;
}
#area8 .group1 .left .ttl strong {
	display: block;
	font-size: 1.8em;
	font-weight: 600;
}
#area8 .group1 .left .ttl strong > span {
	font-size: .7em;
	display: inline-block;
	margin: 0 -8px;
}
#area8 .group1 .left .ttl br {
	display: none;
}
#area8 .group1 .left p {
	font-size: 1.1em;
}
#area8 .group1 .left p .cap {
	display: block;
	padding-left:1em;
	text-indent:-1em;
	margin-top: 15px;
	font-size: 12px;
}
#area8 .group1 .img {
	width: 700px;
	position: relative;
	margin-right: -20%;
}
#area8 .group2 {
	max-width: 1200px;
	width: 95%;
	margin: 0 auto 100px;
	background-color: rgba(255,255,255,.14);
	padding: 30px 50px 50px;
	border-radius: 10px;
}
#area8 .group2 dl {
	display: table;
	width: 100%;
	border-bottom: rgba(255,255,255,.4) 1px solid;
}
#area8 .group2 dt,
#area8 .group2 dd {
	display: table-cell;
	vertical-align: top;
	padding: 25px;
	position: relative;
}
#area8 .group2 dt {
	width: 220px;
}
#area8 .group2 dt::after {
	content: "";
	width: 1px;
	height: 25px;
	background-color: rgba(255,255,255,.4);
	position: absolute;
	right: 0;
	bottom: -7px;
}
#area8 .group2 dd {
	font-size: 1.1em;
}
#area8 .group2 dd .cap {
	display: block;
	font-size: 13px;
	padding-left:1em;
	text-indent:-1em;
}
#area8 .group3 {
	max-width: 1200px;
	width: 95%;
	margin: 0 auto 100px;
}
#area8 .group3 .box {
	background-color: #fff;
	position: relative;
	padding: 50px 50px 50px 140px;
	margin-bottom: 40px;
	color: #333;
}
#area8 .group3 .box::after {
	content: "";
	width: 36px;
	height: 36px;
	background: url("../images/school/arrow07.png") no-repeat center;
	background-size: cover;
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translate(-50%, 0%);
}
#area8 .group3 .box:last-child::after {
	display: none;
}
#area8 .group3 .box .number {
	width: 90px;
	position: absolute;
	left: 20px;
	top: 20px;
}
#area8 .group3 .box p {
	margin-bottom: 20px;
	width: 50%;
}
#area8 .group3 .box .cap-list {
	font-size: 12px;
	width: 50%;
}
#area8 .group3 .box .cap-list li {
	padding-left:1em;
	text-indent:-1em;
}
#area8 .group3 .box .btn {
	display: block;
	max-width: 300px;
	width: 45%;
	background-color: #008ACE;
	border: #008ACE 2px solid;
	color: #fff;
	text-align: center;
	padding: 25px 20px;
	border-radius: 10px;
	font-weight: 500;
	letter-spacing: 2px;
	position: absolute;
	top: 40px;
	right: 40px;
}
#area8 .group3 .box .btn:hover {
	background-color: #fff;
	color: #008ACE;
}
#area8 .group4 {
	max-width: 1200px;
	width: 95%;
	margin: 0 auto 100px;
	background-color: #fff;
	padding: 60px;
	text-align: center;
	position: relative;
}
#area8 .group4::before {
	content: "";
	border: #008ACE 1px dashed;
	width: auto;
	height: auto;
	position: absolute;
	top: 7px;
	left: 7px;
	right: 7px;
	bottom: 7px;
}
#area8 .group4 p {
	text-align: center;
	font-size: 1.1em;
	color: #333;
	font-weight: 400;
	margin-bottom: 0;
}
#area8 .group4 p strong {
	font-size: 1.5em;
	font-weight: 600;
}
#area8 .group4 p strong span {
	color: #008ACE;
}
@media screen and (max-width: 1200px) {
	#area8 .group1 {
        display: block;
        gap: 0;
		position: relative;
    }
    #area8 .group1 .left {
		width: 100%;
		position: relative;
		z-index: 1;
    }
	#area8 .group1 .img {
		width: 500px;
		position: absolute;
		z-index: 0;
		top: -150px;
		right: 0;
    }
    #area8 .group2 dt {
        width: 150px;
		padding: 25px 0;
    }
	#area8 .group3 .box {
		padding: 40px 40px 40px 80px;
	}
	#area8 .group3 .box .number {
        width: 70px;
        left: -10px;
        top: -10px;
    }
	#area8 .group3 .box p {
        width: 100%;
    }
    #area8 .group3 .box .cap-list {
        width: 100%;
		margin-bottom: 30px;
    }
    #area8 .group3 .box .btn {
        width: 90%;
		margin: 0 auto;
        position: static;
    }
}
@media screen and (max-width: 980px) {
	#area8 .group1,
	#area8 .group2,
	#area8 .group3,
	#area8 .group4 {
		margin-bottom: 80px;
	}
	#area8 .group1 .left .ttl {
        font-size: 1.1em;
    }
    #area8 .group1 .left .ttl strong {
        font-size: 1.6em;
    }
    #area8 .group1 .left .ttl strong > span {
        font-size: .6em;
    }
	#area8 .group1 .img {
		width: 400px;
		top: -150px;
    }
	#area8 .group1 .left p {
        font-size: 1.0em;
    }
	#area8 .group2 {
        padding: 15px 40px 40px;
    }
	#area8 .group4 p {
        font-size: 1.0em;
    }
}
@media screen and (max-width: 680px) {
	#area8 {
        padding: 40px 0 2px;
    }
	#area8 .group1,
	#area8 .group2,
	#area8 .group3,
	#area8 .group4 {
		margin-bottom: 50px;
	}
	#area8 .group1 .left .ttl {
        font-size: 1.0em;
		font-weight: 500;
		margin-bottom: 30px;
    }
	#area8 .group1 .left .ttl strong {
        font-size: 1.5em;
    }
	#area8 .group1 .left .ttl strong > span {
        margin: 0 -7px;
    }
	#area8 .group1 .left .ttl br {
		display: block;
	}
	#area8 .group1 .img {
		width: 200px;
		top: -70px;
    }
	#area8 .group2 {
        padding: 10px 10px 10px;
		border-radius: 0;
    }
	#area8 .group2 dl {
        display: block;
    }
	#area8 .group2 dl:last-child {
        border-bottom: none;
    }
    #area8 .group2 dt,
    #area8 .group2 dd {
        display: block;
        padding: 15px 15px;
    }
    #area8 .group2 dt {
        width: 170px;
		padding: 5px 15px;
		border-right: rgba(255,255,255,.4) 1px solid;
		border-bottom: rgba(255,255,255,.4) 1px dashed;
    }
    #area8 .group2 dt::after {
		display: none;
    }
    #area8 .group2 dd {
        font-size: 1.0em;
    }
	#area8 .group2 dd .cap {
        font-size: 12px;
    }
	#area8 .group3 .box {
        padding: 20px 20px 20px 50px;
        margin-bottom: 30px;
    }
    #area8 .group3 .box::after {
        width: 25px;
        height: 25px;
    }
	#area8 .group3 .box .number {
        width: 50px;
    }
	#area8 .group4 {
        padding: 30px;
    }
}
/* --------------------------------------------------- */