@charset "UTF-8";

/* ------------------------------
	import module
------------------------------ */

@import url('../module/border.css');
@import url('../module/button.css');
@import url('../module/class.css');
@import url('../module/color.css');
@import url('../module/column.css');
@import url('../module/device.css');
@import url('../module/font.css');
@import url('../module/heading.css');
@import url('../module/image.css');
@import url('../module/link.css');
@import url('../module/margin.css');
@import url('../module/marker.css');
@import url('../module/measure.css');
@import url('../module/padding.css');
@import url('../module/section.css');
@import url('../module/table.css');
@import url('../module/text.css');
@import url('../module/zindex.css');

html,
body {
	font-family: "Rounded Mplus 1c", 'メイリオ','MS PGothic','ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
	color: #111111;
}

[class*='fw-100'] { font-weight: 100; }
[class*='fw-200'] { font-weight: 200; }
[class*='fw-300'] { font-family: 300; }
[class*='fw-400'] { font-family: 400; }
[class*='fw-500'] { font-family: 500; }
[class*='fw-600'] { font-family: 600; }
[class*='fw-700'] { font-family: 700; }
[class*='fw-800'] { font-family: 800; }
[class*='fw-900'] { font-weight: 900; }

* {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

dd {
	margin: 0;
}

.tgt { opacity: 0;}
.tgt span{ opacity: 0;}

ul {
	list-style-type: none;
}

i.fa,i.far {
	color: #f4d639;
	width: 1.0em;
	margin-right: 0.5em;
}
p {
	margin: 0;
}

.img_area {
	line-height: 0;
}

.img_fuild {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: center;
}

.text-center {
	text-align: center;
}

.icon-arrow {
	padding-left: 28px;
	color: #111111;
	font-size: 20px;
	font-weight: bold;
	position: relative;
}

.icon-arrow:hover {
	color: #e9574d;
}

.icon-arrow:before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	display: block;
	background: url(../images/icon-arrow.png) no-repeat;
	background-size: contain;
	position: absolute;
	top: 6px;
	left: 0;
}

@media screen and (min-width: 751px), print  {
} @media screen and (max-width: 750px) {
	.icon-arrow {
		padding-left: 20px;
		font-size: 16px;
	}
	.icon-arrow:before {
		width: 16px;
		height: 16px;
		top: 4px;
	}
}

/* ------------------------------
	Header
------------------------------ */
#logo-site {
background: -webkit-linear-gradient(20deg, #ea5a4d 10%, #f2a33f 30%, #f2d818 40%, #a1c643 60%, #00a77a 70%, #008fc5 90%);
background: -o-linear-gradient(20deg, #ea5a4d 10%, #f2a33f 30%, #f2d818 40%, #a1c643 60%, #00a77a 70%, #008fc5 90%);
background: linear-gradient(110deg, #ea5a4d 10%, #f2a33f 30%, #f2d818 40%, #a1c643 60%, #00a77a 70%, #008fc5 90%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	font-weight: bold;
	display: block;
}

@media screen and (min-width: 751px), print  {
	header {
		height: 100px;
		position: relative;
	}

	#logo-site {
		position: absolute;
		top: 20px;
		left: 20px;
		margin: 0;
		width: 281px;
		height: 60px;

	}
	#logo-site a {
		display: block;
		height: 60px;
		background: url(/common/images/logo-secondary.png) no-repeat;
		background-size: contain;
		text-indent: -9999px;
	}
	.top #logo-site a {
		color: #fff;
	}
	.grant {
		display: none;
	}
	.top .grant {
		position: absolute;
		top: 10px;
		right: 200px;
		font-size: 14px;
		color: #fff;
		display: inline;
	}
	.logo-shoo {
		position: absolute;
		top: 10px;
		right: 80px;
		display: none;
	}
	.logo-shoo img {
		height: 70px;
	}
	.top .logo-shoo {
		display: block;
	}
} @media screen and (max-width: 750px) {
	header {
		height: 100px;
		position: relative;
	}
	
	#logo-site {
		position: absolute;
		top: 20px;
		left: 20px;
		margin: 0;
		width: 281px;
		height: 60px;

	}
	#logo-site a {
		display: block;
		height: 60px;
		background: url(/common/images/logo-secondary.png) no-repeat;
		background-size: contain;
		text-indent: -9999px;
	}
	
	.top #logo-site {
		display: none;

	}
	.grant {
		display: none;
	}
	.logo-shoo {
		position: absolute;
		top: 5px;
		left: 20px;
		display: none;
	}
	.logo-shoo img {
		height: 70px;
	}
	.top .logo-shoo {
		display: block;
	}
	
}


/* ------------------------------
	hamburger
------------------------------ */

.hamburger {
  display : block;
  position: fixed;
  z-index : 999;
  right : 20px;
  top   : 20px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #111;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* スマホメニューを開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  background :#666;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  background :#666;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}
.hamburger small {
  position: absolute;
  top: 40px;
  left: 6px;
  font-size: 10px;
	text-align: center;
	letter-spacing: 1px;
}

/* メニュー背景　*/
nav.globalMenuSp {
  position: fixed;
  z-index : 2;
  top  : 0;
  left : 0;
  color: #111;
  background: rgba( 255,255,255,0.9 );
  text-align: center;
  width: 100%;
  transform: translateY(-100%);
  transition: all 0.6s;
}

nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}
nav.globalMenuSp ul li:hover{
  background :#ddd;
}

nav.globalMenuSp ul li a {
  display: block;
  color: #111;
  padding: 2.5em 0;
  text-decoration :none;
	border-bottom: 1px solid #ccc;
}
nav.globalMenuSp ul li:hover a{
  color: #111;
}

/* クリックでjQueryで追加・削除 */
nav.globalMenuSp.active {
  opacity: 100;
  display: block;
   transform: translateY(0%);
}

/* ------------------------------
	Wrapper
------------------------------ */
.hover_Scale:hover,
.hover_Scale:focus,
.hover_Scale:active {
	animation: hover_Scale 3s infinite ease-out;
	transform-origin: 50% 50%;
}

@keyframes hover_Scale {
	0% { transform: scale(0.8, 0.8); }
	5% { transform: scale(1.2, 1.2); }
	10% { transform: scale(1, 1); }
	15% { transform: scale(1.1, 1.1); }
	20% { transform: scale(1, 1); }
	100% { transform: scale(1, 1); }
}

.btn {
	font-weight: bold;
	border: none;
	background-color: #f4d639;
	box-shadow: 0 6px 0 #d3b931;
	text-align: center!important;
	border-radius: 6px;
}

.btn:hover {
  animation: random-bg .5s linear infinite, grow 1300ms ease infinite;
}

@keyframes grow {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.1);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(1);
  }
}

.btn:active,
.btn:visited {
	color: #111;
}


.btn:hover {
	color: #fff;
	margin-top: 0;
	top: 0;
	border: none;
	background: -webkit-linear-gradient(20deg, #ea5a4d 10%, #f2a33f 30%, #f2d818 40%, #a1c643 60%, #00a77a 70%, #008fc5 90%);
	background: -o-linear-gradient(20deg, #ea5a4d 10%, #f2a33f 30%, #f2d818 40%, #a1c643 60%, #00a77a 70%, #008fc5 90%);
	background: linear-gradient(110deg, #ea5a4d 10%, #f2a33f 30%, #f2d818 40%, #a1c643 60%, #00a77a 70%, #008fc5 90%);
	text-align: center;
	box-shadow: 0 6px 0 #ccc;
}




@media screen and (min-width: 751px), print  {
	.wrapper {
		min-width: 1171px;
		height: auto;
		overflow: hidden;
	}	
	
	.sp-toggle-header {
		display: none;
	}
	
	.sp-toggle-body:after {
		content: "";
		display: block;
		clear: both;
	}
	
	.btn {
		display: inline-block;
	}

	.btn-small {
		display: block;
		padding: 2px 14px 3px;
		font-size: 15px;
		border-radius: 4px;
	}
	
	.btn-medium {
		display: block;
		padding: 10px 10px;
		font-size: 20px;
		width: 300px;
		margin: 0 auto;
	}
	
	.btn-large {
		display: block;
		padding: 20px 14px 19px;
		font-size: 30px;
		margin: 0 auto;
	}
	

} @media screen and (max-width: 750px) {
	*:hover,
	*:focus,
	*:active {
		animation: none !important;
	}	
	
	.wrapper {
		min-width: 375px;
		overflow-x: hidden;
	}
	
	.sp-toggle-header {
		margin: 0 15px;
		position: relative;
	}	
	
	.sp-toggle-header:before {
		content: "";
		display: block;
		width: 24px;
		height: 24px;
		background: url(../images/icon_toggle_plus.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 15px;
		margin: auto;
	}
	
	.sp-toggle-header.is-open:before {
		background: url(../images/icon_toggle_minus.png) no-repeat;
		background-size: contain;
	}
	
	.sp-toggle-body {
		display: none;
		padding-top: 15px;
	}

	.btn {
		display: block;
	}
	
	.btn-small {
		padding: 6px 14px;
		font-size: 12px;
	}
	
	.btn-medium,
	.btn-large {
		padding: 16px 14px;
		font-size: 16px;
		margin: 0 auto;
	}
	
}

.pt8 {
	padding-top: 8px !important;
}

@media screen and (min-width: 751px), print  {
	.content_area {
		width: 1170px;
		padding: 0 30px;
		margin: 0 auto;
		position: relative;
		box-sizing: border-box;
	}

	.pc_hide {
		display: none;
	}
	
	.icon-arrow {
		padding-left: 30px;
		position: relative;
	}
	
	.icon-arrow:before {
		content: "";
		display: block;
		width: 20px;
		height: 17px;
	}
	
	.sec-visual {
		padding: 40px 0px;
		text-align: center;
		background: linear-gradient( 110deg, #ea5a4d 10%,#f2a33f 30%,#f2d818 40%,#a1c643 60%,#00a77a 70%,#008fc5 90%);
	}
	.sec-visual .sec-visual-area {
		width: 90%;
		background-color: #fff;
		display: inline-block;
		padding: 30px 40px;
		letter-spacing: 2px;
	}
	.sec-visual .sec-visual-area .first {
		font-size: 38px;
		line-height: 50px;
	}
	.sec-visual .sec-visual-area .sec {
		font-size: 22px;
		line-height: 36px;
	}
	
	#breadcrumbs {
		margin: 0 auto;
		padding: 10px 20px;
		box-sizing: border-box;
	}
	.list-breadcrumbs {
		margin: 0;
		padding: 0;
		list-style: none;
		letter-spacing: -.40em;
	}
	
	.list-breadcrumbs > li {
		display: inline-block;
		font-size: 0.812rem;
		letter-spacing: normal;
	}
	
	.list-breadcrumbs > li::before {
		margin: 0 9px;
		content: '»';
	}
	
	.list-breadcrumbs > li:first-child::before {
		display: none;
	}
	
	.list-breadcrumbs a {
	}
	
} @media screen and (max-width: 750px) {
	.content_area {
		padding: 0 30px;
		position: relative;
		box-sizing: border-box;
	}

	.sp_hide {
		display: none;
	}
	
	.sec-visual {
		padding: 20px 30px;
		text-align: center;
		background: linear-gradient( 110deg, #ea5a4d 10%,#f2a33f 30%,#f2d818 40%,#a1c643 60%,#00a77a 70%,#008fc5 90%);
	}
	.sec-visual .sec-visual-area {
		background-color: #fff;
		padding: 20px 40px;
		letter-spacing: 2px;
	}
	.sec-visual .sec-visual-area .first {
		font-size: 28px;
		line-height: 36px;
	}
	.sec-visual .sec-visual-area .sec {
		font-size: 14px;
		line-height: 26px;
	}
	
	
	#breadcrumbs {
		display: none;
	}

	.row .img_fuild {
		width: 100%;
	}
}

/* ------------------------------
	Footer
------------------------------ */

footer {
	background-color: #fff;
}

#toPageTop {
	display: block;
	width: 135px;
	height: 140px;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1000;
}

#toPageTop a {
	display: block;
	width: 135px;
	height: 140px;
	text-indent: -9999px;
	background: url(../images/pagetop.png) no-repeat;
	background-size: contain;
	position: relative;
	animation: pagetop_usual infinite 7s linear;
	z-index: 1000;
}
		
	@keyframes pagetop_usual {
		0% { bottom: 10px}
		5% { bottom: 20px}
		10% { bottom: 30px}
		15% { bottom: 20px}
		20% { bottom: 10px}
		25% { bottom: 20px}
		30% { bottom: 30px}
		35% { bottom: 20px}
		40% { bottom: 10px}
		45% { bottom: 20px}
		50% { bottom: 30px}
		55% { bottom: 20px}
		60% { bottom: 10px}
		65% { bottom: 20px}
		70% { bottom: 30px}
		75% { bottom: 20px}
		80% { bottom: 10px}
		85% { bottom: 20px}
		90% { bottom: 30px}
		95% { bottom: 20px}
		100% { bottom: 10px}
	}
	

@media screen and (min-width: 751px), print {
	.footerlink ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		width: 100%;
	}
	.footerlink li {
		width: calc(100% / 4);
	}	
	.footerlink li a {
		display: block;
		text-align: center;
		background-color: #f4d639;
		color: #111;
		padding: 20px;
		border-right: 1px solid #fff;
		font-weight: bold;
	}	
	.footerlink li a:hover {
		color: #fff;
		margin-top: 0;
		top: 0;
		border: none;
		background: -webkit-linear-gradient(20deg, #ea5a4d 10%, #f2a33f 30%, #f2d818 40%, #a1c643 60%, #00a77a 70%, #008fc5 90%);
		background: -o-linear-gradient(20deg, #ea5a4d 10%, #f2a33f 30%, #f2d818 40%, #a1c643 60%, #00a77a 70%, #008fc5 90%);
		background: linear-gradient(110deg, #ea5a4d 10%, #f2a33f 30%, #f2d818 40%, #a1c643 60%, #00a77a 70%, #008fc5 90%);
	}
	#schoollist {
		text-align: center;
		padding: 40px 120px;
	}
	#schoollist a {
		padding: 4px 10px;
		display: block;
	}
	#schoollist a:hover img {
		opacity: 0.8;
	}
	#copyright {
		width: 100%;
		padding: 20px 20px 42px;
		font-size: 12px;
		text-align: center;
	}
	
} @media screen and (max-width: 750px) {
	.footerlink li a {
		width: 100%;
		display: block;
		text-align: center;
		background-color: #f4d639;
		color: #111;
		padding: 20px;
		border-bottom: 1px solid #fff;
		font-weight: bold;
	}	
	#schoollist {
		text-align: center;
		padding: 40px 20px;
	}
	#schoollist a {
		padding: 12px 120px;
		display: block;
	}
	#copyright {
		width: 100%;
		padding: 11px 0 30px;
		font-size: 12px;
		text-align: center;
	}
	
	#toPageTop a {
		display: none;
	}
}