@charset "UTF-8";

/* Scss Document */

//変数コーナー
$main_back: #F0F0F0;
$main_font: #000;
$main_family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", 'YuGothic', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;;
$main_fontsize: 14px;
$margin_center: 0 auto;
$xsmall:  "only screen and (max-width:767px)";
$small:  "only screen and (max-width:899px)";
$xmiddle: "only screen and (max-width:1200px)";
$middle: "only screen and (min-width:900px) and (max-width:1200px)";
$large:  "only screen and (min-width:1201px)";

//common
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

body{
	font-family: $main_family;
	font-size: $main_fontsize;
	color: $main_font;
	overflow-y: auto;
}

a{
	text-decoration: none;
	color: inherit;
}

.pc{
	@media #{$large}{
		display: block;
	}
	@media #{$middle}{
		display: block;
	}
	@media #{$small}{
		display: none;
	}
}

.sp{
	@media #{$large}{
		display: none;
	}
	@media #{$middle}{
		display: none;
	}
	@media #{$small}{
		display: block;
	}
}

nav{
	&.pcNavi{
		position: absolute;
		top: 100px;
		left: 10%;
		font-size: 96.5%;
		letter-spacing: 3px;
		@media #{$small}{
			display: none;
		}
		li{
			margin: auto auto 50px 30px;
			padding-bottom: 5px;
			position: relative;
			box-sizing: border-box;
			&:after{
				content: url(../img/ico_arrow.png);
				position: absolute;
				right: 0%;
			}
			&:hover{
				border-bottom: 1px solid #000;
				box-sizing: border-box;
			}
			&.bnr:hover{
				border-bottom: none !important;
			}
			&.logo{
				margin-left: 0;
				&:after{
					content: none;
				}
				&:hover{
				border-bottom: none;
				box-sizing: border-box;
				}
			}
		}
	}
	&.spNavi{
		background-color: #A0D8EF; /*メニュー背景色*/
		color: #fff;
		box-sizing: border-box;
		height: 100%;
		padding: 20px 40px; /*メニュー内部上下左右余白*/
		position: fixed;
		right: -200px; /*メニュー横幅①と合わせる*/
		top: 0;
		transition: transform 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
		width: 200px; /*メニュー横幅①*/
		z-index: 1000;
		@media #{$middle}{
			display: none;
		}
		@media #{$large}{
			display: none;
		}
		& li{
			margin-bottom: 30px;
			font-size: 125%;
		}
		/*メニューアイコン部分は疑似要素で*/
		&::before {
			background-color: #A0D8EF; /*ボタン部分背景色*/
			border-radius: 0 0 0 10px; /*左下角丸*/
			color: #fff; /*アイコン（フォント）色*/
			content: "≡"; /*メニューアイコン*/
			display: block;
			font-size: 50px; /*アイコン（フォント）サイズ*/
			height: 50px;
			line-height: 50px; /*縦位置中央化*/
			position: absolute;
			right: 100%;
			text-align: center;
			top: 0;
			width: 50px;
		}
		/*hover 時の処理*/
		&:hover {
			transform: translate(-200px); /*メニュー横幅①と合わせる*/
		}
	}
}

#spIcon{
	position: fixed;
	top: 10px;
	left: 5%;
	z-index: 999;
	@media #{$middle}{
			display: none;
	}
	@media #{$large}{
			display: none;
	}
	& img{
		width: 65%;
	}
}

//content
#content {
	width: 100%;
	height: 100vh;
	overflow: auto;
	-webkit-scroll-behavior: smooth;
	scroll-behavior: smooth;
	-webkit-scroll-snap-type: mandatory;
	scroll-snap-type: mandatory;
	-webkit-scroll-snap-points-y: repeat(100%);
	scroll-snap-points-y: repeat(100%);
	@media #{$xmiddle}{
			height: auto;
		}
	.box {
		width: 100%;
		height: 100vh;
		color: $main_font;
		display: flex;
		//align-items: center; /* 縦方向中央揃え */
		//justify-content: center; /* 横方向中央揃え */
		flex-direction: column;
		box-sizing: border-box;
		padding: 100px 10% 100px 30%;
		@media #{$xmiddle}{
			height: auto;
		}
		@media #{$small}{
			padding: 30px 5% 30px;
		}
		h1{
			border-bottom: 1px solid #000;
			font-size: 121.5%;
			padding: 35px 0 5px 0;
			letter-spacing: 3px;
			margin-bottom: 65px;
			@media #{$small}{
				padding: 20px 0 5px 0;
				margin-bottom: 30px;
			}
		}
	}
	#top{
		background: url(../img/bg_top.jpg) right 0 no-repeat;
		background-size: cover;
		@media #{$xsmall}{
			background: url(../img/bg_top_sp.jpg) center bottom 0 no-repeat;
			background-size: cover;
		}
		.topImg{
			position: relative;
			height: 100vh;
			top: -10%;
			img{
				text-align: center;
				&.topLogo{
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: -10%;
					margin: auto;
					width: 269px;
					height: 139px;
					animation: fadeIn 8s ease 0s 1 normal;
    				-webkit-animation: fadeIn 8s ease 0s 1 normal;
					@media #{$small}{
						width: 28%;
						height: auto;
						left: 0;
					}
				}
				&.topArrow{
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: -10%;
					margin: auto;
					width: 656px;
					height: 139px;
					animation: fadeIn 4s ease 0s 1 normal;
    				-webkit-animation: fadeIn 4s ease 0s 1 normal;
					@media #{$small}{
						width: 70%;
						height: auto;
						left: 0;
					}
				}
			}
		}
	}
	#intro{
		background: url(../img/bg_cloud_cl.png) right 20% bottom 10%, #FFF;
		background-repeat: no-repeat;
		@media #{$small}{
				padding-top: 70px;
			}
	}
	#contact{
		background: url(../img/bg_cloud.png) right 20% bottom 10%, $main_back;
		background-repeat: no-repeat;
	}
	#intro,#contact{
		p{
			font-size: 107%;
			margin-bottom: 50px;
			line-height: 2.25;
			@media #{$small}{
				margin-bottom: 20px;
			}
		}
		dl{
			margin-bottom: 15px;
			display: table;
			@media #{$small}{
				margin-bottom: 10px;
			}
				&:last-child{
					margin-bottom: 0;
				}
			dt{
				float: left;
				width: 70px;
				text-align: justify;
				-moz-text-align-last: justify;
				text-align-last: justify;
				margin-right: 30px;
				display: table-cell;
			}
			dd{
				display: table-cell;
				line-height: 1.75;
			}
		}
	}
	#works{
		background: $main_back;
		height: auto;
		div{
			width: 100%;
			img{
				width: 100%;
			}
		}
	}
	#about{
		background: #fff;
		background-repeat: no-repeat;
		height: auto;
		#moveTxt{
			border: 1px solid #CFD5D8;
			padding: 2%;
			margin: 0 0 3%;
			line-height: 1.5rem;
		}
		#aboutLeft{
			position: relative;
			dl{
				margin-bottom: 25px;
				display: table;
				@media #{$small}{
				margin-bottom: 10px;
				}
					&.last{
						margin-bottom: 0;
					}
				dt{
					float: left;
					width: 70px;
					text-align: justify;
					-moz-text-align-last: justify;
					text-align-last: justify;
					margin-right: 30px;
					display: table-cell;
				}
				dd{
					display: table-cell;
					line-height: 1.75;
				}
			}
			#aboutRight{
				position: absolute;
				right: 0;
				bottom: 0;
				@media #{$xmiddle}{
					position: static;
					margin: 25px auto auto;
					width: 100%;
					overflow: hidden;
				}
			}
		}
	}
}