/* Scss Document */

$breakpoint-sm: 374px;
$breakpoint: 768px;
$breakpoint-md: 1000px;
$breakpoint-lg: 1500px;
$txtcolor: #000000;
$gold: #A9806E;
$min: "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
$goth: "Hiragino Sans","ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo,"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "Noto Sans", sans-serif;


@mixin sm {
  @media screen and (max-width: $breakpoint-sm) {
    @content;
  }
}

@mixin mq {
  @media screen and (max-width: $breakpoint) {
    @content;
  }
}

@mixin ml {
  @media screen and (min-width: $breakpoint) {
    @content;
  }
}

@mixin md {
  @media screen and (max-width: $breakpoint-md) {
    @content;
  }
}

@mixin lg {
  @media screen and (min-width: $breakpoint-lg) {
    @content;
  }
}

@mixin mq-md {
  @media screen and (max-width: $breakpoint-md) {
    @content;
  }
}

//共通css
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

a{
	color: inherit;
	&:hover{
		opacity: 0.7 !important;
		transition: 0.5s;
	}
}

img{
	max-width: 100%;
	width: 100%;
}

html,body{
	font-family: $min;
	font-size: 62.5%; 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body{
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 1.75;
	color: $txtcolor;
	font-feature-settings : "palt";
	animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: #000;
	@include mq{
		font-size: 1.4rem;
	}
	&.add_overray{
		overflow: hidden;
	}
}

svg{fill: currentColor;}

.sp{
	display: none;
	@include mq{
		display: block !important;
	}
}

.tb{
	display: none;
	@include mq-md{
		display: block !important;
	}
}

.pc{
	display: block;
	@include mq{
		display: none !important;
	}
}

//フォント
.bodoni {
    font-family: 'Bodoni Moda', serif;
    font-weight: 700;
    font-style: normal;
}
.mont{
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-style: normal;
}


//フェードイン
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
.fadein {
    opacity : 0.1;
    transform : translate(0, 100px);
    transition : all 1100ms;
	-ms-filter: blur(6px);
	filter: blur(6px);
	@include mq{
		transform : translate(0, 50px);
	}
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
	-ms-filter: none;
	filter:none;
}

@keyframes fadeIn2 {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn2 {
    0% {opacity: 0}
    100% {opacity: 1}
}
.fadein2 {
    opacity : 0.1;
    transform : translate(0, 250px);
    transition : all 800ms;
	-ms-filter: blur(6px);
	filter: blur(6px);
	@include mq{
		transform : translate(0, 80px);
	}
}
.fadein2.scrollin {
    opacity : 1;
    transform : translate(0, 0);
	-ms-filter: none;
	filter:none;
}

@keyframes fadeIn3 {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn3 {
    0% {opacity: 0}
    100% {opacity: 1}
}
.fadein3 {
    opacity : 0.1;
    transform : translate(400px, 100px);
    transition : all 1200ms;
	-ms-filter: blur(6px);
	filter: blur(6px);
	@include mq{
		transform : translate(50px, 50px);
	}
}
.fadein3.scrollin {
    opacity : 1;
    transform : translate(0, 0);
	-ms-filter: none;
	filter:none;
}

@keyframes fadeIn4 {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn4 {
    0% {opacity: 0}
    100% {opacity: 1}
}
.fadein4 {
    opacity : 0.1;
    transform : translate(-500px, 100px);
    transition : all 1000ms;
	-ms-filter: blur(6px);
	filter: blur(6px);
	@include mq{
		transform : translate(100px, 50px);
	}
}
.fadein4.scrollin {
    opacity : 1;
    transform : translate(0, 0);
	-ms-filter: none;
	filter:none;
}

//震える
@keyframes hurueru {
    0% {transform: none}
	25% {transform: scale(1.1)}
    50% {transform: none}
	75% {transform: scale(1.15)}
    100% {transform: none}
}
.fwari{
	display: block;
	&:hover{
		animation: hurueru .9s  infinite;
	}
}

//カーソル
#cursor { 
	position: fixed; 
	-webkit-transform: translate(-50%, -50%); 
	transform: translate(-50%, -50%); 
	background: #4D4D4D; 
	width: 4px; 
	height: 4px; 
	border-radius: 100%; 
	pointer-events: none;
	z-index: 10000001;
	&.active{
		transform: scale(0);
	}
} 

#stalker{
	position: fixed;
	-webkit-transform: translate(-50%, -50%); 
	transform: translate(-50%, -50%); 
	width: 40px; 
	height: 40px; 
	border-radius: 100%; 
	transition: 0.3s; 
	opacity: .7; 
	pointer-events: none;
	z-index: 10000000;
	border: 1px solid #4D4D4D;
	&.active{
		width: 100px; 
		height: 100px; 
		background: rgba(77,77,77,.3);
		border: none;
	}
}

//セレクト
::selection {
    background: #fff;
}

//header
header{
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	background: #000;
	width: 116px;
	padding: 5px;
	@include mq{
		width: 75px;
	}
}

#main{
	background: #000;
	position: relative;
	height: 100vh;
	background: url("../img/top/img_main.jpg") no-repeat;
	background-size: cover;
	background-position: 50% 0;
	@include mq{
		background: url("../img/top/img_main_sp.jpg") center no-repeat;
		height: 0;
		padding-top: 160%;
		background-size: cover;
		
	}
	.main_txt{
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 65px;
		width: 398px;
		@include mq{
			bottom: 40px;
			width: 240px;
		}
	}
	.txt_ex{
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		text-align: center;
		color: #fff;
		h2{
			font-size: 1.4rem;
			line-height: 1.2;
			padding-right: 60px;
			border-bottom: 1px solid #fff;
			padding-bottom: 10px;
			margin-bottom: 10px;
			@include mq{
				padding-right: 30px;
			}
		}
		p{
			font-size: 1.2rem;
			position: relative;
			margin-right: 60px;
			@include mq{
				margin-right: 30px;
			}
			&::after{
				position: absolute;
				content: url("../img/top/ico_arrow.svg");
				width: 10px;
				bottom: -20px;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
}

#txtscroll{
	background: url("../img/common/txt_org.svg") repeat-y;
	position: fixed;
	z-index: 2;
	width: 7%;
	height: 100vh;
	top: 75px;
	left: 0;
	transition: .2s;
}

#footer{
	background: #000;
	background-size: cover;
	color: #fff;
	padding-bottom: 50px;
	font-family: $min;
	position: relative;
	z-index: 3;
	@include mq{
		background-size: contain;
	}
	.footer_inner{
		margin: 0 auto 0;
		padding-top: 50px;
		@include mq{
			margin: 0 auto;
			padding-top: 40px;
		}
		.project{
			margin: 0 auto 60px;
			text-align: center;
			a{
				display: block;
				width: 80%;
				max-width: 300px;
				margin: 0 auto;
			}
		}
		.footer_content{
			width: 88%;
			max-width: 900px;
			display: flex;
			font-size: 1.4rem;
			margin: 35px auto 35px;
			h4{
				width: 14%;
				border-right: 1px solid #fff;
				@include mq{
					width: 40%;
				}
			}
			ul{
				padding: 0 6%;
				display: flex;
				flex-wrap: wrap;
				width: 86%;
				@include mq{
					width: 60%;
					display: block;
				}
				li{
					width: 25%;
					@include mq{
						width: 100%;
					}
				}
			}
		}
		.footer_logo{
			text-align: center;
			margin: 60px auto 25px;
			width: 116px;
		}
		.footer_copy{
			text-align: center;
			font-size: 1.4rem;
		}
	}
}

#gallery{
	aside{
		width: 300px;
		margin: 20px 6.6% 20px auto;
		@include mq{
			width: 270px;
			margin: 10px 10px 40px auto;
		}
	}
	p{
		line-height: 2;
		margin-bottom: 110px;
		text-align: center;
		color: #fff;
		@include mq{
			margin-bottom: 90px;
		}
	}
	.gallery_1{
		width: 86.6%;
		margin: 0 auto 45px;
		@include mq{
			margin-bottom: 50px;
		}
	}
	.gallery_2_3{
		width: 94%;
		padding-left: 6%;
		margin-bottom: 135px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		@include mq{
			display: block;
			margin-bottom: 60px;
			width: 100%;
		}
		img{
			width: 48.5%;
			height: auto;
			@include mq{
				&:nth-child(1){
					margin-bottom: 20px;
					width: 62%;
					margin-left: 6%;
				}
				&:nth-child(2){
					width: 68.5%;
					margin-left: 31.5%;
				}
			}
		}
	}
	#gallery_4{
		width: 100%;
		margin-bottom: 170px;
		padding-top: 53%;
		background: url("../img/top/img_gallery_04.jpg") 50% 0 no-repeat fixed;
		background-size: cover;
		position: relative;
		transition: .5s;
		@media screen and (max-width:1025px){
			padding-top: 80%;
			margin-bottom: 55px;
			background: url("../img/top/img_gallery_04.jpg") center no-repeat;
			background-size: cover;
		}
		figure{
			position: absolute;
			top: 50%;
			right: 7%;
			transform: translateY(-50%);
			width: 258px;
			height: auto;
			@include mq{
				width: 96px;
				height: auto;
			}
		}
	}
	.gallery_5_6{
		width: 68%;
		padding-left: 9%;
		margin-bottom: 170px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		@include mq{
			width: 64%;
			padding: 0;
			margin: 0 auto 45px;
			display: block;
		}
		img{
			width: 49.5%;
			height: auto;
			@include mq{
				width: 100%;
				margin-bottom: 5px;
			}
		}
	}
	.gallery_8_9{
		width: 82%;
		margin: 110px auto 150px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-direction: row-reverse;
		@include mq{
			margin: 35px auto 60px;
			width: 100%;
			display: block;
		}
		img{
			width: 49%;
			height: auto;
			&:nth-child(1){
				@include mq{
					width: 100%;
					margin-bottom: 40px;
				}
			}
			&:nth-child(2){
				padding-top: 150px;
				@include mq{
					width: 74%;
					padding-top: 0;
					padding-left: 18%;
				}
			}
		}
	}
	.gallery_11_13{
		width: 100%;
		margin: 80px auto 70px;
		@include mq{
			margin: 55px auto 0px;
			width: 100%;
			display: block;
		}
		figure{
			width: 54%;
			margin: 0 auto 75px;
			@include mq{
				width: 100%;
				margin-bottom: 10px;
			}
			&:nth-child(2){
				width: 68%;
				margin: 0 auto;
				@include mq{
					width: 100%;
					margin: 0 auto;
				}
			}
		}
	}
}

#styling{
	position: relative;
	z-index: 3;
	background: #1A1A1A;
	.ms_txt{
		width: 72%;
		margin: 0 9% -50px 19%;
		padding-top: 180px;
		@include mq{
			padding-top: 55px;
			margin-bottom: 40px;
		}
	}
	.animation_area{
		position: relative;
		z-index: 4;
	}
	.dummy_area{
		position: absolute;
		left: 0;
		top: 0;
	}
	.dummy_area {
		animation: key2 1s;
		display: inline-block;
		height: 100%;
		background-color: #fff;
		-webkit-transform: rotate(0.0001deg);
		transform: rotate(0.0001deg);
		outline: 1px solid transparent;
	}
	@keyframes key2{
		0% { left: 0; width:0px; height: 100%; }
		50% { left: 0; width: 100.1%; height: 100%; }
		100%{ left:100%; width: 0px; height: 100%;
		}
	}
	.styling_box{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding-right: 9%;
		color: #fff;
		margin-bottom: 80px;
		&:nth-child(3){
			padding-right: 0;
			padding-left: 9%;
			flex-direction: row-reverse;
			@include mq{
				display: block;
				margin-bottom: 40px;
				padding: 0;
			}
			.styling_img{
				margin-top: 73px;
				@include mq{
					width: 80%;
					margin-left: 20%;
					margin-top: 0;
				}
			}
		}
		&:nth-child(2){
			.styling_item{
				margin-top: 150px;
				@include mq{
					margin-top: 0;
				}
			}
		}
		&:nth-child(4){
			margin-bottom: 0;
			padding-bottom: 80px;
			@include mq{
				padding-bottom: 40px;
			}
			.styling_img{
				margin-top: 73px;
				@include mq{
					margin-top: 0;
				}
			}
		}
		@include mq{
			display: block;
			margin-bottom: 40px;
			padding: 0;
		}
		.styling_img{
			width: 52%;
			position: relative;
			@include mq{
				width: 80%;
				margin-bottom: 35px;
			}
			p{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				font-size: 8rem;
				line-height: 1;
				@include mq{
					font-size: 3.4rem;
				}
			}
		}
		.styling_item{
			width: 44%;
			@include mq{
				width: 92%;
				margin: 0 auto;
			}
			h3{
				font-size: 2rem;
				position: relative;
				margin-bottom: 30px;
				padding-bottom: 25px;
				line-height: 1;
				&::after{
					content: "";
					background: #fff;
					bottom: 0;
					left: 0;
					width: 50px;
					position: absolute;
					height: 1px;
					@include mq{
						width: 25px;
					}
				}
			}
			ul{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				li{
					width: 48%;
					margin-bottom: 75px;
					@include mq{
						margin-bottom: 40px;
					}
					p{
						line-height: 1.5;
						margin-top: 15px;
						@include mq{
							font-size: 1.2rem;
							margin-top: 10px;
						}
					}
					figure{
						-webkit-filter: grayscale(100%);
						-moz-filter: grayscale(100%);
						-ms-filter: grayscale(100%);
						-o-filter: grayscale(100%);
						filter: grayscale(100%);
						transition: .5s;
						&:hover{
							-webkit-filter: grayscale(0);
							-moz-filter: grayscale(0);
							-ms-filter: grayscale(0);
							-o-filter: grayscale(0);
							filter: grayscale(0);
						}
					}
					a:hover{
						opacity: 1  !important;
					}
				}
			}
		}
	}
}

#backstage{
	position: relative;
	z-index: 3;
	h2{
		position: absolute;
		font-size: 8rem;
		right: 9%;
		top: -130px;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		color: #fff;
		z-index: 5;
		white-space: nowrap;
		@include mq{
			font-size: 4rem;
		}
	}
	.slide{
		height: 860px !important;
		@include mq{
			height: 300px !important;
		}
		figure,img{
			width: auto !important;
			height: 860px !important;
			@include mq{
				height: 300px !important;
			}
		}
	}
}

@keyframes stroke-width {
	0% {
	width: 0;
	opacity: 1;
	}
	100% {
	width: 100%;
	opacity: 1;
	}
}
 
@keyframes stroke-height {
	0% {
	height: 0;
	opacity: 1;
	}
	100% {
	height: 100%;
	opacity: 1;
	}
}

.border{
	content: "";
	position: absolute;
	opacity: 0;
	&.top,&.bottom,&.right,&.left{
		width: 0;
		height: 0;
	}
	&.top{
		border-top: 1px solid #fff;
		right: -1px;
		top: -1px;
	}
	&.bottom{
		border-bottom: 1px solid #fff;
		left: -1px;
		bottom: -1px;
	}
	&.right{
		border-right: 1px solid #fff;
		right: -1px;
		top: 0-1px;
	}
	&.left{
		border-left: 1px solid #fff;
		left: -1px;
		bottom: -1px;
	}
	&.top,&.bottom{
		animation: stroke-width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
	}
	&.right,&.left{
		animation: stroke-height 1.8s cubic-bezier(0.22, 1, 0.36, 1);
	}
	&.is-animation{
		opacity: 1;
		width: 100%;
		height: 100%;
		transition: 1s;
	}
}

#ex{
	padding: 245px 0 80px 0;
	width: 91%;
	margin-right: 9%;
	position: relative;
	z-index: 3;
	color: #fff;
	background: #000;
	@include mq{
		padding: 100px 0 60px;
	}
	.content{
		display: flex;
		justify-content: space-between;
		padding: 80px 7% 85px 11%;
		position: relative;
		@include mq{
			display: block;
			padding: 15px 0 50px;
		}
		h2{
			font-size: 8rem;
			-ms-writing-mode: tb-rl;
			writing-mode: vertical-rl;
			line-height: 1;
			white-space: nowrap;
			@include mq{
				font-size: 4rem;
				margin-left: 9%;
				position: relative;
				z-index: 4;
			}
		}
		.ex_inner{
			width: 85%;
			@include mq{
				width: 100%;
				margin-top: -150px;
			}
			figure{
				max-width: 835px;
				margin: 0 auto;
			}
			dl{
				padding: 60px 0 30px;
				color: #B3B3B3;
				text-align: center;
				@include mq{
					padding: 35px 5%;
				}
				dt{
					font-size: 4rem;
					margin-bottom: 10px;
					@include mq{
						margin-bottom: 30px;
						font-size: 2.5rem;
					}
				}
				dd{
					font-size: 2rem;
					@include mq{
						font-size: 1.5rem;
					}
				}
			}
			.ex_prace{
				line-height: 1;
				padding: 20px;
				text-align: center;
				border-top: 1px solid #fff;
				border-bottom: 1px solid #fff;
				margin-bottom: 35px;
				@include mq{
					padding: 15px 0;
					width: 90%;
					margin: 0 auto;
				}
				h3{
					font-size: 2.2rem;
					margin-bottom: 10px;
				}
				p{
					font-size: 1.4rem;
				}
			}
			.ex_intro{
				display: flex;
				justify-content: space-between;
				@include mq{
					display: block;
					width: 90%;
					margin: 0 auto;
				}
				p{
					width: 67%;
					@include mq{
						width: 100%;
						margin-top: 35px;
					}
				}
				figure{
					width: 27.5%;
					@include mq{
						width: 100%;
						max-width: 270px;
						margin: 40px auto 0;
					}
				}
			}
		}
	}
}

#present{
	position: relative;
	background: #1A1A1A;
	z-index: 3;
	.content{
		display: flex;
		justify-content: space-between;
		padding: 20px 12% 20px 1.5%;
		align-items: center;
		color: #fff;
		@include mq{
			display: block;
			width: 86%;
			margin: 0 auto;
			padding: 10px 0 40px;
		}
		figure{
			width: 53%;
			@include mq{
				width: 100%;
			}
		}
		.present_txt{
			width: 40%;
			min-width: 425px;
			padding: 50px 0;
			@include mq{
				width: 100%;
				min-width: auto;
				padding: 40px 0;
			}
			h3{
				font-size: 8rem;
				margin-bottom: 40px;
				line-height: 1;
				@include mq{
					font-size: 4rem;
				}
			}
			p{
				margin-bottom: 20px;
				span{
					font-size: 2.2rem;
					width: 100%;
					display: block;
					padding-bottom: 15px;
					margin-bottom: 15px;
					line-height: 1;
					border-bottom: 1px solid #fff;
					white-space: nowrap;
					@include mq{
						font-size: 1.4rem;
					}
				}
			}
			aside{
				@include mq{
					font-size: 1.3rem;
				}
			}
			a{
				display: block;
				width: 145px;
				font-size: 1.8rem;
				line-height: 40px;
				height: 40px;
				margin-top: 50px;
				border: 1px solid #fff;
				text-align: center;
				@include mq{
					margin: 45px auto 0;
				}
				&:hover{
					background: #fff;
					color: $txtcolor;
				}
			}
		}
	}
}

#mv{
	padding: 90px 0 140px 9%;
	width: 100%;
	position: relative;
	z-index: 3;
	color: #fff;
	background: #000;
	@include mq{
		padding: 80px 0 80px 9%;
	}
	.content{
		padding: 80px 9% 80px 0;
		position: relative;
		@include mq{
			padding: 50px 0 50px;
		}
		.flex{
			display: flex;
			justify-content: space-between;
		}
		h2{
			font-size: 8rem;
			-ms-writing-mode: tb-rl;
			writing-mode: vertical-rl;
			line-height: 1;
			white-space: nowrap;
			@include mq{
				font-size: 4rem;
				position: relative;
				z-index: 4;
				margin-right: 9%;
			}
		}
		.youtube{
			width: 88%;
			&:nth-child(2){
				margin-left: 12%;
				@include mq{
					margin-left: auto;
				}
			}
		}
		.iframe{
			position: relative;
			width: 100%;
			height: 0;
			padding-bottom: 56.25%;
			overflow: hidden;
			iframe{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
		}
		p{
			font-size: 1.8rem;
			color: #B3B3B3;
			margin-top: 10px;
			text-align: center;
			margin-bottom: 100px;
			@include mq{
				margin-bottom: 40px;
			}
		}
	}
}

#band{
	width: 100%;
	padding-right: 9%;
	position: relative;
	z-index: 3;
	color: #fff;
	background: #000;
	padding-bottom: 50px;
	@include mq{
		padding: 0 9% 50px 0;
	}
	.content{
		display: flex;
		position: relative;
		justify-content: space-between;
		padding: 0 0 70px 11%;
		@include mq{
			display: block;
			padding: 0 0 60px;
		}
		h2{
			font-size: 8rem;
			-ms-writing-mode: tb-rl;
			writing-mode: vertical-rl;
			line-height: 1;
			white-space: nowrap;
			margin-top: 50px;
			@include mq{
				font-size: 4rem;
				margin-left: 9%;
				position: relative;
				z-index: 4;
				margin-top: -50px;
			}
		}
		.band_inner{
			width: 85%;
			@include mq{
				width: 100%;
				margin-top: -50px;
			}
			p{
				width: 74%;
				padding: 70px 0 60px;
				@include mq{
					width: 88%;
					padding: 50px 0 80px;
					margin-left: 6%;
					padding-right: 6%;
					border-bottom: 1px solid #fff;
				}
			}
			.profile{
				border-bottom: 1px solid #fff;
				margin-bottom: 40px;
				@include mq{
					border-bottom: none;
					margin-bottom: 25px;
				}
			}
			.tour{
				display: flex;
				justify-content: space-between;
				@include mq{
					padding-left: 9%;
					padding-top: 30px;
				}
				h2{
					margin: 0 9% 0 0;
					@include mq{
						margin-top: -30px;
					}
				}
				dl{
					dt{
						font-size: 2.2rem;
						margin-bottom: 30px;
						@include mq{
							font-size: 2rem;
						}
					}
				}
			}
		}
	}
}