/*--------------------------------
common
--------------------------------*/
* {
	margin: 0;
	padding: 0;
}

*:focus {
	outline: none !important;
}

body {
	position: relative;
	font-family: "Noto Sans", sans-serif;
	/*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";*/
	color: #3d3d3d;
	line-height: 1.6;
}

h1,
h2,
h3,
p {
	margin: 0;
}

section {
	overflow: hidden;
}

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

.d-inline-block {
	text-indent: 0;
}

.sc {
	max-width: 189px;
}

.hopLogo {
	max-width: 192px;
}

.hopLogoTop {
	max-width: 153px;
}

.cen {
	max-width: 330px;
}

.fs-23 {
	font-size: 30px;
}

.fs-45 {
	font-size: 22px;
}

.pink {
	color: #f29c9e;
}

.blue {
	color: #20b2d3;
}

/* nav縺ｮ繝輔Ο繝ｼ繝育ｷ剰｣� */
body {
	padding-top: 77px;
}

/*--------------------------------
nav
--------------------------------*/
nav {
	background: rgb(255 255 255/0.9);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 77px;
	z-index: 9999;
}

.nav-btn {
	text-decoration: none;
	color: #707070;
	display: inline-block;
	transition: .5s;
}

.btnText {
	padding: 5px;
	font-weight: bold;
}

.btnWhite {
	background: #FFF;
	border: 2px solid #20b2d3;
	border-radius: 50px;
	color: #20b2d3;
	padding: 5px 2rem;
	width: 100%;
	max-width: 135px;
	font-weight: bold;
}

.btnBlue {
	background: #20b2d3;
	border: 2px solid #20b2d3;
	border-radius: 50px;
	color: #FFF;
	padding: 5px 1rem;
	width: 100%;
	max-width: 135px;
	font-weight: bold;
}



/*--------------------------------
header
--------------------------------*/
.swiper {}

@keyframes zoomUp {
	0% {
		transform: scale(1.25);
	}

	100% {
		transform: scale(1);
	}
}

.swiper-slide-active .swiper-img,
.swiper-slide-duplicate-active .swiper-img,
.swiper-slide-prev .swiper-img {
	animation: zoomUp 12s linear 0s normal both;
}

.swiper-slide img {
	height: auto;
	width: 100%;
}

/*--------------------------------
main
--------------------------------*/
/** COMMON **/
.contentPadding {
	padding-top: 160px;
	padding-bottom: 160px;
}

.ttl {
	max-height: 181px;
	width: auto;
	position: relative;
	z-index: 3;
}

/** introduction **/
#intro h2 {
	color: #20b2d3;
}

.gradeBox {
	background: linear-gradient(45deg, rgba(210, 240, 246, 1) 0%, rgba(244, 251, 253, 1) 100%);
	border-radius: 50px;
	position: relative;
	padding: 80px 0;
	padding-right: calc(var(--bs-gutter-x) * .5);
	padding-left: calc(var(--bs-gutter-x) * .5);
}

.gradeBox::before {
	content: "";
	background: url("../images/icon01.png")no-repeat top center/100%;
	width: 356px;
	height: 244px;
	position: absolute;
	right: 0;
	top: -185px;
	z-index: -1;
}

.img01 {
	max-width: 642px;
}

/** strength **/
#strength {
	background-color: #f6f9fb;
}

/** commitment **/
#commitment {}

/** STUDY **/
#study {
	background: #f6f9fb;
	z-index: -1;
}

.outBg01 {
	position: relative;
	z-index: 2;
}

.outBg01::before {
	content: "";
	background: linear-gradient(45deg, rgba(182, 232, 245, 1) 0%, rgba(32, 178, 211, 1) 28.5%, rgba(0, 151, 205, 1) 100%);
	border-radius: 50px 0 0 50px;
	position: absolute;
	width: 200%;
	height: 100%;
	top: 0;
	right: -100%;
	z-index: -1;
}

.icon05 {
	max-width: 267px;
}

/** PROCESS **/
#process {
	background: #eff7f9;
}

/** USER VOICE **/
#uservoice {
	position: relative;
	z-index: -1;
}

#uservoice .whiteBox {
	background: #FFF;
	border-radius: 20px;
	box-shadow: 5px 5px 20px rgb(0 0 0/0.4);
	padding-right: calc(var(--bs-gutter-x) * .5);
	padding-left: calc(var(--bs-gutter-x) * .5);
}

.topBorder {
	border-top: 1px solid #e6e6e6;
}

.ttl06 {
	max-width: 446px;
}

/** CONTACT **/
#contact {
	background: #f6f9fb;
	position: relative;
}

.tel {
	font-size: 70px;
	font-weight: bold;
}

#contact .whiteBox {
	background: #FFF;
	border-radius: 45px;
	padding-right: calc(var(--bs-gutter-x) * .5);
	padding-left: calc(var(--bs-gutter-x) * .5);
}

.contactForm {
	z-index: 2;
}

.pcicon1,
.pcicon2 {
	position: relative;
	z-index: 5;
}

.pcicon1::before,
.pcicon2::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -200px;
	width: 145px;
	height: 145px;
	z-index: 5;
	transform: translate(0, -50%);
}

.pcicon1::before {
	background: url("../images/icon_tel.png")no-repeat top center/100%;
}

.pcicon2::before {
	background: url("../images/icon_mail.png")no-repeat top center/100%;
}

/*繧ｿ繝門�繧頑崛縺亥�菴薙�繧ｹ繧ｿ繧､繝ｫ*/
.tabs {
	background-color: #fff;
	border-radius: 30px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	margin-top: 50px;
	margin: 0 auto;
	max-width: 1000px;
	overflow: hidden;
	padding-bottom: 40px;
}

/*繧ｿ繝悶�繧ｹ繧ｿ繧､繝ｫ*/
.tab_item {
	width: calc(100%/2);
	height: 50px;
	border-bottom: 3px solid #5ab4bd;
	background-color: #d9d9d9;
	color: #565656;
	cursor: pointer;
	display: block;
	font-size: 16px;
	float: left;
	font-weight: bold;
	line-height: 50px;
	text-align: center;
	transition: all 0.2s ease;
}

.tab_item:hover {
	opacity: 0.75;
}

/*繝ｩ繧ｸ繧ｪ繝懊ち繝ｳ繧貞�縺ｦ豸医☆*/
input[name="tab_item"] {
	display: none;
}

/*繧ｿ繝門�繧頑崛縺医�荳ｭ霄ｫ縺ｮ繧ｹ繧ｿ繧､繝ｫ*/
.tab_content {
	display: none;
	padding-top: 40px;
	clear: both;
	overflow: hidden;
}


/*驕ｸ謚槭＆繧後※縺�ｋ繧ｿ繝悶�繧ｳ繝ｳ繝�Φ繝��縺ｿ繧定｡ｨ遉ｺ*/
#all:checked~#all_content,
#programming:checked~#programming_content {
	display: block;
}

/*驕ｸ謚槭＆繧後※縺�ｋ繧ｿ繝悶�繧ｹ繧ｿ繧､繝ｫ繧貞､峨∴繧�*/
.tabs input:checked+.tab_item {
	background-color: #20b2d3;
	color: #fff;
}

/** OUTRO **/
#outro {
	background: url("../images/bg10.jpg")no-repeat top center/cover;
}

/*--------------------------------
BACKGROUND
--------------------------------*/
.bg01,
.bg02,
.bg03,
.bg04,
.bg05,
.bg06,
.bg07,
.bg08,
.bg09 {
	position: relative;
}

.bg01::before {
	content: "";
	background: url("../images/bg01.png")no-repeat bottom left/100%;
	width: 900px;
	height: 606px;
	position: absolute;
	z-index: -1;
	bottom: -2rem;
	left: -40%;
}

.bg02::before {
	content: "";
	background: url("../images/bg02.png")no-repeat bottom left/100%;
	width: 663px;
	height: 456px;
	position: absolute;
	bottom: -7rem;
	right: -35%;
}

.bg03::before {
	content: "";
	background: url("../images/bg03.png")no-repeat bottom left/100%;
	width: 635px;
	height: 743px;
	position: absolute;
	top: -7rem;
	left: -40%;
}

.bg04::before {
	content: "";
	background: url("../images/bg04.png")no-repeat bottom left/100%;
	width: 754px;
	height: 626px;
	position: absolute;
	top: -7rem;
	right: -40%;
}

.bg05::before {
	content: "";
	background: url("../images/bg05.png")no-repeat bottom left/100%;
	width: 623px;
	height: 632px;
	position: absolute;
	top: -2rem;
	left: -35%;
}

.bg06::before {
	content: "";
	background: url("../images/bg06.png")no-repeat bottom left/100%;
	width: 658px;
	height: 641px;
	position: absolute;
	top: -7rem;
	left: -35%;
}

.bg07::before {
	content: "";
	background: url("../images/bg07.png")no-repeat bottom left/100%;
	width: 467px;
	height: 580px;
	position: absolute;
	bottom: -7rem;
	right: -35%;
	z-index: -2;
}

.bg07::after {
	content: "";
	background: url("../images/icon04.png")no-repeat bottom left/100%;
	width: 290px;
	height: 202px;
	position: absolute;
	bottom: -2rem;
	right: -15%;
}

.bg08::before {
	content: "";
	background: url("../images/bg08.png")no-repeat bottom left/100%;
	width: 547px;
	height: 486px;
	position: absolute;
	top: -7rem;
	left: -40%;
}

.bg08::after {
	content: "";
	background: url("../images/bg09.png")no-repeat bottom left/100%;
	width: 412px;
	height: 537px;
	position: absolute;
	bottom: -2rem;
	right: -30%;
}

.outBg01,
.outBg02 {
	position: relative;
	z-index: 2;
}

.outBg01::before {
	content: "";
	background: linear-gradient(45deg, rgba(182, 232, 245, 1) 0%, rgba(32, 178, 211, 1) 28.5%, rgba(0, 151, 205, 1) 100%);
	border-radius: 50px 0 0 50px;
	position: absolute;
	width: 200%;
	height: 100%;
	top: 0;
	right: -100%;
	z-index: -1;
}

.outBg02::before {
	content: "";
	background: #f6f9fb;
	border-radius: 0 50px 50px 0;
	position: absolute;
	width: 200%;
	height: 100%;
	top: 0;
	left: -100%;
	z-index: -1;
}

.formTable {
	width: 95%;
	max-width: 800px;
	margin: auto;
	text-align: start;
}

.formTable input,
.formTable select,
.formTable textarea {
	width: 100%;
	background: #F6F9FB;
	border: 1px solid #D8D8D8;
	border-radius: 5px;
	padding: .75rem 1.5rem;
}

.formTable input::placeholder {
	color: #D8D8D8;
}

.formTable input.w-50 {
	width: 40% !important;
}

.formTable input.w-1r {
	width: 1rem !important;
}

.formTable select {
	cursor: pointer;
}

.formTable textarea {
	height: 10em;
	field-sizing: content;
}

.formTable th,
.formTable td {
	width: 100%;
	display: block;
}

.formTable th {
	margin-bottom: .25rem;
}

.formTable td {
	margin-bottom: 1.5rem;
}

.formTable .scrollFolder {
	height: 10em;
	width: 100%;
	background: #FFF;
	border: 1px solid #D8D8D8;
	border-radius: 5px;
	padding: .75rem 1.5rem;
	overflow-y: scroll;
	color: #3D3D3D;
	margin-bottom: 1.5rem;
}

.buttons {
	background: #20B2D3;
	border: 2px solid #20B2D3;
	border-radius: 50px;
	color: #FFF;
	font-weight: bold;
	width: 100%;
	max-width: 250px;
	padding: 1rem;
}

/*--------------------------------
footer
--------------------------------*/
footer {
	background: #20b2d3;
	color: #FFF;
}

/*--------------------------------
pagetop
--------------------------------*/
#page_top {
	width: 50px !important;
	height: 50px !important;
	margin-left: auto;
	padding: 0;
}

#page_top a {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	right: 0;
	bottom: 1rem;
	font-size: 1rem;
	text-decoration: none;
	background: #20b2d3;
	color: #fff;
	opacity: .6;
	margin-left: auto;
	z-index: 999;
}

#page_top a:hover {
	opacity: 1;
	transition: .4s;
}

#page_top a:active {
	opacity: 1;
}

/*--------------------------------
modaal
--------------------------------*/
/*MODAL CLOSE COLOR*/
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
	background: #20b2d3;
}

.modalw {
	z-index: 5;
}

.modaal_imgbox a,
.modaal_imgbox img {
	border-style: none;
	border: none;
	outline: none;
	display: inline-block;
}

.modalw .images {
	position: relative;
	z-index: -1;
}

.youtube {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}


/*--------------------------------
media
--------------------------------*/
.pc {
	display: inline-block;
}

.sp {
	display: none;
}

.pclg {
	display: inline-block;
}

.splg {
	display: none;
}

@media (min-width: 992px) {

	.container {
		max-width: 1234px;
	}

	nav .container {
		max-width: 1324px;
	}
}

@media (max-width: 1199px) {

	/** NAVI **/
	body {
		padding-top: 104px;
	}

	nav {
		height: 104px;
	}

	menu {
		flex-wrap: wrap;
	}

	menu li {
		width: calc(100% / 5);
	}
}

@media (max-width: 1064px) {

	/** NAVI **/
	body {
		padding-top: 132px;
	}

	nav {
		height: 132px;
	}

}

@media (max-width: 991px) {

	/** NAVI **/
	.pclg {
		display: none;
	}

	.splg {
		display: block;
	}

	body {
		padding-top: 58px;
	}

	nav {
		height: auto;
		background: none;
	}

	menu {
		flex-direction: column;
		text-align: center;
	}

	menu li {
		width: 100%;
		padding: 10px;
	}

	.spMenu {
		background: rgb(255 255 255/0.9);
		position: relative;
		z-index: 100;
		cursor: pointer;
	}

	.spContent {
		display: none;
		opacity: 0;
		background: #E9F7FB;
		position: absolute;
		left: 0%;
		top: 0;
		width: 100%;
		height: 100vh;
		max-width: 100% !important;
		z-index: 99;
		transition: .5;
		padding-top: 3rem;
	}

	.spContent.open {
		display: block;
		opacity: 1;
		overflow-y: scroll;
	}

	.spMenuLine .outline {
		background: #20b2d3;
		position: absolute;
		top: -25px;
		right: -5px;
		width: 50px;
		height: 50px;
	}

	.spMenuLine .inline {
		background: #FFF;
		border-radius: 5px;
		width: 2rem;
		height: 4px;
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		margin: auto;
		transform: translate(0, -50%);
		transition: .5s;
	}

	.spMenuLine .inline::before,
	.spMenuLine .inline::after {
		content: "";
		background: #FFF;
		border-radius: 5px;
		width: 2rem;
		height: 4px;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		transition: .5s;
	}

	.spMenuLine .inline::before {
		top: -10px;
	}

	.spMenuLine .inline::after {
		bottom: -10px;
	}

	.spMenuLine.open .inline {
		background: none;
	}

	.spMenuLine.open .inline::before {
		top: 0px;
		transform: rotate(-45deg);
	}

	.spMenuLine.open .inline::after {
		bottom: 0px;
		transform: rotate(45deg);
	}

	body.open {
		overflow: hidden;
	}
}

@media (max-width: 767px) {
	.pc {
		display: none;
	}

	.sp {
		display: inline-block;
	}

	/** COMMON **/
	.contentPadding {
		padding-top: 5rem;
		padding-bottom: 5rem;
	}

	.ttl {
		max-height: 90px;
		width: auto;
		position: relative;
		z-index: 3;
	}

	.formTable input.w-50 {
		width: calc(100% - 2rem) !important;
	}

	.topBorder {
		flex-wrap: wrap;
	}

	.topBorder .w-25 {
		width: 80% !important;
		margin: auto;
	}

	.topBorder .w-75 {
		width: 100% !important;
	}

	.tel a {
		font-size: 12vw;
		text-decoration: none;
		color: #20b2d3;
	}

	.pcicon1::before,
	.pcicon2::before {
		display: none;
	}

	/** 閭梧勹險ｭ螳� **/
	.gradeBox::before {
		width: 150px;
		height: 105px;
		top: -74px;
		z-index: 2;
	}

	.outBg01::before {
		right: -103%;
	}

	.outBg01 {
		padding-left: 6%;
	}

	.outBg02::before {
		left: -103%;
	}

	.outBg02 {
		padding-right: 6%;
	}

	.bg01::before {
		width: 450px;
		height: 303px;
		bottom: 60%;
		left: -40%;
	}

	.bg02::before {
		width: 331.5px;
		height: 228px;
		bottom: -7rem;
		right: -25%;
	}

	.bg03::before {
		width: 317.5px;
		height: 371.5px;
		top: -2rem;
		left: -40%;
	}

	.bg04::before {
		width: 377px;
		height: 313px;
		top: -2rem;
		right: -40%;
	}

	.bg05::before {
		width: 311.5px;
		height: 316px;
		position: absolute;
		top: 3rem;
		left: -15%;
	}

	.bg06::before {
		width: 329px;
		height: 320.5px;
		top: -2rem;
		left: -35%;
	}

	.bg07::before {
		width: 233.5px;
		height: 290px;
		bottom: -7rem;
		right: -15%;
		z-index: -2;
	}

	.bg07::after {
		width: 290px;
		height: 202px;
		bottom: -2rem;
		right: -5%;
	}

	.bg08::before {
		width: 273.5px;
		height: 243px;
		top: -7rem;
		left: -20%;
	}

	.bg08::after {
		width: 206px;
		height: 268.5px;
		bottom: -4rem;
		right: -10%;
	}

	/***======= SP BUTTON =======***/
	#page_top a {
		bottom: 71px;
	}

	.spBtnZone {
		background: rgb(255 255 255/0.9);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		z-index: 5;
	}

	.spBtnZone .spBtn {
		display: inline-block;
		width: 100%;
		max-width: inherit;
		margin: 0 15px;
		text-align: center;
		text-decoration: none;
	}
}

@media (max-width: 575px) {}