@charset "utf-8";

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html{font-family:Arial,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ ProN W3,Meiryo,Helvetica,メイリオ,sans-serif;font-size:88%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{color:#000;background-color:transparent;text-decoration:none}a:active,a:hover{color:#000;outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:bottom;max-width:100%;height:auto}svg:not(:root){overflow:hidden}figure{margin:0}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace;font-size:1em}li{list-style:none}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}img {backface-visibility: hidden;}


/* template style ----------------------*/

body {
	font-size: 14px;
	color:#323232;
	overflow-x:hidden;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
    background:#1d3963;
	margin: auto;
	padding: 0;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝","Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
}

/* 「商談みちびき隊2」で吐き出される画像非表示 */
body > img {
    display: none;
}

h1,h2,h3,h4,h5,h6,p,th,td,a {
	font-feature-settings: "palt" 1;
	letter-spacing: 1px;
}
h1,h2,h3,h4,h5,h6,th { font-weight: normal; }

#wrapper { position:relative; }
.sp-bl,
.sp-il,
.tablet-bl {
	display:none;
}

.inner {
	width:95%;
	max-width:1000px;
	margin-right:auto;
	margin-left:auto;
	position:relative;
}
.opa { transition: 0.3s ease-in-out; }
.opa:hover {
	opacity: 0.85;
	filter: alpha(opacity=85);
}
.opa1 { opacity: 1 !important; }
.w100 { width: 100% !important; }
.h100 { height: 100% !important; }
.none { display: none !important }

.clearfix:before,
.clearfix:after,
.cf:before,
.cf:after {
	content: "";
	display: table;
}
.clearfix:after,
.cf:after {
	clear: both;
}
.clearfix,
.cf {
	zoom: 1;
}

.noHover {
	pointer-events: none;
}

/* header ----------------------*/

#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 300;
	height: 80px;
	transition-duration: .4s;
	transition-timing-function: ease-in-out;
}
#header.scrolled {
	background: rgba(0,0,0,.7);
}
	#header h1 {
		width: 146px;
		line-height: 1;
		margin-left: 20px;
	}
		#header h1 a {
			display: block;
			padding-top: 25px;
			padding-bottom: 25px;
			position: relative;
		}

/* main ------------------------*/

.photo,figure {
	position: relative;
}
.main .p-caption,figcaption {
	position: absolute;
	font-size: 10px;
	text-align: right;
	right: 0;
	bottom: 0;
	padding: 3px 8px;
    line-height: 1.6;
}
.main .p-caption.w,figcaption.w {
	color: #fff;
    padding: 0px 8px;
    background: rgba(0,0,0,.5);
}
.main .p-caption.b,figcaption.b {
	color: #000;
	padding: 0px 8px;
    background: rgba(255,255,255,.5);
}

.under .mv {
	width: 100%;
	height: 350px;
	position: relative;
}
	.under .mv .ttl {
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: auto;
		transform: translate(-50%, -50%);
		width: 100%;
	}
		.under .mv .ttl ul {
			overflow: hidden;
		    margin-bottom: 10px;
		}
		.under .mv .ttl li {
			font-size: 36px;
			font-family: 'Amiri', serif;
			color: #fff;
		    line-height: 1;
	        letter-spacing: 2.5px;
	        opacity: 0;
	        display: inline-block;
		}
		.under .mv .ttl h2 {
			opacity: 0;
			color: #fff;
			font-size: 14px;
		    letter-spacing: 2px;
			font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
		}
	.under .mv .bar {
		width: 1px;
		height: 0px;
		position: absolute;
		top: calc(100% - 25px);
		right: 0;
		left: 0;
		margin: auto;
		background:rgba(255,255,255,.5);
	    z-index: 2;
	    transition-duration: .6s;
		transition-timing-function: cubic-bezier(.82,.06,.23,1);
	}
	.under .mv.animeEnd .bar {
		height: 50px;
	}

.contents {
	position: relative;
}
	.contents p {
		font-size: 14px;
		line-height: 2.15;
	}

.bg_grad {
	background: rgb(38,56,102); /* Old browsers */
	background: -moz-linear-gradient(left, rgba(38,56,102,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(38,56,102,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(38,56,102,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#263866', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}
	.bg_grad h2,
	.bg_grad h3,
	.bg_grad h4,
	.bg_grad h5,
	.bg_grad h6,
	.bg_grad p,
	.bg_grad li,
	.bg_grad a,
	.bg_grad span {
		color: #fff;
	}

.bg_polygon {
	background:url(../img/common/pc/bg-polygon.jpg) top left;
	background-size: 556px 429px;
}

	#breadcrumb {
		position: absolute;
		top: 20px;
		width: 95%;
	    margin-right: auto;
	    margin-left: auto;
	    left: 0;
	    right: 0;
	}
		#breadcrumb li {
			font-size: 10px;
			color: #fff;
			float: left;
			font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
		}
		#breadcrumb li + li:before {
			content: ">";
			font-size: 10px;
			margin-right: 7px;
			margin-left: 7px;
		}
		#breadcrumb li a {
			color: #80a1c2;
		}

	.contents .contTtl {
		font-size: 24px;
		line-height: 1.5;
		text-align: center;
		letter-spacing: 2px;
		margin-bottom: 60px;
		color: #001533;
	    display: table;
	    margin-right: auto;
	    margin-left: auto;
	}
	.contents .contTtl:after {
		content: "";
		width: 100px;
		height: 2px;
		background:#001533;
		display: block;
		margin-top: 15px;
		margin-right: auto;
		margin-left: auto;
	}
	.contents .bg_grad .contTtl {
		color: #fff;
	}
	.contents .bg_grad .contTtl:after {
		background: #fff;
	}
	.contents .secTtl {
		font-size: 30px;
		line-height: 2;
		text-align: center;
		letter-spacing: 2px;
	}

.alternate {
	width: 100%;
	max-width: 1500px;
	margin-right: auto;
	margin-left: auto;
}
	.alternate .box {
		width: 97.5%;
		max-width: 1350px;
		position: relative;
	}
	.alternate .box + .box {
		margin-top: 90px;
	}
	.alternate .box:nth-child(even) {
		margin-left: auto;
	}
		.alternate .box .photo {
			width: 75%;
			max-width: 800px;
		}
		.alternate .box:nth-child(even) .photo {
			margin-left: auto;
		}
		.alternate .box .tips {
			width: 55%;
			max-width: 600px;
		    position: absolute;
		    top: 50%;
		    right: 0;
		    -webkit-transform: translate(0, -50%);
		    -ms-transform: translate(0, -50%);
		    transform: translate(0, -50%);
			height: auto;
			min-height: 360px;
			z-index: 51;
			opacity: 0;
			-webkit-box-shadow: 10px 10px 29px -2px rgba(0,0,0,0.45);
			-moz-box-shadow: 10px 10px 29px -2px rgba(0,0,0,0.45);
			box-shadow: 10px 10px 29px -2px rgba(0,0,0,0.45);
		}
		.alternate .box:nth-child(even) .tips {
			right: inherit;
			left: 0;
		}
		.bg_grad .alternate .box .tips {
			background:rgba(0,21,51,.8);
		}
		.bg_polygon .alternate .box .tips {
			background:#fff;
		}

		@-webkit-keyframes alternate_LtoR {
			0% { right: 3%; opacity: 0; }
			100% { right: 0%; opacity: 1; }
		}
		@keyframes alternate_LtoR {
			0% { right: 3%; opacity: 0; }
			100% { right: 0%; opacity: 1; }
		}
		.alternate_LtoR {
			animation-fill-mode:both;
			animation-duration:1.2s;
			-webkit-animation-name: alternate_LtoR;
			animation-name: alternate_LtoR;
		}

		@-webkit-keyframes alternate_RtoL {
			0% { left: 3%; opacity: 0; }
			100% { left: 0%; opacity: 1; }
		}
		@keyframes alternate_RtoL {
			0% { left: 3%; opacity: 0; }
			100% { left: 0%; opacity: 1; }
		}
		.alternate_RtoL {
			animation-fill-mode:both;
			animation-duration:1.2s;
			-webkit-animation-name: alternate_RtoL;
			animation-name: alternate_RtoL;
		}

			.alternate .box .tips .inner {
				max-width: 450px;
			    position: absolute;
			    top: 50%;
			    -webkit-transform: translate(0, -50%);
			    -ms-transform: translate(0, -50%);
			    transform: translate(0, -50%);
			    margin: auto;
		        left: 0;
			    right: 0;
			}
				.alternate .box .tips h4 {
					font-size: 30px;
					line-height: 1.46;
					margin-bottom: 20px;
				}
					.alternate .box .tips h4 span {
						font-size: 24px;
						display: block;
					}
				.alternate .box .tips p {
				}

.randomPhoto {
	width: 100%;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}
.random_trg {
	position: absolute;
	bottom: 30%;
	width: 100px;
	height: 1px;
	left: 0;
	right: 0;
	margin: auto;
}
	.randomPhoto li {
		width: 25%;
		float: left;
		position: relative;
	}
		.randomPhoto li span {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background:#6a7f99;
			opacity: .93;
			transition-duration: .5s;
			transition-timing-function: ease-in-out;
		}
		.randomPhoto li:nth-child(7) span {
			transition-delay: 0s;
		}
		.randomPhoto li:nth-child(1) span {
			transition-delay: .15s;
		}
		.randomPhoto li:nth-child(3) span {
			transition-delay: .3s;
		}
		.randomPhoto li:nth-child(6) span {
			transition-delay: .45s;
		}
		.randomPhoto li:nth-child(4) span {
			transition-delay: .6s;
		}
		.randomPhoto li:nth-child(5) span {
			transition-delay: .75s;
		}
		.randomPhoto li:nth-child(2) span {
			transition-delay: .9s;
		}
		.randomPhoto li:nth-child(8) span {
			transition-delay: 1.05s;
		}
		.randomPhoto.view li span {
			opacity: 0
		}

.shops {
	width: 100%;
	max-width: 1500px;
	margin-right: auto;
	margin-left: auto;
}
	.shops .shopLists {
		border-top: 1px solid #cccccc;
		border-bottom: 1px solid #cccccc;
		position: relative;
	}
	.shopLists .hoverBg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transition-duration: .4s;
		transition-timing-function: ease-in-out;
		opacity: 0;
	}
	.listOverlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background:rgba(0,0,0,.5);
	}
		.shops .shopLists li {
			float: left;
			position: relative;
			box-sizing: border-box;
		}
			.shops .shopLists li a {
				display: block;
				width: 100%;
				height: 100%;
			    background: #fff;
			    opacity: 0;
			    transition-duration: .4s;
				transition-timing-function: ease-in-out;
			}
			.shops .shopLists li a:hover {
				opacity: 1;
			}
				.shops .shopLists li a .office {
					position: absolute;
					top: 50%;
					left: 50%;
					margin: auto;
					transform: translate(-50%, -50%);
					width: 100%;
					text-align: center;
				}
				.shops .shopLists li a .name {
					display: block;
				    color: #000;
				    padding-top: 10px;
				}

.common_table {
	position: relative;
}
	.common_table .line {
	    position: relative;
	}
		.common_table .line .sameH {
			padding-top: 23px;
		    padding-bottom: 19px;
		}
		.common_table .line + .line .th,
		.common_table .line + .line .date,
		.common_table .line + .line .txt {
			background-image: linear-gradient(to right, #516085, #516085 1px, transparent 1px, transparent 3px);
			background-size: 3px 1px;
			background-position: top;
			background-repeat: repeat-x;
		}
		.common_table .line .th {
			color: #fff;
			float: left;
			line-height: 2;
		    letter-spacing: 2px;
			text-align: center;
		}
		.th_bg {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			background: rgb(0,22,52); /* Old browsers */
			background: -moz-linear-gradient(top, rgba(0,22,52,1) 0%, rgba(38,56,102,1) 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top, rgba(0,22,52,1) 0%,rgba(38,56,102,1) 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom, rgba(0,22,52,1) 0%,rgba(38,56,102,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001634', endColorstr='#263866',GradientType=0 ); /* IE6-9 */
		}
		.common_table .line .date {
			float: left;
			background:#d3d7e0;
			line-height: 2;
			text-align: center;
		}
		.common_table .line .date span {
			color: #333333;
		    display: inline-block;
	        width: 40px;
		    text-align: right;
		    letter-spacing: 2px;
		}
		.common_table .line .txt {
			float: left;
			line-height: 2;
			padding-left: 5%;
		}

/* footer ----------------------*/
		
/* parts -----------------------*/

.eventNav {
	padding-top: 50px;
	padding-bottom: 50px;
}
	.eventNav ul {
		max-width: 220px;
	}
	.eventNav li {
		float: left;
		width: 30%;
	}
	.eventNav .stop {
		opacity: 0;
		pointer-events: none;
	}
	.eventNav .archives {
		width: 13.7%;
		max-width: 30px;
		margin-left: 13.15%;
		margin-right: 13.15%;
	}
		.eventNav li a {
			display: block;
			transition-duration: .4s;
			transition-timing-function: ease-in-out;
		}
		.eventNav .prev a,
		.eventNav .next a {
			background:rgba(255,255,255,.2);
			text-align: center;
			color: #fff;
			font-size: 15px;
			font-family: 'Amiri', serif;
			line-height: 1;
			padding-top: 8px;
			padding-bottom: 7px;
		}
		.eventNav .prev a:hover,
		.eventNav .next a:hover {
			background:rgba(255,255,255,.5);
		}
		.eventNav .archives a {
			opacity: .3;
		}
		.eventNav .archives a:hover {
			opacity: .8;
		}


.fat-nav {
}
	.fat-nav__wrapper {
		position: absolute;
		top: 50%;
		left: 50%;
		margin: auto;
		transform: translate(-50%, -50%) scale(.95);
		width: 95%;
		max-width: 990px;
		transition-duration: .4s;
		transition-timing-function: ease-in-out;
	}
	.active .fat-nav__wrapper {
		transform: translate(-50%, -50%) scale(1);
	}
		.fat-nav .pageNav {
			margin-bottom: 80px;
		}
			.fat-nav .pageNav li {
				width: 33.333%;
				box-sizing: border-box;
				float: left;
				border-top: 1px solid #919ab1;
				border-left: 1px solid #919ab1;
			}
			.fat-nav .pageNav li:nth-child(4),
			.fat-nav .pageNav li:nth-child(5),
			.fat-nav .pageNav li:nth-child(6) {
				border-bottom: 1px solid #919ab1;
			}
			.fat-nav .pageNav li:nth-child(3),
			.fat-nav .pageNav li:nth-child(6) {
				border-right: 1px solid #919ab1;
			}
				.fat-nav .pageNav li a {
					display: block;
					transition-duration: .3s;
					transition-timing-function: ease-in-out;
				}
				.fat-nav .pageNav li a:hover {
					background:rgba(255,255,255,.2);
				}
					.fat-nav .pageNav .photo {
						width: 50%;
						float: left;
						height: 150px;
						opacity: .7;
						transition-duration: .3s;
						transition-timing-function: ease-in-out;
					}
					.fat-nav .pageNav li a:hover .photo {
						opacity: 1;
					}
					.fat-nav .pageNav .home .photo {
						background:url(../img/common/pc/pageNav-home.jpg) no-repeat center;
						background-size: cover;
					}
					.fat-nav .pageNav .news .photo {
						background:url(../img/common/pc/pageNav-news.jpg) no-repeat center;
						background-size: cover;
					}
					.fat-nav .pageNav .service .photo {
						background:url(../img/common/pc/pageNav-service.jpg) no-repeat center;
						background-size: cover;
					}
					.fat-nav .pageNav .shop .photo {
						background:url(../img/common/pc/pageNav-shop.jpg) no-repeat center;
						background-size: cover;
					}
					.fat-nav .pageNav .event .photo {
						background:url(../img/common/pc/pageNav-event.jpg) no-repeat center;
						background-size: cover;
					}
					.fat-nav .pageNav .recruit .photo {
						background:url(../img/common/pc/pageNav-recruit.jpg) no-repeat center;
						background-size: cover;
					}
					.fat-nav .pageNav .pageName {
						width: 50%;
						float: right;
						height: 150px;
					    position: relative;
					}
					.fat-nav .pageNav h3 {
						position: absolute;
						top: 50%;
						left: 50%;
						margin: auto;
						transform: translate(-50%, -50%);
						width: 90%;
						text-align: center;
						font-family: 'Amiri', serif;
						font-size: 21px;
						color: #fff;
					    letter-spacing: 3px;
					    line-height: 1.5;
					}
						.fat-nav .pageNav h3 span {
							font-size: 12px;
							color: #919ab1;
							display: block;
						    letter-spacing: 2px;
						}

		.otherNav {
		}
			.corpolateNav {
				float: left;
			}
				.corpolateNav h3 {
					color: #fff;
					font-size: 21px;
					font-family: 'Amiri', serif;
					margin-bottom: 10px;
				    letter-spacing: 4px;
				}
					.corpolateNav h3 span {
						font-size: 12px;
					    padding-left: 20px;
					    color: #919ab1;
					    letter-spacing: 2px;
					}
				.corpolateNav nav {
				}
					.corpolateNav nav li {
						float: left;
						line-height: 1;
					}
					.corpolateNav nav li + li {
						padding-left: 15px;
						margin-left: 15px;
						border-left: 1px solid #c8ccd8;
					}
						.corpolateNav nav li a {
							font-size: 15px;
							line-height: 1;
							color: #fff;
						    letter-spacing: 3px;
						}
			.infoNav {
				float: right;
			    margin-top: 15px;
			}
				.infoNav li {
					line-height: 1.3;
				}
				.infoNav li:before {
					content: "";
					display: inline-block;
					width: 16px;
					height: 18px;
					margin-right: 10px;
				    vertical-align: -2px;
				}
				.infoNav .privacy:before {
					background:url(../img/common/pc/ico-privacy.png) no-repeat center;
					background-size: 100%;
				}
				.infoNav .contact:before {
					background:url(../img/common/pc/ico-contact.png) no-repeat center;
					background-size: 100%;
				}
				.infoNav li + li {
					margin-top: 15px;
				}
					.infoNav li a {
						font-size: 12px;
						color: #fff;
					    letter-spacing: 2px;
					}

	.copyrights {
	    position: absolute;
	    bottom: 5%;
	    text-align: center;
	    color: #ccc;
	    width: 100%;
	    letter-spacing: 2px;
	    font-size: 12px;
	}

.fat-nav.for_ipad {
}
	.fat-nav.for_ipad .fat-nav__wrapper {
		height: auto !important;
	    transform: translate(-50%, -50%) scale(1) !important;
	}
	.fat-nav.for_ipad.active .fat-nav__wrapper {
		transform: translate(-50%, -50%) scale(1) !important;
	}
	.fat-nav.for_ipad .copyrights {
		height: auto !important;
	}

.toLink {
	display: block;
	padding-top: 17px;
    padding-bottom: 16px;
	background:#263866;
	width: 100%;
	max-width: 280px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	font-size: 13px;
	position: relative;
	transition-duration: .3s;
	transition-timing-function: ease-in-out;
}
.soon .toLink {
	pointer-events: none;
	background:#777;
}
.toLink:after {
	content: "";
	display: block;
	position: absolute;
	width: 20px;
	height: 100%;
	top: 0;
    right: -7px;
    background: #263866;
    transform: skewX(-15deg);
    transition-duration: .3s;
	transition-timing-function: ease-in-out;
}
.soon .toLink:after {
	background:#777;
}
.toLink:hover {
	background:#455882;
}
.toLink:hover:after {
	background:#455882;
}
	.toLink .box-arrow {
		position:absolute;
		right: 10%;
		top: 0;
		bottom: 0;
		width: 17px;
		height: 13px;
		margin-top: auto;
		margin-bottom: auto;
	}
		.toLink .box-arrow .line {
			width: 0px;
			height: 1px;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			margin-top: auto;
			margin-bottom: auto;
			background:#fff;
			transition-duration: .25s;
			transition-timing-function: ease-in-out;
		}
		.toLink .box-arrow .r-arrow {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			margin-top: auto;
			margin-bottom: auto;
			display: inline-block;
			width: 0;
			height: 13px;
			background:url(../img/common/pc/to_link_arrow.png) no-repeat right center;
			background-size: 17px 13px;
			transition-duration: .5s;
			transition-timing-function: ease-in-out;
			transition-delay: .25s;
		}
		.toLink:hover .line {
			width: 17px;
		}
		.toLink:hover .r-arrow {
			width: 17px;
		}

/*the animation of page transition start ------------------*/

#wrap {
	opacity: 0;
	transition-duration: .3s;
	transition-delay: .3s;
}
.loaded #wrap {
	opacity: 1;
}

.firstBox {
	top: 0;
	right: 0;
	position: fixed;
	display: block;
	width: 100%;
	height: 200vh;
	z-index: 40000;
	transition-duration: .7s;
	transition-timing-function: cubic-bezier(.89,.06,.43,1);
}

.loaded .firstBox {
	width: 0%;
}
.firstBox.f1 {
	background:#b1b1b2;
	transition-delay: .3s;
}
.firstBox.f2 {
	background:#546682;
	transition-delay: .15s;
}
.firstBox.f3 {
	background:#1d3963;
}

.endBox {
	top: 0;
	left: 0;
	position: fixed;
	display: block;
	width: 0%;
	height: 100vh;
	z-index: 40000;
	transition-duration: .7s;
	transition-timing-function: cubic-bezier(.89,.06,.43,1);
}
.moving .endBox {
	width: 100%;
}
.endBox.e1 {
	background:#b1b1b2;
}
.endBox.e2 {
	background:#546682;
	transition-delay: .15s;
}
.endBox.e3 {
	background:#1d3963;
	transition-delay: .3s;
}

/*the animation of page transition end ------------------*/

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

	.fat-nav .pageNav {
	    margin-bottom: 50px;
	}
		.fat-nav .pageNav .photo,
		.fat-nav .pageNav .pageName {
			height: 120px;
		}
			.fat-nav .pageNav h3 {
				font-size: 16px;
			}
				.fat-nav .pageNav h3 span {
				    font-size: 10px;
				}

		.corpolateNav {
		    float: none;
		}
			.corpolateNav h3 {
				font-size: 16px;
				letter-spacing: 3px;
			}
				.corpolateNav h3 span {
				    font-size: 10px;
				    padding-left: 15px;
				}
			.corpolateNav nav li a {
			    font-size: 12px;
			}

		.infoNav {
		    float: none;
	        margin-top: 35px;
		}
			.infoNav li + li {
			    margin-top: 10px;
			}
}

/* page-navi */
.page-navi {
    text-align: center;
    font-size: 16px;
}
.page-navi span,
.page-navi a {
	display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid #7e8ca8;
    line-height: 30px;
    font-size: 14px;
    color: #fff;
}
.page-navi .current {
	background: #fff;
	color: #7e8ca8;
}
.page-navi .prev,
.page-navi .next {
    width: 85px;
}
.page-navi .page-numbers.next i {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}
.page-navi span.dots {
    border: transparent;
}

.appearBar {
	position: relative;
}
.appearBar div,
.appearBar figure,
.appearBar img,
.appearBar table,
.appearBar .element {
	opacity: 0;
}
.appearBar .square.fadeAway + div,
.appearBar .square.fadeAway + figure,
.appearBar .square.fadeAway + img,
.appearBar .square.fadeAway + table,
.appearBar .square.fadeAway + .element {
	opacity: 1;
}
	.appearBar .square {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 0%;
		height: 100%;
		background:#d1d1d1;
		transition: 0.3s ease-in-out;
		z-index: 50;
	}
	.bg_grad .appearBar .square {
		background:#6a7f99;
	}
	.appearBar .square.spread { right: 0; }
	.appearBar .square.fadeAway { left: inherit; }

@-webkit-keyframes appear_LtoR {
	0% { width: 0%; }
	30% { width: 100%; }
	70% { width: 100%; }
	100% { width: 0%; }
}
@keyframes appear_LtoR {
	0% { width: 0%; }
	30% { width: 100%; }
	70% { width: 100%; }
	100% { width: 0%; }
}

.appear_LtoR {
	animation-fill-mode:both;
	animation-duration:1s;
	-webkit-animation-name: appear_LtoR;
	animation-name: appear_LtoR;
}

@media screen and (max-width:768px) { /* smart phone 6〜7 */

	.pc { display:none !important; }
	.sp-bl { display:block; }
	.sp-il { display:inline; }

	.inner {
		width:87.5%;
		max-width:560px;
	}

/* sp-header ----------------------*/

#header {
	height: 42px;
}
	#header h1 {
	    width: 77px;
	    height: 16px;
	    line-height: 1;
	    margin-left: 15px;
	}
		#header h1 a {
			width: 100%;
			height: 100%;
		    padding-top: 13px;
		    padding-bottom: 13px;
		}
			#header h1 a img {
				vertical-align: top;
			}

/* sp-main ------------------------*/

.contents {
	overflow-x:hidden;
}

.contents p {
    font-size: 13px;
    line-height: 2;
}

.under .mv {
    height: 220px;
}
	.under .mv .ttl {
	    margin-top: 10px;
	}
		.under .mv .ttl li {
			font-size: 22px;
			letter-spacing: 0;
		}
		.under .mv .ttl .kai {
			display: block;
			height: 8px;
		}
			.under .mv .ttl h2 {
			    font-size: 12px;
		        padding-top: 5px;
			}

	.contents .contTtl {
	    font-size: 16px;
        margin-bottom: 30px;
	}
	.contents .contTtl:after {
	    width: 60px;
	    height: 1px;
        margin-top: 12px;
	}
	.contents .secTtl {
	    font-size: 20px;
	    line-height: 1.8;
	    text-align: center;
	    letter-spacing: 1px;
	}

.alternate {
}
	.alternate .box {
	    width: 100%;
	}
	.alternate .box + .box {
	    margin-top: 30px;
	}
		.alternate .box .photo {
		    width: 100%;
		}
		.alternate .box .tips {
		    width: 100%;
		    max-width: inherit;
		    position: inherit;
		    top: inherit;
	        right: inherit;
		    -webkit-transform: inherit;
		    -ms-transform: inherit;
		    transform: inherit;
	        min-height: auto;
            -webkit-box-shadow: none;
		    -moz-box-shadow: none;
		    box-shadow: none;
		}
		.bg_grad .alternate .box .tips {
		    background: none;
		}
		@-webkit-keyframes alternate_LtoR {
			0% { opacity: 0; }
			100% { opacity: 1; }
		}
		@keyframes alternate_LtoR {
			0% { opacity: 0; }
			100% { opacity: 1; }
		}
		.alternate_LtoR {
			animation-fill-mode:both;
			animation-duration:.8s;
			-webkit-animation-name: alternate_LtoR;
			animation-name: alternate_LtoR;
		}

		@-webkit-keyframes alternate_RtoL {
			0% { opacity: 0; }
			100% { opacity: 1; }
		}
		@keyframes alternate_RtoL {
			0% { opacity: 0; }
			100% { opacity: 1; }
		}
		.alternate_RtoL {
			animation-fill-mode:both;
			animation-duration:.8s;
			-webkit-animation-name: alternate_RtoL;
			animation-name: alternate_RtoL;
		}
			.alternate .box .tips .inner {
			    max-width: inherit;
			    position: inherit;
			    top: inherit;
			    -webkit-transform: inherit;
			    -ms-transform: inherit;
			    transform: inherit;
			    margin: auto;
			    left: inherit;
			    right: inherit;
		        padding-top: 25px;
			    padding-bottom: 25px;
			}
				.alternate .box .tips h4 {
				    font-size: 21px;
				    line-height: 1.46;
				    margin-bottom: 10px;
				    text-align: center;
				}
					.alternate .box .tips h4 span {
					    font-size: 16px;
					}

	.randomPhoto li {
	    width: 50%;
	}
	.random_trg {
		bottom: inherit;
		top: 20%;
	}

	.shops .shopLists li a {
	    background: rgba(255,255,255,.85);
		opacity: 1;
	}

	.common_table .line .sameH {
	    padding-top: 7px;
	    padding-bottom: 6px;
	}
	.common_table .line .th {
		width: 90% !important;
		padding-left: 5%;
		padding-right: 5%;
		text-align: left;
	}
	.common_table .line.sameYear .th {
		display: none;
	}
	.common_table .line .date {
		width: 90% !important;
		padding-left: 5%;
		padding-right: 5%;
		text-align: left;
	}
		.common_table .line .date span {
			width: auto;
		}
	.common_table .line .txt {
		width: 90% !important;
		float: none;
		clear: both;
		height: auto !important;
		/*background-color: rgba(30,30,30,.3);*/
		padding-left: 5%;
		padding-right: 5%;
		padding-top: 20px;
	    padding-bottom: 30px;
	}
		.common_table .line .txt p {
			font-size: 12px;
		}

/* sp-footer ----------------------*/

/* sp-parts -----------------------*/

.eventNav {
	padding-top: 30px;
	padding-bottom: 30px;
}

.toLink {
	max-width: 240px;
    padding-right: 10px;
}
	.toLink .box-arrow .line,
	.toLink .box-arrow .r-arrow {
		width: 17px;
	}
	.soon .toLink .box-arrow {
		display: none;
	}

#sp-gnav {
    height: 100%;
    overflow-y: auto;
}
.fat-nav__wrapper {
    position: inherit;
    top: inherit;
    left: inherit;
    width: 100%;
    max-width: inherit;
    padding-top: 60px;
    height: 110%;
    overflow-y: auto;
    transform: inherit !important;
}
	.fat-nav .pageNav {
	    width: 87.5%;
	    max-width: 560px;
	    margin-right: auto;
	    margin-left: auto;
        margin-bottom: 30px;
	}
		.fat-nav .pageNav li {
		    width: 100%;
		    float: none;
		    border-right: 1px solid #919ab1;
		}
		.fat-nav .pageNav li:nth-child(4), 
		.fat-nav .pageNav li:nth-child(5), 
		.fat-nav .pageNav li:nth-child(6) {
		    border-bottom: none;
		}
		.fat-nav .pageNav li:last-child {
			border-bottom: 1px solid #919ab1;
		}
			.fat-nav .pageNav .photo,
			.fat-nav .pageNav .pageName {
				height: 40px;
			}
			.fat-nav .pageNav .photo {
			    width: 48px;
		        opacity: 1;
			}
			.fat-nav .pageNav .pageName {
			    width: calc(100% - 78px) ;
			    float: left;
			}
				.fat-nav .pageNav h3 {
					font-size: 15px;
				    position: inherit;
				    top: inherit;
				    left: inherit;
				    margin: auto;
				    transform: inherit;
				    width: 100%;
				    text-align: left;
			        line-height: 43px;
		            padding-left: 15px;
		            padding-right: 15px;
				}
					.fat-nav .pageNav h3 span {
						float: right;
					}
	.otherNav {
	}
		.corpolateNav {
			width: 87.5%;
		    max-width: 560px;
		    margin-right: auto;
		    margin-left: auto;
		}
			.corpolateNav h3 {
				text-align: center;
			    line-height: 1.5;
			    margin-bottom: 15px;
			}
				.corpolateNav h3 span {
					display: block;
					padding-left: 0;
				}
			.corpolateNav nav li {
			    width: 33.333%;
		        line-height: 1.5;
		        border-top: 1px solid #919ab1;
			    border-left: 1px solid #919ab1 !important;
			    box-sizing: border-box;
			}
			.corpolateNav nav li + li {
			    padding-left: 0;
			    margin-left: 0;
			    border-left: none;
			}
			.corpolateNav nav li:nth-child(3),
			.corpolateNav nav li:nth-child(6) {
				border-right: 1px solid #919ab1;
			}
			.corpolateNav nav li:nth-child(4),
			.corpolateNav nav li:nth-child(5),
			.corpolateNav nav li:nth-child(6) {
				border-bottom: 1px solid #919ab1;
			}
				.corpolateNav nav li a {
				    font-size: 11px;
				    letter-spacing: 2px;
				    display: block;
				    line-height: 1.5;
				    padding-top: 10px;
				    padding-bottom: 10px;
				    text-align: center;
				}
		.infoNav {
			width: 87.5%;
		    max-width: 260px;
		    margin-right: auto;
		    margin-left: auto;
	        margin-top: 18px;
		}
			.infoNav li {
				float: left;
			}
			.infoNav li:before {
			    width: 14px;
			    height: 16px;
			    margin-right: 7px;
			}
			.infoNav li + li {
			    margin-top: 0;
			    float: right;
			}
				.infoNav li a {
				    font-size: 10px;
				    color: #fff;
				    letter-spacing: 1px;
				}

		.copyrights {
			position: inherit;
			bottom: inherit;
			margin-top: 30px;
			letter-spacing: 1px;
		    font-size: 10px;
		    height: auto !important;
		}
		.layoutBox {
			width: 100%;
			height: 250px;
		}



}


/* animation -----------------------*/

.animated {
	animation-duration: 1s;
	animation-fill-mode: both;
}

/* fade in right */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 15px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}

/* fade in */

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}

/* fade in */

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  animation-name: fadeOut;
}


/* fade in up in main contents */

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

.mainFI {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1.6s;
	-ms-animation-duration:1.6s;
	animation-duration:1.6s;
	-webkit-animation-name: mainFI;
	animation-name: mainFI;
	visibility: visible !important;
	opacity: 0;
}

/* fade in up in up main contents */

@-webkit-keyframes mainFIU {
	0% {
		opacity: 0;
		-webkit-transform: translate(0, 10px);
		transform: translate(0, 10px, 0); 
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none; 
	}
}
@keyframes mainFIU {
	0% {
		opacity: 0;
		-webkit-transform: translate(0, 10px);
		transform: translate(0, 10px); 
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none; 
	}
}

.mainFIU {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:.6s;
	-ms-animation-duration:.6s;
	animation-duration:.6s;
	-webkit-animation-name: mainFIU;
	animation-name: mainFIU;
	visibility: visible !important;
	opacity: 0;
}

/* fade in up in up for late main contents */

@-webkit-keyframes mainFIU_late {
	0% {
		opacity: 0;
		-webkit-transform: translate(0, 30px);
		transform: translate(0, 30px, 0); 
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none; 
	}
}
@keyframes mainFIU_late {
	0% {
		opacity: 0;
		-webkit-transform: translate(0, 30px);
		transform: translate(0, 30px); 
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none; 
	}
}

.mainFIU_late {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-ms-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-name: mainFIU_late;
	animation-name: mainFIU_late;
	visibility: visible !important;
	opacity: 0;
}


@-webkit-keyframes mainFIR {
	0% {
		opacity: 0;
		-webkit-transform: translate(30px,0);
		transform: translate(30px,0); 
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none; 
	}
}
@keyframes mainFIR {
	0% {
		opacity: 0;
		-webkit-transform: translate(30px,0);
		transform: translate(30px,0); 
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none; 
	}
}

.mainFIR {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1.5s;
	-ms-animation-duration:1.5s;
	animation-duration:1.5s;
	-webkit-animation-name: mainFIR;
	animation-name: mainFIR;
	visibility: visible !important;
	opacity: 0;
}


@-webkit-keyframes mainFIL {
	0% {
		opacity: 0;
		-webkit-transform: translate(-40px,0);
		transform: translate(-40px,0); 
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none; 
	}
}
@keyframes mainFIL {
	0% {
		opacity: 0;
		-webkit-transform: translate(-40px,0);
		transform: translate(-40px,0); 
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none; 
	}
}

.mainFIL {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1.6s;
	-ms-animation-duration:1.6s;
	animation-duration:1.6s;
	-webkit-animation-name: mainFIL;
	animation-name: mainFIL;
	visibility: visible !important;
	opacity: 0;
}

@keyframes slideIn_from_bottom {
    0%, 60%, 75%, 90%, 100% {
        transition-timing-function: cubic-bezier(.89,.06,.43,1);
    }
    0% {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.slideIn {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:.3s;
	-ms-animation-duration:.3s;
	animation-duration:.3s;
	-webkit-animation-name: slideIn_from_bottom;
	animation-name: slideIn_from_bottom;
	visibility: visible !important;
}


.sawarabimincho {
	font-family: "Sawarabi Mincho" !important;
}

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

	.firstBox {
		top: inherit;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100vh;
	}
	.loaded .firstBox {
		width: 100%;
		height: 0vh;
	}

	.endBox {
		width: 100%;
		height: 0vh;
	}
	.moving .endBox {
		height: 100vh;
	}

}