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

//メインカラー指定
$main100: #0079bf;
$main90: #1986c5;
$main70: #4ca1d2;
$main10: #e5f2f9;

article {
	background-color: #fbf1f3;
	background-image: url("../img/cloud.svg");
	background-size: 100%;
	background-repeat: repeat-y;
	padding: 6rem 0 0 0;
	@include md {
		background-size: 200%;
	}
	@include xs {
		padding: 3rem 0 0 0;
	}
}

//header
header {
	.header-bg {
		display: block;
		height: 90px;
		width: 100%;
		background: url(../img/header-parts.svg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: bottom center;
		position: absolute;
		top: 0;
		z-index: 3;
		.row {
			height: 70px;
			align-items: center;
		}
		
	}
	h1 {
		width: 270px;
		margin-bottom: 0;
	}
	ul {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 0;
		li {
			display: flex;
			margin-left: 2rem;
			a {
				color: #656464;
				font-size: 12px;
				font-size: 1.2rem;
				font-weight: 500;
				&::before {
					font-family: "Font Awesome 5 Free";
					content: "\f0da";
					font-weight: 900;
					margin-right: 0.5em;
				}
				&:hover {
					color: main70;
				}
			}
		}
	}
	.site-search {
		display: flex;
		align-items: center;
		overflow: inherit;
		line-height: 1;
		margin-bottom: 0rem;
		.header-search {
			height: 25px;
			width: 120px;
			border: solid 1px rgba(101,100,100,0.8);
			border-radius: 3px 0 0 3px;
			font-size: 12px;
			font-size: 1.2rem;
			&:focus {
				outline: none;
				font-size: 12px;
				font-size: 1.2rem;
			}
		}
		.header-submit {
			height: 25px;
			width: 40px;
			border: solid 1px rgba(101,100,100,0.8);
			border-radius: 0 3px 3px 0;
			background-color: #656464;
			color: #fff;
			font-weight: 500;
			font-size: 10px;
			font-size: 1rem;
		}
	}
	.size-change {
		font-size: 12px;
		font-size: 1.2rem;
		display: flex;
		align-items: center;
	}
	.size-button {
		background-color: #fff;
		color: #656464;
		border: 1px solid rgba(101,100,100,0.7);
		font-size: 12px;
		font-size: 1.2rem;
		line-height: 1;
		text-align: center;
		width: 27px;
		height: 27px;
		border-radius: 50%;
		margin-left: 0.5rem;
		&:first-of-type {
			font-size: 10px;
			font-size: 1rem;
		}
		&:last-of-type {
			font-size: 13px;
			font-size: 1.3rem;
		}
		&:focus {
			outline: none;
		}
		&:hover,
		&.active {
		background-color: $main70;
		color: #fff;
		}
	}
}

//sidebar
#sidebar {
	.contents {
		background-color: #fff;
		border-radius: 11px;
		&>div {
			position: relative;
			font-family: 'Kiwi Maru', serif;
			color: $main100;
			letter-spacing: 0.1em;
			padding: 1rem 2rem;
			font-size: 16.5px;
			font-size: 1.65rem;
			&::after {
				position: absolute;
				content: "";
				background: url("../img/sidebar-01.svg");
				width: 60px;
				height: 48px;
				right: -5px;
				top: -5px;
			}
		}
		.primary {
			&>li {
				&>div {
					position: relative;
					display: flex;
					align-items: center;
					background: linear-gradient(180deg, $main70 0%, $main70 50%, $main90 50%, $main90 100%);
					font-family: 'Kiwi Maru', serif;
					color: #fff;
					font-size: 14.5px;
					font-size: 1.45rem;
					letter-spacing: -0.05em;
					width: 95%;
					height: 34px;
					padding-left: 2rem;
					margin-bottom: 5px;
					span {
						font-size: 10px;
						font-size: 1rem;
						vertical-align: middle;
						margin-left: 1rem;
						letter-spacing: 0;
					}
					&::after {
						content: '';
						position: absolute;
						display: block;
						width: 0;
						height: 0;
						top:0;
						right: 0;
						border-top: 17px solid transparent;
						border-right: 6px solid #fff;
						border-bottom:17px solid transparent;
					}
				}
			}
		}
		.secondary {
			padding-bottom: 2rem;
			&>li {
				margin: 0 3px;
				border-bottom: solid 1px $main70;
				&>div {
					position: relative;
					a {
						color: #4d4d4d;
						display: block;
						width: 100%;
						line-height: 1.5;
						text-indent: -0.75em;
						padding: 1rem 0 1rem 2.2em;
						font-size: 13px;
						font-size: 1.3rem;
						i {
							color: $main70;
							font-family: "Font Awesome 5 Free";
							font-weight: 900;
							font-style: normal;
							margin-right: 0.5em;
						}
						&:hover {
							background-color: $main10;
						}
					}
					div {
						&::before {
							position: absolute;
							color: $main70;
							content: "＋";
							top: 0;
							right: 0;
							width: 20%;
							height: 100%;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}
				&>div.open {
					div {
						&::before {
							content: "ー";
						}
					}
				}
				&>a {
					color: #4d4d4d;
					display: block;
					width: 100%;
					line-height: 1.5;
					text-indent: -0.75em;
					padding: 1rem 0 1rem 2.2em;
					font-size: 13px;
					font-size: 1.3rem;
					i {
						color: $main70;
						font-family: "Font Awesome 5 Free";
						font-weight: 900;
						font-style: normal;
						margin-right: 0.5em;
					}
					&:hover {
						background-color: $main10;
					}
				}
			}
		}
		.tertiary {
			display: none;
			margin-bottom: 5px;
			li {
			&:hover {
				background-color: $main10;
			}
				a {
					display: block;
					color: #4d4d4d;
					font-size: 12px;
					font-size: 1.2rem;
					padding-left: 1.5em;
					&::before {
						font-family: "Font Awesome 5 Free";
						content: "\f0da";
						font-weight: 900;
						color: $main100;
						margin-right: 0.5em;
					}
				}
			}
			
		}
	}
	&>p {
		font-size: 9px;
		font-size: 0.9rem;
		color: #666;
		line-height: 1.6;
	}
	&>a {
		img {
			width: 110px;
			margin-bottom: 2rem;
		}
	}
	.various-links {
		li {
			margin-bottom: 0.5rem;
			a {
				border: solid 1px #b1b1b1;
				background-color: #fff;
				color: #666;
				display: block;
				font-size: 11px;
				font-size: 1.1rem;
				padding: 0.5rem 0 0.5rem 1rem;
				line-height: 1.4;
				&::before {
					font-family: "Font Awesome 5 Free";
					content: "\f35d";
					font-weight: 900;
					margin-right: 0.5rem;
				}
				&:hover {
					background-color: $main10;
				}
			}
		}
		li:first-child {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: $main70;
			font-family: 'Kiwi Maru', serif;
			color: #fff;
			height: 34px;
			border-radius: 4px;
			font-size: 14.5px;
			font-size: 1.45rem;
			letter-spacing: -0.05em;
			span {
				font-size: 10px;
				font-size: 1rem;
				vertical-align: middle;
				margin-left: 1rem;
				letter-spacing: 0;
			}
		}
	}
}

//under-illust
#under-illust {
	padding-top: 3rem;
	img {
		height: 72px;
		position: relative;
		left: 8%;	
	}
}

//footer
footer {
	background-color: #fbf1f3;
	.upper-side {
		padding: 4rem 0 2rem;
		background-color: #fff;
		@include sm {
			padding: 2rem 0 0;
		}
		.up-left {
			padding-left: 8rem;
			@include md {
				padding-left: 2rem;
			}
			@include sm {
				padding-left: 0;
			}
			@include xs {
				padding-left: 2rem;
			}
			ul {
				display: inline-block;
				@include xs {
					margin-bottom: 2rem;
				}
				li {
					line-height: 1.5;
					@include xs {
						line-height: 1.8;
					}
					a {
						color: #4d4d4d;
						font-weight: 500;
						font-size: 13px;
						font-size: 1.3rem;
						@include xs {
							font-size: 15px;
							font-size: 1.5rem;
						}
						&:hover {
							color: $main70;
						}
					}
				}
			}
		}
		.up-right {
			dl {
				display: flex;
				@include md {
					display: block;
				}
				dt {
					color: $main70;
					margin-right: 2em;
					font-size: 13px;
					font-size: 1.3rem;
					font-weight: 500;
					@include xs {
						font-size: 16px;
						font-size: 1.6rem;
					}
				}
				dd {
					ul {
						display: inline-block;
						li {
							line-height: 1.5;
							@include xs {
								text-indent: -0.8em;
								padding-left: 0.8em;
							}
							a {
								color: #4d4d4d;
								font-weight: 500;
								font-size: 11px;
								font-size: 1.1rem;
								@include xs {
									font-size: 14px;
									font-size: 1.4rem;
								}
								&:hover {
									color: $main70;
								}
								&::before {
									font-family: "Font Awesome 5 Free";
									content: "\f0da";
									font-weight: 900;
									margin-right: 0.5em;
								}
							}
						}
					}
				}
			}
		}
	}
	.lower-side {
		background-color: #65a882;
		padding-top: 4rem;
		@include sm {
			padding-top: 3rem;
		}
		.row {
			width: 90%;
			margin: 0 auto;
			@include md {
				width: 100%;
			}
			.lower-left {
				img {
					width: 314px;
					margin-bottom: 1.5rem;
				}
				.main-address {
					color: #fff;
					font-size: 14px;
					font-size: 1.4rem;
					line-height: 1.4;
					border-bottom: solid 1px rgba(255,255,255,0.5);
					padding-bottom: 1.5rem;
					margin-bottom: 1.5rem;
					span {
						display: block;
						font-size: 19px;
						font-size: 1.9rem;
						margin: 0.5rem 0 0;
						font-weight: 500;
						@include xs {
							font-size: 17px;
							font-size: 1.7rem;
						}
					}
				}
				.row {
					width: 100%;
					p {
						color: #fff;
						font-size: 11px;
						font-size: 1.1rem;
						line-height: 1.6;
						font-weight: bold;
						@include xs {
							font-size: 16px;
							font-size: 1.6rem;
						}
						.large {
							font-size: 12.5px;
							font-size: 1.25rem;
							@include xs {
							font-size: 15px;
							font-size: 1.5rem;
						}
						}
						.weight400 {
							font-weight: 400;
						}
						a {
							color: #fff;
							margin-left: 1em;
							@include md {
								margin-left: 0.5em;
							}
							&:hover {
								color: $main100;
							}
						}
					}
				}
			}
			.lower-right {
				@include sm {
					margin-top: 2rem;
				}
				.gmap {
					border: solid 4px #fff;
					height: 100%;
					@include sm {
						height: 200px;
					}
				}
			}
		}
	.copy {
		text-align: center;
		color: #fff;
		margin-bottom: 0;
		padding: 2rem 0;
		letter-spacing: 0.3em;
		font-weight: 300;
		font-size: 8px;
		font-size: 0.8rem;
	}
	}
}

/* トップへ戻るボタン */
#page-top {
    position: fixed;
    bottom: 3%;
    right: 3%;
    margin-bottom: 0;
	z-index: 10;
	a {
		img {
			width: 90px;
			@include sm {
				width: 80px;
			}
			@include xs {
				width: 70px;
			}
		}
	}
}

//ページ内リンクがずれるときの解決策
.anchor {
	@include md {
		margin-top: -8rem;
		padding-top: 8rem;
	}
}