/*
 * css
 */

/*font*/
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;400;500;700&display=swap');

/*
 * Base structure
 */

body {
/*  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);*/
  font-size:96%;
}

img{
  max-width:100%;
}

.bg-dark{
	background:#000 !important;
}
.noactive{color: rgba(255,255,255,.2) !important;}

a{color:#FFF;}
a:hover{color:#DDD;}

/*font-size */
.fs-7{font-size:.85rem}
.fs-8{font-size:.7rem}



.wrap{
    min-height: 100vh; /* ←コンテンツの高さの最小値＝ブラウザの高さに指定 */
    position: relative;/* ←相対位置 */
    box-sizing: border-box;
    /* ↑ヘッダーやフッターを含むすべての要素の高さ＝min-height:100vhになるように指定 */
}


.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.upcase{text-transform: uppercase;}


/*------------------------------------------*/
/*row custom*/
/*------------------------------------------*/
.row-0{ margin-left:0px;  margin-right:0px}
.row-0 >div{ padding-right:0px;  padding-left:0px}
.row-0 >article{ padding-right:0px;  padding-left:0px}
.row-10{ margin-left:-5px;  margin-right:-5px}
.row-10 >div{ padding-right:5px;  padding-left:5px}
.row-10 >article{ padding-right:5px;  padding-left:5px}
.row-15{ margin-left:-7.5px;  margin-right:-7.5px}
.row-15 >div{ padding-right:7.5px;  padding-left:7.5px}
.row-15 >article{ padding-right:7.5px;  padding-left:7.5px}
.row-20{ margin-left:-10px;  margin-right:-10px}
.row-20 >div{ padding-right:10px;  padding-left:10px}
.row-20 >article{ padding-right:10px;  padding-left:10px}
.row-30{ margin-left:-15px;  margin-right:-15px}
.row-30 >div{ padding-right:15px;  padding-left:15px}
.row-30 >article{ padding-right:15px;  padding-left:15px}

/*
 * Header
 */

header.bg-dark{
	width: 100%;
	position:fixed;
	top:0;
	left:auto;
	right:auto;
	background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.887570028011204) 79%, rgba(0,0,0,0) 100%)!important;
	z-index:10;
}


nav{
  width: 100%;
  height: 76px;
  position: relative;
  background: transparent;
  font-family: 'Raleway', sans-serif;

}

.logo{
    margin:0 auto;
    width: 210px;
}

@media screen and (max-width: 350px) {
    .logo{width: 160px;}
}

.drawer{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 60px;
}

.drawer h1 a{
  text-decoration:none;
  color:#FFF;
}

.drawer h1 span{
  font-size: calc(20.2px - 2px);
}




main{
  margin-top:76px;
  padding-bottom:60px;
  flex: 1;
}

/*ナビゲーション部分*/
.main_nav ul,
.ft_nav ul{
	padding:0;
	margin:0;
	list-style-type:none;
}

.main_nav ul li a {
	color:#FFF;
	display:block;
	font-weight:400;
	padding: 1em;
	text-decoration:none;
}
.main_nav ul li a:hover{
	color:#FFF;
	background-color: rgba(0,0,0,.5);

}
.main_nav{
  text-align:center;
  transition: .5s ease;/*滑らかに表示*/
  -webkit-transform: translateX(150%);
  transform: translateX(150%);/*左に隠しておく*/

}
.nav-link.active {
  color: #666;
}

.snsnav li{
 line-height: 1;
}
 a img{
	width:18px;
	line-height:1;
}

.snsnav a i{
	font-size: 18px;
	line-height:1.2;
}

.snsnav a.noactive{
	opacity:.3;
}




@media screen and (min-width: 768.333px) {
	header::after{
		display:none;
	} 
	nav{
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    justify-content: space-between;
	}
	.Toggle{
		display: none;
	}
	.main_nav{
		width: 100%;
		background-color: transparent;
		margin-top:0;
		-webkit-transform: translateX(0);
		transform: translateX(0);
		display: flex;
		justify-content: flex-end;
	}
	.main_nav ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: center;
	}
	.main_nav ul li a{
		padding: 1.2em 1em;
		border-bottom: none;
	}

	.main_nav ul.snsnav li a{
		padding: 1.2em .7em;
	}

	.main_nav ul li a:hover{
		background-color:transparent;
	}
}



/*TOP*/
.bgtop{
	background-image:url("../img/top01.png");
	background-size:cover;
	background-position:center center;
	min-height: calc(100vh - 140px);
}

.movwrap{
  max-width:480px;
  margin:0 auto;
  width:100%;
  height: 75vh;
  position: relative;
  overflow: hidden;
  z-index: -1;
}
.movwrap video{
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.movwrap.item{
  height: 50vh;
}

/*term*/
.dl01 dt{
	font-size:110%;
}
.dl01 dd{
	margin-left:.6rem;
	margin-bottom:1rem;
}

.ul01 li{
  list-style-type: decimal;
  margin-bottom:.6em;
}

.ul01 li>ul>li{
  list-style-type: none;
  counter-increment: cnt;
  margin-bottom:.3em;

}
.ul01 li>ul>li:before{
  content: "(" counter(cnt) ") ";
  display:inline-block;
  margin-left:-2em; /* サイトに合せて調整 */
  margin-right:.5em;
  width: 2em;
  text-align:right;
}

/*vision*/
.vision{
	padding:1.5em 4em;
	/*background:#d5dade;*/
	background:rgba(208,179,124.8);
	color:#000;
	min-height: 220px;
}
@media screen and (max-width: 990px) {
	.vision{
		min-height: 286px;
	}
}
@media screen and (max-width: 768px) {
	.vision{
		min-height: 218px;
	}
}
@media screen and (max-width: 428px) {
	.vision{
		padding: 1.5em 1.5em;
		min-height: 238px;
	}
}



/*roadmap*/
.bggray{border:.5px solid #7f7f7f}
.bgred {border:.5px solid #b22135}
.bgblue{border:.5px solid #2128b2}
.bggrn {border:.5px solid #349646}
.bgppl {border:.5px solid #782a9c}

.bggray h3{background:#7f7f7f}
.bgred  h3{background:#b22135}
.bgblue h3{background:#2128b2}
.bggrn  h3{background:#349646}
.bgppl  h3{background:#782a9c}

.lineH{
	width:1px;
	background:#FFF;
	height:100%;
	margin: .9em auto;
	position:relative;
}

.lineH.grd{
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

.lineH::before{
  content:"";
  display:block;
  width: 17px;
  height: 17px;
  background: rgb(255,255,255);
  background: radial-gradient(circle, rgba(255,255,255,1) 40%, rgba(255,255,255,.2) 70%);
  border-radius: 50%;
  text-align: center;
  position:absolute;
  left:-8px;
  top:-8px;
  z-index:1;
}





/*collection*/
.cdate{padding-left:2em}

/*roadmap*/
.bggrad{
  background: rgb(208,179,124);
  background: radial-gradient(circle, rgba(208,179,124) 1%, rgba(0,0,0,1) 70%);
}

@media screen and (min-width: 768.333px) {
	.bggrad{
	  background: radial-gradient(circle, rgba(208,179,124) 1%, rgba(0,0,0,1) 40%);
	}
}


footer{
	font-size:.8rem;
}

/*------------------------------------------*/
/*pagetop*/
/*------------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 40px;
    right: 20px;
    z-index: 20;
    margin: 0;
    display: none;
    padding:0;
}

/*pagetop btn*/
#pagetop a {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    display: block;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: #FFFFFF;
    background: #515151;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
    font-size: 20px;
}
#pagetop a i{
	line-height:40px;
}


@media screen and (max-width: 990px) {
	.main_nav ul li a{
		padding: 1.2em .6em;
		font-size: .86rem;
	}
}
@media screen and (max-width: 768px) {
	/*OPEN時の動き*/
	.main_nav.open {
	 -webkit-transform: translateX(0%);
	 transform: translateX(0%);/*中身を表示（右へスライド）*/
	 background: #1b1d1f;
	 display:block;
	 height: 100vh;
	}

	body.fixed {
	 width: 100%;
	 height: 100%;
	 position: fixed;
	}

	.main_nav ul li a{
		padding: 1.2em 1em;
	}

	/*トグルボタンのスタイルを指定*/
	.Toggle {
	    display: block;
	    position: absolute;    /* bodyに対しての絶対位置指定 */
	    width: 42px;
	    height: 42px;
	    cursor: pointer;
	    z-index: 3;
	    right:15px;
	}
	 
	.Toggle span {
	    display: block;
	    position: absolute;
	    width: 50px;
	    border-bottom: solid 4px #FFF;
	    -webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
	    -moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
	    transition: .35s ease-in-out;			/*変化の速度を指定*/
	 
	}
	 
	.Toggle span:nth-child(1) {
	    top:5px;
	}
	 
	.Toggle span:nth-child(2) {
	    top: 18px;
	}
	 
	.Toggle span:nth-child(3) {
	    top: 32px;
	}
	 


	.Toggle.active span:nth-child(1) {
	    top: 18px;
	    -webkit-transform: rotate(-45deg);
	    -moz-transform: rotate(-45deg);
	    transform: rotate(-45deg);
	}
	 
	/* 2番目と3番目のspanを45度に */
	.Toggle.active span:nth-child(2),
	.Toggle.active span:nth-child(3) {
	    top: 18px;
	    -webkit-transform: rotate(45deg);
	    -moz-transform: rotate(45deg);
	    transform: rotate(45deg);
	}
	nav{
		height: 60px;
	}
	main{
		margin-top:60px;
	}
}

@media screen and (max-width: 575.88px) {
	.sp_none{display:none;}
}