@charset "utf-8";

/* ////////////////////////////////////////////
 *                 base & layout
 * //////////////////////////////////////////// */

/* Typography
------------------------------------------*/
html {
	background: var(--bodyBgColor);
	font-size: 16px;
}
body {
	line-height: 1.8;
	color: var(--textColor);
	background: url(/images/base/bg.png) repeat-x 0 0;
}
a {
	color: var(--textColorSub);
	text-decoration: none;
}
a:hover,
a:focus {
	color: inherit;
	text-decoration: underline;
}

/* use hover animation */
/*
a, a:hover {
	-webkit-transition: 0.3s ease-in-out;
	   -moz-transition: 0.3s ease-in-out;
		 -o-transition: 0.3s ease-in-out;
			transition: 0.3s ease-in-out;
}
*/

.na{
	font-family: "Zen Kaku Gothic Antique", sans-serif;
}


/* Layout
------------------------------------------*/
body {
	min-width: 1280px;
	text-align: center;
}
body.home {
	word-break: break-all;
}
#container {
	overflow: clip;
	padding-top: calc((11 / 192) * 100vw);
	&.mini{
		padding-top: calc((9 / 192) * 100vw);
	}
}

/* general
------------------------------------------*/
a{
	text-decoration: none;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	&:hover{
		opacity: .7;
		text-decoration: none;
	}
}

.common{
	padding: 150px 0;
	h2{
		margin-bottom: 40px;
		line-height: 1.3;
		span{
			display: block;
			&.en{
				position: relative;
				font-size: 20px;
				font-weight: 500;
				color: var(--keyColor);
				text-transform: uppercase;
				&::before{
					content: '●';
					position: absolute;
					top: -2em;
					left: 50%;
					transform: translateX(-50%);
					font-size: 10px;
				}
			}
			&.ja{
				font-size: 58px;
				font-weight: 700;
			}
		}
	}
	.main{
		margin: 0 auto;
		max-width: 1280px;
	}
	.btns{
		a{
			margin-top: 20px;
			padding-right: 60px;
			position: relative;
			display: inline-block;
			font-size: 16px;
			font-weight: 500;
			color: var(--textColor);
			&::after{
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 0;
				content: '\f30b';
				font-weight: bold;
				font-family: 'Font Awesome 5 Free';
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				width: 44px;
				height: 44px;
				line-height: 44px;
				text-align: center;
				background: var(--keyColorSub);
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				border-radius: 50%;
				color: var(--bodyBgColor);
				font-size: 20px;
				-webkit-transition-duration: .3s;
				-moz-transition-duration: .3s;
				-ms-transition-duration: .3s;
				-o-transition-duration: .3s;
				transition-duration: .3s;
			}
			&:hover{
				opacity: 1;
				&::after{
					width: 50px;
					height: 50px;
					line-height: 50px;
					font-size: 25px;
				}
			}
		}
	}
}

.sp-parts,
.tab-parts,
.grecaptcha-badge{
	display: none;
}

/* fixed
------------------------------------------
.fixed-btn{
	position: fixed;
	top: calc((20 / 192) * 100vw);
	right: calc((5 / 1920) * 100vw);
	z-index: 9999;
	ul{
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: calc((1 / 192) * 100vw);
		li{
			a{
				color: var(--bodyBgColor);
				font-size: calc((18 / 1920) * 100vw);
				font-weight: 600;
				display: block;
				width: calc((5 / 192) * 100vw);
				display: block;
				&.instagram{
					background: var(--instaColor);
					-webkit-border-radius: .3vw;
					-moz-border-radius: .3vw;
					border-radius: .3vw;
				}
				&.x{
					font-size: calc((25 / 1920) * 100vw);
					background: #000;
					text-align: center;
					height: calc((5 / 192) * 100vw);
					line-height: calc((5 / 192) * 100vw);
					-webkit-border-radius: 50%;
					-moz-border-radius: 50%;
					border-radius: 50%;
				}
				&:not(.x){
					padding: 1.0em .5em 1.5em;
					-ms-writing-mode: tb-rl;
					writing-mode: vertical-rl;
				}
			}
		}
	}
}
*/
.is-drawer-open {
	.drawer-menu {
		z-index: 99999;
		position: fixed !important;
		top: calc((11 / 192) * 100vw) !important;
		right: 0 !important;
		left: auto !important;
		width: calc((462 / 1920) * 100vw);
		padding: 2vw;
		background: var(--noticeColor);
		text-align: left;
		color: var(--bodyBgColor);
		-webkit-border-top-left-radius: calc((2 / 192) * 100vw);
		-webkit-border-top-right-radius: 0;
		-webkit-border-bottom-right-radius: 0;
		-webkit-border-bottom-left-radius: calc((2 / 192) * 100vw);
		-moz-border-radius-topleft: calc((2 / 192) * 100vw);
		-moz-border-radius-topright: 0;
		-moz-border-radius-bottomright: 0;
		-moz-border-radius-bottomleft: calc((2 / 192) * 100vw);
		a {
			color: inherit;
			.simple-accordion-btn{
				&::before,
				&::after{
					background: var(--bodyBgColor);
				}
			}
		}

		> ul {
			line-height: 2;

			> li {
				> a {
					font-size: calc((16 / 1920) * 100vw);
					&::before {
						content: '\f138';
						padding-right: .5em;
						color: var(--noticeColorSub);
						font-size: calc((18 / 1920) * 100vw);
						font-weight: bold;
						font-family: 'Font Awesome 5 Free';
						line-height: 1;
						-webkit-font-smoothing: antialiased;
						-moz-osx-font-smoothing: grayscale;
					}
				}

				> ul {
					padding: 0.2em 0 1em 1em;

					> li {
						> a {
							font-size: calc((15 / 1920) * 100vw);
							&::before {
								content: '\f105';
								padding-right: .5em;
								color: #62c0b4;
								font-size: calc((16 / 1920) * 100vw);
								font-weight: bold;
								font-family: 'Font Awesome 5 Free';
								line-height: 1;
								-webkit-font-smoothing: antialiased;
								-moz-osx-font-smoothing: grayscale;
							}
						}
					}
				}
			}
		}
	}
}

.mini{
	.drawer-menu {
		top: calc((9 / 192) * 100vw) !important;
	}
}

/* header-btn */
.header-btn-group {
	margin-left: auto;
	.drawer-btn {
		cursor: pointer;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		width:  calc((11 / 192) * 100vw);
		height: calc((11 / 192) * 100vw);
		background: var(--textColorSub03);
		.drawer-btn-bar {
			margin: 0 0 0 calc((14 / 1920) * -100vw);
			width: calc((28 / 1920) * 100vw);
			height: calc((3 / 1920) * 100vw);
			background-color: var(--bodyBgColor);
			&:nth-child(1) {
				-webkit-transform: translateY(calc((1 / 192) * -100vw));
				transform: translateY(calc((1 / 192) * -100vw));
			}
			&:nth-child(3) {
				-webkit-transform: translateY(calc((1 / 192) * 100vw));
				transform: translateY(calc((1 / 192) * 100vw));
			}
		}
	}
}
.is-drawer-open{
	.drawer-btn {
		.drawer-btn-bar {
			&:nth-child(1) {
				-webkit-transform: translateY(0) rotate(45deg);
				transform: translateY(0) rotate(45deg);
			}
			&:nth-child(3) {
				-webkit-transform: translateY(0) rotate(-45deg);
				transform: translateY(0) rotate(-45deg);
			}
		}
	}
}
/* header
------------------------------------------*/
#header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 99999;
	.main{
		display: flex;
		justify-content: space-between;
		height: calc((11 / 192) * 100vw);
		.logo{
			a{
				display: block;
				width: calc((25 / 192) * 100vw);
				height: calc((188 / 1920) * 100vw);
				background: #fff;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-align: center;
				-webkit-border-top-left-radius: 0;
				-webkit-border-top-right-radius: 0;
				-webkit-border-bottom-right-radius: calc((5 / 192) * 100vw);
				-webkit-border-bottom-left-radius: 0;
				-moz-border-radius-topleft: 0;
				-moz-border-radius-topright: 0;
				-moz-border-radius-bottomright: calc((5 / 192) * 100vw);
				-moz-border-radius-bottomleft: 0;
				img{
					width: calc((15 / 192) * 100vw);
					border-radius: 0;
				}
			}
		}
		.hnav{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: calc((11 / 192) * 100vw);
			.contact{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				height: calc((11 / 192) * 100vw);
				.btns{
					display: flex;
					justify-content: flex-end;
					align-items: center;
					position: relative;
					>a{
						position: relative;
						display: block;
						width: calc((176 / 1920) * 100vw);
						height: calc((11 / 192) * 100vw);
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						text-align: center;
						color: var(--bodyBgColor);
						font-size: calc((2 / 192) * 100vw);
						font-weight: 700;
						i{
							font-size: calc((3 / 192) * 100vw);
						}
						&:first-child{
							background: var(--keyColor);
							-webkit-border-top-left-radius: 0;
							-webkit-border-top-right-radius: 0;
							-webkit-border-bottom-right-radius: 0;
							-webkit-border-bottom-left-radius: calc((2 / 192) * 100vw);
							-moz-border-radius-topleft: 0;
							-moz-border-radius-topright: 0;
							-moz-border-radius-bottomright: 0;
							-moz-border-radius-bottomleft: calc((2 / 192) * 100vw);
						}
						&:nth-child(2){
							background: var(--keyColorSub);
						}
						&:nth-child(3){
							background: var(--noticeColor);
							&:hover{
								opacity: 1;
							}
						}
					}
					.sub{
						position: absolute;
						top: calc((11 / 192) * 100vw);
						height: 0;
						opacity: 0;
						right: 0;
						width: calc((176 / 1920) * 100vw);
						background: var(--noticeColor);
						-webkit-transition-duration: .5s;
						-moz-transition-duration: .5s;
						-ms-transition-duration: .5s;
						-o-transition-duration: .5s;
						transition-duration: .5s;
						.once{
							a{
								display: block;
								padding: .5em 1em;
								color: var(--bodyBgColor);
								width: 100%;
								span{
									display: block;
									font-weight: 700;
									text-align: left;
									&.header{
										font-size: calc((14 / 1920) * 100vw);
									}
									&.tel{
										font-size: calc((16 / 1920) * 100vw);
									}
								}
							}
						}
						&.open{
							opacity: 1;
							height: auto;
						}
					}
				}
			}
		}
	}
	&.scrolled{
		background: rgba(255,255,255,.9);
		.main{
			height: calc((9 / 192) * 100vw);
			.logo{
				a{
					height: calc((9 / 192) * 100vw);
					-webkit-border-radius: 0;
					-moz-border-radius: 0;
					border-radius: 0;
					img{
						width: calc((10 / 192) * 100vw);
					}
				}
			}
			.hnav{
				height: calc((9 / 192) * 100vw);
				.contact{
					height: calc((11 / 192) * 100vw);
					.btns{
						>a{
							height: calc((9 / 192) * 100vw);
						}
						.sub{
							top: calc((9 / 192) * 100vw);
						}
					}
				}
				.header-btn-group {
					.drawer-btn {
						height: calc((9 / 192) * 100vw);
					}
				}
			}
		}
	}
}


/* mainimage
------------------------------------------*/
/* 横スライド
.slideshow .slick-list {overflow: visible;}
*/

#mainimage {
	position: relative;
	width: 100%;
	margin-top: -110px;
	padding: 65px calc((5 / 192) * 100vw) 0 calc((44 / 192) * 100vw);
	.main{
		width: 100%;
		margin: 0 auto;
		.slideshow {
			width: 100%;
			.slick-slide {
				position: relative;
				backface-visibility: hidden;
				img{
					width: 100%;
				}
			}
		}
	}
	.mv-text{
		position: absolute;
		bottom: calc((19 / 192) * 100vw);
		left: calc((18 / 192) * 100vw);
		text-align: left;
		font-weight: 700;
		.copy{
			font-size: calc((2 / 192) * 100vw);
			color: var(--textColorSub03);
			margin-bottom: .5em;
			padding-bottom: .5em;
			position: relative;
			display: inline-block;
			&::after{
				content: '';
				position: absolute;
				bottom: 0;
				right: 0;
				left: 0;
				border-bottom: var(--borderColor) 2px solid;
			}
		}
		h2{
			font-size: calc((5 / 192) * 100vw);
			>span{
				display: inline-block;
				padding: 0 .5em;
				background: var(--bodyBgColor);
				height: calc((84 / 1920) * 100vw);
				line-height: calc((84 / 1920) * 100vw);
				span{
					display: inline-block;
					color: var(--textColorSub);
					font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
					&.low{
						transform: translateY(40%);
					}
				}
			}
		}
	}
	&::before{
		content: '';
		position: absolute;
		bottom: calc((5 / 192) * -100vw);
		right: calc((20 / 192) * 100vw);
		width: calc((61 / 192) * 100vw);
		height: calc((278 / 1920) * 100vw);
		background: url(/images/base/mv-illust.png) no-repeat center center / cover;
		z-index: 99;
	}
	.mv-news{
		position: absolute;
		left: 0;
		bottom: calc((5 / 192) * -100vw);
		width: calc((915 / 1920) * 100vw);
		height: calc((10 / 192) * 100vw);
		background: var(--bgColor);
		padding: 0 calc((1 / 192) * 100vw) 0 calc((10 / 192) * 100vw);
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: left;
		h2{
			color: var(--textColorSub);
			font-size: calc((3 / 192) * 100vw);
			font-weight: 700;
			width: calc((15 / 192) * 100vw);
		}
		.main{
			width: calc(100% - ((25 / 192) * 100vw));
			margin: 0 auto 0 0;
			h3{
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
				.date{
					display: inline-block;
					padding: 0 1.0em;
					margin-right: 1.0em;
					font-size: calc((16 / 1920) * 100vw);
					color: var(--borderColor);
					border: var(--borderColor) 1px solid;
					-webkit-border-radius: calc((15 / 1920) * 100vw);
					-moz-border-radius: calc((15 / 1920) * 100vw);
					border-radius: calc((15 / 1920) * 100vw);
				}
				a{
					font-size: calc((16 / 1920) * 100vw);
					color: inherit;
				}
			}
		}
		.btns{
			width: calc((1 / 192) * 100vw);
			a{
				color: var(--textColorSub);
			}
		}
	}
}


/* content main
------------------------------------------*/
#content-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding-bottom: 60px;
}

/*ワンカラム*/
#main {
	max-width: 1280px;
	text-align: left;
}
.home #content-inner{
	padding: 0;
	max-width: 100%;
}
.home #main {
	max-width: 100%;
	text-align: center;
}
/*blogだけ２カラム*/

.template-type-blog #main {
	float: right;
	max-width: 800px;
}

/*banner*/
.main-banner{
	padding: 140px 0 0;
	.main{
		ul{
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 63px;
			li{
				a{
					display: block;
					width: 510px;
					height: 188px;
					-webkit-border-radius: 10px;
					-moz-border-radius: 10px;
					border-radius: 10px;
					overflow: hidden;
					display: flex;
					justify-content: space-between;
					align-items: center;
					span{
						display: block;
						&.texts{
							width: 312px;
							color: #fff;
							.en{
								font-size: 16px;
								font-weight: 500;
							}
							.ja{
								font-size: 24px;
								font-weight: 700;
								line-height: 1.2;
								margin-bottom: 1.0em;
							}
							.btns{
								position: relative;
								margin: 0 auto;
								width: 248px;
								height: 36px;
								line-height: 36px;
								background: #fff;
								-webkit-border-radius: 5px;
								-moz-border-radius: 5px;
								border-radius: 5px;
								color: var(--keyColorSub02);
								font-size: 18px;
								font-weight: 700;
								&::after{
									content: '\f30b';
									font-weight: bold;
									font-family: 'Font Awesome 5 Free';
									line-height: 1;
									-webkit-font-smoothing: antialiased;
									-moz-osx-font-smoothing: grayscale;
									position: absolute;
									top: 50%;
									transform: translateY(-50%);
									right: 14px;
									width: 22px;
									height: 22px;
									line-height: 22px;
									text-align: center;
									background: var(--keyColorSub02);
									-webkit-border-radius: 50%;
									-moz-border-radius: 50%;
									border-radius: 50%;
									color: var(--bodyBgColor);
									font-size: 12px;
								}
							}
						}
						&.image{
							width: 198px;
						}
					}
				}
				&:first-child{
					a{
						background: var(--keyColorSub02);
					}
				}
				&:last-child{
					a{
						background: var(--keyColor);
						span{
							&.texts{
								.btns{
									color: var(--keyColor);
									&::after{
										background: var(--keyColor);
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

.main-message-group{
	margin-bottom: 200px;
	padding-bottom: 150px;
	background: url(/images/base/bg01.png) no-repeat center bottom;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
	.main-message{
		margin: 0 auto;
		max-width: 1280px;
		h2{
			margin-bottom: 60px;
			text-align: left;
			font-size: 50px;
			font-weight: 700;
			color: var(--textColorSub);
			span{
				color: var(--textColor);
				display: inline-block;
				font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
				&.low{
					transform: translateY(40%);
				}
			}
			br:last-child{
				display: none;
			}
		}
		.main{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.text{
				text-align: left;
				font-size: 18px;
				font-weight: 500;
				line-height: 3.0;
				p:not(:last-child){
					margin-bottom: 3.0em;
				}
			}
			.image{
				margin-right: -120px;
				width: 714px;
			}
		}
	}
	.main-president{
		padding-bottom: 0;
		.main{
			background: rgba(255, 249, 182, 0.5);
			-webkit-border-radius: 25px;
			-moz-border-radius: 25px;
			border-radius: 25px;
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			align-items: center;
			-webkit-box-shadow: 0 0 4px 4px rgba(100,100,100,.05);
			-moz-box-shadow: 0 0 4px 4px rgba(100,100,100,.05);
			box-shadow: 0 0 4px 4px rgba(100,100,100,.05);
			.image{
				width: 628px;
			}
			.texts{
				width: 500px;
				text-align: left;
				h2{
					margin-bottom: .5em;
					font-size: 40px;
					font-weight: 700;
					color: var(--textColorSub);
					position: relative;
					&::before{
						content: '';
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						left: -40px;
						width: 22px;
						height: 33px;
						background: url(/images/base/angle02.png) no-repeat center center / cover;
					}
				}
				.text{
					font-size: 16px;
					font-weight: 500;
				}
			}
		}
	}
}

.main-about-group{
	position: relative;
	&::before{
		content: '';
		position: absolute;
		top: -160px;
		left: calc((47 / 1920) * 100vw);
		width: calc((747 / 1920) * 100vw);
		height: calc((31 / 192) * 100vw);
		background: url(/images/base/main-about-illust.png) no-repeat center center / cover;
	}
}
.main-about{
	padding: 200px 0 150px;
	.main{
		display: flex;
		justify-content: space-between;
		.texts{
			width: 700px;
			text-align: left;
			h2{
				position: relative;
				.ja,.en{
					position: relative;
					z-index: 10;
				}
				.en{
					padding-left: 1.0em;
					&::before{
						top: 50%;
						left: 0;
						transform: translate(0,-50%);
					}
				}
				&::after{
					content: '';
					position: absolute;
					top: -10px;
					right: 100px;
					bottom: -10px;
					left: calc((50vw - 640px) * -1);
					background: linear-gradient(to right, rgba(181, 225, 231, 1) 0%, rgba(181, 225, 231, 0) 100%);
				}
			}
			.text{
				margin-bottom: 4.0em;
				font-weight: 500;
			}
		}
		.images{
			position: relative;
			margin: -215px calc((50vw - 640px) * -1) 0 0;
			width: calc((50vw - 640px) + 415px);
			aspect-ratio: 735 / 690;
			div{
				position: absolute;
				&:nth-child(1){
					top: 0;
					left: 0;
					width: calc((386 / 1920) * 100vw);
				}
				&:nth-child(2){
					bottom: 0;
					right: calc((17 / 192) * 100vw);
					width: calc((295 / 1920) * 100vw);
				}
				&:nth-child(3){
					top: 100px;
					right: 0;
					width: calc((333 / 1920) * 100vw);
				}
			}
		}
	}
}

.main-recruit{
	padding: 85px 0;
	margin: 0 auto 168px;
	max-width: 1280px;
	height: 350px;
	position: relative;
	background: var(--keyColorSub03);
	-webkit-box-shadow: 0 0 10px 10px rgba(70,204,234,.1);
	-moz-box-shadow: 0 0 10px 10px rgba(70,204,234,.1);
	box-shadow: 0 0 10px 10px rgba(70,204,234,.1);
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -ms-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
	.images{
		div{
			position: absolute;
			bottom: 0;
			&:first-child{
				left: -188px;
			}
			&:last-child{
				right: -197px;
			}
		}
	}
	.texts{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		h2{
			color: var(--bodyBgColor);
			font-size: 30px;
			font-weight: 500;
			position: relative;
			display: inline-block;
			margin-bottom: .5em;
			br{
				display: none;
			}
			&::before,
			&::after{
				content: '';
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				width: 16px;
				height: 30px;
				background: url(/images/base/wedge-w.png) no-repeat center center / cover;
			}
			&::before{
				left: -25px;
			}
			&::after{
				right: -25px;
				transform: scale(-1, 1) translateY(-50%);
			}
		}
		.btns{
			a{
				position: relative;
				display: block;
				margin: 0 auto;
				padding-right: 1.0em;
				width: 530px;
				height: 117px;
				line-height: 117px;
				background: var(--bgColor);
				color: var(--textColor);
				font-size: 40px;
				font-weight: 700;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
				i{
					margin-right: .5em;
					color: var(--keyColor);
				}
				&:hover{
					opacity: 1;
				}
				&::after {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    right: 15px;
                    content: '\f30b';
                    font-weight: bold;
                    font-family: 'Font Awesome 5 Free';
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                    width: 34px;
                    height: 34px;
                    line-height: 34px;
                    text-align: center;
                    background: var(--keyColor);
                    -webkit-border-radius: 50%;
                    -moz-border-radius: 50%;
                    border-radius: 50%;
                    color: var(--bodyBgColor);
                    font-size: 18px;
                }
			}
		}
	}
	&:hover{
		background: var(--bodyBgColor);
		cursor: pointer;
		.texts{
			h2{
				color: var(--keyColor);
				&::before,
				&::after{
					background-image: url(/images/base/wedge-b.png);
				}
			}
			.btns{
				a{
                    color: var(--bodyBgColor);
                    background: var(--keyColor);
					i{
						color: var(--bodyBgColor);
					}
					&::after{
                    color: var(--keyColor);
                    background: var(--bodyBgColor);
					}
				}
			}
		}
	}
}

.main-services{
	position: relative;
	padding: 150px 0;
	background: var(--bodyBgColor);
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
	border-radius: 200px;
	-webkit-box-shadow: 0 200px 100px 100px rgba(70,204,234,.2);
	-moz-box-shadow: 0 200px 100px 100px rgba(70,204,234,.2);
	box-shadow: 0 200px 100px 100px rgba(70,204,234,.2);
	h2{
		margin-bottom: 100px;
	}
	.main{
		>ul{
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 40px;
			>li{
				position: relative;
				padding: 85px 35px;
				-webkit-box-shadow: 0 0 10px 10px rgba(70,204,234,.2);
				-moz-box-shadow: 0 0 10px 10px rgba(70,204,234,.2);
				box-shadow: 0 0 10px 10px rgba(70,204,234,.2);
				-webkit-border-radius: 15px;
				-moz-border-radius: 15px;
				border-radius: 15px;
				h3{
					position: absolute;
					top: -68px;
					left: 50%;
					transform: translateX(-50%);
					width: 355px;
					height: 137px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					text-align: center;
					background: url(/images/base/balloon01.png) no-repeat center center / cover;
					a{
						color: var(--bodyBgColor);
						font-size: 30px;
						font-weight: 700;
						line-height: 1.3;
						padding-bottom: 1.0em;
						span{
							display: block;
							color: #FFE0A2;
							font-size: 20px;
							font-weight: 500;
							strong{
								font-size: 28px;
								font-weight: 500;
							}
						}
					}
				}
				.image{
					margin-bottom: 25px;
				}
				.text{
					font-size: 16px;
					text-align: left;
					margin-bottom: 1.0em;
				}
				.links{
					ul{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						gap: 10px 20px;
						flex-wrap: wrap;
						li{
							a{
								display: block;
								height: 32px;
								line-height: 28px;
								border: var(--textColorSub) 2px solid;
								padding: 0 1.0em;
								font-size: 16px;
								font-weight: 500;
								-webkit-border-radius: 16px;
								-moz-border-radius: 16px;
								border-radius: 16px;
								-webkit-transition-duration: .3s;
								-moz-transition-duration: .3s;
								-ms-transition-duration: .3s;
								-o-transition-duration: .3s;
								transition-duration: .3s;
								&:hover{
									background: var(--textColorSub);
									color: var(--bodyBgColor);
									opacity: 1;
								}
							}
						}
					}
				}
				.link{
					position: absolute;
					bottom: 36px;
					right: 30px;
					a{
						display: block;
						width: 44px;
						height: 44px;
						line-height: 44px;
						text-align: center;
						background: var(--keyColorSub);
						-webkit-border-radius: 50%;
						-moz-border-radius: 50%;
						border-radius: 50%;
						color: var(--bodyBgColor);
						font-size: 20px;
						-webkit-transition-duration: .3s;
						-moz-transition-duration: .3s;
						-ms-transition-duration: .3s;
						-o-transition-duration: .3s;
						transition-duration: .3s;
						&:hover{
							opacity: 1;
							width: 50px;
							height: 50px;
							line-height: 50px;
							font-size: 25px;
						}
					}
				}
			}
		}
	}
	&::before{
		content: '';
		position: absolute;
		top: -40px;
		right: calc((278 / 1920) * 100vw);
		width: calc((359 / 1920) * 100vw);
		height: calc((24 / 192) * 100vw);
		background: url(/images/base/main-services-illust.png) no-repeat center center / cover;
	}
}

.main-strengths-wrapper {
	.main-strengths {
		padding-top: 200px;
		margin: 0 auto;
		max-width: 1280px;
		display: flex;
		justify-content: space-between;
		align-items: flex-start; /* ★超重要：.header の高さが伸ばされるのを防ぎ、動くスキマを作る */
		position: relative;     /* ★追加：stickyの計算基準となる範囲を明示 */

		.header {
			text-align: left;
			position: -webkit-sticky; /* iOS/Safari対策 */
			position: sticky;        /* ★固定指定 */
			top: 100px;              /* ★画面上部から固定する位置（ヘッダーの高さ等に合わせて調整） */
			height: auto;            /* ★高さが引き伸ばされないように指定 */

			h2{
				position: relative;
				.ja,.en{
					position: relative;
					z-index: 10;
				}
				.en{
					padding-left: 1.0em;
					&::before{
						top: 50%;
						left: 0;
						transform: translate(0,-50%);
					}
				}
				&::after{
					content: '';
					position: absolute;
					top: -10px;
					right: 100px;
					bottom: -10px;
					left: calc((50vw - 640px) * -1);
					background: linear-gradient(to right, rgba(181, 225, 231, 1) 0%, rgba(181, 225, 231, 0) 100%);
				}
			}
		}

		.main {
			margin: 0;
			max-width: 744px;
			
			ul {
				display: grid;
				grid-template-columns: repeat(1, 1fr);
				gap: 80px;
				li {
					.image {
						margin-bottom: 35px;
						position: relative;
						.count{
							position: absolute;
							top: -.1em;
							left: .3em;
							font-size: 80px;
							font-weight: 500;
							color: var(--bodyBgColor);
							text-shadow: 10px 0 10px rgba(20,150,199,.02), 9.81px 1.95px 10px rgba(20,150,199,.02), 9.24px 3.83px 10px rgba(20,150,199,.02), 8.31px 5.56px 10px rgba(20,150,199,.02), 7.07px 7.07px 10px rgba(20,150,199,.02), 5.56px 8.31px 10px rgba(20,150,199,.02), 3.83px 9.24px 10px rgba(20,150,199,.02), 1.95px 9.81px 10px rgba(20,150,199,.02), 0 10px 10px rgba(20,150,199,.02), -1.95px 9.81px 10px rgba(20,150,199,.02), -3.83px 9.24px 10px rgba(20,150,199,.02), -5.56px 8.31px 10px rgba(20,150,199,.02), -7.07px 7.07px 10px rgba(20,150,199,.02), -8.31px 5.56px 10px rgba(20,150,199,.02), -9.24px 3.83px 10px rgba(20,150,199,.02), -9.81px 1.95px 10px rgba(20,150,199,.02), -10px 0 10px rgba(20,150,199,.02), -9.81px -1.95px 10px rgba(20,150,199,.02), -9.24px -3.83px 10px rgba(20,150,199,.02), -8.31px -5.56px 10px rgba(20,150,199,.02), -7.07px -7.07px 10px rgba(20,150,199,.02), -5.56px -8.31px 10px rgba(20,150,199,.02), -3.83px -9.24px 10px rgba(20,150,199,.02), -1.95px -9.81px 10px rgba(20,150,199,.02), 0 -10px 10px rgba(20,150,199,.02), 1.95px -9.81px 10px rgba(20,150,199,.02), 3.83px -9.24px 10px rgba(20,150,199,.02), 5.56px -8.31px 10px rgba(20,150,199,.02), 7.07px -7.07px 10px rgba(20,150,199,.02), 8.31px -5.56px 10px rgba(20,150,199,.02), 9.24px -3.83px 10px rgba(20,150,199,.02), 9.81px -1.95px 10px rgba(20,150,199,.02);
						}
					}
					.texts {
						text-align: left;
						h3 {
							line-height: 1.3;
							color: var(--textColorSub);
							font-size: 40px;
							font-weight: 700;
							margin-bottom: .5em;
						}
						.text {
							font-weight: 500;
						}
					}
				}
			}
		}
	}
}

.main-voice {
	background: var(--bgColor);
	max-width: 1500px;
	margin: 0 auto;
	.main{
		ul{
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 215px;
			li{				
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				.texts{
					width: 338px;
					height: 388px;
					padding: 30px 30px 30px 46px;
					text-align: left;
					background: url(/images/base/balloon02.png) no-repeat center center / cover;
					h3{
						font-size: 20px;
						line-height: 1.3;
						color: var(--textColorSub02);
						font-weight: 700;
						margin-bottom: .5em;
					}
					.text{
						font-size: 16px;
						font-weight: 500;
						color: var(--bodyBgColor);
						line-height: 1.8;
					}
				}
			}
		}
		.btns{
			text-align: right;
			margin-top: 60px;
		}
	}
}

.main-banner02{
	ul{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: calc((8 / 1920) * 100vw);
		li{
			a{
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: var(--keyColorSub03);
				-webkit-transition-duration: .3s;
				-moz-transition-duration: .3s;
				-ms-transition-duration: .3s;
				-o-transition-duration: .3s;
				transition-duration: .3s;
				span{
					display: block;
					&.image{
						width: 48%;
						aspect-ratio: 1 / 1;
						overflow: hidden;
						img{
							-webkit-transition-duration: .5s;
							-moz-transition-duration: .5s;
							-ms-transition-duration: .5s;
							-o-transition-duration: .5s;
							transition-duration: .5s;
						}
					}
					&.text{
						width: 52%;
						color: var(--bodyBgColor);
						font-size: calc((4 / 192) * 100vw);
						font-weight: 700;
						line-height: 1.3;
						position: relative;
						&::before,
						&::after{
							content: '';
							position: absolute;
							left: 50%;
							width: calc((33 / 1920) * 100vw);
							height: calc((22 / 1920) * 100vw);
							background: url(/images/base/angle.png) no-repeat center center / cover;
						}
						&::before{
							top: -1.5em;
							transform: translateX(-50%);
						}
						&::after{
							bottom: -1.5em;
							transform: scale(1, -1) translateX(-50%);
						}
					}
				}
				&:hover{
					background: var(--noticeColor);
					opacity: 1;
					span{
						&.image{
							img{
								transform: scale(1.1);
							}
						}
					}
				}
			}
		}
	}
}
.main-column {
	margin-bottom: -200px;
	padding-bottom: 320px;
	.main{
		ul{
			margin-bottom: 30px;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 50px;
			li{
				width: 326px;
				.image{
					margin-bottom: 25px;
					aspect-ratio: 326 / 250;
					overflow: hidden;
					img{
						-webkit-transition-duration: 1s;
						-moz-transition-duration: 1s;
						-ms-transition-duration: 1s;
						-o-transition-duration: 1s;
						transition-duration: 1s;
						&:hover{
							transform: scale(1.2);
						}
					}
				}
				h3{
					text-align: left;
					.date{
						display: inline-block;
						height: 32px;
						line-height: 28px;
						color: var(--textColorSub);
						border: var(--textColorSub) 2px solid;
						padding: 0 1.0em;
						font-size: 16px;
						font-weight: 500;
						-webkit-border-radius: 16px;
						-moz-border-radius: 16px;
						border-radius: 16px;
					}
					a{
						margin-top: .5em;
						color: var(--textColor);
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						overflow: hidden;
						font-weight: 500;
					}
				}
			}
		}
		.btns{
			text-align: right;
			padding-right: 100px;
			a{
			}
		}
	}
}

/* content sidebar
------------------------------------------*/
/*blogだけ２カラム*/
#sidebar {
	display: none;
}
.template-type-blog #sidebar {
	display: block;
	float: left;
	max-width: 240px;
	text-align: left;
}


/* footer
------------------------------------------*/
#footer {
	background: var(--bodyBgColor);
	padding: 150px 0;
	-webkit-border-top-left-radius: 200px;
	-webkit-border-top-right-radius: 200px;
	-webkit-border-bottom-right-radius: 0;
	-webkit-border-bottom-left-radius: 0;
	-moz-border-radius-topleft: 200px;
	-moz-border-radius-topright: 200px;
	-moz-border-radius-bottomright: 0;
	-moz-border-radius-bottomleft: 0;
	-webkit-box-shadow: 0 -100px 100px 100px rgba(70, 204, 234, .2);
    -moz-box-shadow: 0 -100px 100px 100px rgba(70,204,234,.2);
    box-shadow: 0 -100px 100px 100px rgba(70, 204, 234, .2);
	.main{
		margin: 0 auto 100px;
		max-width: 1280px;
		display: flex;
		justify-content: space-between;
		.info{
			text-align: left;
			.logo{
				margin-bottom: 40px;
				width: 150px;
				img{
					border-radius: 0;
				}
			}
			.add{
				font-size: 20px;
				font-weight: 700;
			}
			>.tel{
				margin-bottom: 20px;
				.once{
					a{
						color: inherit;
						span{
							display: block;
							&.header{
								font-size: 20px;
								font-weight: 700;
							}
							&.number{
								font-size: 26px;
								&::before{
									content: '\f879';
									padding-right: .3em;
									font-weight: bold;
									font-family: 'Font Awesome 5 Free';
									line-height: 1;
									-webkit-font-smoothing: antialiased;
									-moz-osx-font-smoothing: grayscale;
									font-size: 23px;
								}
							}
						}
					}
				}
			}
			.hours{
				margin-bottom: 30px;
				font-size: 16px;
				font-weight: 500;
				span{
					display: inline-block;
					border: var(--textColor) 1px solid;
					padding: 0 .2em;
					margin-right: .3em;
				}
			}
			.sns{
				ul{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					gap: 24px;
					li{
						a{
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							text-align: center;
							width: 44px;
							height: 44px;
							color: var(--bodyBgColor);
							-webkit-border-radius: 10px;
							-moz-border-radius: 10px;
							border-radius: 10px;
						}
						&:first-child{
							a{
								background: var(--instaColor);
								font-size: 35px;
							}
						}
						&:last-child{
							a{
								background: var(--instaColor);
								font-size: 25px;
							}
						}
					}
				}
			}
		}
		.nav-group{
			.fnav{
				margin-bottom: 50px;
				display: flex;
				justify-content: flex-end;
				gap: 40px;
				.once{
					text-align: left;
					ul{
						li{
							font-size: 20px;
							font-weight: 700;
							a{
								color: inherit;
							}
							ul{
								padding-top: .5em;
								li{
									font-size: 16px;
									font-weight: 500;
									&::before{
										content: '●';
										color: var(--textColorSub);
										font-size: 9px;
										margin-right: .5em;
										display: inline-block;
										transform: translateY(-15%);
									}
								}
							}
						}
					}
					&:nth-child(3),
					&:nth-child(4){
						ul{
							line-height: 2.5;
						}
					}
				}
			}
			.banner{
				ul{
					display: flex;
					justify-content: flex-end;
					gap: 3vw;
					li{
						a{
							display: block;
							width: 290px;
							height: 76px;
							line-height: 76px;
							padding: 0 20px;
							color: var(--bodyBgColor);
							font-size: 24px;
							font-weight: 700;
							text-align: left;
							-webkit-border-radius: 5px;
							-moz-border-radius: 5px;
							border-radius: 5px;
							position: relative;
							i{
								margin-right: .5em;
							}
							&::after{
								content: '\f30b';
								font-weight: bold;
								font-family: 'Font Awesome 5 Free';
								line-height: 1;
								-webkit-font-smoothing: antialiased;
								-moz-osx-font-smoothing: grayscale;
								position: absolute;
								top: 50%;
								transform: translateY(-50%);
								right: 20px;
								width: 34px;
								height: 34px;
								line-height: 34px;
								text-align: center;
								background: var(--bodyBgColor);
								-webkit-border-radius: 50%;
								-moz-border-radius: 50%;
								border-radius: 50%;
								color: var(--keyColorSub);
								font-size: 20px;
							}
						}
						&:first-child{
							a{
								background: var(--keyColor);
								&::after{
									color: var(--keyColor);
								}
							}
						}
						&:last-child{
							a{
								background: var(--noticeColor);
							}
						}
					}
				}
			}
		}
	}
	.copyright{
		margin: 0 auto;
		padding-top: 20px;
		max-width: 1280px;
		font-size: 13px;
		font-weight: 500;
		border-top: var(--textColor) 1px solid;
	}
}

.pagetop-btn-wrap {
	display: none;
	position: fixed;
	bottom: 70px;
	right: 30px;
	z-index: 9999;
	.pagetop-btn{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		width: 40px;
		height: 40px;
		color: var(--bodyBgColor);
		background: var(--keyColor);
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
	}
}



/* Lower
------------------------------------------*/
.entry {
	margin: 0 0 20px;
}
.entry-content {}


/* heading */
.page-title-area{
	.main{
		margin: 0 auto;
		max-width: 1280px;
		position: relative;
		.page-title {
			padding: 160px 0 100px;
			display: flex;
			justify-content: space-between;
			span{
				display: block;
				&.title{
					text-align: left;
					.en{
						padding-left: 1.0em;
						position: relative;
						font-size: 20px;
						font-weight: 500;
						color: var(--keyColor);
						text-transform: uppercase;
						&::before{
							content: '●';
							position: absolute;
							top: 50%;
							left: 0;
							transform: translate(0, -50%);
							font-size: 10px;
						}
					}
					.ja{
						font-size: 58px;
						font-weight: 700;
					}
					.bread-area{
						span{
							display: inline-block;
						}
					}
				}
				&.description{
					width: 600px;
					text-align: left;
					font-size: 18px;
					font-weight: 500;
				}
			}
		}
	}
}
.entry-title, .entry-content h2:not([class]) {
	margin-bottom: 30px;
    color: var(--textColorSub);
	font-size: 50px;
	font-weight: 700;
	font-family: "FOT-筑紫A丸ゴシック Std B";
}
.entry-title a, .entry-content h2:not([class]) a {
	color: inherit;
}
.h3, .entry-content h3:not([class]) {
	position: relative;
	margin-bottom: 30px;
	padding-left: .8em;
    color: var(--textColorSub);
	font-size: 40px;
	font-weight: 700;
	font-family: "FOT-筑紫A丸ゴシック Std B";
	&::before{
		content: '●';
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(0, -50%);
		font-size: 20px;
	}
}
.h4, .entry-content h4:not([class]) {
	position: relative;
	margin-bottom: 25px;
	padding: 5px 30px;
	color: var(--textColorSub);
	font-size: 24px;
	font-weight: 700;
	font-family: "FOT-筑紫A丸ゴシック Std B";
	&::before{
		content: '';
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
		width: 10px;
		height: 35px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		background: var(--textColorSub);
	}
}
.h5, .entry-content h5:not([class]) {
	margin-bottom: 25px;
	padding: 5px 0;
	color: var(--textColorSub);
	font-size: 20px;
	font-weight: 700;
	font-family: "FOT-筑紫A丸ゴシック Std B";
}


/* Breadcrumb
------------------------------------------*/
.breadcrumb-wrap {}
.breadcrumb {
	justify-content: flex-start;
	margin: 0;
	padding: 0;
	background: none;
	font-size: 12px;
}
.breadcrumb-item + .breadcrumb-item:before {
	content: '>';
	color: inherit;
}
.breadcrumb-item.home:before {
	content: '\f015';
	padding: 0 5px 0 0;
	font-size: 11px;
	font-weight: bold;
	font-family: 'Font Awesome 5 Free';
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}




/* common-nav
------------------------------------------*/
.common-nav-list li {
	display: block;
	padding: 5px;
	border-bottom: 1px dashed rgba(186,186,186,0.5);
}
.common-nav-list li a {
	padding: 5px;
	font-size: 13px;
}

/* blog-nav
------------------------------------------*/
/* 1カラム
.blog-nav-group {
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
}
.blog-nav {width: 23%;}
.blog-nav-title{text-align: center;}
*/

.blog-nav {
	margin: 0 0 20px 0;
	text-align: left;
}
.blog-nav-title {
	padding-bottom: 5px;
	border-bottom: 1px solid rgba(186,186,186,0.5);
	font-size: 15px;
	font-weight: bold;
}
.blog-nav-list li a {
	position: relative;
	display: block;
	padding: 0.8rem 0.8rem 0.8rem 2.5rem;
	border-bottom: 1px solid rgba(186,186,186,0.5);
	font-size: 0.8rem;
	color: inherit;
}
.blog-nav-list li a::after {
	position: absolute;
	top: 1rem;
	left: 0.75rem;
	width: 1rem;
	height: 1rem;
	text-align: center;
	content: '\f105';
	font-size: 12px;
	font-weight: bold;
	font-family: 'Font Awesome 5 Free';
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.blog-nav-list li li a {
	padding-left: 3.5rem;
}
.blog-nav-list li li a::after {
	left: 2.25rem;
}
.blog-nav-list li li li a {
	padding-left: 4rem;
}

.blog-nav .scroll-area{
	max-height: 200px;
}


/* Gallery
------------------------------------------*/
/* archive */
.gallery-list {
}
.gallery-list-item {
	padding: 0 15px 15px;
}
.gallery-list-img {
	margin-bottom: 3px;
}
.gallery-list-title {
	font-size: 13px;
}
.gallery-list-more {
	text-align: right;
}

/* single */
.gallery-detail {
	margin-bottom: 20px;
	text-align: center;
}
.gallery-detail-row {
}
.gallery-detail-col {
}
.gallery-detail-main {
}
.gallery-detail-sub {
}
.gallery-detail-sub li {
	padding: 0 5px 10px;
}

/* before-after */
.ba-detail {
	padding: 0 0px 20px;
}
.ba-detail-once {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
}
.ba-detail-before,
.ba-detail-after {
	position: relative;
	width: 45%;
}
.ba-detail-arrow {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 10%;
}
.ba-detail-arrow i {
	font-size: 30px;
}
.ba-detail-sub li {
	padding: 0 15px 15px;
}


/* Colors
------------------------------------------*/
/* arrows */
.slick-next::before,
.slick-prev::before {
	color: #fff;
}

/* dots */
.slick-dots li button::before {
	color: #ccc;
}
.slick-dots li button:hover::before,
.slick-dots li button:focus::before,
.slick-dots li.slick-active button::before {
	color: #666;
}

/* SimpleBar */
.scroll-area{
	overflow: auto;
}
.simplebar-track.simplebar-vertical{
	width: 11px;
}
.simplebar-track.simplebar-horizontal {
	height: 11px;
}
.scroll-area .simplebar-scrollbar::before {
	background: #aaa;
}

/* btns */
.btn-primary.disabled:hover,
.btn-primary:disabled:hover,
.btn-primary.active:focus,
.btn-primary:active:focus,
.btn-primary.active:hover,
.btn-primary:active:hover,
.btn-primary.active,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover,
.btn-primary {
	border-color: var(--keyColor);
	background-color: var(--keyColor);
	color: #fff;
}

.btn-secondary.disabled:hover,
.btn-secondary:disabled:hover,
.btn-secondary.active:focus,
.btn-secondary:active:focus,
.btn-secondary.active:hover,
.btn-secondary:active:hover,
.btn-secondary.active,
.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:hover,
.btn-secondary {
	border-color: #ccc;
	background-color: #fff;
	color: #333;
}

.btn-outline-primary.disabled:hover,
.btn-outline-primary:disabled:hover,
.btn-outline-primary.active:focus,
.btn-outline-primary:active:focus,
.btn-outline-primary.active:hover,
.btn-outline-primary:active:hover,
.btn-outline-primary.active,
.btn-outline-primary:active,
.btn-outline-primary:focus,
.btn-outline-primary:hover,
.btn-outline-primary {
	border-color: var(--keyColor);
	background-color: #fff;
	color: var(--keyColor);
}

/* pagination */
.page-link {
	border-color: #9e9e9e;
	color: #333;
}
.page-item.active .page-link,
.page-item.active .page-link:focus,
.page-item.active .page-link:hover,
.page-link:focus,
.page-link:hover {
	border-color: #999999;
	background-color: #9e9e9e;
	color: #fff;
}