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

// 固定色
$main-blue: #003685;
$main-yellow: #bf9a0e;
$sub-blue: #d6dfeb;


//色変え ---------------------------------------
span.color-blue {
	color: #335e9d;
}
span.color-yellow {
	color: $main-yellow;
}





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

.header{
	.logo-box {
		a {
			.logo {
				background: url("/img/logo_white.svg");
				width: 250px;;
				height: 100%;
				background-repeat: no-repeat;
				background-position: center;
				margin-left: 3rem;
				transition: 0.3s;
			}
		}
	}
}

.header-inner ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
	height: 90px;
	text-align: right;
	margin: 0 auto;
}
.header-inner ul li {
	display: inline-block;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: 500;
	@include lg {
		font-size: 13px;
		font-size: 1.3rem;
	}
	@include md {
		font-size: 12px;
		font-size: 1.2rem;
	}
	a {
		color: #1a1a1a;
		display: block;
		padding: 0 1em;
		transition: 0.3s;
		&:hover {
			opacity: 0.5;
		}
	}
}

header #global-nav {
	background-color: transparent;
    transition: background-color .5s, color .5s;
}
.header-inner ul li {
	a {
		color: #fff;
		transition: 0.3s;
		&:hover {
			opacity: 0.5;
		}
	}
}

.header-contact {
	a {
		background-color: $main-blue;
		border: 1px solid $main-blue;
		height: 90px;
		width: 90px;
		margin-left: 1.5rem;
		display: flex!important;
		align-items: center;
		justify-content: center;
		transition: 0.3s;
		.contact-icon {
			background: url("../img/contact-icon.svg");
			height: 25px;
			width: 100%;
			background-repeat: no-repeat;
			background-position: center;
		}
//		img {
//			height: 100%;
//			width: 33px;
//			margin: auto;
//			display: flex;
//		}
	}
	a:hover {
		background-color: #fff;
		border: 1px solid $main-blue;
		.contact-icon {
			background: url("../img/contact-icon-ho.svg");
			height: 25px;
			width: 100%;
			background-repeat: no-repeat;
			background-position: center;
		}
	}
}


/* headerの色を変える */
.header.change-color {
    background-color: #fff!important;
}

.header{
	.logo-box {
		a {
			.logo.change-color {
				background: url("/img/logo_color2.svg");
				width: 250px;
				height: 100%;
				background-repeat: no-repeat;
				background-position: center;
				margin-left: 3rem;
				transition: 0.3s;
			}
		}
	}
	.header-inner {
		ul {
			li {
				a.change-color {
					color: #4d4d4d!important;
				} 
			}
		}
	}
}









///*------ スマホ用ヘッダー ------*/
.header {
//	position: sticky!important; /* headerを追従にする */
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background-color: #fff;
	position: fixed;
	z-index: 2000;
	transition: 0.3s;
	.header__inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 2rem;
		@include xs {
			padding: 1rem 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: $main-blue;
		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: #fff;
		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: $main-blue;
				text-decoration: none;
				padding: 2rem;
				border-bottom: solid 1px lightgray;
				transition: 0.3s;
				&:hover{
					background-color: #f0f0f0;
				}
			}
			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;
}







//見出し ---------------------------------------
h2 {
	font-size: 29px;
	font-size: 2.9rem;
	font-weight: 600;
    letter-spacing: 0.05em;
	line-height: 3.5rem;
	text-align: center;
	margin-bottom: 4rem;
	span {
		font-family: "Montserrat", sans-serif;
		display: block;
		font-size: 15px;
		font-size: 1.5rem;
		font-weight: 600;
		color: $main-blue;
		letter-spacing: 0.15em;
	}
}

//リンクボタン ---------------------------------------
.link-box {
	a {
		color: inherit;	
		background: #fff;
		font-size: 16px;
		font-size: 1.6rem;
		border: solid 0.7px #666666;
		display: inline-block;
		padding: 0.6rem 5rem;
		transition: 0.3s;
	}
	a:hover {
		color: #fff;
		background-color: #666666;
	}
}
.link-arrow {
	a {
		color: inherit;
		/*矢印の基点とするためrelativeを指定*/
		position: relative;
		/*ボタンの形状*/
		text-decoration: none;
		display: inline-block;
		/*アニメーションの指定*/
		transition: ease .2s;
	}
	a::after {
		content: '';
		background-repeat: no-repeat;
		background-image: url("../img/viewmore-arrow.svg");
		display: inline-block;
		height: 10px;
		width: 140px;
		vertical-align: middle;		
		/*絶対配置で矢印の位置を決める*/
		position: absolute;
		bottom: -25%;
		left: 0;
		/*アニメーションの指定*/
		transition: all .3s;
	}
	a:hover::after {
		left: 11px;
	}
}

//下層のページタイトル部分（写真は下層専用CSSで指定） ---------------------------------------
#header-img{
	height: 300px;
	position: relative;
	@include sm {
		margin-top: 90px;
	}
	@include xs {
		margin-top: 74px;
	}
	.header-title{
		position: absolute;
		background: $main-blue;
		color:#fff;
		text-align: center;
		padding: 4rem 4rem 3.5rem; 
		bottom: -5rem;
		margin: 0 auto;
		left:50%;
 		transform: translateX(-50%);
		z-index: 1;
		p{
			font-size: 25px;
			font-size: 2.5rem;
			font-weight: 600;
			letter-spacing: 0.05em;
			line-height: 2.5rem;
			margin-bottom: 0;
			white-space: nowrap;
			}
		span{
			font-family: "Montserrat", sans-serif;
			font-size: 12px;
		    font-size: 1.2rem;
			font-weight: 600;
			letter-spacing: 0.15em;
		}
	}
	.copyright-lower {
		position: absolute;
		writing-mode: vertical-rl;
		bottom: -20rem;
		right: 0;
		font-size: 10px;
		font-size: 1rem;
		z-index: 1;
		p {
			color: #B3B3B3;
			margin: 0;
			margin-right: 1rem;
			letter-spacing: 0.15rem;
		}
	}
}


// footer-upper ---------------------------------------
#footer-upper {
	background-image: url("../img/footer-bg.jpg");
    background-size: cover;
	background-position: center;
	height: 345px;
	display: flex;
    align-items: center;
	color: #fff;
	@include md {
		height: 295px;
	}
	@include sm {
		height: 410px;
	}
	h2 {
		@include xs {
			margin-bottom: 3rem;
		}
		span {
			color: #fff;
		}
	}
	.contact-tel {
		border-right: solid 1px #fff;
		@include sm {
			border-right: none;
			margin-bottom: 3rem;
		}
		@include xs {
			margin-bottom: 2rem;
		}
		p {
			font-size: 14px;
			font-size: 1.4rem;
			span {
				font-size: 40px;
				font-size: 4rem;
				font-family: "Montserrat", sans-serif;
				font-weight: 500;
				letter-spacing: 0.2rem;
			}
		}
	}
	.contact-mail {
		.link-box {
			a {
				border: #ffffff;
				background-color: #ffffff;
				color: #666666;
				padding: 1rem 7rem;
				transition: 0.3s;
			}
			a:hover {
				color: #fff;
				background-color: #666666;
			}
		}
	}
	.contact-tel,.contact-mail {
		text-align: center;
		h5 {
			font-size: 16px;
			font-size: 1.6rem;
			font-weight: 600;
			color: #d2b856;
			margin-bottom: 2.3rem;
			@include xs {
				margin-bottom: 1.3rem;
			}
		}
	}

}

// footer-under ---------------------------------------
#footer-under {
	.left-box {
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		@include xs {
			margin: 2rem 0 4rem 0;
		}
		img {
			height: 155px;
			@include xs {
				height: 130px;
			}
		}
		p {
			padding: 2.5rem 0 2rem 0;
			line-height: 1.6em;
			span {
				font-weight: 600;
			}
		}
		.link-box {
			i {
				color: #4c72aa;
			}
			a:hover {
				i {
				color: #fff;
				}
			}

		}
	}
	.googlemap {
		iframe {
			height: 465px;
			display: block;
			@include md {
				height: 400px;
			}
			@include xs {
				height: 200px;
			}
		}
	}
}





//トップに戻る
#page-top {
    position: fixed;
    bottom: 5rem;
    right: 2rem;
    z-index: 5;
	a {
		width: 56px;
		display: block;
		transition: 0.3s;
	}
	a:hover {
	    transform: scale(1.1);
	}
}