@charset "UTF-8";
/*------------------------------------------
top header
-------------------------------------------*/
/*#top {
	color: #3C2C1D;
}*/
#top header {
	position: relative;
	padding: 106px 0 36px;
}
#top header .flex_wrapper {
	width: 100%;
	height: 767px;
	justify-content: space-around
}
@media screen and (max-width: 896px) {
	#top header .flex_wrapper {
		margin-bottom: 40px;
		position: relative;
		display: block;
		width: 100%;
		height: 767px;
		overflow: hidden;
	}
}
#top header .fv_left_contents {
	position: relative;
}
@media screen and (max-width: 896px) {
	#top header .fv_left_contents {
		position: relative;
		margin: 0 auto 30px;
		max-width: 100%;
		width: 100%;
	}
}
#top header .header_insta {
	position: absolute;
	margin: 0 auto;
	right: 0;
	left: 0;
	bottom: 0;
	width: 50px
}
@media screen and (max-width: 896px) {
	#top header .header_insta {
		position: absolute;
		margin: 0 auto;
		top: auto;
		left: auto;
		right: 10px;;
		bottom: 0;
		width: 50px;
		height: 60px;
	}
}
	
#top header .header_logo {
	margin: 0 auto;
	width: 26px;
}
#top header .firstview {
	width: 80%;
}
@media screen and (max-width: 896px) {
	#top header .firstview {
		width: 95%;
		height: 470px;
		float: right;
	}
}
#top header .firstview img {
	border-radius: 10px;
	object-position: right;
}
@media screen and (max-width: 896px) {
	#top header .firstview img {
		border-top-left-radius: 10px;
		border-top-right-radius: 0px;
		border-bottom-right-radius:0px;
		border-bottom-left-radius:10px;
	}
}
#top header .head_box_02 {
	margin-bottom: 30px;
	position: fixed;
    width: 100%;
    height: 70px;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.80);
    overflow: hidden;
}
@media screen and (max-width: 896px) {
	#top header .head_box_02 {
		margin-bottom: 30px;
		position: fixed;
		width: 100%;
		height: 50px;
		top: 0;
		left: 0;
		background: rgba(255,255,255,0.80);
		overflow: hidden;
	}
}
#top header .nav_wrapper {
	position: absolute;
	top: 0;
	right: 0;
}
/*#top header .access a {
	position: fixed;
	color: #fff;
	width: 190px;
	height: 70px;
	top: 0;
	right: 0;
	text-align: center;
	line-height: 70px;
	background: #008B35;
	z-index: 30;
}*/
#top .event_pdf {
	max-width: 960px;
	grid-template-columns: repeat(auto-fill, minmax(47%, 1fr));
}
#top .event_pdf a {
	
}


/*------------------------------------------
top news
-------------------------------------------*/
#top .news_wrapper {
	margin: 0 auto 80px;
	max-width: 960px;
	width: 100%;
	height: auto;
}
@media screen and (max-width: 896px) {
	#top .news_wrapper {
		margin: 0 auto 60px;
		max-width: 960px;
		width: 90%;
		height: auto;
		}
}
#top .news_wrapper h2 {
	margin-right: 35px;
	padding: 30px 30px 0;
	height: 50%;
	max-height: 200px;
	color: #fff;
	background: #085C28;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}
@media screen and (max-width: 896px) {
	#top .news_wrapper h2 {
		margin: 0 auto;
		padding: 10px 30px 0;
		width: 190px;
		height: 94px;
		color: #fff;
		background: #085C28;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
	}
}
#top .post_content {
	margin-bottom: 10px;
	padding: 0 20px;
	background: #FAF8F5;
	border-radius: 10px;
	font-weight: 500;
}
@media screen and (max-width: 896px) {
	#top .post_content {
		display: block;
		margin-bottom: 10px;
		padding: 0 20px;
		background: #FAF8F5;
		border-radius: 10px;
		font-weight: 500;
	}
}
@media screen and (max-width: 896px) {
	#top .post_content .text {
		padding-top: 10px;
	}
}
#infomation {
	margin: 0 auto 80px;
	max-width: 1280px;
	width: 90%;
}
#infomation .item {
	margin-bottom: 20px;
	padding: 4px 0 4px 4px;
	width: 100%;
	height: 440px;
	background: #085C28;
	border-radius: 10px;
	box-sizing: content-box;
}

@media screen and (max-width: 896px) {
	#infomation .item {
		margin-bottom: 20px;
		padding: 4px 0 4px 4px;
		width: 100%;
		height: auto;
		display: block;
		background: #085C28;
		border-radius: 10px;
		box-sizing: content-box;
	}
}
#infomation .item .photo {
	max-width: 515px;
	width: 40%;
	height: auto;
	aspect-ratio: 515/431;
}
@media screen and (max-width: 896px) {
	#infomation .item .photo {
		max-width: 100%;
		width: calc(100% - 4px);
		height: auto;
		aspect-ratio: 515/431;
	}
}
#infomation .item .photo img {
	border-radius: 10px;
}
#infomation .item .text_cont {
	padding-top: 50px;
	width: 56%;
	height: auto;
}
@media screen and (max-width: 896px) {
	#infomation .item .text_cont {
		padding-top: 50px;
		padding-bottom: 20px;
		width: 100%;
		height: auto;
	}
}
#infomation .item .text_cont a {
	color: #fff;
}
#infomation .item .text_cont h3 {
	margin-bottom: 40px;
	padding-right: 50px;
	padding-bottom: 20px;
	font-size: clamp(3.0rem, 3.5vw, 3.5rem);
	font-weight: 500;
	border-bottom: 2px solid #fff;
}
@media screen and (max-width: 896px) {
	#infomation .item .text_cont h3 {
		margin-bottom: 30px;
		margin-left: 5%;
		padding-right: 5%;
		padding-bottom: 15px;
		font-size: clamp(3.0rem, 3.5vw, 3.5rem);
		font-weight: 500;
		border-bottom: 2px solid #fff;
	}
}
#infomation .item .text_cont h3 span {
	font-family: "zen-old-mincho", sans-serif;
	font-size: 1.5rem;
	display: block;
}
#infomation .item .text_cont h3 a {
	background-position: right bottom;
}
#infomation .item .text_cont .link_lists {
	padding-right: 50px;
	font-size: 1.6rem;
	font-weight: 500;
}
@media screen and (max-width: 896px) {
	#infomation .item .text_cont .link_lists {
		margin: 0 auto;
		padding-right: 0;
		width: 90%;
		display: block;
		font-size: 1.6rem;
		font-weight: 500;
	}
}
#infomation .item .text_cont .link_lists li {
	margin-bottom: 20px;
	padding: 0 0 10px;
	width: calc(50% - 16px);
	border-bottom: 1px solid #008B35;
}
@media screen and (max-width: 896px) {
	#infomation .item .text_cont .link_lists li {
		margin-bottom: 20px;
		padding: 0 0 10px;
		width: 100%;
		border-bottom: 1px solid #008B35;
	}
}

#document_download {
	margin: 0 auto 120px;
	max-width: 1156px;
	width: 90%;
	height: auto;
}
@media screen and (max-width: 896px) {
	#document_download {
		margin: 0 auto 120px;
		max-width: 1156px;
		width: 90%;
		height: auto;
		max-height: auto;
		display: block;
	}
}
#document_download .pdf_link_box {
	padding: 30px 0 30px 30px;
	width: calc(50% - 10px);
	height: auto;
	background: #FAF8F5;
	border-radius: 10px;
}
@media screen and (max-width: 896px) {
	#document_download .pdf_link_box {
		margin-bottom: 15px;
		padding: 20px 0 20px 0;
		width: 100%;
		height: auto;
		background: #FAF8F5;
		border-radius: 10px;
		display: block;
	}
}
#document_download .pdf_link_box .photo {
	max-width: 180px;
	width: 35%;
	height: auto;
	aspect-ratio:180/254;
}

@media screen and (max-width: 896px) {
	#document_download .pdf_link_box .photo {
		margin: 0 auto;
		width: 50%;
		height: auto;
		aspect-ratio:180/254;
	}
}
#document_download .pdf_link_box .photo img {
	object-fit: contain;
	border-radius: 0px;
}
#document_download .pdf_link_box .text {
	position: relative;
	top: 50%;
	max-width: 330px;
	width: 60%;
	height: fit-content;
	transform: translateY(-50%);
}
@media screen and (max-width: 896px) {
	#document_download .pdf_link_box .text {
		padding-top: 40px;
		padding-left: 20px;
		width: 100%;
		max-width: 100%;
		height: auto;
		top: 0;
		transform: translateY(0);
	}
}
#document_download .text .title {
	margin-bottom: 20px;
	font-size: 2.2rem;
	color: #085C28;
	border-bottom: 2px solid #085C28;
	font-weight: 500;
}
#document_download .pdf_link_box .text .title .small {
	font-size: 1.6rem;
}
#document_download .pdf_link_box .text p {
	margin-bottom: 20px;
	padding-right: 40px;
	color: #5C4C3A;
	font-size: 1.4rem;
}
@media screen and (max-width: 896px) {
	#document_download .pdf_link_box .text p {
		margin-bottom: 20px;
		padding-right: 20px;
		color: #5C4C3A;
		font-size: 1.4rem;
	}
}
#document_download .document_link_box {
	width: calc(50% - 10px);
	height: auto;
}
@media screen and (max-width: 896px) {
	#document_download .document_link_box {
		width: 100%;
		height: auto;
	}
}
#document_download .document_link_box .item {
	padding: 30px 0 30px 30px;
	width: 100%;
	height: calc(50% - 10px);
	max-height: 150px;
	background: #FAF8F5;
	border-radius: 10px;
}
@media screen and (max-width: 896px) {
	#document_download .document_link_box .item {
		padding: 20px 0 20px 20px;
		width: 100%;
		height: calc(50% - 10px);
		max-height: 150px;
		background: #FAF8F5;
		border-radius: 10px;
	}
}
#document_download .document_link_box .item:first-of-type {
	margin-bottom: 20px;
}
#document_download .document_link_box .item .title {
	
}
@media screen and (max-width: 896px) {
	#document_download .document_link_box .item .title {
	font-size: 2.0rem;
	}	
}
#document_download .document_link_box .text p {
	color: #5C4C3A;
	font-size: 1.4rem;
}
#document_download .document_link_box .text a {
	padding-left: 30px;
}


/*------------------------------------------
junior-high-students
-------------------------------------------*/
#junior-high-students {
	color: #5C4C3A;
	background: #FAF8F0;
}
#junior-high-students header {
	margin-bottom: 0;
}
#junior-high-students .firstview {
	position: relative;
	background: url("../../img/subpage_header_logo_section_a_top_img.svg");
	background-size: 100% auto;
	background-position: bottom left;
	background-repeat: no-repeat;
}
@media screen and (max-width: 896px) {
	#junior-high-students .firstview {
		position: relative;
		background: none,url("../../img/subpage_header_logo_section_a_top_img.svg");
		background-size: 294px auto,100% auto;
		background-position: bottom right -18px,bottom left;
		background-repeat: no-repeat;
	}
}
#junior-high-students .firstview p {
	position: absolute;
	margin: 0 auto;
	width: 620px;
	height: auto;
	top: 50%;
	bottom: 0;
	right: 0;
	left: 0;
	font-weight: 500;
	transform: translateY(15%);
}
@media screen and (max-width: 896px) {
	#junior-high-students .firstview p {
		position: absolute;
		margin: 0 auto;
		width: 85%;
		height: auto;
		top: 50%;
		bottom: 0;
		right: 0;
		left: 0;
		font-weight: 500;
		transform: translateY(30%);
	}
}


/*---地域授業---*/
#junior-high-students #local_information {
	position: relative;
	padding: 60px 0 190px;
	background-color: #FF6F61;
	background-image: url("../../img/subpage_header_logo_section_b_top_img.svg");
	background-position: bottom -2px left;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
@media screen and (max-width: 896px) {
	#junior-high-students #local_information {
		position: relative;
		padding: 80px 0 290px;
		background-color: #FF6F61;
		background-image: url("../../img/subpage_header_logo_section_b_top_img.svg");
		background-position: bottom -2px left;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
}
#junior-high-students h2 {
	position: absolute;
	margin: 0 auto;
	width: 320px;
	height: 160px;
	top: 0;
	right: 0;
	left: 0;
	font-family: "zen-maru-gothic";
	color: #5C4C3A;
	font-size: clamp(1.8rem, 2.2vw, 2.2rem);
	line-height: 1.4;
	background: url("../../img/hello_myschool_localinfo_title.svg")center center no-repeat;
	background-size: 100% auto;
}
@media screen and (max-width: 896px) {
	#junior-high-students h2 {
		position: absolute;
		margin: 0 auto;
		width: 260px;
		height: 134px;
		top: 0;
		right: 0;
		left: 0;
		color: #5C4C3A;
		font-size: clamp(1.8rem, 2.2vw, 2.2rem);
		background: url("../../img/hello_myschool_localinfo_title.svg")top center no-repeat;
		background-size: 100% auto;
	}
}
#junior-high-students #local_information h2 {
	padding-top: 30px;
	text-align: center;
	transform: translateY(-88%);
}
@media screen and (max-width: 896px) {
	#junior-high-students #local_information h2 {
		padding-top: 25px;
		transform: translateY(-50%);
	}
}
#junior-high-students h2 span {
	font-size: clamp(3.0rem, 4.0vw, 4.0rem);
	font-weight: 900;
}
#junior-high-students h2 .red {
	color: #FF6F61;
}
#junior-high-students h2 .purple {
	color: #9370DB;
}
#junior-high-students h2 .green {
	color: #7CDE21;
}
#junior-high-students h2 .blue {
	color: #41BCFA;
}
#junior-high-students h2 .yellow {
	color: #F7C325;
}

#junior-high-students #local_information .read {
	margin: 0 auto 120px;
	max-width: 960px;
	width: 90%;
	color: #fff;
	
}
@media screen and (max-width: 896px) {
#junior-high-students #local_information .read {
	margin: 0 auto 100px;
	max-width: 960px;
	width: 90%;
	color: #fff;
	
}
}
#junior-high-students #local_information .items {
	position: relative;
	margin: 0 auto 100px;
	padding: 90px 50px 10px;
	max-width: 1156px;
	width: 90%;
	background: #fff;
	border-radius: 10px;
}
@media screen and (max-width: 896px) {
	#junior-high-students #local_information .items {
		position: relative;
		margin: 0 auto 100px;
		padding: 90px 0 10px;
		max-width: 1156px;
		width: 90%;
		background: #fff;
		border-radius: 10px;
	}
}
#junior-high-students #local_information .items .photo {
	margin-bottom: 10px;
	max-width: 330px;
	height: auto;
	aspect-ratio: 330/250;
}
@media screen and (max-width: 896px) {
	#junior-high-students #local_information .items .photo {
		margin-bottom: 10px;
		max-width: 100%;
		width: 100%;
		height: auto;
		aspect-ratio: 330/250;
	}
}
#junior-high-students #local_information .items > p {
	margin-bottom: 50px;
}
#junior-high-students #local_information .items p {
	color: #5C4C3A;
}
@media screen and (max-width: 896px) {
	#junior-high-students #local_information .items p {
		margin: 0 auto 30px;
		width: 90%;
	}
}
#junior-high-students #local_information .items .item {
	margin-bottom: 40px;
	width: calc(100%/3 - 15px)
}
@media screen and (max-width: 896px) {
	#junior-high-students #local_information .items .item {
		margin: 0 auto;
		width: 90%;
	}
}
#junior-high-students #local_information .year_01::before {
	content: url("../../img/hello_myschool_year_01_title.svg");
	position: absolute;
	margin: 0 auto;
	width: 200px;
	height: auto;
	display: block;
	top: 0;
	right: 0;
	left: 0;
	transform: translateY(-50%);
}
@media screen and (max-width: 896px) {
	#junior-high-students #local_information .year_01::before {
		content: '';
		position: absolute;
		margin: 0 auto;
		width: 150px;
		height: 100px;
		display: block;
		top: 0;
		right: 0;
		left: 0;
		background: url("../../img/sp_hello_myschool_year_01_title.svg") center top no-repeat;
		background-size: 100% auto;
		transform: translateY(-50%);
	}
}
#junior-high-students #local_information .year_02::before {
	content: url("../../img/hello_myschool_year_02_title.svg");
	position: absolute;
	margin: 0 auto;
	width: 200px;
	height: auto;
	display: block;
	top: 0;
	right: 0;
	left: 0;
	transform: translateY(-50%);
}
#junior-high-students #local_information .year_25::before {
	content: url("../../img/hello_myschool_year_2.5_title.svg");
	position: absolute;
	margin: 0 auto;
	width: 200px;
	height: auto;
	display: block;
	top: 0;
	right: 0;
	left: 0;
	transform: translateY(-50%);
}
#junior-high-students #local_information .year_03::before {
	content: url("../../img/hello_myschool_year_03_title.svg");
	position: absolute;
	margin: 0 auto;
	width: 200px;
	height: auto;
	display: block;
	top: 0;
	right: 0;
	left: 0;
	transform: translateY(-50%);
}
#junior-high-students #local_information .hidden-view {
    display: none;
}
#junior-high-students #local_information .button {
	margin: 0 auto;
	width: 160px;
	height: 46px;
	display: block;
	text-align: center;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 46px;
	line-height: 46px;
	border-radius: 10px;
	background: #FF6F61;
	transition: transform 0.3s ease;
}

#junior-high-students #local_information .button::before {
    content: "もっと見る";
}
#junior-high-students #local_information .button.open::before {
    content: "閉じる";
}

/*コース授業*/
#junior-high-students #course_lessons {
	padding: 60px 0 220px;
	background-color: #F7C325;
	background-image: url("../../img/subpage_header_logo_section_c_top_img.svg");
	background-position: bottom -2px left;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
@media screen and (max-width: 896px) {
	#junior-high-students #course_lessons {
		padding: 60px 0 140px;
		background-color: #F7C325;
		background-image: url("../../img/subpage_header_logo_section_c_top_img.svg");
		background-position: bottom -2px left;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
}
#junior-high-students #course_lessons .read {
	margin: 0 auto 60px;
	max-width: 960px;
	width: 90%;
	color: #fff;
}
@media screen and (max-width: 896px) {
	#junior-high-students #course_lessons .read {
		margin: 0 auto 60px;
		max-width: 960px;
		width: 90%;
		color: #fff;
	}
}
#junior-high-students #course_lessons {
	position: relative;
}
#junior-high-students #course_lessons h2 {
	padding-top: 25px;
	transform: translateY(-80%);
}
#junior-high-students #course_lessons .content {
	margin: 0 auto 20px;
	padding-bottom: 50px;
	max-width: 1156px;
	width: 90%;
	color: #5C4C3A;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}
#junior-high-students #course_lessons .content .column_02 {
	padding: 20px 0 0 20px;
	margin-bottom: 50px;
}
@media screen and (max-width: 896px) {
	#junior-high-students #course_lessons .content .column_02 {
		padding: 10px;
		margin-bottom: 50px;
		display: block;
	}
}
#junior-high-students #course_lessons .content .column_02 .photo {
	max-width: 480px;
	width: 44%;
	height: auto;
	aspect-ratio: 480/360;
}
@media screen and (max-width: 896px) {
	#junior-high-students #course_lessons .content .column_02 .photo {
		max-width: 100%;
		width: 100%;
		height: auto;
		aspect-ratio: 480/360;
	}
}
#junior-high-students #course_lessons .content .column_02 .photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 480/360;
	border-radius: 10px;
}
#junior-high-students #course_lessons .content .column_02 .text {
	padding-top: 10px;
	max-width: 616px;
	width: 54%;
}
@media screen and (max-width: 896px) {
	#junior-high-students #course_lessons .content .column_02 .text {
		padding-top: 10px;
		max-width: 100%;
		width: 100%;
	}
}
#junior-high-students #course_lessons .content .column_02 .text .subtitle {
	font-weight: 500;
}
#junior-high-students #course_lessons .content .column_02 h3 {
	margin-bottom: 25px;
	width: 100%;
	 font-family: "zen-maru-gothic";
	font-size: 4.0rem;
	font-weight: 900;
}
@media screen and (max-width: 896px) {
	#junior-high-students #course_lessons .content .column_02 h3 {
		margin-bottom: 25px;
		width: 100%;
		text-align: center;
		font-family: "zen-maru-gothic";
		font-size: 3.2rem;
		font-weight: 900;
	}
}
#junior-high-students #course_lessons .content .column_02 h3 span {
	font-size: 2.5rem;
	font-weight: 900;
}
@media screen and (max-width: 896px) {
	#junior-high-students #course_lessons .content .column_02 h3 span {
		display: block;
		font-size: 2.5rem;
		font-weight: 900;
	}
}
#junior-high-students #course_lessons .content .column_02 .text p {
	padding-right: 50px;
	color: #5C4C3A;
	line-height: 1.9;
	font-weight: 600;
}
@media screen and (max-width: 896px) {
	#junior-high-students #course_lessons .content .column_02 .text p {
		padding-right: 0;
		color: #5C4C3A;
		line-height: 1.9;
		font-weight: 600;
	}
}
#junior-high-students #course_lessons .content .items {
	margin: 0 auto 50px;
	max-width: 1056px;
	width: 90%;
}
#junior-high-students #course_lessons .content .items .item {
	width: calc(100%/3 - 15px);
}
@media screen and (max-width: 896px) {
	#junior-high-students #course_lessons .content .items .item {
		width:100%;
	}
}
#junior-high-students #course_lessons .content .items .item .photo {
	max-width: 332px;
	width: 100%;
	height: auto;
	aspect-ratio: 332/250;
}
@media screen and (max-width: 896px) {
	#junior-high-students #course_lessons .content .items .item .photo {
		margin-bottom: 10px;
		max-width: 100%;
		width: 100%;
		height: auto;
		aspect-ratio: 332/250;
	}
}
#junior-high-students #course_lessons .content .items .item p {
	font-size: 1.3rem;
}
@media screen and (max-width: 896px) {
	#junior-high-students #course_lessons .content .items .item p {
		margin-bottom: 30px;
		font-size: 1.3rem;
	}
}
#junior-high-students #course_lessons .content .interview {
	margin: 0 auto 50px;
	padding: 40px;
	max-width: 1054px;
	width: 90%;
	height: auto;
}
@media screen and (max-width: 896px) {
	#junior-high-students #course_lessons .content .interview {
		margin: 0 auto 50px;
		padding: 0;
		max-width: 100%;
		flex-flow: row-reverse wrap-reverse;
		width: 90%;
		height: auto;
	}
}
#junior-high-students #course_lessons .content .interview .photo {
	max-width: 280px;
	width: 30%;
	height: auto;
	aspect-ratio: 280/320;
}
@media screen and (max-width: 896px) {
	#junior-high-students #course_lessons .content .interview .photo {
		margin-bottom: 40px;
		max-width: 100%;
		width: 100%;
		height: auto;
		aspect-ratio: 280/320;
	}
}
#junior-high-students #course_lessons .content .interview .photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 280/320;
	border-radius: 10px;
}
#junior-high-students #course_lessons .content .interview .text {
	padding-top: 20px;
	/*max-width: 654px;
	width: 67%;*/
	height: auto;
}
@media screen and (max-width: 896px) {
	#junior-high-students #course_lessons .content .interview .text {
		margin-bottom: 30px;
		padding-top: 20px;
		max-width: 100%;
		width: 100%;
		height: auto;
	}
}
#junior-high-students #course_lessons .content .interview .text .erea_title {
	margin-bottom: 20px;
	letter-spacing: 1.0px;
	font-size: 1.8rem;
	font-weight: 600;
}
#junior-high-students #course_lessons .content .interview .text .catch_copy {
	font-family: "zen-maru-gothic";
	letter-spacing: 0.2px;
	font-size: 2.5rem;
	font-weight: 700;
}
#junior-high-students #course_lessons .content .interview .text .name {
	margin-bottom: 20px;
	font-family: "zen-maru-gothic";
	font-size: 2.0rem;
	font-weight: 600;
}
#junior-high-students #course_lessons .content .interview .text .school_name {
	font-family: "zen-kaku-gothic-antique";
	font-size: 1.4rem;
	font-weight: 500;
}
#junior-high-students #course_lessons .content .interview .text {
	font-size: 1.5rem;
	letter-spacing: 0.2px;
}


/*--more botton--*/
#junior-high-students #course_lessons .hidden-view {
    display: none;
}
#junior-high-students #course_lessons .hidden-view.open {
    display: block;
	transition: 0.6s;
}
#junior-high-students #course_lessons .button {
	margin: 0 auto;
	width: 160px;
	height: 46px;
	display: block;
	text-align: center;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 46px;
	border-radius: 23px;
	transition: transform 0.3s ease;
}

#junior-high-students #course_lessons .button::before {
    content: "＋ OPEN";
}
#junior-high-students #course_lessons .button.open::before {
    content: "－ CLOSE";
}

/*color設定*/
#junior-high-students #course_lessons .content.green .column_02 h3 {
	color: #7CDE21;
	border-bottom: 4px dotted #7CDE21;
}
#junior-high-students #course_lessons .content.brue .column_02 h3 {
	color: #41BCFA;
	border-bottom: 4px dotted #41BCFA;
}
#junior-high-students #course_lessons .content.purple .column_02 h3 {
	color: #9370DB;
	border-bottom: 4px dotted #9370DB;
}
#junior-high-students #course_lessons .content.green .button {
	background: #7CDE21;
}
#junior-high-students #course_lessons .content.brue .button {
	background: #41BCFA;
}
#junior-high-students #course_lessons .content.purple .button {
	background: #9370DB;
}
#junior-high-students #course_lessons .content.green .interview {
	border-top: 4px dotted #7CDE21;
	border-bottom: 4px dotted #7CDE21;
}
#junior-high-students #course_lessons .content.brue .interview {
	border-top: 4px dotted #41BCFA;
	border-bottom: 4px dotted #41BCFA;
}
#junior-high-students #course_lessons .content.purple .interview {
	border-top: 4px dotted #9370DB;
	border-bottom: 4px dotted #9370DB;
}
#junior-high-students #course_lessons .content.green .interview .erea_title {
	color: #7CDE21;
}
#junior-high-students #course_lessons .content.brue .interview .erea_title {
	color: #41BCFA;
}
#junior-high-students #course_lessons .content.purple .interview .erea_title {
	color: #9370DB;
}


#junior-high-students #hello_myscholl_news {
	margin: 0 auto;
	padding-top: 30px;
	max-width: 960px;
	width: 90%;
	height: auto;
}
#junior-high-students #hello_myscholl_news h3 {
	position: relative;
	margin-bottom: 30px;
	padding: 15px 20px 30px;
	color: #fff;
	font-size: 2.5rem;
	font-size: clamp(2.0rem, 2.5vw, 2.5rem);
	font-weight: 700;
	background: #5C4C3A;
	border-radius: 20px;
	box-sizing: border-box;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}
@media screen and (max-width: 896px) {
	#junior-high-students #hello_myscholl_news h3 {
		position: relative;
		margin-bottom: 30px;
		padding: 13px 10px 20px;
		color: #fff;
		font-weight: 700;
		background: #5C4C3A;
		border-radius: 10px;
		box-sizing: border-box;
		box-shadow: 0 3px 6px rgba(0,0,0,0.16);
	}
}
#junior-high-students #hello_myscholl_news h3::after {
	content: "";
	position: absolute;
	margin: 0 auto;
	width: calc(100% - 40px);
	height: 4px;
	right: 0;
	left: 0;
	bottom: 20px;
	border-bottom: 4px dotted #fff;
}
@media screen and (max-width: 896px) {
	#junior-high-students #hello_myscholl_news h3::after {
		content: "";
		position: absolute;
		margin: 0 auto;
		width: calc(100% - 20px);
		height: 4px;
		right: 0;
		left: 0;
		bottom: 10px;
		border-bottom: 4px dotted #fff;
	}
}
#junior-high-students #hello_myscholl_news > p {
	margin-bottom: 30px;
	padding-left: 20px;
}
@media screen and (max-width: 896px) {
	#junior-high-students #hello_myscholl_news > p {
		margin-bottom: 30px;
		padding-left: 0px;
	}
}
#junior-high-students #hello_myscholl_news .items {
}
#junior-high-students #hello_myscholl_news .item {
	position: relative;
	margin-bottom: 40px;
	padding: 20px 40px 30px 40px;
	color: #5C4C3A;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}
@media screen and (max-width: 896px) {
	#junior-high-students #hello_myscholl_news .items {
	}
	#junior-high-students #hello_myscholl_news .item {
		position: relative;
		margin-bottom: 40px;
		padding: 5px 20px 10px 20px;
		color: #5C4C3A;
		background: #fff;
		border-radius: 20px;
		box-shadow: 0 3px 6px rgba(0,0,0,0.16);
	}
}
#junior-high-students #hello_myscholl_news .item .year_month {
	font-family: "zen-maru-gothic";
	color: #5C4C3A;
	font-size: 5.0rem;
	font-weight: 900;
}
@media screen and (max-width: 896px) {
	#junior-high-students #hello_myscholl_news .item .year_month {
		font-family: "zen-maru-gothic";
		color: #5C4C3A;
		font-size: 5.0rem;
		font-size: clamp(4.6rem, 5.6vw, 5.0rem);
		font-weight: 900;
	}
}
#junior-high-students #hello_myscholl_news .item .year_month span {
	font-size: 2.5rem;
}
#junior-high-students #hello_myscholl_news .item.close .year_month {
	margin-bottom: 15px;
	max-width: 320px;
	width: 36%;
	align-self: flex-start;
	opacity: 0.4;
}
@media screen and (max-width: 896px) {
	#junior-high-students #hello_myscholl_news .item.close .year_month {
		max-width: 100%;
		width: 100%;
		align-self: flex-start;
		opacity: 0.4;
	}
}
#junior-high-students #hello_myscholl_news .item .close_text,
#junior-high-students #hello_myscholl_news .item.close .close_text {
	position: absolute;
	color: #E60000;
	top: 50%;
	transform: translateY(-50%);
}
@media screen and (max-width: 896px) {
	#junior-high-students #hello_myscholl_news .item .close_text,
	#junior-high-students #hello_myscholl_news .item.close .close_text {
		position: relative;
		color: #E60000;
		top: 0;
		transform: translateY(0);
	}
}
#junior-high-students #hello_myscholl_news .item .content {
	position: relative;
	max-width: 530px;
	width: 60%;
}
@media screen and (max-width: 896px) {
	#junior-high-students #hello_myscholl_news .item .content {
		position: relative;
		max-width: 100%;
		width: 100%;
	}
}
#junior-high-students #hello_myscholl_news .item .head_line {
	margin-bottom: 15px;
	font-size: 1.8rem;
	font-weight: 700;
	border-bottom: 2px solid #BDB6AF;
}
#junior-high-students #hello_myscholl_news .item dl {
	margin-bottom: 10px;
	display: flex;
	font-weight: 700;
	letter-spacing: 0.2px;
}
#junior-high-students #hello_myscholl_news .item dt {
	margin-right: 10px;
	padding: 0 15px;
	min-width: 156px;
	color: #fff;
	font-size: 1.4rem;
	line-height: 34px;
	background: #5C4C3A;
	border-radius: 10px;
	box-sizing: border-box;
}
#junior-high-students #hello_myscholl_news .item dd {
	color: #5C4C3A;
	font-size: 2.4rem;
	line-height: 34px;
}
#junior-high-students #hello_myscholl_news .item ul {
	font-size: 1.5rem;
}
#junior-high-students #hello_myscholl_news .item ul li {
	position: relative;
	display: flex;
}
#junior-high-students #hello_myscholl_news .item ul li::before {
	content: '●';
	margin-right: 6px;
	display: inline-block;
	font-size: 8px;
	align-items: center;
	align-self: center;
}
@media screen and (max-width: 896px) {
	#junior-high-students #hello_myscholl_news .item ul li::before {
		content: '●';
		margin-right: 6px;
		padding-top: 6px;
		display: inline-block;
		font-size: 8px;
		align-items: flex-start;
		align-self: flex-start;
	}
}
#junior-high-students .gallery  {
	margin: 0 auto 120px;
	max-width: 960px;
	width: 90%;
}
#junior-high-students .gallery h3 {
	margin-bottom: 20px;
	color: #5C4C3A;
	font-size: 1.8rem;
	font-weight: 700;
	border-bottom: 2px solid #BDB6AF;
}
#junior-high-students .gallery .items {
	margin-bottom: 50px;
	display: flex;
	justify-content: space-between;
}
@media screen and (max-width: 896px) {
	#junior-high-students .gallery .items {
		margin-bottom: 50px;
		display: block;
		justify-content: space-between;
	}
}
#junior-high-students .gallery .items .item {
	max-width: 316px;
	width: calc(100%/3 - 6px);
	height: auto;
	aspect-ratio: 316/240;
}
@media screen and (max-width: 896px) {
	#junior-high-students .gallery .items .item {
		margin-bottom: 10px;
		max-width: 100%;
		width: 100%;
		height: auto;
		aspect-ratio: 316/240;
	}
}
#junior-high-students .pdf_download {
	padding: 40px 40px 40px;
	height: 448px;
	display: flex;
	justify-content: space-between;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}
@media screen and (max-width: 896px) {
	#junior-high-students .pdf_download {
		padding: 40px 20px 40px;
		height: auto;
		display: block;
		justify-content: space-between;
		background: #fff;
		border-radius: 20px;
		box-shadow: 0 3px 6px rgba(0,0,0,0.16);
	}
}
#junior-high-students .pdf_download .photo {
	margin: 0 auto;
	width: 246px;
	height: auto;
	aspect-ratio:246/349;
}
@media screen and (max-width: 896px) {
	#junior-high-students .pdf_download .photo {
		width: 170px;
		height: auto;
		aspect-ratio:246/349;
	}
}
#junior-high-students .pdf_download .text {
	max-width: 564px;
	width: 66%;
	height: auto;
	align-self: center;
}
@media screen and (max-width: 896px) {
	#junior-high-students .pdf_download .text {
		max-width: 100%;
		width: 100%;
		height: auto;
		align-self: center;
	}
}
#junior-high-students .pdf_download .text h3 {
	margin-bottom: 30px;
	font-size: 2.5rem;
	font-size: clamp(2.0rem, 2.5vw, 2.5rem);
	border-bottom: none;
}
#junior-high-students .pdf_download .text p {
	margin-bottom: 30px;
	font-weight: 700;
	color: #5C4C3A;
}
#junior-high-students .pdf_download .text a {
	padding-left: 60px;
	width: 280px;
	height: 60px;
	line-height: 60px;
	color: #fff;
	font-weight: 700;
	border-radius: 10px;
	background: #B26207 url("../../img/white_download_icon.svg")center left 20px no-repeat;
}
@media screen and (max-width: 896px) {
	#junior-high-students .pdf_download .text a {
		margin: 0 auto;
		padding-left: 60px;
		width: 280px;
		height: 60px;
		line-height: 60px;
		color: #fff;
		font-weight: 700;
		border-radius: 10px;
		background: #B26207 url("../../img/white_download_icon.svg")center left 20px no-repeat;
	}
}

/*------------------------------------------
キャラクターの吹き出し
-------------------------------------------*/
#junior-high-students #character_fixed {
	position: fixed;
	top: auto;
	bottom: 10%;
	right: -18px;
	width: 180px;
	height: auto;
	z-index: 99;
}
#junior-high-students .character-bubble {
	position: absolute;
	bottom: 100%; /* キャラクターの画像の上に配置 */
	left: 10%;
	transform: translateX(-50%) translateY(10px); /* 中央寄せ＆少し下げる（アニメーション待機位置） */
	background: #fff;
	border: 3px solid #5C4C3A; /* 全体の文字色と同じ茶色 */
	border-radius: 15px;
	padding: 15px 20px;
	width: max-content; /* テキストの長さに合わせる */
	max-width: 250px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease; /* ふわっと動かす */
	text-align: center;
	z-index: 100;
}

/* スクロールして表示される時に付与されるクラス */
#junior-high-students .character-bubble.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(-10px); /* ふわっと浮き上がる */
}

/* 吹き出しのしっぽ（内側の白） */
#junior-high-students .character-bubble::after {
	content: "";
	position: absolute;
	bottom: -12px;
	left: 50%;
	transform: translateX(-50%);
	border-width: 12px 12px 0;
	border-style: solid;
	border-color: #fff transparent transparent transparent;
	z-index: 2;
}

/* 吹き出しのしっぽ（外側の線） */
#junior-high-students .character-bubble::before {
	content: "";
	position: absolute;
	bottom: -16px;
	left: 50%;
	transform: translateX(-50%);
	border-width: 14px 14px 0;
	border-style: solid;
	border-color: #5C4C3A transparent transparent transparent;
	z-index: 1;
}

#junior-high-students #bubble_text {
	color: #5C4C3A;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.5;
}

/* スマホ用の微調整 */
@media screen and (max-width: 896px) {
	#junior-high-students .character-bubble {
		padding: 10px 15px;
		max-width: 200px;
	}
	#junior-high-students #bubble_text {
		font-size: 1.3rem;
	}
}
/*------------------------------------------
  キャラクターをスクロール時だけ出すCSS
-------------------------------------------*/
#junior-high-students #character_fixed {
	transform: translateX(180%); /* デフォルトは画面の右外に隠しておく */
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); /* ふわっとスムーズに動く魔法 */
}

/* スクロール中にJSで付与されるクラス */
#junior-high-students #character_fixed.show-character {
	transform: translateX(0); /* 画面内にひょっこり現れる！ */
}


/*------------------------------------------
about
-------------------------------------------*/
.sub_page main {
	margin-bottom: 120px;
}


/*------------------------------------------
about
-------------------------------------------*/
.sub_page .read_img img {
	border-radius: 10px;
}
.sub_page .read_text {
	margin: 0 auto 60px;
	max-width: 764px;
	width: 80%;
	font-size: 1.8rem;
	line-height: 2.0;
}
@media screen and (max-width: 896px) {
	.sub_page .read_text {
		margin: 0 auto 60px;
		max-width: 100%;
		width: 100%;
		font-size: 1.8rem;
		line-height: 2.0;
	}
}


/*------------------------------------------
学校長挨拶・ブログ
-------------------------------------------*/
.sub_page#principal,
.principal_blog-template-default.sub_page {
	line-height: 1.9;
}
.principal_blog-template-default.sub_page header {
	margin-bottom: 60px;
	position: relative;
	border-bottom: 5px solid #F0EDDF;
}
.sub_page .blog_title {
	margin-bottom: 25px;
}
@media screen and (max-width: 896px) {
	.sub_page .blog_title {
		display: block;
		margin-bottom: 25px;
	}
}
.sub_page .blog_title::after {
	content: '';
	position: absolute;
	margin: 0 auto;
	max-width: 960px;
	width: 90%;
	height: 5px;
	right: 0;
	left: 0;
	bottom: -5px;
	display: block;
	border-bottom: 5px solid #085C28;
}
@media screen and (max-width: 896px) {
	.sub_page .blog_title::after {
		content: '';
		position: absolute;
		margin: 0 auto;
		max-width: 960px;
		width: 100%;
		height: 5px;
		right: 0;
		left: 0;
		bottom: -5px;
		display: block;
		border-bottom: 5px solid #085C28;
	}
}
.sub_page .blog_title .text {
	max-width: 380px;
	width: 42%;
	align-self: center;
}
@media screen and (max-width: 896px) {
	.sub_page .blog_title .text {
		margin-bottom: 20px;
		max-width: 100%;
		width: 100%;
		align-self: center;
	}
}
.sub_page .blog_title .text .single_title {
	margin: 0;
	color: #085C28;
	font-size: 1.8rem;
	font-weight: 700;
}
.sub_page .blog_title .text h1 {
	font-size: clamp(2.0rem, 2.3vw, 2.3rem); 
	font-weight: 700;
}
.sub_page .blog_title .photo {
	max-width: 540px;
	width: 55%;
	height: auto;
	aspect-ratio: 540/360;
	
}
@media screen and (max-width: 896px) {
	.sub_page .blog_title .photo {
		max-width: 100%;
		width: 100%;
		height: auto;
		aspect-ratio: 540/360;

	}
}
@media screen and (max-width: 896px) {
	.sub_page#principal .contents .u-flex_rw_s-bet {
		display: block;
	}
}
.sub_page#principal .contents .photo {
	width: 35%;
	height: auto;
	aspect-ratio: 1/1;
	align-self: flex-start;
	text-align: center;
}
@media screen and (max-width: 896px) {
	.sub_page#principal .contents .photo {
		margin: 0 auto 30px;
		width: 80%;
		height: auto;
		align-self: flex-start;
		text-align: center;
	}
}
.sub_page#principal .contents .photo img {
	margin-bottom: 15px;
	border-radius: 10px;
}
.sub_page#principal .contents .photo .school_name {
	font-size: 1.4rem;
}
.sub_page#principal .contents .photo .principal_name {
	font-size: 2.4rem;
}
sub_page#principal .contents .photo img {
	width: 100%;
	height: auto;
	 aspect-ratio: 352/352;
}
.sub_page#principal .contents .content_text {
	width: 60%;
	font-weight: 700;
	text-align: justify;
	text-justify: inter-ideograph;
}
@media screen and (max-width: 896px) {
	.sub_page#principal .contents .content_text {
		width: 100%;
	}
}
.sub_page .principal_blog_list {
	margin: 0 auto 70px;
	padding: 50px 0;
	max-width: 1060px;
	width: 100%;
	background: #FAF8F5;
	border-radius: 10px;
}
.sub_page .principal_blog_list .items {
	margin: 0 auto;
	max-width: calc(100% - 100px);
	width: 90%;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 27px;
}
@media screen and (max-width: 768px) {
	.sub_page .principal_blog_list .items {
		margin: 0 auto;
		max-width: 90%;
		width: 90%;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: 27px;
	}
}
.sub_page .principal_blog_list .item {
	margin-bottom: 20px;
	padding-bottom: 15px;
	width: 100%;
	border-bottom: 2px solid #D4D0BC;
}
/*.sub_page .principal_blog_list .item:nth-of-type(3n) {
	margin-right: 0px;
}*/
.sub_page .principal_blog_list .item .photo {
	margin-bottom: 10px;
	max-width: 100%;
	height: auto;
}
.sub_page .principal_blog_list .item .photo img {
	border-radius: 10px;
}
.sub_page .principal_blog_list .item .year_month_day {
	margin-bottom: 5px;
	color: #222222;
	font-size: 1.5rem;
}
.sub_page .principal_blog_list .item .text {
	color: #085C28;
	font-size: 1.5rem;
}
.sub_page .principal_blog_list .more_disp {
	margin: 0 auto;
	width: 240px;
	height: 46px;
}
/*------------------------------------------
校長ブログページ
-------------------------------------------*/
.principal_blog-template-default p img {
 /* margin: 0 auto; */
    width: 50%;
    height: auto;
    aspect-ratio: 17 / 12;
    object-position: center;
    display: block;

}

/*------ページャー--------*/
/*------------------------------------------
  記事詳細：前後記事ナビゲーション
-------------------------------------------*/
.post_nav_wrapper {
	display: flex;
	justify-content: space-between;
	background: #FAF8F5;
	border-radius: 10px;
	padding: 30px;
	gap: 20px;
}
.post_nav_wrapper > a {
	display: flex;
	width: 49%;
	align-items: center;
	text-decoration: none;
	transition: opacity 0.3s ease;
}
.post_nav_wrapper > a:hover {
	opacity: 0.6;
}
.nav_prev {
	justify-content: flex-start;
	text-align: left;
}
.nav_next {
	justify-content: flex-end;
	text-align: left; /* テキスト自体は左揃えが綺麗です */
}
.nav_empty {
	width: 48%;
}

.nav_text {
	overflow: hidden;
	flex: 1;
}
.nav_prev .nav_text {
	padding-right: 20px;
}
.nav_next .nav_text {
	padding-left: 20px;
}
.nav_prev .nav_text .nav_date {
	float: right;
}
.nav_date {
	font-size: 1.3rem;
	margin-bottom: 5px;
}
.nav_title {
	padding-bottom: 10px;
	font-size: 1.5rem;
	font-weight: 500;
	color: #085C28;
	margin-bottom: 15px;
	line-height: 1.6;
	border-bottom: 2px solid #D4D0BC;
	clear: both;
}
.nav_link_text {
	font-size: 1.4rem;
	font-weight: 500;
	color: #085C28;
}
.nav_prev .nav_text .nav_link_text::before {
	content: '';
	margin-right: 10px;
	display: inline-block;
	width: 16px;
	height: 10px;
	background: url("../../img/btn_item_green.svg") no-repeat center center;
	background-size: 100% auto;
	transform: rotate(180deg);
}
.nav_next .nav_text .nav_link_text {
	float: right;
}
.nav_next .nav_text .nav_link_text::after {
	content: '';
	margin-left: 10px;
	display: inline-block;
	width: 16px;
	height: 10px;
	background: url("../../img/btn_item_green.svg") no-repeat center center;
	background-size: 100% auto;
}

.nav_thumb {
	width: 180px;
	height: auto;
	aspect-ratio: 180/120;
	flex-shrink: 0;
}
.nav_thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

/* 一覧へ戻るボタン */
.back_to_list_wrap {
	display: flex;
	justify-content: center;
}
.btn_back_list {
	display: inline-flex;
	padding-left: 20px;
	width: 240px;
	height: 46px;
	background-color: #FAF8F5;
	border: 1px solid #F0EDDF;
	border-radius: 10px;
	font-size: 1.5rem;
	line-height: 46px;
	font-weight: 500;
	color: #085C28;
	text-decoration: none;
	transition: all 0.3s ease;
}
.btn_back_list::before {
	content: '';
	display: inline-block;
	align-self: center;
	width: 16px;
	height: 10px;
	margin-right: 15px;
	background: url("../../img/btn_item_green.svg") no-repeat center center;
	background-size: contain;
}
.btn_back_list:hover {
	opacity: 0.6;
}

/* スマホ対応 */
@media screen and (max-width: 896px) {
	.post_nav_wrapper {
		flex-direction: column;
		padding: 20px;
		gap: 20px;
	}
	.post_nav_wrapper > a, .nav_empty {
		width: 100%;
	}

}


/*------------------------------------------
history
-------------------------------------------*/
#history #school_histry {
	margin-bottom: 60px;
}
#history .contents dl {
	display: flex;
	align-self: flex-start;
	margin-bottom: 25px;
}
@media screen and (max-width: 768px) {
	#history .contents dl {
		display: block;
		align-self: flex-start;
		margin-bottom: 25px;
	}
}
#history .contents dl dt,
#history .contents dl dd {
	padding-bottom: 15px;
}
#history .contents dl dt {
	padding-right: 15px;
	width: fit-content;
	min-width: 175px;
	line-height: 1.0;
	color: #085C28;
	font-family: "zen-old-mincho", sans-serif;
	font-weight: 300;
	border-bottom: 2px solid #085C28;
	
}
@media screen and (max-width: 768px) {
	#history .contents dl dt {
		margin-bottom: 20px;
		padding-right: 15px;
		width: fit-content;
		line-height: 1.0;
		color: #085C28;
		font-family: "zen-old-mincho", sans-serif;
		font-weight: 300;
		border-bottom: 2px solid #085C28;

	}
}
#history .contents dl dt b {
	margin: 0;
	display: inline-block;
	font-size: 2.5rem;
}
#history .contents dl dd {
	width: 70%;
	display: block;
	border-bottom: 2px solid #D4D0BC;
}
@media screen and (max-width: 768px) {
	#history .contents dl dd {
		width: 100%;
		display: block;
		border-bottom: 2px solid #D4D0BC;
	}
}
#history .contents dl dd div {
	position: relative;
	display: flex;
}
#history .contents dl dd div:first-child {
	margin-bottom: 8px;
}
#history .contents dl dd div::before {
	content: '■';
	margin-right: 6px;
	font-size: 5px;
	color: #085C28;
	display: inline-block;
	align-self: center;
}

#history .contents  #school_song {
	margin-bottom: 60px;
}
#history .contents  #school_song .school_song_img {
	padding: 0 40px;
	margin-bottom: 60px;
	display: flex;
	flex-flow: row-reverse wrap-reverse;
	justify-content: space-between;
}
#history .contents  #school_song .school_song_img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
#history .contents  #school_song .school_song_img div:first-child {
	width: 110px;
}
#history .contents  #school_song .school_song_img div:nth-of-type(2n), 
#history .contents  #school_song .school_song_img div:last-of-type {
	width: 320px;
}
@media screen and (max-width: 768px) {
	#history .contents  #school_song .school_song_img {
		display: flex;
		flex-flow:  row-reverse wrap;
		justify-content: center;
	}
	#history .contents  #school_song .school_song_img div {
		margin-bottom: 40px;
	}
	#history .contents  #school_song .school_song_img div:nth-of-type(2n), 
	#history .contents  #school_song .school_song_img div:last-of-type {
		max-width: 360px;
		width: 100%;
		height: auto;
	}
}
#history .contents  #school_emblem {}
@media screen and (max-width: 768px) {
	#history .contents  #school_emblem .u-flex_rw_s-bet {
		display: block;
	}
}
#history .contents #school_emblem .school_song_img {
	max-width: 160px;
	width: 20%;
}
@media screen and (max-width: 768px) {
	#history .contents #school_emblem .school_song_img {
		margin: 0 auto 30px;
		width: 200px;
	}
}
#history .contents #school_emblem .text {
	width: 76%
}
@media screen and (max-width: 768px) {
	#history .contents #school_emblem .text {
		width: 100%
	}
}	
#history #school_song .music_play {
	margin: 0 auto;
	padding-left: 65px;
	width: 280px;
	height: 70px;
	line-height: 70px;
	border: 1px solid #D4D0BC;
	border-radius: 10px;
	background: #FAF8F5 url("../../img/speaker_icon.svg")left 24px center no-repeat;
}

/*------------------------------------------
学校目標 school-mission
-------------------------------------------*/
#school-mission .goal .item {
	margin: 0 auto 40px;
	max-width: 590px;
	width: 80%;
}
@media screen and (max-width: 768px) {
	#school-mission .goal .item {
		margin: 0 auto 40px;
		max-width: 590px;
		width: 100%;
	}
}
#school-mission .read_title {
	text-align: center;
	color: #085C28;
	font-size: 33px;
}
#school-mission .goal_content {
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 13%;
	background: #FAF8F5;
	border-radius: 10px;
}
@media screen and (max-width: 768px) {
	#school-mission .goal_content {
		padding-top: 30px;
		padding-bottom: 30px;
		padding-left: 0;
		background: #FAF8F5;
		border-radius: 10px;
	}
}
#school-mission dl {
	position: relative;
	display: flex;
	align-self: center;
}
@media screen and (max-width: 768px) {
	#school-mission dl {
		position: relative;
		margin: 0 auto 25px;
		width: 80%;
		display: block;
		text-align: center;
		align-self: center;
	}
}
#school-mission dt,
#school-mission dd {
	align-self: center;
}
#school-mission dt {
	color: #085C28;
	font-size: 3.0rem;
	font-weight: 700;
	display: flex;
}
@media screen and (max-width: 768px) {
	#school-mission dt {
		margin-bottom: 10px;
		color: #085C28;
		text-align: center;
		font-size: 3.0rem;
		font-weight: 700;
		display: block;
	}
}
#school-mission dt::after {
	content: '';
	margin: 0 20px;
	display: inline-block;
	width: 40px;
	height: 2px;
	background: #085C28;
	transform: scaleY(0.5);
	align-self: center;
}
@media screen and (max-width: 768px) {
	#school-mission dt::after {
		content: '';
		margin: 0 auto;
		margin-top: 8px;
		display: block;
		width: 40px;
		height: 2px;
		background: #085C28;
		transform: scaleY(0.5);
		align-self: center;
	}
}
#school-mission dd {
	font-size: 2.0rem;
}
#school-mission .pdf_link {
	max-width: 770px;
}

/*------------------------------------------
生徒指導 student-guidance
-------------------------------------------*/
@media screen and (max-width: 768px) {
	#student_guidance .pdf_link a, 
	#student_guidance .event_pdf a {
		padding-left: 60px;
		width: 100%;
		font-size: 1.4rem;
		letter-spacing: -0.1px;
		background-position: left 20px center, right 20px center;
	}
}
#student_guidance .pdf_link {
	max-width: 770px;
}

/*------------------------------------------
進路実績 career
-------------------------------------------*/
#career-results #message {
	margin-bottom: 60px;
}
#career-results #career_achieve .contents_wrapper {
	margin-bottom: 40px;
}

#career-results #career_achieve .contents_wrapper .content {
	margin-bottom: 10px;
	padding: 40px;
	background: #FAF8F5;
	border-radius: 10px;
}
/*--------コンテンツエリア------*/
.student-grid {
	margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.student-card {
	padding-bottom: 10px;
    background: #fff;
    cursor: pointer; 
    transition: opacity 0.3s;
}

.student-card:hover {
    opacity: 0.8; 
}

/* 画像部分 */
.card-image {
	width: 100%;
	height: auto;
	aspect-ratio: 1/1;
}
.card-image img {
	margin-bottom: 15px;
    width: 100%;
    height: auto;
	aspect-ratio: 1/1;
    border-radius: 10px;
    display: block;
}

/* テキスト部分 */
.card-course {
    font-size: 1.4rem;
    margin: 0 0 5px 0;
    font-weight: bold;
}

.card-name {
    font-size: 2.5rem;
	font-weight: 700;
    color: #085C28; /* 緑色 */
    margin: 0 0 5px 0;
}

.card-name .suffix {
    font-size: 1.5rem;
	font-weight: 700;
    margin-left: 5px;
    color: #085C28; 
}

.card-year {
	margin: 0 0 15px 0;
    font-size: 1.4rem;
    color: #222;
   
}

/* 下線 */
.card-border {
    width: 100%;
    height: 1px;
    background-color: #D4D0BC;
}


/* --- 2. モーダルのデザイン (前回と同様) --- */
.modal-overlay {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box; /* 重要 */
}

.modal-content {
	position: absolute;
	margin: 0 auto;
	top: 50%;
	right: 0;
	left: 0;
    background-color: #fff;
    width: 90%;
    max-width: 960px;
	height: auto;
    border-radius: 10px;
    padding: 60px 40px 60px;
    animation: fadeIn 0.3s;
    box-sizing: border-box;
	transform: translateY(-50%);
}
@media screen and (max-width: 896px) {
	.modal-content {
		position: absolute;
		margin: 0 auto;
		top: 0;
		right: 0;
		left: 0;
		background-color: #fff;
		width: 90%;
		max-width: 960px;
		height: auto;
		border-radius: 10px;
		padding: 60px 40px 60px;
		animation: fadeIn 0.3s;
		box-sizing: border-box;
		transform: translateY(0);
	}
}
@keyframes fadeIn {
    from { 
		opacity: 0; 
		transform: translateY(-10px); 
	}
    to { opacity: 1;
		transform: translateY(0);
	}
}

.close-btn {
    color: #999;
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 40px;
    font-weight: lighter;
    cursor: pointer;
    line-height: 1;
}

.modal-body {
    display: flex;
    gap: 40px;
}

.modal-left {
	max-width: 300px;
    flex: 0 0 35%;
}
@media (max-width: 768px) {
	.modal-left {
		max-width: 100%;
		flex: 0 0 100%;
	}
}
.modal-right {
    flex: 1;
}
/*.image-wrapper {
	width: 100%;
	height: auto;
	aspect-ratio: 1/1;
}*/
.image-wrapper img {
	margin-bottom: 15px;
    width: 100%;
    border-radius: 10px;
}

/* モーダル内の文字スタイル */
.modal-left .course-name { 
	margin-bottom: 5px; 
	font-size: 1.4rem; 
}
.modal-left .student-name {
	margin: 0 0 5px 0;
	font-size: 2.5rem; 
	color: #005c35; 
}
.modal-left .suffix { 
	font-size: 1.4rem; 
	color: #005c35; 
}
.modal-left .grad-year { 
	font-size: 1.4rem; 
	color: #222; 
}

.modal-right .modal-title {
	margin-bottom: 30px;
    font-size: 2.0rem;
    color: #005c35;
    margin-top: 0;
    line-height: 1.5;
}
.modal-right .modal-text p {
    font-size: 1.5rem;
    line-height: 1.8;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .student-grid {
        grid-template-columns: 1fr; 
        gap: 30px;
    }
    .modal-body {
        flex-direction: column;
    }
    .modal-left {
		margin: 0 auto;
        text-align: left;
    }
    .image-wrapper img {
		margin: 0 auto 15px;
        max-width: 100%;
    }
}
/* モーダル内のSwiperエリア */
.modal-swiper {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden; /* 必須 */
}

.modal-swiper .swiper-slide {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
@media screen and (max-width: 896px) {
	.modal-swiper .swiper-slide {
		width: 100%!important;
	}
}
.modal-swiper .swiper-slide img {
  max-width: 100%;
  height: auto;
	aspect-ratio:1/1;
  object-fit: cover;
}

/* ナビゲーションボタンのスタイル調整（適宜） */
.modal-swiper .swiper-button-prev,
.modal-swiper .swiper-button-next {
	color: #fff; /* ボタンの色 */
	background-color: rgba(0,0,0,0.5); /* 背景をつけて見やすく */
	width: 30px;
	height: 30px;
	border-radius: 50%;
}
.modal-swiper .swiper-button-prev::after,
.modal-swiper .swiper-button-next::after {
	font-size: 10px;
}

/* ページネーションのスタイル調整（適宜） */
.modal-swiper .swiper-pagination-bullet-active {
  background: #fff;
}


/*------------------------------------------
学校の取り組み SCHOOL INITIATIVES
-------------------------------------------*/
#school_initiatives .pdf_link {
/*	max-width: 960px;
	width: 90%;
	grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
	font-size: 1.4rem;
	letter-spacing: -0.5px;*/
}
#school_initiatives .pdf_link a {
	
}


/*------------------------------------------
school life北部高校の生活
-------------------------------------------*/

/*--------日課表 (schedule)-------*/
#daily-schedule .schedule_wrapper {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
@media screen and (max-width: 896px) {
	#daily-schedule .schedule_wrapper {
		display: block;
	}
}
.schedule_col {
	width: calc(100% / 3 - 25px); /* 3カラムの隙間調整 */
}
@media screen and (max-width: 896px){
	.schedule_col {
	width: 100%;
}
}
#daily-schedule .schedule_title {
	margin-bottom: 15px;
	font-size: 1.8rem;
	font-weight: 700;
	border-bottom: none; 
}

.schedule_table {
	width: 100%;
	border-collapse: collapse;
}
.schedule_table tr {
	border-top: 1px solid #D4D0BC;
	border-bottom: 1px solid #D4D0BC;
}
.schedule_table tr:nth-of-type(2n) th, 
.schedule_table tr:nth-of-type(2n) td {
	background: #FAF8F5;
}
.schedule_table th, 
.schedule_table td {
	padding: 10px 10px;
	font-size: 1.5rem;
	
	vertical-align: middle;
}
.schedule_table th {
	width: 35%;
	color: #222222; 
	text-align: left;
	font-weight: 500;
	border-top: 1px solid #085C28;
	border-bottom: 1px solid #085C28;
}
.schedule_table td {
	width: 65%;
	font-family: "zen-old-mincho", sans-serif;
	font-weight: 700;
	color: #085C28;
}

/* スマホ対応（日課表） */
@media screen and (max-width: 896px) {
	.schedule_wrapper {
		display: block;
	}
	.schedule_col {
		margin-bottom: 50px;
		width: 100%;
	}
}


/*------北部高校の1日 (timeline)------*/
.timeline_wrapper {
	width: 100%;
}
.timeline_item {
	position: relative;
	margin-bottom: 30px;
	padding: 10px 10px 10px 0;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	background: #FAF8F5;
	border-radius: 10px;
}
@media screen and (max-width: 896px) {
	.timeline_item {
		display: flex;
		flex-direction: column-reverse;
		margin-bottom: 30px;
	}
}

/* --左側のテキストエリア --*/
.timeline_item .text_area {
	padding-top: 30px;
	max-width: 425px;
	width: 48%;
}
@media screen and (max-width: 896px) {
	.timeline_item .text_area {
		padding-top: 10px;
		padding-bottom: 20px;
		width: 100%;
	}
}
.timeline_item::after {
	position: absolute;
	content: '';
	display: block;
	max-width: 385px;
	width: 100%;
	height: 20px;
	left: 40px;
	bottom: -9px;
	transform: translateY(50%);
	background: url("../../img/school_life_timeline_bottom_arrow.svg") top left no-repeat;
}
@media screen and (max-width: 896px) {
	.timeline_item::after {
		position: absolute;
		content: '';
		margin: 0 auto;
		display: block;
		max-width: 385px;
		width: 90%;
		height: 20px;
		left: 0px;
		right: 0;
		bottom: -9px;
		transform: translateY(50%);
		background: url("../../img/school_life_timeline_bottom_arrow.svg") top left no-repeat;
		background-size: 100% auto;
	}
}
.timeline_item:last-child {
	margin-bottom: 0;
}
.timeline_item:last-child::after {
	display: none
}
.timeline_item .time {
	margin-bottom: 20px;
	padding-left: 40px;
	padding-bottom: 10px;
	color: #085C28;
	font-size: 3.0rem;
	line-height: 1.0;
	border-bottom: 2px solid #D4D0BC;
}
@media screen and (max-width: 896px) {
	.timeline_item .time {
		margin-bottom: 20px;
		padding-left: 20px;
		padding-bottom: 10px;
		color: #085C28;
		font-size: 3.0rem;
		line-height: 1.0;
		border-bottom: 2px solid #D4D0BC;
	}
}
.timeline_item .info {
	padding-left: 40px;
}
@media screen and (max-width: 896px) {
	.timeline_item .info {
	padding-left: 20px;
}
}
.timeline_item .info_title {
	margin-bottom: 10px;
	color: #085C28;
	font-size: 1.6rem;
	font-weight: 700;
}
.timeline_item p {
	line-height: 1.8;
}
@media screen and (max-width: 896px) {
	
}

/* 右側の画像エリア */
.timeline_item .photo {
	max-width: 495px;
	width: 52%;
}
@media screen and (max-width: 896px) {
	.timeline_item .photo {
		width: 100%;
	}
}
.timeline_item .photo img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}



/*-----ルール・注意事項ボックス (rule_box)-----*/
#daily-schedule .rule_box {
	margin: 0 auto;
	padding: 30px 0 30px 30px;
	max-width: 764px;
	min-height: 147px;
	background: #FAF8F5;
	border-radius: 10px;
}

#daily-schedule .rule_box .box_title {
	margin-bottom: 20px;
	padding-bottom: 15px;
	color: #085C28;
	font-size: 2.2rem;
	font-weight: 700;
	border-bottom: 2px solid #085C28;
}

#daily-schedule .rule_box .btn_link_text {
	position: relative;
	padding-left: 20px;
	display: inline-block;
	color: #3C2C1D;
	font-size: 1.6rem;
	font-weight: 500;
}
.rule_box .btn_link_text::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 16px;
	height: 10px;
	background: url("../../img/btn_item_green.svg") no-repeat center center;
	background-size: 16px auto;
	transform: translateY(-50%);
}

/* スマホ対応（ルールボックス） */
@media screen and (max-width: 896px) {
	.rule_box {
		padding: 30px 20px;
	}
	.rule_box .box_title {
		font-size: 1.8rem;
	}
}


/*------------------------------------------
学校生活 (SCHOOL LIFE)
-------------------------------------------*/
#school-life .life_desc {
	margin-bottom: 25px;
}


/*------------------------------------------
課外活動 (extracurricular)
-------------------------------------------*/
/* 共通イントロテキスト */
.intro_text {
	font-size: 1.5rem;
	line-height: 1.8;
	color: #222;
}

/*------ 生徒会活動 ------*/
.feature_block {
	padding: 40px 40px 60px 0;
	background: #FAF8F5;
	border-radius: 10px;
	justify-content: space-between;
	align-items: flex-start;
}
.feature_block .text_area {
	width: 45%;
}
.feature_block .feature_title {
	margin-bottom: 20px;
	padding-left: 40px;
	color: #085C28;
	font-size: 2.2rem;
	font-weight: 700;
	border-bottom: 2px solid #D4D0BC; 
}
.feature_block .feature_desc {
	padding-left: 40px;
	font-size: 1.5rem;
	line-height: 1.8;
}
.feature_block .feature_desc a {
	text-decoration: underline;
	display: inline-block;
	color: #085C28;
}

.feature_block .photo_area {
	position: relative;
	width: 50%;
	min-width: 0;
}

/* Swiper周りのデザイン */
.feature_swiper {
	position: relative;
	width: 100%;
	padding-bottom: 10px; 
}
/* 最初は透明にしておく */
.feature_swiper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease; 
}
.feature_swiper.swiper-initialized {
    opacity: 1;
    visibility: visible;
}
.feature_swiper .slide_img_wrap img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
	aspect-ratio: 45/30;
	object-fit: cover;
}
.feature_swiper .caption {
	margin-top: 10px;
	font-size: 1.2rem;
	text-align: left;
}

/* Swiper矢印のカスタマイズ */
.feature_block .photo_area .slider_arrow {
	position: absolute; 
	top: 50%;
	width: 38px;
	height: 38px;
	background-color: rgba(8,92,40,0.80);
	border-radius: 50%;
	margin-top: -17px;
	border: 1px solid #fff;
	transform: translateY(-50%);
	opacity: 1 !important; 
	visibility: visible !important; 
	z-index: 10;
}
.feature_block .photo_area .slider_arrow::after {
	display: none; 
}
.feature_block .photo_area .slider_arrow::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}
.feature_block .photo_area .swiper-button-prev.slider_arrow {
	left: -17px; /* 画像の枠に半分重なるように */
}
.feature_block .photo_area .swiper-button-prev.slider_arrow::before {
	transform: translate(-30%, -50%) rotate(-135deg);
}
.feature_block .photo_area .swiper-button-next.slider_arrow {
	right: -17px;
}
.feature_block .photo_area .swiper-button-next.slider_arrow::before {
	transform: translate(-70%, -50%) rotate(45deg);
}
.feature_block .photo_area .swiper-button-lock {
    display: block !important;
}
/* スマホ対応 */
@media screen and (max-width: 896px) {
	.feature_block {
		display: block;
		padding: 30px 20px;
	}
	.feature_block .text_area {
		width: 100%;
		margin-bottom: 20px;
	}
	.feature_block .photo_area {
		width: 100%;
	}

	.feature_block .photo_area .swiper-button-prev.slider_arrow {
		left: 10px;
	}
	.feature_block .photo_area .swiper-button-next.slider_arrow {
		right: 10px;
	}
}

/* 2カラムグリッド活動紹介 */
.activity_grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px 30px;
}
.activity_item .activity_title {
	margin-bottom: 15px;
	padding-left: 15px;
	font-size: 1.6rem;
	font-weight: 700;
	border-left: 5px solid #085C28;
}
.activity_item .activity_title::before {
	display: none;
}
.activity_item .photo {
	margin-bottom: 15px;
}
.activity_item .photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 456/304;
	border-radius: 10px;
}
.activity_item .desc {
	font-size: 1.4rem;
	line-height: 1.6;
}

/*------ 部活動 ------*/
.club_category_title {
	margin-bottom: 30px;
	padding-bottom: 10px;
	color: #085C28;
	font-size: 2.2rem;
	font-weight: 700;
	border-bottom: 2px solid #D4D0BC;
}

/* 3カラムグリッド（PC） */
.club_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.club_item img {
	margin-bottom: 10px;
	width: 100%;
	height: auto;
	aspect-ratio: 300/225;
	border-radius: 10px;
	display: block;
}
.club_item .club_name {
	font-size: 1.5rem;
	font-weight: 700;
}

/*------------------------------------------
スマホ対応 (SP用上書き)
-------------------------------------------*/
@media screen and (max-width: 896px) {
	/* 生徒会活動ハイライトブロック */
	.feature_block {
		display: block;
		padding: 30px 20px;
	}
	.feature_block .text_area {
		width: 100%;
		margin-bottom: 20px;
	}
	.feature_block .photo_area {
		width: 100%;
	}

	/* スライダー矢印の位置調整（スマホだと画像の内側へ） */
	.slider_arrow.prev { left: 10px; }
	.slider_arrow.next { right: 10px; }

	/* 2カラム活動紹介 -> 1カラムへ */
	.activity_grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.club_grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}


/*------------------------------------------
  地域授業 (local class)
-------------------------------------------*/
/* イントロ部分 */
.local_intro img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}
@media screen and (max-width: 896px) {
	.local_intro img {
		width: 100%;
		height: auto;
		border-radius: 10px;
		display: block;
		aspect-ratio: 35/23;
		object-fit: cover;
	}
}
.local_intro_text p {
	margin: 0 auto;
	max-width: 770px;
	font-size: 1.8rem;
	line-height: 2.2;
	color: #3C2C1D;
}


/* 学年セクションの見出し（バッジ＋テキスト） */
.grade_header {
	align-items: flex-start;
}
#local_class .grade_section {
	margin-bottom: 40px;
}
.grade_badge {
	width: 140px;
	height: 80px;
	background-color: #085C28;
	font-family: "zen-old-mincho", sans-serif;
	text-align: center;
	color: #fff;
	font-size: 2.4rem;
	font-weight: 700;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 10px;
	flex-shrink: 0;
}
.grade_desc {
	padding-left: 30px;
	font-size: 1.5rem;
	line-height: 1.8;
	color: #3C2C1D;
}

/* 3カラム画像グリッド */
.local_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.local_item img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
	margin-bottom: 12px;
}
.local_item .caption {
	font-size: 1.3rem;
	color: #5C4C3A;
}


/*------------------------------------------
  スマホ対応 (SP用上書き)
-------------------------------------------*/
@media screen and (max-width: 896px) {

	/* 学年バッジとテキストを縦並びに */
	.grade_header {
		flex-direction: column;
	}
	.grade_badge {
		margin: 0 auto;
		width: 140px;
		height: 90px;
		font-size: 2.5rem;
		margin-bottom: 30px;
	}
	.grade_desc {
		padding-left: 0;
	}

	/* 3カラム画像 -> 1カラムへ */
	.local_grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/*------------------------------------------
  コース授業：見出し画像オーバーレイ
-------------------------------------------*/
.course_hero {
	position: relative;
	margin: 0 auto;
	max-width: 960px;
	height: 400px;
}

@media screen and (max-width: 896px) {
	#course .course_hero {
		padding-bottom: 40px
	}
	#course .course_hero img {
		border-radius: 0px;
		aspect-ratio: 39/30;
		object-fit: cover;
	}
}
#course .photo {
	margin-bottom: 40px;
}
#course .read_text {
	font-size: 1.8rem;
	font-weight: 500;
}
.course_hero .photo img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}
#course h3 {
	margin-bottom: 0;
}
@media screen and (max-width: 896px) {
	#course h3 {
		padding: 20px 30px 12px 20px;
		margin-bottom: 0;
		width: 80%;
	}
}
#course .caption {
	color: #222;
}
#course .intro_text {
	color: #222;
}
.course_hero_title {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 20px 40px 0 0;
	background: #fff;
	color: #085C28;
	font-size: 2.2rem;
	font-weight: 700;
	border-bottom: none; /* デフォルトの下線を打ち消し */
	border-top-right-radius: 10px; /* 右上に丸みをつけて切り抜き感を出す */
}


/*------------------------------------------
  アクセスページ
-------------------------------------------*/
#access {
	color: #222;
}
#access .read_text {
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 2.0;
	color: #222;
}
/* 所在地・連絡先のベージュ背景ボックス */
#access .access_info_box {
	background: #FAF8F5;
	border-radius: 10px;
	padding: 40px;
}

/* 住所・TEL・FAXのレイアウト */
#access .access_address {
	display: grid;
	grid-template-columns: 50px 1fr;
	row-gap: 5px;
	font-size: 1.5rem;
}
#access .access_address dt {
	color: #085C28;
	font-weight: 700;
}
#access .access_address dd {
	font-weight: 500;
}
#access .access_h4 {
	position: relative;
	margin-bottom: 15px;
	padding-left: 20px;
	font-size: 1.8rem;
	font-weight: 700;
}

/* 直通番号の2カラムグリッド */
#access .contact_grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 5px 30px;
}
#access .contact_grid dl {
	display: flex;
	font-size: 1.5rem;
	margin: 0;
}
#access .contact_grid dt {
	color: #085C28;
	font-weight: 700;
	width: 120px;
}
#access .contact_grid dd {
	font-weight: 500;
}

/* Google Mapの角丸コンテナ */
#access .map_wrap {
	width: 100%;
	height: auto;
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 94/54;
}
#access .map_wrap iframe {
	width: 100%;
	height: 100%;
}

/* 交通情報リンクのリスト */
#access #guide h3 {
	margin-bottom: 40px;
}
#access #guide h4 {
	margin-bottom: 10px;
}
#access #links h3 {
	margin-bottom: 30px;
}
#access .traffic_link_list li {
	margin-bottom: 20px;
}
#access .traffic_link_list li a {
	position: relative;
	padding-left: 20px;
	font-size: 1.6rem;
	font-weight: 500;
	transition: 0.3s;
}
#access .traffic_link_list li a:hover {
	opacity: 0.6;
}
#access .traffic_link_list li a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	background: url("../../img/btn_item_green.svg") left center no-repeat;
	background-size: contain;
}

/*=========================================
  スマホ対応 (SP表示)
=========================================*/
@media screen and (max-width: 896px) {
	#access.sub_page main {
		margin-bottom: 100px;
	}
	#access .access_info_box {
		padding: 30px 20px;
	}
	#access .contact_grid {
		grid-template-columns: 1fr; /* スマホは1カラムに！ */
		gap: 5px;
	}
	#access .map_wrap {
		height: 600px; 
	}
}





/*----北斗情報----*/
.hotto_pdf a {
	padding: 0;
	height: auto;
	display: block;
	background: #FAF8F5;
}
.hotto_pdf div {
	margin: 0 auto;
	padding: 0 ;
	height: auto;
	background: none;
}
.hotto_pdf .photo {
	width: 50%;
}
.hotto_pdf img {
	margin: 0 auto;
	text-align: center;
	width: 100%;
}
.hotto_pdf p {
	padding-left: 70px;
	height: 70px;
	display: flex;
    align-items: center;
    align-self: center;
	background-image: url(../../img/pdf_icon.svg), url(../../img/btn_item_green.svg);
	background-position: left 24px center, right 20px center;
	background-repeat: no-repeat;
}
.hotto_pdf .pdf_item_normal a {
	padding-left: 70px;
	height: 70px;
	display: flex;
    align-items: center;
    align-self: center;
	background-image: url(../../img/pdf_icon.svg), url(../../img/btn_item_green.svg);
	background-position: left 24px center, right 20px center;
	background-repeat: no-repeat;
}