@charset "UTF-8";

*{
	margin:0;
	padding:0;
	-webkit-appearance: none;
	}


/* =======================================================
  以下、レスポンシブデザイン
======================================================= */

/*--------------------------------------------------------
保護者専用サイト用
--------------------------------------------------------*/
/*  アルバム  */
.album_area{
	width: 100%;
  }
  
  .album_area #album{
	width: 100%;
	height: 30vh;
	margin: 0 auto;
  }
  
  #album img{
	width: 100%;
	height: 30vh;
	margin: 0 auto;
  }
  
  .album_button{
	text-align: center;
	list-style: none;
	width: 100%;
	margin-bottom: 30px;
  }
  
  .album_button li{
	width: 100%;
	float: left;
  }
  
  .album_button::after{
	content: "";
	list-style: none;
	display:block;
	clear:both;
  }
  
  #prevpage, #nextpage{
	cursor: pointer;
  }




/*  パスワードエラーページ  */

.pwerror{
	padding-top: 1em;
	padding-bottom: 1em;
	font-size: 1.3em;
  }


/* スライド写真のスタイル */
.swiper-container {
	width: 100%;
	max-width: 940px;
  }
  
  .swiper-vartical {
	width: 70%;
	max-width: 940px;
	margin: 0 auto;
  }
  
  /*　スライダー　*/
  .swiper-slide img {
	width: 100%;
  }
  
  .swiper-container {
	  width: 100%;
	  max-width: 940px;
	  
	  //スライダー
	  &.slider {
		  height: 80vh;
	  }
	  
	  //スライダーサムネイル
	  &.slider-thumbnail {
		  height: 20vh;
		  
		  .swiper-wrapper {
			  
			  .swiper-slide {
				  width: 25%;
				  height: 100%;
				  opacity: .5;
				  overflow: hidden;
  
				  &.swiper-slide-thumb-active {
					  opacity: 1;
				  }
			  }
		  }
	  }
  }
  
  
  
  .swiper-container {
	//スライダー
	&.slider2 {
		height: 50vh;
	}
	
	//スライダーサムネイル
	&.slider-thumbnail2 {
		height: 20vh;
		
		.swiper-wrapper {
			
			.swiper-slide2 {
				width: 25%;
				height: 100%;
				opacity: .5;
				overflow: hidden;
  
				&.swiper-slide-thumb-active {
					opacity: 1;
				}
			}
		}
	}
  }




/*--------------------------------------------------------
リンク集
--------------------------------------------------------*/
#img_QR{
	text-align: right;
  }

/*--------------------------------------------------------
全般
--------------------------------------------------------*/
	body{
		min-width: 100%;
		font-size: 100%;
		font-family: "UD Digi Kyokasho N-R", 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'Osaka', sans-serif;
		color: #333333;
		background-image: url("../images/whole/background_02.jpg"); /* 画像 */
		background-size: cover;               /* 全画面 */
		background-attachment: fixed;         /* 固定 */
		background-position: center center;   /* 縦横中央 */
	}

	/* footer　スマホ用 */
	#hpb-footerMain
	{
	}
	
	#hpb-footerMain p{
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 10px;
		padding-bottom: 3px;
		font-size: 0.9em;
		text-align: center;
	}
	
	#hpb-footerLogo
	{
	}
	
	#hpb-footerExtra1
	{
	}
	
	#hpb-footerExtra2
	{
	}
	
	#hpb-footer{
	background-color:  #F5F2F0;
	
	}


	/* header　スマホ用 */
  #hpb-headerMain h1{
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding-top: 5px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 10px;
    text-align: left;
    font-weight: normal;
    line-height: 12px;
    font-size: 11px;
    color: #006956;
	}
	
	#hpb-headerLogo{
		width: 100%;
		float: left;
		background-image : url(../images/whole/logo_01.png);
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: left top;
		padding-top: 15px;
		padding-bottom: 20px;
	}

	#hpb-headerLogo img{
		width: 100%;

	}
	#hpb-headerLogo a{
		max-width: 100%;
		display: block;
		margin-top: 0;
		margin-right: 0;
		margin-bottom: 0;
		margin-left: 35px;
		padding-top: 0;
		padding-right: 0;
		padding-bottom: 0;
		padding-left: 0;
		text-indent: -9999px;
		overflow: hidden;
		height: 35px;
		background-position: top center;
		background-repeat: no-repeat;
		margin-left: auto;
		margin-right: auto;
	}
	#hpb-headerExtra1{
		width: 98%;
		margin-left: auto;
		margin-right: auto;
		float: none;
		letter-spacing: 0.1em;
		text-align: right;
	}
	#hpb-headerExtra1 p.tel{
		padding-right: 5px;
		padding-left: 35px;
		text-align: left;
		display: inline-block;
	}
	#hpb-headerExtra1 p.tel span{
		display: block;
	}
	#hpb-headerExtra1 p.address{
		padding-left: 10px;
		padding-right: 5px;
		font-size: 14px;
	}

	#hpb-inner{
		margin-top: 0px;
		background-color: #F5F2F0;
		background-image: none;
		padding-left: 0px;
		padding-right: 0px;
	}

/* slideshow　スマホ用 */
  #slideshow{
    position: relative;
    width:  85%;
    max-width: 728px;
    margin-left: auto;
    margin-right:auto;
    padding-top: 32.8%;
    padding-bottom: 12%;	
  }
  
  #slideshow img{
    position: absolute;
    top:  18px;
    left: 0;
    height: auto;
    z-index: 8;
    opacity: 0.0;
  }
  
  #slideshow img.active{
    z-index: 10;
    opacity: 1.0;
  }
  
  #slideshow img.last-active{
    z-index: 9;
  }


	/* �t�b�^�[���p�[�c */
	
	#hpb-footerMain p{
		/* �R�s�[���C�g�����ݒ� */
		padding-left: 5px;
		padding-right: 5px;
		word-break: break-all;
	}

	/* <p>のスタイル */
	p.large{
		font-weight: bold;
		font-size: 1.5em;
		margin-bottom: 0.4em;
	}
	p.indent{
		padding-left: 15px;
	}
	
	/* NEWアイコン設定 */
	.animation{
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-duration: 3.0s;
		width: 50px;
	  }
	
	.keyframe5{
		  animation-name: anim_sc;
		  transform: scale(0.85,0.85);
		}
	@keyframes anim_sc {
		100% {
		transform: scale(1,1);
		}
	}

	.link-img{
		display: block;
		width:200px;
		height:80px;
		margin-left:1em;
		margin-right: auto;
	  }
	  
	.link-img img{
		width:200px;
		height:80px;
	  }

	/* �o�i�[ */
	#banner{
		display:none;
		margin-right: auto;
		max-width: 100%;
	}
	#banner li{
		max-width: 100%;
	}
	#banner a#banner-access{
    /* �A�N�Z�X�o�i�[ */
		background-position: top center;
		background-size: contain;
	}
	
	/* フッター学校情報 */
	#shopinfo{
		width:75%;
		margin-left: auto;
		margin-right: auto;
		padding: 0 2em 0 2em;
		background-position: 11px bottom;
		border-style: solid;
		border-color: #00896B;
	}
	
	#shopinfo img{
	border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
	padding-bottom: 1em;
	}

	#shopinfo .hima img{
		padding: 1em 0 0 0;
	}

	#shopinfo h3 span.en {
		font-size: 1.0em;
	}

	#shopinfo h4{
		margin: 0.4em 0;
	}

	/*ラインイラスト */

	.takeline{
	background-image : url(../images/whole/shopinfo_1.png);
	background-repeat: repeat;
	background-size: 21px 20px;
	height: 20px;
	width: 100%;
  }

  .archive_button{
	width: 40%;
	margin-top:2%;
	margin-left:5%;
   }
   
   
   .archive_button img{
	 width: 100%;
   }

   .absence{
	font-size: larger;
  }
   
	/*--------------------------------------------------------
	  �i�r�Q�[�V�����f�U�C���ݒ�
	--------------------------------------------------------*/
	#hpb-nav h3.hpb-c-index{
		width: 150px;
		height: 20px;
		background-image : url(../images/whole/btn_menu.png);
		background-position: top left;
		background-repeat: no-repeat;
		margin-left: 10px;
		margin-top: 10px;
		margin-bottom: 10px;
		overflow: hidden;
		text-indent:30px;
    color:#ffffff;
		cursor: pointer;
	}

	/*--------------------------------------------------------
	  ��{�p�[�c�f�U�C���ݒ�
	--------------------------------------------------------*/
	.hpb-layoutset-02 h2{
		min-height: 53px;
		line-height: 1.4;
		height: auto;
		word-break: break-all;
		overflow: visible;
	}
	.hpb-layoutset-02 h2 span.ja{
		display:block;
        padding-top: 12px;
		padding-right: 10px;
	}
	.hpb-layoutset-02 h2 span.en{
		display:block;
		padding-left: 55px;
		padding-right: 10px;
	}

	#hpb-wrapper h3{
		margin-top: 1em;
		margin-right: 0;
		margin-bottom: 10px;
		margin-left: 0;
		padding-top: 1em;
		padding-bottom: 5px;
		padding-left: 40px;
		text-align: left;
		margin: 0.5em 0 0.5em 0;
		padding-left: 0.5em;
		border-bottom: 10px dotted #00896B;
		color: #00896B;
		font-size: 1.3em;
		font-weight: bold;
		text-align: left;
	}
	
	h3.hpb-c-index{
		height: 1px;
		margin: 0;
		padding: 0;
		overflow: hidden;
		text-indent: -9999px;
		background: none;
	}


	h4{
		margin: 2em 0 0.5em 0;
		border-bottom: 3px dashed #00896B;
		border-left: 4mm ridge #00896B;
		padding-left: 10px;
		color: #00896B;
		font-size: 1.2em;
	}

	h5{
		padding-right: 5px;
	}
	table{
		width: 96%;
		margin-left: auto;
		margin-right: auto;
	}



	/* �t�H�[���p�[�c�ݒ� */
	textarea{
		width: 85%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	input.l{
		width: 96%;
	}
	input.m{
		width: 60%;
	}
	input.s{
		width: 30%;
	}

	/* ���C���R���e���c����{�p�[�c */
	#hpb-main ul li{
		padding-left: 0px;
		list-style: none; 
	}
	#hpb-main dl{
		margin-left: 0;
		margin-right: 0;
	}
	#hpb-main dt{
		float: none;
		padding-bottom: 0px;
		padding-left: 0px;
		max-width: 100%;
	}
	#hpb-main dd{
		padding-left: 0px;
	}
	#hpb-main img.left{
		margin-right: 0;
		float: none;
	}
	#hpb-main img.right{
		margin-left: 0;
		float: none;
	}
	#pagetop{
		padding-left: 0px;
		padding-right: 0px;
		margin-bottom: 20px;
	}

	/* �g�b�v�y�[�W �f�U�C����` */
	#hpb-wrapper #toppage-news{
		width: 100%;
	}

	#hpb-wrapper #toppage-news p {
		text-align : left;
		padding: 0.5em 0.5em 0.5em 0.5em;
	}
	

	/*--------------------------------------------------------
	  スマホ用
	--------------------------------------------------------*/
	#hpb-container{
		width: 95%;
		margin-left: auto;
		margin-right: auto;

	}
	#hpb-header{
		width: 100%;
		padding-bottom: 10px;
	}

	.hpb-layoutset-01 #hpb-inner{
		padding-left: 0px;
		padding-right: 0px;
	}
	#hpb-wrapper{
		width: 100%;
		float: none;
	}
	#hpb-title{
		width: 96%;
		padding-top: 5px;
		margin-top: 5px;
	    margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
	}
	.hpb-layoutset-01 #hpb-title{
		position: static;
		width: 96%;
		margin-left: auto;
		margin-right: auto;
	}
	.hpb-layoutset-01 #hpb-main{
		width: 96%;
		padding-top: 0;
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 20px;
	}
	.hpb-layoutset-02 #hpb-main{
		width: 96%;
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 20px;
		text-align: left;
	}
	#hpb-aside{
		float: none;
		text-align: left;
		padding-top: 0;
		padding-bottom: 20px;
		margin-left: auto;
		margin-right: auto;
		width: 90%;
	}
	.hpb-layoutset-01 #hpb-aside{
		padding-top: 0;
	}
	.hpb-layoutset-02 #hpb-aside{
		margin-right: auto;
		padding-top: 0px;
	}
	#hpb-footer{
		background-image: none;
		padding-top: 0px;
		margin-top: 10px;
	}
	#hpb-nav{
		position: relative;
		height: auto;
		width: 100%;
		overflow: hidden;
		background-image: none;
		top: 0;
		background-color: #ACB5A4;
	}

/*--------------------------------------------------------
	  �f�U�C���ݒ�
--------------------------------------------------------*/
	.hpb-layoutset-01 #hpb-title h2{
		background-size: contain;
		padding-top: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
		padding-left: 0px;
		height: 185px;
	}

/*--------------------------------------------------------
	ナビゲーションメニュー　スマホ用
--------------------------------------------------------*/
	/* チェックボックスを非表示 */
	.nav-unshown {
		display:none;
	}

	.nav-title{
	font-size: 10px;
	}
  
	#nav-drawer {
    position: relative;
  	}
  
  /*アイコンのスペース*/
  #nav-open {
    display: inline-block;
    width: 50px;
    height: 20px;
    vertical-align: middle;
	margin-left:5px;
  }
  
  /*ハンバーガー部分*/
  #nav-open span, #nav-open span:before, #nav-open span:after {
    position: absolute;
    height: 3px;/*線の太さ*/
    width: 40px;/*長さ*/
    border-radius: 3px;
    background: #555;
    display: block;
    content: '';
    cursor: pointer;
	margin-top: 4px;/*メニューの配置*/
  }

  #nav-open span:before {
    bottom: -8px;
  }
  
  #nav-open span:after {
    bottom: -16px;
  }
  
  /*閉じる用の薄黒箇所*/
  #nav-close {
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
  }
  
  /*メニューの中身*/
  #headernav {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 80%;
    max-width: 80%;		/*メニューの最大幅*/
    height: 100vh;
    background: #00896B;
    transition: .3s ease-in-out;
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);
  }
  
  #headernav ul {
	margin-left: 10px;
	list-style: none;
  }

  #headernav ul li {
    width: 100%;
	height: 2.4em;
	padding: 1px 0 ;
	font-size: 20px;
	border-bottom: 1px solid #ffffff;
}

  #headernav ul a{
	display: block;
	padding-top: 0.7em;
}

  /*チェックがついたら表示させる*/
  #nav-input:checked ~ #nav-close {
    display: block;
    opacity: .5;
  }
  
  #nav-input:checked ~ #headernav {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
  }
  
  .header-logo-menu{
   display: flex;
   display: -moz-flex;
   display: -o-flex;
   display: -webkit-flex;
   display: -ms-flex;
   flex-direction: row;
   -moz-flex-direction: row;
   -o-flex-direction: row;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
  }
  
  /*メニュータイトル*/
  .logo-area{
	display:block;
	text-align:left;
	font-size: large;
	margin: 5px 0 0 7px;/*タイトルの表示位置*/
  }

  /*メニューの文字色*/
	#headernav a:link{
		color: #ffffff;
	}

	#headernav a:visited{
		color: #ffffff;
	}
	#headernav a:hover{
		background-color: #ACB5A4;
	}
	#headernav a:active{
		background-color: #ACB5A4;
	}
	
	/*--------------------------------------------------------
	  ���ʃp�[�c�f�U�C���ݒ�
	--------------------------------------------------------*/
	/*------ページトップリンク------*/
#pagetop{
	position: fixed;
	right:5px;
	bottom:0;
	width: 20%;
	height:30vh;
	margin-left: auto;
	background-repeat: no-repeat;
	z-index: 10;
	opacity: 0.8;
}
	
#pagetop a img{
	width: 100%;
	height:200px;
	object-fit: contain;
}

	/* �g�b�v�y�[�W �f�U�C����` */
	#hpb-wrapper #toppage-news{
		width: 100%;
	}

	#hpb-wrapper #toppage-news p {
		text-align : left;
		padding: 0.5em 0.5em 0.5em 0.5em;
	}
	
	.hpb-layoutset-02 h2{
		color: #fffffb;
		margin: 0;
		padding: 0.3em 0 0.3em 0;
		background-color: #00896B;
		border: 2px solid #ffffff;
		box-shadow: 0px 0px 0px 5px #00896B;
		margin-top: 5px;
		text-align: left;
		overflow: hidden;
		line-height: 30px;
		border-radius: 10px;
	}

	.hpb-layoutset-02 h2 span.ja{
		font-size: 90%;
		color: #FAFDFA;
		padding-left: 20px;
		padding-right: 15px;
		font-weight: normal;
	}
	
	.hpb-layoutset-02 h2 span.en{
		color: #ffffff;
		font-size: 0.9em;
		font-weight: normal;
		text-transform: uppercase;
	}

/*--------------------------------------------------------
  What's New
--------------------------------------------------------*/
.inner-box {
    padding: 0.2em 0.5em;
    margin: 2em 0;
	margin-right: auto;
	margin-left: auto;
    color: #00896B;
    background: #CCE7D3;
    box-shadow: 0px 0px 0px 10px #CCE7D3;
    border: dashed 2px #B4CF9E;
    border-radius: 8px;
	width: 90%;
}


.inner-box_title{
    font-size:0.9em;
	font-weight: bold;
	margin: 0.5em 0;
}

.inner-box_text{
	font-size:0.8em;
	font-weight: bold;
	margin: 0 0 1em 1em;
}

.red{
	color:rgb(28, 54, 161);
}


/*--------------------------------------------------------
  学期行事予定
--------------------------------------------------------*/
.semester_table {
	width: 95%;
	border: 1;
  }
  
  .first_th{
	color: #33333;
	background-color: #CEB4BC;
	text-align: center;
  }
  
  .second_th{
	color: #33333;
	background-color:#A1CCCB;
	text-align: center;
  }
  
  .third_th{
	color: #33333;
	background-color: #A0C5DE;
	text-align: center;
  }
  
  .forth_th{
	color: #33333;
	background-color: #BEB8C9;
	text-align: center;
  }
  
  .fifth_th{
	color: #33333;
	background-color: #CEB4BC;
	text-align: center;
  }
  
  .first_td{
	width: 20%;
	text-align: center;
  }
  
  .second_td{
	width: 20%;
	text-align: center;
  }
  
  .third_td{
	width: 60%;
	text-align: left;
  }
  



/*--------------------------------------------------------
「学校紹介・校内の活動」ページの表の設定
--------------------------------------------------------*/
	.history_table,th,td {
		border: 1px solid  #8F9EBB;
	  }
	  
	  .year {
		width: 30%;
	  }
	  
	  .matter {
		width: 70%;
	  }
	  
	  .era_name {
		vertical-align : top;
	  } 
	  
	  
	  .history_table th{
		padding-top: 5px;
		padding-right: 20px;
		padding-bottom: 5px;
	  
		text-align: center;
		background-color: #C8D0E2;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #C8D0E2;
	  }
	  
	  .history_table td{
		padding-top: 5px;
		padding-bottom: 5px;
	  
		text-align: left;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #C8D0E2;
	  }
	  
	  
	  .club_table,th,td {
		border: 1px solid  #8F9EBB;
	  }
	  
	  .club_name {
		width: 30%;
	  }
	  
	  .club_table th{
		padding-top: 5px;
		padding-right: 20px;
		padding-bottom: 5px;
	  
		text-align: center;
		background-color: #C8D0E2;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #C8D0E2;
	  }
	  
	  .club_table td{
		padding-top: 5px;
		padding-bottom: 5px;
	  
		text-align: left;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #C8D0E2;
	  }
	  
	  .committee_table,th,td {
		border: 1px solid  #8F9EBB;
	  }
	  
	  .committee_name {
		width: 30%;
	  }
	  
	  
	  .committee_table th{
		padding-top: 5px;
		padding-right: 20px;
		padding-bottom: 5px;
	  
		text-align: center;
		background-color: #C8D0E2;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #C8D0E2;
	  }
	  
	  .committee_table td{
		padding-top: 5px;
		padding-bottom: 5px;
	  
		text-align: left;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #C8D0E2;
	  }

/*--------------------------------------------------------
  校長挨拶
--------------------------------------------------------*/
.principal_greeting p{
	display: block;
	line-height: 1.5em;
	padding: 0 0.5em 0 0.5em;
  }
  
  
  /*--------------------------------------------------------
	学校目標
  --------------------------------------------------------*/
  .school_objective p{
	display: block;
	line-height: 1.5em;
	padding: 0.5em 0 1em 1em;
  }
  
  
  .kyouikumouhyou{
	  font-size: 1.1em;
	  background-color: #FEE0A2;
	  line-height: 2em;
  }
  
  .kenkyuusyudai{
	  font-size: 1.1em;
	  background-color: #B7DDE0;
	  line-height: 2em;
  }
  
  .gakkouzou{
	  font-size: 1.1em;
	  background-color: #9AE1D3;
	  line-height: 2em;
  }
  
  .kodomozou{
	  font-size: 1.1em;
	  background-color: #F9D0D6;
	  line-height: 2em;
  }

/*--------------------------------------------------------
  基本方針・学びのスタンダード・学校評価・調査結果
--------------------------------------------------------*/
#entrance h4{
	margin: 1.4em 0.5em;
    border-bottom: 3px dashed #00896B;
    border-left: 4mm ridge #00896B;
	padding-top: 0.5em;
    padding-left: 10px;
    color: #00896B;
    font-size: 1.2em;
}

#entrance p{
	margin-left: 0.2em;
	line-height:1.5em;
}

#entrance01 {
	background-color: #fff;
	padding: 0 0.5em 1em;
	margin: 0.2em 0.3em;
	border-radius: 8px;
  }



/*--------------------------------------------------------
アーカイブリンク用
--------------------------------------------------------*/
.archive_month{
	display: block;
	width:100%;
	height: 170px;
  }

.archive_month ul{
	width: 90%;
	display: block;
	}

  .archive_month ul li{
	float:left;
	width:30%;
	text-align: center;
	}

  .archive_month ul li a:link{
	font-size: large;
	line-height: 2em;
	}

/* リンクの設定 */
a:link{
    color: #006956;
    text-decoration: none;
    font-weight:bold;
    font-size: 0.9rem;
}
a:visited{
    color: #006956;
    text-decoration: none;
}
a:hover{
    color: #006956;
    text-decoration: none;
}
a:active{
    color: #006956;
    text-decoration: none;
}