@charset "utf-8";

/*-----------------------------------------
	contents
-----------------------------------------*/

.center { text-align: center !important;}
.right { text-align: right !important;}
.left { text-align: left !important;}

/* hover:saturate */
header h1 a:hover,
header #FB a:hover,
header #BtnLinks li.regist a:hover { opacity: .8; -webkit-filter: saturate(2) hue-rotate(-10deg); filter: saturate(2) hue-rotate(-10deg); }

/* BreadCrunbs */
#BreadCrunbs { border-bottom: 1px solid #DCDDDD; }
#BreadCrunbs ul { margin: 0 auto; padding: 4px 30px; width: 100%; max-width: 1300px; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#BreadCrunbs ul li { display: inline-block; margin: 0 16px 0 0; color: #9fa0a0; font-size: 12px; letter-spacing: 2px; }
#BreadCrunbs ul li:not(:last-child):after { content: "/"; display: inline; position: static; margin: 0 0 0 20px; color: #DCDDDD; }
#BreadCrunbs ul li a { color: #9fa0a0 !important; text-decoration: none; }
#BreadCrunbs ul li a:hover { text-decoration: underline; }
#BreadCrunbs ul li img { margin: 0 0 2px; width: 12px; vertical-align: middle; }
#BreadCrunbs ul li a:hover img { opacity: .6; }

.inner,
#Content,
#PageTitle h2 { position: relative; margin: 0 auto; padding: 25px 30px 0; width: 100%; max-width: 1300px; }

/* Content */
#Content { position: relative; padding: 0 30px; width: 100%; }

#Content article { margin: 0 0 150px; }
#Content article h2 span{ display: block; margin: 15px 0 0; font-size: 18px; letter-spacing: 0; }

/* PageTitle */
#PageTitle { padding: 140px 0; background: center no-repeat; background-size: cover; }
#PageTitle h2 { padding: 0 30px; color: #FFF; font-size: 42px; letter-spacing: 4px; line-height: 1; text-align: left; }

#Staff #PageTitle { background-image: url("/images/staff/title-staff.jpg"); }
#Company #PageTitle { background-image: url("/images/others/title-company.jpg"); }

/* large */
.large { margin: 50px 0 0; text-align: center !important; }
.large button,
.large .btn { padding: 22px 70px 20px; min-width: 515px; height: 80px; font-weight: bold; line-height: 38px; }
.large button:after,
.large .btn:after { right: 30px; }

/* line */
#Content article h2.line { display: inline-block; margin: 0 auto 30px; font-size: 26px; letter-spacing: 1px; }
#Content article h2.line:before,
#Content article h2.line:after { content: ""; position: absolute; bottom: -9px; left: -30px; width: 2px; height: 40px; background: #21205d; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
#Content article h2.line:after { left: auto; right: -30px; -webkit-transform: rotate(45deg); transform: rotate(45deg); }


/*-------------------------------------
	list
-------------------------------------*/

.list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -15px 0 0 -15px; }
.list li { margin: 15px 0 0 15px; width: 32%; width: calc(33.3% - 15px); border: 1px solid #E6E6E6; }

.list li a { display: block; height: 100%; color: #21205d !important; text-decoration: none; }
.list li a:hover { background: #f7f7f7; opacity: .8; }
.list li figure { height: 273px; text-align: center; background: #f7f7f7; overflow: hidden; }
.list li figure img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }

.list li h3 { margin: 10px 12px -2px; padding: 1px 0; color: #221815 !important; font-size: 12px; letter-spacing: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list li p.area { position: absolute; bottom: 15px; left: 20px; width: 82px; height: 70px; font-size: 12px; }
.list li p.area span { display: block; height: 35px; line-height: 35px; text-align: center; }

.list li dl { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 0 15px; padding: 0 0 0 114px; min-height: 85px; }
.list li dt,
.list li dd { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list li dt { padding: 15px 12px 10px 0; width: 100%; font-size: 20px; }
.list li dt strong { margin: 0 3px 0 0; font-size: 27px; }
.list li dd { padding: 1px 12px; width: 50%; font-weight: bold; border-left: 1px solid #DCDDDD; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.list li .text { margin: 15px 12px 0 114px; min-height: 85px; font-size: 12px; line-height: 1.6; }
.list li .text span { display: block; }


/*-------------------------------------
	modalBlock
-------------------------------------*/

.modal { display: none; }

.modalBG { position: fixed; top: 0; left: 0; margin: 0 !important; z-index: 999; height: 100%; width: 100%; background: #222; opacity: 0.5; }

/* modalBlock */
.modalBlock {
	position: fixed;
	top: 20%;
	left: 6%;
	margin: 40px 0 0 0 !important;
	padding: 50px 20px 20px;
	width: 88%;
	height: auto;
	max-height: 60%;
	background: #FFF;
	box-shadow: 0 10px 40px #333;
	overflow-y: auto;
	z-index: 1000;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.modalBlock h2 { margin: 0; font-size: 18px; letter-spacing: 1px; line-height: 1; }
.modalBlock p { margin: 20px 0; color: #21205d; font-size: 12px; font-weight: bold; line-height: 1.6; }
.modalBlock li { margin: 8px 0 0; }
.modalBlock .btn { height: 45px !important; font-size: 15px; line-height: 45px !important; background: #21205d; border-radius: 6px; }

.modalBlock p.close { position: absolute; top: 15px; right: 15px; margin: 0; width: 23px; height: 23px; cursor: pointer; }
.modalBlock p.close:hover { opacity: .6; }

.modal.show .modalBlock { margin-top: 0 !important; }


/*-------------------------------------
	slick
-------------------------------------*/

/* Slider */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list { position: relative; display: block; margin: 0; padding: 0; overflow: hidden; }
.slick-list:focus { outline: none; }
.slick-list.dragging { cursor: pointer; cursor: hand; }

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; }
.slick-track:before,
.slick-track:after { display: table; content: ''; }
.slick-track:after { clear: both; }

.slick-slide { display: none; float: left; margin: 0; height: 100%; }
[dir='rtl'] .slick-slide { float: right; }
.slick-slide img,
.slick-initialized .slick-slide { display: block; }
.slick-slide.slick-loading img,
.slick-arrow.slick-hidden { display: none; }
.slick-slide.dragging img { pointer-events: none; }

.slick-loading .slick-slide,
.slick-loading .slick-track { visibility: hidden; }
.slick-loading .slick-list { background: #fff url('/images/common/ajax-loader.gif') center center no-repeat; }

.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }

/* Arrows */
.slick-prev,
.slick-next {
	display: block;
	position: absolute;
	top: 0;
	left: -100%;
	margin: 0 0 0 30px;
	padding: 0 !important;
	width: 100%;
	height: 100%;
	color: transparent;
	font-size: 0;
	background: rgba(0,0,0,0.5);
	border-radius: 0;
	opacity: .8;
	cursor: pointer;
	z-index: 50;
}
.slick-next,
[dir='rtl'] .slick-next { left: auto; right: -100%; margin: 0 30px 0 0; }
.slick-prev:after,
.slick-next:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -25px;
	width: 20px;
	height: 50px;
	background: url("/images/home/mb_back.png") center no-repeat;
	background-size: 16px 45px;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.slick-next:after { right: auto; left: 10px; background-image: url("/images/home/mb_next.png"); }
.slick-prev:hover,
.slick-next:hover { opacity: 1; }
.slick-prev:hover:after { right: 15px; }
.slick-next:hover:after { left: 15px; }
.slick-prev:active:after { right: 20px; }
.slick-next:active:after { left: 20px; }


/* Dots */
.slick-dotted.slick-slider { margin-bottom: 30px; }

.slick-dots { position: absolute; top: 25px; right: 50px; display: block; padding: 0; margin: 0; font-size: 0; line-height: 0; list-style: none; text-align: center; }
.slick-dots li { display: inline-block; margin: 0 5px; }
.slick-dots li button { display: block; width: 10px; height: 10px !important; min-width: 0; padding: 0 !important; font-size: 0; line-height: 0 !important; cursor: pointer; color: transparent; background: #FFF; border-radius: 0; }
.slick-dots li button:hover { opacity: 1; box-shadow: 0 0 0 1px #FFF; }
.slick-dots li.slick-active button { background: #9fa0a0; }
.slick-dots li.slick-active button:hover { opacity: 1; box-shadow: 0 0 0 1px #9fa0a0; }


/*-------------------------------------
	luminous
-------------------------------------*/

@keyframes lum-fade { 0% { opacity: 0; } 100% { opacity: 1; } }

@keyframes lum-fadeZoom { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

@keyframes lum-loader-rotate { 0% { transform: translate(-50%, -50%) rotate(0); } 50% { transform: translate(-50%, -50%) rotate(-180deg); } 100% { transform: translate(-50%, -50%) rotate(-360deg); } }

@keyframes lum-loader-before {
  0% { transform: scale(1); }
  10% { transform: scale(1.2) translateX(6px); }
  25% { transform: scale(1.3) translateX(8px); }
  40% { transform: scale(1.2) translateX(6px); }
  50% { transform: scale(1); }
  60% { transform: scale(0.8) translateX(6px); }
  75% { transform: scale(0.7) translateX(8px); }
  90% { transform: scale(0.8) translateX(6px); }
  100% { transform: scale(1); }
}

@keyframes lum-loader-after {
  0% { transform: scale(1); }
  10% { transform: scale(1.2) translateX(-6px); }
  25% { transform: scale(1.3) translateX(-8px); }
  40% { transform: scale(1.2) translateX(-6px); }
  50% { transform: scale(1); }
  60% { transform: scale(0.8) translateX(-6px); }
  75% { transform: scale(0.7) translateX(-8px); }
  90% { transform: scale(0.8) translateX(-6px); }
  100% { transform: scale(1); }
}

.lum-lightbox { background: rgba(0, 0, 0, 0.6); z-index: 300; }

.lum-lightbox-inner { top: 2.5%; right: 2.5%; bottom: 2.5%; left: 2.5%; overflow: visible; }
.lum-lightbox-inner img { position: relative; }
.lum-lightbox-inner .lum-lightbox-caption { margin: 10px auto 0; color: #fff; max-width: 700px; text-align: center; }

.lum-loading .lum-lightbox-loader { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 66px; height: 20px; animation: lum-loader-rotate 1800ms infinite linear; }

.lum-lightbox-loader:before,
.lum-lightbox-loader:after { content: ""; display: block; width: 20px; height: 20px; position: absolute; top: 50%; margin-top: -10px; border-radius: 20px; background: rgba(255, 255, 255, 0.9); }
.lum-lightbox-loader:before { left: 0; animation: lum-loader-before 1800ms infinite linear; }
.lum-lightbox-loader:after { right: 0; animation: lum-loader-after 1800ms infinite linear; animation-delay: -900ms; }

.lum-lightbox.lum-opening { animation: lum-fade 180ms ease-out; }
.lum-lightbox.lum-opening .lum-lightbox-inner { animation: lum-fadeZoom 180ms ease-out; }

.lum-lightbox.lum-closing { animation: lum-fade 300ms ease-in; animation-direction: reverse; }
.lum-lightbox.lum-closing .lum-lightbox-inner { animation: lum-fadeZoom 300ms ease-in; animation-direction: reverse; }

.lum-img { transition: opacity 120ms ease-out; }

.lum-loading .lum-img { opacity: 0; }

.lum-gallery-button {
  overflow: hidden;
  text-indent: 150%;
  white-space: nowrap;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  outline: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 100px;
  max-height: 100%;
  width: 60px;
  min-width: 0 !important;
  font-size: 0 !important;
  cursor: pointer;
}
.lum-close-button { position: absolute; right: 5px; top: 5px; width: 32px; height: 32px; opacity: 0.3; }
.lum-close-button:hover { opacity: 1; }
.lum-close-button:before,
.lum-close-button:after { position: absolute; left: 15px; content: " "; height: 33px; width: 2px; background-color: #fff; }
.lum-close-button:before { transform: rotate(45deg); }
.lum-close-button:after { transform: rotate(-45deg); }

.lum-previous-button { left: 12px; opacity: .6; }
.lum-next-button { right: 12px; opacity: .6; }
.lum-previous-button:hover,
.lum-next-button:hover { opacity: 1; }
.lum-gallery-button:after { content: ""; display: block; position: absolute; top: 50%; width: 26px; height: 26px; border-top: 3px solid #FFF; }
.lum-previous-button:after { transform: translateY(-50%) rotate(-45deg); border-left: 3px solid #FFF; box-shadow: -2px 0 rgba(0, 0, 0, 0.2); left: 10%; border-radius: 3px 0 0 0; }
.lum-next-button:after { transform: translateY(-50%) rotate(45deg); border-right: 3px solid #FFF; box-shadow: 2px 0 rgba(0, 0, 0, 0.2); right: 10%; border-radius: 0 3px 0 0; }


/*-------------------------------------
			CSS end
-------------------------------------*/