@charset "UTF-8"; 
/* リセットCSS
-------------------------------------------------------------- */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
::before , ::after {
	box-sizing: inherit;
}
button {
	margin: 0;
	padding: 0;
	outline: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	vertical-align: middle;
	text-align: inherit;
	font: inherit;
	-webkit-appearance: none;
	appearance: none;
}
/* 共通部分
-------------------------------------------------------------- */
body{
	overflow-x: hidden;
	background:#ffec04;
	font-family: 'Kosugi Maru', sans-serif;
	color: #333;
	font-size:1rem;
	line-height:1.85;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%; 
	word-wrap: break-word;
    letter-spacing: 0.2em;
}

ul{
	margin:0;
	padding: 0;
	list-style: none;
}

a{
	color: #333;
	text-decoration: none;
    outline: none;
}

/* heading */

h2{
	text-align: center;
	margin: 0 0 50px 0;
	font-size: 1.1vw;
	line-height: 1.5;
}

h2 span{
	font-size: 3.5vw;
	text-transform: uppercase;
	display: block;   
}

@media screen and (max-width:1130px) {
h2{
	font-size: 0.9rem;
}

h2 span{
	font-size: 2.5rem;
}
}

@media screen and (max-width:768px) {
h2{
	font-size: 0.8rem;
}

h2 span{
	font-size: 2rem;
}
}


#header h1{
	font-size: 2rem;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	z-index: 999;
	letter-spacing: 0.1em;
	width:24em;
}

#header{
	height: 100vh;
	position: relative;
}


#header h1 img,
#header h1 canvas{
	width:100px;
	position: relative;
	left:1.8em;
}

#header-nft{
	position: relative;
}

.header-area{
	text-shadow    : 
       2px  2px 1px #fff,
      -2px  2px 1px #fff,
       2px -2px 1px #fff,
      -2px -2px 1px #fff,
       2px  0px 1px #fff,
       0px  2px 1px #fff,
      -2px  0px 1px #fff,
       0px -2px 1px #fff;
}
/* area
-------------------------------------------------------------- */
.inner{
	width:100%;
	margin:0 auto;
	padding:0;
/*	padding:70px;
*/	text-align: center;
}

@media screen and (max-width:940px) {
	.inner{
		padding:70px 30px;
		text-align: center;
	}
	#header h1{
		font-size: 1.5rem;
		width:80vw;
		z-index:20;
	}
}


/* goods
-------------------------------------------------------------- */
#goods{
    background: url("../image/pen_01.png") no-repeat left top,url("../image/pen_02.png") no-repeat right top;
    background-size:250px auto;
	position: relative;
    padding: 50px 0 0 0;
    margin: 0 0 100px 0;
}

@media screen and (max-width:1300px) {
#goods{
    background-size:200px auto;
}    
}

@media screen and (max-width:768px) {
#goods{
    background-size:150px auto;
}    
}

@media screen and (max-width:400px) {
#goods{
    background-size:130px auto;
}    
}

#goods h2 span{
    color: #2e98e5;
}
#goods h3{
	font-size:2rem;
	color: #fff;
	background:#504237;
}
#goods .span-c{
	font-size:0.8rem;
	color:#ff0000;
	background: linear-gradient(transparent 60%, #f6ff5f 0%);
}

#goods .span-d{
	font-size:1rem;
	background: linear-gradient(transparent 0%, #f9d3d3 0%);
	font-weight:bold;
}

#goods .span-b{
	font-size:1.2rem;
	font-weight:bold;
}

#goods .goods-area{
	position: relative;
	padding: 5rem 0;
}
#goods .goods-area img{
    width:100%;
	padding: 0;
	display: block;
}
.goods-btn{
    text-align:center;
    padding: 20px 0 20px 0;
}

#goods .ts-wrapper{
	width: auto;
	height: auto;
	display: flex;
	flex-direction: row;
	justify-content: center;
	background: #fff;
}

#goods .ts{
	width: auto;
	text-align: center;
	background: #fff;
	margin:0;
}
#goods .ts2{
	width: 15vw;
	text-align: center;
    padding: 25px 25px 25px 25px;
}
#goods .ts3{
	width: 20vw;
	text-align: center;
}

@media (max-width: 768px) {
	#goods .ts-wrapper{
		flex-direction: column;
	}
	#goods .ts2{
		width: 100vw;
		text-align: center;
	}
	#goods .ts3{
		width: 100vw;
		text-align: center;
	}
}

/* shop
-------------------------------------------------------------- */
#shop{
	position: relative;
	padding: 50px 0 100px 0;
	margin: 0 0 100px 0;
}

@media screen and (max-width:1300px) {
#shop{
	background-size:200px auto;
}    
}

@media screen and (max-width:768px) {
#shop{
	background-size:150px auto;
}    
}

@media screen and (max-width:400px) {
#shop{
	background-size:130px auto;
}
}

#shop:after{
	position: absolute;
	z-index: -1;
	content:'';
	top:10px;
	left:0;
/*	left:-30%;
	width:150%;
*/	width:100%;
	height: 1100px;
	background: #fff;
/*	transform: rotate(-5deg);
*/}

@media screen and (max-width:400px) {
#shop:after{
	height: 600px;
	}
}

#shop h2 span{
    color: #2e98e5;
}

#shop .shop-area{
    position: relative;
    padding: 80px 0;
}
#shop .shop-area img{
	width:70%;
}

#shop .shop-area2{
	background:#fff;
	padding: 40px;
	border: 1px solid #333;
	width:80%;
	margin: 0 auto;
	border-radius:10px;
}
#shop .shop-area2 .wrapper{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width:80%;
	height:60vh;
	margin: 0 auto;
	overflow-x:scroll;
}
#shop .shop-area2 .wrapper2{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width:80%;
	height:80vh;
	margin: 0 auto;
	overflow-x:scroll;
}
#shop .shop-area2 .item h2{
	text-align: center;
	margin: 1rem 0 0 0;
	font-size: 3vw;
	line-height: 0;
}
#shop .shop-area2 .text{
	text-align: center;
	margin: 0 auto;
	padding:13px 0 0 0;
	font-size: 1vw;
	line-height: 0;
	color:#fff;
	width:100px;
	height:30px;
	background-color:#aaa;
	border-radius:10px;
}
#shop .shop-area2 img{
	width:100%;
	min-width:300px;
}

@media screen and (max-width:840px) {
#shop .shop-area2{
	background:#fff;
	padding: 10px;
	border: 1px solid #333;
	width:95%;
	margin: 0 auto;
	border-radius:10px;
	}
#shop .shop-area2 .wrapper{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width:100%;
	height:80vh;
	margin: 0 auto;
	}
#shop .shop-area img{
	width:100%;
	}
#shop .shop-area2 .wrapper{
	width:100%;
	}
}

/* sliderの */
.img-gallery{
}

.img-gallery img{
    border-radius: 10px;
}

/* linesticker
-------------------------------------------------------------- */
#linesticker{
	position: relative;
	padding: 50px 0 100px 0;
	margin: 0 0 100px 0;
}

@media screen and (max-width:1300px) {
#linesticker{
	background-size:200px auto;
}    
}

@media screen and (max-width:768px) {
#linesticker{
	background-size:150px auto;
}    
}

@media screen and (max-width:400px) {
#linesticker{
	background-size:130px auto;
}    
}

#linesticker:after{
	position: absolute;
	z-index: -1;
	content:'';
	top:10px;
	left:0;
/*	left:-30%;
	width:150%;
*/	width:100%;
	height: 2350px;
	background: #fff;
/*	transform: rotate(-5deg);
*/}
@media screen and (max-width:400px) {
#linesticker:after{
	height: 940px;
	}
}

#linesticker h2 span{
    color: #2e98e5;
}

#linesticker .linesticker-area{
    position: relative;
    padding: 80px 0;
}
#linesticker .linesticker-area img{
	width:70%;
}

#linesticker .linesticker-area2{
	background:#fff;
	padding: 40px;
	border: 1px solid #333;
	width:80%;
	margin: 0 auto;
	border-radius:10px;
}
#linesticker .linesticker-area2 .wrapper{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width:80%;
	height:60vh;
	margin: 0 auto;
	overflow-x:scroll;
}
#linesticker .linesticker-area2 .wrapper2{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width:80%;
	height:80vh;
	margin: 0 auto;
	overflow-x:scroll;
}
#linesticker .linesticker-area2 .item h2{
	text-align: center;
	margin: 1rem 0 0 0;
	font-size: 3vw;
	line-height: 0;
}
#linesticker .linesticker-area2 .text{
	text-align: center;
	margin: 0 auto;
	padding:13px 0 0 0;
	font-size: 1vw;
	line-height: 0;
	color:#fff;
	width:100px;
	height:30px;
	background-color:#aaa;
	border-radius:10px;
}
#linesticker .linesticker-area2 img{
	width:100%;
	min-width:300px;
}

@media screen and (max-width:840px) {
#linesticker .linesticker-area2{
	background:#fff;
	padding: 10px;
	border: 1px solid #333;
	width:95%;
	margin: 0 auto;
	border-radius:10px;
	}
#linesticker .linesticker-area2 .wrapper{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width:100%;
	height:80vh;
	margin: 0 auto;
	}
#linesticker .linesticker-area img{
	width:100%;
	}
#linesticker .linesticker-area2 .wrapper{
	width:100%;
	}
}

/* nftart
-------------------------------------------------------------- */
#nftart{
	position: relative;
	padding: 50px 0 100px 0;
	margin: 0 0 100px 0;
}

@media screen and (max-width:1300px) {
#nftart{
	background-size:200px auto;
}    
}

@media screen and (max-width:768px) {
#nftart{
	background-size:150px auto;
}    
}

@media screen and (max-width:400px) {
#nftart{
	background-size:130px auto;
}    
}

#nftart:after{
	position: absolute;
	z-index: -1;
	content:'';
	top:10px;
	left:0;
/*	left:-30%;
	width:150%;
*/	width:100%;
	height: 850px;
	background: #fff;
/*	transform: rotate(-5deg);
*/}
@media screen and (max-width:400px) {
#nftart:after{
	height: 500px;
	}
}
#nftart h2 span{
    color: #2e98e5;
}

#nftart .nftart-area{
    position: relative;
    padding: 80px 0;
}
#nftart .nftart-area img{
	width:70%;
}

#nftart .nftart-area2{
	background:#fff;
	padding: 40px;
	border: 1px solid #333;
	width:80%;
	margin: 0 auto;
	border-radius:10px;
}
#nftart .nftart-area2 .wrapper{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width:80%;
	height:60vh;
	margin: 0 auto;
	overflow-x:scroll;
}
#nftart .nftart-area2 .wrapper2{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width:80%;
	height:80vh;
	margin: 0 auto;
	overflow-x:scroll;
}
#nftart .nftart-area2 .item h2{
	text-align: center;
	margin: 1rem 0 0 0;
	font-size: 3vw;
	line-height: 0;
}
#nftart .nftart-area2 .text{
	text-align: center;
	margin: 0 auto;
	padding:13px 0 0 0;
	font-size: 1vw;
	line-height: 0;
	color:#fff;
	width:100px;
	height:30px;
	background-color:#aaa;
	border-radius:10px;
}
#nftart .nftart-area2 img{
	width:100%;
	min-width:300px;
}

@media screen and (max-width:840px) {
#nftart .nftart-area2{
	background:#fff;
	padding: 10px;
	border: 1px solid #333;
	width:95%;
	margin: 0 auto;
	border-radius:10px;
	}
#nftart .nftart-area2 .wrapper{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width:100%;
	height:80vh;
	margin: 0 auto;
	}
#nftart .nftart-area img{
	width:100%;
	}
#nftart .nftart-area2 .wrapper{
	width:100%;
	}
}

/* news
-------------------------------------------------------------- */
#news{
	position: relative;
	padding: 50px 0 100px 0;
	margin: 0 0 100px 0;
}

@media screen and (max-width:840px) {
#news{
	margin:0;
	padding: 50px 0;
	}
}

#news:after{
	position: absolute;
	z-index: -1;
	content:'';
	top:10px;
	left:0;
/*	left:-30%;
	width:150%;
*/	width:100%;
	height: 680px;
	background: #2e98e5;
/*	transform: rotate(-5deg);
*/}


#news .news-area{
	background:#fff;
	padding: 40px;
	box-shadow: 10px 10px 0 rgba(0,0,0,0.5);
	width:70%;
	margin: 0 auto;
	border-radius:10px;
}

#news h2{
	color: #fff;	
}

#news li a{
	transition: all 0.3s;
}

#news li a:hover{
	color: #666;    
}

#news article{
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 20px 0;
	padding: 0 0 20px 0;
	border-bottom: 1px solid #333;
}

#news article time{
	padding: 0 2em 0 0;
	color: #666;
	font-size: 0.8rem;
}

#news article h3{
	font-size: 1rem;
}

@media screen and (max-width:840px) {
#news .news-area{
	width:90%;
	}

#news article time,
#news article h3{
	width:100%;
	}    
}

#news .icon-01,
#news .icon-01 canvas{
	position: absolute;
	bottom:-50px;
	right:50px;
	width: 100px;
}

#news .icon-02,
#news .icon-02 canvas{
	position: absolute;
	top:-60px;
	right:88px;
	width:80px;
}

#news .icon-03,
#news .icon-03 canvas{
	position: absolute;
	bottom:-130px;
	left:80px;
	width: 200px;
}

#news .icon-04,
#news .icon-04 canvas{
	position: absolute;
	top:10px;
	left:50px;
	width: 100px;
}

/* バナー
-------------------------------------------------------------- */
.banner-flex{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	padding: 2rem;
	margin: 0 auto;
}
.banner-flex img{
	width: 400px;
	padding: 2rem;
}

#banner{
	position: relative;
	padding: 50px 0 100px 0;
	margin: 0 0 100px 0;
}

@media screen and (max-width:1300px) {
#banner{
	background-size:200px auto;
}    
}

@media screen and (max-width:768px) {
#banner{
	background-size:150px auto;
}    
}

@media screen and (max-width:400px) {
#banner{
	background-size:130px auto;
}    
}

#banner:after{
	position: absolute;
	z-index: -1;
	content:'';
	top:10px;
	left:0;
/*	left:-30%;
	width:150%;
*/	width:100%;
	height: 500px;
	background: #fff;
/*	transform: rotate(-5deg);
*/}
#banner h2 span{
    color: #2e98e5;
}

#banner .banner-area{
    position: relative;
    padding: 80px 0;
}
#banner .banner-area img{
	width:70%;
}

#banner .banner-area2{
	background:#fff;
	padding: 40px;
	border: 1px solid #333;
	width:80%;
	margin: 0 auto;
	border-radius:10px;
}
#banner .banner-area2 .wrapper{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width:80%;
	height:60vh;
	margin: 0 auto;
	overflow-x:scroll;
}
#banner .banner-area2 .wrapper2{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width:80%;
	height:80vh;
	margin: 0 auto;
	overflow-x:scroll;
}
#banner .banner-area2 .item h2{
	text-align: center;
	margin: 1rem 0 0 0;
	font-size: 3vw;
	line-height: 0;
}
#banner .banner-area2 .text{
	text-align: center;
	margin: 0 auto;
	padding:13px 0 0 0;
	font-size: 1vw;
	line-height: 0;
	color:#fff;
	width:100px;
	height:30px;
	background-color:#aaa;
	border-radius:10px;
}
#banner .banner-area2 img{
	width:100%;
	min-width:300px;
}

@media screen and (max-width:840px) {
#banner .banner-area2{
	background:#fff;
	padding: 10px;
	border: 1px solid #333;
	width:95%;
	margin: 0 auto;
	border-radius:10px;
	}
#banner .banner-area2 .wrapper{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width:100%;
	height:80vh;
	margin: 0 auto;
	}
#banner .banner-area img{
	width:100%;
	}
#banner .banner-area2 .wrapper{
	width:100%;
	}
}

/* footer
-------------------------------------------------------------- */
#footer{
/*    background: #2e98e5;
*/	color: #fff;
	background: #333;
}

#footer a{
	color: #fff;
}

.footer-area{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}

.school-info{
	width:30%;
}

.school-info span{
	display: block;
	font-size:1.7rem;
	font-weight: bold;
	line-height: 1.5;
}

.school-info dt.footer-title,
.school-info li:first-of-type{
	margin: 0 0 10px 0;
}

.school-info li dt{
	margin:0 10px 0 0;
}

.school-info li dt,
.school-info li dd{
	display: inline-block;
}

.footer-sitemap{
	width:65%;
}

.footer-sitemap ul{
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 50px 0;
	font-size: 0.9rem;
}

.footer-sitemap li{
	padding: 10px 20px;
}

.footer-sitemap li a{
	position: relative;
	padding: 0 10px;
}

.footer-sitemap li a:before{
	position: absolute;
	top:40%;
	left:-10px;
	content: '';
	width: 7px;
	height:7px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
}

small{
	display: block;
	text-align: right;
}

@media screen and (max-width:1090px) {
	.footer-area{
		align-items: flex-start;
	}
.school-info{
	width:40%;
	}
.footer-sitemap{
	width:56%;
	}
}

@media screen and (max-width:940px) {
	small{
		text-align: center;
	}
	#page-top{
	position: relative;
	text-align: center;
	right: inherit;
	bottom: inherit;
	margin: 50px auto 30px auto;
	width: 80px;
	animation: none!important;
	transform:none!important;
	opacity: 1;
	}
}

@media screen and (max-width:768px) {
.school-info,
.footer-sitemap{
	width:100%;
	}

.school-info{
		text-align: center;
		margin:0 0 70px 0;
		padding: 0 0 70px 0;
		border-bottom:1px solid rgba(255,255,255,0.8);
	}
	.school-info span{
		font-size:1.3rem;
	}    
}
/*==================================================
複数画像を流して見せる
===================================*/

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider2 img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

.slider2 .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}


/*==================================================
右下に押し込まれる（立体が平面に）
===================================*/
/* ボタン共通設定 */
.btn03{
	/*影の基点とするためrelativeを指定*/
	position: relative;
	/*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	text-align: center;
	background: transparent;
	border-radius: 25px;
	border: solid 1px #333;
	outline: none;
	/*アニメーションの指定*/
	transition: all 0.2s ease;
}

/*hoverをした後のボタンの形状*/
.btn03:hover{
	border-color:transparent;	
}

/*ボタンの中のテキスト*/
.btn03 span {
	position: relative;
	z-index: 2;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	/*テキストの形状*/
	display: block;
	padding: 10px 30px;
	background:#f0f0f0;
	border-radius: 25px;
	color:#333;
	/*アニメーションの指定*/
	transition: all 0.3s ease;
}

/*影の設定*/
.pushright:before {
	content: "";
	/*絶対配置で影の位置を決める*/
	position: absolute;
	z-index: -1;
	top: 4px;
	left: 4px;
	/*影の形状*/
	width: 100%;
	height: 100%;
	border-radius: 25px;
	background-color: #333;
}

/*hoverの際にX・Y軸に4pxずらす*/
.pushright:hover span {
	background-color: #333;
	color: #fff;
	transform: translate(4px, 4px);
}



/* SVGでロゴを表示する
-------------------------------------------------------------- */
.svg_path {
	fill: none;
	stroke: #000;
}
path {
	fill-opacity: 0.5;
	transition: fill-opacity 1s;
}
.fill path {
	fill: #fff;
	fill-opacity: 1;
	stroke: none;
}
.splash{
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: #feaa00;
	text-align:center;
	color:#fff;
}
.splash_logo{
/*	position: absolute; 
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	color: #fff;
	text-align: center;
	width:60vw;
*/    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	text-align: center;
	width:60vw;
}
/* 画面遷移アニメーション
-------------------------------------------------------------- */
.splashbg{
	display: none;
}

body.appear .splashbg{
	display: block;
	position:fixed;
	z-index: 999;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	transform: scaleY(0);
	background-color:#504237;/*伸びる背景色の設定*/
	animation-name:PageAnime;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
}

@keyframes PageAnime{
	0% {
		transform-origin:top;
		transform:scaleY(0);
	}
	50% {
		transform-origin:top;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:bottom;
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}
/*画面遷移の後現れるコンテンツ設定*/
#container{
	position: relative;
	z-index: 1;
	opacity: 0;/*はじめは透過0に*/
}

/*画面遷移の後現れるコンテンツ設定*/
#container2{
	position: relative;
	z-index: 1;
	opacity: 1;
}

/*bodyにappearクラスがついたら出現*/
body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

/*----------------------------*/
/*===========================================================*/
/* ドロップダウンメニュー（上） */
/*===========================================================*/

/*========= ナビゲーションドロップダウンのためのCSS ===============*/
/*ナビゲーションを横並びに*/
nav ul{
	list-style: none;
	display: flex;
	justify-content: center;
}
/*2階層目以降は横並びにしない*/
nav ul ul{
	display: block;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li{
	position: relative;
	background:rgba(255,236,4,0.6);
}

/*ナビゲーションのリンク設定*/
nav ul li a{
	display: block;
	text-decoration: none;
	color: #333;
	padding:20px 35px;
	transition:all .3s;
}

nav ul li li a{
	padding:10px 35px;
}


@media screen and (max-width:1200px) {
nav ul li a{
	padding:20px;
}
nav ul li li a{
	padding:10px 20px;
}
}

nav ul li a:hover{
	color:#fff;	
}

/*==矢印の設定*/

/*2階層目を持つliの矢印の設定*/
nav ul li.has-child::before{
	content:'';
	position: absolute;
	left:15px;
	top:30px;
	width:6px;
	height:6px;
	border-top: 2px solid #333;
	border-right:2px solid #333;
	transform: rotate(135deg);
}

@media screen and (max-width:1200px) {
nav ul li.has-child::before{
	left:0;
}
}

/*== 2・3階層目の共通設定 */

/*下の階層を持っているulの指定*/
nav li.has-child ul{
	/*絶対配置で位置を指定*/
	position: absolute;
	left:0;
	top:62px;
	z-index: 4;
	/*形状を指定*/
	background:rgba(0,0,0,0.2);
	width:180px;
	/*はじめは非表示*/
	visibility: hidden;
	opacity: 0;
	/*アニメーション設定*/
	transition: all .3s;
}

/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul{
  visibility: visible;
  opacity: 1;
}

/*ナビゲーションaタグの形状*/
nav li.has-child ul li a{
	color: #fff;
	border-bottom:solid 1px rgba(255,255,255,0.4);
}

nav li.has-child ul li:last-child a{
	border-bottom:none;
}

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active{
	background:rgba(255,255,255,0.2);
}

/*==960px以下の形状*/

@media screen and (max-width:960px){
	nav{
		padding: 0;
	}
	
	nav ul{
		display: block;
	}
	
nav ul li a{
	border-bottom:1px solid #ccc;
}

/*矢印の位置と向き*/

nav ul li.has-child::before{
	left:20px;	
}

nav ul ul li.has-child::before{
	transform: rotate(135deg);
	left:20px;
}
    
nav ul li.has-child.active::before{
	transform: rotate(-45deg);
}

}

/*==================================================
 クリックしたらナビが上から下に出現
===================================*/

@media screen and (max-width:960px) {
#g-nav{
	/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
	position:fixed;
	z-index: 999;
	/*ナビのスタート位置と形状*/
	top:-120%;
	left:0;
	width:100%;
	height: 100vh;/*ナビの高さ*/
	background:rgba(0,0,0,0.8);
	/*動き*/
	transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
	top: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
	/*ナビの数が増えた場合縦スクロール*/
	position: fixed;
	z-index: 999; 
	width: 100%;
	height: 100vh;/*表示する高さ*/
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
	/*ナビゲーション天地中央揃え*/
	width: 90%;
	margin:100px auto 0 auto;
}
    
#g-nav ul ul{
	width: 100%;
	margin: 0;
}
 
/*プルダウンナビのCSS*/
#g-nav ul li.has-child ul{
	position: relative;
	left:0;
	top:0;
	width:100%;
	visibility:visible;/*JSで制御するため一旦表示*/
	opacity:1;/*JSで制御するため一旦表示*/
	display: none;/*JSのslidetoggleで表示させるため非表示に*/
	transition:none;/*JSで制御するためCSSのアニメーションを切る*/
	transform: none;
}

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
	text-align: center; 
}

#g-nav li a{
	color: #fff;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}
nav ul li{
	position: relative;
	background:rgba(255,236,4,0);
}
}

/*==================================================
　3本線が奥行きを持って回転して×に
===================================*/

.g-nav-openbtn{
	display: none;
}

@media screen and (max-width:960px) {
.g-nav-openbtn{
	display: block;
	position:fixed;
	z-index: 9999;/*ボタンを最前面に*/
	top:10px;
	right: 10px;
	cursor: pointer;
	width: 50px;
	height:50px;
	background:rgba(100,100,100,0.5);
	border-radius: 50px;
}

/*ボタン内側*/

.g-nav-openbtn .openbtn-area{
	transition: all .4s;
}

.g-nav-openbtn span{
	display: inline-block;
	transition: all .4s;/*アニメーションの設定*/
	position: absolute;
	left: 14px;
	height: 3px;
	border-radius: 2px;
	background: #fff;
	width: 45%;
}


.g-nav-openbtn span:nth-of-type(1) {
	top:15px;
}

.g-nav-openbtn span:nth-of-type(2) {
	top:23px;
}

.g-nav-openbtn span:nth-of-type(3) {
	top:31px;
}

/*activeクラスが付与されると
線と周りのエリアが回転して×になる*/

.g-nav-openbtn.active .openbtn-area{
	transform: rotateY(-360deg);
}

.g-nav-openbtn.active span:nth-of-type(1) {
	top: 18px;
	left: 18px;
	transform: translateY(6px) rotate(-135deg);
	width: 30%;
}

.g-nav-openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.g-nav-openbtn.active span:nth-of-type(3){
	top: 30px;
	left: 18px;
	transform: translateY(-6px) rotate(135deg);
	width: 30%;
}
}

/*==================================================
　 左から右に線が伸びる（下部）
===================================*/
.nav01c li a{
	/*線の基点とするためrelativeを指定*/
	position: relative;
	margin-top:0;
	
}

.nav01c li.current a,
.nav01c li a:hover{
	color:#eee;
}

.nav01c li a::after {
	content: '';
	/*絶対配置で線の位置を決める*/
	position: absolute;
	bottom: 16px;
	left: 25%;
	/*線の形状*/
	width: 50%;
	height: 1px;
	background:#eee;
	/*アニメーションの指定*/
	transition: all .3s;
	transform: scale(0, 1);/*X方向0、Y方向1*/
	transform-origin: left top;/*左上基点*/
}

.nav01c li li a::after {
	display: none;
}

/*現在地とhoverの設定*/
.nav01c li.current a::after,
.nav01c li a:hover::after {
	transform: scale(1, 1);/*X方向にスケール拡大*/
}
@media screen and (max-width:960px) {
.nav01c li a::after {
	display: none;
}  
}

/*===========================================================
 テキストがタイピング風に出現
===========================================================*/

.TextTyping span {
	display: none;
}

.TextTyping::after {
	content: "|";
	animation: typinganime .8s ease infinite;
	font-weight: normal;
	padding: 0 0 0 10px;
}

@keyframes typinganime{
	from{opacity:0}
	to{opacity:1}
}

/*＝＝＝＝＝＝＝＝＝＝＝550px以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/

@media screen and (max-width:550px){
	
	#header{
		justify-content: center;
	}
}


/*==================================================
　横移動させて全画面で見せる
===================================*/
/*　背景画像設定　*/

.slider-item01 {
	background:url(../image/main_01.png);
}

.slider-item02 {
	background:url(../image/main_02.png);
}

.slider-item03 {
	background:url(../image/main_03.png);
}

.slider-item04 {
	background:url(../image/main_pc.jpg);
}
.slider-item05 {
	background:url(../image/nft_banner.jpg);
}

.slider-item {
	width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
	height:100vh;/*各スライダー全体の縦幅を（80vh）にする*/
	background-repeat: no-repeat;/*背景画像をリピートしない*/
	background-position: center;/*背景画像の位置を中央に*/
	background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}
.slider-item-nft {
	width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
	height:60vh;/*各スライダー全体の縦幅を（80vh）にする*/
	background-repeat: no-repeat;/*背景画像をリピートしない*/
	background-position: center;/*背景画像の位置を中央に*/
	background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

/*------------------------------------*/
.badge{
	position: absolute;
	z-index: 2;
	right:30px;
	bottom:70px;
	background:url(../image/badge2.svg) no-repeat center;
	background-size: cover;
	width:180px;
	height: 180px;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-duration: 3s;
}

.badge-inner{
	position: absolute;
	z-index: 3;
	right:30px;
	bottom:70px;
	width:180px;
	height: 180px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #ff0;
	font-weight: bold;
	transition: all .3s;
}

.badge-inner:hover{
	bottom:75px;  
}

@media screen and (max-width:940px) {
	.badge,
	.badge-inner{
		width:145px;
		height: 145px;
		font-size:0.9rem;
	}
}

@media screen and (max-width:450px) {
.badge, .badge-inner {
	width: 118px;
	height: 118px;
	font-size: 0.7rem;
	bottom: 85px;
	right: 0;
	}
.badge-inner:hover{
	bottom:90px;  
	}
}



/*==================================================
 動き
===================================*/
/* 4-3 くるっ（Z 軸（右へ）） */
.rotateRightZ{
	animation-name: rotateRightZAnime;
	animation-duration:3s;
	animation-fill-mode:forwards;
}

@keyframes rotateRightZAnime{
	from{
		transform: rotateZ(0);
		}
	to{
		transform: rotateZ(360deg);
		}
}

/* 4-1 ふわっ（その場で） */
.fadeIn{
animation-name: fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 4-2 ふわっ（下から） */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* 4-2 パタッ（左上へ） */
.flipLeftTop{
animation-name: flipLeftTopAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
	opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
	opacity: 1;
  }
}

/* 4-2 パタッ（右上へ） */
.flipRightTop{
animation-name: flipRightTopAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
	opacity: 1;
  }
}

/* 4-4 ボンッ（拡大） */
.zoomIn{
	animation-name: zoomInAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
	transform: scale(0.6);
	opacity: 0;
  }

  to {
    transform: scale(1);
	opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger,
.zoomInTrigger,
.flipLeftTopTrigger,
.flipRightTopTrigger{
    opacity: 0;
}