@charset "utf-8";

/*------------------------------------------------------------
	デフォルトスタイル
------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	outline: 0;
	font-size: 1em;
}

body {
	font-size: 62.5%;
	-webkit-font-smoothing: antialiased;
}

body,
table,
input, textarea, select, option {
	font-family: "Noto Sans JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
	display: block;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

:focus {
	outline: 0;
}

ins {
	text-decoration: none;
}

del {
	text-decoration: line-through;
}

img {
	vertical-align: top;
}

a,
a:link {
	color: #000;
	text-decoration: none;
}

a:visited {
	color: #000;
}
@media all and (min-width: 768px) {
	a:hover {
		color: #000;
	}
}


a:active {
	color: #000;
}

.yuMin {
	font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
}

.fBs {
	font-family: "Bellefair", serif;
}


/*------------------------------------------------------------
	レイアウト(PC)
------------------------------------------------------------*/
body {
	min-width: 1280px;
	color: #000;
	background:#001c40;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
}
#floatingCanvas{
	position: fixed;
	top: 0;
	z-index: 10;
	/* opacity: 0;
	transition: opacity .3s ease-in-out; */
}
/* #floatingCanvas.show {
	opacity: 1;
} */

section .content{
	position: relative;
	z-index:20;
}

#container {
	text-align: left;
	position: relative;
	overflow: hidden;
	height: 100%;
}

#main {
	position: relative;
	z-index: 200;
	width:100%;
	max-width:1280px;
	height: 100%;
	margin:0 auto;
}

a[href^="tel:"] {
	cursor: default;
	pointer-events: none;
}

.sp {
	display: none !important;
}

/*------------------------------------------------------------
	レイアウト(SP)
------------------------------------------------------------*/

@media all and (max-width: 767.98px) {

	body {
		min-width: inherit;
		font-size: 12px;
	}

	.sp {
		display: block !important;
	}

	.pc {
		display: none !important;
	}

	a[href^="tel:"] {
		cursor: pointer;
		pointer-events: auto;
	}
}

/*------------------------------------------------------------
	ヘッダー(PC)
------------------------------------------------------------*/
#gHeader {
	position: relative;
}

#gHeader .hInner {
	position: relative;
	/* background: linear-gradient(180deg, rgba(29,60,93,1) 0%, rgba(29,59,91,1) 36.5%, rgba(0,3,20,1) 36.5%, rgba(0,3,20,1) 42%, rgba(0,31,66,1) 58%, rgba(0,28,64,1) 100%); */
	background: linear-gradient(180deg, rgb(31, 59, 90) 0%, rgb(31, 59, 90) 62.9%, rgb(0, 32, 68) 62.9%,rgba(0, 32, 68,0) 100%);
}

#gHeader .mv{
	position: relative;
	width:1280px;
	height:722px;
	margin:0 auto 510px;
}

#gHeader .mv:after{
	position:absolute;
	display:block;
	width:1610px ;
	height:1213px;
	top: -65px;
	left: -190px;
	content:"";
	background: url(../../img/index/layer_mv.png) no-repeat center top;
	background-size: cover;
	z-index:30;
}

#gHeader .mv video{
	position: relative;
	width:100%;
	height:100%;
	object-fit: contain;
	/* z-index:21; */
	z-index:1;
}

#gHeader .infoBox {
	position: absolute;
	width:100%;
	max-width:1280px;
	height: 540px;
	padding-top:175px;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
	text-align: center;
}

#gHeader .logo {
	position: relative;
	width: 346px;
	height: 114px;
	margin-bottom: 29px;
	margin:0 auto 29px;
	z-index: 30;
}

#gHeader .logo embed {
	display: block;
	width:100%;
}

#gHeader .txt01 {
	position: relative;
	margin-bottom: 180px;
	color: #fff;
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 1.4;
	z-index: 100;
}

#gHeader .time {
	position: relative;
	margin-bottom: 7px;
	color: #fff;
	letter-spacing: 3px;
	line-height: 1.0;
	z-index: 100;
}

#gHeader .time .year {
	display: block;
	font-size: 15px;
	margin-bottom: 2px;
}

#gHeader .time .big {
	display: block;
	font-size: 30px;
	line-height:1;
	margin-bottom: 0;
}

#gHeader .time .week {
	display: block;
  font-size : 20px;
	line-height:0.6;
  letter-spacing : 1.8px;
	margin-bottom: 10px;
}
#gHeader .time .btm {
	display: block;
  font-size : 20px;
  line-height : 1.4;
  letter-spacing : 1.82px;
	margin-bottom: 10px;
	margin-right:-1.82px;
}

#gHeader .txt02 {
	position: relative;
	z-index: 100;
	color: #fff;
  font-size : 14px;
  letter-spacing : 1.54px;
	margin-right:-1.54px;
}

/*------------------------------------------------------------
	ヘッダー(SP)
------------------------------------------------------------*/
@media all and (max-width: 767.98px) {
	#gHeader {
		margin-bottom: 0;
	}

	#gHeader .hInner {
		width: 100%;
		height:calc(1764/750 * 100vw);
	}

	#gHeader .mv{
		width: 100%;
		max-width: 100%;
		height: calc(1333 / 750 * 100%);
		margin-bottom: calc(431 / 750 * 100%);
	}
	
	#gHeader .mv:after{
		position:absolute;
		content:"";
		display:block;
		width: 100%;
		height:calc(1764/750 * 100vw);
		top: 0;
		left: 0;
		background: url(../../img/index/layer_mv-sp.png) no-repeat center top;
		background-size: cover;
	}
	
	#gHeader .mv video{
		/* width: 100vw;
    height:calc(1333/750 * 100vw);
    object-fit: contain; */
		width: 100%;
		height: auto;
		object-fit: cover;
	}

	#gHeader .infoBox {
		height: auto;
		padding-top:calc(350/750 * 100vw);
	}

	#gHeader .logo {
		width: calc(600/750 * 100vw);
		height: calc(197/750 * 100vw);
		margin-bottom: calc(20/750 * 100vw);
	}

	#gHeader .logo embed {
		width: calc(600/750 * 100vw);
		height: auto;
	}

	#gHeader .txt01 {
		margin-bottom: calc(330/750 * 100vw);
		font-size: calc(26 / 750 * 100vw);
		line-height: calc(38 / 750 * 100vw);
		letter-spacing: calc(2.34 / 750 * 100vw);
	}

	#gHeader .time {
		margin-bottom: 11px;
	}

	#gHeader .time .year {
		font-size: calc(22 / 750 * 100vw);
		letter-spacing: calc(1.98 / 750 * 100vw);
	}

	#gHeader .time .big {
		font-size: calc(51 / 750 * 100vw);
		letter-spacing: calc(4.59 / 750 * 100vw);
	}
	#gHeader .time .week {
		font-size: calc(26 / 750 * 100vw);
		letter-spacing: calc(2.34 / 750 * 100vw);
	}

	#gHeader .time .btm {
		font-size: calc(24 / 750 * 100vw);
		letter-spacing: calc(2.16 / 750 * 100vw);
	}

	#gHeader .txt02 {
		font-size: calc(24 / 750 * 100vw);
		letter-spacing: calc(2.64 / 750 * 100vw);
	}
}

/*------------------------------------------------------------
	フッター(PC)
------------------------------------------------------------*/

#gFooter {
	width: 100%;
	max-width: 1280px;
	margin:780px auto 0;
	z-index: 20;
	position: relative;
	overflow: visible;
	color:#FFF;
}

#gFooter::after{
	position: absolute;
	display: block;
	width: 1240px;
	height: 405px;
	content: "";
	background: url(../../img/index/layer_footer.png) no-repeat center bottom;
	background-size: cover;
	left: 20px;
	bottom:0;
}

#gFooter .fInner {
	width:100%;
	max-width: 900px;
	margin: 0 auto;
	position: relative;
	text-align: center;
}

#gFooter .headLine01 {
	margin-bottom: 50px;
}

#gFooter .txt01 {
	margin-bottom: 10px;
	font-size : 24px;
  line-height : 29.12px;
  letter-spacing : 1.2px;
}

#gFooter .txt02 {
	margin-bottom: 2px;
	font-size : 14px;
  line-height : 23.92px;
  letter-spacing : 0.84px;
}

#gFooter .txt03 {
	margin-bottom: 10px;
	font-size : 21px;
  line-height : 39px;
  letter-spacing : 4.41px;
}
#gFooter .comBtn{
	margin-bottom: 25px;
}

#gFooter .comBtn a {
	border: 1px solid #FFF;
	color: #FFF;
}

#gFooter .comBtn embed {
	width: 10px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
	margin: -4px 0 0 4px;
	filter: brightness(0) invert(1);
}

#gFooter .contactBox{
	position: relative;
	margin-bottom: 43px;
}
#gFooter .contactBox a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width:325px;
	height:60px;
	margin:0 auto;
  background : rgb(211, 152, 183);
  border-radius : 30px;
}
#gFooter .contactBox a:after {
	margin-top: -8px;
	width: 15px;
	height: 15px;
	background: url(../../img/common/icon01.svg) no-repeat left top;
	background-size: 15px 15px;
	position: absolute;
	top: 50%;
	right: 20px;
	content: "";
	filter: brightness(0) invert(1);
}

@media all and (min-width: 768px) {
	#gFooter .contactBox a:hover{
		background : rgba(211, 152, 183,.8);
	}
}

#gFooter .contactBox a span{
	font-size : 14px;
  line-height: 1;
  letter-spacing : 1.4px;
  color : #FFFFFF;
}

#gFooter .txt03 .tel a {
	color:#FFF;
}

#gFooter .txt04 {
	margin-bottom: 43px;
	font-size : 14px;
  line-height : 23.92px;
  letter-spacing : 0.84px;
	text-align: center;
}

#gFooter .txt04 span {
	display: block;
	margin-bottom: 1px;
}

#gFooter .txt05 {
	margin-bottom: 25px;
}

#gFooter .txt05 a {
	position: relative;
  font-size : 14px;
  letter-spacing : 2.94px;
	text-decoration: underline;
}

#gFooter .txt05 a:before {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	content: "";
}

#gFooter .txt05 embed {
	width: 15px;
	margin-left: 10px;
	display: inline-block;
	vertical-align: middle;
	filter: brightness(0) invert(1);
}

#gFooter .txt05 span {
	padding-bottom: 1px;
	display: inline-block;
}

#gFooter .txt05 a{
	color:#FFF;
}

@media all and (min-width: 768px) {
	#gFooter .txt05 a:hover {
		opacity: 0.7;
	}
}

#gFooter .btm{
	margin-bottom: 70px;
}
#gFooter .btm img{
	position: relative;
	display: block;
	width:430px;
	margin:0 auto;
	z-index:13;
}
#gFooter .btm .stage{
	position: relative;
	height:420px;
	padding-top: 80px;
	z-index:12;
	
}
#gFooter .btm .stage embed{
	position: relative;
	display: block;
	width:410px;
	margin:0 auto;
	z-index:12;
}
#gFooter .btm .stage::before{
	position: absolute;
	content: "";
	width:363px;
	height:581px;
	margin-left:-181px;
	bottom:0;
	left:50%;
	background: url(../../img/index/img_stage.png) no-repeat center bottom;
	background-size: contain;
	z-index:11;
}

#gFooter .nav{
	position: relative;
	z-index:21;
	margin:50px 0 18px;
	font-size : 10px;
  letter-spacing : 4.6px;
  color : #DFB967;
}
#gFooter .nav a{
  color : #DFB967;
}
#gFooter .nav ul{
	display: flex;
	justify-content: center;
}

#gFooter .nav li{
	padding:0 2em;
}

#gFooter .nav li:nth-child(2){
	border-left:solid 1px #DFB967;
	border-right:solid 1px #DFB967;
}
.copyright {
	position: relative;
	padding:10px 0;
	background:#DFB967;
	color:#FFF;
	font-size : 10px;
  line-height : 1;
  letter-spacing : 2.2px;
	text-align: center;
	z-index:11;
}

/*------------------------------------------------------------
	フッター(SP)
------------------------------------------------------------*/
@media all and (max-width: 767.98px) {
	#gFooter {
		margin: calc(750 / 750* 100vw) auto 0;
	}

	#gFooter::after{
		width:calc(733 / 750 * 100vw);
		height:calc(534 / 750 * 100vw);
		background: url(../../img/index/layer_footer-sp.png) no-repeat center top;
		background-size: cover;
		left: 0;
		bottom: calc(55 / 750 * 100vw);
		z-index:21;
	}

	#gFooter .headLine01 {
		margin-bottom: calc(90 / 750* 100vw);
	}

	#gFooter .txt01 {
		margin-bottom: calc(10 / 750* 100vw);
		font-size: calc(38 / 750 * 100vw);
		line-height: calc(54.65 / 750 * 100vw);
		letter-spacing: calc(1.9 / 750 * 100vw);
	}

	#gFooter .txt02 {
		margin-bottom: 0;
		font-size: calc(24 / 750 * 100vw);
		line-height: calc(44.89 / 750 * 100vw);
		letter-spacing: calc(1.44 / 750 * 100vw);
	}

	#gFooter .txt03 {
		margin-bottom: calc(15 / 750* 100vw);
		font-size: calc(38 / 750 * 100vw);
		line-height: calc(73.2 / 750 * 100vw);
		letter-spacing: calc(7.98 / 750 * 100vw);
	}

	#gFooter .comBtn{
		margin-bottom: calc(45 / 750* 100vw);
	}
	
	#gFooter .contactBox{
		margin-bottom: calc(45 / 750* 100vw);
	}
	#gFooter .contactBox a {
		width:calc(646 / 750 * 100vw);
		height:calc(118 / 750 * 100vw);
		border-radius : calc(59 / 750 * 100vw);
	}

	#gFooter .contactBox a span{
		font-size: calc(26 / 750 * 100vw);
		letter-spacing: calc(2.6 / 750 * 100vw);
	}

	#gFooter .txt04 {
		margin-bottom: calc(45 / 750* 100vw);
		font-size: calc(24 / 750 * 100vw);
		line-height: calc(44.89 / 750 * 100vw);
		letter-spacing: calc(1.44 / 750 * 100vw);
	}

	#gFooter .txt05 {
		margin-bottom: calc(70 / 750* 100vw);
	}

	#gFooter .txt05 a {
		font-size: calc(28 / 750 * 100vw);
		line-height: calc(73.2 / 750 * 100vw);
		letter-spacing: calc(5.88 / 750 * 100vw);
	}

	#gFooter .btm {
		position: relative;
		height: calc(1020 / 750* 100vw);
		padding:0 calc(45 / 750 * 100vw);
		margin-bottom: calc(185 / 750 * 100vw);
		overflow: hidden;
	}

	#gFooter .btm img {
		width: 100%;
	}
	#gFooter .btm .stage{
		position: absolute;
		height:calc(994 / 750 * 100vw);
		padding-top:0;
		top:0;
	}
	#gFooter .btm .stage embed{
		width: calc(572 / 750* 100vw);
		height: calc(188 / 750* 100vw);
		top: calc(470 / 750* 100vw);
		left: calc(45 / 750* 100vw);
	}
	#gFooter .btm .stage::before{
		width:calc(657 / 750 * 100vw);
		height:calc(998 / 750 * 100vw);
		top:calc(20 / 750 * 100vw);
		bottom:calc(30 / 750 * 100vw);
		left:calc(533 / 750 * 100vw);
		background: url(../../img/index/img_stage-sp.png) no-repeat center bottom;
		background-size: contain;
	}

	#gFooter .nav{
		position: relative;
		margin:calc(250 / 750 * 100vw) 0 calc(40 / 750 * 100vw);
		font-size: calc(20 / 750 * 100vw);
		letter-spacing: calc(9.2 / 750 * 100vw);
		z-index: 22;
	}
	#gFooter .nav li{
		padding:0 1em;
	}

	#gFooter .copyright {
		width: 100%;
		margin-left: 0;
		left: 0;
		bottom: 3px;
		font-size: 10px;
		letter-spacing: 1.5px;
		text-align: center;
	}
}