@charset "UTF-8";
/*  lib/cmn_css/component.css  */

/*
////////////////// component.css //////////////////
SEC
NEWS UL
WIDTHSETTING

*/

/*----------------------------------------------------
	******SEC******
----------------------------------------------------*/

.linkUL{
	margin-bottom:3em;
}
.linkUL li a{
	display:block;
	border-bottom:1px dotted #ccc;
	position:relative;
	padding:1em 4em 1em 0;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out; /* firefox */
	-webkit-transition: all 0.5s ease-out; /* chrome, safari */
	-ms-transition: all 0.5s ease-out; /* ie */
}
.linkUL li a:hover{
	padding-left:0.5em;
	background:#f6f6f6;
	cursor:pointer;
}
.linkUL li a *{
	vertical-align:bottom;
}
.linkUL li a:before{
	background:url(../../lib/cmn_img/off.png) no-repeat center center;
	content:"";
	transform:rotate(-90deg);
	display:block;
	position:absolute;
	right:20px;
	top:50%;
	margin-top:-5px;
	width:16px;
	height:10px;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out; /* firefox */
	-webkit-transition: all 0.5s ease-out; /* chrome, safari */
	-ms-transition: all 0.5s ease-out; /* ie */
}


.sec{
	min-height:100%;
	width:100%;
	clear:both;
}
.widthSetting{
	padding:80px 100px 50px 280px;
	margin:0 auto;
	transition-duration: 2s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	max-width:1500px;
}
.widthSetting.active{
	padding-left:100px !important;
}


.subUL #small, #large { font-size: 100%; }
.subUL #small:target  { font-size: 80%;  }
.subUL #large:target  { font-size: 120%; }



@media screen and (max-width: 1200px) {
.widthSetting{
	padding:80px 60px 50px 240px;
}
.widthSetting.active{
	padding-left:60px !important;
}
}
@media screen and (max-width: 850px) {
.sec{
	min-height:auto;
	height:auto;
}
.widthSetting{
	padding: 60px 0;
	margin: 0 auto;
	width: 90%;
	margin-bottom:0;
	
}
.widthSetting.active{
	padding-left:0px !important;
}
}


/*----------------------------------------------------
	******NEWS UL******
----------------------------------------------------*/
.newsUL li{
	display:none;
}
.newsUL li.on{
	display:block;
}
.newsUL li a {
	display: block;
	padding: 8px 15px 8px 0;
}
.newsUL li a:hover {
	background: rgba(0,0,0,0.08);
	padding: 8px 0 8px 15px;
}
.newsUL li a > span {
	display: inline-block;
	vertical-align: middle;
}
.newsUL li a .date {
	width: 7em;
}
.newsUL li a .date span {
	color: #002C99 !important;
	font-size: 130%;
	font-style: italic;
}
.newsUL li a .cat {
	margin: 0 20px;
	width: 8em;
}
.newsUL li a .cat span {
	color: #fff !important;
	display: block;
	font-size: 77%;
	text-align: center;
	width: 100%;
}
.newsUL li.cat_01 a .cat {
	background: #5A96A7;
}
.newsUL li.cat_02 a .cat {
	background: #5A6BA7;
}
.newsUL li.cat_03 a .cat {
	background: #A7A24F;
}
.newsUL li.cat_ir_01 a .cat {
	background:#7b6bbf;
}
.newsUL li.cat_ir_02 a .cat {
	background:#c49e54;
}
.newsUL li a .title {
	width: calc(100% - 19em);
}
.newsUL li a .title span {
	color: #454545 !important;
	font-size: 100%;
}

.iconSpan img {
	margin-bottom:-5px;
}
.newsUL li a .newsDate span {
	color: #002C99 !important;
	font-size: 100%;
	font-style: italic;
	bottom:0;
}
.newsUL li a .titleNews {
	width: calc(100% - 190px);
	margin-left:30px;
}
.scrollTable .baseTBL tr th .size10 {
	color:#555;
	font-weight:normal;
	line-height:1.1;
	margin-left:-0.5em;
}
.kessanFontDate {
	font-size:12px;
	margin-left:-0.5em;
}



@media screen and (max-width: 850px) {
.newsUL {
	width: 90%;
	margin: 0 auto 5em;
}
.newsUL li {
	border-bottom: 1px dotted #ccc;
	margin-bottom:1em;
	width:100%;
}
/*.newsUL li:nth-child(even){
	float:right;
}
.newsUL li:nth-child(5) {
	border-bottom: none;
}*/
.newsUL li a .title,
.newsUL li a .titleNews {
	width: 100%;
	margin-left:0;
}
.newsUL li a .date span {
	font-size: 200%;
	font-weight:bold;
}
.newsUL li a .cat {
	display:block;
	text-align:left;
	margin:0 0 1em 0;
	width: 100px;
}
.newsUL li a .cat span {
	font-size: 77%;
	width: 100%;
}
}


/*----------------------------------------------------
	******MAP******
----------------------------------------------------*/
.map{
	position:relative;
	z-index:2;
}
.mapBox{
	margin-left:auto;
	margin-right:auto;
	max-width:800px;
	position:relative;
}
.maiImg{
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	z-index:1;
}
.maiImg.block{
	display:block !important;
}
.maiImg img{
	height:auto;
	width:100%;
}





/*----------------------------------------------------
	******WIDTHSETTING******
----------------------------------------------------*/
/*.widthSetting{
	padding-left:280px;
}
.widthSetting.active{
	padding-left:100px !important;
}
@media screen and (max-width: 850px) {
.widthSetting.active{
	padding-left:0px !important;
}
}
*/