@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-color: #8C2126;
$sub-color: #C79E82;
//全体のカラー設定（一括）----ここまで

//header------------------------------------------------------------------ここから
header{
	position: absolute;
    z-index: 10;
    display: block;
	width: 100%;
	@include xs {
		background-color: #F7F2E8;
	}
	nav{
		@include xs {
			padding: 0!important;
		}
		#global-nav{
			align-items: flex-start;
			justify-content: space-between;
			padding: 1rem 5rem;
			@include lg {
				padding: 1rem 3rem;
			}
			@include md {
				align-items: center;
			}
			@include sm {
				flex-wrap: wrap;
				padding: 1rem 2rem;
			}
			@include xs {
				padding: 1.05rem 1.5rem;
			}
			div.header-logo{
				@include md {
					width: 40%;
				}
				@include sm {
					width: 30%;
				}
				@include xs {
					width: 55%;
				}
				h1{
					font-size: 10px;
					font-size: 1rem;
					color: $main-color;
					margin-bottom: 0.5rem;
					@include md {
						display: none;
					}
					& + a{
						@include xs {
							display: block;
						}
						img{
							width: 260px;
							@include xs {
								width: 230px;
							}
						}
					}
				}
			}
			ul.d-sm-flex{
				li{
					a{
						font-size: 15px;
						font-size: 1.5rem;
						margin-left: 3rem;
						color: #808080;
						@include sm {
							font-size: 14px;
							font-size: 1.4rem;
							margin-left: 1rem;
						}
						&:hover{
							color: $main-color;
						}
					}
				}
				li:first-child a{
					margin-left: 0;
				}
			}
		}
		#global-nav.fixed{
			position: fixed;
			background-color: #F7F2E8;
			z-index: 10;
			display: block;
			width: 100%;
		}
		& + a{
			font-size: 18px;
			font-size: 1.8rem;
			color: #fff;
			writing-mode: vertical-rl;
			background-color: #C79E82;
			padding: 2rem 1rem;
			border-top-left-radius: 1.5rem;
			border-bottom-left-radius: 1.5rem;
			position: fixed;
			right: 0;
			top: 20%;
			display: flex;
			align-items: center;
			@include sm {
				top: 8%;
			}
			@include xs {
				top: auto;
				bottom: 0;
				width: 100%;
				border-radius: 0;
				writing-mode: inherit;
				padding: 1rem;
				display: flex;
				align-items: center;
				text-align: center;
				justify-content: center;
			}
			&:hover{
				background-color: $main-color;
			}
			svg{
				margin-bottom:0.5rem;
				@include xs {
					margin-bottom:0;
					margin-right: 0.5rem;
				}
			}
		}
	}
	button.navbar-toggler{
		background: $main-color;
		border-radius: inherit;
		padding: 3rem;
		border: none;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		right: 0;
		overflow: hidden;
		&:focus {
			outline: none!important;
			box-shadow: none!important;
		}
		&:hover{
			background: $sub-color;
		}
		span.navbar-toggler-icon{
			position: absolute;
			display: block;
			content: "";
			width: 50%;
			height: 2px;
			background-color: #fff;
			transition: all 0.5s;
			background-image: none;
			&::before{
				position: absolute;
				display: block;
				content: "";
				width: 100%;
				height: 2px;
				background-color: #fff;
				transition: all 0.5s;
				background-image: none;
				top: -10px;
			}
			&::after{
				position: absolute;
				display: block;
				content: "";
				width: 100%;
				height: 2px;
				background-color: #fff;
				transition: all 0.5s;
				background-image: none;
				bottom: -10px;
			}
		}
	}
	div.offcanvas{
		background-color:$main-color;
		width: 70%!important;
		.offcanvas-header{
			justify-content: space-between;
			padding: 1rem 2rem;
			a{
				width: 150px;
			}
			button{
				position: relative;
				background-image: none;
				width: 50px;
				height: 50px;
				display: flex;
				justify-content: center;
				align-items: center;
				&:focus {
					outline: none!important;
					box-shadow: none!important;
				}
				span.offcanvas-icon{
					position: absolute;
					display: block;
					content: "";
					width: 70%;
					height: 2px;
					background-color: transparent;
					&::before{
						position: absolute;
						display: block;
						content: "";
						width: 100%;
						height: 2px;
						background-color: #fff;
						background-image: none;
						top: 0;
						transform: rotate(45deg);
					}
					&::after{
						position: absolute;
						display: block;
						content: "";
						width: 100%;
						height: 2px;
						background-color: #fff;
						background-image: none;
						bottom: 0;
						transform: rotate(-45deg);
					}
				}
			}
		}
		div.offcanvas-body{
			padding: 0 2rem;
			ul{
				li{
					a{
						color: #fff;
						&:hover{
							color: $sub-color;
						}
					}
				}
			}
		}
	}
	.offcanvas-end{
		border-left: none!important;
	}
}

//footer------------------------------------------------------------------ここから
footer{
	div.footer-contact{
		text-align: center;
		padding: 3rem 0 4rem;
		position: relative;
		@include xs {
		padding: 2rem 0 3rem;
				}
		dl{
			dt{
				color: #908080;
				font-size: 21px;
				font-size: 2.1rem;
				letter-spacing: 2px;
				font-weight: normal;
				margin-bottom: 1.5rem;
				@include xs {
					font-size: 16px;
					font-size: 1.6rem;
				}
			}
			dd{
				div.d-flex{
					display: flex;
					align-items: baseline;
					justify-content: center;
					a{
						font-family: "Josefin Sans", sans-serif;
						font-style: italic;
						font-size: 70px;
						font-size: 7rem;
						color: $main-color;
						font-weight: 400;
						@include xs {
							font-size: 45px;
							font-size: 4.5rem;
						}
						svg{
							font-size: 56px;
							font-size: 5.6rem;
							@include xs {
								font-size: 35px;
								font-size: 3.5rem;
							}
						}
					}
				}
				p{
					color: #908080;
					font-size: 15px;
					font-size: 1.5rem;
					margin-top: 0.5rem;
				}
			}
		}
		#page-top {
			position: absolute;
			right: 0;
			bottom: 15%;
			a{
				font-size: 14px;
				font-size: 1.4rem;
				color: inherit;
				position: relative;
				writing-mode: vertical-rl;
				color: $main-color;
				&::before{
					content: '';
					position: relative;
					display: inline-block;
					width: 5px;
					height: 52px;
					border-left: 1px solid $main-color;;
					border-top: 1px solid $main-color;;
					transform: skewY(-135deg);
					margin-bottom: 0.5rem;
					transition: 0.3s;
				}
				&:hover::before{
					width: 5px;
					height: 80px;
				}
			}
		}
	}
	div.google-map{
		display: block;
		height: 250px;
		overflow: hidden;
		iframe{
			width: 100%;
			height: 100%;
		}
	}
	div.footer-nav{
		background-image: url("../img/footer-img.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		padding: 4rem 0 3rem;
		@include xs {
			padding: 3rem 1.5rem 5rem;
		}
		div.d-flex{
			justify-content: space-between;
			margin-bottom: 3rem;
			flex-wrap: wrap;
			@include xs {
				margin-bottom: 1rem;
			}
			.footer-logo{
				@include sm {
					margin-bottom: 2rem;
				}
				@include xs {
					text-align: center;
					display: block;
					width: 100%;
				}
				img{
					width: 305px;
				}
			}
			.d-flex{
				ul{
					margin-right: 5rem;
					@include xs {
						margin-right: 1.6rem;
					}
					li{
						a{
							font-size: 14px;
							font-size: 1.4rem;
							color: #fff;
							&:hover{
								color: $main-color;
							}
						}
					}
				}
				p{
					font-size: 14px;
					font-size: 1.4rem;
					color: #fff;
					line-height: normal;
					a{
						color: #fff;
					}
				}
			}
		}
		.copyright{
			color: #fff;
			margin: 0;
			font-size: 12px;
			font-size: 1.2rem;
		}
	}
}


//共通parts----------------------------------------------------------------ここから
//article
article{
	margin-top: 0;
	background-color: #F7F2E8;
}

//隙間
section{
	padding-bottom: 5rem;
}

//top-img
#header-img{
	padding-bottom: 3rem;
	@include xs {
		padding-bottom: 2rem;
	}
	div.header-img{
		overflow: hidden;
		width: 90%;
		padding-top: 13rem;
		@include md {
			padding-top: 11rem;
		}
		@include sm {
			padding-top: 7rem;
		}
		@include xs {
			padding-top: 5.5rem;
			width: 100%;
		}
		img{
			width: 100%;
		}
	}
	div.container{
		position: relative;
		div{
			position: absolute;
			left: -30px;
			top: -250px;
			@include xl {
				left: 0;
			}
			@include lg {
				left: 5%;
				top: -170px;
				z-index: 1;
			}
			@include md {
				top: -135px;
			}
			@include sm {
				top: -107px;
			}
			@include xs {
				top: -80px;
			}
			h2{
				writing-mode: vertical-rl;
				@include lg {
					writing-mode: inherit;
				}
				span{
					font-size: 35px;
					font-size: 3.5rem;
					letter-spacing: 2px;
					display: inline-block;
					background-color: #fff;
					padding: 1rem;
					@include sm {
						font-size: 30px;
						font-size: 3rem;
					}
					@include xs {
						font-size: 25px;
						font-size: 2.5rem;
						padding: 0.5rem;
					}
				}
				span.sub-title{
					font-family: "Josefin Sans", sans-serif;
					font-size: 15px;
					font-size: 1.5rem;
					font-weight: normal;
					@include xs {
						font-size: 13px;
						font-size: 1.3rem;
					}
				}
			}
		}
		p{
			text-align: justify;
			margin-top: 5rem;
			line-height: 3rem;
			@include lg {
				margin-top: 3rem;
			}
			@include sm {
				line-height: inherit;
			}
			@include xs {
				margin-top: 1rem;
			}
		}
	}
}

//ページ内移動
.anchor{
	margin-top: -7.5rem;
    padding-top: 7.5rem;
}
//見出し
h3{
	border-left: 2px solid $main-color;
    font-size: 27px;
    font-size: 2.7rem;
    font-weight: bold;
    padding-left: 2rem;
	color: $main-color;
	span{
		font-family: "Josefin Sans", sans-serif;
		font-size: 14px;
		font-size: 1.4rem;
		font-weight: normal;
	}
}
//リンクボタン
.link-btn{
	display: inline-block;
	border: 1px solid $main-color;
	border-radius: 5rem;
	padding: 1rem 3.5rem 1rem 2rem;
	color: $main-color;
	position: relative;
	min-width: 300px;
	transition: 0.3s;
	margin: 1rem 0;
	svg{
		margin-right: 0.5rem;
	}
	&::after{
		position: absolute;
		right: 7px;
		font-family: "Font Awesome 5 Free";
		content: "\f105";
		font-weight: 900;
		margin-right: 10px;
		color: #8C2126;
		color: $main-color;
	}
	&:hover{
		background-color: $main-color;
		color: #fff;
	}
	&:hover::after{
		color: #fff;
	}
}