@charset "utf-8";

/* ============================================================

  玉田学園

============================================================== */

*, *:before, *:after {
  box-sizing: border-box
}

html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: normal;
  line-height: 1
}

a {
  color: inherit;
  text-decoration: none
}

li {
  list-style: none
}

html {
  font-size: 10px
}

body {
  font-size: 1.6rem;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif
}

/* ============================================================
  レイアウト
============================================================== */
.l-wrap {
	background-color: #eee;
}


.l-wrap__inner {
	background-color: #fff
}


figure { margin:0;padding:0; }

.spv { display:block; }
.pcv { display:none; }

@media screen and (min-width: 1024px) {
	.spv { display:none; }
	.pcv { display:block; }
}


.t_read { font-size:1.3rem;line-height:1.8;text-align:left;margin:0 20px; }
@media screen and (min-width: 1024px) {
	.t_read { font-size:1.4rem;line-height:1.8;margin:0; }
}




/* ============================================================
  HEADER
============================================================== */
.l-header {
	background-color:#009664;
	padding:13px 0;
	text-align:center;
	margin:0;
}

.ttl__site {}
.ttl__site img { width:93%;height:auto; }


@media screen and (min-width: 1024px) {
	.l-header { padding:25px 30px;text-align:left;margin:0 0 0px; }
	.ttl__site img { width:637px;height:auto; }
}




/* ============================================================
  FOOTER
============================================================== */
.l-footer { background:#fff; }
.l-footer__inner { margin:0 10px;padding:30px 0; }

@media screen and (min-width: 1024px) {
	.l-footer { padding:40px 0; }
	.l-footer__inner {
		width:1100px;
		margin:0 auto;
		padding:40px 0;
	}
}


.l-footer__link { text-align:center; }
.l-footer__link li { font-size:1.4rem;margin:0 0 10px; }
.l-footer__link li a { color:#009664;position:relative;padding:0 1em 0 1.2em; }

@media screen and (min-width: 1024px) {
	.l-footer__link {
		display: flex;
		justify-content: start;
		flex-wrap: wrap;
		margin:0 0 0 -1.2em;
		text-align:left;
	}
	.l-footer__link li a:after {
		content:"";
		background-color:#009664;
		width:1px;
		height:1.2em;
		display:block;
		position:absolute;top:0;right:0;
	}
	.l-footer__link li:nth-child(5) a:after,
	.l-footer__link li:nth-child(8) a:after { display:none; }
}


.l-footer__copy {
	background:#009664;
	color:#fff;
	text-align: center;
	font-size: 1rem;
	line-height:1.4;
	padding: 15px 10px;
}

@media screen and (min-width: 1024px) {
	.l-footer__copy { font-size: 1.4rem;	padding: 15px 0; }
}



/* ============================================================
  MAIN
============================================================== */

.l-main {}

.con_top {
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
}

.top_box__nav {
	width:100%;
	-webkit-box-ordinal-group:2;
	-ms-flex-order:2;
	-webkit-order:2;
	order:2;
}

.top_box__mv {
	width:100%;
	-webkit-box-ordinal-group:1;
	-ms-flex-order:1;
	-webkit-order:1;
	order:1;
}


@media screen and (min-width: 1024px) {
	.top_box__nav {
		-webkit-box-ordinal-group:1;
		-ms-flex-order:1;
		-webkit-order:1;
		order:1;
	}
	.top_box__mv {
		-webkit-box-ordinal-group:2;
		-ms-flex-order:2;
		-webkit-order:2;
		order:2;
	}
}





/*-------------------------------------------------------------
  NAV
---------------------------------------------------------------*/
.nav_list {
	width:100%;
	margin:0 auto;
}

.nav_list li {
	text-align:left;
	margin:0 0;
	position:relative;
	border-bottom:1px solid #ccc;
}

.nav_list li a {
	display:block;
	position:relative;
	font-size:1.4rem;
	padding:15px 0 15px 40px;
}


@media screen and (max-width: 1023px) {
	.nav_list li:before {
		content:"";
		display:inline-block;
		width:30px;
		height:100%;
		background-color:#0097A7;
		position:absolute;top:0;left:0px;
	}

	.nav_list li:nth-child(1):before { background-color:#006837; }
	.nav_list li:nth-child(2):before { background-color:#ff5050; }
	.nav_list li:nth-child(3):before { background-color:#f7931e; }
	.nav_list li:nth-child(4):before { background-color:#29abe2; }
	.nav_list li:nth-child(5):before { background-color:#22b573; }
	.nav_list li:nth-child(6):before { background-color:#28286e; }
	.nav_list li:nth-child(7):before { background-color:#a02d2d; }
}

@media screen and (min-width: 1024px) {
	.nav_list {
		width:1100px;
		margin:0 auto 10px;
		display:flex;
		justify-content:space-between;
	}

	.nav_list li {
		text-align:center;
		margin:0 3px;
		border:none;
	}

	.nav_list li a {
		height: 5em;
		display: flex;
		justify-content: center;
		align-items: center;
		padding:0 15px;
		font-size:1.4rem;
		line-height:1.4;
	}

	.nav_list li a:hover {
background-color:#f0f0f0;
	}




	.nav_list li:after {
		content:"";
		display:inline-block;
		width:100%;
		height:5px;
		position:absolute;bottom:0;right:0;
	}
	.nav_list li:nth-child(1):after { margin-left:0; }
	.nav_list li:nth-child(7):after { margin-right:0; }

	.nav_list li:nth-child(1):after { background-color:#006837; }
	.nav_list li:nth-child(2):after { background-color:#ff5050; }
	.nav_list li:nth-child(3):after { background-color:#f7931e; }
	.nav_list li:nth-child(4):after { background-color:#29abe2; }
	.nav_list li:nth-child(5):after { background-color:#22b573; }
	.nav_list li:nth-child(6):after { background-color:#28286e; }
	.nav_list li:nth-child(7):after { background-color:#a02d2d; }
}



/*-------------------------------------------------------------
  スライダー
---------------------------------------------------------------*/

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0
}

.slick-list:focus {
  outline: none
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand
}

.slick-slider .slick-track, .slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto
}

.slick-track:before, .slick-track:after {
  content: "";
  display: table
}

.slick-track:after {
  clear: both
}

.slick-loading .slick-track {
  visibility: hidden
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none
}

[dir="rtl"] .slick-slide {
  float: right
}

.slick-slide img {
  display: block
}

.slick-slide.slick-loading img {
  display: none
}

.slick-slide.dragging img {
  pointer-events: none
}

.slick-initialized .slick-slide {
  display: block
}

.slick-loading .slick-slide {
  visibility: hidden
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent
}

.slick-arrow.slick-hidden {
  display: none
}


@media screen and (max-width: 1023px) {
	.slider li { max-height:250px;over-flow:hidden; }
}

.slider img { width:100%;height:auto;}



/*-------------------------------------------------------------
  キャッチコピー
---------------------------------------------------------------*/
#t-catch {
	background:url(../img/index/bg_line.png) 0 0 repeat;
	padding:20px 0;
}

#t-catch .box_inner {
	background-color:#fff;
	padding:25px 0;
	text-align:center;
	margin:0 20px;
}


.ttl_catch { font-size:1.8rem;color:#009664;margin:0 0 20px 0; }

@media screen and (min-width: 1024px) {
	#t-catch { padding:40px 0; }
	#t-catch .box_inner { width:1100px;margin:0 auto;padding:45px 0; }
	.ttl_catch { font-size:3.5rem;color:#009664;margin:0 0 40px; }
	#t-catch .t_read { text-align:center; }
}




/*-------------------------------------------------------------
  グループ
---------------------------------------------------------------*/

.conBox {  }
#t-group1 { background-color:#006837; }
#t-group2 { background-color:#ff5050; }
#t-group3 { background-color:#f7931e; }
#t-group4 { background-color:#29abe2; }
#t-group5 { background-color:#22b573; }
#t-group6 { background-color:#28286e; }
#t-group7 { background-color:#a02d2d; }

@media screen and (min-width: 1024px) {
	#t-group1 { background:linear-gradient(90deg,#006837 0%,#006837 60%,#d2e6d2 40%,#d2e6d2 100%); }
	#t-group2 { background:linear-gradient(90deg,#ff5050 0%,#ff5050 63.5%,#ffe6e6 36.5%,#ffe6e6 100%); }
	#t-group3 { background:linear-gradient(90deg,#f7931e 0%,#f7931e 63.5%,#fbe6c8 36.5%,#fbe6c8 100%); }
	#t-group4 { background:linear-gradient(90deg,#29abe2 0%,#29abe2 63.5%,#d2f0ff 36.5%,#d2f0ff 100%); }
	#t-group5 { background:linear-gradient(90deg,#22b573 0%,#22b573 63.5%,#d9ffec 36.5%,#d9ffec 100%); }
	#t-group6 { background:linear-gradient(90deg,#28286e 0%,#28286e 63.5%,#e6f5ff 36.5%,#e6f5ff 100%); }
	#t-group7 { background:linear-gradient(90deg,#a02d2d 0%,#a02d2d 63.5%,#ffdcdc 36.5%,#ffdcdc 100%); }
}


/* ボタン */
.btn_site {
	background-color:#fff;
	border-bottom:4px solid #ccc;
}

.btn_site a {
	display:block;
	padding:18px 0 15px;
	width:auto;
	position:relative;
	font-size:1.4rem;
	text-align:center;
}

#t-group1 .btn_site a { color:#15665f; }
#t-group2 .btn_site a { color:#ff5050; }
#t-group3 .btn_site a { color:#f7931e; }
#t-group4 .btn_site a { color:#29abe2; }
#t-group5 .btn_site a { color:#22b573; }
#t-group6 .btn_site a { color:#28286e; }
#t-group7 .btn_site a { color:#a02d2d; }


.btn_site a span { position:relative; }

.btn_site a span:before,
.btn_site a span:after {
	content:"";
	display:block;
	width:16px;
	height:16px;
	position:absolute;top:50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}


#t-group1 .btn_site a span:before,
#t-group2 .btn_site a span:before,
#t-group3 .btn_site a span:before,
#t-group4 .btn_site a span:before,
#t-group5 .btn_site a span:before,
#t-group6 .btn_site a span:before,
#t-group7 .btn_site a span:before { left:-30px; }

#t-group1 .btn_site a span:after,
#t-group2 .btn_site a span:after,
#t-group3 .btn_site a span:after,
#t-group4 .btn_site a span:after,
#t-group5 .btn_site a span:after,
#t-group6 .btn_site a span:after,
#t-group7 .btn_site a span:after { right:-25px; }


#t-group1 .btn_site a span:before { background:url(../img/index/ico_a01.png) 0 0 no-repeat;background-size:100% auto; }
#t-group1 .btn_site a span:after { background:url(../img/index/ico_b01.png) 0 0 no-repeat;background-size:100% auto; }

#t-group2 .btn_site a span:before { background:url(../img/index/ico_a02.png) 0 0 no-repeat;background-size:100% auto; }
#t-group2 .btn_site a span:after { background:url(../img/index/ico_b02.png) 0 0 no-repeat;background-size:100% auto; }

#t-group3 .btn_site a span:before { background:url(../img/index/ico_a03.png) 0 0 no-repeat;background-size:100% auto; }
#t-group3 .btn_site a span:after { background:url(../img/index/ico_b03.png) 0 0 no-repeat;background-size:100% auto; }

#t-group4 .btn_site a span:before { background:url(../img/index/ico_a04.png) 0 0 no-repeat;background-size:100% auto; }
#t-group4 .btn_site a span:after { background:url(../img/index/ico_b04.png) 0 0 no-repeat;background-size:100% auto; }

#t-group5 .btn_site a span:before { background:url(../img/index/ico_a05.png) 0 0 no-repeat;background-size:100% auto; }
#t-group5 .btn_site a span:after { background:url(../img/index/ico_b05.png) 0 0 no-repeat;background-size:100% auto; }

#t-group6 .btn_site a span:before { background:url(../img/index/ico_a06.png) 0 0 no-repeat;background-size:100% auto; }
#t-group6 .btn_site a span:after { background:url(../img/index/ico_b06.png) 0 0 no-repeat;background-size:100% auto; }

#t-group7 .btn_site a span:before { background:url(../img/index/ico_a07.png) 0 0 no-repeat;background-size:100% auto; }
#t-group7 .btn_site a span:after { background:url(../img/index/ico_b07.png) 0 0 no-repeat;background-size:100% auto; }


@media screen and (min-width: 1024px) {
	.btn_site a { width:240px; }

	#t-group1 .btn_site a:before,
	#t-group2 .btn_site a:before,
	#t-group3 .btn_site a:before,
	#t-group4 .btn_site a:before,
	#t-group5 .btn_site a:before,
	#t-group6 .btn_site a:before,
	#t-group7 .btn_site a:before { left:30px; }

	#t-group1 .btn_site a:after,
	#t-group2 .btn_site a:after,
	#t-group3 .btn_site a:after,
	#t-group4 .btn_site a:after,
	#t-group5 .btn_site a:after,
	#t-group6 .btn_site a:after,
	#t-group7 .btn_site a:after { right:35px; }
}



.gp_ttlBox {
	width:100%;
	margin:0;
	position:relative;
}

.gp_box { width:100%; }

#t-group1 .gp_box.is-color { background:#d2e6d2; }
#t-group2 .gp_box.is-color { background:#ffe6e6; }
#t-group3 .gp_box.is-color { background:#fbe6c8; }
#t-group4 .gp_box.is-color { background:#d2f0ff; }
#t-group5 .gp_box.is-color { background:#d9ffec; }
#t-group6 .gp_box.is-color { background:#e6f5ff; }
#t-group7 .gp_box.is-color { background:#ffdcdc; }

@media screen and (min-width: 1024px) {
	.gp_ttlBox {
		width:1100px;
		margin:0 auto;
		display: flex;
		justify-content: space-between;
	}
}


.gp_ttlBox .gp_ttl { width:100%; }

#t-group1 .gp_ttlBox .gp_ttl { background-color:#006837; }
#t-group2 .gp_ttlBox .gp_ttl { background-color:#ff5050; }
#t-group3 .gp_ttlBox .gp_ttl { background-color:#f7931e; }
#t-group4 .gp_ttlBox .gp_ttl { background-color:#29abe2; }
#t-group5 .gp_ttlBox .gp_ttl { background-color:#22b573; }
#t-group6 .gp_ttlBox .gp_ttl { background-color:#28286e; }
#t-group7 .gp_ttlBox .gp_ttl { background-color:#a02d2d; }


.ttl_group {
	font-size:1.8rem;
	line-height:1.4;
	color:#fff;
	margin:0;
	padding:15px 0;
	text-align:center;
}
.ttl_group span { display:inline-block; }
.gp_ttlBox .gp_btn { width:240px;position:absolute;bottom:0;right:0; }


@media screen and (min-width: 1024px) {
	.gp_ttlBox .gp_ttl {
		width:calc(100% - 280px);
		padding:40px 0 20px;
	}

	.ttl_group {
		font-size:2.5rem;
		line-height:1;
		color:#fff;
		margin:0 0 0 340px;
		padding:0;
		text-align:left;
	}
	.ttl_group span { display:inline-block; }
}


.gp_box__set { margin:0 25px;padding:30px 0; }

@media screen and (min-width: 1024px) {
	.gp_box__set {
		width:1100px;
		margin:0 auto;
		display: flex;
		padding:30px 0 0 0;
		justify-content: space-between;
	}
}


.gp_main {
	width:100%;
	position:relative;
	padding-bottom:30px;
}
.gp_main .t_read { width:auto;margin:0 0 0 0; }


@media screen and (max-width: 1023px) {
	.gp_main figure {
		width:100%;
		margin:0 0 20px 0;
		padding:0;
		display: flex;
		justify-content: space-between;
	}
	.gp_main figure span { width:calc((100% - 15px) / 2); }
	.gp_main figure img { width:100%;height:auto; }
}


@media screen and (min-width: 1024px) {
	.gp_main {
		width:817px;
		display: flex;
		justify-content: space-between;
		position:relative;
		padding-bottom:30px;
	}

	.gp_main figure { width:300px;margin:-80px 0 0 0;padding:0; }
	.gp_main .t_read { width:auto;margin:0 0 0 40px;line-height:2.0; }
}


.gp_side { width:240px;position:relative; }
.gp_side img { width:240px;height:auto;position:absolute;bottom:0; }