@charset "utf-8";
/* ---------------------------------------------------------------------------------
copyright EXCEL All rights reserved.

HTML CSS Selectors common 

$Revision: 1.0 $
--------------------------------------------------------------------------------- */

/*---------------------------------------------------------------------------------
初期設定
--------------------------------------------------------------------------------- */
body {
	font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color: #000;
	line-height: 1.8;
	font-size: 12px;
	margin: 0px;
	padding: 0px;
}
h1, h2, h3, h4, h5, h6, ul, ol, dl, p, li, dt, dd, th, td {
	margin: 0px;
	padding: 0px;
	border: 0;
	vertical-align: baseline;
	font-weight: normal;
	font-size: 100%;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
th, td {
	text-align: left;
	vertical-align: top;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
	display: block;
	margin: 0px;
	padding: 0px;
}
img {
	vertical-align: middle;
}
img:not([width]) {
	width: 100%;
	height: auto;
}
a img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
a:link, a:visited, a:hover, a:active {
	color: #000;
	text-decoration: none;
}
a:hover {
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	opacity: 0.5;
}
ul {
	list-style-type: none;
}
.clear {
	clear: both;
	height: 0;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
}
.none {
	display: none !important;
}
.anchor {
	display: block;
	position: relative;
	top: -150px;
}
.justifyleft {
	float: left;
	padding-right: 20px;
}
.justifyright {
	float: right;
	padding-left: 20px;
}
.font-min {
	font-family: 'Libre Baskerville',"Sawarabi Mincho", serif;
	font-weight: 600;
}

/*---------------------------------------------------------------------------------
ヘッダー
--------------------------------------------------------------------------------- */
#header-wrapper {
	width: 100%;
	min-width: 1200px;
	padding-bottom: 70px;
	position: relative;
}
#header-wrapper #mv {
	width: 100%;
	height: 450px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
#header-wrapper header {
	width: 100%;
	height: 70px;
	background-color: rgba(0,0,0,0.7);
	position: absolute;
	z-index: 101;
	top: 450px;
	left: 0;
}
#header-wrapper header.fixed {
	position: fixed;
	top: 0;
}
#header-wrapper header .inner {
	width: 900px;
	margin: 0 auto;
	overflow: hidden;
}
#header-wrapper h1 {
	padding: 15px 0px 0px 5px;
	float: left;
	width: 126px;
}
#header-wrapper nav {
	float: right;
	padding-top: 26px;
}
#header-wrapper nav ul {
	overflow: hidden;
}
#header-wrapper nav ul li {
	padding-left: 28px;
	float: left;
}
#header-wrapper nav ul li a {
	font-family: 'Libre Baskerville', serif;
	font-size: 13px;
	line-height: 1;
	color: #fff;
	font-weight: bold;
}
#header-wrapper nav ul li i {
	font-size: 17px;
}
/*---------------------------------------------------------------------------------
コンテンツ
--------------------------------------------------------------------------------- */
.topicpath {
	width: 900px;
	margin: 0 auto;
	padding: 15px 0px 70px;
	font-size: 12px;
	line-height: 1;
	color: #666;
}
.topicpath span, .topicpath a {
	font-size: 12px;
	line-height: 1;
	color: #666;
}

#contents-wrapper {
	padding-bottom: 95px;
}

#contents-wrapper .title {
	font-family: 'Libre Baskerville', serif;
	font-size: 42px;
	line-height: 1;
	font-weight: bold;
	text-align: center;
}
#contents-wrapper .title .en {
	display: block;
	font-family: 'Calligraffitti', cursive;
	font-size: 14px;
	line-height: 1;
	text-align: center;
	padding-top: 20px;
}
#contents-wrapper .title .font-min {
	display: block;
	font-size: 14px;
	line-height: 1;
	padding-top: 20px;
}


.move-bar {
	width: 0%;
    height: 1px;
	background: #df0000;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: 0.8s ease-in-out;
	-moz-transition: 0.8s ease-in-out;
	-o-transition: 0.8s ease-in-out;
	transition: 0.8s ease-in-out;
}
.move-bar.show {
    width: 100%;
}

/*ページ送り*/
.pagenation {
	text-align: center;
}
.pagenation span,
.pagenation a {
	display: inline-block;
	padding: 0px 5px;
	font-family: 'Libre Baskerville', serif;
	font-size: 14px;
	line-height: 1;
	font-weight: 300;
}
.pagenation a i {
	font-size: 18px;
}
.pagenation .ditto_page{
	color: #E1E1E1;
}

/*hover*/
a.hover-wrap div {
	box-sizing: border-box;
	position: relative;
	z-index: 2;
	opacity: 0;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
a.hover-wrap:hover div {
	background-color: rgba(0,0,0,0.70);
		opacity: 1;
}
a.hover-wrap div .txt {
	box-sizing: border-box;
	display: table-cell;
	font-size: 13px;
	line-height: 2;
	text-align: center;
	vertical-align: middle;
	color: #fff;
	padding-top: 0;
	margin: 0 auto;
}
a.hover-wrap div .view {
	display: table-cell;
	font-size: 28px;
	line-height: 1;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	color: #fff;
	padding-top: 0;
}

.borders-lt:before,
.borders-lt:after,
.borders-rb:before,
.borders-rb:after {
	display: block;
	width: 0;
	height: 0;
	content:"";
	position: absolute;
	-webkit-transition: all 600ms cubic-bezier(1, 0, 0, 1);
    -moz-transition: all 600ms cubic-bezier(1, 0, 0, 1);
    -o-transition: all 600ms cubic-bezier(1, 0, 0, 1);
    transition: all 600ms cubic-bezier(1, 0, 0, 1);
    -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
    -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
    -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
    transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.borders-lt:before {
	border-left: 1px solid #fff;
}
.borders-lt:after {
	border-top: 1px solid #fff;
}
.borders-rb:before {
	border-right: 1px solid #fff;
}
.borders-rb:after {
	border-bottom: 1px solid #fff;
}
/*---------------------------------------------------------------------------------
フッター
--------------------------------------------------------------------------------- */
#page-top {
	position: fixed;
	right: 80px;
	bottom: 35px;
	transition: 0.5s;
	transform: rotatey(270deg);
	z-index: 20;
}
#footer-wrapper {
	width: 100%;
	min-width: 1200px;
	height: 240px;
	overflow:hidden;
	background-color: #000;
	padding: 40px 0px 20px;
}
#footer-wrapper footer {
	width: 900px;
	margin: 0 auto;
	position: relative;
}
#footer-wrapper h2 {
	width: 90px;
	padding-bottom: 40px;
	margin: 0 auto;
}
#footer-wrapper ul {
	text-align: center;
	letter-spacing: -.40em; /* 文字間を詰めて隙間を削除する */
	padding-bottom: 28px;
}
#footer-wrapper ul li {
	display: inline-block;
	letter-spacing: normal; /* 文字間を通常に戻す */
	padding: 0px 24px;
	border-right: 1px solid #fff;
}
#footer-wrapper ul li:last-child {
	border-right: none;
}
#footer-wrapper ul li a {
	font-family: 'Libre Baskerville', serif;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
}
#footer-wrapper .sns {
	text-align: center;
	padding-bottom: 26px;
}
#footer-wrapper .sns a {
	padding: 0px 20px;
	font-size: 24px;
	line-height: 1;
	color: #fff;
	font-weight: normal;
}
#footer-wrapper .anc-recruit {
	position: absolute;
	right: 0;
	bottom: 50px;
}
#footer-wrapper #copyright {
	text-align: center;
}

/*---------------------------------------------------------------------------------
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;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.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;
}
.slick-track:before, .slick-track:after {
	display: table;
	content: '';
}
.slick-track:after {
	clear: both;
}
.slick-loading .slick-track {
	visibility: hidden;
}
.slick-slide {
	display: none;
	float: left;
	height: 100%;
	min-height: 1px;
}
[dir='rtl'] .slick-slide {
	float: right;
}
.slick-slide img {
	display: block;
}
.slick-slide.slick-loading img {
	display: none;
}
.slick-slide.dragging img {
	pointer-events: none;
}
.slick-initialized .slick-slide {
	display: block;
}
.slick-loading .slick-slide {
	visibility: hidden;
}
.slick-vertical .slick-slide {
	display: block;
	height: auto;
	border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
	display: none;
}
.slick-prev, .slick-next {
	width: 32px;
	height: 60px;
	background-image: url(../img/common/btn_slide.png);
	background-color: transparent !important;
	position: absolute;
	top: 50%;
	margin-top: -30px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	border: none;
	cursor: pointer;
	font-size: 0;
	line-height: 0;
	z-index: 20;
}
.slick-prev {
	background-position: left top;
}
.slick-next {
	background-position: right top;
}
.slick-prev:before, .slick-next:before {
	display: none !important;
}
.slick-prev:active, .slick-next:active {
	border: none;
}
.slick-disabled {
	display: none !important;
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
	outline: none;
	opacity: 0.5;
}
.slick-dots {
	position: absolute;
}
.slick-dots li {
	position: relative;
	width: 16px;
	height: 16px;
	margin-top: 24px;
	padding: 0;
	cursor: pointer;
	background-color: #DDD;
}
.slick-dots li button {
	font-size: 0;
	line-height: 0;
	display: block;
	width: 16px;
	height: 16px;
	cursor: pointer;
	color: transparent;
	outline: none;
	background: transparent;
	visibility: hidden;
}
.slick-dots li button:hover, .slick-dots li button:focus {
	outline: none;
}
.slick-dots li.slick-active {
	background-color: #B50029;
}

/*---------------------------------------------------------------------------------
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
--------------------------------------------------------------------------------- */
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#fff; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxTopLeft{width:25px; height:25px; background:url(../img/images/border1.png) no-repeat 0 0;}
    #cboxTopCenter{height:25px; background:url(../img/images/border1.png) repeat-x 0 -50px;}
    #cboxTopRight{width:25px; height:25px; background:url(../img/images/border1.png) no-repeat -25px 0;}
    #cboxBottomLeft{width:25px; height:25px; background:url(../img/images/border1.png) no-repeat 0 -25px;}
    #cboxBottomCenter{height:25px; background:url(../img/images/border1.png) repeat-x 0 -75px;}
    #cboxBottomRight{width:25px; height:25px; background:url(../img/images/border1.png) no-repeat -25px -25px;}
    #cboxMiddleLeft{width:25px; background:url(../img/images/border2.png) repeat-y 0 0;}
    #cboxMiddleRight{width:25px; background:url(../img/images/border2.png) repeat-y -25px 0;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:20px;}
        #cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#999;}
        #cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;}
        #cboxLoadingOverlay{background:#fff url(../img/images/loading.gif) no-repeat 5px 5px;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
        #cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;}
        #cboxNext{position:absolute; bottom:0px; left:63px; color:#444;}
        #cboxClose{position:absolute; top:0px; right:10px; display:block; color:#444;font-size: 25px;width: 25px;height: 25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

/*---------------------------------------------------------------------------------
ローダー
--------------------------------------------------------------------------------- */
/*#wrap {
	display: none;
}
#loader-bg {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: #fff;
	z-index: 201;
	background-image: url(../img/common/op_logo.svg);
	background-size: 150px auto;
	background-repeat: no-repeat;
	background-position: center center
}

.loader-bar {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: #df0000;
	margin: auto;
	animation: show 0.5s both;
}
@keyframes show {
 0% {
 -webkit-transform: translateX(-100%);
 -ms-transform: translateX(-100%);
 transform: translateX(-100%);
}
 100% {
 -webkit-transform: translateX(0%);
 -ms-transform: translateX(0%);
 transform: translateX(0%);
}
}*/