@charset "utf-8";

/******************************

 * style
 *
 * 1. import
 * 2. html, body
 * 3. tag
 * 4. Layout
 * 5. popup

******************************/



/*****
 * 1. import
*****/

@import "import/reset.css";
@import "import/util.css";
/*英字大文字・数字　font-family: 'Cinzel', serif;*/
@import url('https://fonts.googleapis.com/css?family=Cinzel:400,700');
/*小文字英字　font-family: 'Crimson Text', serif;*/
@import url('https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600,600i,700,700i');
/*@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 200;
  src: url('../font/NotoSerifCJKjp/NotoSerifCJKjp-ExtraLight.woff') format('opentype');
}*/
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 300; 
  src: url('../font/NotoSerifCJKjp/NotoSerifCJKjp-Light.woff') format('opentype');
}
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 400;
  src: url('../font/NotoSerifCJKjp/NotoSerifCJKjp-Regular.woff') format('opentype');
}
/*@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 500;
  src: url('../font/NotoSerifCJKjp/NotoSerifCJKjp-Medium.woff') format('opentype');
}*/
/*@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 600;
  src: url('../font/NotoSerifCJKjp/NotoSerifCJKjp-SemiBold.woff') format('opentype');
}*/
@font-face {
   font-family: 'Noto Serif Japanese';
   font-style: normal;
   font-weight: 700;
  src: url('../font/NotoSerifCJKjp/NotoSerifCJKjp-Bold.woff') format('opentype');
}
/*@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 900;
  src: url('../font/NotoSerifCJKjp/NotoSerifCJKjp-Black.woff') format('opentype');
}*/


/*****
 * 2. html, body
*****/

	body {
		background-color: #fff;
	}
	.page {
		min-width: 1000px;
		color: #333;
		font-size: 14px;
		line-height:2;
		letter-spacing: 0.2em;
		color:#fff;
		font-weight: 300;
		font-family: "Noto Serif Japanese","游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		/*font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック' ,sans-serif;*/
	    -webkit-font-smoothing: antialiased;
	}

	@media only screen and (max-width:736px) {
		.page {
			min-width: inherit;
			-webkit-text-size-adjust: 100%;
			text-size-adjust: 100%;
		}
	}


/*****
 * 3. tag
*****/

/* anchor */
	a {
		color: #fff;
		text-decoration: none;
		background-color: transparent;
		background-image: none;
		background-repeat: no-repeat;
		background-position: top left;
		transition: .4s;
	}
	a:visited {}
	a:hover {
		background-position: bottom right;
	}
	a:active {}


/* cap */
	.cap,
	.caption {
		color: #bbbbbb;
		font-size: 10px;
		letter-spacing: 0.1em;
		line-height: 1.4;
		font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック' ,sans-serif;
	}
	.cap {
		padding-top: 7px;
	}


/* imageCap */
	.imageCap {
		position: relative;
	}
	.imageCap .cap {
		position: absolute;
		right: 7px;
		bottom: 7px;
		padding-top:0;
		z-index: 2;
		text-align: right;
		text-shadow:
	    rgba(0,0,0,.7) 1px 1px 7px, rgba(0,0,0,.7) -1px 1px 7px,
	    rgba(0,0,0,.7) 1px -1px 7px, rgba(0,0,0,.7) -1px -1px 7px;
	}
	.imageCap .cap.al{
		right: auto;
		left: 7px;
		text-align: left;
	}
	.imageCap .cap.color-white {
		color:#fff;
	}
	.imageCap .cap.color-black {
		color:#000;
		text-shadow:
	    rgba(255,255,255,.7) 1px 1px 5px, rgba(255,255,255,.7) -1px 1px 5px,
	    rgba(255,255,255,.7) 1px -1px 5px, rgba(255,255,255,.7) -1px -1px 5px;

	}

@media only screen and (max-width:736px) {
	.imageCap .cap {
		right: 5px;
		bottom: 5px;
	}
	.imageCap .cap.al{
		left: 5px;
	}
}

/* img */
	img {
		max-width: 100%;
		height: auto;
		vertical-align: top;
	}


/* pc sp */
	.sp {
		display: none;
	}
	@media only screen and (max-width:736px) {
		.sp {
			display: block;
		}
		i.sp{
			display: inline-block;
		}
		.pc {
			display: none;
		}
	}

	.en{
		font-family: 'Cinzel', serif;		
		line-height: 1.5;
	}
	.enmin{
		font-family: 'Crimson Text', serif;
		line-height: 1.5;
	}





/*****
 * 4. Layout
*****/

/* .wrap */
.wrap {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.wrap02{
	width:1340px;
	margin-left: auto;
	margin-right: auto;
}
@media only screen and (max-width:1340px) {
	.wrap02{
		width:100%;
		padding-left: 20px;
		padding-right: 20px;
		box-sizing:border-box;
	}
}
@media only screen and (max-width:1000px) {
	.wrap {
		width: auto;
		padding-left: 20px;
		padding-right: 20px;
		box-sizing:border-box;
	}
}
/*@media only screen and (max-width:736px) {
	.wrap {
		width: auto;
		padding-left: 20px;
		padding-right: 20px;
		box-sizing:border-box;
	}
}*/

/*subsection*/
.subsection{
	margin-top: 120px;
}
@media only screen and (max-width:736px) {
	.subsection{
		margin-top: 60px;
	}
}


/* Header */
#gHeader {
	width:100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5;
	transition: .7s;
}
#gHeader.fixed{
	position: fixed;
	height: 80px;
	background:rgba(28,67,86,.7);
	transition: .7s;
}
/*header_logo*/
.header_logo{
	position: absolute;
	left: 20px;
	top: 20px;
	z-index: 6;
}
.header_logo i{
	font-size:48px;
	/*text-shadow: 
	rgba(72,154,194,1) 1px 1px 20px, rgba(72,154,194,.7) -1px 1px 20px,
    rgba(72,154,194,1) 1px -1px 20px, rgba(72,154,194,.7) -1px -1px 20px;*/

}
@media only screen and (max-width:736px) {
	#gHeader.fixed{
		height: 70px;
	}
	.header_logo i{
		font-size:33px;
	}

}

/* gNav */
#gNav {
	display: none;
	width:100%;
	height: 100%;
	padding:150px 0 0;
	box-sizing: border-box;
	position: fixed;
	left: 0;
	top: 0;
	background: linear-gradient(to right,rgba(35,95,134,1),rgba(6,67,103,1));
}
#gNav ul{
	width: 32%;
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	-webkit-transform: translateY(-50%); /* Safari用 */
	transform: translateY(-50%);
	margin:auto;
	display: -webkit-flex; /* Safari */
	display: flex;
	-webkit-align-items: center; /* Safari */
	align-items: center;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap: wrap;
	z-index: 7;
}
#gNav ul li{
	display: inline-block;
	width:38%;
	box-sizing: border-box;
	font-size: 15px;
	letter-spacing: 0.5em;
	text-align: left;
	margin-top: 50px;
	border-bottom:solid 1px #617f8f;
	position: relative;
}
#gNav ul li a{
	display: block;
	color:#aaaaaa;
	padding:0 0 13px;
}
#gNav ul li a:hover{
	color:#fff;
}
#gNav ul li:nth-child(even){
	margin-left:24%;
}
#gNav ul li i{
	font-size:44px;
	position: absolute;
	left: -50px;
	bottom: 8px;
	transition: .4s;
}
#gNav ul li i.icon-pc-arrow{
	opacity: 0;
}
#gNav ul li:hover i.icon-pc-arrow{
	opacity: 1;
}
#gNav ul li a.on{
	color:#fff;
}
#gNav ul li a.on i.icon-pc-arrow{
	opacity: 1;
}
#gNav .off a {
	opacity: .4;
	pointer-events: none;
}
#gNav .off:hover i.icon-pc-arrow{
	opacity: 0;
}
.gNav-bg{
	width:100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 6;
}
.bg-top,
.bg-concept,
.bg-memorial,
.bg-location,
.bg-access,
.bg-design,
.bg-plan,
.bg-brand,
.bg-map,
.bg-outline,
.bg-guide{
	opacity: 0;
	width:100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	transition: .4s;
}
.gNav-bg img{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
@media only screen and (max-width:1300px) {
	#gNav ul{
		width: 43%;
	}
}
@media only screen and (max-width:1000px) {
	#gNav ul{
		width: 60%;
	}
}
/*スマホ横*/
@media all and (orientation: landscape) and (max-width:736px) {
	#gNav{
		overflow-y: scroll;
	}
}

@media only screen and (max-width:736px) {
	#gNav {
	}
	#gNav.is-active {
	}
	#gNav ul{
		width: 80%;
		position: static;
		padding-top: 200px; 
	}
	#gNav ul li{
		width:42%;
		border:none;
		font-size: 13px;
		letter-spacing: 0.3em;
		margin-top: 0;
	}
	#gNav ul li:nth-child(odd){
		width:48%;
		padding-left: 30px;
		box-sizing: border-box;
	}
	#gNav ul li:nth-child(even){
		margin-left: 10%;
	}
	#gNav ul li i{
		font-size:34px;
		left: -10px;
	}
	#gNav ul li a.on i.icon-pc-arrow,
	#gNav ul li:hover i.icon-pc-arrow{
		opacity: 0;
	}
	#gNav ul li a{
		color:#fff;
		padding:20px 0 13px;
	}
	.gNav-bg{
		display: none;
	}
}


/* pNav */
	#pNav{
		position: absolute;
		right: 100px;
		top:15px;
		z-index: 6;
	}
	#pNav ul li a {
		width:144px;
		height:44px;
		display:inline-block;
		font-size:17px;
		letter-spacing: 0.4em;
		line-height: 44px;
		text-align: center;
		color:#fff;
	}
	#pNav ul li a span{
		display:inline-block;
		width:144px;
		height:42px;
		border-top: 1px solid;
		border-bottom: 1px solid;
		border-image: linear-gradient(90deg, rgba(255,255,255,.1) 10%, rgba(255,255,255,.6) 30%, rgba(255,255,255,.1) 90%);
		border-image-slice: 1;
		border-width: 1px 0;
	}
	#pNav ul li a:hover{
		background: rgba(255,255,255,.4);
	}
	#pNav .pNav-req a{
		border:solid 3px rgba(21,125,167,.9)	
	}
	#pNav .pNav-req a span{
		background: linear-gradient(to right,rgba(50,157,190,.7),rgba(5,60,102,.7));
	}
	#pNav .pNav-tel{
		display: none;
	}
	#pNav .pNav-tel a{		
		border:solid 3px rgba(112,153,180,.9);
	}
	#pNav .pNav-tel a span{
		background: linear-gradient(to right,rgba(128,162,185,.7),rgba(54,88,119,.7));
	}
@media only screen and (max-width:736px) {
	#pNav{
	    width: 100%;
		position: fixed;
		right: 0;
		top:auto;
		bottom: 0;
	}
	#pNav ul{
		width:100%;
		display: -webkit-flex; /* Safari */
		display: flex;
		-webkit-justify-content: center; /* Safari */
		justify-content: center;
	}
	#pNav ul li{
		width:50%;
	}
	#pNav ul li a{
		width: 100%;
		height: auto;
		font-size:15px;
		box-sizing: border-box;
	}
	#pNav ul li a span{
		width: 100%;
		height: auto;
	}
	#pNav .pNav-req a span{
		background: linear-gradient(to right,rgba(50,157,190,.7),rgba(5,60,102,.85));
	}
	#pNav .pNav-tel a span{
		background: linear-gradient(to right,rgba(128,162,185,.7),rgba(54,88,119,.85));
	}
	#pNav .pNav-tel{
		display: block;
	}
}

/*Menu*/
#Menu {
	position: absolute;
	right: 30px;
	top: 22px;
	cursor: pointer;
	z-index: 6;
}
#Menu i{
	font-size:40px;
	text-shadow:1px 1px 10px rgba(72,154,194,.7);
}
#Menu.is-active {}
@media only screen and (max-width:736px) {
	#Menu{
		right: 20px;
	}
	#Menu i{
		font-size:30px;
	}

}
/* spNav */
	#spNav{
		display: none;
	}

	@media only screen and (max-width:736px) {
		#spNav {
			display: block;
		}
	}


/* Container */
	#container {
		text-align: left;
		background-color: transparent;
		background: #094b6a;
		padding-bottom: 70px;
		border-bottom: solid 70px #073350;
	}
	#index #container {
		padding-bottom: 0;
		border-bottom: none;
	} 
	@media only screen and (max-width:736px) {
		#container {
			padding-bottom: 40px;
			border-bottom: solid 40px #073350;
			text-align: justify; /* 両端揃え */
			text-justify: inter-ideograph; /* 両端揃えの種類 */
		}
	}


/* Footer */
	#gFooter {}
	@media only screen and (max-width:736px) {
		#gFooter {
		}
	}


/* fNav */
	#fNav {
		color: #666;
		font-size: 11px;
	}

	#fNav .on a {}
	#fNav .off a {
		opacity: .4;
		pointer-events: none;
	}

/*ftrCv*/
.ftrCv{

}
.ftrCv ul li{
	width:100%;
	text-align: center;
	font-size: 21px;
	letter-spacing: 0.4em;
}
.ftrCv ul li.ftrCv-req{
	background: url(../imgs/ftr-request.jpg) no-repeat center;
	background-size:cover;
	border:solid 10px #1a86ae;
	box-sizing: border-box;
}
.ftrCv ul li a{
	display: block;
	padding:60px 10px;
	border-top: 1px solid;
	border-bottom: 1px solid;
	border-image: linear-gradient(90deg, rgba(255,255,255,.1) 10%, rgba(255,255,255,.6) 30%, rgba(255,255,255,.1) 90%);
	border-image-slice: 1;
	border-width: 1px 0;
}
.ftrCv ul li a:hover{
	background: rgba(255,255,255,.1);
}
.ftrCv ul li span{
	position: relative;
}
.ftrCv ul li i{
	font-size: 44px;
	vertical-align: middle;
	position: absolute;
	left: -60px;
    top: -5px;
	margin: auto;
}
@media only screen and (max-width:736px) {
	.ftrCv ul li{
		font-size: 15px;
	}
	.ftrCv ul li.ftrCv-req{
		background: url(../imgs/ftr-request.jpg) no-repeat right center;
	}
	.ftrCv ul li a{
		padding:35px 10px;
	}
	.ftrCv ul li span{
		text-align: left;
	}
	.ftrCv ul li i{
		display: none;
	}

}

/*ftrCap*/
.ftrCap{
	background: #073350;
	padding: 25px 0;
}

/*ftrInfo*/
.ftrInfo{
	background: #204862;
	-webkit-align-items: center; /* Safari */
	align-items: center;
}
/* contact */
#contact {
	width: 50%;
	background: #143d59;
	text-align: center;
	padding: 70px 0;
}
#contact .contact_inner{
	display: inline-block;
	text-align: left;
	margin-left:50px;
}
#contact .contact_name{
	font-size:16px;
}
#contact .contact_tel{
	font-size: 44px;
	font-family: 'Cinzel', serif;
	position: relative;
	line-height: 1;
	margin:10px 0 15px;
	pointer-events: none;
}
#contact .contact_tel i{
	font-size:50px;
	position: absolute;
	left: -65px;
	bottom:0;
}
#contact .contact_hour{
	font-size:12px;
}
@media only screen and (max-width:736px) {
	#contact {
		width: 100%;
		padding: 30px 0;
	}
	#contact .contact_inner{
		display: block;
		padding: 0 20px;
		text-align: center;
		margin-left:0;	
	}
	#contact .contact_tel{
		font-size: 26px;
		padding:3px;
		pointer-events: visible;
		background: linear-gradient(to right,rgba(124,163,187,1),rgba(71,113,144,1));
	}
	#contact .contact_tel a{
		display: block;
		padding:15px 0 10px;
		background: linear-gradient(to right,rgba(140,175,197,1),rgba(56,93,125,1));
		border-top: 1px solid;
		border-bottom: 1px solid;
		border-image: linear-gradient(90deg, rgba(255,255,255,.1) 10%, rgba(255,255,255,.6) 30%, rgba(255,255,255,.1) 90%);
		border-image-slice: 1;
		border-width: 1px 0;	
	}
	#contact .contact_tel i{
		font-size:26px;
		position: static;
		margin-right:10px;
		vertical-align: middle;
	}

}

/*fNav*/
#fNav{
	width: 50%;
	display: -webkit-flex; /* Safari */
	display: flex;
	-webkit-justify-content: center; /* Safari */
	justify-content: center;
}
#fNav ul:nth-child(n+2){
	margin-left: 40px;
}
#fNav ul li{
	font-size:14px;
	position: relative;
}
#fNav ul li a{
	display: block;
	padding:10px 10px 8px 25px;
}
#fNav ul li a:after{
	content: '';
	width: 0px;
	height: 1px;
	background: #8a999e;
	position:absolute;
	left: 0;
	bottom: 0;
	transition: .4s;
}
#fNav ul li i{
	font-size:44px;
	position: absolute;
	left: -17px;
	top:0;
	transition: .4s;
}
#fNav ul li i.icon-pc-arrow{
	opacity: 0;
}
#fNav ul li a.on{
	border-bottom: solid 1px #8a999e;
}
#fNav ul li a.on i.icon-pc-arrow{
	opacity: 1;
}
#fNav ul li a:hover:after{
	content: '';
	width: 100%;
	height: 1px;
	background: #8a999e;
	position:absolute;
	left: 0;
	bottom: 0;
}
#fNav ul li a:hover i.icon-pc-arrow{
	opacity: 1;
}
#fNav ul li a.notouch:hover:after{
	display: none;
}
@media only screen and (max-width:1300px) {
	#fNav ul li{
		font-size:12px;
	}
	#fNav ul:nth-child(n+2){
		margin-left: 20px;
	}
}
@media only screen and (max-width:736px) {
	#fNav{
		width: 100%;
		display: block;
		padding: 20px;
		box-sizing: border-box;
	}
	#fNav ul{
		display: -webkit-flex; /* Safari */
		display: flex;
		-webkit-flex-wrap: wrap; /* Safari */
		flex-wrap: wrap;
	}
	#fNav ul:nth-child(n+2){
		margin-left: auto;
	}
	#fNav ul li{
		width:42%;
	}
	#fNav ul li:nth-child(odd){
		width:48%;
		box-sizing: border-box;
		padding-left: 20px;
	}
	#fNav ul li:nth-child(even){
		margin-left: 10%;
	}
	#fNav ul li a{
		padding: 10px 0 8px 20px;
	}
	#fNav ul li i{
		left: 0;
		top:0;
	}
	#fNav ul li:hover i.icon-pc-arrow{
		opacity: 0;
	}
	#fNav ul li a:hover:after{
		display: none;
	}
	#fNav ul li a.on{
		border-bottom: none;
	}
	#fNav ul li a:hover i.icon-pc-arrow,
	#fNav ul li a.on i.icon-pc-arrow{
		opacity: 0;
	}

}

/*ftrCom*/
.ftrCom{
	background: #073350;
	padding: 40px 70px 20px;
	position: relative;
	overflow: hidden;
}
.ftrCom-logo{
	width: 50%;
	float: left;
	display: -webkit-flex; /* Safari */
	display: flex;
	-webkit-align-items: center; /* Safari */
	align-items: center;	
}
.ftrCom-logo li:nth-child(2){
	margin-left:20px;
}
.ftrCom-logo i{
	font-size:65px;
}
@media only screen and (max-width:1300px) {
	.ftrCom{
		padding: 40px 30px 20px;		
	}
	.ftrCom{
		position: static;
	}
	.ftrCom-logo{
		width: 100%;
		float: none;
		-webkit-justify-content: center; /* Safari */
		justify-content: center;
	}

}
@media only screen and (max-width:736px) {
	.ftrCom-logo{
		display:block;
		text-align: center;
	}
	.ftrCom-logo li:nth-child(2),
	.ftrCom-logo li:nth-child(3){
		margin-left:0;
		margin-top: 10px;
	}
	.ftrCom-logo i{
		font-size:50px;
	}
}
/*copyright*/
.copyright{
	width: 50%;
	float: right;
   text-align: right;
	font-size:8px;
   -webkit-transform: scale(0.8);
   -webkit-transform-origin:right 0;
}
@media only screen and (max-width:1300px) {
	.copyright{
		width: 100%;
		margin-top: 20px;
		text-align: center;
	   -webkit-transform-origin:center;
	}

}
@media only screen and (max-width:736px) {
	.copyright{
		width: 100%;
		float: none;
		margin-top: 10px;
		padding-bottom: 50px;
	}

}

/* pagetop */
#pagetop {
}


/*****
 * 5. popup
*****/