@charset "UTF-8";
/*
	テンプレートファイルfront-page.php専用css
*/
/*====================================
メインビジュアル
=====================================*/
/* plugin MetaSlider*/
.metaslider,
.slides {
	overflow: hidden; /*はみ出させない*/
}

/*====================================
セクションエリア共通
=====================================*/
	/*====================================
	セクションエリア共通	769px以上
	=====================================*/
	@media screen and (min-width: 769px) {
		.front-page_sec {
			padding: 2rem 0 3rem 0;
		}
		section.front-page_sec.front-page_news.edu_news {
			margin-top: 80px;
		}
	}

	/*========================================================
	セクションエリア教育委員会からのお知らせの上margin	769px以上
	=========================================================*/
	@media screen and (min-width: 769px) {
		/* section.front-page_sec.front-page_news.edu_news {
			margin-top: 95px;
		} */
	}
	/*====================================
	セクションエリア共通	768px以下
	=====================================*/
	@media screen and (max-width: 768px) {
		.front-page_sec {
			padding: 1.5rem 0 2.5rem 0;
		}
	}
/*====================================
もっと見るボタン
=====================================*/
	/*====================================
	もっと見るボタン	769px以上
	=====================================*/
	@media screen and (min-width: 769px) {
		.more_btn {
			width: 60%;
		}
	
	}

/*====================================
セクションタイトル
======================================*/
.front-page_ttl_area {
	/* margin-bottom: 2rem; */
	text-align: center;
}
.front-page_ttl,.news_content_title{
	font-size: 2rem;
	font-weight: 500;
}

/* テキスト右寄せ用のスタイル */
.text-start {
    text-align: start;
}
/* 小中学校・学校からのお知らせアイコン */
h2.front-page_ttl.school_newsttl::before{
		content: "";
		display: inline-block;
		background: url(../img/icon/school-news.svg) no-repeat;
		filter: invert(18%) sepia(92%) saturate(1959%) hue-rotate(208deg) brightness(93%) contrast(91%);
		background-size: cover;
		width: 2rem;
		height: 2rem;
		position: absolute;
		background-size: contain;
		left:0;
		background-repeat: no-repeat;
}
h2.front-page_ttl.school_newsttl{
	padding-left: 2.5rem;
}
/* 学校の様子cameraのアイコン */
.camera_icon{
	display: block;
		content: '';
		display: inline-block;
		position: absolute;
		top:-3rem;
		left: 50%;
		transform: translateX(-50%);
		width: 50px;
		aspect-ratio: 1/1;
		background-color:var(--color-deepblue);
		-webkit-mask-image: url(../img/icon/school-life.svg);
		mask-image: url(../img/icon/school-life.svg);
}
/* 学校報・年間行事予定のバナー */
.link_ttl{
	position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    color: white;
    font-size:1.6666666666667rem;
}

.calendar_icon{
	background: url(../img/icon/calendar.svg);
	display: block;
	width: 90px;
    height: 90px;
	margin: 0 auto;
    filter:invert(100%) sepia(100%) saturate(0%) hue-rotate(164deg) brightness(103%) contrast(103%);
}

.news_icon{
	display: block;
	background: url(../img/icon/info.svg);
	width: 90px;
    height: 90px;
	margin: 0 auto;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(164deg) brightness(103%) contrast(103%);
}

/* 学校のようすのサムネイルリスト用のflex */
.news_thumbnail_list-flex {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    row-gap: 2rem;
    gap: 0.5rem;
	row-gap: 1rem;
}
/* 学校の様子のサムネイルリストは４つずつ並べる */
.news_thumbnail_list_area {
    width: calc(100% / 4 - 1rem );
    border-radius: 2rem;
    padding: 1.5rem;
	box-shadow: 0 5px 30px rgba(11,0,90,0.15);
}
/* 学校のようすアイキャッチ画像 */
.news_thumbnail_list_img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 1rem;
    aspect-ratio: 16 / 9;
	overflow: hidden;
}
.news_thumbnail_list_img {
    width: 100%;
    height: auto;
    background-color: #aaa;
    background-image: url(../img/common/no-img.png);
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 1rem;
    aspect-ratio: 16 / 9;
	overflow: hidden;
}
.news_thumbnail_list_area:hover img {
    transform: scale(1.1);
      transition: .4s;
}

/* 日付とカテゴリは横並びに */
.news_thumbnail_list_info {
    display: flex;
	/* カテゴリが複数個あれば折り返す */
	flex-wrap: wrap;
	margin-top: 1rem;
}
/* 学校のようすタイトルは太字・大き目文字*/
.news_thumbnail_list_text{
	font-weight: bold;
	font-size: 1.3333333333333rem;
	text-align: start;
}
/* 学校の様子背景 */
section.front-page_sl{
	background-image: url(../img/home/bg_scool-life.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	z-index: 2;
}
a.color-link_txt.news_thumbnail_list_link::before {
	content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
}


/* 学校の様子のセクションのmargin */
section.front-page_sl {
    padding-top: 5rem;
}
/* 学校の様子のh2のmargin */
.front-page_sl h2{
	margin-bottom: 3rem;
}

.bg-school_item {
    background-image: url(../img/home/school-life_item.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 260px;
    height: 390px;
    background-size: cover;
    position: absolute;
    bottom: 0px;
    z-index: -1;
}

/* ポータルの学校からのお知らせでは日付の下にタイトル */
li.news_item.flex_column {
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    line-height: 2.5rem;
	padding-right: 1.5rem;
}
/* アクセシビリティメニューを上部右に固定 */
.header_top {
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 0 0 0 20px;
    height: 80px;
    display: flex;
    align-items: center;
	padding-right: 80px;
}
/* AEDのboxの上padding */
.inner.aed {
    padding-top: 4rem;
}
/* 学校の様子のカード上のカテゴリーのタグのリンクの重なりを上に */
.news_thumbnail_list_category {
    z-index: 1;
}
/* 学校の様子カードのホバー時 */
.news_thumbnail_list_area:hover {
/* transform: scale(.95); */
/* box-shadow: 5px 5px 10px rgba(0,0,0,.08); */
transition: all .3s ease-out;
}

	/*====================================
	966px以下
	=====================================*/
	@media screen and (max-width: 966px) {
		.header_top {
			background-color: initial;
		}
	}



	/*====================================
	学校の様子	1279px以下
	=====================================*/
    @media screen and (max-width: 1279px) {
		.news_thumbnail_list_area {
			width: calc(100% / 3 - 0.5rem);
		}
	}


	/*====================================
	学校の様子	768px以下
	=====================================*/
    @media screen and (max-width: 768px) {
		.news_thumbnail_list_area {
			width: calc(100% / 2 - 0.5rem);
		}
	}
	/*====================================
	学校の様子	560px以下
	=====================================*/

	@media screen and (max-width: 560px) {
		.news_thumbnail_list-flex {
			flex-direction: column;
		}
		.news_thumbnail_list_area {
			width: 100%;
		}
		.news_thumbnail_list_area {
			display: flex;
			gap: 0.5rem;
			align-items: center;
		}
		.sp_flex_wrap {
			display: flex;
			flex-direction: column;
			flex: 2;
		}
		.news_thumbnail_list_img {
			flex: 1;
			background-size: contain;
			background-color: #aaa;
			background-image: url(../img/common/no-img.png);
			background-position: center center;
			background-repeat: no-repeat;
			border-radius: .5rem;
			width: 100%;
            height: 100%;
            aspect-ratio: 1 / 1;
		
		}
		.news_thumbnail_list_img img{
			object-fit: cover;
			border-radius: 1rem;
            width: 100%;
             height: 100%;
             aspect-ratio: 1 / 1;
		}
		.news_thumbnail_list_area {
			padding: .75rem;
		}
		.news_thumbnail_list-flex {
			flex-direction: column;
			row-gap: 1rem;
		}
		.news_thumbnail_list_text {
			text-align: start;
		}
		.bg-school_item {
			bottom: 42%;
			width: 110px;
			height: 170px;
		}
		section.front-page_sl {
			background-size: 100%;
			background-position-x: 50%;
			margin-top: 1em;
		}
		.news_thumbnail_list_area:first-child{
			display: flex;
			gap: 0.5rem;
			align-items: center;
			display: initial;
			padding: 1.5rem;
		}
		.news_thumbnail_list_area:first-child .news_thumbnail_list_img{
		aspect-ratio:16 / 9;
		background-size: auto;
		}
		section.front-page_sl {
			padding-top:5rem;
		}
		.camera_icon {
			margin-bottom: .5rem;
		}
		.front-page_sl h2 {
			margin-bottom: 2rem;
		}
		.news_border {
			padding: 1.5rem 1rem;
		}
		.news_thumbnail_list_info {
			margin-top: 0;
		}
		.news_thumbnail_list_area:first-child .news_thumbnail_list_info{
			margin-top:.5rem;
		}
		/* 学校の様子のサムネイルリストは４つずつ並べる */
	.news_thumbnail_list_area {
		border-radius: 1rem;
	}
		
	}

	/*====================================
	セクションタイトル	768px以下
	=====================================*/
	@media screen and (max-width: 768px) {
		.front-page_ttl.news_content_title {
			font-size: 1.25rem;
		}
		.front-page_ttl,.news_content_title,.link_ttl {
			font-size:1.6666666666667rem;

		}

	}
	/*====================================
	セクションタイトル	560px以下
	=====================================*/
	@media screen and (max-width: 560px) {
	
		.front-page_ttl,.news_content_title,.link_ttl {
			font-size:1.3333333333333rem;
			font-weight: bold;
		}

		.front-page_contents {
			padding-bottom: 9rem;
		}
     }
     /*====================================
     セクションタイトルの装飾
     ======================================*/


/* アンダーライン共通 */
.front-page_ttl {
	position: relative;
	/* padding: 0 0 0.7em 0; */
	display: inline-block;
}
.front-page_ttl::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0.5rem;
	content: '';
	
}


.school_news ul.news_list {
    border: solid 1px #c3c3c3;
    border-radius: 0 0 20px 20px;
}

/* ボーダーなし */
ul.news_list.border-none {
    border: none;
}

/* お知らせのボーダー枠線 */
.news_border{
    border: solid 1px #c3c3c3;
    border-radius:20px;
    padding: 2rem 1.5rem;
}


@media screen and (min-width: 1025px) {
	section.main-visual.relative {
		height:100vh;
	}
	section.main-visual .metaslider .slides img {
		width: auto;
		height: 100vh;
	}
}