@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;
  }
}
//ブレイクポイントを指定------ここまで

//共通
#wrapper{
	overflow: hidden;
}
.inner {
	width: 83%;
	margin: 0 auto;
	@include md {
		width: 90%;
	}
	@include sm {
		width: 100%;
	}
}

$color-red: #d9221f;

.eng{
	font-family: "Kumbh Sans", sans-serif;
	font-weight: 800;
}

.flex-container{
	display: flex;
}

header,footer{
	img{
		width: 180px;
		height: auto;
	}
}

//header
header{
	position: fixed; 
	top: 0;
	z-index: 1000;
	width: 100%;
	.flex-container{
		justify-content: space-between;
		align-items: center;
		padding: 1rem;
		@include xs{padding: 0.75rem;}
		.header-logo.headerLogoScroll.-before {
		  display : none;
		}
		.header-logo.-after {
		  display : none;
		}
		.header-logo.headerLogoScroll.-after {
		  display : block;
		}
		h1{
			font-size: 1px;
			opacity: 0;
		}
		ul{
			gap: 10px;
			margin: 0;
			@include xs{gap: 7px;}
			a{
				padding: 1rem 2rem;
				color: #fff;
				letter-spacing: 0.1em;
				transition: 0.3s;
				&:hover{opacity: 0.7;}
				@include xs{
					padding: 0.75rem 1.5rem;
					font-size: 13px;
					font-size: 1.3rem;
				}
			}
			.catalog{background: #0053a3;}
			.contact{background: #be0000;}
		}
	}
}
#contact header .flex-container ul{flex-direction: row-reverse;}
#contact header .contact{
	pointer-events: none;
	opacity: 0;
}

.tel{
	width: 650px;
	margin: 0 auto;
	@include sm{width: 520px;}
	@include xs{width: 100%;}
	>p{
		text-align: center;
		font-weight: 600;
	}
	.tel-content{
		text-align: center;
		background: #f0f0f0;
		padding: 3rem;
		@include xs{padding: 2.5rem 0 2rem;}
		.phone{
			display: inline-block;
			text-align: justify;
			font-size: 2.5rem;
			font-size: 25px;
			font-weight: 600;
			line-height: 1.25em;
			@include xs{
				font-size: 2.3rem;
				font-size: 23px;
			}
			i{margin-right: 0.5rem;}
			.phone-number:link{
				color: #333;
			}
			span{
				font-size: 1.4rem;
				font-size: 14px;
				@include xs{
					font-size: 1.2rem;
					font-size: 12px;
				}
			}
		}
		.other{text-align: center;}
	}
}

//footer
footer{
	background: #333;
	color: #fff;
	text-align: center;
	padding: 6rem 0;
	position: relative;
	img{margin-bottom: 1rem;}
	p{
		font-size: 12px;
		font-size: 1.2rem;
		margin-bottom: 3rem;
	}
	.flex-container{
		justify-content: center;
		gap: 20px;
		@include xs{
			flex-direction: column;
			align-items: center;
			gap: 10px;
		}
		a{
			font-size: 12px;
			font-size: 1.2rem;
			color: #fff;
			width: 250px;
			border: 1px solid #fff;
			padding: 1rem;
			transition: .2s;
			&:hover{
				background-color: #fff;
				color: #333;
			}
		}
	}
	.arrow-up{
		display: flex;
		justify-content: center;
		padding-left: 3rem;
		height: 50px;
		width: 65px;
		text-decoration: none;
		font-weight: bold;
		transform: rotate(90deg);
		font-size: 90%;
		line-height: 2rem;
		color: #737373;
		position: absolute;
		right: 2rem;
		bottom: 3rem;
	}
	.arrow-up::before{
		content: "";
		display: block;
		position: absolute;
		top: -1px;
		left: 0px;
		width: 15px;
		border-top: solid 1px;
		transform: rotate(35deg);
		transform-origin: left top;
		transition: 0.3s;
	}
	.arrow-up::after{
		content: "";
		display: block;
		position: absolute;
		height: 50px;
		width: 65px;
		top: -1px;
		right: 1px;
		border-top: solid 1px;
		transition: 0.3s;
	}
	.arrow-up:hover::before{
		transform: rotate(35deg) translateX(-6px) translateY(5px);
	}
	.arrow-up:hover::after{
		transform: translateX(-8px);
	}
}


/* トップへ戻るボタン */
#page-top {
    position: fixed;
    bottom: 0;
    right: 0;
	margin-bottom: 0;
	background-color: #fff;
	a {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #A0A0A0;
		text-decoration: none;
		color: #fff;
		width: 65px;
		height: 65px;
		transition: 0.3s;
		&:hover {
			opacity: 0.7;
		}
		img {
			width: 22px;
			height: 14px;
		}
	}
}