@charset "UTF-8";
/*####################################

1. Fonts Lord
2. Element Settings
3. Plugin Settings
┣3.1 Slick
┗3.2 Lightbox2
4. Snippet Css
┣4.1 Font
┣4.2 Devise Hidden
┣4.3 Margin
┣4.4 Line Clamp
┗4.5 Pseudo Aspect Ratio
5. Js Animation
┗5.1 Fade
6. Other
┣6.1 Bread Crumb
┗6.2 reCAPTCHA

####################################*/
/*====================================

1. Fonts Lord

====================================*/
@font-face {
	font-family: 'NotoSansJp';
	font-style: normal;
	font-weight: 300;
	src: url('../fonts/NotoSansJP-Light.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'NotoSansJp';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/NotoSansJP-Regular.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'NotoSansJp';
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/NotoSansJP-Medium.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'NotoSerifJp';
	font-style: normal;
	font-weight: 300;
	src: url('../fonts/NotoSerifJP-Light.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'NotoSerifJp';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/NotoSerifJP-Regular.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'NotoSerifJp';
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/NotoSerifJP-SemiBold.woff2') format('woff2');
	font-display: swap;
}
/*====================================

2. Element Settings

====================================*/
html {
	background-color: white;
}
body {
	line-height: 1.6;
	box-sizing: border-box;
	font-family: "NotoSansJp", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
@media screen and (max-width: 768px) {
	body::-webkit-scrollbar {
		display: none;
	}
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	object-fit: cover;
	transition: .3s;
	image-rendering: -webkit-optimize-contrast;
	user-drag: none;
	-webkit-user-drag: none;
	-moz-user-select: none;
}
a img:hover {
	opacity: .7;
}
ul {
	list-style: none;
}
p, dd, li {
	text-align: justify;
}
a {
	text-decoration: none;
	color: black;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	transition: .3s;
}
iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	vertical-align: bottom;
}
@media screen and (min-width: 769px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}
@media screen and (max-width: 768px) {
	input, select, textarea {
		font-size: 16px;
	}
}
/*====================================

3.Plugin Settings

====================================*/
/*
3.1 slick
====================================*/
.slick-list {
	height: 100%;
}
.slick-track {
	height: 100%;
}
.slick-dots {
	bottom: 29px;
}
.slick-dots li {
	width: 9px;
	height: 9px;
	margin: 0 10px;
}
.slick-dots li button {
	width: 9px;
	height: 9px;
	background: white;
	border-radius: 22px;
}
.slick-dots li.slick-active button {
	background: #1B1B1B;
}
.slick-dots li button:before {
	display: none;
}
.slick-dotted.slick-slider {
	margin-bottom: 0px;
}
@media screen and (max-width: 768px) {
	.slick-dots {
		bottom: 13px;
	}
}
/*
3.2 Lightbox2
====================================*/
.lightbox {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
.lightbox img {
	opacity: 1 !important;
	border: 2px solid white !important;
}
@media screen and (min-width: 769px) {
	.lb-outerContainer {
		background-color: unset !important;
	}
	.lb-container {
		padding: 0 !important;
		height: 100% !important;
	}
	.lightbox img {
		width: auto !important;
		max-width: 1000px!important;
	}
	.lb-nav{

	}
	.lb-nav a{
		position: absolute;
		width: 60px!important;
		background: none!important;
		opacity: 1!important;
	}
	.lb-nav a.lb-prev{
		left: -60px;
	}
	.lb-nav a.lb-next{
		right: -60px;
	}
	.lb-nav a::before{
		content: '';
		position:absolute;
		top:50%;
		width: 20px;
		height: 20px;
		border: 0px;
		-ms-transform: rotate(45deg) translate(-50%, -50%);
		-webkit-transform: rotate(45deg) translate(-50%, -50%);
		transform: rotate(45deg) translate(-50%, -50%);
		z-index: 1;
		transition:.3s;
		opacity: .7;
	}
	.lb-nav a:hover::before{
		opacity:1;
	}
	.lb-nav a.lb-prev::before{
		left: 25px;
		border-bottom: solid 3px white;
		border-left: solid 3px white;
	}
	.lb-nav a.lb-next::before{
		right:25px;
		border-top: solid 3px white;
		border-right: solid 3px white;
	}
	.lb-nav a::after{
		content: '';
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}
}
@media screen and (max-width: 768px) {
	.lightbox .lb-outerContainer {
		width: 90% !important;
		height: auto !important;
		max-width: 600px !important;
	}
	.lb-container {
		padding: 0 !important;
	}
	.lb-dataContainer {
		width: 90% !important;
		max-width: 600px !important;
	}
	.lightbox img {
		height: auto !important;
		width: 100% !important;
		max-height: 500px!important;
	}
	.lb-nav{

	}
	.lb-nav a{
		position: absolute;
		width: 60px!important;
		background: none!important;
		opacity: 1!important;
	}
	.lb-nav a.lb-prev{
		left: 0px;
	}
	.lb-nav a.lb-next{
		right: 0px;
	}
	.lb-nav a::before{
		content: '';
		position:absolute;
		top:50%;
		width: 20px;
		height: 20px;
		border: 0px;
		-ms-transform: rotate(45deg) translate(-50%, -50%);
		-webkit-transform: rotate(45deg) translate(-50%, -50%);
		transform: rotate(45deg) translate(-50%, -50%);
		z-index: 1;
		transition:.3s;
		opacity: 1;
	}
	.lb-nav a.lb-prev::before{
		left: 25px;
		border-bottom: solid 3px white;
		border-left: solid 3px white;
	}
	.lb-nav a.lb-next::before{
		right:25px;
		border-top: solid 3px white;
		border-right: solid 3px white;
	}
	.lb-nav a::after{
		content: '';
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}
	.lb-nav a.lb-prev::after{
		background: linear-gradient(to right, rgb(0 0 0 /20%), rgb(0 0 0 /0%));
	}
	.lb-nav a.lb-next::after{
		background: linear-gradient(to left, rgb(0 0 0 /20%), rgb(0 0 0 /0%));
	}
}
/*====================================

4. Snippet Css

====================================*/
/*
4.1 Font
====================================*/
.mincho {
	font-family: "NotoSerifJp", "游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.gothic {
	font-family: "NotoSansJp", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}
.mincho_vltxt {
	font-family: "游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	writing-mode: vertical-rl;
}
.gothic_vltxt {
	font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	writing-mode: vertical-rl;
}
/*
4.2 Devise Hidden

.pc_hidden 769px <= hidden(visible : tablet, sp)
.mb_hidden 768px >= hidden(visible : pc)
.sp_hidden 500px >= hidden(visible : pc, tablet)
.pc_sp_hidden 769px <= hidden  &&  500px >= hidden(visible : tablet)
.pc_tb_hidden 501px <= hidden(visible : sp)
====================================*/
.pc_hidden {
	display: none;
}
.pc_tb_hidden {
	display: none;
}
.pc_sp_hidden {
	display: none;
}
@media screen and (max-width: 768px) {
	.pc_hidden {
		display: block;
	}
	.mb_hidden {
		display: none;
	}
	.pc_sp_hidden {
		display: block;
	}
}
@media screen and (max-width: 500px) {
	.pc_tb_hidden {
		display: block;
	}
	.pc_sp_hidden {
		display: none;
	}
	.sp_hidden {
		display: none;
	}
}
/*
4.3 Margin
====================================*/
.mb1 {
	margin-bottom: 1em;
}
.mb1_5 {
	margin-bottom: 1.5em;
}
.mb2 {
	margin-bottom: 2em;
}
/*
4.4 Line Clamp
====================================*/
.line_clamp {
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.line_c1 {
	-webkit-line-clamp: 1;
}
.line_c2 {
	-webkit-line-clamp: 2;
}
.line_c3 {
	-webkit-line-clamp: 3;
}
.line_c4 {
	-webkit-line-clamp: 4;
}
.line_c5 {
	-webkit-line-clamp: 5;
}
_::-webkit-full-page-media, _:future, :root .line_clamp {
	text-align: left;
}
/*
4.5 Pseudo Aspect Ratio
====================================*/
@media screen and (max-width: 768px) {
	.ratioParent{
		position:relative!important;
		width:100%!important;
		height:0!important;
		padding-top:56.25%;
	}
	.ratioChild{
		position:absolute!important;
		top:0!important;
		left:0!important;
		width:100%!important;
		height:100%!important;
	}
}
/*====================================

5. Js Animation

====================================*/
/*
5.1 Fade(Fade Up, Fade In) 
====================================*/
.fade {
	opacity: 0;
	transition-duration: 1000ms;
	transition-property: opacity, transform;
}
.fade_up {
	transform: translate(0, 50px);
}
.fade_in {
	opacity: 1;
	transform: translate(0, 0);
}
/*====================================

6. Other

====================================*/
/*
6.1 Bread Crumb
====================================*/
/*-- pc --*/
@media screen and (min-width: 769px) {
	.breadcrumb {
		display: block;
		font-size: 12px;
		padding-top: 20px;
	}
	.breadcrumb span {
		margin: 0px 5px;
		FONT-WEIGHT: 500;
	}
	.breadcrumb a {
		FONT-WEIGHT: 500;
		text-decoration: underline;
	}
	.breadcrumb span:first-child {
		margin-left: 0;
	}
}
/*-- sp --*/
@media screen and (max-width: 768px) {
	.breadcrumb {
		display: block;
		font-size: 12px;
		padding-top: 20px;
	}
	.breadcrumb span {
		margin: 0px 5px;
		FONT-WEIGHT: 500;
	}
	.breadcrumb a {
		FONT-WEIGHT: 500;
		text-decoration: underline;
	}
	.breadcrumb span:first-child {
		margin-left: 0;
	}
}