@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;
		}
	}
}

//achievements
#achievements {
	margin-bottom: 10rem;
	.inner{
		position: relative;
		&::before{
			content: '';
			display: inline-block;
			width: 90px;
			height: 145px;
			background-image: url("../../img/footer-illust02.svg");
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center top;
			vertical-align: middle;
			position: absolute;
			right: 0;
			top: 4%;
			z-index: -1;
			@include md {
				top: 3%;
			}
			@include xs {
				top: 0;
				width: 80px;
				height: 130px;		
			}
		}
		div{
			height: 300px;
			overflow: scroll;
			border: 2px solid #beebd2;
			background-color: #e9f8f0;
			padding: 3rem;
			overflow-x: hidden;
			@include sm {
				padding: 1.5rem;
			}
			&::-webkit-scrollbar {
				width: 20px;
			}
			&::-webkit-scrollbar-track {
				margin-top: 5px;
				margin-bottom: 5px;
			}
			&::-webkit-scrollbar-thumb {
				background-color: $base-color;
				height: 60px;
				border-radius: 200px;
				border-right: 5px solid #e9f8f0;
				border-left: 5px solid #e9f8f0;
			}
			&::-webkit-scrollbar-corner{
				background-color: #e9f8f0;
			}
			h3{
				font-size: 1.8rem;
				font-size: 18px;
				font-weight: bold;
				margin-bottom: 1em;
				padding-top: 1em;
				border-top: 1px solid #aeaeae;
			}
			h3:first-of-type{
				padding-top: 0;
				border-top: none;
			}
			table{
				padding-bottom: 2rem;
				margin-bottom: 2rem;
				tr{
					border-bottom: 2px solid #e9f8f0;
					th{
						background-color: $base-color;
						color: #fff;
						padding: 0rem 1rem;
					}
					td{
						padding-left: 1em;
					}
				}
			}
			table:last-of-type{
				margin-bottom: 0;
				padding-bottom: 0;
				border: none;
			}
		}
	}
}


//achievements
.dot-pattern{
	background-image: url("../../img/nav-bg.svg");
    background-size: 48px;
    background-repeat: repeat;
}
#physical-education,#culture,#club-studygroup{
	padding-bottom: 10rem;
	.accordion {
		.accordion-item{
			margin-bottom: 2.5rem;
			.accordion-button{
				background-color: $base-color;
				color: #fff;
				font-size: 2rem;
				font-size: 20px;
				padding: 2rem;
				transition: 0.1s;
				&:hover{
					background-color: $font-color;
				}
				&:focus{
					border-color:inherit;
					box-shadow:none;
				}
				&::after {
					flex-shrink: 0;
					margin-left: auto;
					font-family: "Font Awesome 5 Free";
					content: "\f13a";
					font-weight: 900;
					font-size: 2.5rem;
					font-size: 25px;
					width: 25px;
					height: 30px;
					background-image: none;
				}
				&:not(.collapsed){
					background-color: #80272d!important;
				}
			}
			.accordion-body{
				dl{
					padding: 2.5rem 2rem 1.5rem;
						@include sm {
							padding: 1.5rem 2rem 0.5rem;
						}
					dd{
						padding-left: 2rem;
						display: flex;
						flex-direction: column;
						margin-bottom: 0;
						@include sm {
							padding: 1.5rem 0 0;
						}
						p{
							text-align: justify;
							@include sm {
								padding-bottom: 0.5rem;
							}
						}
						a{
							display: block;
							border: 1px solid $base-color;
							color: $font-color;
							text-align: center;
							padding: 1rem;
							letter-spacing: 4px;
							margin-top: auto;
							transition: 0.1s;
							&:hover{
								color: #fff;
								background-color: $base-color;
							}
							i{
								padding-left: 1em;
							}
						}
					}
				}
			}
		}
	}
}