/* Scss Document */

$breakpoint-sm: 375px;
$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 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;
}

#wrapper {
	width: 100%;
	height: 100vh;
	scroll-snap-type: y mandatory;
	overflow: auto;
	scroll-behavior: smooth;
}
section{
	width: 100%;
	height: 100%;
	scroll-snap-align: start;
}

#slide{
	position: relative;
	article{
		position: relative;
		width: 100%;
		top: 0;
		left: 0;
		height: 100vh;
		.main_slide{
			width: 100%;
			height: 100vh;
			div{
				width: 100%;
				height: 100vh;
				&.main_slide-cinema{
					background: url("../img/top/slide_pc_cinema.jpg") center no-repeat;
					background-size: cover;
					@include mq{
						background: url("../img/top/slide_sp_cinema.jpg") center no-repeat;
						background-size: cover;
					}
				}
				&.main_slide-hto{
					background: url("../img/top/slide_pc_hto.jpg") center no-repeat;
					background-size: cover;
					@include mq{
						background: url("../img/top/slide_sp_hto.jpg") center no-repeat;
						background-size: cover;
					}
				}
				&.main_slide-sus4{
					background: url("../img/top/slide_pc_sus4.jpg") center no-repeat;
					background-size: cover;
					@include mq{
						background: url("../img/top/slide_sp_sus4.jpg") center no-repeat;
						background-size: cover;
					}
				}
				&.main_slide-wom{
					background: url("../img/top/slide_pc_wom.jpg") center no-repeat;
					background-size: cover;
					@include mq{
						background: url("../img/top/slide_sp_wom.jpg") center no-repeat;
						background-size: cover;
					}
				}
				&.main_slide-hel{
					background: url("../img/top/slide_pc_hel.jpg") center no-repeat;
					background-size: cover;
					@include mq{
						background: url("../img/top/slide_sp_hel.jpg") center no-repeat;
						background-size: cover;
					}
				}
				&.main_slide-wod{
					background: url("../img/top/slide_pc_wod.jpg") center no-repeat;
					background-size: cover;
					@include mq{
						background: url("../img/top/slide_sp_wod.jpg") center no-repeat;
						background-size: cover;
					}
				}
				&.main_slide-pk{
					background: url("../img/top/slide_pc_pk.jpg") center no-repeat;
					background-size: cover;
					@include mq{
						background: url("../img/top/slide_sp_pk.jpg") center no-repeat;
						background-size: cover;
					}
				}
				&.main_slide-maki{
					background: url("../img/top/slide_pc_maki.jpg") center no-repeat;
					background-size: cover;
					@include mq{
						background: url("../img/top/slide_sp_maki.jpg") center no-repeat;
						background-size: cover;
					}
				}
				&.main_slide-climb{
					background: url("../img/top/slide_pc_climb.jpg") center no-repeat;
					background-size: cover;
					@include mq{
						background: url("../img/top/slide_sp_climb.jpg") center no-repeat;
						background-size: cover;
					}
				}
				&.main_slide-sh{
					background: url("../img/top/slide_pc_sh.jpg") center no-repeat;
					background-size: cover;
					@include mq{
						background: url("../img/top/slide_sp_sh.jpg") center no-repeat;
						background-size: cover;
					}
				}
				&.main_slide-as{
					background: url("../img/top/slide_pc_as.jpg") center no-repeat;
					background-size: cover;
					@include mq{
						background: url("../img/top/slide_sp_as.jpg") center no-repeat;
						background-size: cover;
					}
				}
			}
		}
	}
	
	.main_txt{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: #fff;
		width: 100%;
		height: 100%;
		h1{
			width: 362px;
			margin: 0 auto 30px;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			position: absolute;
			@include mq{
				width: 248px;
				margin-bottom: 20px;
			}
		}
		h2{
			width: 75px;
			margin: 0 auto;
			//padding-bottom: 100px;
			position: absolute;
			top: 30px;
			left: calc( 50% - 37px );
			@include mq{
				width: 50px;
				//padding-bottom: 50px;
				left: calc( 50% - 25px );
			}
		}
		p{
			font-size: 1.5rem;
			line-height: 2;
			text-align: center;
			@include mq{
				font-size: 1.2rem;
			}
			@include sm{
				line-height: 1.8;
			}
		}
		ul{
			margin: 40px auto 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			@include mq{
				margin-top: 25px;
			}
			li{
				margin: 0 20px 20px;
				position: relative;
				width: auto;
				height: 45px;
				line-height: 45px;
				text-align: center;
				@include mq{
					width: auto;
					margin: 0 auto 10px;
					height: 30px;
					line-height: 30px;
				}
				@include sm{
					margin: 0 auto 8px;
				}
				&:last-child{
					margin-bottom: 0;
				}
				a{
					font-size: 2.4rem;
					text-align: center;
					width: 100%;
					height: 100%;
					position: relative;
					z-index: 4;
					padding: 0 20px;
					@include mq{
						font-size: 1.5rem;
					}
					&::after{
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						position: absolute;
						content: "";
						border: 1px solid #fff;
						transition: .5s;
					}
					&:hover{
						&::after{
							transform: scale(1.1);
							transition: .5s;
						}
					}
				}
				aside{
					position: absolute;
					top: 10px;
					height: 20px;
					left: -15px;
					background: #fff;
					color: #000;
					line-height: 20px;
					font-size: 1.4rem;
					padding: 0 15px;
					@include mq{
						font-size: 1.2rem;
						top: 6px;
					}
				}
			}
		}
	}
	.scroll{
		position: absolute;
		bottom: 20px;
		padding-bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: #fff;
		font-size: 1.5rem;
		@include mq{
			font-size: 1.4rem;
		}
		&::after{
			position: absolute;
			content: "▼";
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			color: #fff;
			font-size: 1rem;
		}
	}
}

.top-lead{
	color: #fff;
	position: relative;
	text-align: center;
	.top-lead-inner{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 100%;
	}
	.top-lead-logo{
		width: 75px;
		margin: 0 auto;
		position: absolute;
		top: 30px;
		left: calc( 50% - 37px );
		@include mq{
			width: 50px;
			left: calc( 50% - 25px );
		}
	}
	h2{
		max-width: 500px;
		width: 60%;
		margin: 0 auto 40px;
		@include mq{
			width: 40%;
			margin: 0 auto 25px;
		}
	}
	h3{
		color: #ddd;
		width: 90%;
		font-size: 2.4rem;
		margin: 0 auto 1em;
		line-height: 1.2;
		@include mq{
			font-size: 1.8rem;
		}
		@include sm{
			font-size: 1.6rem;
		}
	}
	.top-lead-txt{
		width: 90%;
		font-size: 1.5rem;
		line-height: 2;
		text-align: center;
		margin: 0 auto 3em;
		@include mq{
			font-size: 1.2rem;
		}
		@include sm{
			line-height: 1.7;
			margin: 0 auto 2.5em;
		}
	}
	.top-lead-list{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		max-width: 975px;
		width: 90%;
		margin: auto;
		li{
			width: 23.5%;
			margin-bottom: 20px;
			margin-right: 2%;
			&:nth-child(4n){
				margin-right: 0;
			}
			@include mq{
				width: 30%;
				margin-bottom: 15px;
				margin-right: 5%;
				&:nth-child(4n){
					margin-right: 5%;
				}
				&:nth-child(3n){
					margin-right: 0;
				}
			}
			&.as{
				padding: 1% 0 0;
			}
			&.sh{
				padding: 1% 0 1% 1%;
			}
			&.climb{
				padding: 0 2% 0 4%;
				@include mq{
					width: 25%;
					padding: 0 2.5%;
				}
			}
			&.maki{
				padding: 0 4.5% 0 3%;
				@include mq{
					width: 25%;
					padding: 0 3% 0 2%;
				}
			}
			&.pk{
				padding: 1% 0;
			}
			&.cinema{
				//padding-top: 1%;
				padding-right: 0.5%;
			}
			&.sus4{
				padding: 0 1%;
				@include mq{
					width: 28%;
				}
			}
			&.hlc{
				padding: 0 1%;
				@include mq{
					width: 28%;
				}
			}
			img{
				width: auto;
				max-height: 130px;
			}
		}
	}
	.scroll{
		position: absolute;
		bottom: 20px;
		padding-bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: #fff;
		font-size: 1.5rem;
		@include mq{
			font-size: 1.4rem;
		}
		&::after{
			position: absolute;
			content: "▼";
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			color: #fff;
			font-size: 1rem;
		}
	}
}

#wod{
	position: relative;
	background: url("../img/top/img_list_wod.jpg") center no-repeat;
	background-size: cover;
	@include mq{
		background: url("../img/top/img_list_wod_sp.jpg") center no-repeat;
		background-size: cover;
	}
	.up{
		position: absolute;
		top: 20px;
		padding-top: 20px;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: #fff;
		font-size: 1.5rem;
		@include mq{
			font-size: 1.4rem;
		}
		&::after{
			position: absolute;
			content: "▲";
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			color: #fff;
			font-size: 1rem;
		}
	}
	.main_txt{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: #fff;
		h2{
			width: 370px;
			margin: 0 auto 25px;
			@include  mq{
				width: 205px;
			}
		}
		a{
			display: block;
			margin: 0 auto;
			width: 180px;
			height: 40px;
			font-size: 1.8rem;
			line-height: 40px;
			text-align: center;
			position: relative;
			@include mq{
				width: 140px;
				line-height: 30px;
				height: 30px;
				font-size: 1.4rem;
			}
			&::before{
				position: absolute;
				width: 100%;
				height: 100%;
				border: 1px solid #fff;
				content: "";
				top: 0;
				left: 0;
				transition: .5s;
			}
			&:hover{
				&::before{
					transition: .5s;
					transform: scale(1.1);
				}
			}
		}
	}
}

#hlc{
	position: relative;
	background: url("../img/top/img_list_hlc.jpg") center no-repeat;
	background-size: cover;
	@include mq{
		background: url("../img/top/img_list_hlc_sp.jpg") center no-repeat;
		background-size: cover;
	}
	.up{
		position: absolute;
		top: 20px;
		padding-top: 20px;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: #fff;
		font-size: 1.5rem;
		@include mq{
			font-size: 1.4rem;
		}
		&::after{
			position: absolute;
			content: "▲";
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			color: #fff;
			font-size: 1rem;
		}
	}
	.main_txt{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: #fff;
		h2{
			width: 340px;
			margin: 0 auto 45px;
			@include  mq{
				width: 193px;
				margin-bottom: 30px;
			}
		}
		a{
			display: block;
			margin: 0 auto;
			width: 180px;
			height: 40px;
			font-size: 1.8rem;
			line-height: 40px;
			text-align: center;
			position: relative;
			@include mq{
				width: 140px;
				line-height: 30px;
				height: 30px;
				font-size: 1.4rem;
			}
			&::before{
				position: absolute;
				width: 100%;
				height: 100%;
				border: 1px solid #fff;
				content: "";
				top: 0;
				left: 0;
				transition: .5s;
			}
			&:hover{
				&::before{
					transition: .5s;
					transform: scale(1.1);
				}
			}
		}
	}
}

#wom{
	position: relative;
	background: url("../img/top/img_list_wom.jpg") center no-repeat;
	background-size: cover;
	@include mq{
		background: url("../img/top/img_list_wom_sp.jpg") center no-repeat;
		background-size: cover;
	}
	.up{
		position: absolute;
		top: 20px;
		padding-top: 20px;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: #fff;
		font-size: 1.5rem;
		@include mq{
			font-size: 1.4rem;
		}
		&::after{
			position: absolute;
			content: "▲";
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			color: #fff;
			font-size: 1rem;
		}
	}
	.main_txt{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: #fff;
		h2{
			width: 434px;
			margin: 0 auto 45px;
			@include  mq{
				width: 223px;
				margin-bottom: 30px;
			}
		}
		a{
			display: block;
			margin: 0 auto;
			width: 180px;
			height: 40px;
			font-size: 1.8rem;
			line-height: 40px;
			text-align: center;
			position: relative;
			@include mq{
				width: 140px;
				line-height: 30px;
				height: 30px;
				font-size: 1.4rem;
			}
			&::before{
				position: absolute;
				width: 100%;
				height: 100%;
				border: 1px solid #fff;
				content: "";
				top: 0;
				left: 0;
				transition: .5s;
			}
			&:hover{
				&::before{
					transition: .5s;
					transform: scale(1.1);
				}
			}
		}
	}
}

#sus4{
	position: relative;
	background: url("../img/top/img_list_sus4.jpg") center no-repeat;
	background-size: cover;
	@include mq{
		background: url("../img/top/img_list_sus4_sp.jpg") center no-repeat;
		background-size: cover;
	}
	.up{
		position: absolute;
		top: 20px;
		padding-top: 20px;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: #fff;
		font-size: 1.5rem;
		@include mq{
			font-size: 1.4rem;
		}
		&::after{
			position: absolute;
			content: "▲";
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			color: #fff;
			font-size: 1rem;
		}
	}
	.main_txt{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: #fff;
		h2{
			width: 434px;
			margin: 0 auto 45px;
			@include  mq{
				width: 223px;
				margin-bottom: 30px;
			}
		}
		a{
			display: block;
			margin: 0 auto;
			width: 180px;
			height: 40px;
			font-size: 1.8rem;
			line-height: 40px;
			text-align: center;
			position: relative;
			@include mq{
				width: 140px;
				line-height: 30px;
				height: 30px;
				font-size: 1.4rem;
			}
			&::before{
				position: absolute;
				width: 100%;
				height: 100%;
				border: 1px solid #fff;
				content: "";
				top: 0;
				left: 0;
				transition: .5s;
			}
			&:hover{
				&::before{
					transition: .5s;
					transform: scale(1.1);
				}
			}
		}
	}
}

#hto{
	position: relative;
	background: url("../img/top/img_list_hto.jpg") center no-repeat;
	background-size: cover;
	@include mq{
		background: url("../img/top/img_list_hto_sp.jpg") center no-repeat;
		background-size: cover;
	}
	.up{
		position: absolute;
		top: 20px;
		padding-top: 20px;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: #fff;
		font-size: 1.5rem;
		@include mq{
			font-size: 1.4rem;
		}
		&::after{
			position: absolute;
			content: "▲";
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			color: #fff;
			font-size: 1rem;
		}
	}
	.main_txt{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: #fff;
		h2{
			width: 474px;
			margin: 0 auto 45px;
			@include  mq{
				width: 223px;
				margin-bottom: 30px;
			}
		}
		a{
			display: block;
			margin: 0 auto;
			width: 180px;
			height: 40px;
			font-size: 1.8rem;
			line-height: 40px;
			text-align: center;
			position: relative;
			@include mq{
				width: 140px;
				line-height: 30px;
				height: 30px;
				font-size: 1.4rem;
			}
			&::before{
				position: absolute;
				width: 100%;
				height: 100%;
				border: 1px solid #fff;
				content: "";
				top: 0;
				left: 0;
				transition: .5s;
			}
			&:hover{
				&::before{
					transition: .5s;
					transform: scale(1.1);
				}
			}
		}
	}
}

#cinema{
	position: relative;
	background: url("../img/top/img_list_cinema_pc.jpg") center no-repeat;
	background-size: cover;
	@include mq{
		background: url("../img/top/img_list_cinema_sp.jpg") center no-repeat;
		background-size: cover;
	}
	.up{
		position: absolute;
		top: 20px;
		padding-top: 20px;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: #fff;
		font-size: 1.5rem;
		@include mq{
			font-size: 1.4rem;
		}
		&::after{
			position: absolute;
			content: "▲";
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			color: #fff;
			font-size: 1rem;
		}
	}
	.main_txt{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: #fff;
		h2{
			width: 474px;
			margin: 0 auto 45px;
			@include  mq{
				width: 223px;
				margin-bottom: 30px;
			}
		}
		a{
			display: block;
			margin: 0 auto;
			width: 180px;
			height: 40px;
			font-size: 1.8rem;
			line-height: 40px;
			text-align: center;
			position: relative;
			@include mq{
				width: 140px;
				line-height: 30px;
				height: 30px;
				font-size: 1.4rem;
			}
			&::before{
				position: absolute;
				width: 100%;
				height: 100%;
				border: 1px solid #fff;
				content: "";
				top: 0;
				left: 0;
				transition: .5s;
			}
			&:hover{
				&::before{
					transition: .5s;
					transform: scale(1.1);
				}
			}
		}
	}
}

#pk{
	position: relative;
	background: url("../img/top/img_list_pk_pc.jpg") center no-repeat #000;
	background-size: cover;
	@include mq{
		background: url("../img/top/img_list_pk_sp.jpg") center no-repeat #000;
		background-size: cover;
	}
	.up{
		position: absolute;
		top: 20px;
		padding-top: 20px;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: #fff;
		font-size: 1.5rem;
		@include mq{
			font-size: 1.4rem;
		}
		&::after{
			position: absolute;
			content: "▲";
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			color: #fff;
			font-size: 1rem;
		}
	}
	.main_txt{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: #fff;
		h2{
			width: 446px;
			margin: 0 auto 45px;
			@include  mq{
				width: 223px;
				margin-bottom: 30px;
			}
		}
		a{
			display: block;
			margin: 0 auto;
			width: 180px;
			height: 40px;
			font-size: 1.8rem;
			line-height: 40px;
			text-align: center;
			position: relative;
			@include mq{
				width: 140px;
				line-height: 30px;
				height: 30px;
				font-size: 1.4rem;
			}
			&::before{
				position: absolute;
				width: 100%;
				height: 100%;
				border: 1px solid #fff;
				content: "";
				top: 0;
				left: 0;
				transition: .5s;
			}
			&:hover{
				&::before{
					transition: .5s;
					transform: scale(1.1);
				}
			}
		}
	}
}

#maki{
	position: relative;
	background: url("../img/top/img_list_maki_pc.jpg") center no-repeat #000;
	background-size: cover;
	@include mq{
		background: url("../img/top/img_list_maki_sp.jpg") center top no-repeat #000;
		background-size: cover;
	}
	.up{
		position: absolute;
		top: 20px;
		padding-top: 20px;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: #fff;
		font-size: 1.5rem;
		@include mq{
			font-size: 1.4rem;
		}
		&::after{
			position: absolute;
			content: "▲";
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			color: #fff;
			font-size: 1rem;
		}
	}
	.main_txt{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: #fff;
		h2{
			width: 400px;
			margin: 0 auto 45px;
			@include  mq{
				width: 223px;
				margin-bottom: 30px;
			}
		}
		a{
			display: block;
			margin: 0 auto;
			width: 180px;
			height: 40px;
			font-size: 1.8rem;
			line-height: 40px;
			text-align: center;
			position: relative;
			@include mq{
				width: 140px;
				line-height: 30px;
				height: 30px;
				font-size: 1.4rem;
			}
			&::before{
				position: absolute;
				width: 100%;
				height: 100%;
				border: 1px solid #fff;
				content: "";
				top: 0;
				left: 0;
				transition: .5s;
			}
			&:hover{
				&::before{
					transition: .5s;
					transform: scale(1.1);
				}
			}
		}
	}
}

#climb{
	position: relative;
	background: url("../img/top/img_list_climb_pc.jpg") center no-repeat #000;
	background-size: cover;
	@include mq{
		background: url("../img/top/img_list_climb_sp.jpg") center top no-repeat #000;
		background-size: cover;
	}
	.up{
		position: absolute;
		top: 20px;
		padding-top: 20px;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: #fff;
		font-size: 1.5rem;
		@include mq{
			font-size: 1.4rem;
		}
		&::after{
			position: absolute;
			content: "▲";
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			color: #fff;
			font-size: 1rem;
		}
	}
	.main_txt{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: #fff;
		h2{
			width: 300px;
			margin: 0 auto 45px;
			@include  mq{
				width: 223px;
				margin-bottom: 30px;
			}
		}
		a{
			display: block;
			margin: 0 auto;
			width: 180px;
			height: 40px;
			font-size: 1.8rem;
			line-height: 40px;
			text-align: center;
			position: relative;
			@include mq{
				width: 140px;
				line-height: 30px;
				height: 30px;
				font-size: 1.4rem;
			}
			&::before{
				position: absolute;
				width: 100%;
				height: 100%;
				border: 1px solid #fff;
				content: "";
				top: 0;
				left: 0;
				transition: .5s;
			}
			&:hover{
				&::before{
					transition: .5s;
					transform: scale(1.1);
				}
			}
		}
	}
}

#sh{
	position: relative;
	background: url("../img/top/img_list_sh_pc.jpg") center no-repeat #000;
	background-size: cover;
	@include mq{
		background: url("../img/top/img_list_sh_sp.jpg") center top no-repeat #000;
		background-size: cover;
	}
	.up{
		position: absolute;
		top: 20px;
		padding-top: 20px;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: #fff;
		font-size: 1.5rem;
		@include mq{
			font-size: 1.4rem;
		}
		&::after{
			position: absolute;
			content: "▲";
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			color: #fff;
			font-size: 1rem;
		}
	}
	.main_txt{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: #fff;
		h2{
			width: 400px;
			margin: 0 auto 45px;
			filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0));
			@include mq{
				width: 240px;
				margin-bottom: 30px;
			}
		}
		a{
			display: block;
			margin: 0 auto;
			width: 180px;
			height: 40px;
			font-size: 1.8rem;
			line-height: 40px;
			text-align: center;
			position: relative;
			filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0));
			@include mq{
				width: 140px;
				line-height: 30px;
				height: 30px;
				font-size: 1.4rem;
			}
			&::before{
				position: absolute;
				width: 100%;
				height: 100%;
				border: 1px solid #fff;
				content: "";
				top: 0;
				left: 0;
				transition: .5s;
			}
			&:hover{
				&::before{
					transition: .5s;
					transform: scale(1.1);
				}
			}
		}
	}
}

#as{
	position: relative;
	background: url("../img/top/img_list_as_pc.jpg") center no-repeat #000;
	background-size: cover;
	@include mq{
		background: url("../img/top/img_list_as_sp.jpg") center top no-repeat #000;
		background-size: cover;
	}
	.up{
		position: absolute;
		top: 20px;
		padding-top: 20px;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: #fff;
		font-size: 1.5rem;
		@include mq{
			font-size: 1.4rem;
		}
		&::after{
			position: absolute;
			content: "▲";
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			color: #fff;
			font-size: 1rem;
		}
	}
	.main_txt{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: #fff;
		@include mq{
			top: 40%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
		h2{
			width: 700px;
			margin: 0 auto 45px;
			filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0));
			@include mq{
				width: 240px;
				margin-bottom: 30px;
			}
		}
		a{
			display: block;
			margin: 0 auto;
			width: 180px;
			height: 40px;
			font-size: 1.8rem;
			line-height: 40px;
			text-align: center;
			position: relative;
			filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0));
			@include mq{
				width: 140px;
				line-height: 30px;
				height: 30px;
				font-size: 1.4rem;
			}
			&::before{
				position: absolute;
				width: 100%;
				height: 100%;
				border: 1px solid #fff;
				content: "";
				top: 0;
				left: 0;
				transition: .5s;
			}
			&:hover{
				&::before{
					transition: .5s;
					transform: scale(1.1);
				}
			}
		}
	}
}