@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;500;700&display=swap');

@charset "UTF-8";


/* ******************************************
	reset
****************************************** */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

:where([hidden]:not([hidden='until-found'])) {
	display: none !important;
	}

:where(html) {
	-webkit-text-size-adjust: none;
	}

@supports not (min-block-size: 100dvb) {
	:where(html) {
		block-size: 100%;
		}
}

@media (prefers-reduced-motion: no-preference) {
	:where(html:focus-within) {
		scroll-behavior: smooth;
		}
}

:where(body) {
	block-size: 100%;
	block-size: 100dvb;
	line-height: 1.5;
	font-family: system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	}

:where(input, button, textarea, select) {
	font: inherit;
	color: inherit;
	}

:where(textarea) {
	resize: vertical;
	resize: block;
	}

:where(button, label, select, summary, [role='button'], [role='option']) {
	cursor: pointer;
	}

:where(:disabled) {
	cursor: not-allowed;
	}

:where(label:has(> input:disabled), label:has(+ input:disabled)) {
	cursor: not-allowed;
	}

:where(button) {
	border-style: solid;
	}

:where(a) {
	text-underline-offset: 0.2ex;
	}

:where(ul, ol) {
	list-style: none;
	}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
	display: block;
	}

:where(img, picture, svg) {
	max-inline-size: 100%;
	block-size: auto;
	}

:where(p, h1, h2, h3, h4, h5, h6) {
	overflow-wrap: break-word;
	}

:where(h1, h2, h3) {
	line-height: calc(1em + 0.5rem);
	}

:where(hr) {
	border: none;
	border-block-start: 1px solid;
	color: inherit;
	block-size: 0;
	overflow: visible;
	}

:where(:focus-visible) {
	outline: 2px solid var(--focus-color, Highlight);
	outline-offset: 2px;
	}

:where(.visually-hidden:not(:focus, :active, :focus-within, .not-visually-hidden)) {
	clip-path: inset(50%) !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden !important;
	position: absolute !important;
	white-space: nowrap !important;
	border: 0 !important;
	}



/* ******************************************
	general
****************************************** */
html,
body {
	background-color: #fff;
	font-size: 16px;
	line-height: 1.4;
	font-family: 'Noto Serif JP', serif;
	font-weight: 400;
	font-feature-settings: "palt";
	}

html {
    scroll-behavior: smooth;
}

/* ******************************************
	display control
****************************************** */
.pc_block {
	display: block;
	}
.pc_inline {
	display: inline;
	}
.sp_block {
	display: none;
	}
.sp_inline {
	display: none;
	}
@media screen and (max-width:699px) {
	.pc_block {
		display: none;
		}
	.pc_inline {
		display: none;
		}
	.sp_block {
		display: block;
		}
	.sp_inline {
		display: inline;
		}
}

@media screen and (min-width:700px) {
	a[href*="tel:"] {
		pointer-events: none;
		cursor: default;
		text-decoration: none !important;
		}
}



/* ******************************************
	tag
****************************************** */
img {
	height: auto;
	border: none;
	vertical-align: middle;
	}

picture {
	display: block;
	margin: 0 auto;
	padding: 0;
	line-height: 0.1em;
	}

picture img {
	width: 100%;
	}



/* ******************************************
	margin control
****************************************** */
/* top */
.mt30 {
	margin-top: 30px !important;
	}
.mt60 {
	margin-top: 60px !important;
	}
/* bottom */
.mb30 {
	margin-bottom: 30px;
	}
.mb60 {
	margin-bottom: 60px;
	}



/* ******************************************
	padding control
****************************************** */
/* top bottom */
.py10 {
	padding-top: 10px;
	padding-bottom: 10px;
	}
.py15 {
	padding-top: 15px;
	padding-bottom: 15px;
	}
.py20 {
	padding-top: 20px;
	padding-bottom: 20px;
	}
.py40 {
	padding-top: 40px;
	padding-bottom: 40px;
	}
.py60 {
	padding-top: 60px;
	padding-bottom: 60px;
	}
.py90 {
	padding-top: 90px;
	padding-bottom: 90px;
	}
.py120 {
	padding-top: 120px;
	padding-bottom: 120px;
	}
/* top */
.pt45 {
	padding-top: 45px;
	}
.pt90 {
	padding-top: 90px;
	}
/* bottom */
.pb45 {
	padding-bottom: 45px;
	}
.pb90 {
	padding-bottom: 90px;
	}



/* ******************************************
	font control
****************************************** */
/* font-size */
.fs_14 {
	font-size: 14px;
	}
.fs_16 {
	font-size: 16px;
	}
.fs_18 {
	font-size: 18px;
	}
.fs_20 {
	font-size: 20px;
	}
.fs_28 {
	font-size: 28px;
	}
.fs_36 {
	font-size: 36px;
	}
.fs_46 {
	font-size: 46px;
	}
/* line-height */
.lh_10 {
	line-height: 1.0;
	}
.lh_12 {
	line-height: 1.2;
	}
.lh_14 {
	line-height: 1.4;
	}
.lh_16 {
	line-height: 1.6;
	}
.lh_18 {
	line-height: 1.8;
	}
/* letter-spacing */
.ls_1 {
	letter-spacing: 1px;
	}
.ls_2 {
	letter-spacing: 2px;
	}
/* font-color */
.fc_wh {
	color: #fff;
}
.fc_bk {
	color: #000;
}


/* ******************************************
	text control
****************************************** */
.txt_br i {
	display: inline-block;
	}

.align_center {
	text-align: center;
	}

.align_right {

	text-align: right;
	}

i,
address {
	font-style: normal;
	}



/* ******************************************
	fadein befor
****************************************** */
.js-fadeUp {
	opacity: 0;
	transform: translateY(100px);
	transition: opacity 0.5s, transform 0.5s;
	}
.js-fadeLeft {
	opacity: 0;
	transform: translateX(-100px);
	transition: opacity 0.5s, transform 0.5s;
	}
.js-fadeRight {
	opacity: 0;
	transform: translateX(100px);
	transition: opacity 0.5s, transform 0.5s;
	}



/* ******************************************
	fadein after
****************************************** */
.js-fadeUp.is-inview {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.5s;
	}
.js-fadeLeft.is-inview {
	opacity: 1;
	transform: translateX(0);
	transition-delay: 0.5s;
	}
.js-fadeRight.is-inview {
	opacity: 1;
	transform: translateX(0);
	transition-delay: 0.5s;
	}



/* ******************************************
	header
****************************************** */
header {
	position: fixed;
	width: 100%;
	background-color: #fff;
	z-index: 10;
	}
	.header_container {
		position: relative;
		width: 96%;
		max-width: 1160px;
		height: 97px;
		margin: 0 auto;
		padding: 10px 0;
		}
	@media screen and (max-width:767px) {
	.header_container {
		height: 75px;
		}
	}
		.site_title {
			position: absolute;
			left: calc(50% - 175px);
			width: 350px;
			height: 77px;
			}
		@media screen and (max-width:767px) {
		.site_title {
			left: calc(50% - 125px);
			width: 250px;
			height: 55px;
			}
		}
			.site_title a {
				display: inline-block;
				width: 100%;
				height: auto;
				}
				.site_title a img {
					width: 100%;
					height: auto;
					}

		.site_contact {
			position: absolute;
			top: 6px;
			right: 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			width: 280px;
			}
		@media screen and (max-width:1023px) {
		.site_contact {
			display: none;
			}
		}
			.site_contact .tel {
				color: #000;
				font-size: 31px;
				line-height: 32px;
				}
			.site_contact p {
				width: 100%;
				font-size: 14px;
				text-align: center;
				}
			.site_contact .btn_g {
				display: inline-block;
				width: calc(50% - 3px);
				margin: 3px 0 0;
				padding: 3px 0;
				background-color: #888;
				color: #fff;
				font-size: 12px;
				font-weight: 700;
				text-align: center;
				text-decoration: none;
				border: 1px solid #888;
				border-radius: 5px;
				}
			.site_contact .btn_g:hover {
				background-color: #fff;
				color: #888;
				}


				



/* ******************************************
	header nav
****************************************** */
	.nav_container {
		width: 100%;
		margin: 0 auto;
		padding: 2px 0;
		background-color: #000;
		}
@media screen and (max-width:767px) {
	.nav_container {
		display: none;
		}
}
		.nav_container ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin: 0;
			padding: 0;
			}
			.nav_container ul li {
				margin: 0 20px;

				list-style: none;
				}
				.nav_container ul li a {
					display: inline-block;
					padding: 5px 10px;
					color: #fff;
					font-weight: 700;
					text-decoration: none;
					}
				.nav_container ul li a:hover {
					background-color: #666;
					}



/* ******************************************
	footer
****************************************** */
footer {
	width: 100%;
	background-color: #000;
	color: #fff;
	}

	.footer_container {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
		width: 90%;
		max-width: 1140px;
		margin: 0 auto;
		padding: 50px 0;
		}
@media screen and (max-width:1023px) {
	.footer_container {
		justify-content: center;
		}
}
		.footer_address {
			max-width: 380px;
			}
			.footer_address img {
				width: 100%;
				margin: 0 0 20px;
				}
			.footer_address address {
				margin: 0;
				color: #fff;
				text-align: center;
				}
				.footer_address address a {
					color: #fff;
					}

		.footer_nav {
			}
@media screen and (max-width:1023px) {
		.footer_nav {
			display: none;
			}
}

				.footer_nav nav ul {
					margin: 0;
					}
					.footer_nav nav ul li {
						width: 100%;
						margin: 15px 0;
						padding: 0;
						}
						.footer_nav nav ul li a {
							display: inline-block;
							padding: 5px;
							border-bottom: 1px solid transparent;
							font-size: 15px;
							line-height: 18px;
							font-weight: 400;
							color: #fff;
							text-decoration: none;
							transition: 0.5s;
							}
						.footer_nav ul li a:hover {
							border-bottom: 1px solid #fff;
							}
						.footer_nav nav ul li ul {
							margin: 0 0 0 30px;
							}

		.copyright {
			width: 100%;
			margin: 0;
			padding: 20px 0 40px;
			border-top: 1px solid #fff;
			text-align: center;
			font-size: 12px;
			color: #fff;
			}


/* ******************************************
	pagetop
****************************************** */
.pagetop {
	display: none;
	position: fixed;
	right: 0;
	bottom: 100px;
	z-index: 5;
	}
@media screen and (max-width:599px) {
.pagetop {
	bottom: 50px;
	}
}
	.pagetop a {
		display: block;
		font-size: 0;
		width: 50px;
		height: 50px;
		text-align: center;
		background: rgba(0, 0, 0, 0.8);
		line-height: 50px;
		transition : 0.5s;
		}
		.pagetop a i {
			font-size: 20px;
			color:#fff;
			line-height: 50px;
			transition : 0.2s;
			}

	.pagetop a:hover {
		background: rgba(128, 128, 128, 0.8);
		color:  #fff;
		transition : 0.5s;
		}
		.pagetop a:hover i {
			color:  #fff;
			transition : 0.2s;
			}



/* ******************************************
	container
****************************************** */
main {
	width: 100%;
	margin: 0 auto;
	padding: 132px 0 0;
	}
@media screen and (max-width:767px) {
main {
	padding: 75px 0 0;
	}
}		

section {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	}

.wrap {
	width: 90%;
	max-width: 940px;
	margin: 0 auto;
	padding: 0;
	}

.container {
	width: 90%;
	}


.col2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	}
	.col2 div {
		width: calc( ( 100% - 30px ) / 2 );
		}
@media screen and (max-width:767px) {
	.col2 div {
		width: 100%;
		margin: 0 auto 40px;
		}
}

.col3 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	}
	.col3 div {
		width: calc( ( 100% - 50px ) / 3 );
		}
@media screen and (max-width:767px) {
	.col3 div {
		width: 100%;
		margin: 0 auto 40px;
		}
}


#content_loop {
	position: relative;
	margin: 0;
	padding: 0 0 40px;
	}

.loop_wrap {
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	width: 100vw;
	overflow: hidden;
	}

.loop_wrap ul {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	width: 100%;
	margin: 0;
	padding: 0;
	}

.loop_wrap li {
	display: inline-block;
	width: calc(100vw / 2);
	min-width: 150px;
	margin: 0 0 0 0;
	list-style: none;
	text-align: center;
	}

.loop_wrap li a {
	display: block;
	}

.loop_wrap li img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	}

.loop_wrap li a:hover {
	opacity: .7;
	}

.loop_wrap ul:first-child {
	-webkit-animation: loop 50s -25s linear infinite;
	animation: loop 50s -25s linear infinite;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform;
	}

.loop_wrap ul + ul {
	-webkit-animation: loop2 50s  linear infinite;
	animation: loop2 50s linear infinite;
	}

.loop_wrap:hover ul {
	animation-play-state: paused;
	}

@-webkit-keyframes loop {
	0% {
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%);
		}
	to {
		-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		transform: translateX(-100%);
		}
	}

@keyframes loop {
	0% {
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%);
		}
	to {
		-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		transform: translateX(-100%);
		}
	}

@-webkit-keyframes loop2 {
	0% {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
		}
	to {
		-webkit-transform: translateX(-200%);
		-ms-transform: translateX(-200%);
		transform: translateX(-200%);
		}
	}

@keyframes loop2 {
	0% {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
		}
	to {
		-webkit-transform: translateX(-200%);
		-ms-transform: translateX(-200%);
		transform: translateX(-200%);
		}
	}



#content_bnr {
	position: relative;
	margin: 0;
	padding: 0 0 40px;
	}

.bnr_wrap ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	}
	.bnr_wrap ul li {
		list-style-type: none;
		width: 25%;
		min-width: 230px;
		padding: 10px;
		}
@media screen and (max-width:511px) {
	.bnr_wrap ul li {
		width: 90%;
		min-width: 300px;
		}
}

		.bnr_wrap ul li a {
			display: block;
			width: 100%;
			border: 1px solid #ccc;
			}
		.bnr_wrap ul li a:hover {
			background-color: #eee;
			}
			.bnr_wrap ul li a img {
				width: 100%;
				}


.fix_txt {
	position: fixed;
	bottom: 5px;
	right: 5px;
	display: inline-block;
	padding: 5px 10px;
	background-color: #fff;
	color: #000;
	z-index: 5;
}