/*全体共通*/
body {
  -webkit-text-size-adjust: 100%;
  width: 100%;
  overflow-x: hidden;
  position: relative;
  color: #fff;
  background: #000;
}
*{
	box-sizing: border-box;
}
h1{
  max-height: 100%;
  color: #fff;
}
a{
  display: inline-block;
  color: #fff;
  font-weight: 200;
}
a:hover{
  cursor: pointer;
}
img{
  display: inline-block;
  max-width: 100%;
}
.inlineblock{
  display: inline-block;
}
.block{
  display: block;
}
.img-cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-contain{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.red{ color: #e60012!important;
}
.yellow{ color: #FEE710;
}
.blue{ color: #3372b9; }
.pink{ color: #ff7987; }
.white{ color: #fff !important; }
.center{
	text-align: center;
}
.under{
	border-bottom: 1px solid #707070;
}
#loading{
	position: absolute;
	background-color: #000;
	z-index: 1000;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}
#loading::before{
	/* content: "asso luce";
	position: fixed;
	top: 50vh;
	left: 0;
	display: block;
	width: 100%;
	opacity: .5;
	color: #fff;
	font-size: 2rem;
	font-weight: 500;
	text-align: center;
	letter-spacing: 1px; */
}
/*パンくずリスト*/
.breadcrumbs{
	padding-top:20px;
	padding-bottom:20px;
	padding-left: 20px;
}
.breadcrumbs li{
	position: relative;
	padding: 0 10px;
	line-height: 20px;
	height: 20px;
}
.breadcrumbs li a,.breadcrumbs li{
	display: inline-block;
	font-size: 1.3rem;
	color: #fff;
}
.breadcrumbs li:after{
	content: "";
    display: inline-block;
    border-top: 1px #fff solid;
    border-right: 1px #fff solid;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: -4px;
    width: 6px;
    height: 6px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.breadcrumbs li:last-child::after{
	display: none;
}

/* common */
.commonInner{
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 40px;
}
.commonInner-p0{
	max-width: 1110px;
	margin: 0 auto;
}
.commonInner-max{
	max-width: 1366px;
	margin: 0 auto;
}
.commonTitle-01{
	font-size: 3rem;
	color: #696969;
}
.commonTitle-01.under{
	padding-bottom: 8px;
}
.commonTitle-01.line0{
	position: relative;
	padding-bottom: 10px;
}
.commonTitle-01.line0::before{
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 100px;
	height: 3px;
	background: url("../img/common/line0.png") center/cover no-repeat;
	transform: translateX(-50%);
}
.commonTitle-02{
	font-size: 2.5rem;
	color: #696969;
}
.commonTitle-03{
	margin-bottom: 22px;
	font-size: 1.9rem;
	letter-spacing: .05em;
	line-height: 1.5;
	font-weight: 300;
}
.commonText{
	font-size: 1.3rem;
	line-height: 1.8;
}

.commonBtn-arrow{
	display: flex;
	align-items: center;
	gap: 10px;
	height: 15px;
}
.commonBtn-arrow span{
	display: block;
}
.commonBtn-arrow span:nth-of-type(1){
	width: 100px;
	height: 5px;
	background: url("../img/common/button.png") left / contain no-repeat;
}
.commonBtn-arrow span:nth-of-type(2){
	position: relative;
	width: 45px;
	height: 1px;
	transition: all .3s;
}
.commonBtn-arrow span:nth-of-type(2)::before,
.commonBtn-arrow span:nth-of-type(2)::after{
	content: "";
	position: absolute;
	bottom: 0;
	background: #FFF500;
	transition: all .3s;
}
.commonBtn-arrow span:nth-of-type(2)::before{
	left: 0;
	width: 100%;
	height: 100%;
}
.commonBtn-arrow span:nth-of-type(2)::after{
	right: 0;
	width: 14px;
	height: 1px;
	transform: rotate(23deg);
	transform-origin: right bottom;
}
a:hover .commonBtn-arrow span:nth-of-type(2)::before{
	width: 53px;
}
a:hover .commonBtn-arrow span:nth-of-type(2)::after{
	right: -8px;
}

.mt-2{ margin-top: 2px !important; }
.mt-5{ margin-top: 5px !important; }
.mt-10{ margin-top: 10px !important; }
.mt-20{ margin-top: 20px !important; }
.mt-30{ margin-top: 30px !important; }
.mt-40{ margin-top: 40px !important; }
.mt-50{ margin-top: 50px !important; }
.mt-60{ margin-top: 60px !important; }
.mt-70{ margin-top: 70px !important; }
.mb-5{ margin-bottom: 5px !important; }
.mb-10{ margin-bottom: 10px !important; }
.mb-20{ margin-bottom: 20px !important; }
.mb-30{ margin-bottom: 30px !important; }
.mb-40{ margin-bottom: 40px !important; }
.mb-50{ margin-bottom: 50px !important; }

.h-opacity a, .h-opacity{
	transition: opacity .3s;
}
.h-opacity a:hover, a.h-opacity:hover, a:hover .h-opacity{
	opacity: .7;
}
.h-underline a:hover, a.h-underline:hover, a:hover .h-underline{
	text-decoration: underline !important;
}
.overflow-h{
	overflow: hidden;
}

/*フォント*/
html { font-size: 62.5%; }
body { font-size: 1.6rem; }
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
body{
	font-family: "Hiragino Kaku Gothic", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	font-weight: 200;
}
/* IE表示用のCSS　*/
@media all and (-ms-high-contrast:none){
    body {font-family: "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans",sans-serif;}
}

p,li,dd{
	font-family:  "Hiragino Kaku Gothic", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	font-weight: 200;
  color: #fff;
  line-height: 30px;
  letter-spacing: .05em;
}
.bold{
	font-weight: bold;
}
/*太さ調整*/
.tbudG_R{
	font-weight: 400;
}
.tbudG_H{
	font-weight: 900;
}

.ta-l{ text-align: left; }
.ta-r{ text-align: right; }

/*PC*/
@media screen and (min-width:900px){
	.pc{
		display: block;
	}
	.tab{
		display: none!important;
	}
	.sp{
		display: none!important;
	}
	.tab_sp{
		display: none!important;
	}
}
/*TAB*/
@media screen and (max-width:899px){
	.pc{
	  	display: none!important;
	}
	.tab{
		display: block;
	}
	.sp{
		display: none!important;
	}
	.tab_sp{
		display: block;
	}

	.commonInner{
		padding: 0 24px;
	}
}
/*SP*/
@media screen and (max-width:480px){
	.pc_tab{
		display: none !important;
	}
	.tab{
		display: none!important;
	}
	.sp{
		display: block!important;
	}

	.commonTitle-01{
		font-size: 2.6rem;
	}
	.commonTitle-01.under{
		padding-bottom: 12px;
	}

	.sp-mb-25{
		margin-bottom: 25px !important;
	}

	.sp-ta-l{
		text-align: left !important;
	}
	.sp-center{
		text-align: center !important;
	}
	.sp-ta-r{
		text-align: right !important;
	}
}

#bgBox{
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	width: 100%;
	height: 100%;
	z-index: -100;
	overflow: hidden;
}
#bg{
	position: absolute;
	width: 100%;
	min-height: 4000px;
	height: 100%;
	background: -moz-linear-gradient(to bottom, #000, #000 8%, #262626 18%, #222 30%, #000 45%, #222 65%, #000);
	background: -webkit-linear-gradient(to bottom, #000, #000 8%, #262626 18%, #222 30%, #000 45%, #222 65%, #000);
	background: linear-gradient(to bottom, #000, #000 8%, #262626 18%, #222 30%, #000 45%, #222 65%, #000); 
	z-index: -1;
}
#bgBox .deco{
	flex-shrink: 0;
	width: 145.3147vw;
	min-width: 1985px;
	background: url("../img/common/bg-deco.png") center -856px / cover repeat;
	background: url(../img/common/bg-deco.png) center -780px / 106% repeat;
}

#header{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 900;
}
#header.active{
	position: fixed;
}
#header .cntInner{
	width: 100%;
	/* max-width: 1366px; */
	max-width: 1316px;
	margin: auto;
	padding: 60px 45px 30px;
	position: fixed;
	left: 0;
	right: 0;
}

#navBtn{
	position: relative;
	display: block;
	width: 60px;
	height: 22px;
	margin-left: auto;
	padding: 10px;
	background: none;
	border: none;
	appearance: none;
	cursor: pointer;
	z-index: 2;
	/* transition: all .4s; */
}
#navBtn span {
	position: absolute;
	display: inline-block;
	height: 2px;
	background-color: #fff;
	transition: all .4s;
}
#navBtn span:nth-of-type(1) {
	top: 0;
	right: 10px;
	width: 50px;
}
#navBtn span:nth-of-type(2) {
	top: 10px;
	left: 15px;
	width: 40px;
}
#navBtn span:nth-of-type(3) {
	bottom: 0;
	right: 0;
	width: 30px;
}
#navBtn.active span:nth-of-type(1) {
	/* width: 50px;
	transform: translateY(20px) rotate(-45deg); */
	width: 40px;
    top: -1px;
    /* left: 10px; */
	transform: rotate(-30deg);
	transform-origin: top right;
}
#navBtn.active span:nth-of-type(2) {
	opacity: 0;
}
#navBtn.active span:nth-of-type(3) {
	/* width: 50px;
	transform: translateY(-20px) rotate(45deg); */
	top: 9px;
	right: 6px;
	width: 40px;
	transform: rotate(30deg);
}

#nav{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height:100vh;
	background: #000000;
	overflow-y: scroll;
	-ms-overflow-style: none;    /* IE, Edge 対応 */
	scrollbar-width: none;       /* Firefox 対応 */
}
#nav::-webkit-scrollbar{  /* Chrome, Safari 対応 */
	display:none;
}
#nav .cntInner{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	min-height: 100%;
	padding: 120px 50px;
}
#nav .headerNav{
	display: flex;
	flex-direction: row-reverse;
	gap: 100px;
	width: 100%;
}
#nav a{
	font-family: "Hiragino Kaku Gothic", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}
#nav .headerLogo{
	width: 94px;
}
#nav .mainNav{
	width: 260px;
	font-size: 3rem;
	font-weight: 500;
}
#nav .mainNav .cntItem{
	padding: 15px 0;
}
#nav .subNav{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 200px;
	font-size: 1.5rem;
}
#nav .cntItem{
	display: block;
	transition: all .3s;
	color: #696969;
	white-space: nowrap;
}
#nav .cntItem:hover{
	color: #fff;
}

/*TAB*/
@media screen and (max-width:899px){
	#header .cntInner{
		padding: 35px 25px 20px;
	}

	#nav .cntInner{
		padding: 120px 50px;
	}
	#nav .headerNav{
		gap: 50px;
	}
}
/*SP*/
@media screen and (max-width:480px){
	#nav .cntInner{
		display: block;
		height: 100%;
		padding: 60px 25px 30px;
	}
	#nav .headerNav{
		flex-direction: column;
		justify-content: space-between;
		gap: 20px;
		height: 100%;
		padding-top: 7.4962vh;
	}
	#nav .mainNav{
		width: 100%;
	}
	#nav .mainNav .cntItem{
		padding: 2vh 0;
	}
	#nav .subNav{
		flex-direction: row-reverse;
		align-items: flex-end;
		width: 100%;
		padding-bottom: 24px;
	}
}

#mainVisual{
	position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  min-height: 500px;
	font-family: "Hiragino Kaku Gothic", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	overflow: hidden;
}
#mainVisual .cntInner{
	position: relative;
	width: 100%;
	max-width: 1110px;
	padding: 0 105px;
}
#mainVisual .cntImg{
	width: 100%;
	max-width: 838px;
	height: 100%;
	margin: 0 auto;
}
#mainVisual .cntInner, #mainVisual > .cntImg{
	height: 70%;
	max-height: 456px;
}
#mainVisual .cntText{
	position: absolute;
	right: 35px;
	bottom: 0;
	font-size: 2.3rem;
}
#mainVisual .cntText::before{
	content: "";
	position: absolute;
	bottom: -23px;
	left: -80px;
	width: 1px;
	height: 188px;
	border-left: 1px solid;
	transform: rotate(45deg);
	transform-origin: bottom left;
}
/* TAB */
@media screen and (max-width: 899px) {
	#mainVisual .cntInner{
        padding: 0;
    }
    #mainVisual .cntInner .cntImg{
        -webkit-clip-path: polygon(0 0, 0 100%, calc(100% - 160px) 100%, 100% calc(100% - 160px), 100% 0);
        clip-path: polygon(0 0, 0 100%, calc(100% - 160px) 100%, 100% calc(100% - 160px), 100% 0);
        /* -webkit-clip-path: polygon(0 0, 0 100%, 60.1480% 100%, 100% 56.6278%, 100% 0);
        clip-path: polygon(0 0, 0 100%, 60.1480% 100%, 100% 56.6278%, 100% 0); */
    }
    #mainVisual .cntText{
        right: 0;
        padding-right: 4%;
        padding-bottom: 7px;
    }
    #mainVisual .cntText::before{
        left: auto;
        right: 0;
        bottom: -9px;
        width: 168px;
        height: 255px;
    }
}
/*SP*/
@media screen and (max-width:480px){
    #mainVisual .cntInner, #mainVisual > .cntImg{
        height: 64%;
    }
}

#footer{
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 65px 20px;
	padding-top: 130px;
	padding-bottom: 95px;
	overflow: hidden;
}
#footer::before{
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 1100px;
	height: 1px;
	background: #707070;
	transform: translateX(-50%);
}
#footerLogo{
	margin-bottom: 25px;
	font-size: 3rem;
	white-space: nowrap;
}
#footerNav{
	font-size: 1.4rem;
}
#footerNavMain{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 12px 30px;
}
#footerNavSub{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 12px 25px;
	margin-top: 10px;
}
#footerNavSub *{
	color: #696969;
}
#footer .copyright{
	color: #696969;
	font-size: 1.4rem;
	text-align: right;
	white-space: nowrap;
	line-height: 30px;
}

/*TAB*/
@media screen and (max-width:899px){
	#footer{
		padding-top: 60px;
		padding-bottom: 45px;
		flex-direction: column;
		align-items: flex-start;
	}
	#footerCnt{
		display: flex;
		justify-content: space-between;
		gap: 50px;
		width: 100%;
	}
	#footer .copyright{
		text-align: left;
	}
}
/*SP*/
@media screen and (max-width:480px){
	#footer{
		padding-top: 40px;
	}
	#footerCnt{
		/* flex-wrap: wrap; */
		gap: 30px;
	}
	#footerLogo{
		/* font-size: 7.9787vw; */
		font-size: 6.25vw;
	}
	#footerNavMain{
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 25px;
	}
	#footerNavSub{
		width: 100%;
		display: grid;
		grid-template-columns: 1fr;
		/*column-gap: 25px;*/
		gap: 0;
	}
}