@charset "utf-8";

:root {
	--black: #000000;
	--white: #FFFFFF;
	--white-rgba: 255, 255, 255; 
	--green01: #147E2D;
	--green02: #20B243;
	--yellowgreen01: #96D519;
	--yellowgreen02: #EEF8D9;
	--yellowgreen03: #D5F09C;
	--yellowgreen04: #C7E884;
	--blue: #0073FF;
	--blue02: #0064DD;
	--lightblue: #E5EFFC;
	--yellow01: #FFD800;
	--yellow02: #FFE96E;
	--orange: #FFB100;
	--lightgray: #F4F4F4;
	--gray: #A0A0A0;
	--gray02: #B5B5B5;
	--gray03: #D1D1D1;
	--darkgray: #727272;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1, h2, h3, h4, h5, h6,
p,
blockquote,
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
*, 
*::before, 
*::after {
	box-sizing: border-box;
}
html,
body {
	overflow-x: clip;
}
html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
body {
	font-size: 16px;
	color: var(--black);
	line-height: 1;
}
:target {
	scroll-margin-top: 105px;
	@media (width <= 800px) {
		scroll-margin-top: 85px;
	}
}
body,
input,
textarea,
button {
    font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
}
.en {
	font-family: "Poppins", sans-serif;
}
caption,
th,
td {
	font-weight: normal;
	text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	position: relative;
	color: var(--black);
	clear: both;
	line-height: 1;
	margin: 0;
	padding: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
	display: block;
}
p {
	color: var(--black);
	margin-bottom: 15px;
	line-height: 1.875;
	@media (width <= 800px) {
		font-size: 14px;
		line-height: 1.73;
	}
}
ol,
ul {
	list-style: none;
}
ul li,
ol li {
	line-height: 1.5;
	margin: 0 0 5px;
	@media (width <= 800px) {
		font-size: 14px;
	}
}
ol {
	list-style: decimal;
	margin: 0 0 20px 1.5em;
}
ul ul,
ol ol,
ul ol,
ol ul {
	margin-bottom: 0;
}
dl {
	margin: 0 0 24px 0;
}
dt,
dd {
	line-height: 1.6;
}
dt {
	font-weight: bold;
}
dd {
	margin: 0;
}
strong {
	font-weight: bold;
}
cite,
i {
	font-style: normal;
}
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}
small {
	font-size: smaller;
}
img {
	border: none;
	vertical-align: top;
	max-width: 100%;
	height: auto;
}
video {
	width: 100%;
}
address {
	font-style: normal;
}


.alignleft {
	float: left;
}
.alignright {
	float: right;
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img {
	transition: opacity 0.3s ease-out;
}
a {
	color: var(--black);
	text-decoration: underline;
	@media (width >= 800px) {
		&:hover {
			text-decoration: none;
			&.btn {
				color: var(--white);
				background-color: var(--green01);
				transition: background-color 0.3s ease-out 0.3s;
				&::before {
					left: 0;
				}
				&.link {
					background-color: var(--darkgray);
					&::before {
						background-color: var(--darkgray);
					}
					&::after {
						background-color: var(--white);
					}
				}
				&.green {
					color: var(--green01);
					background-color: var(--white);
					transition: background-color 0.3s ease-out 0s;
					&::before {
						display: none;
					}
					&::after {
						background-color: var(--green01);
					}
				}
			}
			.btn-arrow {
				&::before {
					translate: -10% -50%;
					background-color: var(--green01);
				}
				&::after {
					background-color: var(--white);
				}
				&.green {
					&::before {
						background-color: var(--green01);
					}
					&::after {
						background-color: var(--white);
					}
				}
				&.yellowgreen {
					&::before {
						background-color: var(--blue);
					}
					&::after {
						background-color: var(--white);
					}
				}
			}
			.entrydate,
			.entrytitle {
				font-weight: 700;
			}
		}
	}
}

a:focus, *:focus { 
	outline: none; 
}
.pc {
	display: block;
	@media (width <= 800px) {
		display: none;
	}
}
.sp {
	display: none;
	@media (width <= 800px) {
		display: block;
	}
}
.komelist {
	margin: 0 0 30px;
}
.komelist li {
	list-style: none;
	margin-left: 1em;
	&:last-child {
		margin-bottom: 0;
	}
}
.komelist li::before {
	content:"※";
	margin-left: -1em;
}
.nolink {
	pointer-events: none;
}
.youtube,
.accessmap {
	width: 100%;
	aspect-ratio: 16 / 9;
}
iframe {
	width: 100%;
	height: 100%;
}
.attention {
	color: #FF0000;
}
.gallery {
	img {
		border: none!important;
	}
}
[data-aos="fadein"] {
	opacity: 0;
	transition-property: opacity;
}
[data-aos="fadein"].aos-animate {
	opacity: 1;
}

article {
	position: relative;
	z-index: 0;
	&.page {
		h2 {
			display: flex;
			flex-wrap: wrap;
			color: var(--green01);
			&.center {
				justify-content: center;
				text-align: center;
			}
			.jp {
				display: inline-block;
				font-size: 52px;
				line-height: 1;
				margin-bottom: 20px;
				@media (width <= 800px) {
					font-size: 26px;
					margin-bottom: 10px;
				}
				&.line {
					padding-bottom: 20px;
					border-bottom: 5px solid var(--yellowgreen01);
					@media (width <= 800px) {
						padding-bottom: 10px;
					}
				}
			}
			.en {
				display: block;
				width: 100%;
				font-size: 20px;
				font-weight: 400;
				letter-spacing: 0.05em;
				@media (width <= 800px) {
					font-size: 12px;
				}
				&.gray {
					color: var(--gray02);
				}
				&.darkgray {
					color: var(--darkgray);
				}
			}
			&.simple-title {
				flex-direction: column;
				justify-content: flex-start;
				max-width: 1100px;
				text-align: left;
				margin: 0 auto 90px;
				@media (width <= 800px) {
					margin-bottom: 35px;
				}
				.s-title {
					display: block;
					color: var(--black);
					font-size: 28px;
					margin-bottom: 15px;
					@media (width <= 800px) {
						font-size: 18px;
						margin-bottom: 10px;
					}
				}
				.l-title {
					display: block;
					color: var(--green01);
					font-size: 52px;
					line-height: 1.73;
					@media (width <= 800px) {
						font-size: 26px;
						line-height: 1.5;
					}
				}
			}
		}
	}
}
section {
	position: relative;
	&.bg-white {
		background-color: var(--white);
		padding: 90px 13.6%;
		@media (width <= 800px) {
			padding: 45px 30px;
		}
	}
}
.page-template-page-simple {
	main {
		background-color: var(--yellowgreen02);
		padding-bottom: 395px;
		@media (width <= 800px) {
			padding-bottom: 75px;
		}
	}
}
.cbox {
	position: relative;
	width: calc(100% - 40px);
	max-width: 1300px;
	margin: 0 auto;
	&.cbox1035 {
		max-width: 1035px;
	}
	&.cbox1100 {
		max-width: 1100px;
	}
}

table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0 0 32px;
	th,
	td {
		text-align: left;
		font-size: 16px;
		line-height: 1.5;
		vertical-align: top;
		@media (width <= 800px) {
			font-size: 14px;
		}
	}
	th {
		position: relative;
		width: 120px;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.5;
		border-top: 1px solid var(--gray03);
		padding: 15px 0;
		@media (width <= 800px) {
			display: block;
			width: 100%;
			font-size: 14px;
			line-height: 1.7;
			padding: 12px 0 0;
		}
	}
	td {
		width: calc(100% - 120px);
		font-size: 16px;
		line-height: 1.5;
		border-top: 1px solid var(--gray03);
		padding: 15px 0;
		@media (width <= 800px) {
			display: block;
			width: 100%;
			font-size: 14px;
			line-height: 1.7;
			border-top: none;
			padding: 5px 0 12px;
		}
	}
	&.t-store {
		margin-bottom: 25px;
		@media (width <= 800px) {
			margin-bottom: 0px;
		}
		th {
			width: 100px;
			font-weight: 400;
			border: none;
			padding: 5px 0 5px 20px;
			@media (width <= 800px) {
				width: 100%;
				padding: 0 0 0 20px;
			}
			&::after {
				left: 0;
				top: 13px;
				width: 10px;
				height: 10px;
				background-color: var(--green01);
				@media (width <= 800px) {
					top: 7px;
				}
			}
		}
		td {
			width: calc(100% - 100px);
			border: none;
			padding: 5px 0;
			@media (width <= 800px) {
				width: 100%;
				padding: 0 0 15px;
			}
			.address {
				position: relative;
				display: inline-block;
				a {
					position: relative;
					top: 0px;
					display: inline-block;
					width: 18px;
					height: 25px;
					content: "";
					margin-left: 10px;
					@media (width <= 800px) {
						top: 2px;
						width: 13px;
						height: 18px;
					}
					img {
						width: 100%;
					}
				}
			}
		}
	}
}

.btn-center {
	display: flex;
	justify-content: center;
}
.btn {
	position: relative;
	width: 100%;
	max-width: 260px;
	height: 60px;
	display: flex;
	align-items: center;
	color: var(--green01);
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	background-color: var(--yellowgreen04);
	border-radius: 9999px;
	padding-left: 30px;
	transition: all 0.3s ease-out;
	z-index: 1;
	overflow: hidden;
	@media (width <= 800px) {
		max-width: 250px;
		height: 52px;
		font-size: 16px;
		margin: 0 auto;
	}
	&::before {
		position: absolute;
		left: -100%;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: var(--green01);
		border-radius: 9999px;
		content: "";
		pointer-events: none;
		z-index: -1;
		transition: all 0.3s ease-out;
	}
	&.link {
		transition: all 0.3s ease-out;
        &::after {
            position: absolute;
            right: 20px;
            top: 50%;
            translate: 0 -50%;
            width: 16px;
            height: 17px;
            background-color: var(--green01);
            mask-image: url(../img/icon_link.svg);
            mask-position: left top;
            mask-repeat: no-repeat;
            mask-size: contain;
            content: "";
            pointer-events: none;
            transition: all 0.3s ease-out;
        }
	}
	&.white {
		background-color: var(--white);
	}
	&.green {
		color: var(--white);
		background-color: var(--green01);
		&::after {
			background-color: var(--white);
		}
	}
	&.blue {
		color: var(--white);
		background-color: var(--blue);
		&::before {
			background-color: var(--darkgray);
		}
	}
	&.link-green {
		color: var(--green01);
		background-color: var(--white);
		border: 1px solid var(--green01);
		@media (width >= 800px) {
			&:hover {
				color: var(--white);
				border: 1px solid var(--darkgray);
				background-color: var(--darkgray);
				transition: all 0.3s ease-out;
				&::before {
					background-color: var(--darkgray);
				}
				&::after {
					background-color: var(--white);
				}
			}
		}
		&::after {
			position: absolute;
			right: 20px;
			top: 50%;
			translate: 0 -50%;
			width: 16px;
			height: 17px;
			background-color: var(--green01);
			mask-image: url(../img/icon_link.svg);
			mask-position: left top;
			mask-repeat: no-repeat;
			mask-size: contain;
			content: "";
			pointer-events: none;
			transition: all 0.3s ease-out;
		}
	}
	&.pdf {
		&::after {
			width: 22px;
			height: 25px;
			background-color: var(--green01);
			mask-image: url(../img/icon_pdf02.svg);
		}
	}
	&.wide {
		max-width: 320px;
	}
	.btn-arrow {
		right: 10px;
		top: 50%;
		translate: 0 -50%;
		&::before {
			background-color: var(--green01);
		}
		&::after {
			border: 1px solid var(--green01);
		}
	}
}

.btn-arrow {
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	@media (width <= 800px) {
		width: 34px;
		height: 34px;
	}
	&::before,
	&::after {
		position: absolute;
		left: 50%;
		top: 50%;
		translate: -50% -50%;
		content: "";
		transition: all 0.3s ease-out;
	}
	&::before {
		width: 12px;
		height: 18px;
		background-color: var(--green02);
		mask-image: url(../img/arrow_r.svg);
		mask-position: left top;
		mask-repeat: no-repeat;
		mask-size: contain;
		z-index: 1;
		@media (width <= 800px) {
			width: 10px;
			height: 15px;
		}
	}
	&::after {
		width: 100%;
		height: 100%;
		z-index: 0;
		border-radius: 50%;
		border: 1px solid var(--green02);
	}
	&.green {
		&::before {
			background-color: var(--green01);
		}
		&::after {
			border: 1px solid var(--green01);
		}
	}
	&.yellowgreen {
		&::before {
			width: 14px;
			height: 21px;
			background-color: var(--yellowgreen01);
		}
		&::after {
			border: none;
			background-color: var(--white);
		}
	}
}
.blur,
.bg-blur {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	mask-image: linear-gradient(to right, var(--white) 100%, transparent 100%);
	pointer-events: none;
}
.blur {
	backdrop-filter: blur(40px) brightness(125%);
	z-index: 0;
}
.bg-blur {
	background-color: rgba(255,255,255, 0.05);
	z-index: 1;
}

/* u-line */
.u-line {
    text-decoration-line: underline;
    text-decoration-color: var(--yellow01);
    text-decoration-thickness: 5px;
    text-underline-offset: 16px;
	text-decoration-skip-ink: none;
    @media (width <= 800px) {
        text-decoration-thickness: 3px;
        text-underline-offset: 5px;
    }
}
.mr {
	padding-right: 0.4em;
}
.ml {
	padding-left: 0.4em;
}



/*
header
*/
.site-header {
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 110px;
	z-index: 6;
	transition: all 0.3s ease-out;
	@media (width <= 1280px) {
		height: 67px;
	}
	.site-title {
		display: inline-block;
		position: absolute;
		top: 50%;
		left: 60px;
		translate: 0 -50%;
		width: 390px;
		z-index: 1;
		@media (width <= 1280px) {
			left: 16px;
			width: 216px;
		}
		a {
			display: block;
			width: 100%;
			height: 100%;
			img {
				opacity: 1;
				transition: opacity 0.3s ease-out;
			}
		}
	}
}


/*
headermenu
*/
.headermenu {
	position: absolute;
	top: 25px;
	right: 164px;
	z-index: 3;
	@media (width <= 1280px) {
		display: none;
	}
	ul {
		display: flex;
		align-items: center;
		gap: 0 20px;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		li {
			position: relative;
			line-height: 1;
			padding: 0;
			margin: 0;
			&.hm {
				a {
					font-weight: 700;
					border: 1px solid var(--gray);
					border-radius: 4px;
					padding: 6px 8px;
					transition: all 0.3s ease-out;
					@media (width >= 1280px) {
						&:hover {
							color: var(--white);
							background-color: var(--blue);
							border-color: var(--blue);
						}
					}
					&::before {
						display: none;
					}
				}
				&.link {
					margin-left: 10px;
					a {
						padding-right: 32px;
						@media (width >= 1280px) {
							&:hover {
								&::after {
									background-color: var(--white);
								}
							}
						}
						&::after {
							position: absolute;
							right: 6px;
							top: 50%;
							translate: 0 -50%;
							width: 18px;
							height: 18px;
							background-color: var(--black);
							mask-image: url(../img/icon_link.svg);
							mask-position: left top;
							mask-repeat: no-repeat;
							content: "";
							transition: background-color 0.3s ease-out;
						}
					}
				}
			}
			a {
				position: relative;
				display: inline-block;
				font-size: 15px;
				text-decoration: none;
				padding-left: 10px;
				@media (width >= 1280px) {
					&:hover {
						font-weight: 700;
					}
				}
				&::before {
					position: absolute;
					left: 0;
					top: 50%;
					translate: 0 -50%;
					width: 4px;
					height: 4px;
					content: "";
					background-color: var(--green02);
					border-radius: 50%;
				}
			}
		}
	}
}


/*
mainmenu
*/
.mainmenu {
	position: absolute;
	top: 70px;
	right: 164px;
	width: auto;
	z-index: 3;
	@media (width <= 1280px) {
		display: none;
	}
	ul {
		display: flex;
		align-items: center;
		gap: 0 32px;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		li {
			position: relative;
			line-height: 1;
			margin: 0;
			padding: 0;
			&.current-page-ancestor,
			&.current-menu-item,
			&.active {
				a {
				}
			}
			a {
				display: inline-block;
				font-size: 16px;
				font-weight: 700;
				text-decoration: none;
				padding-bottom: 10px;
				@media (width >= 1280px) {
					&:hover {
						&::after {
							width: 100%;
						}
					}
				}
				&::after {
					position: absolute;
					left: 0;
					bottom: 0;
					width: 0;
					height: 3px;
					background-color: var(--yellowgreen01);
					content: "";
					transition: width 0.3s ease-out;
				}
			}
		}
	}
}


/*
mcontact
*/
.mcontact {
	position: fixed;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: flex-end;
	justify-content: center;
	width: 123px;
	height: 110px;
	color: var(--white);
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	background-color: var(--green01);
	border-radius: 0 0 0 50px;
	padding-bottom: 20px;
	z-index: 11;
	transition: background-color 0.3s ease-out;
	@media (width >= 1280px) {
		&:hover {
			background-color: var(--darkgray);
		}
	}
	@media (width <= 1280px) {
		right: 56px;
		align-items: center;
		width: 63px;
		height: 56px;
		font-size: 12px;
		border-radius: 0 0 0 20px;
		padding-bottom: 0;
	}
	&::before {
		position: absolute;
		top: 20px;
		left: 50%;
		translate: -50% 0;
		width: 42px;
		height: 42px;
		content: "";
		background-image: url(../img/icon_contact.svg);
		background-repeat: no-repeat;
		background-position: center top;
		@media (width <= 1280px) {
			display: none;
		}
	}
}


/* contactbox */
.contactbox {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 11;
	width: 544px;
	background-color: var(--green01);
	border-radius: 0 0 0 50px;
	padding: 95px 40px 46px;
	@media (width <= 1280px) {
		width: 341px;
		padding: 47px 20px 25px;
		z-index: 12;
	}
	.btn-close {
		position: absolute;
		right: 54px;
		top: 35px;
		width: 38px;
		height: 30px;
		@media (width <= 1280px) {
			right: 20px;
			top: 20px;
			width: 24px;
			height: 18px;
		}
		&::before,
		&::after {
			position: absolute;
			left: 50%;
			top: 50%;
			translate: -50% -50%;
			content: "";
			width: 100%;
			height: 5px;
			background-color: var(--white);
			border-radius: 9999px;
			@media (width <= 1280px) {
				height: 3px;
			}
		}
		&::before {
			rotate: 35deg;
		}
		&::after {
			rotate: -35deg;
		}
	}
	a {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		height: 176px;
		text-decoration: none;
		background-color: var(--white);
		border-radius: 23px;
		margin-bottom: 30px;
		padding-left: 140px;
		z-index: 1;
		transition: filter 0.3s ease-out;
		@media (width >= 1280px) {
			&:hover {
				filter: drop-shadow(10px 10px 0px rgba(0, 0, 0, 0.16));
				&::before {
					opacity: 1;
					border: 8px solid var(--yellowgreen01);
				}
				.contact-text {
					font-weight: 700;
				}
			}
		}
		@media (width <= 1280px) {
			align-items: flex-start;
			height: 132px;
			padding: 25px 0 0 110px;
			margin-bottom: 20px;
		}
		&::before {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			content: "";
			pointer-events: none;
			border-radius: 23px;
			border: 0px solid var(--yellowgreen01);
			z-index: 0;
			opacity: 1;
			transition: all 0.3s ease-out;
			@media (width <= 1280px) {
				display: none;
			}
		}
		&:last-child {
			margin-bottom: 0;
		}
		.contact-img {
			position: absolute;
			left: 18px;
			top: 50%;
			translate: 0 -50%;
			z-index: 2;
			@media (width <= 1280px) {
				top: 28px;
				translate: 0 0;
			}
			&.ci01 {
				@media (width <= 1280px) {
					width: 81px;
				}
			}
			&.ci02 {
				@media (width <= 1280px) {
					width: 78px;
				}
			}
			&.ci03 {
				@media (width <= 1280px) {
					width: 83px;
				}
			}
		}
		.contact-title {
			font-size: 28px;
			font-weight: 700;
			list-style: 1.5;
			z-index: 2;
			@media (width <= 1280px) {
				font-size: 15px;
			}
			.s-text {
				display: block;
				font-size: 16px;
				font-weight: 400;
				margin-top: 16px;
				@media (width <= 1280px) {
					font-size: 13px;
					margin-top: 10px;
				}
			}
		}
		.contact-text {
			position: absolute;
			right: 15px;
			bottom: 13px;
			display: flex;
			align-items: center;
			height: 40px;
			padding-right: 60px;
			z-index: 2;
			@media (width <= 1280px) {
				right: 25px;
				height: 28px;
				font-size: 14px;
				padding-right: 38px;
			}
			&::before {
				@media (width <= 1280px) {
					position: absolute;
					left: 0;
					top: -12px;
					width: 100%;
					height: 1px;
					content: "";
					background-color: var(--yellowgreen01);
				}
			}
			.btn-arrow {
				right: 0;
				top: 50%;
				translate: 0 -50%;
				@media (width <= 1280px) {
					width: 28px;
					height: 28px;
				}
				&::before {
					@media (width <= 1280px) {
						width: 8px;
						height: 12px;
					}
				}
			}
		}
	}
}



/* toggle */
#toggle {
	display: none;
	@media (width <= 1280px) {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		width: 56px;
		height: 56px;
		border: none;
		background: var(--darkgray);
		padding: 0;
		cursor: pointer;
		z-index: 11;
	}
}
.menu-trigger,
.menu-trigger span {
	@media (width <= 1280px) {
		display: inline-block;
		transition: all 0.4s;
	}
}
.menu-trigger {
	@media (width <= 1280px) {
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
		outline: none;
		span {
			display: block;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			background-color: var(--white);
			width: 24px;
			height: 3px;
			border-radius: 9999px;
			&:nth-of-type(1) {
				top: 17px;
			}
			&:nth-of-type(2) {
				top: 26px;
			}
			&:nth-of-type(3) {
				top: 35px;
			}
		}
		&.active {
			:nth-of-type(1) {
				-webkit-transform: translate(-50%,10px) rotate(40deg);
				transform: translate(-50%,10px) rotate(40deg);
			}
			:nth-of-type(2) {
				opacity: 0;
			}
			:nth-of-type(3) {
				-webkit-transform: translate(-50%,-8px) rotate(-40deg);
				transform: translate(-50%,-8px) rotate(-40deg);
			}
		}
	}
}


/*
spmainmenu
*/
.spmainmenubox {
	display: none;
	@media (width <= 1280px) {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		width: 335px;
		height: 100dvh;
		background-color: var(--green01);
		border-radius: 0 0 0 30px;
		z-index: 10;
		transition: all 0.3s ease-out;
		opacity: 0;
		pointer-events: none;
		&.open {
			opacity: 1;
			pointer-events: auto;
		}
	}
	.spmenubox {
		@media (width <= 1280px) {
			position: relative;
			width: 100%;
			height: 100%;
			padding: 56px 20px 30px;
			overflow-y: auto;
			z-index: 2;
		}
		.spmainmenu {
			@media (width <= 1280px) {
				margin-bottom: 24px;
				ul {
					width: 100%;
					border-top: 1px solid var(--white);
					margin: 0;
					padding: 0;
					li {
						width: 100%;
						margin: 0;
						padding: 0;
						line-height: 1.4;
						a {
							position: relative;
							display: block;
							color: var(--white);
							font-size: 14px;
							font-weight: 700;
							text-decoration: none;
							border-bottom: 1px solid var(--white);
							padding: 14px 30px 14px 10px;
						}
					}
				}
			}
		}
		.spsubmenu {
			@media (width <= 1280px) {
				margin-bottom: 20px;
				ul {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					gap: 20px 0;
					width: 100%;
					margin: 0;
					padding: 0;
					li {
						position: relative;
						line-height: 1;
						padding: 0;
						margin: 0;
						&.hm {
							width: 40.7%;
							a {
								display: flex;
								align-items: center;
								justify-content: center;
								width: 100%;
								height: 40px;
								font-size: 14px;
								font-weight: 700;
								border: 1px solid var(--white);
								border-radius: 5px;
								transition: all 0.3s ease-out;
							}
							&.link {
								width: 55.6%;
								a {
									justify-content: flex-start;
									padding: 0 0 0 12px;
									&::after {
										position: absolute;
										right: 6px;
										top: 50%;
										translate: 0 -50%;
										width: 18px;
										height: 18px;
										background-color: var(--white);
										mask-image: url(../img/icon_link.svg);
										mask-position: left top;
										mask-repeat: no-repeat;
										content: "";
										transition: background-color 0.3s ease-out;
									}
								}
							}
						}
						&:first-child {
							a {
								border-left: none;
								padding-left: 0;
							}
						}
						&:nth-child(3) {
							a {
								border-right: none;
								padding-right: 0;
							}
						}
						a {
							position: relative;
							display: inline-block;
							color: var(--white);
							font-size: 15px;
							text-decoration: none;
							border-right: 1px solid var(--white);
							padding: 0 8px;
						}
					}
				}
			}
		}
		.spcontactmenu {
			@media (width <= 1280px) {
				margin-bottom: 20px;
				ul {
					display: flex;
					flex-direction: column;
					gap: 10px 0;
					width: 100%;
					margin: 0;
					padding: 0;
					li {
						position: relative;
						line-height: 1;
						padding: 0;
						margin: 0;
						a {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							color: var(--white);
							width: 100%;
							height: 60px;
							text-decoration: none;
							border: 1px solid var(--white);
							border-radius: 10px;
							.sptel {
								position: relative;
								display: block;
								font-size: 26px;
								font-weight: 700;
								padding-left: 37px;
								margin-bottom: 2px;
								&::before {
									position: absolute;
									left: 0;
									top: 50%;
									translate: 0 -50%;
									width: 26px;
									height: 32px;
									content: "";
									background-image: url(../img/icon_tel.svg);
									background-repeat: no-repeat;
									background-position: left top;
									background-size: cover;
								}
							}
							.sptime {
								display: block;
								font-size: 12px;
								font-weight: 700;
							}
							.spcontact {
								position: relative;
								display: block;
								font-size: 18px;
								font-weight: 700;
								padding-left: 32px;
								&::before {
									position: absolute;
									left: 0;
									top: 50%;
									translate: 0 -50%;
									width: 24px;
									height: 23px;
									content: "";
									background-image: url(../img/icon_contact.svg);
									background-repeat: no-repeat;
									background-position: left top;
									background-size: cover;
								}
							}
						}
					}
				}
			}
		}
		.logo-white {
			margin-bottom: 16px;
		}
		address {
			color: var(--white);
			font-size: 14px;
			line-height: 1.7;
		}
	}
}


/*
pagetitle
*/
.page-title {
	position: relative;
	width: 100%;
	height: 550px;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	margin-bottom: 85px;
	z-index: 2;
	@media (width <= 800px) {
		height: 220px;
		padding: 0 15px;
		margin-bottom: 50px;
	}
	&::before {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		content: "";
		pointer-events: none;
		height: 100%;
		background-color: rgba(199, 232, 132, 0.2);
		mix-blend-mode: multiply;
		z-index: 0;
	}
	h1 {
		display: flex;
		align-content: center;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		height: 100%;
		color: var(--green01);
		padding: 0 200px;
		margin-bottom: 0;
		translate: 0 -3%;
		z-index: 2;
		@media (width <= 800px) {
			height: auto;
			padding: 100px 0 0 20px;
			translate: 0 0;
		}
		.jp {
			display: block;
			width: 100%;
			margin-bottom: 25px;
			@media (width <= 800px) {
				margin-bottom: 8px;
			}
			.title {
				display: block;
				width: 100%;
				font-size: 62px;
				font-weight: 700;
				line-height: 1.3;
				@media (width <= 800px) {
					font-size: 26px;
				}
			}
			.subtitle {
				display: inline-flex;
				justify-content: center;
				align-items: center;
				font-size: 28px;
				background-color: var(--white);
				padding: 6px 27px;
				margin-top: 15px;
				@media (width <= 800px) {
					font-size: 12px;
					padding: 4px 8px;
					margin-top: 8px;
				}
			}
		}
		.en {
			display: block;
			width: 100%;
			font-size: 18px;
			font-weight: 400;
			line-height: 1;
			letter-spacing: 0.05em;
			@media (width <= 800px) {
				font-size: 12px;
				line-height: 1.5;
			}
		}
	}
	.bird-topimage {
		position: absolute;
		left: -26px;
		top: 135px;
		z-index: 3;
		pointer-events: none;
		@media (width <= 800px) {
			display: none;
		}
	}
	.bg-color {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to right,  rgba(107,126,69,1) 0%,rgba(199,232,132,0) 40%);
		mix-blend-mode: multiply;
		opacity: 0.1;
		pointer-events: none;
		z-index: 1;
	}
	.topimage-bottom {
		position: absolute;
		left: 0;
		width: 100%;
		content: "";
		pointer-events: none;
		bottom: 0;
		height: 11.8vw;
		background-image: url(../img/bg_pagetitle.webp);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: left top;
		z-index: 1;
	}
	&.page-topimage {
		height: 100vh;
		margin-bottom: 40px;
		@media (width <= 800px) {
			height: 87.5vw;
			margin-bottom: 0;
		}
	}
	&.simple {
		max-width: 1100px;
		height: 292px;
		margin: 0 auto;
		@media (width <= 800px) {
			height: 164px;
		}
		&::before {
			display: none;
		}
		h1 {
			align-items: flex-end;
			align-content: flex-end;
			justify-content: flex-start;
			translate: 0 0;
			color: var(--black);
			padding: 0 0 36px;
			@media (width <= 800px) {
				height: 100%;
				padding: 0 0 26px;
			}
			.jp {
				font-size: 36px;
				margin-bottom: 0;
				@media (width <= 800px) {
					font-size: 26px;
				}
			}
		}
	}
}
h2 {
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 24px;	
}
h3 {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	padding: 0;
	margin-bottom: 20px;
}
h4 {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 10px;
}
h5 {
	font-size: 16px;
	font-weight: 700;
}
img.alignleft {
	margin: 0 24px 12px 0;
}
img.alignright {
	margin: 0 0 12px 24px;
}
img.aligncenter {
	margin-bottom: 12px;
}
.wp-caption {
	max-width: 100%;
	height: auto;
	margin-bottom: 40px;
	img {
		width: 100%;
	}
	.wp-caption-text {
		width: auto;
		text-align: left;
		font-size: 14px;
		line-height: 1.6;
		margin-top: 10px;
		@media (width <= 800px) {
			font-size: 12px;
		}		
	}
}

.read-top {
	color: var(--green01);
	font-size: 36px;
	font-weight: 700;
	text-align: center;
	line-height: 2;
	margin-bottom: 72px;
	@media (width <= 800px) {
		font-size: 20px;
		line-height: 1.8;
		margin-bottom: 80px;
	}
}


/* homecontent */
.homecontent {
    h2 {
        margin-bottom: 50px;
        @media (width <= 800px) {
            margin-bottom: 30px;
        }
        .jp {
            display: block;
            color: var(--green01);
            font-size: 52px;
            list-style: 1;
            margin-bottom: 12px;
            @media (width <= 800px) {
                font-size: 26px;
            }
        }
        .en {
            display: block;
            color: var(--gray02);
            font-size: 20px;
            font-weight: 400;
            letter-spacing: 0.05em;
            @media (width <= 800px) {
                font-size: 12px;
            }
        }
        &.center {
            text-align: center;
        }
        &.line {
            padding-left: 100px;
            @media (width <= 800px) {
                padding-left: 18px;
            }
            .jp {
                position: relative;
                &::before {
                    position: absolute;
                    left: -60px;
                    top: 50%;
                    translate: 0 -50%;
                    width: 36px;
                    height: 8px;
                    background-color: var(--green01);
                    content: "";
                    @media (width <= 800px) {
                        left: -23px;
                        top: 16px;
                        translate: 0 0;
                        width: 16px;
                        height: 4px;
                    }
                }
                .s-title {
                    display: inline-block;
                    font-size: 40px;
                    @media (width <= 800px) {
                        display: block;
                        font-size: 18px;
                    }
                }
            }
        }
        &.white {
            .jp,
            .en {
                color: var(--white);
            }
        }
    }
}


.pagelink {
	position: relative;
	width: 100%;
	max-width: 280px;
	margin: 0;
	padding: 0;
	z-index: 1;
	@media (width <= 800px) {
		max-width: 230px;
		margin: 0 auto;
		translate: -10px 0;
	}
	li {
		width: 100%;
		margin: 0 0 32px;
		padding: 0;
		@media (width <= 800px) {
			margin-bottom: 20px;
		}
		&:last-child {
			margin-bottom: 0;
		}
		a {
			position: relative;
			display: flex;
			align-items: center;
			width: 100%;
			min-height: 45px;
			color: var(--green01);
			font-size: 24px;
			font-weight: 700;
			line-height: 1.375;
			text-decoration: none;
			padding-left: 16px;
			transition: color 0.3s ease-out;
			@media (width >= 800px) {
				&:hover {
					color: var(--white);
					&::before {
						width: calc(100% + 12px);
					}
				}
			}
			@media (width <= 800px) {
				min-height: 52px;
				color: var(--white);
				font-size: 16px;
				padding-left: 20px;
			}               
			&::before {
				position: absolute;
				left: 0;
				top: 0;
				width: 6px;
				height: 100%;
				background-color: var(--green01);
				border-radius: 6px;
				content: "";
				pointer-events: none;
				z-index: -1;
				transition: width 0.3s ease-out;
				@media (width <= 800px) {
					width: 100%;
				}
			}
			.btn-arrow {
				top: 50%;
				right: 0;
				translate: 0 -50%;
				width: 29px;
				height: 29px;
				@media (width <= 800px) {
					right: 12px;
					width: 28px;
					height: 28px;
					background-color: var(--white);
				}
				&::before {
					width: 9px;
					height: 14px;
				}
			}
		}
	}
}



/* faq */
.faq {
    position: relative;
    background-color: var(--yellowgreen03);
    padding-bottom: 37vw;
    z-index: 1;
	@media (width <= 800px) {
		padding-bottom: 52vw;
	}
    .bg-faq {
        position: absolute;
        left: 0;
        top: -12vw;
        width: 100%;
        z-index: -1;
        @media (width <= 800px) {
            top: -23vw;
        }
        img {
            width: 100%;
        }
    }
    h2 {
        margin-bottom: 50px;
		@media (width <= 800px) {
			margin-bottom: 15px;
		}
    }
    .faq-content {
        width: 100%;
        margin-bottom: 115px;
		cursor: pointer;
		@media (width <= 800px) {
			margin-bottom: 50px;
		}
        .faq-item {
            background-color: var(--white);
            border-radius: 40px;
            margin-bottom: 30px;
            padding: 0 35px;
			@media (width <= 800px) {
				border-radius: 20px;
				padding: 0 20px;
			}
            &:last-child {
                margin-bottom: 0;
            }
            &::details-content {
                opacity: 0;
                transition: opacity 0.3s ease-out;
            }
            &[open] {
                &::details-content {
                    opacity: 1;
                }
                .faq-question {
                    &::after {
                        background-image: url(../img/faq_line_on.svg);
                    }
                }
            }
            .faq-question {
                position: relative;
                color: var(--green01);
                font-size: 28px;
                font-weight: 700;
                line-height: 1.5;
                list-style: none;
                padding: 35px 45px 35px 66px;
				@media (width <= 800px) {
					font-size: 18px;
					padding: 20px 30px 20px 40px;
				}
                &::-webkit-details-marker {
                    display: none;
                }
                &::before,
                &::after {
                    position: absolute;
                    top: 50%;
                    translate: 0 -55%;
                }
                &::before {
                    left: 0;
                    color: var(--green01);
                    font-size: 52px;
                    font-weight: 700;
                    line-height: 1;
                    content: "Q";
					@media (width <= 800px) {
						font-size: 27px;
					}
                }
                &::after {
                    right: 0;
                    width: 34px;
                    height: 34px;
                    content: "";
                    background-image: url(../img/faq_line.svg);
                    background-repeat: no-repeat;
                    background-position: left top;
                    background-size: cover;
					@media (width <= 800px) {
						width: 20px;
						height: 20px;
					}
                }
            }
            .faq-answer {
				position: relative;
                border-top: 1px solid var(--green01);
                padding: 40px 66px 40px;
				@media (width <= 800px) {
					padding: 20px 30px 20px 40px;
				}
				&::before {
					position: absolute;
					left: 0;
					top: 32px;
					color: var(--green01);
					font-size: 52px;
					font-weight: 700;
					line-height: 1;
					content: "A";
					@media (width <= 800px) {
						top: 18px;
						font-size: 27px;
					}
				}
                h3 {
                    position: relative;
                    color: var(--green01);
                    font-size: 28px;
                    font-weight: 700;
                    line-height: 1.5;
                    margin-bottom: 32px;
					@media (width <= 800px) {
						font-size: 18px;
						margin-bottom: 12px;
					}
                }
                p {
                    margin: 0;
                }
            }
        }
    }
    .faq-contact {
        position: relative;
        background-color: var(--green01);
        border-radius: 40px;
        padding: 105px 20px 60px;
		@media (width <= 800px) {
			border-radius: 15px;
			padding: 50px 32px 30px;
		}
        h3 {
            position: absolute;
            left: 50%;
            top: 0;
			translate: -50% -25px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 600px;
            min-height: 65px;
            font-size: 28px;
			text-align: center;
            border-radius: 9999px;
            background-color: var(--yellow01);
            margin: 0;
			@media (width <= 800px) {
				translate: -50% -12px;
				width: calc(100% - 20px);
				min-height: 41px;
				font-size: 18px;
				line-height: 1.3;
			}
        }
        h4 {
            color: var(--white);
            font-size: 36px;
			text-align: center;
            margin-bottom: 50px;
			@media (width <= 800px) {
				font-size: 20px;
				margin-bottom: 20px;
			}
            .kabushiki {
                display: block;
                font-size: 18px;
				@media (width <= 800px) {
					font-size: 14px;
				}
            }
        }
		.half {
			display: flex;
			gap: 0 40px;
			width: 100%;
			max-width: 916px;
			margin: 0 auto;
			@media (width <= 800px) {
				flex-wrap: wrap;
				gap: 20px 0;
			}
			.btn {
				flex-direction: column;
				font-weight: 700;
			}
		}
        .btn {
            max-width: 600px;
            height: 91px;
            justify-content: center;
            font-size: 26px;
            border-radius: 20px;
            margin: 0 auto;
			padding-left: 0;
            border: 1px solid var(--white);
			&.ftel {
				pointer-events: none;
				@media (width <= 800px) {
					height: 66px;
					pointer-events: auto;
				}
			}
			&.fmail {
				@media (width >= 800px) {
					&:hover {
						.faq-mail {
							&::before {
								background-image: url(../img/icon_mail_on.svg);
							}
						}
					}
				}
			}
			@media (width <= 800px) {
				max-width: inherit;
				height: 47px;
				font-size: 16px;
				border-radius: 10px;
			}
            &::after {
                width: 25px;
                height: 25px;
                right: 30px;
				@media (width <= 800px) {
					right: 10px;
					width: 18px;
					height: 18px;
				}
            }
			.faq-tel {
				position: relative;
				display: block;
				font-size: 40px;
				padding-left: 40px;
				@media (width <= 800px) {
					font-size: 25px;
					padding-left: 26px;
					margin-bottom: 5px;
				}
				&::before {
					position: absolute;
					left: 0;
					top: 50%;
					translate: 0 -50%;
					width: 30px;
					height: 41px;
					content: "";
					background-image: url(../img/icon_tel02.svg);
					background-repeat: no-repeat;
					background-position: left top;
					background-size: cover;
					@media (width <= 800px) {
						width: 20px;
						height: 27px;
					}
				}
			}
			.time {
				display: block;
				font-size: 13px;
				@media (width <= 800px) {
					font-size: 12px;
				}
			}
			.faq-mail {
				position: relative;
				display: inline-block;
				font-size: 26px;
				font-weight: 700;
				padding-left: 67px;
				@media (width <= 800px) {
					font-size: 16px;
					padding-left: 52px;
				}
				&::before {
					position: absolute;
					left: 0;
					top: 50%;
					translate: 0 -50%;
					width: 45px;
					height: 29px;
					content: "";
					background-image: url(../img/icon_mail.svg);
					background-repeat: no-repeat;
					background-position: left top;
					background-size: cover;
					@media (width <= 800px) {
						width: 31px;
						height: 20px;
					}
				}
			}
        }		
    }
}


/* store */
.categorylist {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px;
	padding: 0;
	@media (width <= 800px) {
		margin-bottom: 18px;
	}
	li {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: var(--green01);
		font-size: 16px;
		font-weight: 700;
		background-color: var(--white);
		border-radius: 5px;
		border: 1px solid var(--green01);
		padding: 3px 10px;
		margin: 0;
		@media (width <= 800px) {
			font-size: 14px;
		}
	}
}


/* column */
.column-cat {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 15px;
	.column-cat-name {
		display: inline-flex;
		align-items: center;
		justify-items: center;
		color: var(--white);
		font-size: 12px;
		font-weight: 700;
		list-style: 1.4;
		background-color: var(--green01);
		border-radius: 9999px;
		padding: 3px 15px;
	}
}
.column-tag {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	.column-tag-name {
		display: inline-flex;
		align-items: center;
		justify-items: center;
		color: var(--green01);
		font-size: 12px;
		font-weight: 700;
		list-style: 1.4;
		border: 1px solid var(--green01);
		background-color: var(--white);
		border-radius: 4px;
		padding: 5px 10px;
	}
}



/* blog */
.blog {
    background-color: var(--lightblue);
    padding-bottom: 300px;
	@media (width <= 800px) {
		padding-bottom: 110px;
	}
    .bg-blog01 {
        position: absolute;
		top: -25.2vw;
		width: 100%;
        z-index: 0;
		@media (width <= 800px) {
			top: -30vw;
		}
		img {
			width: 100%;
		}
    }
    .btn {
        max-width: 323px;
		@media (width <= 800px) {
			max-width: 295px;
			translate: -10px 0;
		}
    }
}
.blog-content {
    position: relative;
	top: -110px;
    width: calc(100% - 100px);
    margin: 0 0 0 100px;
    padding: 112px 0 64px 100px;
    z-index: 1;
	@media (width <= 800px) {
		top: 0;
		width: calc(100% - 20px);
		margin: 0 0 0 20px;
		padding: 45px 0 40px 20px;
	}
    &::before {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url(../img/bg_blog02.webp);
        background-repeat: no-repeat;
        background-position: left top;
        background-size: cover;
        content: "";
        z-index: -1;
        pointer-events: none;
        border-radius: 100px 0 0 100px;
		@media (width <= 800px) {
			background-image: url(../img/bg_blog02_sp.webp);
			border-radius: 30px 0 0 30px;
		}
    }
    .cbox {
        position: relative;
        width: 100%;
        max-width: inherit;
        z-index: 2;
		h2 {
			margin-bottom: 50px;
			@media (width <= 800px) {
				margin-bottom: 12px;
			}
		}
    }
}
.blog-bird {
    position: absolute;
    left: -40px;
    top: -188px;
	@media (width <= 800px) {
		top: -106px;
		left: -5px;
	}
}
.blog-cloud {
    position: absolute;
    right: 100px;
    bottom: -120px;
	@media (width <= 800px) {
		display: none;
	}
}
.splide-blog {
    position: relative;
    clip-path: inset(0px 0px 0px 0px);
    margin-left: -100px;
    margin-bottom: 56px;
    padding-left: 100px;
    overflow: hidden;
	@media (width <= 800px) {
		margin-left: -20px;
		margin-bottom: 25px;
		padding-left: 20px;
	}
    .splide__track {
        overflow: visible;
        margin-bottom: 56px;
		@media (width <= 800px) {
			margin-bottom: 40px;
		}
        .splide__list {
            margin: 0;
            padding: 0;
            .splide__slide {
                margin: 0;
                padding: 0;
                a {
                    position: relative;
                    display: block;
                    text-decoration: none;
                    background-color: rgba(var(--white-rgba), 0.5);
                    border-radius: 10px;
                    padding: 40px 40px 64px 40px;
                    transition: background-color 0.3s ease-out;
                    @media (width >= 800px) {
                        &:hover {
                            background-color: var(--white);
                            .blog-img {
                                img {
									opacity: 1;
                                    scale: 1.2;
                                }
                            }
                            .btn-arrow {
                                &.green {
                                    &::before {
                                        background-color: var(--white); 
                                    }
                                    &::after {
                                        scale: 1.2;
                                        background-color: var(--green01);
                                    }
                                }
                            }
                        }
                    }
					@media (width <= 800px) {
						padding: 20px 20px 64px 20px;
					}
                    .blog-img {
                        display: block;
                        margin: 0 auto 20px;
                        overflow: hidden;
						@media (width <= 800px) {
							margin-bottom: 10px;
						}
                        img {
							width: 100%;
							height: 229px;
							object-fit: cover;
                            transition: scale 0.3s ease-out;
							@media (width <= 800px) {
								height: auto;
								max-height: 174px;
							}
                        }
                    }
                    .blog-cat {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 10px;
                        margin-bottom: 16px;
						@media (width <= 800px) {
							margin-bottom: 14px;
						}
                        .cat-name {
                            display: inline-flex;
                            color: var(--white);
                            font-size: 12px;
                            font-weight: 700;
                            background-color: var(--green01);
                            border-radius: 9999px;
                            padding: 2px 14px;
                        }
                    }
                    .blog-title {
                        overflow: hidden;
                        display: -webkit-box;
                        text-overflow: ellipsis;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                        font-size: 18px;
                        font-weight: 700;
                        line-height: 1.78;
                        min-height: 58px;
                        margin-bottom: 56px;
						@media (width <= 800px) {
							font-size: 14px;
							line-height: 1.7;
							min-height: 44px;
							margin-bottom: 32px;
						}
                    }
                    .blog-tag {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 10px;
                        .tag-name {
                            display: inline-flex;
                            color: var(--green01);
                            font-size: 14px;
                            font-weight: 700;
                            background-color: var(--white);
                            border: 1px solid var(--green01);
                            border-radius: 4px;
                            padding: 4px 10px;
                        }
                    }
                    .btn-arrow {
                        right: 26px;
                        bottom: 20px;
                        transition: all 0.3s ease-out;
						@media (width <= 800px) {
							right: 10px;
							bottom: 10px;
						}
                    }
                }
            }
        }
    }
}
.splide__arrows {
	position: relative;
	width: auto;
	display: flex;
	align-items: center;
	gap: 30px;
	@media (width <= 800px) {
		width: calc(100% - 20px);
		justify-content: center;
	}
	.splide__arrow {
		position: relative;
		top: auto;
		transform: none;
		width: 13px;
		height: 22px;
		background: none;
		background-image: url(../img/arrow_l.svg);
		background-repeat: no-repeat;
		border-radius: 0;
		border: none;
		opacity: 1;
		padding: 0;
		&.splide__arrow--prev {
			left: auto;
		}
		&.splide__arrow--next {
			right: auto;
			transform: scale(-1, 1);
		}
	}
	.splide__pagination {
		position: relative;
		left: auto;
		bottom: auto;
		display: flex;
		gap: 0 30px;
		padding: 0;
		li {
			.splide__pagination__page {
				width: 10px;
				height: 10px;
				margin: 0;
				opacity: 1;
				background-color: var(--white);
			}
		}
	}
}


/*
wp-pagenavi
*/
.wp-pagenavi {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
	margin: 40px 0 0;
	@media (width <= 800px) {
	}
	a,
	span {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		font-family: "Poppins", sans-serif;
		font-size: 16px;
		font-weight: 400;
		letter-spacing: 0.05em;
		line-height: 1;
		background-color: var(--white);
		border: 1px solid var(--green01)!important;
		border-radius: 50%;
		text-decoration: none;
		transition: all 0.3s ease-out;
		padding: 0!important;
		margin: 0!important;
	}
	a {
		&.previouspostslink,
		&.nextpostslink {
			display: none;
		}
	}
	span {
		&.current {
			color: var(--white);
			font-weight: 400!important;
			background-color: var(--green01);
		}
	}
	.pages {
		display: none;
	}
}




/*
form
*/
input,
select,
textarea {
	padding: 12px 18px;
	font-size: 16px;
	border: 1px solid var(--darkgray);
	background-color: var(--white);
	@media (width <= 800px) {
		padding: 8px;
	}
}
[data-name="your-pref"],
[data-name="your-pref2"] {
	position: relative;
	display: inline-block;
	&::before,
	&::after {
		position: absolute;
		top: 50%;
		content: "";
		pointer-events: none;
	}
	&::before {
		right: 40px;
		translate: 0 -50%;
		width: 1px;
		height: calc(100% - 18px);
		background-color: var(--gray);
		z-index: 1;
	}
	&::after {
		right: 16px;
		translate: 0 -75%;
		rotate: 45deg;
		width: 10px;
		height: 10px;
		border-right: 2px solid var(--gray);
		border-bottom: 2px solid var(--gray);
	}
	select {
		position: relative;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		font-weight: 700;
		font-size: 14px;
		padding: 12px;
	}
}
button,
input {
    line-height: normal;
}
button {
	cursor: pointer;
	border: none;
	background: none;
	padding: 0;
}
textarea {
	vertical-align: top;
}
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="hidden"],
input[type="image"],
input[type="color"] {
	padding: 0;
}
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"],
textarea {
	width: 100%;
}


::placeholder {
	color: var(--darkgray);
	@media (width <= 800px) {
		font-size: 14px;
	}
}
.wpcf7-not-valid-tip {
	font-size: 14px;
	font-weight: 500;
}
.wpcf7-form-control-wrap {
	.wpcf7-radio,
	.wpcf7-checkbox {
		display: block;
	}
}
.wpcf7-checkbox,
.wpcf7-radio,
.wpcf7-acceptance {
	display: flex!important;
	flex-wrap: wrap;
	gap: 20px 30px;
	@media (width <= 800px) {
		gap: 5px 19px;
	}
	.wpcf7-list-item {
		display: inline-block;
		margin: 0;
	}
	label {
		display: flex;
		align-items: center;
		font-size: 16px;
		line-height: 1.3;
		cursor: pointer;
		@media (width <= 800px) {
			font-size: 14px;
		}
	}
	.wpcf7-list-item-label {
		display: inline-block;
		cursor: pointer;
		margin-left: 10px;
		@media (width <= 800px) {
			margin-left: 6px;
		}
	}
}
.wpcf7-checkbox,
.wpcf7-acceptance {
	input[type="checkbox"] {
		appearance: none;
		position: relative;
		width: 30px;
		height: 30px;
		border: 1px solid var(--darkgray);
		border-radius: 3px;
		background-color: var(--white);
		cursor: pointer;
		@media (width <= 800px) {
			width: 24px;
			height: 24px;
		}
		&:checked {
			border: 1px solid var(--green01);
			background-color: var(--green01);
			&::after {
				position: absolute;
				top: 5px;
				left: 4px;
				width: 20px;
				height: 12px;
				content: "";
				border-bottom: 4px solid var(--white);
				border-left: 4px solid var(--white);
				transform: rotate(-45deg);
				@media (width <= 800px) {
					width: 14px;
					height: 9px;
				}
			}
		}
	}
	.doui-text {
		@media (width <= 800px) {
			font-size: 13px;
		}
	}
}
[data-name="your-property"] {
	.wpcf7-checkbox {
		input[type="checkbox"] {
			position: relative;
			width: 30px;
			height: 30px;
			border: 1px solid var(--darkgray);
			border-radius: 9999px;
			cursor: pointer;
			@media (width <= 800px) {
				width: 22px;
				height: 22px;
			}
			&:checked {
				border: 1px solid var(--darkgray);
				background-color: var(--white);
				&::after {
					position: absolute;
					inset: 0;
					width: 18px;
					height: 18px;
					content: "";
					margin: auto;
					border: none;
					border-radius: 9999px;
					background-color: var(--green02);
					@media (width <= 800px) {
						width: 10px;
						height: 10px;
					}
				}		
			}
		}
	}
}
.wpcf7-radio {
	input[type="radio"] {
		appearance: none;
		position: relative;
		width: 30px;
		height: 30px;
		border: 1px solid var(--darkgray);
		border-radius: 9999px;
		cursor: pointer;
		@media (width <= 800px) {
			width: 22px;
			height: 22px;
		}
		&:checked {
			&::after {
				position: absolute;
				inset: 0;
				width: 18px;
				height: 18px;
				content: "";
				margin: auto;
				border-radius: 9999px;
				background-color: var(--green02);
				@media (width <= 800px) {
					width: 10px;
					height: 10px;
				}
			}		
		}
	}
}

.contact-privacy {
	@media (width <= 800px) {
		margin-top: -10px;
	}
	.doui {
		margin-bottom: 15px;
	}
	p {
		margin-bottom: 0;
		a {
			color: var(--blue);
		}
	}
}
#btn_contact {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px 0;
	max-width: 260px;
	margin: 0 auto;
	@media (width <= 800px) {
	}
	input[type="submit"],
	input[type="button"] {
		position: relative;
		width: 100%;
		max-width: 260px;
		height: 60px;
		display: flex;
		align-items: center;
		color: var(--green01);
		font-size: 18px;
		font-weight: 700;
		text-align: left;
		text-decoration: none;
		background-color: var(--yellowgreen04);
		border: none;
		border-radius: 9999px;
		padding-left: 30px;
		transition: all 0.3s ease-out;
		z-index: 1;
		overflow: hidden;
		cursor: pointer;
		@media (width >= 800px) {
			&:hover {
				background-color: inherit;
				transition: all 0.3s ease-out 0.1s;
				color: var(--white);
			}
		}
		@media (width <= 800px) {
			height: 52px;
			font-size: 16px;
			margin: 0 auto;
		}
	}
	.btn-confirm,
	.btn-back {
		position: relative;
		height: 60px;
		overflow: hidden;
		border-radius: 9999px;
		@media (width <= 800px) {
			height: 52px;
		}
		&::before {
			position: absolute;
			left: -100%;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: var(--green01);
			border-radius: 9999px;
			content: "";
			pointer-events: none;
			z-index: 0;
			transition: all 0.3s ease-out;
		}
		@media (width >= 800px) {
			&:hover {
				&::before {
					left: 0;
				}
				.btn-arrow {
					&::before {
						translate: -10% -50%;
						background-color: var(--green01);
					}
					&::after {
						background-color: var(--white);
					}
				}
			}
		}
	}
	.btn-arrow {
		right: 10px;
		top: 50%;
		translate: 0 -50%;
		z-index: 1;
		pointer-events: none;
		&::before {
			background-color: var(--green01);
		}
		&::after {
			border: 1px solid var(--green01);
		}
	}
}
.btn-confirm:has(input[type="button"]:disabled) {
	pointer-events: none;
	opacity: 0.5;
	.btn-circle {
		opacity: 0.5;
	}
}


/* sidenav */
.sidenav {
	position: fixed;
	bottom: 25px;
	right: 0;
	width: 166px;
	z-index: 9;
	@media (width <= 800px) {
		bottom: 0;
		width: 100%;
	}
	ul {
		width: 100%;
		margin: 0;
		padding: 0;
		@media (width <= 800px) {
			display: flex;
		}
		li {
			position: relative;
			width: 100%;
			height: 142px;
			line-height: 1;
			margin: 0 0 20px;
			padding: 0;
			@media (width <= 800px) {
				height: 55px;
				margin: 0;
			}
			&:last-child {
				margin-bottom: 0;
			}
			&::before {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				content: "";
				border-radius: 30px 0 0 30px;
				transition: all 0.3s ease-out;
				pointer-events: none;
				z-index: 1;
				@media (width <= 800px) {
					border-radius: 20px 20px 0 0;
				}
			}
			&.smcontact {
				a {
					background-color: var(--orange);
					&::before {
						left: -7px;
						top: -18px;
						transform-origin: right bottom;
						width: 57px;
						height: 54px;
						background-image: url(../img/icon_hatena.svg);
					}
					&::after {
						top: 16px;
						width: 98px;
						height: 74px;
						background-image: url(../img/icon_building.svg);
					}
					@media (width >= 800px) {
						&:hover {
							color: var(--white);
							background-color: var(--blue);
							&::before {
								scale: 1.45;
							}
							&::after {
								background-image: url(../img/icon_building_on.svg);
							}
						}
					}
					.sm-text {
						@media (width <= 800px) {
							padding-left: 27px;
							&::before {
								width: 21px;
								height: 20px;
								background-image: url(../img/icon_hatena.svg);
								background-repeat: no-repeat;
								background-position: left center;
								background-size: cover
							}
						}
					}
				}
			}
			&.smline {
				&::before {
					border: 3px solid var(--yellowgreen01);
					border-right: none;
					@media (width <= 800px) {
						border: 3px solid var(--yellowgreen01);
						border-bottom: none;
					}
				}
				@media (width >= 800px) {
					&:hover {
						&::before {
							border-color: var(--green02);
							border-width: 6px;
						}
					}
				}
				a {
					background-color: var(--white);
					padding-bottom: 22px;
					@media (width <= 800px) {
						padding-bottom: 0;
					}
					@media (width >= 800px) {
						&:hover {
							box-shadow: 10px 10px 0px var(--green02);
						}
					}
					&::after {
						top: 30px;
						width: 53px;
						height: 53px;
						background-image: url(../img/icon_line.svg);
					}
					.sm-text {
						@media (width <= 800px) {
							padding-left: 18px;
							&::before {
								translate: 0 -40%;
								width: 10px;
								height: 12px;
								background-color: var(--green02);
								clip-path: polygon(0 0, 0% 100%, 100% 50%);
							}
						}
					}
				}
			}
			a {
				position: relative;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				width: 100%;
				height: 100%;
				font-size: 20px;
				font-weight: 700;
				text-decoration: none;
				border-radius: 30px 0 0 30px;
				box-shadow: 10px 10px 0px rgba(0, 0, 0, 0.17);
				padding-bottom: 15px;
				transition: all 0.3s ease-out;
				@media (width <= 800px) {
					align-items: center;
					font-size: 16px;
					border-radius: 20px 20px 0 0;
					box-shadow: none;
					padding: 0;
				}
				&::before,
				&::after {
					position: absolute;
					pointer-events: none;
					background-position: left top;
					background-repeat: no-repeat;
					background-size: cover;
					content: "";
					transition: all 0.3s ease-out;
					@media (width <= 800px) {
						display: none;
					}
				}
				&::after {
					left: 50%;
					translate: -50% 0;
				}
				.sm-text {
					@media (width <= 800px) {
						position: relative;
						display: inline-block;
						&::before {
							position: absolute;
							left: 0;
							top: 50%;
							translate: 0 -50%;
							content: "";
							pointer-events: none;
						}
					}
				}
			}
		}
	}
}


/* bg-footer01 */
.bg-footer01 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	translate: 0 calc(-100% + 232px);
	@media (width <= 800px) {
		translate: 0 calc(-100% + 25px);
	}
	img {
		width: 100%;
		translate: 0 0;
	}
}

/* footer-contact */
.footer-contact {
	position: relative;
	margin: -230px 0 85px;
	z-index: 1;
	@media (width <= 800px) {
		margin: -25px 0 60px;
	}
}
.footer-contact-content {
	background-color: var(--green01);
	border-radius: 100px;
	padding: 104px 100px 92px;
	@media (width <= 800px) {
		border-radius: 30px;
		padding: 23px 20px 33px;
	}
	h2 {
		text-align: center;
		margin-bottom: 20px;
		@media (width <= 800px) {
			margin-bottom: 2px;
		}
		.en {
			color: rgba(var(--white-rgba), 0.4);
			font-size: 80px;
			font-weight: 600;
			line-height: 1;
			@media (width <= 800px) {
				font-size: 26px;
			}
		}
	}
	.read-footer-contact {
		color: var(--white);
		font-size: 36px;
		font-weight: 700;
		text-align: center;
		margin-bottom: 50px;
		@media (width <= 800px) {
			font-size: 14px;
			margin-bottom: 15px;
		}
	}
	.footer-contact-link {
		display: flex;
		gap: 0 36px;
		@media (width <= 800px) {
			flex-wrap: wrap;
			gap: 10px 0;
		}
		a {
			position: relative;
			display: flex;
			flex-wrap: wrap;
			align-content: center;
			align-items: center;
			width: 100%;
			height: 145px;
			text-decoration: none;
			border-radius: 30px;
			padding-left: 110px;
			transition: background-color 0.3s ease-out;
			@media (width >= 800px) {
				&:hover {
					background-color: var(--white);
					&::before {
						border: 5px solid var(--yellowgreen01);
					}
					.footer-tel {
						color: var(--yellowgreen01);
					}
					p {
						color: var(--black);
					}
					.footer-contact-text {
						color: var(--green02);
					}
				}
			}
			@media (width <= 800px) {
				height: 66px;
				border-radius: 10px;
				padding-left: 58px;
			}
			&::before {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				content: "";
				border: 1px solid var(--white);
				border-radius: 30px;
				transition: all 0.3s ease-out;
				pointer-events: none;
				z-index: 0;
				@media (width <= 800px) {
					border-radius: 10px;
				}
			}
			&.ftel {
				pointer-events: none;
				@media (width <= 800px) {
					pointer-events: auto;
				}
				.footer-tel-img {
					left: 44px;
					@media (width <= 800px) {
						left: 22px;
						width: 23px;
					}
				}
			}
			&.fcontact {
				.footer-contact-img {
					left: 32px;
					width: 58px;
					@media (width <= 800px) {
						left: 22px;
						width: 29px;
					}
				}
			}
			.footer-tel-img,
			.footer-contact-img  {
				position: absolute;
				top: 50%;
				translate: 0 -50%;
				img {
					width: 100%;
				}
			}
			.footer-tel {
				display: block;
				color: var(--white);
				font-size: 52px;
				font-weight: 700;
				line-height: 1;
				padding-top: 5px;
				transition: color 0.3s ease-out;
				@media (width <= 800px) {
					font-size: 26px;
				}
			}
			p {
				color: var(--white);
				font-weight: 700;
				margin: 0;
				transition: color 0.3s ease-out;
				@media (width <= 800px) {
					display: block;
					width: 100%;
					font-size: 12px;
				}
			}
			.footer-contact-text {
				display: block;
				color: var(--white);
				font-size: 32px;
				font-weight: 700;
				transition: color 0.3s ease-out;
				@media (width <= 800px) {
					font-size: 18px;
				}
			}
		}
	}
}


/*
footer
*/
footer {
	position: relative;
	padding: 0 0 25px;
	z-index: 5;
	@media (width <= 800px) {
		padding-bottom: 20px;
	}
	&::after {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 10.9vw;
		content: "";
		background-image: url(../img/bg_footer02.webp);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
		pointer-events: none;
		z-index: -1;
		@media (width <= 800px) {
			height: 41.9vw;
			background-image: url(../img/bg_footer02_sp.webp);
		}
	}
	.siteinfo {
		display: flex;
		justify-content: space-between;
		margin-bottom: 175px;
		z-index: 1;
		@media (width <= 800px) {
			display: block;
			padding: 0 20px;
			margin-bottom: 345px;
		}
		.l-footer {
			width: 415px;
			@media (width <= 800px) {
				width: 100%;
				border-bottom: 1px solid var(--darkgray);
				margin-bottom: 40px;
				padding-bottom: 40px;
			}
			.logo-footer {
				width: 100%;
				max-width: 413px;
				margin: 0 0 20px -25px;
				@media (width <= 800px) {
					max-width: 325px;
					margin: 0 0 20px -30px;
				}
				img {
					width: 100%;
				}
			}
			address {
				font-size: 16px;
				line-height: 1.87;
				margin-bottom: 75px;
				@media (width <= 800px) {
					font-size: 14px;
					line-height: 1.7;
					margin-bottom: 20px;
				}
			}
			.group-company {
				h2 {
					font-size: 16px;
					margin-bottom: 8px;
					@media (width <= 800px) {
						font-size: 15px;
					}
				}
				ul {
					margin: 0;
					padding: 0;
					li {
						margin: 0;
						padding: 0;
						a {
							position: relative;
							font-size: 15px;
							line-height: 1.4;
							padding-right: 25px;
							text-decoration: none;
							@media (width >= 800px) {
								&:hover {
									font-weight: 700;
								}
							}
							@media (width <= 800px) {
								font-size: 14px;
								padding-right: 20px;
							}
							&::after {
								position: absolute;
								right: 0;
								top: 50%;
								translate: 0 -50%;
								width: 18px;
								height: 18px;
								content: "";
								background-image: url(../img/icon_link.svg);
								background-repeat: no-repeat;
								background-position: left top;
								background-size: cover;
								@media (width <= 800px) {
									width: 13px;
									height: 13px;
								}
							}
						}
					}
				}
			}
		}
		.r-footer {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			width: 52%;
			@media (width <= 800px) {
				flex-wrap: wrap;
				width: 100%;
				gap: 40px 0;
			}
			nav {
				width: auto;
				@media (width <= 800px) {
					width: 49%;
				}
				&.footermenu02 {
					ul {
						li {
							margin-bottom: 10px;
							@media (width <= 800px) {
								margin-bottom: 15px;
							}
							&.fmprivacy {
								margin-top: 25px;
								@media (width <= 800px) {
									margin-top: 0;
								}
							}
							&:last-child {
								margin-bottom: 0;
							}
							a {
								font-size: 15px;
								font-weight: 400;
								@media (width <= 800px) {
									font-size: 14px;
								}
							}
						}
					}
				}
				&.footermenu03 {
					border-left: 1px solid var(--darkgray);
					padding-left: 38px;
					@media (width <= 800px) {
						border-left: none;
						border-top: 1px solid var(--darkgray);
						width: 100%;
						padding: 40px 0 0;
					}
				}
				ul {
					margin: 0;
					padding: 0;
					li {
						position: relative;
						line-height: 1.5;
						margin: 0 0 28px;
						padding: 0;
						@media (width <= 800px) {
							margin-bottom: 15px;
						}
						&:last-child {
							margin-bottom: 0;
						}
						&.link {
							a {
								padding-right: 30px;
								@media (width <= 800px) {
									padding-right: 25px;
								}
								&::after {
									position: absolute;
									right: 0;
									top: 50%;
									translate: 0 -50%;
									width: 18px;
									height: 18px;
									content: "";
									background-image: url(../img/icon_link.svg);
									background-repeat: no-repeat;
									background-position: left top;
									background-size: cover;
									@media (width <= 800px) {
										width: 17px;
										height: 17px;
									}
								}
							}
						}
						&.spmcustomers {
							@media (width <= 800px) {
								margin-top: 30px;
							}
						}
						a {
							position: relative;
							display: inline-block;
							font-size: 16px;
							font-weight: 700;
							text-decoration: none;
							@media (width <= 800px) {
								font-size: 14px;
							}
						}
						ul {
							margin-top: 15px;
							@media (width <= 800px) {
								position: absolute;
								left: 95px;
								top: 0;
								width: calc(100% - 95px);
								margin-top: 0;
							}
							li {
								margin-left: -1em;
								margin-bottom: 8px;
								&::before {
									margin-left: 1em;
									content: "・";
								}
								&:last-child {
									margin-bottom: 0;
								}
								a {
									font-size: 15px;
									font-weight: 400;
								}
							}
						}
					}
				}
			}
		}
	}
	.pagetop {
		position: absolute;
		right: 40px;
		bottom: 45px;
		display: block;
		width: 100px;
		text-decoration: none;
		z-index: 2;
		@media (width >= 800px) {
            &:hover {
				.p-text {
					background-color: var(--blue);
					&::after {
						top: 8px;
						opacity: 1;
					}
				}
				.p-img {
					top: -18px;
					rotate: 14deg;
				}
            }
        }
		@media (width <= 800px) {
			right: 20px;
			bottom: 85px;
			width: 88px;
		}
		.p-text {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 96px;
			height: 96px;
			color: var(--white);
			font-size: 16px;
			font-weight: 600;
			background-color: var(--darkgray);
			border-radius: 50%;
			transition: background-color 0.3s ease-out;
			@media (width <= 800px) {
				width: 87px;
				height: 87px;
				font-size: 14px;
				padding-top: 3px;
			}
			&::before,
			&::after {
				position: absolute;
				left: 50%;
				top: 15px;
				translate: -50% 0;
				width: 13px;
				height: 9px;
				content: "";
				background-image: url(../img/arrow_u.svg);
				background-position: left top;
				background-repeat: no-repeat;
				background-size: cover;
				transition: all 0.3s ease-out;
			}
			&::after {
				opacity: 0;
			}
		}
		.p-img {
			position: relative;
			top: -8px;
			display: block;
			width: 85px;
			margin: 0 0 0 auto;
			transition: all 0.3s ease-out;
			@media (width <= 800px) {
				top: -11px;
				width: 57px;
				margin: 0 0 0 20px;
			}
		}
	}
	.footer-bottom {
		.copyright {
			font-size: 12px;
			margin-bottom: 0;
			@media (width <= 800px) {
				text-align: center;
			}
		}
	}
}