/* ----------------------------------------
* responsive
---------------------------------------- */
@media only screen and (min-width: 769px) {
/* @media only screen and (min-width: 1024px) { */
	.pc {
		display: block!important;
	}
	.pc-flex {
		display: flex!important;
	}
	.sp,
	.sp-flex {
		display: none!important;
	}
}
@media only screen and (max-width: 768px) {
/* @media only screen and (max-width: 1023px) { */
	.pc,
	.pc-flex {
		display: none!important;
	}
	.sp {
		display: block!important;
	}
	.sp-flex {
		display: flex!important;
	}
}

/* ----------------------------------------
* color
---------------------------------------- */
.bl {
	color: #353535;
}
.wh {
	color: #fff;
}
.blue {
	color: #009ce5;
}
.gre {
	color: #20a388!important;
}

/* ----------------------------------------
* font
---------------------------------------- */
body {
	/* font-family: 'Noto Sans JP', sans-serif; */
	font-family: a-otf-ud-shin-go-pr6n, sans-serif;
	font-weight: 300;
	font-style: normal;
}
.go-l {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 300;
}
.go-m {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
}
.go-b {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 600;
}
.min-l {
	font-family: dnp-shuei-mincho-pr6n, sans-serif;
	font-weight: 400;
	font-style: normal;
}
.min-m {
	font-family: dnp-shuei-mincho-pr6n, sans-serif;
	font-weight: 500;
	font-style: normal;
}
.min-b {
	font-family: dnp-shuei-mincho-pr6n, sans-serif;
	font-weight: 500;
	font-style: normal;
}

.ls10 {
	letter-spacing: 0.01em;
}
.ls25 {
	letter-spacing: 0.025em;
}
.ls50 {
	letter-spacing: 0.05em;
}
.ls75 {
	letter-spacing: 0.075em;
}
.ls100 {
	letter-spacing: 0.1em;
}
.ls140 {
	letter-spacing: 0.14em;
}
.ls180 {
	letter-spacing: 0.18em;
}
.ls200 {
	letter-spacing: 0.2em;
}
.ls215 {
	letter-spacing: 0.215em;
}


/* ----------------------------------------
* effect
---------------------------------------- */
.translucent {
	transition: .3s;
}
.translucent:hover {
	opacity: 0.8!important;
}


/* ----------------------------------------
* block
---------------------------------------- */
.block {
	display: block;
	width: 100%;
}


/* ----------------------------------------
* background image
---------------------------------------- */
.bg-img {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}


/* ----------------------------------------
* bread crumb
---------------------------------------- */
.bread-crumb {
	position: relative;
	margin: 0;
	padding: 2% 6%;
	z-index: 10;
}
.bread-crumb li {
	display: inline-block;
	color: #9b9b9a;
}
@media only screen and (max-width: 768px) {
	.bread-crumb {
		padding: 6%;
		font-size: 80%;
	}
}


/* ----------------------------------------
* page nate
---------------------------------------- */
.page-nate {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 120%;
	padding: 0 0 8% 0;
}
.page-numbers {
	display: block;
	background: #9FA0A0;
	color: #fff;
	width: 40px;
	height: 40px;
	line-height: 40px;
	margin: 0 10px;
	font-family: 'Noto Serif JP', serif;
	transition: .3s;
}
.page-numbers:hover {
	opacity: .8;
}
.page-nate .current {
	color: #fff;
	background: #3e639c;
	border: 1px solid #3e639c;
}
.page-nate .next,
.page-nate .prev {
	display: none;
}
@media only screen and (max-width: 768px) {
	.page-nate {
		padding: 0 0 16% 0;
	}
}


.thanks-txt {
	padding: 8% 24% 12% 24%;
	text-align: center;
	margin: 0;
	font-size: 120%;
	line-height: 2;
}
.txt-404 {
	padding: 16% 24%;
	text-align: center;
	margin: 0;
	font-size: 120%;
	line-height: 2;
}


/* ----------------------------------------
* main slider
---------------------------------------- */
.main-slider {
	position: relative;
	padding: 0;
	margin: 0;
	height: 0;
	padding: 64% 0 0 0;
	overflow: hidden;
}
.main-slider div,
.main-slider li.main-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media only screen and (min-width: 769px){
	.main-slider li.main-slide.zoomout {
		animation: fadezoom 6s 0s forwards;
	}
}
@media only screen and (max-width: 768px){
	.main-slider {
		width: calc(64% + 60px);
		padding: 150% 0 0 0;
		overflow: visible;
	}
	.main-slider li.main-slide {
		overflow: hidden;
	}
	.main-slider li.main-slide img {
		display: block;
		width: 100%;
		transform: translateX(-30px);
	}
	.main-slider li.main-slide.zoomout img {
		animation: fadeflow 10s 0s forwards;
	}
	.main-slider::after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 60px;
		height: 100%;
		background: #fff;
	}
}
@keyframes fadezoom {
	0% {
	  transform: scale(1.2);
	}
	100% {
	  transform: scale(1);
	}
}
@keyframes fadeflow {
	0% {
		transform: translateX(-60px);
	}
	100% {
		transform: translateX(0);
	}
}


/* ----------------------------------------
* slick
---------------------------------------- */
.slick-dots {
	width: 100%;
	padding: 0;
	bottom: 4%;
	left: 10%;
	z-index: 10;
	text-align: left;
}
.slick-dots li {
	width: 72px;
	height: 3px;
	border-radius: 0;
	margin: 0 12px;
}
.slick-dots li button {
	width: 72px;
	height: 3px;
	border-radius: 0;
	padding: 0;
	background: none;
}
.slick-dots li button:before {
	width: 72px;
	height: 3px;
	border-radius: 0;
	content: '';
	background: #a0d5ea;
	opacity: 1;
}
.slick-dots li.slick-active button:before {
	opacity: 1;
	background: #009ce5;
}
.slick-dotted.slick-slider {
    margin-bottom: 0;
}
@media print, screen and (max-width: 768px){
	.slick-dots {
		bottom: -4%;
	}
	.slick-dots li {
		width: 40px;
		margin: 0 6px 0 0;
	}
	.slick-dots li button {
		width: 40px;
	}
	.slick-dots li button:before {
		width: 40px;
	}
}