@charset "utf-8";

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

/* Typography
------------------------------------------*/
html {
	background: var(--bodyBgColor);
	font-size: 15px;
}
body {
	line-height: 1.8;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	color: var(--textColor);
}
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;
}
*/

.ja{
	font-family: "Zen Kaku Gothic New", sans-serif;
}
.en{
	font-family: "Roboto", sans-serif;
}
.jam{
	font-family: "Zen Maru Gothic", sans-serif;
}
.jas{
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.ens{
	font-family: "Merriweather", serif;
}

.tab-parts{
	display: none;
}

/* Layout
------------------------------------------*/
body {
	min-width: 1080px;
	text-align: center;
}
body.home {
	word-break: break-all;
}
#container {
	overflow: hidden;
	padding: 0 136px 0 280px;
    position: relative;
}
@media (max-width: 1600px) {
    #container {
        padding: 0 6vw 0 16vw;
    }
}

.grecaptcha-badge{
	display: none;
}
.loading {
    width: 100vw;
    height: 100vh;
    background: #FFF;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
	img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}
/* general
------------------------------------------*/
a{
	text-decoration: none;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	&:hover{
		text-decoration: none;
	}
	&:not(.no-fade){
		&:hover{
			opacity: .7;
			text-decoration: none;
		}
	}
}

.common{
	padding: 50px 0;
	h2{
		margin-bottom: 40px;
		line-height: 1.3;
		span{
			display: block;
			&.ja{
				font-size: 40px;
				font-weight: 700;
				color: var(--keyColor);
			}
			&.en{
				font-size: 16px;
				font-weight: 600;
				color: var(--keyColorSub);
				text-transform: uppercase;
			}
		}
	}
	.main{
		margin: 0 auto;
		max-width: 1080px;
		.btns{
			a{
				margin: 20px auto 0;
				padding: 0 2.0em;
				position: relative;
				display: inline-block;
				font-size: 17px;
				font-weight: 600;
				color: var(--bodyBgColor);
				background: var(--keyColor);
				min-width: 200px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				-webkit-border-radius: 20px;
				-moz-border-radius: 20px;
				border-radius: 20px;
				&::before{
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: 15px;
					content: '\f105';
					font-weight: bold;
					font-family: 'Font Awesome 5 Free';
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
				}
			}
		}
	}
}
/* header
------------------------------------------*/
#header {
	position: fixed;
	bottom: 0;
    top: 0;
    left: 0;
    width: 280px;
    padding: 32px;
    text-align: center;
    z-index: 2;
	background: var(--bodyBgColor);
	.main{
		.site-description{
			font-size: 12px;
			color: var(--textColorSub);
			margin-bottom: 50px;
		}
		.logo{
			margin: 0 auto 72px;
			max-width: 120px;
		}
		.gnav{
			ul{
				li{
					a{
						color: inherit;
						font-size: 15px;
						font-weight: 500;
						line-height: 1;
						display: block;
					}
					&:not(:last-child){
						margin-bottom: calc((32 / 1920) * 100vw);
					}
				}
			}
		}
	}
}
@media (max-width: 1600px) {
    #header {
        width: 16vw;
    }
}

/* fixed
------------------------------------------*/
.fixed-btn{
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	z-index: 9999;
	a{
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		color: var(--bodyBgColor);
		font-size: calc((20 / 1920) * 100vw);
		padding-top: 1.0em;
		width: calc((68 / 1920) * 100vw);
		height: calc((180 / 1920) * 100vw);
		background: url(/images/base/common-bg.png) repeat center center;
		&::before{
			position: absolute;
			top: calc((25 / 1920) * 100vw);
			left: 50%;
			transform: translateX(-50%);
			content: "";
			margin-bottom: 8px;
			display: inline-block;
			width: calc((2 / 192) * 100vw);
			height: calc((2 / 192) * 100vw);
			background: url(/images/base/search.png) no-repeat center center / cover;
		}
	}
}




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

#mainimage {
	position: relative;
	margin-bottom: 160px;
	width: 100%;
	.main{
		width: 100%;
		height: 100%;
		margin: 0 auto;
		.slideshow {
			width: 100%;
			.slick-list{
				overflow: visible;
				.slick-slide {
					position: relative;
					backface-visibility: hidden;
					aspect-ratio: 1158 / 630;
					.mv-catch{
						position: absolute;
						top: 10vh;
						left: 50%;
						transform: translateX(-180%);
						text-align: left;
						-ms-writing-mode: tb-rl;
						writing-mode: vertical-rl;
						color: var(--bodyBgColor);
						h2{
							margin-left: 1em;
							font-size: 1.8vw;
							line-height: 1.3;
							letter-spacing: .1em;
							strong{
								font-size: calc((57 / 1920) * 100vw);
							}
							span{
								display: block;
								margin-top: 2.4em;
							}
						}
						.copy{
							margin-top: 6.4em;
							letter-spacing: .2em;
							white-space: nowrap;
						}
					}
					&:nth-child(4n){
						.mv-catch{
							transform: translateX(-220%);
						}
					}
					.mv-model{
						position: absolute;
						bottom: -70px;
						left: 50%;
						transform: translateX(-50%);
						width: 31vw;
						max-width: 580px;
					}
					.mv-link{
						position: absolute;
						right: -24px;
						bottom: -20px;
						a{
							padding: 16px 48px 16px 32px;
							font-size: 19px;
							line-height: 1;
							color: #fff;
							display: block;
							&::before{
								content: "";
								display: block;
								width: 8px;
								height: 15px;
								background: url(/images/base/arrow.png) no-repeat center center / cover;
								position: absolute;
								right: 12px;
								top: 50%;
								transform: translateY(-50%);
							}
						}
					}
					&>img{
						height: 100%;
						width: auto !important;
						position: absolute;
						top: 0;
						right: 0;
					}
				}
			}
			.slick-dotted {
				margin-bottom: 135px;
				.slick-dots {
					bottom: -100px;
					li{
						margin: 0 5px;
						button{
							width: 12px;
							height: 12px;
							padding: 0;
							&::before {
								content: '';
								width: 12px;
								height: 12px;
								background: var(--borderColor);
							}
							&:hover,
							&:focus{
								&::before {
									background: var(--keyColor);
								}
							}
						}
						&.slick-active{
							button{
								&::before {
									background: var(--keyColor);
								}
							}
						}
					}
				}
			}
		}
	}
	.mv-news{
		position: absolute;
		bottom: -60px;
		left: 0;
		text-align: left;
		width: 30%;
		h3{
			font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
			font-size: 13px;
			.date{
				display: block;
				color: #314d7b;
				font-weight: bold;
			}
			a{
				color: inherit;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
		}
	}
}
@media(max-width: 1600px){
	#mainimage {
		.main{
			.slideshow {
				.slick-list{
					.slick-slide {
						aspect-ratio: 1158 / 774;
					}
				}
			}
		}
	}
}


/* content main
------------------------------------------*/
#content-inner {
	max-width: 100%;
	margin: 0 auto;
	padding-bottom: 60px;
}
#main {
	max-width: 100%;
	text-align: left;
}
.home #content-inner{
	padding: 0;
}
.home #main {
	text-align: center;
}

/*banner*/
.main-banner{
	margin-bottom: 20px;
	ul{
		margin-bottom: 48px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 48px 0;
		li{
			width: 49%;
			position: relative;
			.image{
				a{
					display: block;
					overflow: hidden;
					img{
						-webkit-transition-duration: .3s;
						-moz-transition-duration: .3s;
						-ms-transition-duration: .3s;
						-o-transition-duration: .3s;
						transition-duration: .3s;
						&:hover{
							transform: scale(1.05);
							opacity: .8;
						}
					}
				}
			}
			h3{
				a{
					position: absolute;
					top: calc((24 / 1920) * -100vw);
					right: calc((24 / 1920) * 100vw);
					padding: 1.0em 0;
					width: calc((7 / 192) * 100vw);
					font-size: calc((24 / 1920) * 100vw);
					color: var(--bodyBgColor);
					z-index: 10;
					-ms-writing-mode: tb-rl;
					writing-mode: vertical-rl;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					text-align: center;
					background: url(/images/base/common-bg.png) no-repeat center center / cover;
				}
			}
		}
	}
	.btns{
		a{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			font-size: 19px;
			width: 320px;
			height: 67px;
			line-height: 67px;
			position: relative;
			color: var(--bodyBgColor);
			background: url(/images/base/common-bg.png) no-repeat center center / cover;
			z-index: 2;
			margin: 0 auto;
			&::before {
				content: "";
				display: block;
				width: 8px;
				height: 15px;
				background: url(/images/base/arrow.png) no-repeat center center / cover;
				position: absolute;
				right: 12px;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}
}


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


/* footer
------------------------------------------*/
#footer {
	padding: 80px 0;
	.main{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		.info{
			text-align: left;
			.logo{
				width: 250px;
				margin-bottom: 16px;
			}
			.add{
				color: var(--textColorSub);
				font-size: 13px;
			}
			.tel{
				font-size: 15px;
				a{
					color: var(--textColorSub);
					margin-left: .3em;
				}
			}
		}
		.guide{
			text-align: right;
			color: var(--textColorSub);
			font-size: 13px;
			.fnav{
				a{
					color: inherit;
					text-decoration: underline;
				}
			}
		}
	}
}

.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 {
	padding: 80px 4vw 0 8vw;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
}
.post-type-recruit{
	.entry-content {
		padding: 0;
	}
}


/* heading */
.page-title-area{
	padding-top: 32px;
    background: var(--bodyBgColor);
	.main{
		width: 100%;
		height: 150px;
		display: block;
		text-align: left;
	}
}
.page-title {
	color: var(--textColorSub);
	font-size: 25px;
	font-weight: 700;
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
}
.entry-title, .entry-content h2:not([class]) {
	margin-bottom: 25px;
	padding: 10px 30px;
    color: var(--bodyBgColor);
    background: var(--keyColor);
	font-size: 25px;
	font-weight: bold;
}
.entry-title a, .entry-content h2:not([class]) a {
	color: inherit;
}
.h3, .entry-content h3:not([class]) {
	margin-bottom: 25px;
	padding: 5px 10px;
	background: var(--bgColor);
	font-size: 20px;
	font-weight: bold;
	border-left: var(--keyColor) 3px solid;
}
.h4, .entry-content h4:not([class]) {
	margin-bottom: 25px;
	padding: 5px;
	border-left: var(--keyColor) 3px solid;
	font-size: 18px;
	font-weight: bold;
}
.h5, .entry-content h5:not([class]) {
	margin-bottom: 25px;
	padding: 5px;
	border-bottom: 1px dashed var(--keyColor);
	font-weight: bold;
}


/* Breadcrumb
------------------------------------------*/
.breadcrumb-wrap {}
.breadcrumb {
	justify-content: flex-start;
	margin: 0 0 40px;
	padding: 0;
	background: none;
	font-size: 13px;
	color: var(--textColorSub);
	a:visited{
		color: var(--textColorSub);
	}
}
.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;
	display: none;
}




/* 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;
}


.pdf-download{
	a{
		display: inline-block;
		margin-bottom: 30px;
		height: 50px;
		line-height: 50px;
		padding: 0 1.0em;
		text-align: center;
		background: var(--keyColor);
		color: var(--bodyBgColor);
		font-weight: 700;
	}
}

/* Catalog
------------------------------------------*/
.post-type-catalog{
	.catalog-title{
		font-size: 18px;
		font-weight: bold;
		padding: 16px;
		text-align: center;
		background: var(--keyColor);
		color: var(--bodyBgColor);
		margin-bottom: 16px;
	}
	.catalog-list{
		.main{
			padding: 40px 80px 0;
			display: flex;
			justify-content: space-between;
			.texts{
				padding-top: 32px;
				color: var(--textColorSub);
				width: 50%;
				.catalog-entry-title{
					font-size: 22px;
					margin-bottom: 24px;
				}
				.text{
					margin-bottom: 1.5em;
				}
				.link{
					a{
						color: var(--textColor);
						span{
							display: block;
							text-decoration: underline;
						}
					}
				}
				.pdf-download{
					a{
						display: inline-block;
						margin: 30px 0 0;
						height: 50px;
						line-height: 50px;
						padding: 0 1.0em;
						text-align: center;
						background: var(--keyColor);
						color: var(--bodyBgColor);
						font-weight: 700;
					}
				}
			}
			.pdf{
				width: 40%;
			}
		}
	}
	.catalog-caution{
		margin-top: 64px;
		ul{
			li{
				list-style: disc inside;
			}
		}
	}
}

/* News
------------------------------------------*/
/* archive */
.news-body{
	padding: 50px 4vw 0 8vw;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
	h1{
		margin-bottom: 40px;
		font-size: 25px;
		font-weight: 700;
		color: var(--textColorSub);
		line-height: 1;
	}
	ul{
		li{
			border-bottom: 1px solid var(--keyColor);
			padding: 16px;
			h2{
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
				.date{
					font-size: 16px;
					font-weight: 700;
					margin-right: 32px;
				}
				a{
					font-size: 15px;
					font-weight: 400;
					color: var(--textColor);
				}
			}
			&:first-child{
				border-top: 1px solid var(--keyColor);
			}
		}
	}
}

/* single */
.single-news{
	.page-title-area{
		height: 20px;
	}
}
.news-body-single{
	display: flex;
    justify-content: space-between;
    margin: 8vh 0 12vh;
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
	.news-bar{
		width: 16%;
		color: var(--textColorSub);
		h2{
			display: block;
			font-weight: bold;
			color: var(--textColorSub);
		}
		.main{
			ul{
				li{
					a{
						color: var(--textColorSub);
					}
				}
			}
		}
	}
	.news-entry{
		width: 80%;
		padding-right: 16vw;
		h2{
			padding-bottom: 16px;
			margin-bottom: 24px;
			border-bottom: 2px solid var(--keyColor);
			font-size: 18px;
			font-weight: 700;
			color: var(--textColorSub);
			line-height: 1.5;
			span{
				display: block;
				font-size: 15px;
				font-weight: 400;
			}
		}
		.entry-content {
			padding: 0;
			img{
				margin-bottom: 5px;
			}
		}
	}
}

/* Item
------------------------------------------*/
/* top */
.item-list{
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	gap: 48px 0;
    margin-bottom: 120px;
	.once{
		width: 49%;
		position: relative;
		h3{
			a{
				position: absolute;
				top: calc((24 / 1920) * -100vw);
				right: calc((24 / 1920) * 100vw);
				padding: 1.0em 0;
				width: calc((7 / 192) * 100vw);
				font-size: calc((24 / 1920) * 100vw);
				color: var(--bodyBgColor);
				z-index: 10;
				-ms-writing-mode: tb-rl;
				writing-mode: vertical-rl;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-align: center;
				background: url(/images/base/common-bg.png) no-repeat center center / cover;
			}
		}
		.image{
			a{
				display: block;
				overflow: hidden;
				img{
					-webkit-transition-duration: .3s;
					-moz-transition-duration: .3s;
					-ms-transition-duration: .3s;
					-o-transition-duration: .3s;
					transition-duration: .3s;
					width: 100%;
					&:hover{
						transform: scale(1.05);
						opacity: .8;
					}
				}
			}
		}
		.sub{
			padding: 32px 32px 0;
			ul{
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 24px 20px;
				li{
					.iamge{
						margin-bottom: 8px;
					}
					h4{
						text-align: center;
						a{
							color: var(--textColorSub);
						}
					}
				}
			}
		}
	}
}

/* archive */
.template-type-item{
	.page-title-area{
		height: 20px;
	}
}
.item-body{
	display: flex;
	justify-content: space-between;
	flex-flow: row-reverse;
	margin: 8vh 0 12vh;
	.item-bar{
		width: 16%;
		color: var(--textColorSub);
		h2{
			a{
				display: block;
				margin-bottom: 16px;
				font-size: 16px;
				font-weight: 700;
				color: var(--textColorSub);
				font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
			}
		}
		ul{
			&>li{
				&>a{
					font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
					color: var(--textColorSub);
					font-weight: 700;
				}
				ul{
					margin: 16px 0 32px;
					li{
						a{
							font-weight: 400;
						}
					}
				}
			}
		}
	}
	.item-main{
		width: 80%;
		h1.item-arch-title{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			position: relative;
			margin-bottom: 32px;
			.image{
				width: 64%;
				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: center;
					display: block;
				}
			}
			.title{
				width: 36%;
				background: url(/images/base/common-bg.png) repeat center center;
				-ms-writing-mode: tb-rl;
				writing-mode: vertical-rl;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-align: center;
				color: var(--bodyBgColor);
				font-size: 28px;
			}
		}
		.entry-content{
			padding: 0;
		}
		h1:not([class]){
			margin-bottom: 24px;
			font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
			font-size: 25px;
			color: var(--textColorSub);
			font-weight: 700;
		}
		.main{
			padding: 2% 5% 0;
			ul{
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 24px;
				li{
					.image{
						margin-bottom: 8px;
						a{
							display: block;
							overflow: hidden;
							img{
								-webkit-transition-duration: .3s;
								-moz-transition-duration: .3s;
								-ms-transition-duration: .3s;
								-o-transition-duration: .3s;
								transition-duration: .3s;
								&:hover{
									transform: scale(1.05);
									opacity: .8;
								}
							}
						}
					}
					h2{
						text-align: center;
						a{
							color: var(--textColorSub);
						}
					}
				}
			}
		}
		.item-text{
			font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
			color: var(--textColorSub);
			font-weight: bold;
			margin-bottom: 32px;
		}
		.item-item{
			ul{
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 24px;
				li{
					.image{
						margin-bottom: 8px;
						a{
							aspect-ratio: 1 / 1;
							display: block;
							overflow: hidden;
							img{
								-webkit-transition-duration: .3s;
								-moz-transition-duration: .3s;
								-ms-transition-duration: .3s;
								-o-transition-duration: .3s;
								transition-duration: .3s;
								width: 100%;
								height: 100%;
								object-fit: cover;
								object-position: center;
								display: block;
								&:hover{
									transform: scale(1.05);
									opacity: .8;
								}
							}
						}
					}
					h2{
						text-align: center;
						a{
							color: var(--textColorSub);
						}
					}
				}
			}
		}
	}
}


/* single */
.item-body-single{
	.item-main{
		padding-right: 4vw;
		font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
		.main{
			padding: 0;
			.upper{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-bottom: 80px;
				.image{
					width: 40%;
				}
				.texts{
					width: 48%;
				}
			}
			.lower{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-bottom: 80px;
				.image{
					width: 40%;
				}
				.texts{
					width: 48%;
					table {
						width: 100%;
						border-top: 1px solid var(--borderColorSub);
						border-bottom: 1px solid var(--borderColorSub);
						tr{
							th,td{
								padding: 8px 0;
							}
							th{
								width: 22%;
							}
							&:first-child{
								th,td{
									border-bottom: 1px solid var(--borderColorSub);
									font-weight: bold;
								}
							}
						}
					}
					a{
						text-align: right;
						text-decoration: underline;
						margin: 16px 0 40px;
						display: block;
						&::after{
							content: "→";
						}
					}
				}
			}
		}
		.btns{
			text-align: center;
			margin: 120px auto;
			a{
				background: #b89868;
				border-radius: 5px;
				width: 90%;
				max-width: 400px;
				margin: 0 auto;
				display: table;
				padding: 24px 24px 24px 32px;
				margin-bottom: 16px;
				color: #FFF;
				font-size: 18px;
				font-weight: bold;
				line-height: 0;
				&::before{
					display: inline-block;
					content: "";
					width: 24px;
					height: 20px;
					background: url(/images/common/icon_mail.png) no-repeat;
					background-size: cover;
					margin-right: 16px;
					vertical-align: middle;
				}
			}
		}
	}
}

.related-items{
	h2{
		color: var(--textColorSub);
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 16px;
		font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
	}
	ul{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 40px;
		li{
			.image{
				margin-bottom: 8px;
			}
			h3{
				font-weight: 700;
				text-align: center;
			}
		}
	}
}

.item-bottom{
	margin-top: 12vh;
}


/* Ordermade
------------------------------------------*/
.template-type-ordermade{
	.page-title-area{
		height: 20px;
	}
}

.ordermade-main{
	padding: 80px 4vw 0 8vw;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
	h1{
		font-size: 25px;
		font-weight: bold;
		color: var(--textColorSub);
		padding-bottom: 40px;
		border-bottom: var(--keyColor) 1px solid;
		span{
			margin-top: 12px;
			display: block;
			font-size: 15px;
			color: var(--textColor);
			font-weight: 400;
		}
	}
	.entry{
		.main{
			position: relative;
			padding: 32px 72px 32px 32px;
			border-bottom: var(--keyColor) 1px solid;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.image{
				width: 30%;
				padding-right: 32px;
			}
			.texts{
				width: 70%;
				padding-left: 32px;
				h2{
					a{
						display: block;
						font-size: 18px;
						font-weight: bold;
						margin-bottom: 24px;
					}
				}
			}
			&::before{
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 24px;
				content: "";
				width: 10px;
				height: 17px;
				background: url(/images/base/arrow02.png) no-repeat center center / cover;
			}
		}
	}
	.single-nav{
		margin: 80px 4vw 0 8vw;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		a{
			width: 38%;
			padding: 12px;
			border: 2px solid #314d7b;
			border-radius: 5px;
			&:hover{
				background: var(--keyColor);
				color: var(--bodyBgColor);
			}
			&:last-child{
				text-align: right;
			}
		}
	}
}


/* Company
------------------------------------------*/
.term-company{
	.page-title-area{
		height: 20px;
	}
	h2{
		font-size: 25px !important;
		font-weight: bold !important;
		color: var(--textColorSub) !important;
		margin-bottom: 16px !important;
		padding: 0 !important;
		background: none !important;
	}
	.entry-content{
		table {
			width: 100%;
			border-top: 1px solid #314d7b;

			th,
			td {
				padding: 16px;
				border-bottom: 1px solid #314d7b;
			}

			th {
				font-weight: bold;
			}
		}
	}
}

/* FAQ
------------------------------------------*/
.term-faq{
	.page-title-area{
		height: 20px;
	}
	.entry-content{
		.faq-area{
			h2{
				font-size: 25px !important;
				font-weight: bold !important;
				color: var(--textColorSub) !important;
				margin-bottom: 16px !important;
				padding: 0 !important;
				background: none !important;
			}
			ul{
				li{
					margin: 24px 0 0;
					list-style-type: none;
					border: 1px solid var(--keyColor);
					padding: 16px 24px;
					border-radius: 10px;
					color: var(--textColorSub);
					cursor: pointer;
					.q{
						font-size: 17px;
						font-weight: 700;
						padding: 0 64px 0 64px;
						position: relative;
						&::before {
							content: "Q";
							font-size: 19px;
							position: absolute;
							left: 0;
							top: 0;
						}
						&::after {
							content: "";
							display: block;
							width: 10px;
							height: 17px;
							background: url(/images/base/arrow02.png) no-repeat;
							background-size: cover;
							position: absolute;
							top: 50%;
							right: 24px;
							transform: translateY(-50%) rotate(90deg);
						}
						&.open{
							padding-bottom: 16px;
							border-bottom: 1px solid var(--keyColor);
							&::after {
								transform: translateY(-50%) rotate(-90deg);
							}
						}
					}
					.a{
						display: none;
						padding: 16px 64px 0;
						position: relative;
						font-weight: 700;
						color: var(--borderColorSub);
						.nibu{
							margin-bottom: 20px;
							display: flex;
							img{
								width: 300px;
								display: block;
								margin-bottom: 10px;
							}
							p{
								width: 70%;
								padding-top: 20px;
								b{
									display: block;
									color: var(--textColorSub);
								}
							}
						}
						&::before {
							content: "A";
							font-size: 19px;
							font-weight: bold;
							position: absolute;
							left: 0;
							top: 16px;
							color: var(--textColorSub);
						}
					}
				}
			}
		}
	}
}

/* privacy
------------------------------------------*/
.term-privacy{
	.page-title-area{
		.main{
			height: 0;
		}
	}
	.entry-content{
		h2{
			margin-bottom: 56px;
			padding: 0;
			color: var(--textColorSub);
			background: none;
			font-size: 25px;
			font-weight: bold;
		}
		section{
			margin-bottom: 40px;
			h3.title{
				font-weight: bold;
				color: #314d7b;
				margin-bottom: 8px;
				font-size: 16px;
				border-bottom: 2px solid var(--keyColor);
				padding-bottom: 8px;
			}
			h3:not([class]){
				margin-bottom: 8px;
				padding: 0;
				background: none;
				font-size: 16px;
				font-weight: bold;
				border: none;
				color: var(--textColorSub);
			}
		}
	}
}

/* Search
------------------------------------------*/
.search-header{
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    font-size: 18px;
    color: var(--textColorSub);
    font-weight: 700;
	margin-bottom: 30px;
}
.search-form {
  width: 100%;
  max-width: 100%;
  display: flex;
}

.search-form form {
	margin: 0 auto 32px;
	width: 800px;
	display: flex;
}

.search-form input[type="text"] {
	flex: 1;
	padding: 12px 16px;
	border: 1px solid #ccc;
	border-right: none;
	font-size: 16px;
	color: #333;
	border-radius: 4px 0 0 4px;
	outline: none;
	width: 100%;
	box-sizing: border-box;
}

.search-form input::placeholder {
	color: #999;
}

.search-form button {
	padding: 12px 24px;
	background-color: #1f355e;
	color: #fff;
	border: none;
	font-size: 16px;
	cursor: pointer;
	border-radius: 0 4px 4px 0;
	transition: background-color 0.3s ease;
	white-space: nowrap;
}

.search-result{
	margin-top: -80px;
	padding-left: 20%;
	h1{
		font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
		font-size: 25px;
		color: var(--textColorSub);
		font-weight: bold;
		margin-bottom: 56px;
	}
	ul{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
		li{
			.image{
				margin-bottom: 8px;
			}
			h2{
				text-align: center;
				a{
					font-weight: 700;
					font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
				}
			}
		}
	}
}

/* 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;
}