/* 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;
}
.bodoni-m {
    font-family: 'Bodoni Moda', serif;
    font-weight: 400;
    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: 10%;
		bottom: 50%;
		transform: translateY(50%);
		width: 510px;
		filter: drop-shadow(0px 0px 4px #777);
		.osr{
			width: 80%;
			margin: 10px auto 0;
		}
		@include mq{
			bottom: 50px;
			left: 50%;
			transform: translateX(-50%);
			width: 255px;
		}
	}
	.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;
			border-bottom: 1px solid #fff;
			margin-bottom: 10px;
			padding: 0 30px 10px;
			@include mq{
				padding: 0 10px 10px;
			}
		}
		p{
			font-size: 1.2rem;
			position: relative;
			padding: 0 30px 0;
			@include mq{
				padding: 0  10px;
			}
			&::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: 3;
	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: 4;
	@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,#gallery2{
	aside{
		font-size: 1.2rem;
		text-align: right;
		margin: 20px 6.6% 20px auto;
		color: #fff;
		@include mq{
			margin: 10px 10px 40px auto;
		}
	}
	p{
		line-height: 2;
		margin-bottom: 20px;
		text-align: center;
		color: #fff;
	}
	.gallery_1{
		width: 86.6%;
		margin: 0 auto 65px;
		@include mq{
			margin: 0 auto 50px;
		}
	}
	.gallery_2_3{
		width: 100%;
		margin-bottom: 150px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		@include mq{
			display: block;
			margin-bottom: 50px;
			width: 100%;
		}
		img{
			height: auto;
			&:nth-child(1){
				width: 58%;
			}
			&:nth-child(2){
				width: 39%;
				margin-top: 22.6%;
			}
			@include mq{
				&:nth-child(1){
					margin-bottom: 10px;
					width: 80%;
				}
				&:nth-child(2){
					width: 70%;
					margin-left: 30%;
					margin-top: 0;
				}
			}
		}
	}
	#gallery_4{
		width: 100%;
		margin-top: 50px;
		margin-bottom: 110px;
		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:1200px){
			padding-top: 80%;
			margin-bottom: 50px;
			background: url("../img/top/img_gallery_04.jpg") center no-repeat;
			background-size: cover;
		}
		figure{
			position: absolute;
			top: 10%;
			right: 5%;
			width: 383px;
			height: auto;
			@include mq{
				width: 40%;
				max-width: 310px;
				height: auto;
			}
		}
	}
	.gallery_5_6{
		width: 66%;
		margin-left: auto;
		margin-right: 5.4%;
		margin-bottom: 150px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		@include mq{
			width: 64%;
			padding: 0;
			margin: 0 auto 50px;
			display: block;
		}
		img{
			width: 49.5%;
			height: auto;
			@include mq{
				width: 100%;
				margin-bottom: 10px;
			}
		}
	}
	.gallery_7{
		margin-bottom: 70px;
	}
	.gallery_8_9{
		width: 82%;
		margin: 200px auto 150px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-direction: row-reverse;
		@include mq{
			margin: 50px auto;
			width: 100%;
		}
		img{
			width: 49%;
			height: auto;
			&:nth-child(1){
				padding-top: 150px;
				@include mq{
					padding-top: 50px;
				}
			}
		}
	}
	.gallery_8_9_2{
		width: 82%;
		margin: 200px auto 150px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-direction: row-reverse;
		@include mq{
			margin: 50px auto;
			width: 100%;
		}
		img{
			width: 49%;
			height: auto;
			&:nth-child(2){
				padding-top: 150px;
				@include mq{
					padding-top: 50px;
				}
			}
		}
	}
	.gallery_10{
		width: 90%;
		margin-bottom: 60px;
	}
	.gallery_11_13{
		width: 100%;
		margin: 130px auto 160px;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		@include mq{
			margin: 110px auto 40px;
			width: 100%;
			align-items: flex-start;
			flex-direction: row-reverse;
		}
		.g11{
			width: 33.6%;
			@include mq{
				width: 50%;
			}
		}
		.g12{
			width: 64.3%;
			display: flex;
			justify-content: space-between;
			@include mq{
				display: block;
				width: 47%;
			}
			img{
				&:nth-child(1){
					width: 57.8%;
					align-self: center;
					height: auto;
					@include mq{
						width: 100%;
						margin-bottom: 10px;
					}
				}
				&:nth-child(2){
					width: 39%;
					align-self: flex-end;
					height: auto;
					@include mq{
						width: 69%;
						margin-left: auto;
						display: block;
					}
				}
			}
		}
	}
	.gallery_14{
		width: 83.3%;
		margin-left: 16.7%;
		margin-bottom: 100px;
		margin-top: 100px;
		@include mq{
			width: 85.3%;
			margin-left: 14.7%;
			margin-bottom: 30px;
			margin-top: 30px;
		}
	}
	.gallery_15_16{
		display: flex;
		justify-content: space-between;
		margin-bottom: 30px;
		align-items: flex-end;
		@include mq{
			margin-bottom: 10px;
		}
		img{
			&:nth-child(1){
				width: 41.3%;
				height: auto;
			}
			&:nth-child(2){
				width: 56.6%;
				height: auto;
			}
		}
	}
	.gallery_17txt{
		position: relative;
		margin: 0 auto 120px;
		padding-bottom: 110px;
		@include mq{
			margin: 0 auto 55px;
			padding-bottom: 0;
		}
		.gallery_17{
			width: 38%;
			position: relative;
			z-index: 2;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
		}
		.gallery_txt{
			width: 32.5%;
			position: absolute;
			bottom: 0;
			right: 3%;
			z-index: 1;
		}
	}
	.gallery_18{
		width: 90%;
		margin: 60px auto 60px 10%;
		@include mq{
			width: 86%;
			margin: 40px auto 40px 14%;
		}
	}
	.gallery_19{
		width: 90%;
		margin: 0 10% 0 auto;
		@include mq{
			width: 86%;
			margin: 0 14% 0 auto;
		}
	}
	.gallery_end{
		width: 100%;
		margin: 300px auto 210px;
		@include mq{
			margin: 150px auto 45px;
		}
	}
	.gallery_20_22{
		position: relative;
		padding-top: 87.666%;
		@include mq{
			position: static;
			padding-top: 0;
		}
		.gallery_20{
			position: absolute;
			width: 27.4%;
			left: 14%;
			top: 26.333%;
			z-index: 2;
			@include mq{
				position: static;
				top: auto;
				right: auto;
				width: 44.5%;
			}
		}
		.gallery_21_22{
			display: flex;
			justify-content: space-between;
			margin: 25px auto 30px;
		}
		.gallery_21{
			position: absolute;
			width: 56.6666%;
			top: 0;
			right: 0;
			z-index: 2;
			@include mq{
				position: relative;
				width: 86.14%;
				top: auto;
				left: auto;
				margin-left: 13.86%;
				margin-top: -88px;
			}
		}
		.gallery_22{
			position: absolute;
			width: 31.9333%;
			right: 24.7333%;
			top: 45%;
			z-index: 2;
			@include mq{
				position: static;
				top: auto;
				right: auto;
				width: 52%;
				margin-top: 80px;
			}
		}
	}
	.gallery_23{
		margin: -13% auto 130px;
		@include mq{
			margin-bottom: 55px;
		}
	}
	.gallery_24_26{
		display: flex;
		justify-content: space-between;
		margin-bottom: 150px;
		@include mq{
			margin-bottom: 55px;
			text-align: center;
			display: block;
		}
		figure{
			width: 33.3333333333%;
			&:nth-child(2){
				margin-top: 100px;
				@include mq{
					margin: 0 auto;
				}
			}
			@include mq{
				margin: 0 auto;
				width: 56%;
			}
			img{
				height: auto;
			}
		}
	}
	.gallery_main{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 80px;
		div{
			width: 35%;
			margin-bottom: 30px;
			@include mq{
				width: 80%;
			}
			&:nth-child(1){
				@include mq{
					width: 90%;
					margin: 0 0 30px auto;
				}
			}
			&:nth-child(2){
				width: 60%;
				@include mq{
					width: 80%;
					margin: 0 auto 30px 0;
				}
			}
			&:nth-child(3){
				width: 60%;
				@include mq{
					width: 80%;
					margin: 0 0 30px auto;
				}
			}
			&:nth-child(4){
				@include mq{
					width: 80%;
					margin: 0 auto 0 0;
				}
			}
		}
	}
}

#gallery2{
	position: relative;
	z-index: 4;
	background: #000;
	margin-bottom: 0;
	padding-bottom: 200px;
	@include mq{
		padding-bottom: 100px;
		padding-top: 60px;
	}
	.gallery_11_13{
		margin: 20px auto 0;
		@include mq{
			margin: 20px auto 0;
		}
	}
}

#styling{
	position: relative;
	z-index: 4;
	background: #000;
	padding-bottom: 120px;
	@include mq{
		padding-bottom: 20px;
	}
	.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: 80px;
				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;
				}
			}
		}
		&:nth-child(5){
			padding-right: 0;
			padding-left: 9%;
			flex-direction: row-reverse;
			@include mq{
				display: block;
				margin-bottom: 80px;
				padding: 0;
			}
			.styling_img{
				margin-top: 73px;
				@include mq{
					width: 80%;
					margin-left: 20%;
					margin-top: 0;
				}
			}
		}
		@include mq{
			display: block;
			margin-bottom: 80px;
			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;
					}
				}
			}
			p{
				margin-top: 30px;
				@include mq{
					margin-top: 20px;
				}
			}
			ul{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				li{
					width: 48%;
					margin-bottom: 75px;
					&:nth-child(3),&:nth-child(4){
						margin-bottom: 0;
					}
					&:nth-child(5),&:nth-child(6){
						margin-top: 75px;
						@include mq{
							margin-top: 40px;
						}
					}
					@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: 1;
	.slide{
		height: 830px !important;
		@include mq{
			height: 350px !important;
		}
		figure,img{
			width: auto !important;
			height: 830px !important;
			@include mq{
				height: 350px !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: 0;
	}
	&.right{
		border-right: 1px solid #fff;
		right: -1px;
		top: 0;
	}
	&.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: 100%;
	position: relative;
	z-index: 4;
	color: #fff;
	background: #1A1A1A;
	@include mq{
		padding: 100px 0 60px;
	}
	.content{
		display: flex;
		justify-content: space-between;
		padding: 80px 7% 85px 11%;
		position: relative;
		width: 91%;
		margin-right: 9%;
		@include mq{
			display: block;
			padding: 50px 0 50px;
		}
		h2{
			font-size: 8rem;
			-ms-writing-mode: tb-rl;
			writing-mode: vertical-rl;
			line-height: 1;
			white-space: nowrap;
			@include mq{
				writing-mode: horizontal-tb;
				-ms-writing-mode: horizontal-tb;
				font-size: 3.6rem;
				z-index: 4;
				padding: 0 5%;
				margin-bottom: 30px;
				text-align: center;
			}
		}
		.ex_inner{
			width: 85%;
			@include mq{
				width: 100%;
			}
			figure{
				max-width: 835px;
				margin: 0 auto;
			}
			dl{
				padding: 30px 0 30px;
				color: #B3B3B3;
				text-align: center;
				@include mq{
					padding: 0 5% 35px;
				}
				dt{
					font-size: 4rem;
					margin-bottom: 10px;
					span{
						font-size: 3.5rem;
					}
					@include mq{
						margin-bottom: 30px;
						font-size: 2.4rem;
						line-height: 1.3;
						span{
							font-size: 2rem;
						}
					}
				}
				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{
				@include mq{
					display: block;
					width: 90%;
					margin: 0 auto;
				}
				p{
					width: 100%;
					@include mq{
						width: 100%;
						margin-top: 35px;
						line-height: 2;
					}
				}
			}
			.ex_com{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30px;
				@include mq{
					display: block;
					width: 90%;
					margin: 30px auto 0;
				}
				.com_txt{
					width: 70%;
					@include mq{
						width: 100%;
					}
					h3{
						font-size: 2.4rem;
						margin-bottom: 20px;
						line-height: 1.3;
						@include mq{
							font-size: 1.8rem;
						}
					}
					p{
						line-height: 2;
					}
				}
				figure{
					width: 27%;
					@include mq{
						width: 60%;
						margin: 20px auto 0;
					}
				}
			}
		}
	}
}

#present{
	position: relative;
	background: #1A1A1A;
	z-index: 4;
	padding-bottom: 115px;
	@include mq{
		padding-bottom: 60px;
	}
	.content{
		padding: 20px 9% 70px 4.5%;
		color: #fff;
		width: 91%;
		margin-left: 9%;
		@include mq{
			padding: 20px 0 40px;
		}
		.present_flex{
			display: flex;
			justify-content: space-between;
			align-items: center;
			@include mq{
				display: block;
				width: 86%;
				margin: 0 auto;
			}
		}
		figure{
			width: 53%;
			@include mq{
				width: 100%;
			}
		}
		.present_txt{
			width: 40%;
			min-width: 425px;
			padding: 50px 0 0;
			@include mq{
				width: 100%;
				min-width: auto;
				padding: 40px 0 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;
					}
				}
				&.present_para{
					line-height: 2;
				}
			}
			aside{
				@include mq{
					font-size: 1.3rem;
				}
			}
			a{
				display: block;
				width: 200px;
				font-size: 1.8rem;
				line-height: 39px;
				height: 40px;
				margin-top: 50px;
				border: 1px solid #fff;
				text-align: center;
				position: relative;
				z-index: 2;
				@include mq{
					margin: 45px auto 0;
				}
				&:hover{
					background: #fff;
					color: $txtcolor;
				}
			}
			.finish{
				display: block;
				font-size: 1.8rem;
				margin-top: 50px;
				color: #C1272D;
				padding: 10px 20px;
				text-align: center;
				background: #fff;
				@include mq{
					margin: 45px auto 0;
					font-size: 1.4rem;
					padding: 10px;
				}
			}
		}
	}
	.cautions{
		width: 100%;
		margin: 0 auto;
		color: #fff;
		@include mq{
			width: 86%;
			margin: 30px auto 0;
		}
		h3{
			font-size: 2.2rem;
			padding-bottom: 15px;
			margin-bottom: 15px;
			border-bottom: 1px solid #fff;
			@include mq{
				font-size: 2rem;
				padding-bottom: 10px;
				text-align: center;
			}
		}
		p{
			line-height: 2;
		}
	}
}

#mv{
	padding: 90px 0 140px 9%;
	width: 100%;
	position: relative;
	z-index: 4;
	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;
			.youtube{
				width: 88%;
				margin-left: 0;
			}
		}
		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%;
			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: 4;
	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;
				padding-top: 10px;
			}
		}
		.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;
				}
				span{
					font-size: 2.2rem;
					display: block;
					margin-bottom: 35px;
					@include mq{
						font-size: 2rem;
					}
				}
			}
			.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;
						}
					}
				}
			}
		}
	}
}