@charset "UTF-8";

html {
	/* scroll-behavior: smooth; */
	position: static;
	overflow-x: hidden;
}
body {
	height: auto;
	background-color: aliceblue;
}
img {
	user-select: none;
	pointer-events: none;
}
.dontScroll {
	height: 100vh;
	overflow: hidden;
}
header {
	position: sticky;
	top: 0;
	width: 100%;
	height: 120px;
	top: 0;
	background-color: white;
	z-index: 99999;

	display: flex;
	align-items: center;
	border-bottom: darkslateblue 3px solid;
}
.kg_logo {
	margin: 10px;
	width: auto;
	height: 100px;
}
header .wrap_logo {
	display: flex;
	justify-content: center;
	align-items: center;
}
header .logo_L {
	padding: 10px;
}
header .logo_L img {
	width: 100px;
	height: 100px;
	/* border-radius: 40px; */
	object-fit: cover;
}
header .logo_R {
	padding: 5px 0;
}
header .logo_R img {
	width: auto;
	height: 50px;
	/* border-radius: 40px; */
	object-fit: cover;
}
header .logo_R li:first-child {
	line-height: 0;
}
header .logo_R li {
	line-height: 16px;
}
.wrap_campus_name li {
	padding: 5px 10px;
	margin: 5px;
	font-weight: bold;
	font-size: 150%;
	text-align: center;
}
.wrap_campus_name li:nth-child(1){
	background-color: rgb(78,160,117);
	color: white;
}
.wrap_campus_name li:nth-child(2){
	background-color: orange;
	color: white;
}


#mv{
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	background-image: url("../images/syuppatuten_NOtrim.png");
	background-position: center;
	background-size: cover;
}
#mv ul {
	display: none;
}

#wrapper {
	margin: 0px auto 25px;
	padding: 20px 0;
	width: 1000px;
	background-color: white;
}
.hr {
	border-width: 0;
	border-bottom: darkslateblue 3px solid;
	background-image: url(../images/silhouette_blue_head.png);
	background-size: 15%;
	background-position: right 5% bottom;
	background-repeat: no-repeat;
	height: 100px;
}

article {
	position: relative;
	margin-bottom: 100px;
}
.article_title {
	font-size: 150%;
	font-weight: bold;

	display: flex;
	align-items: center;

	padding: 10px 0;
}



#a1 {
	padding-top: 50px;
}
#wrap_8type {
	display: flex;
}
#R_8type {
	padding: 40px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
#R_8type p {
	font-size: 135%;
	background-color: royalblue;
	color: white;
	padding: 10px 5px;
	text-shadow: 1px 1px 3px white;
	margin: 0 auto 10px 0;
}
#R_8type div {
	padding: 10px 0 10px 20px;
	font-size: 140%;
}
#a1_b > div{
	font-size: 120%;
	padding: 20px 50px;
}
#wrap_a1_img {
	display: flex;
}
#wrap_a1_img li {
	width: 25%;
	padding: 10px;
	text-align: center;
}
.a1_imgs {
	width: auto;
	height: 500px;
	margin: 0 auto;
}
#a1_explan_1 {
	line-height: 250%;
}
#a1_explan_2 {
	background-color: royalblue;
}
#a1_explan_2,
#campus_explan {

	color: white;
	margin: 0 40px 40px;
	padding: 10px !important;
}
#campus_explan {
	background-color: darkcyan;
}


#a2_b {
	margin: 20px;
	padding-bottom: 50px;
	background-color: rgb(241,249,252);
	border-radius: 20px;
}
#a2_b img {
	width: 100%;
	/* height: 200px; */
}
#flow_title {
	width: 40%;
	padding-top: 15px;
	padding-left: 15px;
}
#wrap_flow {
	display: flex;
	justify-content: center;
}
#wrap_flow li {
	border-bottom: 1px solid black;
}
.flow_items {
	width: 20%;
}
.flow_arrow {
	width: 5%;
}


/* trine */
#a3_b {
	margin-top: 20px;
}
#a3_b .wrap_img {
	display: flex;
	justify-content: center;
	align-items: center;
}
#wrap_tokutyo img {
	width: 50%;
}

#wrap_triangle {
	padding: 100px 0 0;
}
.triangle {
	--b:30px; /* control the border thickness */

	width: 700px;
	aspect-ratio: 1/cos(30deg);
	clip-path: polygon(50% 0,100% 100%,0 100%,50% 0,50% var(--b),calc(var(--b)*cos(30deg)) calc(100% - var(--b)/2),calc(100% - var(--b)*cos(30deg)) calc(100% - var(--b)/2),50% var(--b));
	background: linear-gradient(45deg,#FA6900,#C02942);

	margin: 0 auto;
}
#wrap_tokutyo {
	position: absolute;
	top: 120px;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
#wrap_tokutyo_item {
	position: absolute;
	top: 30px;
	left: 0;
	width: 100%;
	height: 110%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
#a3_b ul {
	display: flex;
	justify-content: center;
	align-items: center;
}
#wrap_tokutyo_item li {
	width: 300px;
	height: 300px;
}
#wrap_tokutyo_item li:not(.tokutyo_dummy) {
	border: 6px solid;
	background-color: white;
	border-radius: 50%;
	display: flex;
}
#wrap_tokutyo_item img {
	width: 100%;
}
#tokutyo_1 {
	border-color: rgb(197,76,51) !important;
}
#tokutyo_2 {
	border-color: rgb(222,102,45) !important;
}
#tokutyo_3 {
	border-color: rgb(205,84,50) !important;
}


/*  gakuhi */
#a4 {
	padding-top: 50px;
}
#a4_t {
	text-align: center;
	width: 100%;

	justify-content: center;
}
#wrap_bosyu_yoko {
	padding: 30px;
}
#wrap_bosyu_yoko h3 {
	background-color: rgb(215, 215, 215);
	width: 570px;
	margin: 0 auto;
	text-align: center;
	line-height: 200%;
	padding: 10px;
}
.by_title {
	color: rgb(80, 173, 91);
	font-size: 150%;
	margin: 30px 0 10px;
}
.table_row {
	display: flex;
}
.cell {
	display: flex;
	align-items: center;
	align-content: center;
	padding: 10px;
	border: 0.5px solid rgb(213,223,204);
	flex-wrap: wrap;
}
.col_1 {
	background-color: rgb(202, 223, 183);
	color: rgb(94, 128, 65);
	width: 20%;
	justify-content: center;
	border: 0.5px solid rgb(228,239,219);
	text-align: center;
}
.col_2 {
	width: 80%;
	border: 0.5px solid rgb(213,223,204);
}
#wrap_gakuhi .col_1 {
	display: flex;
	align-items: center;
}
.r5div li {
	width: 22%;
}
.r5div li:first-child {
	width: 12%;
}
.r5div li div:nth-child(1) {
	height: 65%;
}
.r5div li div:nth-child(2) {
	height: 35%;
}
:root {
	--col1_dL_w: 7%;
	--row_w: calc( 100% / 0.93 );
}
#wrap_gakuhi .col_1.col_1_div {
	width: var(--col1_dL_w);
}
.r3div,
.r2div {
	display: flex;
}
.r3div p,
.r2div p {
	background-color: rgb(202, 223, 183);
	color: rgb(94, 128, 65);
	border: 0.5px solid rgb(228,239,219);
	width: calc( var(--row_w) * 0.13 );
	text-align: center;
}
.r3div ul,
.r2div ul {
	width: calc( var(--row_w) * 0.8 );
}
.r3div li:last-child,
.r2div li:last-child {
	width: 34%;
}
.r3div li,
.r2div li {
	width: 33%;
}
.r2div li:first-child {
	width: 66%;
}

#wrap_gakuhi .col_2 .cell {
	justify-content: center;
}
#wrap_gakuhi .col_2.col_1_div {
	width: 93%;
}

.col_2 ul {
	display: flex;
}




/* QandA */
#a5_t {
	text-align: center;
	width: 100%;

	justify-content: center;
}
#a5_b {
	margin: 10px 30px;
	display: flex;
	justify-content: center;
	align-items: center;

	font-size: 130%;
}
#a5_b a {
	font-weight: bold;
	text-decoration: underline;
}
.rowQ {
	margin: 20px;
	/* padding: 20px; */
	/* border: 3px solid seagreen; */
	border-radius: 20px;
	background-image: url("../images/QnA_rectangle_lightb.png");
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.rowQ div {
	display: flex;
	align-items: center;
}
.rowQ div:first-child {
	padding: 20px 20px 0 20px;
}
.rowQ div:last-child {
	padding: 0px 20px 35px 50px;
}
.rowQ img {
	width: 100px;
	height: 100px;
}
.sQ, .sA {
	font-weight: bold;
	font-size: 150%;
}
.sQ {
	color: blue;
	margin-left: 10px;
}
.sA {
	color: red;
}


#wrap_slide {
	position: relative;
	width: 100%;
	margin: 40px 0;
	display: grid;
}
#wrap_slide li {
	grid-area: 1/1;
	background-color: black;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 20px 0;
}
#wrap_slide li img {
	width: 75%;
}
#wrap_boyaki {
	margin: 70px 30px 0;
	padding: 20px;
	background-color: lightblue;
	border-radius: 20px;
}
#wrap_boyaki h3 {
	font-size: 150%;
	font-weight: bold;
	position: relative;
	border-bottom: 1px solid black;
}
#wrap_hukidashi {
	position: absolute;
	top: -50px;
	right: 180px;
}
#hukidashi {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 5px;
	width: 270px;
	height: 120px;
	line-height: 120px;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	background: white;
	border: 2px solid lightblue;
	border-radius: 30px;
}

#hukidashi:before {
	content: "";
	position: absolute;
	bottom: 25px;
	right: -25px;
	z-index: 0;

	height: 30px;
	aspect-ratio: cos(30deg);
	clip-path: polygon(0 0,100% 50%,0 100%);
	background-color: white;
}
#wrap_boyaki h3 img{
	width: 20%;
	position: absolute;
	top: -120%;
	right: 0;
}
#wrap_boyaki ul {
	padding: 10px 5px;
}
#wrap_boyaki ul li:first-child {
	font-size: 120%;
	color: darkslateblue;
	font-weight: bold;
}
#wrap_boyaki ul li:nth-child(2) {
	padding: 0 0 10px 10px;
}



/* other */
#a6_t {
	width: 100%;

	justify-content: center;
}
#a6_b {
	margin-top: 20px;
	font-size: 120%;
}
#a6_b p {
	font-size: 120%;
}
#a6_b div {
	margin: 0 20px 20px;
}
#a6_b div a {
	text-decoration: underline;
	font-weight: bold;
}


/* contact */
#a7_t {
	text-align: center;
	width: 100%;

	justify-content: center;
}
#a7_b {
	margin-top: 20px;
}
#a7_b ul {
	display: flex;
	align-items: center;
	text-align: center;
	flex-direction: column;
}
#a7_b ul li {
	width: 100%;
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.lName {
	width: 600px;
	font-size: 150%;
	font-weight: bold;
	color: white;
}
#wrap_eOsaka .lName {
	background-color: rgb(78,160,117);
}
#wrap_katuragi .lName {
	background-color: orange;
}
.map {
	width: 600px;
	height: 600px;
	margin: 10px 0;
}
.map iframe {
	width: 100%;
	height: 100%;
}
.wrap_area {
	margin-top: 20px;
}
.area_map {
	width: 600px;
	height: auto;
	margin: 10px;
}
#wrap_form {
	font-size: 120%;
	width: 100%;
	height: 450px;
	margin: 100px 0 20px;
	background-image: url("../images/7aa0466e-0604-474f-9e9b-23471fd890a8.jpg");
	background-size: cover;
	background-position: center bottom 10%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	text-shadow: 1px 1px 2px lightskyblue;
}
#wrap_form a {
	text-decoration: underline;
	font-weight: bold;
	color: lightcyan;
	text-shadow: 1px 1px 2px pink;
}

/* navigation */
nav {
	position: fixed;
	bottom: 20px;
	width: 100%;
	z-index: 99998
}
nav ul {
	display: flex;
	justify-content: center;
	align-items: center;
}
nav ul li {
	width: 150px;
	background-color: white;
	color: white;
	margin: 0 10px;
	border-radius: 5px;
	text-align: center;
}
nav ul li a {
	background-color: mediumaquamarine;
	color: white;
	display: flex;
	justify-content: center;
	padding: 15px 20px;
	cursor: pointer;
	border-radius: 5px;
}
nav ul li a:hover {
	opacity: 0.8;
}
nav ul li a span {
	text-wrap: nowrap;
}


/* foooter */
footer {
	position: relative;
	width: 100%;
	height: 80px;
}
.wave {
  --mask:
    radial-gradient(21.75px at 50% 30.75px,#000 99%,#0000 101%) calc(50% - 30px) 0/60px 100%,
    radial-gradient(21.75px at 50% -15.75px,#0000 99%,#000 101%) 50% 15px/60px 100% repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
	width: 100%;
	height: 50px;
	background-color: cornflowerblue;

	position: absolute;
	top: -50px;
}
#footer_main {
	background-color: cornflowerblue;
	padding: 0 20px 70px 20px;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
#footer_L {
	display: flex;
}
footer .wrap_logo {
	display: flex;
	align-items: center;
}
footer .logo_L {
	padding: 10px;
}
footer .logo_L img {
	width: 100px;
	height: 100px;
	/* border-radius: 40px; */
	object-fit: cover;
}
footer .logo_R {
	padding: 5px 0;
}
footer .logo_R img {
	width: auto;
	height: 50px;
	/* border-radius: 40px; */
	object-fit: cover;
}
footer .logo_R li:first-child {
	line-height: 0;
}
footer .logo_R li {
	line-height: 16px;
}

#wrap_school_name {
	display: flex;
}
#sn_logo img {
	/* width: 64px; */
	/* filter: invert(100%); */
	width: 60px;
	height: 60px;
	border-radius: 30px;
	object-fit: cover;
}
#school_name {
	margin-left: 10px;
	color: white;
}
#school_name div {
	font-size: 150%;
}
#school_name div:first-child {
	font-size: 100%;
}
#school_name div span {
	margin-left: 10px;
}
#wrap_tel {
	color: white;
	/* margin-left: 50px; */
}
#wrap_tel li{
	font-size: 120%;
}
#wrap_tel li:nth-child(2){
	font-size: 250%;
	line-height: 100%;
}
#wrap_tel li:last-child {
	font-size: 95%;
}

/* tablet 768-1000px */
@media screen and (max-width: 1000px) {
	html,body {
		width: 100vw;
		font-size: 90%;
	}
	#mv {
		background-position: right;
	}
	#wrapper {
		width: 100%;
	}
	.wrap_txt {
		padding: 30px 50px;
	}
	.a1_imgs {
		height: 350px;
	}
	#wrap_tokutyo_item li {
		width: 250px;
		height: 250px;
	}
	#wrap_bosyu_yoko {
		padding: 20px 10px;
	}
	.r5div li:first-child {
		width: 8%;
	}
	.r5div li {
		width: 23%;
	}
	.r3div li {
		width: 30%;
	}
	.r3div li:last-child, .r2div li:last-child {
		width: 40%;
	}
	.r2div li:first-child {
		width: 60%;
	}
	#wrap_boyaki h3 img {
		right: -10px;
	}
	#wrap_hukidashi{
		right: 165px;
	}
	#hukidashi {
		width: 220px;
		height: 70px;
		line-height: 7px;
		border-radius: 15px;
	}
	#hukidashi:before {
		height: 15px;
		bottom: 10px;
		right: -13px;
	}
	.lName {
		width: 300px;
	}
	.map {
		width: 300px;
		height: 300px;
	}
	#footer_main {
		flex-direction: column;
		align-items: start;
	}
	#wrap_tel {
		margin: 20px 0 0 0;
	}
}

@media screen and (max-width: 767px) {
	body {
		width: 100vw;
	}
	.br_dummy::after{
		content: '\A';
		white-space: pre;
	}
	.kg_logo {
		height: 75px;
	}
	#wrap_8type {
		flex-direction: column;
	}
	#R_8type {
		padding: 20px 10px 0;
	}
	.a1_imgs {
		height: 400px;
	}
	#wrap_triangle {
		padding-top: 50px;
	}
	.triangle {
		width: 400px;
	}
	#wrap_tokutyo {
		top: 90px;
	}
	#wrap_tokutyo_item li {
		width: 175px;
		height: 175px;
	}
	#wrap_bosyu_yoko {
		padding: 10px 0;
		font-size: 90%;
	}
	#wrap_bosyu_yoko h3 {
		width: 90%;
	}
	#wrap_hukidashi {
		right: 80px;
	}
	#hukidashi {
		font-size: 85%;
		width: 200px;
	}
	.lName {
		width: 200px;
	}
	.map {
		width: 200px;
		height: 200px;
	}
	#footer_main {
		padding-left: 20px;
		padding-right: 20px;
	}

	nav ul li a {
		/* font-size: 80%; */
		flex-direction: column;
		align-items: center;
	}
	#guide {
		flex-direction: column;
	}
	#map {
		width: 35%;
	}
}
@media screen and (max-width: 500px) {
	body {
		font-size: 95%;
	}
	#mv{
		background-image: url("../images/syuppatuten_background.png");
		background-position-x: 40%;
		background-position-y: center;
		overflow: hidden;
	}
	#mv ul {
		display: block;
		margin-left: 20%;
		margin-bottom: 50%;
		position: relative;
		width: 100vw;
		height: 50vw;
	}
	#wrap_imakoso {
		background-image: url("../images/syuppatuten_imakoso_text.png");
		background-size: cover;
		width: 100vw;
		height: 50vw;
		position: absolute;
		top: 0;
	}
	#wrap_tsusin {
		background-image: url("../images/syuppatuten_tunageru_text_v3.png");
		background-size: cover;
		width: 80vw;
		height: 24vw;
		position: absolute;
		bottom: -10%;
	}
	.br_dummy2::after{
		content: '\A';
		white-space: pre;
	}
	.wrap_campus_name li {
		font-size: 90%;
	}
	.a1_imgs {
		height: 100vw;
	}
	#a1_b > div {
		padding: 20px 25px;
	}
	#a1_explan_2,
	#campus_explan {
		margin: 0 25px 40px;
		line-height: 175%;
	}

	#flow_title {
		width: 90%;
	}
	#wrap_flow {
		flex-direction: column;
		align-items: center;
	}
	#wrap_flow li {
		border-bottom: none;
	}
	.flow_items {
		width: 80%;
	}
	.flow_arrow {
		width: 20%;
		rotate: 90deg;
	}

	.triangle {
		width: 300px;
	}
	#wrap_tokutyo_item li {
		width: 120px;
		height: 120px;
	}
	.col_1 {
		width: 16%;
	}
	.col_2 {
		width: 84%;
	}
	.r3div ul, .r2div ul {
		width: calc( var(--row_w) * 0.84 );
	}
	.r3div p, .r2div p {
		writing-mode: vertical-rl;
		width: calc( var(--row_w) * 0.09 )
	}
	#a5_b {
		margin: 0;
	}
	.rowQ {
		margin: 0;
	}
	.rowQ div:first-child {
		padding: 40px 30px 0 30px;
	}
	.rowQ div:last-child {
		padding: 0px 30px 50px 50px;
	}
	.rowQ img {
		width: 75px;
		height: 75px;
	}
	#wrap_hukidashi {
		/* display: none; */
		top: -65px;
		right: 30px;
	}
	#hukidashi {
		font-size: 75%;
		width: auto;
		height: auto;
		padding: 20px;
	}
	#hukidashi:before {
		height: 20px;
		bottom: -20%;
		right: 15%;
		clip-path: polygon(100% 0, 0 50%, 100% 100%);
	}
	#wrap_boyaki h3 img {
		top: -80%;
		right: -10%;
		width: 30%;
	}
	#a7_b ul {
		flex-direction: column;
	}
	#a7_b ul li {
		width: 100%;
	}
	.lName {
		width: 80vw;
	}
	.map {
		width: 80vw;
		height: 80vw;
	}
	.area_map {
		width: 80vw;
	}
	#wrap_form {
		font-size: 155%;
	}

	nav ul li {
		margin: 0 5px;
		border-radius: 5px;
	}
	nav ul li a {
		font-size: 60%;
		padding: 5px;
	}
	#footer_main {
		justify-content: center;
		align-items: center;
		padding-left: 0;
		padding-right: 0;
	}
	.kg_logo {
		height: 60px;
	}
}



/* loading */
#wrap_loading {
	background-color: white;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9999999;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 150%;
}
#Loading_img {
	width: 64px;
	height: 64px;

	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-name: anim_s;
	transform: rotate(5deg);
	animation-duration: 5s;
}

@keyframes anim_s {
	50% {
		transform: rotate(-5deg);
	}
	100% {
		transform: rotate(5deg);
	}
}

#Loading_txt span {
	animation-iteration-count: infinite;
	animation-duration: 4s;
	opacity: 0;
}
#Loading_txt span:nth-child(1) {
	animation-name: anim_d1;
}
#Loading_txt span:nth-child(2) {
	animation-name: anim_d2;
}
#Loading_txt span:nth-child(3) {
	animation-name: anim_d3;
}
@keyframes anim_d1 {
	24% {
		opacity: 0;
	}
	25% {
		opacity: 1;
	}
	99%{
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes anim_d2 {
	49% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	99%{
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes anim_d3 {
	74% {
		opacity: 0;
	}
	75% {
		opacity: 1;
	}
	99%{
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}