@charset "UTF-8";
/*##########################################################*/
/*	News													*/
/*															*/
/*		Programing by Manabu.Katagiri						*/
/*		Product date : 2024.05.08							*/
/*##########################################################*/

	body {
		max-width : 800px ;
		text-align : center ;
		margin-left : auto ;
		margin-right : auto ;
	}
	div.hedder {
		margin-top : 20px ;
		margin-bottom : 20px ;
		width : 100% ;
		text-align : center ;
		border-bottom : 2px solid #7fafea ;
	}
	div.title_line {
		width : 290px ;
		margin-left : auto ;
		margin-right : auto ;
	}
	div.title_line div.img_logo {
		float : left ;
		width : 50px ;
		margin-top: 13px;
	}
	div.title_line div.img_logo img {
		margin : 5px ;
		width : calc( 100% - 10px ) ;
	}

	div.logo {
		float : left ;
		width : 230px ;
	}

	div.hedder div.title {
		width : 100% ;
		text-align : center ;
		font-size : 20pt ;
		color : #000000 ;
		font-weight : bold ;
		margin-top : 10px ;
		margin-bottom : 0px ;
	}
	div.hedder div.sub_title {
		width : 100% ;
		text-align : center ;
		font-size : 11pt ;
		color : #000000 ;
		margin-top : 0px ;
		margin-bottom : 10px ;
	}
	div.hedder hr {
		width : 100% ;
	}

	div.main {
		max-width : 600px ;
		margin-left : auto ;
		margin-right : auto ;
	}

	div.main div.function_button {
		margin-top : 0px ;
		margin-bottom : 20px ;
	}
	@media only screen and ( max-width : 640px ) {
		div.main div.function_button {
			width : 95% ;
			margin-left : auto ;
			margin-right : auto ;
		}
	}
	div.main div.function_button ul {
		list-style : none ;
		margin-left : -3em ;
	}
	div.main div.function_button ul li {
		float : left ;
		margin-left : 10px ;
		margin-bottom : 5px ;
	}
	div.main div.function_button ul li a {
		display : block ;
		width : 100px ;
		text-decoration:none ;
		text-align:center ;
		font-size:15px ;
	    font-weight: bold;
		color:#ffffff ;
		padding:5px ;
		border-width : 1px ;
		border-radius : 10px ;
		background-color : #005f00 ;
		height : 1.5em ;
	}

	div.back_img {
		position : relative ;
		background-image : url( /img/top_img.jpg ) ;
		background-repeat : no-repeat ;
		background-position : center ;
		background-size : cover ;
		text-align : left ;
		margin-top : 0px ;
		margin-bottom : 0px ;
		margin-left : auto ;
		margin-right : auto ;
		max-width : 600px ;
		height : 340px ;
	}
	@media only screen and ( max-width : 640px ) {
		div.back_img {
			height : 220px ;
			width : 95% ;
		}
	}

	div.back_img div.news_frame {
		position : absolute ;
		top : 290px ;
		width : 100% ;
	}
	@media only screen and ( max-width : 640px ) {
		div.back_img div.news_frame {
			top : 135px ;
		}
	}

	div.back_img div.news_frame div.news_scrool {
		width : 90% ;
		margin-left : auto ;
		margin-right : auto ;
	}
	div.back_img div.news_frame div.news_scrool img {
		float : left ;
		width : 100px ;
		border-style : none ;
		margin-top : 3px ;
	}

	div.back_img div.news_frame div.news_scrool iframe {
		width : calc( 100% - 105px ) ;
		float : left ;
		border: 2px solid #dfdfdf;
		overflow : scroll ;
		height : 2em ;
	}
	@media only screen and ( max-width : 640px ) {
		div.back_img div.news_frame div.news_scrool iframe {
			width : 100% ;
		}
	}

	div.back_img div.news {
		position : absolute ;
		top : 290px ;
		width : 100% ;
		height : calc( 2em + 4px ) ;
	}
	@media only screen and ( max-width : 640px ) {
		div.back_img div.news {
			top : 168px ;
		}
	}
	div.back_img div.news a {
		display : block ;
		height : 100% ;
		width : calc( 100% - 160px ) ;
		margin-left : 130px ;
		margin-top : 0px ;
		margin-bottom : 0px ;
	}
	@media only screen and ( max-width : 640px ) {
		div.back_img div.news a {
			width : 90% ;
			margin-left : auto ;
			margin-right : auto ;
		}
	}
	div.back_img div.news a p {
		margin-top : 0px ;
		margin-bottom : 0px ;
		height : 100% ;
	}

	div.back_img div.calender_frame {
		position : absolute ;
		top : 15px ;
		width : 250px ;
		right : 15px ;
		height : 270px ;
	}
	@media only screen and ( max-width : 640px ) {
		div.back_img div.calender_frame {
			display : none ;
		}
	}
	div.back_img div.calender_frame iframe {
		border : none ;
		width : 250px ;
		height : 270px ;
	}


	div.special_content {
		max-width : 600px ;
		margin-left : auto ;
		margin-right : auto ;
		margin-top : 20px ;
	}
	div.special_content ul {
		list-style : none ;
		margin-left : -3em ;
	}
	div.special_content ul li {
		float : left ;
		margin-left : 10px ;
		margin-bottom : 5px ;
/*		background-color : #ffff00 ;	*/
/*		background : linear-gradient( to right , #0000ff , #ff00ff ) ;	*/
		max-width : 200px ;
		width : 25% ;
/*		border : 3px solid #00ffff ;	*/
		border-radius : 10px ;
		height : 3em ;
		line-height : 3em ;
		cursor : pointer ;

		animation-name : rotation ;
		animation-duration : 4s ;
		animation-timing-function : linear ;		/* ease */
		animation-delay : 0s ;
		animation-iteration-count : infinite ;
		animation-direction : alternate ;
		animation-fill-mode : none ;
		animation-play-state : running ;
	}
	@keyframes rotation {
		0% {
/*			background : linear-gradient( to right , #0000ff , #ff00ff ) ;		*/
			background-color : #7f7fff ;
/*			color : #ffffff ;													*/
		}
		50% {
/*			background : linear-gradient( to right , #f0f0ff , #fff0ff ) ;		*/
			background-color : #efefef ;
/*			color : #000000 ;													*/
		}
		100% {
/*			background : linear-gradient( to right , #ff00ff , #0000ff ) ;		*/
			background-color : #ff8f4f ;
/*			color : #ffffff ;													*/
		}
	}

	div.special_content ul li a {
		width : 100% ;
		height : 100% ;
		display : block ;
		text-decoration : none ;
	}


	div.footer {
		max-width : 800px ;
		margin-top : 20px ;
		margin-bottom : 10px ;
		margin-left : auto ;
		margin-right : auto ;
		border-top : 1px solid #7fafea ;
	}
	div.footer div.footer_title {
		text-align : center ;
		max-width : 600px ;
		margin-left : auto ;
		margin-right : auto ;
	}
	div.footer div.footer_title p {
		text-align : right ;
		margin-left : 0px ;
		margin-right : 10px ;
		margin-top : 0px ;
		margin-bottom : 0px ;
		font-size : 8pt ;
	}
	@media only screen and ( max-width : 640px ) {
		div.footer div.footer_title p {
			text-align : center ;
		}
	}


	div.clear {
		clear : both ;
	}
	div.bottom_20 {
		margin-bottom : 20px ;
	}