@charset "utf-8";
/* CSS Document */


html { 
	height: 100%;
	font-family: "Kozuka Gothic Pr6N", "小塚ゴシック Pr6N", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
}



body {
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: rgba(84,84,84,1.00);
}

.main-inner {
    animation: fadeIn 1s;
    -webkit-animation: fadeIn 1s;
	
	-webkit-transition-timing-function: cubic-bezier(0.470, 0.000, 0.745, 0.715); 
   -moz-transition-timing-function: cubic-bezier(0.470, 0.000, 0.745, 0.715); 
     -o-transition-timing-function: cubic-bezier(0.470, 0.000, 0.745, 0.715); 
        transition-timing-function: cubic-bezier(0.470, 0.000, 0.745, 0.715); /* easeInSine */
	
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


.container {
	padding: 0;
	margin: 0;
	position: inherit;
}

.current-page{
	opacity: 0.7;
}

/*-------------Smart Phone Screen--------------*/
@media screen and (max-width:480px)
{
	body{
		background-color: #424242;
	}
	
	
	.wrap{
		background-color: #424242;
		height: 100%;
		min-width: 300px;
		}
	
	
	/*----------------------------------------------Main----------------------------------------------*/
	.main-inner {
	min-height: 100%;
	height: auto !important; /*Cause footer to stick to bottom in IE 6*/
	height: 100%;
	vertical-align: bottom;
	padding-top: 70px;		/*-------important!!!!!-------*/
	}

	
	
	/*----------------------------------------------Main----------------------------------------------*/
	
	.news-container{
	padding-top: 15px;
	padding-bottom: 40px;
	margin: 0;
	height: 100%;
	width: 100%;
	max-width: 100%;
	background-color: #424242;
	font-size: 10px;
	line-height: 180%;
	color: white;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	
	.filters-wrapper{
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	width: 90%;	   /*same with update-container width*/
	margin: 0 auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;		
	}
	
	.filter-icon{
		cursor: default;
		color: white;
		font-size: 11px;
		text-decoration: none;
		padding: 2px 3px 2px 0;
		
	}
	
	.cut-line{
		margin: 0;
		padding: 2px 0 1px; 
		color: white;
		font-size: 11px;
		vertical-align: text-bottom;
	}
	
	.filter-button a, .filter-button{
	padding: 2px 5px 1px;
	cursor: pointer;
	color: rgba(255,255,255,0.60);
	font-size: 11px;
	text-decoration: none;
	transition: color .2s ease;		
	}
	
	.filter-button a:hover{
	color: white;
	}
	
	.filter-button a:focus, .filter-button a:active{
		color: white;
		border-bottom: 1px rgba(255,255,255,1.00) solid;
	}

	
	
	
	.update-container{
	width: 85%;
	margin: 20px auto 0;
	padding-bottom: 5px;
	padding-top: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	height: calc(100vh - 218px);
	overflow-y: auto;
	border: 5px rgba(255,255,255,0) solid;
	-webkit-box-shadow: 0 0 10px 5px rgba(255,255,255,0.10);
	box-shadow: 0 0 10px 5px rgba(255,255,255,0.10);	

	}
	
	.update-container::-webkit-scrollbar {
		width: 6px;
	}
 
	.update-container::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
		box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
		border-radius: 4px;
	}

	.update-container::-webkit-scrollbar-thumb {
	  background-color: rgba(255,255,255,0.10);
	  -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.1);
	  box-shadow: inset 0 0 1px rgba(0,0,0,0.1);
	  outline: 1px solid white;	
	  border-radius: 4px;
	}
	
	.update-container::-webkit-scrollbar-thumb:hover{
	  background-color: rgba(255,255,255,0.30);
	  -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.1);
	  box-shadow: inset 0 0 1px rgba(0,0,0,0.1);
	  outline: 1px solid white;	
	  border-radius: 4px;
	}

	
	.title a, .additional-explanation a,.to-detail a{
		color: white;
		text-decoration: none;
	}
	
	.title a:hover, .additional-explanation a:hover,.to-detail a:hover{
		opacity: 0.7
	}
	
	.news-container td{
		vertical-align: baseline;
	}
	
	
	.update-container table{
		width: auto;
		table-layout: fixed;
		border-collapse: collapse;
	}
	
	.date, .content{
	padding-top: 15px;
	padding-bottom: 15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;		
	}
	
	.date{
	flex: 0 0 100px;
	text-align: left;
	border-right:  rgba(255,255,255,0.5) 1px solid;
	padding-right: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-variant-ligatures: none;
	letter-spacing: 0.5px;

	}
	
	.content{
	flex: 1 1 auto;
	padding-left: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;		
	}
	
	
	
	
	
	.text{
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	
	.gallary{
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	width: 90%;
	margin: 0 auto;
	padding-top: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	
	.title{
		width: 100%;
		word-break:break-all;
		font-variant-ligatures: none;
		letter-spacing: 1px;
		line-height: 120%;
		position: relative;
	}
	
	.new-icon{
		position: relative;
		left: 3px;
		display: inline-block;
		vertical-align: -12%;
		height: 13px;
	}
	
	.additional-explanation{
		width: 90%;
		margin: 0 auto;
		padding-top: 3px;
		max-width: 550px;
		word-break:break-all;
		font-size: .9em;
		line-height: 120%;
	}
	
	.to-detail{
		width: 90%;
		margin: 0 auto;
		text-align: left;
		font-size: .8em;
		line-height: 110%;
		
	}
	
	.image-content-wrapper{
	display: flex;
	flex-flow: column;
	max-width: 100%;
	width: 100%;
	margin: 0 auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	
	.img-container{
	width: 50px;
	height: 50px;
	margin: 0;
	overflow: hidden;
	cursor: zoom-in;
	border: 1px solid rgba(255,255,255,0.50);
	}
	
	.img-container{
		outline: none;
	}
	
	.img-container img{
		height: 50px;
		min-width: 50px;
		width: 50px;
		object-fit: cover;
		object-position: center bottom;
	}
	
	.img-container:focus{
		outline: none;
	}

	
}


/*-------------Tablet Screen--------------*/
@media only screen and (min-width : 481px) and (max-width : 870px)
{

	.wrap{
		background-color: #424242;
		margin: 0;
		height: 100%;
		}
	
/*---------------------------------------------Main----------------------------------------------*/
	.main-inner {
	min-height: 100%;
	height: auto !important; /*Cause footer to stick to bottom in IE 6*/
	height: 100%;
	vertical-align: bottom;
	padding-top: 125px;				/*-------important!!!!!-------*/
	position: relative;
	z-index: 0;
	}

	.news-container{
	padding-top: 15px;
	padding-bottom: 30px;
	margin: 0;
	height: 100%;
	width: 100%;
	max-width: 100%;
	background-color: #424242;
	font-size: 13px;
	color: white;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	
	.filters-wrapper{
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	width: 75%;	   /*same with update-container width*/
	margin: 0 auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	padding-top: 40px;
	padding-bottom: 30px;
	line-height: 200%;
	}
	
	.filter-icon{
		cursor: default;
		color: white;
		font-size: 12px;
		text-decoration: none;
	}
	
	.cut-line{
		margin: 0px 10px -2px;
		color: white;
		font-size: 14px;
		vertical-align: text-bottom;
	}
	
	.filter-button a, .filter-button{
	padding: 0;
	cursor: pointer;
	color: rgba(255,255,255,0.60);
	font-size: 13px;
	text-decoration: none;
	transition: color .2s ease;	
	font-variant-ligatures: none;
	letter-spacing: 2px;
	}
	
	.filter-button a:hover{
	color: white;
	}
	
	.filter-button a:focus, .filter-button a:active{
		color: white;
		border-bottom: 1px rgba(255,255,255,1.00) solid;
	}

	
	
	
	.update-container{
	width: 75%;
	margin: 20px auto;
	padding-bottom: 50px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;		
	height: calc(100vh - 424px);
	overflow-y: auto;
	border: 5px rgba(255,255,255,0) solid;
	-webkit-box-shadow: 0 0 15px 10px rgba(255,255,255,0.10);
	box-shadow: 0 0 15px 10px rgba(255,255,255,0.10);	

	}
	
	.update-container::-webkit-scrollbar {
		width: 6px;
	}
 
	.update-container::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
		box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
		border-radius: 4px;
	}

	.update-container::-webkit-scrollbar-thumb {
	  background-color: rgba(255,255,255,0.10);
	  -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.1);
	  box-shadow: inset 0 0 1px rgba(0,0,0,0.1);
	  outline: 1px solid white;	
	  border-radius: 4px;
	}
	
	.update-container::-webkit-scrollbar-thumb:hover{
	  background-color: rgba(255,255,255,0.30);
	  -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.1);
	  box-shadow: inset 0 0 1px rgba(0,0,0,0.1);
	  outline: 1px solid white;	
	  border-radius: 4px;
	}

	.title a, .additional-explanation a,.to-detail a{
		color: white;
		text-decoration: none;
	}
	
	.title a:hover, .additional-explanation a:hover,.to-detail a:hover{
		opacity: 0.7
	}
	
	.news-container td{
		vertical-align: baseline;
	}
	
	
	.update-container table{
		width: auto;
		table-layout: fixed;
		border-collapse: collapse;
	}
	
	.date, .content{
	padding-top: 15px;
	padding-bottom: 15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;		
	}
	
	.date{
	flex: 0 0 100px;
	text-align: left;
	border-right: rgba(255,255,255,0.5) 1px solid;
	padding-right: 15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	
	.content{
	flex: 1 1 auto;
	padding-left: 15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;		
	}
	
	
	
	
	
	.text{
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	
	.gallary{
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	width: 70%;
	padding-left: 10px;
	padding-top: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	
	.title{
		width: 100%;
		word-break:break-all;
		font-variant-ligatures: none;
		letter-spacing: 1.5px;
		position: relative;
		line-height: 120%;
	}
	
	.new-icon{
		position: relative;
		left: 5px;
		display: inline-block;
		vertical-align: -15%;
		height: 18px;
	}
	
	.additional-explanation{
	width: 100%;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	max-width: 550px;
	word-break: break-all;
	font-size: .9em;
	line-height: 140%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	
	.to-detail{
		width: 100%;
		margin: 0 auto;
		text-align: left;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding-left: 10px;
		padding-right: 10px;
		font-size: .8em;
		
	}
	
	.image-content-wrapper{
	display: flex;
	flex-flow: column;
	max-width: 100%;
	width: 100%;
	margin: 0 auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	
	.img-container{
	width: 45px;
	height: 45px;
	margin: 0;
	overflow: hidden;
	cursor: zoom-in;
	border: 1px solid rgba(255,255,255,0.50);
	}
	
	.img-container{
		outline: none;
	}
	
	.img-container img{
		height: 45px;
		width: 45px;
		min-width:  45px;
		object-fit: cover;
		object-position: center bottom;
	}

/*---------------------------------------------Main----------------------------------------------*/

}


/*---------------------------------------------------End of Tablet Screen-----------------------------------*/


	
/*-------------PC Screen--------------*/
@media screen and (min-width: 870px)
{
	.wrap{
		background-color: #424242;
		max-width: 1200px;
		margin: 0 auto 0 auto;
		height: 100%;
		min-height: 100%;
		}


/*---------------------------------------------Main----------------------------------------------*/
	.main-inner {
	min-height: 100%;
	height: auto !important; /*Cause footer to stick to bottom in IE 6*/
	height: 100%;
	margin: 0;
	vertical-align: bottom;
	padding-top: 70px;			/*-------important!!!!!-------*/
	background-color: #424242;
	}
	
	.news-container{
	display: flex;
	flex-flow: column;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	padding-top: 15px;
	padding-bottom: 30px;
	margin: 0;
	height: 100%;
	width: 100%;
	max-width: 100%;
	background-color: #424242;
	font-size: 13px;
	color: white;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	
	.filters-wrapper{
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	width: 70%;	   /*same with update-container width*/
	margin: 0 auto;
	padding-top: 25px;
	padding-bottom: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	line-height: 200%;
	}
	
	.filter-icon{
		cursor: default;
		color: white;
		font-size: 12px;
		text-decoration: none;
	}
	
	.cut-line{
		margin: 0px 10px -2px;
		color: white;
		font-size: 14px;
		vertical-align: text-bottom;
	}
	
	.filter-button a, .filter-button{
	padding: 0;
	cursor: pointer;
	color: rgba(255,255,255,0.60);
	font-size: 13px;
	font-variant-ligatures: none;
	letter-spacing: 2px;
	text-decoration: none;
	transition: color .2s ease;		
	}
	
	.filter-button a:hover{
	color: white;
	}
	
	.filter-button a:focus, .filter-button a:active{
		color: white;
		border-bottom: 1px rgba(255,255,255,1.00) solid;
	}
	
	
	
	.update-container{
	width: 70%;
	margin: 30px auto 0;
	padding: 20px 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 5px rgba(255,255,255,0) solid;
	height: calc(100vh - 320px);
	overflow-y: auto;
	-webkit-box-shadow: 0 0 15px 10px rgba(255,255,255,0.10);
	box-shadow: 0 0 15px 10px rgba(255,255,255,0.10);	
	}
	
	.update-container::-webkit-scrollbar {
		width: 6px;
	}
	.update-container::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
		box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
		border-radius: 4px;
	}

	.update-container::-webkit-scrollbar-thumb {
	  background-color: rgba(255,255,255,0.10);
	  -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.1);
	  box-shadow: inset 0 0 1px rgba(0,0,0,0.1);
	  outline: 1px solid white;	
	  border-radius: 4px;
	}
	
	.update-container::-webkit-scrollbar-thumb:hover{
	  background-color: rgba(255,255,255,0.30);
	  -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.1);
	  box-shadow: inset 0 0 1px rgba(0,0,0,0.1);
	  outline: 1px solid white;	
	  border-radius: 4px;
	}
	
	.title a, .additional-explanation a,.to-detail a{
		color: white;
		text-decoration: none;
	}
	
	.title a:hover, .additional-explanation a:hover,.to-detail a:hover{
		opacity: 0.7
	}
	
	.news-container td{
		vertical-align: baseline;
	}
	
	
	.update-container table{
		width: 100%;
		table-layout: fixed;
		border-collapse: collapse;
	}
	
	.date, .content{
	padding-top: 15px;
	padding-bottom: 15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;		
	}
	
	.date{
	width: 7em;
	text-align: center;
	border-right: rgba(255,255,255,0.5) 1px solid;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	
	.content{
	padding-left: 15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;		
	}
	
	
	
	
	
	.text{
	display: flex;
	flex-wrap: wrap;
	flex-flow: column;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	
	.gallary{
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding-top: 8px;
	padding-left: 15px;
	max-width: calc(75px * 5);
	}
	
	.title{
		width: auto;
		word-break:break-all;
		position: relative;
		font-variant-ligatures: none;
		letter-spacing: 1.5px;
	}
	
	.new-icon{
		position: relative;
		left: 5px;
		display: inline-block;
		vertical-align: -15%;
		height: 18px;
	}
	
	.additional-explanation{
	width: auto;
	word-break: break-all;
	font-size: .9em;
	line-height: 140%;
	padding-left: 15px;
	padding-top: 4px;
	padding-right: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	
	.to-detail{
	width: auto;
	margin: 0;
	text-align: left;
	font-size: .9em;
	padding-left: 15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;		
	}
	
	.image-content-wrapper{
	display: flex;
	flex-flow: column;
	max-width: 100%;
	width: 100%;
	margin: 0 auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	
	.img-container{
	width: 75px;
	height: 75px;
	margin: 0;
	overflow: hidden;
	cursor: zoom-in;
	border: 1px solid rgba(255,255,255,0.50);
	}
	
	.img-container{
		outline: none;
	}
	
	.img-container img{
		height: 75px;
		width: 75px;
		min-width: 75px;
		object-fit: cover;
		object-position: center bottom;
	}
	
	
/*---------------------------------------------Main----------------------------------------------*/

/*------------------------------------------------End of PC Screen--------------------------------------------*/
}

@media only screen and (min-width : 870px) and (max-width : 1199px){
	body{
		background-color: #424242;
	}
	
}