/*

			★三県イラストから拾った配色用カラー★

			緑　#07ce9f
			水色　#26c6d2
			青　#2098ef
			黄色　#fdfd82

			*/


/*基本 ---------------------------------------------------------------------------------------- */

.max_width {max-width: 980px; display: block; margin: 0 auto;}
a {text-decoration: none!important;}
html { scroll-behavior: smooth;}
body { background-color: #ffffff; margin:0; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;}
h2 {color:#104e8b; margin-bottom: 50px;}
h3 {margin-top: 40px;}
h3.news_title{margin-top:10px;}
p {line-height:146%;    margin: 0;}
content {    padding-top: 60px;   padding-bottom: 60px;}
ul, li { list-style: none;  margin: 0; padding: 0; }
.page_top {position: fixed; bottom: 20px; right: 20px;z-index: 99;border-radius:50%;  background: linear-gradient(-205deg, #07ce9f 0%, #26c6d2 56%, #2098ef 100%); color:#fff; height: 60px; width: 60px; text-align: center;border:2px solid #fff;display: flex;align-items: center; justify-content: center;}

span.yellowline { background: linear-gradient(transparent 60%, #fdfd82 40%);}
span.skyline { background: linear-gradient(transparent 60%, #26c6d2 40%);}
span.blueline { background: linear-gradient(transparent 60%, #2098ef 40%);}
span.greenline { background: linear-gradient(transparent 60%, #07ce9f 40%);}

/*ヘッダー ---------------------------------------------------------------------------------------- */

header { position: fixed; top: 0; left: 0; height: 127.2px; width: 100%; background-color: #fff;z-index: 100;margin: 0;}
header h1 {display: inline-block;padding: 15px; margin: 0;}
header h1 a{color: #000;}
header h1 img {height:50px; display: inline;vertical-align: top;}
header h1 .title{display:inline;vertical-align: top;padding-left: 10px;}
header .nav_content {width: 100%;background-color: #104e8b;padding:0; margin:0; text-align: center;}
header .drawer_open {display: none;}
header .drawer_hidden {display: none;}
header ul { font-size:0;  display: inline-block; padding: 0; width: 100%;}
header li {display:inline-block; border-left: 1px solid #ffffff;font-size:16px;width:33%;}
header li a {display:inline-block;color: #fff;width:100%;padding-top: 12px;padding-bottom: 12px; }
header li:last-child {border-right: 1px solid #ffffff;}

/*メインコンテンツ ----------------------------------------------------------------------------------------  */

main {margin-top: 127.2px;}
main .block1 { padding: 5%; }
main .title_banner {background: linear-gradient(-205deg, #07ce9f 0%, #26c6d2 56%, #2098ef 100%);text-align: center; padding-top: 100px; padding-bottom: 100px; font-size: 35px; width: 100%;color: #fff;}
ul.news { padding: 0; list-style-type: none; line-height: 146%;}
ul.news li { padding-bottom: 20px;}
main img {width: 100%;margin-top: 40px;}
.center {width: 100%;text-align: center;}
.center img {max-width: 768px;}
.news .date {font-weight: bold;}

/*お知らせの詳細box*/
.news_topic {    padding-bottom: 20px;    border-bottom: 1px solid #EBE8F1;    padding-top: 10px;}
.news_topic:last-child {  border-bottom:none;padding-bottom: 0;}
.acd-check{ display: none;}
.acd-label{ background: #333; color: #fff; display: inline-block; padding: 10px;background: linear-gradient(-225deg, #07ce9f 0%, #26c6d2 56%, #2098ef 100%);}
.acd-content{   height: 0;  opacity: 0;  transition: .3s;  visibility: hidden;background-color: #F9F8FB; padding-left: 30px;padding-right:30px;}
.acd-check:checked + .acd-label + .acd-content{margin-top: 15px; height: auto; opacity: 1;  visibility: visible; padding-top: 30px;padding-bottom:30px;}
.ul_box{ display:none; padding-bottom: 40px;}
.acd-check:checked + .acd-label + .acd-content .ul_box {display: block;}

.ul_box .award_ul:last-child { border-bottom: 1px solid #C5C3C9;}
.award_ul {padding-bottom: 20px;}
#news  h4 {font-size: 22px;}
#news  h5 {font-size: 20px; }
#news h6 {font-size: 18px;margin:0;padding-bottom: 20px;}
.award_ul.border { border-top: 1px solid #C5C3C9; padding-top: 20px; }
.award_ul li {display: inline-block;    }
.award_ul .award {width:15%;vertical-align: top;font-weight: bold; }
.award_title{font-weight: bold; }
.award_ul  .award_title {width: 50%;vertical-align: top; }
.award_ul .award_school {width: 30%;vertical-align: top; }

/*フッター ----------------------------------------------------------------------------------------  */

footer { background-color:  #104e8b; color:#ffffff;}
footer p{ font-size: 14px;}
footer .info {    padding: 20px;}
.footer_cont {    text-align: center;    padding-top: 45px; padding-bottom: 30px;}
.footer_logo1 {height: 80px; display: block;margin: 0 auto;}
.footer_logo2 {height: 50px; display: inline-block;margin: 0 auto;padding:15px;}
.footer_logo1 img {height: 100%;}
.footer_logo2 img {height: 100%;background-color: #fff;}
.copyright {text-align: center; padding: 15px; background-color: #fff; color: #000;}
.copyright p { font-size: 12px;}




/* 980px以下に適用されるCSS（タブレット&スマホ用）---------------------------------------------------------------------------------------- */

@media screen and (max-width: 980px) {

	header li:first-child {border-left:none;}
	header li:last-child {border-right: none;}

}



/* 768px以下に適用されるCSS（タブレット&スマホ用）----------------------------------------------------------------------------------------  */

@media screen and (max-width: 768px) {

	main {margin-top: 80px;}
	header {   height: 80px;     border-bottom: 1px solid #EBE8F1;}
	header  .drawer_open {display: inline-block;        float: right;   padding-top: 35px; padding-right: 20px;}
	header li { display:block;  border-left:none;  border-bottom: 1px solid #fff;font-size:16px;width: 100%;}
	header li a {    display:block;     width: 100%; padding-top: 20px;padding-bottom: 20px; }
	header .nav_content {width: 200px;}

	/*ハンバーガーメニュー！*/

		/* CSSコード */
			.header { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; background: #fff;}
			.logo { font-size: 24px;}

		/* ここから下がハンバーガーメニューに関するCSS */
  
		/* チェックボックスを非表示にする */
			.drawer_hidden { display: none;}

		/* ハンバーガーアイコンの設置スペース */
			.drawer_open {display: flex; width: 25px; justify-content: center;  align-items: center; position: relative; z-index: 100;/* 重なり順を一番上にする */ cursor: pointer; padding: 0;}

		/* ハンバーガーメニューのアイコン */
			.drawer_open span, .drawer_open span:before, .drawer_open span:after { content: ''; display: block;  height: 3px; width: 25px; border-radius: 3px; background: #333; transition: 0.5s; position: absolute;}

		/* 三本線の一番上の棒の位置調整 */
			.drawer_open span:before { bottom: 8px;}

		/* 三本線の一番下の棒の位置調整 */
			.drawer_open span:after { top: 8px;}

		/* アイコンがクリックされたら真ん中の線を透明にする */
			#drawer_input:checked ~ .drawer_open span {  background: rgba(255, 255, 255, 0);}

		/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
			#drawer_input:checked ~ .drawer_open span::before {  bottom: 0;  transform: rotate(45deg);}
			#drawer_input:checked ~ .drawer_open span::after { top: 0;  transform: rotate(-45deg);}
  
		/* メニューのデザイン*/
			header .nav_content {  height: 100%; position: fixed; top: 80px; right: -200px; /* メニューを画面の外に飛ばす */ z-index: 99; transition: .5s;}

		/* メニュー黒ポチを消す */
			.nav_list { list-style: none;}

		/* アイコンがクリックされたらメニューを表示 */
			#drawer_input:checked ~ .nav_content { right: 0;/* メニューを画面に入れる */}

}



/* 480px以下に適用されるCSS（スマホ用）----------------------------------------------------------------------------------------  */

@media screen and (max-width: 480px) {

	body {font-size: 14px;}
	h2 {    margin-bottom: 20px; margin-top: 20px;}
	h3{margin-top:10px;}
	main .title_banner {font-size: 20px;}
	.footer_logo2{padding: 5px;}
	content {padding-top: 20px;padding-bottom:40px;}
	.acd-content h4 {font-size: 16px;}
	.acd-content h5 {font-size: 14px;}
	.award_ul li {display: block;    }
	.award_ul .award {width:100%;         font-size: 16px; }
	.award_ul.border .award{padding-bottom:15px;}
	.award_ul  .award_title {width: 100%; padding-bottom: 5px;}
	.award_ul .award_school {width: 100%;}

}