@charset "utf-8";
/* ===========================================
Common Class
=============================================*/
body main {
  font: 13px/1.231 Helvetica,Arial,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","モリサワ 新ゴ R","Droid Sans",メイリオ,sans-serif;
	line-height: 1.7;
}

/* Clearfix */
.cf:before,
.cf:after {
	content:"";
	display:block;
	overflow:hidden;
}

.cf:after {
	clear:both;
}

.cf {
	zoom:1;
}

/* Hide-txt */
.hide-txt {
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}


/* Cont */

#Cont {
	width: 100%;
	position: relative;
	overflow: hidden;
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
}

#Cont img {
	max-width: none;
	display: inline;
}


/* contents */

#fixedContents {
	position: relative;
	z-index: 1;
}

.contents {
	width: 100%;
	height: 100vh;
	position: relative;
	z-index: 100;
	overflow: hidden;
}

#modalContents {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	display: none;
}

#modalContents > .bg {
	width: 100%;
	height: 100%;
	z-index: 1;
}

#modalContents .modal {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX( -50% ) translateY( -50% );
	transform: translateX( -50% ) translateY( -50% );
}

.scroll-fade-in {
	opacity: 0;
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
}


/* ===========================================
PC
=============================================*/

@media screen and (min-width:961px) {

}

@media screen and (min-width:769px) and (max-width:960px) {

}

@media screen and (min-width:769px) {
	.sp {
		display: none!important;
	}

	/* Cont */

	#Breadcrumb {
		margin-bottom: 0;
	}

	#Main_inner {
		padding-bottom: 20px;
	}

	#Cont {
		min-width: 960px;
	}

	/* topMenu */

	#topMenu {
		width: 100%;
		min-width: 960px;
		height: 60px;
		background-color: rgba(255,255,255,0.3);
		background-repeat: repeat-x;
		background-position: center top;
		overflow: hidden;
		position: absolute;
		top: -146px;
		left: 0;
		z-index: 9999;
		-webkit-transform: translate3d( 0 , 0 , 0 );
		transform: translate3d( 0 , 0 , 0 );
		/* opacity: 0; */
	}

	#topMenu .inner {
		width: 100%;
		max-width: 960px;
		margin: 0 auto;
	}

	#topMenu .drawer {
		display: block!important;
		height: auto!important;
	}

	#topMenu .mainMenu {
		float: left;
		margin-left: 36px;
	}

	#topMenu .mainMenu li {
		height: 60px;
		font-size: 16px;
		line-height: 60px;
		margin-right: 18px;
		display: inline-block;
		position: relative;
	}

	#topMenu .mainMenu li:last-child {
		margin-right: 0;
	}

	#topMenu .mainMenu li:hover:after,
	#topMenu .mainMenu li.current:after {
		content: "";
		width: 100%;
		height: 3px;
		background: #FFF;
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	#topMenu .mainMenu li a {
		color: #FFF;
		display: block;
	}

	#topMenu .mainMenu li a:hover {
		text-decoration: none;
	}

	#topMenu .subMenu {
		text-align: right;
		margin-top: 19px;
		float: right;
	}

	#topMenu .subMenu li {
		margin-left: 16px;
		display: inline-block;
	}

	#topMenu .subMenu li:first-child {
		margin-left: 0;
	}

	/* topMain */

	#topMain {
		width: 100%;
		height: 100vh;
		/*min-height: 678px;*/
		height: 624px !important;
		border-bottom: 1px solid rgba(255,255,255,0.3);
		margin-bottom: -1px;
		overflow: hidden;
		position: relative;
		z-index: 999;
	}

	#topMain #topNews {
		width: 100%;
		height: 52px;
		background-color: rgba(255,255,255,0.3);
		background-repeat: repeat-x;
		background-position: center bottom;
		position: absolute;
		bottom: -146px;
		left: 0;
		z-index: 5;
	}

	#topMain #topNews .inner {
		width: 100%;
		height: 52px;
		max-width: 960px;
		margin: 0 auto;
		position: relative;
	}

	#topMain #topNews .news p {
		height: 52px;
		font-size: 14px;
		font-weight: bold;
		line-height: 52px;
		padding-left: 44px;
		position: relative;
	}

	#topMain #topNews .news p:before {
		content: "";
		width: 27px;
		height: 27px;
		background-repeat: no-repeat;
		background-position: center center;
		position: absolute;
		top: 13px;
		left: 3px;
	}

	#topMain #topNews .news p span {
		opacity: 0.8;
	}

	#topMain #topNews .news p a {
		color: #FFF;
	}

	#topMain #topNews .news p .body {
		color: #FFF;
		margin-left: 8px;
	}

	#topMain #topNews .news p .pc {
		display: inline;
	}

	#topMain #topNews .news p .detail {
		color: #FFF;
		padding-right: 16px;
		margin-left: 20px;
		position: relative;
	}

	#topMain #topNews .news p .detail:after {
		content: "";
		width: 7px;
		height: 15px;
		background: url("../images/top_news_arrow.png") no-repeat right center;
		position: absolute;
		top: 0;
		right: 0;
	}

	#topMain #topNews .campaign {
		position: absolute;
		right: 19px;
		bottom: 0;
	}

	.contents {
		min-width: 960px;
		min-height: 600px;
	}

	#modalContents .btnClose {
		width: 49px;
		height: 49px;
		position: absolute;
		z-index: 999;
		cursor: pointer;
	}

	#modalContents .btnClose img {
		width: 100%;
		height: auto;
		-webkit-transition: 0.25s ease-in-out;
		transition: 0.25s ease-in-out;
	}

	#modalContents .btnClose:hover img {
		opacity: .75;
		-webkit-transition: 0.25s ease-in-out;
		transition: 0.25s ease-in-out;
	}

	#modalContents {
		min-width: 960px;
	}

	#modalContents .modal {
		margin-top: 30px;
	}

	.modal .slick-slide {
		border: none;
		outline: none;
	}

	.modal .slick-prev,
	.modal .slick-next
	{
		width: 10px;
		height: 20px;
		background: transparent;
		border: none;
		outline: none;
		color: transparent;
		font-size: 0;
		line-height: 0;
		z-index: 99;
		padding: 0;
		position: absolute;
		bottom: 0;
		display: block;
		cursor: pointer;
	}
	.modal .slick-prev:hover,
	.modal .slick-prev:focus,
	.modal .slick-next:hover,
	.modal .slick-next:focus
	{
		color: transparent;
		outline: none;
		background: transparent;
	}
	.modal .slick-prev:hover:before,
	.modal .slick-next:hover:before
	{
		opacity: .75;
	}
	.modal .slick-prev.slick-disabled:before,
	.modal .slick-next.slick-disabled:before
	{
		opacity: .25;
	}

	.modal .slick-prev:before,
	.modal .slick-next:before
	{
		width: 100%;
		height: 100%;
		background-position: center center;
		background-repeat: no-repeat;
		display: block;
	}

	.modal .slick-prev
	{
		right: 78px;
	}
	.modal [dir='rtl'] .slick-prev
	{
		right: 0;
		left: auto;
	}
	.modal .slick-prev:before
	{
		content: '';
	}
	.modal [dir='rtl'] .slick-prev:before
	{
		content: '';
	}

	.modal .slick-next
	{
		right: 0;
	}
	.modal [dir='rtl'] .slick-next
	{
		right: auto;
		left: 0;
	}
	.modal .slick-next:before
	{
	content: '';
	}
	.modal [dir='rtl'] .slick-next:before
	{
		content: '';
	}

	.modal .slick-dotted.slick-slider
	{

	}

	.modal .slick-dots
	{
		width: 68px;
		list-style: none;
		text-align: center;
		padding: 0;
		margin: 0;
		position: absolute;
		bottom: 3px;
		right: 10px;
		display: block;
	}
	.modal .slick-dots li
	{
		width: 6px;
		height: 6px;
		margin: 0 2px;
		padding: 0;
		position: relative;
		display: inline-block;
		cursor: pointer;
	}
	.modal .slick-dots li button
	{
		width: 6px;
		height: 6px;
		background: transparent;
		border: 0;
		outline: none;
		font-size: 0;
		line-height: 0;
		color: transparent;
		padding: 0;
		display: block;
		cursor: pointer;
	}
	.modal .slick-dots li button:hover,
	.modal .slick-dots li button:focus
	{
		outline: none;
	}
	.modal .slick-dots li button:hover:before,
	.modal .slick-dots li button:focus:before
	{
		opacity: .75;
	}
	.modal .slick-dots li button:before
	{
		content: '';
	    width: 6px;
	    height: 6px;
		background-color: #FFF;
		opacity: .5;
	    position: absolute;
	    top: 0;
	    left: 0;
	   display: block;
	   border-radius: 50%;
	}
	.modal .slick-dots li.slick-active button:before
	{
    	opacity: 1.0;
	}

	.modal .slick-prev:before
	{
		background-image: url("../images/modal_btn_arrow_l.png");
	}
	.modal [dir='rtl'] .slick-prev:before
	{
		background-image: url("../images/modal_btn_arrow_r.png");
	}
	.modal .slick-next:before
	{
		background-image: url("../images/modal_btn_arrow_r.png");
	}
	.modal [dir='rtl'] .slick-next:before
	{
		background-image: url("../images/modal_btn_arrow_l.png");
	}

	.modal .carousel {
		width: 100%;
		height: 540px;
	}

	.modal .carousel .slick-list {
		height: 540px;
		max-width: 960px;
		margin: 0 auto;
		position: relative;
	}

}


/* ===========================================
TABLET
=============================================*/

@media screen and (min-width:641px) and (max-width:768px) {

}

/* ===========================================
SP
=============================================*/

@media screen and (max-width:768px) {
	.pc {
		display: none!important;
	}

	#Breadcrumb {
		margin-bottom: 0;
	}

	#Main_inner {
		padding-bottom: 20px;
	}

	/* topMenu */

	#topMenu {
		width: 100%;
		height: 48px;
		border-bottom: 1px solid rgba(255,255,255,0.3);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9999;
		-webkit-transform: translate3d( 0 , 0 , 0 );
		transform: translate3d( 0 , 0 , 0 );
	}

	#btnMenu {
		width: 19px;
		height: 11px;
		position: absolute;
		top: 18px;
		right: 15px;
		cursor: pointer;
	}

	#btnMenu,
	#btnMenu span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	#btnMenu span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: #fff;
	}
	#btnMenu span:nth-of-type(1) {
		top: 0;
	}
	#btnMenu span:nth-of-type(2) {
		bottom: 0;
	}
	#btnMenu.active span:nth-of-type(1) {
		-webkit-transform: translateY(4px) rotate(-45deg) skewX(45deg);
		transform: translateY(4px) rotate(-45deg) skewX(45deg);
	}
	#btnMenu.active span:nth-of-type(2) {
		-webkit-transform: translateY(-4px) rotate(45deg) skewX(-45deg);
		transform: translateY(-4px) rotate(45deg) skewX(-45deg);
	}

	#topMenu .drawer {
		width: 100%;
		height: 0vh;
		border-top: 1px solid rgba(255,255,255,0.3);
		position: absolute;
		top: 48px;
		left: 0;
		overflow: hidden;
		display: none;
	}

	#topMenu .mainMenu {
		height: calc( 100vh - 49px );
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		border-bottom: 1px solid rgba(255,255,255,0.3);
	}

	#topMenu .mainMenu li {
		width: 81.866%;
		height: 52px;
		background-image: url("../images/sp/menu_arrow.png");
		background-position: right center;
		background-repeat: no-repeat;
		background-size: 8px 17px;
		font-size: 17px;
		font-weight: bold;
		line-height: 52px;
		text-align: center;
		margin: 0 auto;
		position: relative;
	}

	#topMenu .mainMenu li:after {
		content: "";
		width: 100%;
		height: 1px;
		background: -webkit-gradient(linear, left top, right top, color-stop(1.00, rgba(255,255,255,0.0)), color-stop(0.75, rgba(255,255,255,0.3)), color-stop(0.25, rgba(255,255,255,0.3)), color-stop(0.00, rgba(255,255,255,0.0)));
		background: -webkit-linear-gradient(left, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.3) 25%, rgba(255,255,255,0.3) 75%, rgba(255,255,255,0.0) 100%);
		background: -moz-linear-gradient(left, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.3) 25%, rgba(255,255,255,0.3) 75%, rgba(255,255,255,0.0) 100%);
		background: -o-linear-gradient(left, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.3) 25%, rgba(255,255,255,0.3) 75%, rgba(255,255,255,0.0) 100%);
		background: -ms-linear-gradient(left, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.3) 25%, rgba(255,255,255,0.3) 75%, rgba(255,255,255,0.0) 100%);
		background: linear-gradient(to right, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.3) 25%, rgba(255,255,255,0.3) 75%, rgba(255,255,255,0.0)100%);
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	#topMenu .mainMenu li:last-child:after {
		content: none;
	}

	#topMenu .mainMenu li a {
		color: #FFF;
		display: block;
	}

	#topMenu .mainMenu li img {
		width: auto;
		height: 51px;
	}

	#topMenu .mainMenu .btnLink {
		width: 100%;
		height: 51px;
		line-height: 52px;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		position: relative;
	}

	#topMenu .mainMenu .btnLink:before {
		content: "";
		width: 100%;
		height: 1px;
		background-color: rgba(255,255,255,0.3);
		display: block;
		position: absolute;
		top: 0;
		left: 0;
	}

	#topMenu .mainMenu .btnLink a {
		width: 81.866%;
		height: 52px;
		/* background-image: url("../images/sp/menu_blank.png");
		background-position: right center;
		background-repeat: no-repeat;
		background-size: 15px 12px; */
		background-image: url("../images/sp/menu_arrow.png");
		background-position: right center;
		background-repeat: no-repeat;
		background-size: 8px 17px;
		line-height: 52px;
		text-align: center;
		margin: 0 auto;
		position: relative;
		display: block;
	}


	/* topMain */

	#topMain {
		width: 100%;
		height: 100vh;
		min-height: 480px;
		border-bottom: 1px solid rgba(255,255,255,0.3);
		margin-bottom: -1px;
		overflow: hidden;
		position: relative;
		z-index: 999;
	}

	#topMain > .inner {
		width: 100%;
		/* height: calc( 100% - 48px - 22vw - 38px ); */
		height: calc( 100% - 48px - 18.6667vw - 38px );
		position: absolute;
		top: 48px;
		left: 0;
		overflow: hidden;
	}

	#topMain #topNews {
		width: 100%;
		background-color: #FFF;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 5;
	}

	#topMain #topNews .inner {
		width: 100%;
		margin: 0 auto;
		position: relative;
		oveflow: hidden;
	}

	#topMain #topNews .banner {
		border-top: 2px solid #FFF;
		text-align: center;
		position: relative;
		z-index: 1;
	}

	#topMain #topNews .banner li {
		/* width: calc( 50% - 1px ); */
		width: 100%;
		display: inline-block;
	}

	#topMain #topNews .banner li:first-child {
		/* margin-right: 2px; */
	}

	#topMain #topNews .banner li img {
		width: 100%;
		height: auto;
	}

	#topMain #topNews .news {
		height: 40px;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		border-top: 1px solid rgba(255,255,255,0.3);
		margin-top: -1px;
		position: relative;
		z-index: 2;
	}

	#topMain #topNews .news p {
		height: 40px;
		font-size: 11px;
		font-weight: bold;
		line-height: 40px;
		padding-left: 30px;
		position: relative;
	}

	#topMain #topNews .news p:before {
		content: "";
		width: 18px;
		height: 18px;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 18px;
		position: absolute;
		top: 11px;
		left: 5px;
	}

	#topMain #topNews .news p span {
		opacity: 0.8;
	}

	#topMain #topNews .news p a {
		color: #FFF;
	}

	#topMain #topNews .news p .body {
		color: #FFF;
		margin-left: 8px;
	}

	#topMain #topNews .news p .detail {
		font-size: 9px;
		color: #FFF;
		padding-right: 11px;
		margin-left: 12px;
		position: absolute;
		right: 5px;
		top: 0;
		display: inline-block;
	}

	#topMain #topNews .news p .detail:after {
		content: "";
		width: 5px;
		height: 10px;
		background-image: url("../images/sp/top_news_arrow.png");
		background-repeat: no-repeat;
		background-position: right center;
		background-size: 5px 10px;
		margin-top: -5px;
		position: absolute;
		top: 50%;
		right: 0;
	}

	.contents {
		min-height: 600px;
	}

	#modalContents .btnClose {
		width: 35px;
		height: 35px;
		position: absolute;
		top: 48px;
		right: 0;
		z-index: 999;
		cursor: pointer;
	}

	#modalContents .btnClose img {
		width: 100%;
		height: auto;
		-webkit-transition: 0.25s ease-in-out;
		transition: 0.25s ease-in-out;
	}

	#modalContents .btnClose:hover img {
		opacity: .75;
		-webkit-transition: 0.25s ease-in-out;
		transition: 0.25s ease-in-out;
	}

	#modalContents {

	}

	#modalContents .modal {
		margin-top: 24px;
	}

	.modal .slick-slide {
		border: none;
		outline: none;
	}

	.modal .slick-prev,
	.modal .slick-next
	{
		width: 8px;
		height: 16px;
		background: transparent;
		border: none;
		outline: none;
		color: transparent;
		font-size: 0;
		line-height: 0;
		z-index: 99;
		padding: 0;
		position: absolute;
		bottom: -27px;
		display: block;
		cursor: pointer;
	}
	.modal .slick-prev:hover,
	.modal .slick-prev:focus,
	.modal .slick-next:hover,
	.modal .slick-next:focus
	{
		color: transparent;
		outline: none;
		background: transparent;
	}
	.modal .slick-prev:hover:before,
	.modal .slick-next:hover:before
	{
		opacity: .75;
	}
	.modal .slick-prev.slick-disabled:before,
	.modal .slick-next.slick-disabled:before
	{
		opacity: .25;
	}

	.modal .slick-prev:before,
	.modal .slick-next:before
	{
		width: 100%;
		height: 100%;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		display: block;
	}

	.modal .slick-prev
	{
		left: 50%;
		margin-left: -35px;
	}
	.modal [dir='rtl'] .slick-prev
	{
		right: 50%;
		margin-right: -35px;
		left: auto;
		margin-left: 0;
	}
	.modal .slick-prev:before
	{
		content: '';
	}
	.modal [dir='rtl'] .slick-prev:before
	{
		content: '';
	}

	.modal .slick-next
	{
		right: 50%;
		margin-right: -35px;
	}
	.modal [dir='rtl'] .slick-next
	{
		right: auto;
		margin-right: 0;
		left: 50%;
		margin-left: -35px;
	}
	.modal .slick-next:before
	{
	content: '';
	}
	.modal [dir='rtl'] .slick-next:before
	{
		content: '';
	}

	.modal .slick-dotted.slick-slider
	{

	}

	.modal .slick-dots
	{
		width: 54px;
		list-style: none;
		text-align: center;
		padding: 0;
		margin: 0 0 0 -27px;
		position: absolute;
		bottom: -25px;
		left: 50%;
		display: block;
	}
	.modal .slick-dots li
	{
		width: 5px;
		height: 5px;
		margin: 0 2px;
		padding: 0;
		position: relative;
		display: inline-block;
		cursor: pointer;
	}
	.modal .slick-dots li button
	{
		width: 5px;
		height: 5px;
		background: transparent;
		border: 0;
		outline: none;
		font-size: 0;
		line-height: 0;
		color: transparent;
		padding: 0;
		display: block;
		cursor: pointer;
	}
	.modal .slick-dots li button:hover,
	.modal .slick-dots li button:focus
	{
		outline: none;
	}
	.modal .slick-dots li button:hover:before,
	.modal .slick-dots li button:focus:before
	{
		opacity: .75;
	}
	.modal .slick-dots li button:before
	{
		content: '';
	    width: 5px;
	    height: 5px;
		background-color: #FFF;
		opacity: .5;
	    position: absolute;
	    top: 0;
	    left: 0;
	   display: block;
	   border-radius: 50%;
	}
	.modal .slick-dots li.slick-active button:before
	{
    	opacity: 1.0;
	}

	.modal .slick-prev:before
	{
		background-image: url("../images/sp/modal_btn_arrow_l.png");
	}
	.modal [dir='rtl'] .slick-prev:before
	{
		background-image: url("../images/sp/modal_btn_arrow_r.png");
	}
	.modal .slick-next:before
	{
		background-image: url("../images/sp/modal_btn_arrow_r.png");
	}
	.modal [dir='rtl'] .slick-next:before
	{
		background-image: url("../images/sp/modal_btn_arrow_l.png");
	}

	.modal .carousel {
		width: 100%;
	}

	.modal .carousel .slick-list {
		margin: 0 auto;
		position: relative;
	}

}

@media screen and (max-width:640px) {

}