@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

$base-color: #28BE69;
$font-color: #006449;

h2 {
	position: relative;
	font-size: 30px;
	font-size: 3rem;
	font-weight: 400;
	color: $font-color;
	text-align: left;
	padding-top: 2.5rem;
	margin-bottom: 4rem;
	@include xs {
		font-size: 26px;
		font-size: 2.6rem;
		margin-bottom: 2rem;
	}
	&::before {
		content: "";
		border-top: solid 2.8px $base-color;
		position: absolute;
		top: 0;
		width: 123px;
		@include xs {
			width: 100px;
		}
	}
}

//in-page
#in-page {
	margin-bottom: 8rem;
	@include xs {
		margin-bottom: 6rem;
	}
	ul {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 0;
		@include lg {
			flex-wrap: wrap;
		}
		li {
			margin-left: 1em;
			letter-spacing: 0.1em;
			@include xs {
				width: 100%;
				margin-left: 2em;
			}
			span {
				color: $font-color;
			}
			a {
				color: #333;
				&:hover {
					color: $font-color;
				}
			}
		}
	}
}



//emergency
#emergency {
	padding-bottom: 10rem;
	@include xs {
		padding-bottom: 6rem;
	}
	h2 {
		@include xs {
			margin-bottom: 2rem;
		}
	}
	ol{
		list-style: none;
		counter-reset: number;
		padding: 0;
		li{
			position: relative;
			margin-bottom: 1.5em;
			h3{
				font-size: 1.8rem;
				font-size: 18px;
				color: $font-color;
				margin-bottom: 0.5em;
				line-height: normal;
				text-indent: -6rem;
				padding-left: 6rem;
				text-align: justify;
			}
			p{
				text-align: justify;
				margin: 0 0 0 3.4em;
				@include sm{
					margin: 0 0 0 6.3rem
				}
				@include xs{
					margin: 0 0 0 5.6rem;
				}
			}
		}
		li:last-child{
			text-indent: -1em;
		}
	}
}

//event-schedule,school-rules,bullying-problem,consultation-counter
#event-schedule,
#school-rules,
#bullying-problem,
#consultation-counter{
	padding-bottom: 10rem;
	@include xs {
		padding-bottom: 6rem;
	}
	h2 {
		@include xs {
			margin-bottom: 2rem;
		}
	}
}
.pdf-link{
	display: inline-block;
	border: 1px solid #80272d;
	background-color: #fff;
	color: #80272d;
	font-size: 2rem;
	font-size: 20px;
    padding: 2rem 2rem 2rem 4.5rem;
    width: 50%;
    text-indent: -2.5rem;
	@include sm {
		width: 100%;
	}
	@include xs {
		font-size: 1.6rem;
		font-size: 16px;
		padding: 1rem 1rem 1rem 3.5rem;
		text-indent: -2rem;
	}
	&::before{
		font-family: "Font Awesome 5 Free";
	  	content: "\f1c1";
	  	font-weight: 900;
	  	padding-right: 0.5em;
	  	color: #80272d;
	}
	&:hover{
		background-color: #80272d;
		color: #fff;
	}
	&:hover::before{
		color: #fff;
	}
}

//infection
#infection {
	margin-bottom: 10rem;
	h2 {
		margin-bottom: 4rem;
	}
	h3{
		font-size: 1.8rem;
		font-size: 18px;
		color: $font-color;
		margin-bottom: 0.5em;
	}
	p{
		text-align: justify;
	}
	.table-container{
		margin-top: 2em;
		h3{
			font-size: 2rem;
			font-size: 20px;
			line-height: 3rem;
			span{
				font-weight: normal;
				font-size: 1.6rem;
				font-size: 16px;
			}
		}
		h3 + div{
			overflow-x: scroll;
			border: 1px solid $font-color;
			table{
				width: 100%;
				min-width: 700px;
				border-collapse: collapse;
				tr{
					th{
						background-color: $font-color;
						color: #fff;
						border-bottom: 1px solid #fff;
						padding: 1.5rem;
						text-align: center;
						line-height: 2rem;
					}
					td{
						border-bottom: 1px solid $font-color;
						border-right: 1px solid $font-color;
						padding: 1rem;
						text-align: justify;
						line-height: 2.5rem;
					}
					th:last-child{
						border-bottom: none;
					}
					td:last-child:not(.border-point){
						border-right: none;
						width: 55%;
					}
				}
				tr:first-child{
					th:nth-child(2){
						background-color: #beebd2;
						color: $font-color;
						border-bottom: 1px solid $font-color;
						border-right: 1px solid $font-color;
						text-align: left;
					}
					th:nth-child(3){
						background-color: #beebd2;
						color: $font-color;
						border-bottom: 1px solid $font-color;
						text-align: left;
					}
				}
				tr:last-child td{
					border-bottom: none;
				}
				tr:nth-child(13) th,
				tr:nth-child(13) td + td{
					border-bottom: none!important;
				}
			}
		}
		p{
			font-size: 1.4rem;
			font-size: 14px;
			text-indent: -1em;
			padding-left: 1em;
			text-align: justify;
			line-height: 2.5rem;
			margin: 0;
		}
	}
	ul{
		margin-top: 2em;
		li{
			font-size: 1.8rem;
			font-size: 18px;
			color: $font-color;
			text-indent: -1.5em;
			padding-left: 1.5em;
			@include xs {
				font-size: 1.6rem;
				font-size: 16px;
			}
			&::before{
				content: '●';
				padding-right: 0.5em;
			}
		}
	}
	ul + div{
		margin-top: 2em;
		background: url("../../img/nav-bg.svg");
		background-repeat: repeat;
		background-size: 5%;
		padding: 2.5rem 3rem 1rem 3rem;
		h3{
			font-size: 2.5rem;
			font-size: 25px;
			font-weight: normal;
			margin-bottom: 1em;
		}
		.pdf-link{
			width: 100%;
			margin-bottom: 1rem;
		}
		p{
			font-size: 1.4rem;
			font-size: 14px;
		}
	}
}