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

$bright-color: #b20404;
$dark-color: #602121;


h2 {
	font-size: 26px;
	font-size: 2.6rem;
	font-weight: bold;
	text-align: center;
	span {
		font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
		font-family: 'Noto Sans JP';
		font-size: 17px;
		font-size: 1.7rem;
		font-weight: 400;
		color: $dark-color;
		display: block;
		margin-top: 1rem;
	}
}
h3 {
	font-size: 28px;
	font-size: 2.8rem;
	font-weight: bold;
	letter-spacing: 0.05em;
}
h4 {
	font-size: 24px;
	font-size: 2.4rem;
	margin: 3.5rem 0 2.5rem;
	@include lg {
		margin: 3rem 0 2rem;
	}
	@include sm {
		margin: 2rem 0 1rem;
	}
	@include xs {
		font-size: 22px;
		font-size: 2.2rem;
	}
}

h5 {
	font-size: 18px;
	font-size: 1.8rem;
}

//header
header #global-nav {
	display: block;
    position: fixed;
    max-width: 100%;
	background-color: #fff;
    width: 100%;
	height: 86px;
    z-index: 10;
	top: 0;
}

header .logo {
	position: relative;
	img {
	position: absolute;
	top: 50%;
	max-width: 250px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	}
}
.header-inner ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
	height: 86px;
	text-align: right;
	margin: 0 auto;
}
.header-inner ul li {
	display: inline-block;
	padding: 0 1.5rem;
	font-size: 17px;
	font-size: 1.7rem;
	@include lg {
		padding: 1rem;
	}
	@include md {
		padding: 0.5rem;
	}
	a {
		color: #4d4d4d;
		display: block;
		padding: 0 1rem;
		position: relative;
		&::after{
			position: absolute;
			bottom: 0px;
			left: 0;
			content: "";
			width: 100%;
			height: 1.5px;
			background: $bright-color;
			transform: scale(0, 1);
			transform-origin: center top;
			transition: transform 0.3s;
		}
		&:hover::after{
			transform: scale(1, 1);
		}
		@include lg {
			padding: 0 0.5rem;
		}
		&:hover {
			color: $bright-color;
		}
	}
}


//footer
footer {
	.footer-contents {
		background-image: url("../img/footer-img.jpg");
		background-size: cover;
		background-position: center center;
		position: relative;
		padding-top: 4rem;
		padding-bottom: 1rem;
		img {
			width: 300px;
			margin-bottom: 1rem;
		}
		p {
			color: #fff;
		}
		ul {
			justify-content: center;
			margin-top: 3rem;
			margin-bottom: 1.5rem;
			li {
				border-right: solid 1px #fff;
				padding: 0 1em;
				line-height: 1;
				&:last-child {
					border-right: none;
				}
				a {
					color: #fff;
					&:hover {
						color: $bright-color;
					}
				}
			}
		}
	}
}

//下層ページ
#ul-top {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    height: 300px;
	margin-top: 86px;
	@include sm {
		margin-top: 0;
	}
	h2 {
		color: #fff;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		span {
			color: #fff;
		}
	}
}

.copyright {
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
	font-family: 'Noto Sans JP';
}