@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

///*---------- 固定色 ----------*/
//↓修正がありオレンジからグリーンになりました-*/
$color-orange: #00bfac;
$gray-dark: #727171;
$gray-light: #e6e6e6;

///*---------- header ----------*/
header{
	position: sticky; /* headerを追従にする */
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background-color: $gray-dark;
	z-index: 999;
	@include sm {
		background-color: inherit;
	}
	& > div{
		margin-left: 3rem;
		@include md {
			margin-left: 2rem;
		}
		@include sm {
			margin-left: 0;
		}
		h1{
			margin: 0;
			a{
				img{
					width: 200px;
					@include md {
						width: 120px;
					}
					&:hover{
						opacity: 0.5;
					}
				}
			}
		}
	}
	nav:not(.drawer__nav){
		display: flex;
		align-items: center;
		justify-content: space-between;
		ul{
			margin: 0;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			li{
				a{
					padding: 2.5rem;
					display: block;
					color: white;
					text-align: center;
					transition: 0.3s;
					@include lg {
						padding: 1.5rem;
					}
					&:hover{
						background: $gray-light;
						color: #000;
					}
				}
			}
			li:last-child{
				a{
					position: relative;
					span{
						position: relative;
						z-index: 1;
					}
					&::before{
						content: '';
						position: absolute;
						top: 0;
						bottom: 0;
						right: 0;
						left: 0;
						display: block;
						width: 100%;
						background: #000;
//						background: linear-gradient(90deg, rgba(255,149,0,1) 0%, rgba(255,82,107,1) 100%);
						transition: 0.3s;
					}
					&::after{
						content: '';
						position: absolute;
						top: 0;
						bottom: 0;
						right: 0;
						left: 0;
						display: block;
						width: 100%;
						background: $color-orange;
//						background: linear-gradient(90deg, rgba(255,82,107,1) 0%, rgba(255,149,0,1) 100%);
						transition: 0.3s;
					}
					&:hover{
						color: white;
					}
					&:hover::after{
						opacity: 0;
					}
					i{
						padding-left: 0.5em;
					}
				}
			}
		}
	}
}

///*------ スマホ用ヘッダー ------*/
.header {
	position: sticky!important; /* headerを追従にする */
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background-color: $gray-dark;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
	z-index: 999;
	.header__inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 2rem;
	}
	.logo {
		display: flex;
		a{
			img{
				width: 200px;
				&:hover{
					opacity: 0.5;
				}
			}
		}
	}
}
.drawer__button {
  position: relative;
  width: 4rem;
  height: 4rem;
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 999; 
	& > span{
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 4rem;
		height: 2px;
		background-color: white;
		transform: translateX(-50%);
	}
	& > span:first-child{
		transform: translate(-50%, calc(-50% - 1rem));
		transition: transform 0.3s ease;
	}
	& > span:nth-child(2){
		transform: translate(-50%, -50%);
		transition: opacity 0.3s ease;
	}
	& > span:last-child{
		transform: translate(-50%, calc(-50% + 1rem));
		transition: transform 0.3s ease;
	}
}
.drawer__button.active{
	& > span:first-child{
		transform: translate(-50%, -50%) rotate(-45deg);
	}
	& > span:nth-child(2){
		opacity: 0;
	}
	& > span:last-child{
		 transform: translate(-50%, -50%) rotate(45deg);
	}
}
.drawer__nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	transition: opacity 0.3s ease;
	opacity: 0;
	visibility: hidden;
	.drawer__nav__inner {
		position: relative;
		width: 60%;
		height: 100%;
		background-color: $gray-dark;
		padding: 0;
		margin: 0 0 0 auto;
		overflow: scroll;
		transform: translateX(100%);
		transition: transform 0.3s ease;
		.drawer__nav__menu {
			list-style: none;
			padding-left: 0;
			padding-top: 7.5rem;
			.drawer__nav__link {
				font-size: 20px;
				font-size: 2rem;
				display: block;
				color: white;
				text-decoration: none;
				padding: 2rem;
				border-bottom: solid 1px lightgray;
				transition: 0.3s;
				&:hover{
					background-color: $color-orange;
				}
			}
			li:last-child{
				border-bottom: none;
			}
		}
	}
}
.drawer__nav.active {
	opacity: 1;
	visibility: visible;
	.drawer__nav__inner {
		transform: translateX(0);
	}
}
body.active {
  height: 100%;
  overflow: hidden;
}


///*---------- 見出し ----------*/
h3 {
	font-size: 35px;
	font-size: 3.5rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-align: center;
	@include xs {
		font-size: 25px;
		font-size: 2.5rem;
	}
	span {
		display: block;
		font-family: "Roboto Condensed", sans-serif;
		font-weight: 500;
		font-size: 20px;
		font-size: 2rem;
		color: $color-orange;
		margin-top: 0.8rem;
	}
}


///*---------- フッター ----------*/
footer {
	.copyright {
		color: #fff;
		background-color: #000;
		text-align: center;
		padding: 1em 0;
		margin-bottom: 0;
	}
}